/* =========================================================================
   SIGNATURES. Three moves, each applied on every page. DESIGN.md section 8.
   ========================================================================= */

/* ---- 8.1 The pack turntable -------------------------------------------
   A real CSS 3D box, not a sprite sheet. The reference site draws 36 frames
   into a 2D canvas; this is two images and a transform, which is crisper at
   any size, survives a phone, and lets the face swap per protein.

   A stand-up pouch is a flat object: front, back, and two narrow edges that
   are just dark foil. So the box is four faces, the edges built from a
   gradient rather than a third image.                                      */
.pack {
  --pack-w: clamp(13rem, 24vw, 22rem);
  --pack-h: calc(var(--pack-w) * 1.5);
  --pack-d: calc(var(--pack-w) * 0.13);
  position: relative;
  width: var(--pack-w);
  height: var(--pack-h);
  perspective: 1600px;
  perspective-origin: 50% 45%;
}
.pack__box {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* --turn is driven by scroll on the range section and by the entrance
     animation in the hero; everything else about the pack is static. */
  transform: rotateX(-4deg) rotateY(var(--turn, -22deg));
  transition: transform var(--dur-hero) var(--ease-in-out);
  will-change: transform;
}
.pack__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 2px;
  overflow: hidden;
}
.pack__face img { width: 100%; height: 100%; object-fit: contain; }
.pack__face--front { transform: translateZ(calc(var(--pack-d) / 2)); }
.pack__face--back  { transform: rotateY(180deg) translateZ(calc(var(--pack-d) / 2)); }
/* the two edges: dark foil with one highlight, no image needed */
.pack__edge {
  position: absolute;
  top: 0;
  height: 100%;
  width: var(--pack-d);
  background: linear-gradient(90deg, #050505, #221f1e 45%, #0c0b0b);
  border-radius: 1px;
}
.pack__edge--l { left: 0;  transform: rotateY(-90deg); transform-origin: left center; }
.pack__edge--r { right: 0; transform: rotateY(90deg);  transform-origin: right center; }
/* the pack throws a soft shadow on the ground under it */
.pack::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; bottom: -7%;
  height: 12%;
  background: radial-gradient(ellipse at center, oklch(0 0 0 / 0.65), transparent 72%);
  filter: blur(8px);
  z-index: -1;
}
/* the faces cross-fade when the range swaps protein */
.pack__face img { transition: opacity var(--dur-ui) var(--ease-out); }
.pack[data-swapping='true'] .pack__face--front img { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .pack__box { transform: rotateY(0deg) !important; transition: none; }
}

/* ---- 8.2 The seam ------------------------------------------------------
   Every CTA is split by a 2px crimson seam, the heat-seal off the pouch. The
   label sits left, the arrow travels right on hover, and the label never
   disappears (house rule).                                                 */
.btn--seam {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--color-neutral-12);
  color: var(--color-neutral-1);
  border-radius: var(--radius-sm);
}
.btn--seam > .btn__label {
  display: flex; align-items: center;
  padding: 1rem 1.6rem;
  font-family: var(--font-heading);
  font-size: var(--text-1);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.btn--seam > .btn__tip {
  display: grid; place-items: center;
  width: 3.5rem;
  border-left: 2px solid var(--color-accent-9);
  background: var(--color-neutral-12);
  transition: background-color var(--dur-ui) var(--ease-out);
}
.btn--seam > .btn__tip svg { transition: transform var(--dur-ui) var(--ease-out); }
.btn--seam:hover > .btn__tip { background: var(--color-accent-9); }
.btn--seam:hover > .btn__tip svg { transform: translateX(3px); }
.btn--seam:hover { color: var(--color-neutral-1); }
/* the accent variant: the whole button is fire, the seam goes dark */
.btn--seam.is-accent { background: var(--color-accent-9); color: var(--color-on-accent); }
.btn--seam.is-accent > .btn__tip { background: var(--color-accent-9); border-left-color: oklch(0 0 0 / 0.35); }
.btn--seam.is-accent:hover > .btn__tip { background: oklch(0 0 0 / 0.25); }

/* ---- 8.3 The fire highlight -------------------------------------------
   The last words of every H1 and H2 take the accent. Contract rule 1, made
   visible, on every page.                                                  */
.hl { color: var(--color-accent-11); }
.hero .hl, .page-hero--media .hl { color: oklch(0.72 0.19 27); }

/* ---- Hero: copy left, pack right, stats as the last grid row ----------- */
.hero--split .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: var(--space-xl);
  row-gap: var(--space-l);
  padding-block: var(--space-2xl) var(--space-l);
}
.hero--split .hero__copy { grid-column: 1; align-self: center; }
.hero--split .hero__pack { grid-column: 2; display: grid; place-items: center; }
.hero--split .hero__stats { grid-column: 1 / -1; }
.hero__title { text-transform: uppercase; }
.pack--hero { --pack-w: clamp(14rem, 26vw, 24rem); }

@media (max-width: 63.99rem) {
  /* Mobile is its own arrangement, not a shrink: the pack reads first, then
     the headline and CTA inside the first fold, stats tucked underneath. */
  .hero--split .hero__inner { grid-template-columns: 1fr; padding-block: var(--space-m); row-gap: var(--space-s); }
  .hero--split .hero__pack { grid-column: 1; grid-row: 1; }
  .hero--split .hero__copy { grid-column: 1; grid-row: 2; }
  .pack--hero { --pack-w: clamp(9.5rem, 38vw, 14rem); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .btn--seam { width: 100%; justify-content: space-between; }
}

/* ---- Range ------------------------------------------------------------- */
.range__grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 64rem) {
  .range__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: var(--space-2xl); }
  .range__pack { position: sticky; top: calc(var(--nav-h) + var(--nav-offset) + var(--space-xl)); display: grid; place-items: center; }
}
@media (max-width: 63.99rem) { .range__pack { display: none; } }
.range__lede { max-width: 54ch; color: var(--color-text-muted); margin-block: var(--space-s) var(--space-l); }
.range__row { grid-template-columns: auto 1fr auto auto; }
.range__status {
  font-family: var(--font-mono); font-size: var(--text-n2);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted); white-space: nowrap;
}
.range__status.is-ready { color: var(--color-instock); }
.range__row:hover .hairline__title { color: var(--color-accent-11); }

/* ---- Founder: uncropped 4:5 plate, copy running past it --------------- */
.founder__grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 64rem) {
  .founder__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-2xl); }
  .founder__media { position: sticky; top: calc(var(--nav-h) + var(--nav-offset) + var(--space-xl)); }
}
.founder__media img { border-radius: var(--radius-sm); }
.founder__copy h2 { margin-block: var(--space-s) var(--space-m); }
.founder__copy p { color: var(--color-text-muted); max-width: 62ch; }
.founder__marks {
  list-style: none; padding: 0;
  margin-top: var(--space-l); padding-top: var(--space-m);
  border-top: 1px solid var(--color-line);
  display: grid; gap: 0.7rem var(--space-m);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  font-family: var(--font-mono); font-size: var(--text-n1);
}
.founder__marks li { display: flex; align-items: center; gap: 0.6rem; }
.founder__marks svg { width: 1rem; height: 1rem; color: var(--color-accent-11); flex: 0 0 auto; }

/* ---- Why: the sheet --------------------------------------------------- */
.why__head { max-width: 58ch; margin-bottom: var(--space-xl); }
.why__head p { color: var(--color-text-muted); margin-top: var(--space-s); }
.why__row { grid-template-columns: auto 1fr; gap: var(--space-m); }
@media (min-width: 64rem) { .why__row { grid-template-columns: auto 16rem 1fr; } }
.why__mark {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  color: var(--color-accent-11);
}
.why__mark svg { width: 1.9rem; height: 1.9rem; }

/* ---- Stockists: full-bleed with the scrim contract rule 2 demands ----- */
.stockists--media { position: relative; }
.stockists__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.stockists__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
/* THE SCRIM. Not optional and not a per-section decision: the heading sits on
   a photograph, so the photograph is covered before the text is coloured. */
.stockists__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--color-neutral-1) 12%, oklch(0.175 0.008 27 / 0.72) 58%, oklch(0.175 0.008 27 / 0.45) 100%),
    linear-gradient(180deg, var(--color-neutral-1), transparent 22%, transparent 78%, var(--color-neutral-1));
}
.stockists__grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 64rem) { .stockists__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); } }
.stockists__lede { color: var(--color-text-muted); margin-top: var(--space-s); max-width: 52ch; }
.stockists__row { grid-template-columns: auto 1fr; }

/* ---- Closing ---------------------------------------------------------- */
.closing { position: relative; }
.closing__lede { color: var(--color-text-muted); margin-top: var(--space-s); max-width: 48ch; }
.cta-block__title { text-transform: uppercase; }

/* ---- Defect fixes, first look at 1440 --------------------------------- */

/* 1. The hero eyebrow was unreadable: the photograph's brightest area is the
   top left, exactly where the eyebrow sits, and the overlay was bottom-up
   only. This is contract rule 2 broken in our own build, which is the same
   mistake the reference site makes, so the fix is a real scrim rather than a
   darker text colour. A left-to-right wash joins the bottom-up one. */
.hero__overlay {
  background:
    linear-gradient(to right, oklch(0.12 0.006 27 / 0.92) 0%, oklch(0.12 0.006 27 / 0.72) 28%, oklch(0.12 0.006 27 / 0.28) 56%, transparent 78%),
    linear-gradient(to top, oklch(0.1 0.006 27 / 0.9) 0%, oklch(0.1 0.006 27 / 0.55) 30%, oklch(0.1 0.006 27 / 0.18) 62%, transparent 100%);
}
/* and the eyebrow itself takes the lighter accent step on media, because
   accent-11 on a photograph is a different problem from accent-11 on the ground */
.hero .eyebrow { color: oklch(0.8 0.15 27); }
.hero .eyebrow::before { background: oklch(0.72 0.19 27); }

/* 2. The secondary hero CTA was near-white, so it read as the primary action
   sitting next to the actual primary. On media it becomes glass: the
   photograph shows through, the label stays legible, and the hierarchy is
   obvious again. */
.hero .btn--seam:not(.is-accent) {
  background: oklch(1 0 0 / 0.08);
  color: var(--color-neutral-12);
  border: 1px solid oklch(1 0 0 / 0.28);
  backdrop-filter: blur(10px);
}
.hero .btn--seam:not(.is-accent) > .btn__tip {
  background: transparent;
  border-left-color: oklch(0.72 0.19 27);
}
.hero .btn--seam:not(.is-accent):hover { background: oklch(1 0 0 / 0.14); }
.hero .btn--seam:not(.is-accent):hover > .btn__tip { background: oklch(0.72 0.19 27); color: var(--color-neutral-1); }

/* 3. The hairline title and its meta were running together on one line, so a
   stockist read as "Glenelg Barbeque Inn 160 Jetty Rd Glenelg SA 5045". The
   title is a block. */
.hairline__title { display: block; }
.hairline__meta { display: block; }

/* On a phone the lede ran five lines and pushed the CTA out of the first
   fold. The house rule is visual, headline and CTA all inside that fold, so
   the lede is clamped rather than the headline shrunk: the copy is still there
   for anyone who reads it, and the button is where a thumb expects it. */
@media (max-width: 63.99rem) {
  .hero__sub {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--text-0);
  }
}

/* ---- The grime, DESIGN.md 4 -------------------------------------------
   The reference's face carries its distress in the outlines. Ours is a free
   condensed face plus this, applied only where the type is big enough to
   carry it. Below 48px the specks eat legibility instead of adding texture,
   so the filter comes off entirely rather than being softened.               */
.grime-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.hero__title,
.cta-block__title,
.section-display {
  filter: url(#grime);
}
.hw-section h2,
.ticker__item {
  filter: url(#grime-soft);
}

/* A filter turns the element into its own containing block and kills
   position: fixed inside it, so it never goes on a wrapper - only on the text
   element itself. Guard kept here as a reminder rather than a fix. */

@media (max-width: 47.99rem) {
  .hw-section h2, .ticker__item { filter: none; }
}
/* Windows high contrast and forced-colors strip filters anyway; make that
   explicit so the text is never half-erased with no texture to justify it. */
@media (forced-colors: active) {
  .hero__title, .cta-block__title, .section-display,
  .hw-section h2, .ticker__item { filter: none; }
}

/* =========================================================================
   THE WRAPPER SYSTEM. The reference's whole page is built from rounded,
   inset blocks rather than flush full-bleed bands, and that is most of why it
   reads as designed rather than as sections stacked on a page. Everything
   below is that system.
   ========================================================================= */

/* ---- Promo bar, above the nav ----------------------------------------- */
.promo {
  position: relative;
  display: flex; align-items: center;
  background: var(--color-accent-9);
  color: var(--color-on-accent);
  overflow: hidden;
  height: 34px;
}
.promo__track { display: flex; width: max-content; gap: var(--space-l); animation: ticker-slide 46s linear infinite; }
.promo:hover .promo__track { animation-play-state: paused; }
.promo__item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: var(--text-n2);
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.promo__item svg { width: 0.9em; height: 0.9em; flex: 0 0 auto; }
.promo__x {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 34px; display: grid; place-items: center;
  background: var(--color-accent-9); color: inherit;
}
.promo__x svg { width: 0.95rem; height: 0.95rem; }
.promo[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .promo__track { animation: none; } }

/* the nav sits under the promo bar, so sticky has to account for it */
body:has(.promo:not([hidden])) .nav { top: calc(var(--nav-offset)); }

/* ---- The statement block: type as a layer, product in front ------------ */
.statement {
  position: relative;
  padding-block: clamp(4rem, 9vw, 9rem);
  overflow: hidden;
  border-block: 1px solid var(--color-line);
}
.statement__ground { position: absolute; inset: 0; z-index: -2; }
.statement__ground img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.statement__ground::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 30%, oklch(0.12 0.01 27 / 0.75) 85%),
    linear-gradient(180deg, var(--color-neutral-1), transparent 18%, transparent 82%, var(--color-neutral-1));
}
.statement__inner {
  position: relative;
  display: grid; place-items: center;
  min-height: clamp(26rem, 46vw, 40rem);
}
/* The headline is set to be SEEN, not read: it is aria-hidden, the real
   heading is in the copy block for screen readers. */
.statement__type {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(3.4rem, 12.5vw, 14rem);
  line-height: 0.84; letter-spacing: -0.02em; text-transform: uppercase;
  color: oklch(0.42 0.05 27 / 0.62);
  text-align: center; white-space: nowrap;
  pointer-events: none; user-select: none;
}
.statement__pack { position: relative; z-index: 1; }
.pack--statement { --pack-w: clamp(11rem, 22vw, 20rem); }
.statement__copy {
  position: relative; z-index: 2;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: grid; justify-items: center; gap: var(--space-m);
  text-align: center; max-width: 34rem;
}
.statement__lede { font-size: var(--text-1); color: var(--color-neutral-11); text-wrap: balance; }

/* ---- Range as cards on the timber -------------------------------------- */
.range__head { max-width: 48rem; margin-bottom: var(--space-2xl); }
.range__head h2 { margin-top: var(--space-s); }
.range__lede { color: var(--color-text-muted); margin-top: var(--space-s); }
.range__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-m);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 62rem) { .range__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); } }
.range__card a { display: grid; gap: 0.15rem; }
.range__media {
  display: block; position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-s);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.range__media img { transition: transform var(--dur-reveal) var(--ease-out); }
.range__card a:hover .range__media { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.range__card a:hover .range__media img { transform: scale(1.04); }
.range__badge {
  position: absolute; left: var(--space-s); top: var(--space-s);
  padding: 0.3rem 0.6rem; border-radius: 999px;
  background: oklch(0 0 0 / 0.6); backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: var(--text-n2);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-12);
}
.range__card:not(.is-soon) .range__badge { background: var(--color-accent-9); color: var(--color-on-accent); }
.range__name {
  font-family: var(--font-heading); font-weight: 800;
  font-size: var(--text-3); text-transform: uppercase; letter-spacing: -0.01em;
  transition: color var(--dur-ui) var(--ease-out);
}
.range__card a:hover .range__name { color: var(--color-accent-11); }
.range__line { font-size: var(--text-n1); color: var(--color-text-muted); }

/* ---- Rounded wrappers on the remaining full-bleed blocks --------------- */
.stockists--media .stockists__bg,
.closing .wash {
  border-radius: var(--radius-xl);
  overflow: hidden;
  inset: var(--space-m);
}
@media (max-width: 47.99rem) {
  .stockists--media .stockists__bg, .closing .wash { inset: var(--space-2xs); border-radius: var(--radius-lg); }
}

/* The pack was reading as a dark slab on dark timber. The reference gets its
   separation for free because its packs are bright red; ours are matte black,
   so they need the light. A warm pool behind the product does it, and it also
   explains where the amber key light in every photograph is coming from. */
.statement__pack::before {
  content: '';
  position: absolute;
  left: 50%; top: 46%;
  width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    oklch(0.62 0.14 58 / 0.42) 0%,
    oklch(0.5 0.12 45 / 0.22) 34%,
    transparent 66%);
  z-index: -1;
  pointer-events: none;
}
.statement__pack { position: relative; isolation: isolate; }
.statement__ground img { opacity: 0.68; }
/* and lift the pack itself just off the ground it sits on */
.pack--statement .pack__face--front { filter: brightness(1.12) contrast(1.04); }

/* ---- The marquee wall -------------------------------------------------
   Five rows of display type running in alternating directions with the pack
   turning through them. The rows are texture, not headings, which is why they
   are aria-hidden and why they are allowed to run off both edges.            */
.wildside {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 7rem);
  border-block: 1px solid var(--color-line);
  isolation: isolate;
}
.wildside__ground { position: absolute; inset: 0; z-index: -2; }
.wildside__ground img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.wildside__ground::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--color-neutral-1), transparent 14%, transparent 86%, var(--color-neutral-1)),
    linear-gradient(90deg, oklch(0.16 0.02 27 / 0.6), transparent 22%, transparent 78%, oklch(0.16 0.02 27 / 0.6));
}
.wildside__rows { display: grid; gap: clamp(0.1rem, 0.4vw, 0.4rem); }
.wildside__row { overflow: hidden; }
.wildside__track {
  display: flex; width: max-content; gap: 0.5em;
  animation: ticker-slide var(--row-dur, 45s) linear infinite;
}
/* alternate direction row to row: one long scroll in a single direction reads
   as a broken page, two directions read as a machine running */
.wildside__row[data-dir='r'] .wildside__track { animation-direction: reverse; }
.wildside:hover .wildside__track { animation-play-state: paused; }
.wildside__item {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(2.6rem, 8.2vw, 8.5rem);
  line-height: 0.92; letter-spacing: -0.018em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--color-neutral-12);
  filter: url(#grime);
}
/* the middle rows sit back so the pack has somewhere to be */
.wildside__row:nth-child(2) .wildside__item,
.wildside__row:nth-child(4) .wildside__item { color: oklch(0.55 0.04 27 / 0.55); }

.wildside__pack {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  z-index: 2;
}
.pack--wild { --pack-w: clamp(9rem, 19vw, 17rem); pointer-events: auto; }
.wildside__pack::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: min(46rem, 70vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, oklch(0.1 0.01 27 / 0.82) 0%, oklch(0.1 0.01 27 / 0.45) 42%, transparent 68%);
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) { .wildside__track { animation: none; } }
@media (max-width: 47.99rem) { .wildside__item { filter: none; } }

/* =========================================================================
   THE SWEEP. The house premium signal, built the way ceramicar builds it:
   a multi-stop gradient running the length of every display line and handing
   off to the accent at the tail, rather than a flat colour on the last two
   words. Ours is bone handing off to ember, because the material here is
   smoke and heat rather than machined chrome, and the hue is the brand's own
   27 (ceramicar runs 26.6, which is why these read as the same family).

   Display type only. padding-bottom keeps descenders inside the painted box,
   which background-clip would otherwise shear off - the single most common
   way this technique ships broken.
   ========================================================================= */
.sweep-ember {
  background-image: linear-gradient(
    98deg,
    oklch(0.820 0.010 27) 0%,
    oklch(0.985 0.004 27) 19%,
    oklch(0.760 0.012 27) 37%,
    oklch(0.985 0.004 27) 55%,
    oklch(0.760 0.150 27) 72%,
    oklch(0.620 0.235 27) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.08em;
}

/* The same sweep without the ember hand-off, for headings that already sit
   beside something crimson. */
.sweep-bone {
  background-image: linear-gradient(
    98deg,
    oklch(0.790 0.010 27) 0%,
    oklch(0.985 0.004 27) 24%,
    oklch(0.730 0.012 27) 47%,
    oklch(0.985 0.004 27) 75%,
    oklch(0.820 0.010 27) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.08em;
}

/* Every H1 and section H2 takes the sweep. This replaces the flat accent on
   the last two words: the highlight was doing the job of saying "these words
   matter", the sweep does the job of saying "this whole site is one material". */
.hero__title, .cta-block__title { }
.hero__title .hl, .cta-block__title .hl, .hw-section h2 .hl { color: inherit; }

/* On media the sweep would fight the photograph behind it, so the hero keeps
   the sweep but gains a soft shadow to hold it off the picture. */
.hero__title { text-shadow: 0 2px 30px oklch(0 0 0 / 0.55); }

/* ---- The logo. It is a detailed oval badge, not a wordmark, so it needs
   real size or it reads as a smudge. The reference runs its badge at nearly
   the full nav height and lets it overhang; this does the same. ---------- */
.nav__brand img {
  height: clamp(52px, 5vw, 66px);
  width: auto;
  max-width: none;
}
.nav { overflow: visible; }
.mobile-menu__head .nav__brand img { height: 48px; }
.site-footer__brand img { height: clamp(88px, 9vw, 116px); }

/* ---- The process rail -------------------------------------------------
   A scroll container first and a drag surface second, so it works with no JS,
   with a keyboard, and with a trackpad, and the drag is an enhancement rather
   than the mechanism. Nothing is cropped: each card is sized by height and the
   photograph sets its own width.                                           */
.process__head { margin-bottom: var(--space-xl); }
.process__head h2 { margin-top: var(--space-s); }
.process__rail {
  display: flex; gap: var(--space-m);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-inline: max(var(--space-m), calc((100vw - var(--container-site)) / 2));
  padding-block: var(--space-2xs) var(--space-m);
  scrollbar-width: none;
  cursor: grab;
}
.process__rail::-webkit-scrollbar { display: none; }
.process__rail[data-dragging='true'] { cursor: grabbing; scroll-snap-type: none; }
.process__rail:focus-visible { outline: 2px solid var(--color-accent-9); outline-offset: 4px; }

.process__card {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: center;
  width: auto;
}
.process__card img {
  height: clamp(15rem, 34vw, 27rem);
  width: auto;
  max-width: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  user-select: none; -webkit-user-drag: none;
}
.process__card figcaption {
  display: grid; gap: 0.15rem;
  margin-top: var(--space-s);
  max-width: 34ch;
}
.process__i { font-family: var(--font-mono); font-size: var(--text-n2); color: var(--color-accent-11); letter-spacing: 0.1em; }
.process__name { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-2); text-transform: uppercase; }
.process__note { font-size: var(--text-n1); color: var(--color-text-muted); }
/* the client's own photographs get a hairline so they are visibly the real thing */
.process__card.is-real img { box-shadow: var(--shadow-card), 0 0 0 1px oklch(0.72 0.17 27 / 0.45); }