/* ============================================================
   GENESIS BAKERY — brand-true theme
   Genesis Black ground, Genesis White ink, premium food photography.
   Re-skin by editing the :root tokens.

   OFFICIAL BRAND GUIDELINES (brand/Genesis_BrandGuidelines.pdf):
   · Primary palette = Genesis Black + Genesis White, applied here as a warmed
     near-black and ivory with a champagne-gold hairline accent (see :root),
     applied directly: monochrome chrome, no invented accent colour.
     Colour enters only through photography, the range's colour-block
     device, and the afters packaging world.
   · Logo: supplied files only, never redrawn or recoloured; white on
     dark. Screen minimums: 70px wide (logo), 195px (with strapline) —
     nav ≈107px, hero ≈278px, footer ≈116px, all compliant.
   · Secondary palette (product Pantones) is PACKAGING-ONLY per the
     guidelines — deliberately NOT used for the web carousel/strip,
     whose colours are drawn from the photography instead.
   · Brand typeface = Fieldwork (Geo Regular body / Geo DemiBold
     emphasis). Hanken Grotesk stands in until the licensed files
     arrive — see the @font-face block below to activate.
   · Type system enforced site-wide: TWO weights only — 400 for body
     and large headings (the guidelines set their own headings light),
     600 for small headings, labels and emphasis. Nothing heavier.
   · Logo clear space (p.4): keep ≥3× the grain vertically and ≥2×
     horizontally around every logo placement — the nav bar, hero and
     footer all hold well clear of this; don't crowd them.
   ============================================================ */

/* ---- Fieldwork activation (dormant until the licensed files exist) ----
   1. Drop the licensed WOFF2 files into assets/fonts/
   2. Uncomment this block. The --font stack below already lists
      "Fieldwork Geo" first, so no other change is needed.
@font-face {
  font-family: "Fieldwork Geo";
  src: url("../assets/fonts/fieldwork-geo-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fieldwork Geo";
  src: url("../assets/fonts/fieldwork-geo-demibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
*/

/* ---- Self-hosted stand-ins (SIL Open Font License) ----
   Hanken Grotesk is a variable font: one 34KB file covers both brand weights.
   Young Serif is subset to the six letters of "afters" (1.5KB); nothing else
   sets in it. No fonts.googleapis.com round-trip, no third-party origin. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Young Serif";
  src: url("../assets/fonts/young-serif-afters.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Core palette — the guidelines' black-and-white pairing, warmed for a
     maison page: a near-black ground with the faintest violet in it, ivory
     ink rather than clinical white, and champagne gold as the one accent,
     spent only on eyebrows, hairlines and the fold. Everything louder still
     comes from photography and the afters packaging world. */
  --bg:        #08080b;   /* Genesis Black, warmed */
  --bg-2:      #0f0f13;   /* lifted panel */
  --surface:   #16161b;   /* cards */

  --ink:       #ede8df;                 /* ivory */
  --ink-soft:  rgba(237,232,223,0.72);  /* body text */
  --ink-faint: rgba(237,232,223,0.50);  /* captions */

  /* Interactive emphasis stays ivory; gold is a hairline, never a button */
  --accent:    #ede8df;
  --accent-2:  #d9d2c4;
  --accent-ink:#08080b;
  --gold:      #c9a961;                 /* champagne — eyebrows, hairlines, the fold */
  --gold-soft: rgba(201,169,97,0.55);

  --line:      rgba(237, 232, 223, 0.18);
  --line-soft: rgba(237, 232, 223, 0.09);

  /* Sharp corners: luxury furniture is square or hairline-framed, not app-rounded */
  --radius:    2px;
  --radius-sm: 2px;
  --maxw:      1180px;

  /* Fieldwork Geo is the official brand face (guidelines p.13); Hanken
     Grotesk stands in until the licensed files land in assets/fonts/ */
  --font: "Fieldwork Geo", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Young Serif survives ONLY as the stand-in for the afters sub-brand
     wordmark (its chunky lowercase serif) until official afters logo
     artwork is supplied — everything else is set in the brand face. */
  --font-display: "Young Serif", "Iowan Old Style", Georgia, serif;

  --shadow:    0 26px 70px -24px rgba(0,0,0,0.7);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Cross-document view transitions: pages cross-fade into each other and the
   header holds still across the change. Browsers without support simply keep
   ordinary navigation. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
body {
  margin: 0;
  background: var(--bg); /* flat ground — the SaaS-style radial glows are gone */
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Two weights only, per the guidelines: Regular (400) for text and large
   headings — the guidelines set their own big headings light — and
   DemiBold (600) for small headings, labels and emphasis. */
h1, h2, h3 { font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.section__title, .band__inner h2, .cta__title {
  font-family: var(--font); font-weight: 400; letter-spacing: -0.015em;
}
/* orphan control on running text; numbers that line up in columns */
p { text-wrap: pretty; }

::selection { background: var(--accent); color: var(--accent-ink); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3d3d3d; }

/* staggered scroll reveal — only hidden when JS is present to reveal it
   (html.js gate = content is never permanently invisible if JS/observer fails) */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.in { opacity: 1; transform: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- shared ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 16px;
  font-feature-settings: "case"; /* punctuation raised to cap height in all-caps runs */
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow--center { display: flex; justify-content: center; }
.eyebrow--center::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }
.accent { color: var(--accent-2); }
.center { text-align: center; }

.section { padding: 104px 0; }
.section--alt { background: var(--bg-2); }
.section__title { font-size: clamp(2rem, 3.9vw, 3.15rem); margin-bottom: 18px; }
.section__lead { color: var(--ink-soft); max-width: 640px; margin: 0 auto 52px; font-size: 1.1rem; }

/* ---------- buttons ---------- */
/* Square, flat, quiet — no gradients, sheens or glows anywhere on a maison page */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px;
  border-radius: var(--radius);
  font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-2); }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(237,232,223,0.4); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--block { width: 100%; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(8, 8, 11, 0.72); /* the warmed black, not the retired espresso */
  border-bottom: 1px solid var(--line-soft);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
/* decorative truth: where and since when, set quietly in the middle of the shelf */
.nav__meta {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0; font-variant-numeric: tabular-nums;
}
@media (max-width: 1200px) { .nav__meta { display: none; } } /* six links now — give them room sooner */
.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 24px; width: auto; display: block; }
/* Footer signs off with the primary lock-up, above its 195px minimum width */
.footer__lockup { height: 96px; width: auto; display: block; margin-bottom: 16px; }
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a { color: var(--ink-soft); font-weight: 600; font-size: 0.96rem; transition: color .15s; }
.nav__links a:hover { color: var(--ink); }
.nav__links .btn { color: var(--ink); }

.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; }

/* ============================================================
   HERO — full-bleed photography crossfade
   ============================================================ */
.hero { position: relative; min-height: 94vh; display: flex; align-items: center; overflow: hidden; background: var(--bg); }
/* the shop-window photograph, served modern-format-first */
.hero__img.hero__img--window {
  background-image: image-set(
    url("../assets/images/hero-still-piping-1440.avif") type("image/avif"),
    url("../assets/images/hero-still-piping-1440.webp") type("image/webp"),
    url("../assets/images/hero-still-piping.jpg") type("image/jpeg"));
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  will-change: transform, opacity;
}
/* The craft film (loaded by main.js only when .hero__media declares data-film
   and the visitor hasn't asked for reduced motion / data saving). The still
   underneath is its poster; the film fades in only once it can play. */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.2s ease;
}
.hero__media.has-video .hero__video { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
/* One held photograph. The drift is ~3% over 28s LINEAR — slow enough
   that you cannot consciously see it move, you only feel the frame is
   alive — and it plays once. The old hero moved 8% in 8s on an
   ease-out, restarted by the carousel at 4.4s, so it never resolved. */
@keyframes heroDrift { from { transform: scale(1.001); } to { transform: scale(1.032); } }
.hero::after {  /* the slate carries the type — legibility stays a whisper */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.38) 42%, rgba(0,0,0,0.08) 80%, transparent 100%),
    linear-gradient(0deg, rgba(0,0,0,0.5), transparent 40%);
}
/* The fold: one iridescent hairline — teal through champagne to plum, the
   thin-film palette of the afters silk — drawn in after the headline lands.
   It replaced a seven-pixel band of the six range block-colours, which read
   as a retail shelf edge rather than a maison detail. */
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg,
    transparent 0%, #2f7c86 14%, var(--gold) 50%, #7e2f63 86%, transparent 100%);
  opacity: 0.9;
  transform: scaleX(0); transform-origin: left center;
}
html.js .hero--hold.is-in::before { transform: scaleX(1); transition: transform 1.4s cubic-bezier(.16,1,.3,1) 3300ms; }
html:not(.js) .hero::before { transform: none; }
.hero__inner { position: relative; z-index: 2; padding: 120px 0 96px; max-width: 880px; }
/* The primary lock-up leads the hero. Sized so the strapline stays well
   above the guidelines' 195px minimum width at every viewport. */
.hero__h1 { margin: 0 0 34px; }
.hero__logo {
  height: clamp(120px, 20vw, 216px); width: auto; display: block;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5));
}
/* the scale break: display type jumps far past the h2 tier, and at this
   size the defaults must be tightened by hand — lh under 1.05, tighter
   tracking, and a small negative margin so the ink (not the box) sits
   flush with the grid edge */
.hero__title {
  font-size: clamp(2.7rem, 6.8vw, 5.8rem);
  line-height: 1.04;
  letter-spacing: 0; /* the serif carries its own fit — grotesk tracking rules don't apply */
  margin-left: -0.02em;
  margin-bottom: 26px;
}
/* flat caramel, not gradient text — the one amber moment above the fold */
.hero__title .accent { color: var(--accent-2); }
.hero__lead { color: var(--ink-soft); font-size: clamp(1.08rem, 1.7vw, 1.32rem); max-width: 560px; margin: 0 0 36px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__scroll { display: inline-flex; align-items: center; gap: 14px; margin-top: 46px; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
/* The scroll cue is a hairline that draws itself once, not an arrow
   that bobs for ever — perpetual motion reads as a nervous tic. */
.hero__scroll::before { content: ""; width: 56px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left center; }

/* Headline lines rise from behind a hard edge rather than fading in
   from nothing — revealed, not appearing. */
.ln { display: block; overflow: hidden; }
.ln > i { display: block; font-style: normal; }

/* ============ ENTRANCE — THE HOLD ============
   Near-black on the wordmark alone, a beat of stillness, then the
   photograph is already there; the wordmark travels from the centre of
   the frame (JS measures the true delta into --dx/--dy) to its
   resting place. All motion ends at ~4.4s except the 28s drift.
   Every pre-state is gated on html.js and released by .is-in, so a
   visitor without JavaScript gets the finished frame, never a blank. */
/* The photograph is never hidden: it is the page's largest paint and lands
   with the HTML. Only the mark and the type are choreographed over it. */
html.js .hero--hold.is-in .hero__img { animation: heroDrift 28s linear 1400ms forwards; }
/* Repeat visits within a session skip the entrance (main.js drops .hero--hold) */
.hero:not(.hero--hold)::before { transform: none; }
html.js .hero--hold .hero__logo { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1.35); }
html.js .hero--hold.is-in .hero__logo {
  opacity: 1; transform: none;
  transition: transform 1300ms cubic-bezier(.16,1,.3,1) 1400ms,
              opacity 900ms cubic-bezier(.16,1,.3,1) 260ms;
}
html.js .hero--hold .ln > i { transform: translateY(112%); }
html.js .hero--hold.is-in .ln > i { transform: none; transition: transform 1150ms cubic-bezier(.16,1,.3,1); }
html.js .hero--hold.is-in .ln:nth-child(1) > i { transition-delay: 2050ms; }
html.js .hero--hold.is-in .ln:nth-child(2) > i { transition-delay: 2190ms; }
html.js .hero--hold .hero__lead, html.js .hero--hold .hero__actions { opacity: 0; transform: translateY(10px); }
html.js .hero--hold.is-in .hero__lead {
  opacity: 1; transform: none;
  transition: opacity 1000ms ease 2650ms, transform 1000ms cubic-bezier(.16,1,.3,1) 2650ms;
}
html.js .hero--hold.is-in .hero__actions {
  opacity: 1; transform: none;
  transition: opacity 900ms ease 3050ms, transform 900ms cubic-bezier(.16,1,.3,1) 3050ms;
}
html.js .hero--hold .hero__scroll { opacity: 0; }
html.js .hero--hold.is-in .hero__scroll { opacity: 1; transition: opacity 1s ease 3400ms; }
html.js .hero--hold.is-in .hero__scroll::before { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.16,1,.3,1) 3500ms; }

/* ============================================================
   PAGE MASTHEAD (range / trade) + HOME CLOSE
   ============================================================ */
.masthead { padding: 132px 0 24px; }
.masthead__title {
  font-family: var(--font); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.05;
  margin: 10px 0 16px; letter-spacing: -0.015em;
}
.masthead__lead { color: var(--ink-soft); max-width: 620px; font-size: 1.1rem; margin: 0 0 24px; }

.close { padding: 100px 0 124px; text-align: center; border-top: 1px solid var(--line-soft); }
.close__line { font-family: var(--font); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 30px; }

/* ============================================================
   TRUST BAR
   ============================================================ */
/* The facts as one quiet tracked line — confidence, not a counter bar */
.stats { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--bg-2); }
.stats__line {
  margin: 0; padding: 26px 0; text-align: center;
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.74rem; font-weight: 600;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.stats__lead { color: var(--ink); font-weight: 600; }

/* ============================================================
   AT A GLANCE - Park Cakes' stats band, in Genesis colours
   Theirs: 58px light figures in red, 22px serif labels, 3 x 2 grid with
   vertical rules, on cream. Here: ivory figures in the brand face at 400,
   small tracked labels, hairline rules, on the lifted black.
   ============================================================ */
.glance { background: var(--bg-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 88px 0 92px; }
.glance__title { text-align: center; font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -0.015em; margin: 0 0 56px; }
.glance__grid { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
.glance__grid li { text-align: center; padding: 0 20px; border-left: 1px solid var(--line-soft); }
.glance__grid li:nth-child(3n+1) { border-left: 0; }
.glance__fig { margin: 0 0 10px; font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.glance__label { margin: 0; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--gold); font-feature-settings: "case"; }
@media (max-width: 640px) {
  .glance { padding: 64px 0 68px; }
  .glance__title { margin-bottom: 40px; }
  .glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .glance__fig { font-size: 2rem; }
  .glance__grid li { padding: 0 12px; }
  .glance__grid li:nth-child(3n+1) { border-left: 1px solid var(--line-soft); }
  .glance__grid li:nth-child(2n+1) { border-left: 0; }
}

/* ============================================================
   WHAT WE DO  (.wwd)
   Design: Brand | Vibe: Editorial Luxury on the brand's black | Layout:
   Editorial Split | Color: Restrained (ivory + one champagne hairline).
   One frame, three offers as a ruled index. The resting offer is ivory and
   its rule turns champagne; the others sit back in faint ink. Pictures
   cross-fade in the frame (opacity only) and each brings its own caption,
   set in the gutter beneath the picture rather than over it.
   ============================================================ */
.wwd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "frame head" "frame list";
  column-gap: clamp(36px, 6vw, 84px);
  align-items: stretch;
}
.wwd__head { grid-area: head; }
.wwd__head .section__title { margin-bottom: 20px; }
.wwd__head .section__lead { margin: 0 0 44px; max-width: 46ch; font-size: 1.06rem; }

.wwd__frame {
  grid-area: frame; position: sticky; top: 96px; align-self: start; min-width: 0; width: 100%;
  /* One square for all four pictures, so the slides never change size; it
     follows the list down the column rather than stretching to fill it.
     Landscape and portrait photographs are positioned per slide below. */
  aspect-ratio: 1 / 1;
  box-sizing: content-box; /* the square is the picture; the caption row sits below it */
  padding-bottom: 44px; /* the caption row, on the page ground */
}
.wwd__pic { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s cubic-bezier(.32,.72,0,1); }
.wwd__pic.is-on { opacity: 1; }
.wwd__pic picture { position: absolute; inset: 0 0 44px 0; overflow: hidden; background: var(--surface); border-radius: var(--radius); }
.wwd__pic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.04); transition: transform 1.4s cubic-bezier(.32,.72,0,1);
}
.wwd__pic--left img { object-position: 18% center; } /* keep the piping hand in frame */
.wwd__pic--right img { object-position: 62% center; } /* keep the pancake pack in frame */
.wwd__pic--vans img { object-position: 82% 40%; } /* keep the lettered van in frame */
.wwd__pic.is-on img { transform: none; }
.wwd__pic figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  display: flex; align-items: flex-end; gap: 12px;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-faint); font-feature-settings: "case";
}
.wwd__pic figcaption::before { content: ""; width: 22px; height: 1px; background: var(--gold); opacity: .8; margin-bottom: .45em; flex: none; }

.offers { grid-area: list; align-self: end; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.offer { border-bottom: 1px solid var(--line-soft); padding: 22px 0 24px; transition: border-color .5s cubic-bezier(.32,.72,0,1); }
.offer__title { margin: 0; }
.offer__btn {
  all: unset; box-sizing: border-box; display: flex; width: 100%;
  align-items: baseline; justify-content: space-between; gap: 18px;
  cursor: pointer; color: var(--ink);
  font: inherit; font-size: 1.32rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2;
  transition: color .45s cubic-bezier(.32,.72,0,1);
}
.offer__btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }
.offer__for {
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-faint); white-space: nowrap; font-feature-settings: "case";
  transition: color .45s cubic-bezier(.32,.72,0,1);
}
.offer p { margin: 10px 0 0; max-width: 46ch; color: var(--ink-soft); font-size: 0.97rem; transition: color .45s cubic-bezier(.32,.72,0,1); }
/* only dim the resting offers once JS can switch them — without it all three read in full */
html.js .offer:not(.is-on) .offer__btn { color: var(--ink-faint); }
html.js .offer:not(.is-on) p { color: rgba(237,232,223,0.54); } /* 0.38 fell below 4.5:1 on the black */
html.js .offer.is-on { border-bottom-color: var(--gold-soft); }
html.js .offer.is-on .offer__for { color: var(--gold); }
html.js .offer:not(.is-on):hover .offer__btn { color: var(--ink-soft); }

@media (max-width: 940px) {
  .wwd { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "head" "frame" "list"; row-gap: 8px; }
  .wwd__head .section__lead { margin-bottom: 24px; }
  .wwd__frame { position: relative; top: auto; }
  .offers { margin-top: 20px; }
}
@media (max-width: 640px) {
  .offer__btn { font-size: 1.18rem; flex-wrap: wrap; gap: 6px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .wwd__pic, .wwd__pic img, .offer, .offer__btn, .offer__for, .offer p { transition: none; }
}


/* ============================================================
   THE RANGE  (.range-win) - a shop window, then our own name
   Design: Brand | Vibe: dark patisserie counter | Layout: composed window,
   two mirrored rows (one tall feature + two stacked tiles each), then a
   wide split for the Genesis range | Colour: restrained, photo-led.
   Captions live in the gutter under each photograph. Whole tile = link.
   ============================================================ */
.range-win { padding: 8px 0 0; }
.win__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 22px; margin-bottom: 36px; border-bottom: 1px solid var(--line-soft); }
.win__title { font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.015em; margin: 0; }
.win__sub { margin: 0; color: var(--ink-faint); font-size: 0.92rem; }
/* ---- The range (range.html): the vitrine. The photograph leads: it stands
   full height to the right edge of the window from the first screen, each
   picture shown whole over a soft copy of itself; the six names a size down
   beside it with one caption and one enquiry link on the picture that follow
   the current range. Where a bakery-floor reel exists it plays as the last
   frame of its range. Oct 2026. ---- */.vit { border-bottom: 1px solid var(--line-soft); }
.vit__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(44px, 6vw, 120px); align-items: start; padding-left: max(24px, calc((100% - var(--maxw)) / 2 + 24px)); }
.vit__head { grid-area: 1 / 1; padding: clamp(64px, 9vh, 112px) 0 0; }
.vit__body { grid-area: 2 / 1; padding: 0 0 clamp(80px, 12vh, 140px); }
.vit__stage { grid-area: 1 / 2 / 3 / 3; }
.vit__title { font-weight: 400; font-size: clamp(2.3rem, 3.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 22px; max-width: 15ch; }
.vit__lead { color: var(--ink-soft); font-size: 1.04rem; line-height: 1.6; max-width: 42ch; margin: 0 0 64px; }
.vit__kicker { margin: 0 0 14px; color: var(--ink-faint); font-size: 0.92rem; }
.vit__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.vit__row { position: relative; border-bottom: 1px solid var(--line-soft); padding: 1.7rem 0 1.85rem; }
.vit__name { display: block; width: 100%; margin: 0; padding: 0 0 0 36px; background: none; border: 0; color: var(--ink-soft); font: inherit; font-size: clamp(1.85rem, 2.8vw, 2.7rem); line-height: 1.05; letter-spacing: -0.015em; font-weight: 400; text-align: left; cursor: pointer; position: relative; transition: color .6s cubic-bezier(.32,.72,0,1); }
.vit__name::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 0; height: 1px; background: var(--gold); transition: width .6s cubic-bezier(.32,.72,0,1); }
.vit__row:hover .vit__name, .vit__name:focus-visible { color: var(--ink); outline: none; }
.vit__row.is-current .vit__name { color: var(--ink); }
.vit__row.is-current .vit__name::before { width: 22px; }
.vit__name:focus-visible::after { content: ""; position: absolute; inset: -6px -8px; outline: 1px solid var(--gold); }
.vit__line { margin: 8px 0 0; padding-left: 36px; max-width: 38ch; font-size: 0.98rem; line-height: 1.5; color: var(--ink-faint); transition: color .6s cubic-bezier(.32,.72,0,1); }
.vit__row.is-current .vit__line { color: var(--ink-soft); }
.vit__more { margin: 30px 0 0; color: var(--ink-soft); font-size: 1.02rem; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }

.vit__stage { align-self: start; position: sticky; top: 76px; height: calc(100vh - 76px); height: calc(100dvh - 76px); min-height: 540px; overflow: hidden; background: var(--surface); }
html.js .vit__stage { clip-path: inset(0 0 100% 0); animation: vit-rise 1.4s cubic-bezier(.16,1,.3,1) .2s forwards; }
@keyframes vit-rise { to { clip-path: inset(0 0 0 0); } }
.vit__frame, .vit__frames video { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s cubic-bezier(.32,.72,0,1); }
.vit__frame.is-on, .vit__frames video.is-on { opacity: 1; }
.vit__frame picture, .vit__frame img, .vit__frames video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the whole photograph at its own 3:2, a little above centre so the
   caption sits on the fill, not on the picture; the fill is a soft copy
   of the same photograph, darkened and faded toward the panel's edges */
.vit__bg img { object-fit: cover; filter: blur(34px) brightness(.58) saturate(.9); transform: scale(1.18); }
.vit__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,11,.55) 0%, rgba(8,8,11,0) 32%, rgba(8,8,11,0) 68%, rgba(8,8,11,.55) 100%); }
.vit__frame .vit__pic { inset: auto 0; top: 47%; height: auto; aspect-ratio: 3 / 2; transform: translateY(-50%); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
.vit__pic img { object-fit: cover; transform: scale(1.03); transition: transform 9s cubic-bezier(.32,.72,0,1); }
.vit__frame.is-on .vit__pic img { transform: scale(1); }
.vit__frames video { object-fit: cover; transform: scale(1.05); transition: transform 9s cubic-bezier(.32,.72,0,1); }
.vit__frames video.is-on { transform: scale(1); }
.vit__film[hidden] { display: none; }
.vit__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(8,8,11,0.78) 0%, rgba(8,8,11,0.30) 18%, rgba(8,8,11,0) 38%); }
.vit__caps { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; padding: 0 clamp(24px, 3vw, 48px) 30px; }
.vit__cap { grid-area: 1 / 1; margin: 0; opacity: 0; pointer-events: none; transition: opacity .7s cubic-bezier(.32,.72,0,1); display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: baseline; }
.vit__cap.is-on { opacity: 1; pointer-events: auto; }
.vit__what { color: rgba(237,232,223,0.78); font-size: 0.98rem; }
.vit__ask { color: var(--ink); font-size: 0.98rem; border-bottom: 1px solid var(--line); padding-bottom: 2px; white-space: nowrap; transition: border-color .4s cubic-bezier(.32,.72,0,1); }
.vit__ask:hover { border-bottom-color: var(--gold); }
.vit__ask span { display: inline-block; transition: transform .4s cubic-bezier(.32,.72,0,1); }
.vit__ask:hover span { transform: translateX(3px); }
.vit__ask:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

.range-win > .craft { margin-top: clamp(80px, 10vw, 128px); }

@media (max-width: 900px) {
  .vit__grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "head" "stage" "body"; padding-left: 0; }
  .vit__head { grid-area: head; padding: 40px 24px 36px; }
  .vit__stage { grid-area: stage; top: 76px; height: 46dvh; min-height: 300px; z-index: 5; }
  .vit__body { grid-area: body; padding: 36px 24px 64px; }
  .vit__title { font-size: clamp(2rem, 8vw, 2.6rem); }
  .vit__lead { margin-bottom: 44px; }
  .vit__row { padding: 1.3rem 0 1.4rem; }
  .vit__name { font-size: clamp(1.6rem, 7vw, 2.2rem); padding-left: 30px; }
  .vit__line { padding-left: 30px; }
  .vit__caps { padding: 0 24px 20px; }
  .vit__what { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .vit__stage { clip-path: none; animation: none; }
  .vit__frame, .vit__frames video, .vit__frames img, .vit__name, .vit__name::before, .vit__line, .vit__cap, .vit__ask span { transition: none; }
}
  

.cats__more { margin: 0; padding: 28px 0 4px; color: var(--ink-soft); font-size: 1.02rem; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }

/* our own name: a wide split on the lifted black, the only one on the page */
.own { margin-top: clamp(72px, 9vw, 120px); background: var(--bg-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.own__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.own__pic { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface); }
.own__pic picture, .own__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.own__title { font-weight: 400; font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 12px; }
.own__tag { margin: 0 0 14px; color: var(--gold); font-weight: 600; font-size: 0.98rem; }
.own__line { margin: 0 0 22px; color: var(--ink-soft); max-width: 42ch; }
.own__list { list-style: none; margin: 0 0 30px; padding: 14px 0; display: flex; flex-wrap: wrap; gap: 6px 22px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.own__list li { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }

@media (max-width: 640px) {
  .own__grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) and (min-width: 641px) {
  .own__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
}

/* ---- Built layer by layer (.craft): a trade build sheet over the photograph ----
   Pins on the cut face key to the ledger beside it; the numbers are a map
   key, not an order. Hovering a row lights its pin and the reverse. Pins
   arrive one after another the first time the section is seen and again
   on every change of bake: the one moment of motion here. */
.craft { margin-top: clamp(80px, 10vw, 128px); }
.craft__tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0 0 32px; }
.craft__tabs[hidden] { display: none; }
.craft__tab {
  appearance: none; background: none; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0;
  padding: 0 0 11px; margin: 0; color: var(--ink-faint); font: inherit; font-size: 0.8rem; font-weight: 600;
  text-align: left; cursor: pointer; transition: color .3s ease, border-color .3s ease;
}
.craft__tab img { display: block; width: 100%; height: auto; aspect-ratio: 240 / 161; object-fit: cover; margin-bottom: 11px; background: var(--surface); opacity: .5; filter: saturate(.7); transition: opacity .4s ease, filter .4s ease; }
.craft__tab:hover { color: var(--ink-soft); }
.craft__tab:hover img { opacity: .85; filter: none; }
.craft__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.craft__tab[aria-selected="true"] img { opacity: 1; filter: none; }
.craft__tab:focus-visible { outline: 1px solid var(--gold); outline-offset: 5px; }

.craft__panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.craft__panel + .craft__panel { margin-top: 64px; }
.craft.is-tabbed .craft__panel + .craft__panel { margin-top: 0; }
.craft__panel[hidden] { display: none; }
.craft__foot { margin: clamp(44px, 5vw, 64px) 0 0; padding-top: 22px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; color: var(--ink-soft); font-size: 1.02rem; }
.craft__panel:focus-visible { outline: 1px solid var(--gold); outline-offset: 10px; }

.craft__stage { margin: 0; position: relative; aspect-ratio: 1024 / 687; overflow: hidden; background: var(--surface); }
.craft__stage picture, .craft__stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.craft__pins { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.craft__pins li {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 600; color: var(--ink); pointer-events: auto; cursor: default;
  background: rgba(8, 8, 11, .6); border: 1px solid var(--gold-soft);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.craft__pins li.is-on { background: var(--ink); color: var(--accent-ink); border-color: var(--ink); box-shadow: 0 0 0 7px rgba(237, 232, 223, .16); }
@keyframes craft-pin { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
@keyframes craft-photo { from { opacity: 0; } to { opacity: 1; } }
.craft.is-seen .craft__panel:not([hidden]) .craft__pins li { animation: craft-pin .55s cubic-bezier(.32, .72, 0, 1) both; animation-delay: calc(var(--i, 1) * 110ms + 250ms); }
.craft.is-seen.is-tabbed .craft__panel:not([hidden]) .craft__stage img { animation: craft-photo .5s ease both; }
.craft__pins li:nth-child(1) { --i: 1; } .craft__pins li:nth-child(2) { --i: 2; } .craft__pins li:nth-child(3) { --i: 3; }
.craft__pins li:nth-child(4) { --i: 4; } .craft__pins li:nth-child(5) { --i: 5; }

.craft__range { margin: 0 0 10px; color: var(--gold); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.craft__name { margin: 0 0 10px; font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; letter-spacing: -0.015em; }
.craft__line { margin: 0 0 26px; color: var(--ink-soft); max-width: 40ch; }
.craft__parts { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--line); }
.craft__parts li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line-soft); cursor: default; }
.craft__n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold-soft); font-size: 0.66rem; font-weight: 600; color: var(--ink-soft); transition: background .3s ease, color .3s ease, border-color .3s ease; }
.craft__part { color: var(--ink-soft); transition: color .3s ease; }
.craft__how { color: var(--gold); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-align: right; }
.craft__parts li.is-on .craft__n { background: var(--ink); color: var(--accent-ink); border-color: var(--ink); }
.craft__parts li.is-on .craft__part { color: var(--ink); }

/* The Genesis range as photographs, under the own-name feature */
.own__grid:has(+ .own__strip) { padding-bottom: clamp(32px, 4vw, 48px); }
.own__strip { list-style: none; margin: 0 auto; padding-bottom: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.own__card { margin: 0; }
.own__card picture, .own__card img { display: block; width: 100%; }
.own__card img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface); }
.own__card figcaption { margin-top: 12px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }

/* the same line the flagships close on: four photographs are a sample, not the list */
.own__strip:has(+ .own__more) { padding-bottom: 28px; }
.own__more { margin: 0 auto; padding: 0 24px clamp(56px, 7vw, 96px); color: var(--ink-soft); font-size: 1.02rem; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }

@media (max-width: 900px) {
  .craft__panel { grid-template-columns: 1fr; }
  .craft__tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 128px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -24px; padding-right: 24px; }
  .craft__tabs::-webkit-scrollbar { display: none; }
  .craft__tab { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .craft__pins li { width: 26px; height: 26px; font-size: 0.68rem; }
  /* one scrolling row on phones, so the strip never stacks to two rows */
  .own__strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: clamp(44px, 7vw, 96px); }
  .own__strip::-webkit-scrollbar { display: none; }
  .own__strip li { flex: 0 0 58vw; scroll-snap-align: start; }
  .own__strip:has(+ .own__more) { padding-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .craft.is-seen .craft__panel:not([hidden]) .craft__pins li,
  .craft.is-seen.is-tabbed .craft__panel:not([hidden]) .craft__stage img { animation: none; }
  .craft__tab, .craft__tab img, .craft__pins li, .craft__n, .craft__part { transition: none; }
}

/* ============================================================
   PRODUCTS — real photography gallery
   ============================================================ */
.products { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 16px; }
.product {
  position: relative; display: block;
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-soft);
}
/* feature tile — spans 2×2 for a bento rhythm */
.product--feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.product img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.product:hover img { transform: scale(1.07); }
.product::before { /* vignette for caption legibility + depth */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,0.9) 4%, rgba(0,0,0,0.15) 46%, rgba(0,0,0,0.05) 100%);
  transition: background .3s ease;
}
.product:hover::before { background: linear-gradient(0deg, rgba(0,0,0,0.92) 8%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.1) 100%); }
.product__cap {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.product__cap h3 { font-size: 1.16rem; }
.product--feature .product__cap h3 { font-size: 1.7rem; }
.product__cap p { color: var(--ink-soft); font-size: 0.88rem; margin: 4px 0 0; }
.product__cap .tag {
  display: inline-block; margin-bottom: 10px;
  font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  color: var(--accent-ink); background: linear-gradient(135deg, var(--accent-2), var(--accent));
  padding: 5px 12px; border-radius: 999px;
}

/* ============================================================
   FEATURES (why) — with image
   ============================================================ */
.why { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.why__media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line-soft); }
.why__media img { width: 100%; height: 100%; object-fit: cover; }
.features { display: grid; gap: 22px; margin-top: 26px; }
.feature { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.feature__num {
  font-size: 1rem; font-weight: 600; color: var(--ink-soft);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-soft); display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.feature h3 { font-size: 1.2rem; margin-bottom: 6px; }
.feature p { color: var(--ink-soft); margin: 0; }

/* ============================================================
   INNOVATION band (full-bleed image + copy)
   ============================================================ */
.band { position: relative; overflow: hidden; }
.band__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,0.95), rgba(0,0,0,0.62)); }
.band__inner { position: relative; z-index: 2; padding: 110px 0; max-width: 620px; }
.band__inner h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 18px; }
.band__inner p { color: var(--ink-soft); font-size: 1.08rem; margin: 0 0 26px; }
.band__list { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.band__list li { padding-left: 30px; position: relative; color: var(--ink); }
.band__list li::before { content: "✦"; position: absolute; left: 0; color: var(--ink-soft); }
/* quiet tracked-caps link replaces the band's third button */
.band__link {
  display: inline-flex; align-items: center; gap: 10px;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.78rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
  transition: color .2s ease, border-color .2s ease;
}
.band__link:hover { color: var(--accent-2); border-color: var(--accent); }
.band__link span { transition: transform .2s ease; }
.band__link:hover span { transform: translateX(3px); }

/* ============================================================
   AFTERS BY GENESIS — the porcelain interlude
   One light room in the dark maison: same porcelain stock as the
   receipt, chocolate ink, and the range's own confection accents.
   Blush and butter exist ONLY inside this section.
   ============================================================ */
.afters {
  background: #f6f1e6;            /* the receipt's porcelain, full-bleed */
  color: #2a1c12;                 /* chocolate ink */
}
.afters__copy { max-width: 560px; }
.afters__eyebrow { color: #a08d70; }
.afters__title {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 8vw, 6.2rem);
  font-weight: 400; line-height: 0.9; letter-spacing: -0.01em;
  text-transform: lowercase;      /* the wordmark is lowercase — echo it */
  margin: 0;
}
.afters__sub {
  text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.72rem;
  font-weight: 600; color: #a08d70; margin: 10px 0 26px;
}
.afters__lead { color: #5b4a3a; max-width: 46ch; margin: 0; }
.afters__link {
  display: inline-flex; align-items: center; gap: 10px;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.78rem; font-weight: 600; color: #2a1c12;
  border-bottom: 1px solid rgba(42,28,18,0.3); padding-bottom: 6px;
  transition: color .2s ease, border-color .2s ease;
}
.afters__link:hover { color: #8e2f3c; border-color: #8e2f3c; }
.afters__link span { transition: transform .2s ease; }
.afters__link:hover span { transform: translateX(3px); }
/* The vitrine: four small plates on packaging-palette mats. Images stay tiny
   (≈240px squares) so the renders read as swatches, not hero photography. */
.afters__plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 56px 0 44px; }
.plate { margin: 0; padding: 16px 16px 14px; border-radius: var(--radius); }
.plate--butter { background: #eedfba; }
.plate--blush  { background: #f0d9d3; }
.plate--oat    { background: #e7decd; }
.plate--powder { background: #dbe2ea; }
.plate img {
  /* height:auto lets aspect-ratio win over the HTML height attribute */
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: 2px; filter: saturate(1.04) contrast(1.03);
}
/* per-image framing: pick each square out of its wider source by hand */
.plate--butter img { object-position: 50% 30%; } /* tart cluster    */
.plate--blush  img { object-position: 50% 78%; } /* full cupcakes   */
.plate--oat    img { object-position: 40% 50%; } /* bitten snowball */
.plate--powder img { object-position: 24% 55%; } /* the plated trio */
.plate figcaption {
  margin-top: 12px; text-align: center;
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: #4a3a2c;
}
/* film grain over the renders: masks synthetic smoothness */
.plate { position: relative; }
.plate::after {
  content: ""; position: absolute; inset: 16px 16px auto 16px; aspect-ratio: 1 / 1;
  pointer-events: none; border-radius: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.08; mix-blend-mode: overlay;
}

@media (max-width: 940px) {
  .afters__plates { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .afters__plates { grid-template-columns: 1fr 1fr; gap: 12px; }
  .plate { padding: 10px 10px 9px; }
  .plate::after { inset: 10px 10px auto 10px; }
}

/* ============================================================
   FULL-BLEED PHOTOGRAPHIC BREATH
   ============================================================ */
.photo-band { position: relative; height: clamp(320px, 48vh, 540px); overflow: hidden; }
.photo-band__img { position: absolute; inset: 0; display: block; }
.photo-band__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
/* compositor-driven whisper: the band drifts a few percent as it crosses
   the viewport; still for reduced-motion and unsupporting browsers */
@supports (animation-timeline: view()) {
  .photo-band__img { inset: -8% 0; animation: bandDrift linear both; animation-timeline: view(); }
  @keyframes bandDrift { from { transform: translateY(-3.5%); } to { transform: translateY(3.5%); } }
  @media (prefers-reduced-motion: reduce) { .photo-band__img { animation: none; inset: 0; } }
}
.photo-band::after { /* whisper of espresso top and bottom so the band sits in the page */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), transparent 22%, transparent 78%, rgba(0,0,0,0.35));
}

/* ============================================================
   WHERE TO FIND US + CAREERS — quiet ledger blocks
   ============================================================ */
.stockists { padding: 96px 0 110px; }
.stockists__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; }
.stockist { border-top: 1px solid var(--line); padding-top: 22px; }
.stockist h3 { font-size: 1.1rem; margin-bottom: 8px; }
.stockist p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
@media (max-width: 700px) { .stockists__grid { grid-template-columns: 1fr; } }

.join { padding: 88px 0; background: var(--bg-2); border-top: 1px solid var(--line-soft); text-align: center; }
.join__line { font-family: var(--font); font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin: 0 0 24px; }

/* ============================================================
   PARTNERS
   ============================================================ */
.logos { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 56px; }
.logo-chip {
  padding: 16px 32px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  color: var(--ink); font-weight: 600; letter-spacing: 0.02em; background: var(--surface);
}
/* retailer logo wall — unified white-on-dark treatment */
.logo-wall { gap: 24px; }
.rl-item {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  min-width: 210px; padding: 32px 44px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rl-item:hover { border-color: var(--line); transform: translateY(-4px); box-shadow: var(--shadow); }
.rl { height: 34px; width: auto; fill: var(--ink); color: var(--ink); opacity: .95; }
.rl text { fill: var(--ink); }
.rl--tesco { height: 26px; }
.rl-cap { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.quote { max-width: 800px; margin: 0 auto; text-align: center; }
.quote blockquote {
  font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.32; margin: 0 0 18px; font-weight: 600;
  /* the opening quote mark hangs into the margin so the text edge stays optically flush */
  hanging-punctuation: first; text-indent: -0.42em;
}
.quote blockquote { font-family: var(--font); font-weight: 400; }
.quote figcaption { color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; }

/* ============================================================
   CTA / CONTACT
   ============================================================ */
.cta { padding: 104px 0; background: var(--bg-2); border-top: 1px solid var(--line-soft); }
/* Contact routes as a quiet ledger: hairline top rules, no card boxes */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-bottom: 64px; }
.paths--four { grid-template-columns: repeat(4, 1fr); gap: 28px; }
.path { border-top: 1px solid var(--line); padding: 22px 0 0; }
.path h3 { font-size: 1.14rem; margin-bottom: 8px; }
.path p { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 14px; }
.path a { color: var(--ink); font-weight: 600; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid var(--line-soft); padding-bottom: 3px; transition: color .2s, border-color .2s; }
.path a:hover { color: var(--accent-2); border-color: var(--accent); }

.cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.cta__title { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 16px; }
.cta__lead { color: var(--ink-soft); margin-bottom: 26px; }
.cta__contacts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cta__contacts li { color: var(--ink-soft); }
.cta__contacts strong { display: inline-block; width: 70px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.1em; }
.cta__contacts a:hover { color: var(--accent-2); }
.social { display: flex; gap: 12px; margin-top: 24px; }
.social a { padding: 8px 16px; border: 1px solid var(--line-soft); border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); transition: color .15s, border-color .15s; }
.social a:hover { color: var(--accent-2); border-color: var(--accent); }

.form { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 32px; display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 7px; font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; }
.form input, .form textarea, .form select {
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus */
  padding: 12px 14px; color: var(--ink); font: inherit; font-size: 1rem; transition: border-color .15s;
}
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--accent); }
.form textarea { resize: vertical; }
.hidden-field { display: none; }
.form__next { font-size: 0.82rem; color: var(--ink-faint); margin: 0; }
.form__next strong { color: var(--ink-soft); }
.form__note { font-size: 0.85rem; margin: 2px 0 0; min-height: 1.1em; }
.form__note.ok { color: var(--accent-2); }
.form__note.err { color: #ff8f8f; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--bg); border-top: 1px solid var(--line-soft); padding: 60px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; padding-bottom: 34px; }
.footer__brand p { color: var(--ink-soft); margin: 0; max-width: 300px; }
.footer__nav { display: grid; gap: 10px; align-content: start; }
.footer__nav a { color: var(--ink-soft); }
.footer__nav a:hover { color: var(--accent-2); }
.footer__meta p { color: var(--ink-soft); margin: 0 0 8px; }
.footer__meta a:hover { color: var(--accent-2); }
.footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding-top: 24px; border-top: 1px solid var(--line-soft); color: var(--ink-faint); font-size: 0.82rem;
}

/* ============================================================
   MOBILE ENQUIRY BAR — the one ask stays within thumb reach
   Appears once the hero has scrolled away; hides while the form itself
   is on screen. Desktop never sees it.
   ============================================================ */
.mobile-cta { display: none; }
@media (max-width: 640px) {
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
    background: var(--accent); color: var(--accent-ink);
    font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
  }
  .mobile-cta.is-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
  .site-footer { padding-bottom: calc(32px + 60px + env(safe-area-inset-bottom)); }
  @media (prefers-reduced-motion: reduce) { .mobile-cta { transition: none; } }
}

/* ============================================================
   ACCESSIBILITY — skip link + focus ring
   ============================================================ */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

/* ============================================================
   HERITAGE TIMELINE
   ============================================================ */
.timeline {
  list-style: none; margin: 44px auto 0; padding: 0; max-width: 880px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px;
}
.tl { position: relative; padding-top: 30px; }
.tl::before {
  content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px;
  background: var(--line-soft);
}
.tl::after {
  content: ""; position: absolute; top: 2px; left: 0;
  width: 9px; height: 9px; border-radius: 50%; background: var(--ink-soft);
}
.tl__year { font-family: var(--font); font-size: 1.55rem; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tl__body { color: var(--ink-soft); margin: 8px 0 0; font-size: 0.95rem; }
/* Two points only - 1968 and today - drawn as one continuous line with a
   mark at each end, not a timeline waiting for its middle to arrive. */
.timeline--pair { grid-template-columns: 1fr 1fr; gap: 0; }
.timeline--pair .tl::before { background: var(--line); }
.timeline--pair .tl .tl__body { max-width: 36ch; }
.timeline--pair .tl:last-child { text-align: right; }
.timeline--pair .tl:last-child::after { left: auto; right: 0; }
.timeline--pair .tl:last-child .tl__body { margin-left: auto; }
/* Three points: the ends as before, the middle centred on its mark. */
.timeline--trio { grid-template-columns: 1fr 1fr 1fr; }
.timeline--trio .tl:nth-child(2) { text-align: center; }
.timeline--trio .tl:nth-child(2)::after { left: 50%; margin-left: -4px; }
.timeline--trio .tl:nth-child(2) .tl__body { margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  .timeline--pair { row-gap: 38px; }
  .timeline--pair .tl:last-child { text-align: left; }
  .timeline--pair .tl:last-child::after { left: 0; right: auto; }
  .timeline--pair .tl:last-child .tl__body { margin-left: 0; }
  .timeline--trio { grid-template-columns: 1fr; }
  .timeline--trio .tl:nth-child(2) { text-align: left; }
  .timeline--trio .tl:nth-child(2)::after { left: 0; margin-left: 0; }
  .timeline--trio .tl:nth-child(2) .tl__body { margin-left: 0; }
}

/* ============================================================
   CAPABILITIES — spec grid
   ============================================================ */
/* Capability facts as a ledger — hairline rules, no card boxes */
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 10px; }
.spec-grid--four { grid-template-columns: repeat(4, 1fr); gap: 30px; }
.spec--seal .spec__value { font-weight: 600; }
.spec { border-top: 1px solid var(--line); padding: 20px 0 0; }
.spec__label { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin: 0 0 12px; }
.spec__value { font-family: var(--font); font-size: 1.4rem; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; margin: 0; font-variant-numeric: tabular-nums; }
.spec__note { color: var(--ink-soft); font-size: 0.86rem; margin: 8px 0 0; }

/* ============================================================
   TRUST STATEMENT + ACCREDITATIONS
   ============================================================ */
/* partner wall — mono cream marks on the espresso ground */
.partner-marks { display: flex; justify-content: center; align-items: flex-start; gap: 88px; flex-wrap: wrap; margin: 0 0 46px; }
.pmark { text-align: center; }
.pmark__logo { display: block; margin: 0 auto; height: 34px; width: auto; opacity: 0.95; }
.pmark__logo--tesco { height: 30px; margin-top: 2px; }
.pmark__logo--waitrose { height: 38px; }
.pmark__logo--text { height: 46px; width: auto; overflow: visible; margin-top: -6px; }
.pmark__row-cap { text-align: center; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--ink-faint); margin: 0 0 26px; }
.partner-marks--single { margin-bottom: 56px; }
.partner-marks--single .pmark__cap { max-width: 34ch; margin-left: auto; margin-right: auto; line-height: 1.6; }
.pmark__cap { display: block; margin-top: 14px; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--ink-faint); }
.certs { display: flex; flex-direction: column; align-items: center; gap: 22px; margin: 0 0 64px; }
.certs__seals { display: flex; align-items: center; justify-content: center; gap: 40px; }
.certs__seal { display: block; width: 116px; height: 116px; color: var(--ink); }
.certs__badge { display: block; width: 76px; height: 76px; opacity: 0.95; }
.certs-line { text-align: center; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); margin: 0; }

.trust-statement { max-width: 780px; margin: 0 auto 52px; text-align: center; }
.trust-statement p { font-family: var(--font); font-weight: 400; font-size: clamp(1.15rem, 2.3vw, 1.55rem); line-height: 1.46; margin: 0; color: var(--ink); }
.trust-statement strong { color: var(--ink); font-weight: 400; }

/* ============================================================
   LEGAL / PROSE PAGES  (privacy.html)
   ============================================================ */
.legal { max-width: 760px; }
.legal p, .legal li { color: var(--ink-soft); }
.legal h2 { font-size: 1.25rem; margin: 34px 0 10px; color: var(--ink); }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin: 4px 0; }
.legal a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--accent); }
.legal__updated { color: var(--ink-faint); font-size: 0.9rem; margin: -4px 0 24px; }
.legal__back { margin-top: 38px; }
.legal__back a { color: var(--accent-2); font-weight: 600; text-decoration: none; }
.legal__back a:hover { color: var(--accent); }

/* form fine print + footer legal link */
.form__fine { font-size: 0.78rem; color: var(--ink-faint); margin: -4px 0 0; }
.form__fine a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.form__fine a:hover { color: var(--accent-2); }
.footer__legal a { color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; }
.footer__legal a:hover { color: var(--accent-2); }

/* ============================================================
   PARTNERS — the home page band + the Partners page
   ============================================================ */
/* Home: one row of proof, then the door to partners.html */
.pband { background: var(--bg-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 44px 0 40px; }
.pband__inner { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.pband__title {
  margin: 0; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  color: var(--gold); font-feature-settings: "case";
}
.pband__marks { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 26px 56px; }
.pband__marks .pmark__logo { margin: 0; }
.pband__marks .pmark__logo--text { margin-top: 0; height: 40px; }
.pband__seal { display: block; width: 64px; height: 64px; color: var(--ink); flex: none; }
@media (max-width: 640px) {
  .pband__marks { gap: 22px 34px; }
  .pband__marks .pmark__logo { height: 26px; }
  .pband__marks .pmark__logo--text { height: 34px; }
  .pband__marks .pmark__logo--waitrose { height: 30px; }
  .pband__seal { width: 56px; height: 56px; flex-basis: 100%; }
}

/* Partners page: photo beside copy */
.psplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 84px); align-items: center; }
.psplit__pic { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.psplit__pic picture, .psplit__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.psplit__lead { color: var(--ink-soft); font-size: 1.06rem; margin: 0 0 32px; max-width: 48ch; }
.psplit__copy .partner-marks { justify-content: flex-start; margin: 0 0 30px; }
.psplit__copy .pmark { text-align: left; }
.psplit__copy .pmark__logo { margin: 0; }
.psplit__copy .partner-marks--single .pmark__cap { margin-left: 0; }
.psplit__more { margin: 0; color: var(--ink-soft); }
.pfacts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 44px; margin: 0 0 36px; padding: 22px 0 0; border-top: 1px solid var(--line-soft); }
.pfacts dt { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 400; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pfacts dd { margin: 10px 0 0; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--ink-faint); }

.close__line--after { margin-top: 64px; }

@media (max-width: 900px) {
  .psplit { grid-template-columns: 1fr; }
  .psplit--text-first .psplit__pic { order: -1; }
}
@media (max-width: 480px) {
  .pfacts { gap: 0 26px; }
}

/* Six links + the enquiry button outgrow the bar well before the phone
   breakpoint, so the menu folds into the toggle from 1080px down. */
@media (max-width: 1080px) {
  .nav__links {
    position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; gap: 0; align-items: stretch;
    background: var(--bg-2); border-bottom: 1px solid var(--line-soft);
    padding: 8px 24px 20px; display: none;
  }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 13px 0; }
  .nav__links .btn { margin-top: 8px; }
  .nav__toggle { display: flex; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .stats__line { font-size: 0.66rem; letter-spacing: 0.12em; padding: 20px 0; }
  .products, .paths, .paths--four { grid-template-columns: repeat(2, 1fr); }
  .spec-grid, .spec-grid--four { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 38px; }
  .product--feature { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
  .product--feature .product__cap h3 { font-size: 1.4rem; }
  .why { grid-template-columns: 1fr; gap: 34px; }
  .why__media { order: -1; max-height: 360px; }
  .cta__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav__links {
    position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; gap: 0; align-items: stretch;
    background: var(--bg-2); border-bottom: 1px solid var(--line-soft);
    padding: 8px 24px 20px; display: none;
  }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 13px 0; }
  .nav__toggle { display: flex; }
  .hero { min-height: 88vh; }
  .products, .paths, .paths--four, .form__row { grid-template-columns: 1fr; }
  .spec-grid, .spec-grid--four, .timeline { grid-template-columns: 1fr; }
  .product--feature { grid-column: auto; aspect-ratio: 4 / 3; }
  .section { padding: 72px 0; }
  .footer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .hero__img { transition: none !important; animation: none !important; transform: none !important; opacity: 1 !important; }
  html.js .hero--hold .hero__logo, html.js .hero--hold .ln > i,
  html.js .hero--hold .hero__lead, html.js .hero--hold .hero__actions,
  html.js .hero--hold .hero__scroll { transition: none !important; opacity: 1 !important; transform: none !important; }
  html.js .hero--hold .hero__scroll::before { transform: scaleX(1) !important; transition: none !important; }
  .hero::before { transform: none !important; transition: none !important; }
  .reveal { transition: none !important; }
}

/* ============================================================
   BAKERY-CONCEPT DEVICES  (from /drafts/reveal.html)
     · .rv    the reveal — lens idles, becomes a slice handle on touch
     · .spec  trade spec as a hairline ledger

   Driven by the live caramel accent rather than the pistachio used in
   the draft, so they read as Genesis. The six carousel block colours
   are the drafted palette and stay exactly as drawn.
   ============================================================ */

/* Registered so the drifting lens interpolates smoothly rather than
   stepping between keyframes; unsupported browsers get the stepped drift. */
@property --mx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: false; initial-value: 50%; }

/* ---------- the reveal ---------- */
.inside { display: grid; grid-template-columns: 1.35fr .65fr; gap: 38px; align-items: start; }

.rv {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3; background: #000;
  /* pan-y, not none: a finger that lands on the reveal must still be able
     to scroll the page vertically. Horizontal drag stays ours. */
  touch-action: pan-y;
  box-shadow: var(--shadow); --r: 130px;
}
.rv__layer { position: absolute; inset: 0; }
.rv__layer img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}

/* SLICE mode (the default markup state): the finished cake is clipped
   back to --x, exposing the cut-open shot underneath. */
.rv__top { clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.rv__handle {
  position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px;
  background: var(--accent); z-index: 4; translate: -1px 0;
  box-shadow: 0 0 24px 2px rgba(237,232,223,.35);
}
.rv__grab {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 52px; height: 52px; border-radius: 50%; background: var(--accent);
  color: var(--accent-ink); display: grid; place-items: center;
  font-size: .9rem; font-weight: 600; box-shadow: 0 14px 34px -8px rgba(0,0,0,.7);
}

/* LENS mode (.rv--lens): mask a circle out of the top photograph so you
   look through the finished cake to the filling. */
.rv--lens { cursor: none; }
.rv--lens .rv__top {
  clip-path: none;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx,50%) var(--my,50%),
    transparent 0 calc(var(--r) - 2px), #000 var(--r));
  mask-image: radial-gradient(circle var(--r) at var(--mx,50%) var(--my,50%),
    transparent 0 calc(var(--r) - 2px), #000 var(--r));
}
.rv--lens .rv__handle { display: none; }
.rv__lens {
  position: absolute; z-index: 4; display: none;
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  left: var(--mx,50%); top: var(--my,50%); translate: -50% -50%;
  border-radius: 50%; border: 2px solid var(--accent); pointer-events: none;
  box-shadow: 0 0 40px 6px rgba(237,232,223,.28), inset 0 0 40px rgba(0,0,0,.35);
}
.rv--lens .rv__lens { display: block; }
.rv__lens::after {
  content: "THE FILLING"; position: absolute; left: 50%; bottom: -30px; translate: -50% 0;
  font-size: .6rem; letter-spacing: .18em; font-weight: 600;
  color: var(--accent); white-space: nowrap;
}
/* With no cursor present the lens drifts, so the idea lands unattended. */
@keyframes rv-drift {
  0%   { --mx: 34%; --my: 42%; }
  25%  { --mx: 64%; --my: 34%; }
  50%  { --mx: 70%; --my: 62%; }
  75%  { --mx: 38%; --my: 66%; }
  100% { --mx: 34%; --my: 42%; }
}
.rv--lens.rv--drift { animation: rv-drift 16s ease-in-out infinite; }
.rv:not(.rv--lens) { cursor: ew-resize; }

.rv__tag {
  position: absolute; z-index: 5; bottom: 16px;
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  padding: 7px 11px; border-radius: 3px;
  background: rgba(0,0,0,.82); color: var(--ink); backdrop-filter: blur(4px);
}
.rv__tag--l { left: 16px; }
.rv__tag--r { right: 16px; background: var(--accent); color: var(--accent-ink); }
.rv--lens .rv__tag--r { opacity: 0; }
.rv__hint {
  position: absolute; z-index: 5; top: 16px; left: 50%; translate: -50% 0;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  color: rgba(237,232,223,.85); background: rgba(0,0,0,.7);
  padding: 6px 12px; border-radius: 999px; transition: opacity .4s ease;
}
.rv.is-sliced .rv__hint { opacity: 0; }
/* the hint speaks to the input that is actually there: a cursor can hover, a finger cannot */
.rv__hint--touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .rv__hint--pointer { display: none; }
  .rv__hint--touch { display: inline; }
}
.rv:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- the spec: a hairline ledger beside the reveal ---------- */
.spec { border-top: 1px solid var(--line); padding-top: 18px; }
.spec__eyebrow { margin: 0 0 6px; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--gold); font-feature-settings: "case"; }
.spec__list { margin: 0; }
.spec__list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.spec__list dt { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--ink-faint); font-feature-settings: "case"; }
.spec__list dd { margin: 0; color: var(--ink); font-size: 0.95rem; text-align: right; font-variant-numeric: tabular-nums; }
.spec__foot { margin: 18px 0 0; color: var(--ink-faint); font-size: 0.82rem; }
.spec__foot a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.spec__foot a:hover { color: var(--ink); text-decoration-color: var(--ink); }

@media (max-width: 900px) {
  .inside { grid-template-columns: 1fr; gap: 26px; }
  .rv { aspect-ratio: 1 / 1; --r: 104px; }
}
@media (max-width: 620px) {
  .rv { --r: 84px; }
  .rv__grab { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv--lens.rv--drift { animation: none !important; }
}

/* ============================================================
   AFTERS PAGE — the porcelain world, whole page
   The one light room becomes a whole floor: packaging ivory ground,
   chocolate ink, the range's confection accents only where a product
   sits. The site header stays Genesis Black above it.
   ============================================================ */
.afters-page { background: #f6f1e6; color: #2a1c12; }
.afters-page .section--alt { background: #efe8da; }
.afters-page .section__lead, .afters-page .stockist p, .afters-page .footer__brand p,
.afters-page .footer__meta p, .afters-page .footer__nav a { color: #5b4a3a; }
.afters-page .eyebrow { color: #a08d70; }
.afters-page .stockist { border-top-color: rgba(42,28,18,0.18); }
.afters-page .band__link { color: #2a1c12; border-bottom-color: rgba(42,28,18,0.3); }
.afters-page .band__link:hover { color: #8e2f3c; border-color: #8e2f3c; }
.afters-page .site-footer { background: var(--bg); color: var(--ink); border-top: 0; }
.afters-page .site-footer p, .afters-page .footer__nav a, .afters-page .footer__meta p { color: rgba(237,232,223,0.72); }
.afters-page .footer__bottom { color: rgba(237,232,223,0.48); border-top-color: rgba(237,232,223,0.09); }
.afters-page .afters--plates { padding-top: 0; }
.afters-page ::selection { background: #2a1c12; color: #f6f1e6; }

/* ============================================================
   THE HERO  (.ah)  — the Iced Top, taken apart, with its index
   Design: Brand | Vibe: Editorial Luxury (porcelain ground, chocolate
   ink) | Layout: Editorial Split (picture left, index right, wordmark
   over both) | Color: Restrained. The film IS the hero; the only visible
   control is type. See js/afters-film.js.
   ============================================================ */
.ah {
  position: relative; width: 100%;
  --ah-aspect: 1.7778;         /* the frames are 16:9 */
  --ah-ink: #2a1c12;
  --ah-ink-soft: #5b4a3a;
  --ah-ink-faint: #a08d70;
  --ah-ground: #f3ede1;        /* the packaging ivory, a shade warmer than the page */
  --ah-ground-2: #e9e1d0;
  --ah-header: 77px;
  background: var(--ah-ground); color: var(--ah-ink);
  overflow: clip;
}
.ah__sticky {
  position: relative;
  min-height: calc(100svh - var(--ah-header));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px 72px;
  overflow: hidden;
}
/* studio ground: a soft top light on ivory, edges falling gently away */
.ah__bg { position: absolute; inset: 0; z-index: 0; background: var(--ah-ground); }
.ah__silk { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.ah__bg::before, .ah__bg::after { z-index: 1; }
.ah__bg::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(237,232,223,0.75) 0%, rgba(237,232,223,0) 58%);
}
.ah__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(120, 96, 66, 0.22) 100%);
}

.ah__stage { position: relative; z-index: 2; width: 100%; display: flex; justify-content: center; }
.ah__group {
  display: grid;
  grid-template-columns: auto clamp(230px, 24vw, 320px);
  grid-template-areas: "title title" "card index";
  column-gap: clamp(28px, 4vw, 60px);
  row-gap: clamp(12px, 2.2vh, 26px);
  align-items: end;
  max-width: 100%;
}

/* the wordmark, set in the packaging face, over the card's left edge */
.ah__title {
  grid-area: title; margin: 0 0 0 -0.04em; white-space: nowrap;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, min(7.2vw, 11svh), 6.6rem); line-height: 0.86; letter-spacing: -0.02em;
  text-transform: lowercase; color: var(--ah-ink);
}
.ah__title sup { font-size: 0.22em; vertical-align: top; position: relative; top: 0.35em; margin-left: 0.06em; letter-spacing: 0; }

/* the card: a framed photograph, sized from what the screen has left */
.ah__card {
  grid-area: card; position: relative; overflow: hidden;
  --ah-card-h: min(calc(100svh - var(--ah-header) - 300px), calc(60vw / var(--ah-aspect)));
  height: var(--ah-card-h);
  width: calc(var(--ah-card-h) * var(--ah-aspect));
  max-width: 100%;
  min-height: 220px;
  border-radius: 6px;
  box-shadow: 0 30px 80px -30px rgba(70, 48, 24, 0.45), 0 8px 24px -12px rgba(70, 48, 24, 0.25);
  background: var(--ah-ground-2);
  cursor: grab; touch-action: pan-y;   /* pan-y so a vertical swipe still scrolls the page */
}
.af--dragging .ah__card, .ah__card:active { cursor: grabbing; }
.ah__card:focus-visible { outline: 2px solid var(--ah-ink); outline-offset: 5px; }
.af--unavailable .ah__card { cursor: default; }
.ah__poster, .af__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ah__poster { object-fit: cover; object-position: center; transition: opacity .5s ease; }
.af__canvas { opacity: 0; transition: opacity .5s ease; }
.af--drawn .ah__poster { opacity: 0; }
.af--drawn .af__canvas { opacity: 1; }

/* part callouts: a dot on the layer, a hairline, a small label; only true
   of the exploded view, so the script fades them in only there */
.af__callouts { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.af__callouts li {
  position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap;
  transform: translate(0, -50%);
  font-weight: 600; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #f6f1e6; text-shadow: 0 1px 10px rgba(40,24,10,0.6);
  padding-left: 76px;
  transition: opacity .25s linear;
}
.af__callouts li::before {
  content: ""; position: absolute; left: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: #f6f1e6;
  box-shadow: 0 0 0 3px rgba(246,241,230,0.25), 0 0 14px rgba(40,24,10,0.5);
}
.af__callouts li::after {
  content: ""; position: absolute; left: 6px; top: 50%; width: 62px; height: 1px; background: rgba(246,241,230,0.85);
}
.af__callouts li.is-left { padding-left: 0; padding-right: 76px; text-align: right; }
.af__callouts li.is-left::before { left: auto; right: -4px; }
.af__callouts li.is-left::after { left: auto; right: 6px; }

/* the index: nine moments as type, docked to the card's foot */
.ah__index { grid-area: index; align-self: end; min-width: 0; }
.ah__product { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(42,28,18,0.18); }
.ah__name { font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 400; letter-spacing: -0.01em; }
.ah__by { font-weight: 600; font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ah-ink-faint); }
.af__index { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.af__index button {
  all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer;
  padding: 7px 0 7px 18px; position: relative;
  font: inherit; font-size: clamp(0.92rem, 1.1vw, 1.02rem); line-height: 1.3; color: var(--ah-ink-faint);
  transition: color .4s cubic-bezier(.32,.72,0,1);
}
.af__index button::before {
  content: ""; position: absolute; left: 0; top: calc(7px + 0.65em); width: 8px; height: 1px; background: var(--ah-ink);
  opacity: 0; transform: scaleX(0.4); transform-origin: left; transition: opacity .3s, transform .4s cubic-bezier(.32,.72,0,1);
}
.af__index button.is-on::before { opacity: 1; transform: none; }
.af__index button:hover, .af__index button.is-near { color: var(--ah-ink-soft); }
.af__index button.is-on { color: var(--ah-ink); }
.af__index button:focus-visible { outline: 1px solid var(--ah-ink); outline-offset: 4px; }
.af__index button:disabled { cursor: default; }
/* the line beneath the name: only the moment you are at says what it is */
.af__index small {
  display: block; font-size: 0.8rem; line-height: 1.4; color: var(--ah-ink-soft); text-wrap: pretty;
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: opacity .35s cubic-bezier(.32,.72,0,1);
}
.af__index button.is-on small { max-height: none; opacity: 1; margin-top: 3px; }
.ah__now { display: none; }

/* the way down */
.ah__down {
  position: absolute; bottom: 26px; left: 50%; translate: -50% 0; z-index: 4; white-space: nowrap;
  font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  color: var(--ah-ink-faint); text-decoration: none;
  display: inline-flex; align-items: center; gap: 12px;
  transition: color .3s ease;
}
.ah__down::before { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .6; }
.ah__down::after {
  content: ""; width: 6px; height: 6px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  rotate: 45deg; translate: 0 -2px; animation: ahNudge 2.6s ease-in-out infinite;
}
.ah__down:hover, .ah__down:focus-visible { color: var(--ah-ink); }
@keyframes ahNudge { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 2px; } }

/* entrance: ground, card, wordmark, then the index */
.ah__bg, .ah__card, .ah__title, .ah__index { animation: ahIn 1.1s cubic-bezier(.16,1,.3,1) both; }
.ah__silk { animation: ahIn 1.6s ease .2s both; }
.ah__card { animation-delay: .25s; }
.ah__title { animation-delay: .4s; }
.ah__index { animation-delay: .6s; }
@keyframes ahIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 940px) {
  .ah__group { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "card" "index"; row-gap: 18px; width: 100%; }
  .ah__card { --ah-card-h: auto; height: auto; width: 100%; aspect-ratio: var(--ah-aspect); }
  .ah__title { font-size: clamp(2.6rem, 12vw, 5rem); }
  .ah__product { flex-direction: row; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
  /* the index becomes one row you slide along; its line reads below */
  .af__index { flex-direction: row; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; margin: 0 -24px; padding-inline: 24px; scrollbar-width: none; }
  .af__index::-webkit-scrollbar { display: none; }
  .af__index li { flex: none; scroll-snap-align: start; }
  .af__index button { padding: 9px 14px; border: 1px solid rgba(42,28,18,0.18); border-radius: 100px; font-size: 0.8rem; white-space: nowrap; }
  .af__index button::before { display: none; }
  .af__index button.is-on { background: var(--ah-ink); color: #f6f1e6; border-color: var(--ah-ink); }
  .af__index small { display: none; }
  .ah__now { display: block; margin: 12px 0 0; color: var(--ah-ink-soft); font-size: 0.92rem; line-height: 1.45; min-height: 2.9em; text-wrap: pretty; }
  .af__callouts li { font-size: 0.52rem; letter-spacing: 0.14em; padding-left: 46px; }
  .af__callouts li.is-left { padding-right: 46px; }
  .af__callouts li::after { width: 34px; }
  .ah__sticky { padding: 28px 24px 84px; justify-content: flex-start; }
}
@media (max-width: 640px) { .ah { --ah-header: 76px; } }
@media (max-width: 420px) {
  .ah__down { font-size: 0.58rem; letter-spacing: 0.16em; gap: 9px; }
  .ah__down::before { width: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ah__bg, .ah__card, .ah__title, .ah__index { animation: none; }
  .ah__down::after { animation: none; }
  .af__index button, .af__index button::before, .af__index small, .ah__poster, .af__canvas { transition: none; }
}

/* ============================================================
   THE CARTE  (.carte)  — the afters range as a menu
   ============================================================ */
.carte { padding-top: 24px; }
.carte__title { text-align: left; margin-bottom: 40px; }
.carte__list { list-style: none; margin: 0; padding: 0; max-width: 860px; border-top: 1px solid rgba(42,28,18,0.16); }
.carte__item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: center; padding: 22px 0; border-bottom: 1px solid rgba(42,28,18,0.12); }
.carte__pic { margin: 0; width: 150px; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: #e7decd; }
.carte__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.32,.72,0,1); }
.carte__item:hover .carte__pic img { transform: scale(1.04); }
.carte__pic--ivory  { background: #ebe3d3; }
.carte__pic--butter { background: #eedfba; }
.carte__pic--blush  { background: #f0d9d3; }
.carte__pic--oat    { background: #e7decd; }
.carte__pic--powder { background: #dbe2ea; }
.carte__pic--ivory img  { object-position: 50% 55%; }
.carte__pic--butter img { object-position: 50% 30%; }
.carte__pic--blush img  { object-position: 50% 78%; }
.carte__pic--oat img    { object-position: 40% 50%; }
.carte__pic--powder img { object-position: 24% 55%; }
.carte__body h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 400; letter-spacing: -0.01em; margin: 0 0 6px; color: #2a1c12; }
.carte__body p { margin: 0; color: #5b4a3a; font-size: 1rem; max-width: 46ch; }
@media (max-width: 640px) {
  .carte__item { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 16px 0; }
  .carte__pic { width: 96px; }
}
@media (prefers-reduced-motion: reduce) { .carte__pic img { transition: none; } }

/* the range page's afters teaser: the collection, one picture */
.afters__collection { margin: 44px 0 34px; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(70, 48, 24, 0.35); background: #e9e1d0; }
.afters__collection img { width: 100%; height: auto; display: block; }

/* ...which is also the way into the ten-second film. The whole picture is the
   button; the pill names it. Once playing, the video sits over the still in the
   same frame and a press pauses it (the pill comes back as "Play"). */
.afters__film { position: relative; aspect-ratio: 16 / 9; }
.afters__film img { transition: transform 0.9s cubic-bezier(.2,.7,.2,1); }
.afters__film:hover img { transform: scale(1.015); }
.afters__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; }
.afters__film.is-on video { opacity: 1; }
.afters__play { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; background: none; cursor: pointer; display: flex; align-items: flex-end; justify-content: flex-start; padding: clamp(14px, 2.4vw, 30px); }
.afters__pill { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; background: rgba(243, 237, 225, 0.92); color: #2a1c12; font: 400 0.98rem/1 var(--font); letter-spacing: 0.01em; box-shadow: 0 10px 30px -12px rgba(42, 28, 18, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.35s ease; }
.afters__icon { width: 34px; height: 34px; border-radius: 50%; background: #2a1c12; position: relative; flex: none; }
.afters__icon::after { content: ""; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #f3ede1; }
.afters__film.is-playing .afters__icon::after { left: 11.5px; top: 10px; width: 3px; height: 14px; border: 0; border-left: 4px solid #f3ede1; border-right: 4px solid #f3ede1; }
.afters__len { color: #8a7660; font-variant-numeric: tabular-nums; }
.afters__play:hover .afters__pill { transform: translateY(-2px); background: #f3ede1; }
.afters__play:focus-visible { outline: none; }
.afters__play:focus-visible .afters__pill { outline: 2px solid #2a1c12; outline-offset: 3px; }
.afters__film.is-playing .afters__pill { opacity: 0; transform: translateY(6px); }
.afters__film.is-playing .afters__play:hover .afters__pill,
.afters__film.is-playing .afters__play:focus-visible .afters__pill { opacity: 1; transform: none; }
.afters__film.is-loading .afters__icon { animation: aftersPulse 1s ease-in-out infinite; }
@keyframes aftersPulse { 50% { opacity: 0.45; } }
@media (max-width: 640px) { .afters__pill { font-size: 0.9rem; gap: 10px; padding: 8px 14px 8px 8px; } .afters__icon { width: 30px; height: 30px; } .afters__icon::after { left: 11px; top: 8px; } .afters__film.is-playing .afters__icon::after { left: 9.5px; top: 8px; } }
@media (prefers-reduced-motion: reduce) { .afters__film img, .afters__pill, .afters__film video { transition: none; } .afters__film:hover img { transform: none; } .afters__film.is-loading .afters__icon { animation: none; } }

/* ============================================================
   THE BAKERY FLOOR  (.floor)
   Design: Brand | Layout: lookbook strip (one horizontal row, native
   scroll-snap) | Color: Restrained. Every photograph at its own proportion:
   portraits two-by-three, trays three-by-two, one shared height. Captions
   are typeset beneath the frames, not printed over them. The hairline under
   the strip is scroll position, driven by a scroll timeline where the
   browser has one and by main.js where it hasn't.
   ============================================================ */
.floor {
  --floor-h: clamp(340px, 62vh, 600px);
  --floor-cap: 40px;
  --floor-gutter: max(24px, calc((100vw - var(--maxw)) / 2 + 24px));
  padding: 100px 0 112px; /* the index's last rule above is a hard stop already */
  timeline-scope: --floor;
}
.floor__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.floor__intro .section__title { margin-bottom: 18px; }
.floor__intro .section__lead { margin: 0; max-width: 52ch; }
.floor__nav { display: flex; gap: 10px; flex: none; padding-bottom: 6px; }
.floor__btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: border-color .4s cubic-bezier(.32,.72,0,1), background-color .4s cubic-bezier(.32,.72,0,1);
}
.floor__btn:hover { border-color: var(--ink); }
.floor__btn:active { background: rgba(237,232,223,0.06); }
.floor__btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.floor__btn svg { transition: transform .4s cubic-bezier(.32,.72,0,1); }
.floor__btn[data-dir="1"]:hover svg { transform: translateX(2px); }
.floor__btn[data-dir="-1"]:hover svg { transform: translateX(-2px); }

.floor__strip {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 60px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-inline: var(--floor-gutter); scroll-padding-inline: var(--floor-gutter);
  scroll-timeline: --floor inline;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.floor__strip::-webkit-scrollbar { display: none; }
.floor__strip:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.floor__shot { flex: none; margin: 0; scroll-snap-align: start; height: var(--floor-h); }
.floor__shot picture {
  display: block; overflow: hidden; background: var(--surface); border-radius: var(--radius);
  height: calc(var(--floor-h) - var(--floor-cap));
}
.floor__shot--p picture { width: calc((var(--floor-h) - var(--floor-cap)) * 2 / 3); }
.floor__shot--l picture { width: calc((var(--floor-h) - var(--floor-cap)) * 3 / 2); }
.floor__shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s cubic-bezier(.32,.72,0,1);
}
.floor__shot:hover img { transform: scale(1.025); }
.floor__shot figcaption {
  height: var(--floor-cap); display: flex; align-items: flex-end;
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-faint); font-feature-settings: "case"; white-space: nowrap;
  transition: color .4s cubic-bezier(.32,.72,0,1);
}
.floor__shot:hover figcaption { color: var(--ink); }

.floor__bar { height: 1px; background: var(--line-soft); margin: 36px var(--floor-gutter) 0; overflow: hidden; }
.floor__bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left center; transform: scaleX(var(--floor-progress, 0.12)); }
@supports (animation-timeline: scroll()) {
  .floor__bar i { animation: floorProgress linear both; animation-timeline: --floor; }
  @keyframes floorProgress { from { transform: scaleX(0.12); } to { transform: scaleX(1); } }
}

@media (max-width: 940px) {
  .floor { --floor-h: clamp(300px, 54vh, 460px); --floor-cap: 34px; padding: 88px 0 80px; }
  .floor__head { flex-direction: column; align-items: flex-start; gap: 22px; }
  .floor__strip { margin-top: 40px; gap: 10px; }
  .floor__bar { margin-top: 28px; }
}
@media (max-width: 640px) {
  .floor { --floor-h: clamp(280px, 50vh, 400px); }
  .floor__nav { display: none; } /* the strip swipes */
}
@media (prefers-reduced-motion: reduce) {
  .floor__strip { scroll-behavior: auto; }
  .floor__shot img, .floor__shot figcaption, .floor__btn, .floor__btn svg { transition: none; }
  .floor__shot:hover img { transform: none; }
}

/* ============================================================
   FILMS — a muted loop over a still, wherever an element carries
   data-film (see main.js). The still is the poster and the no-JS,
   reduced-motion and data-saver state; the film fades in once it can play
   and runs only while on screen.
   ============================================================ */
.film__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease; pointer-events: none;
}
.has-video > .film__video { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .film__video { display: none; } }

/* ============================================================
   REEL  (.reel) — short kitchen clips as a strip of portrait cards.
   Each card is a still until it scrolls into view; main.js mounts the film
   and plays only the cards on screen. Swipe on touch, scroll on desktop;
   the strip starts on the container's left edge and bleeds off the right.
   ============================================================ */
.reel__track {
  list-style: none; margin: 44px 0 0;
  padding: 0 24px 10px calc((100% - min(100%, var(--maxw))) / 2 + 24px);
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding-left: calc((100% - min(100%, var(--maxw))) / 2 + 24px);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.reel__track::-webkit-scrollbar { display: none; }
.reel__card {
  position: relative; flex: 0 0 clamp(200px, 21vw, 290px); aspect-ratio: 9 / 16;
  border-radius: 6px; overflow: hidden; scroll-snap-align: start; background: #1a120c;
  box-shadow: 0 24px 60px -30px rgba(20, 12, 8, 0.45);
}
.reel__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__caption {
  position: absolute; inset: auto 0 0 0; z-index: 2; margin: 0; padding: 48px 16px 16px;
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  color: #f6f1e6; background: linear-gradient(0deg, rgba(20,12,8,0.72), rgba(20,12,8,0));
}
.reel__hint { margin: 16px 0 0; padding: 0 calc((100% - min(100%, var(--maxw))) / 2 + 24px); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; opacity: .55; }
@media (max-width: 640px) { .reel__card { flex-basis: 62vw; } }
/* ============ CAREERS ============ */
.masthead__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; }
.roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 48px; margin-top: 10px; }
.roles__empty { color: var(--ink-soft); grid-column: 1 / -1; max-width: 640px; }
.roles__empty a { text-decoration: underline; text-underline-offset: 2px; }
.role { border-top: 1px solid var(--line); padding: 22px 0 0; display: grid; gap: 14px; align-content: start; }
.role__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.role__title { font-size: 1.35rem; margin: 0; }
.role__link { color: inherit; }
.role__link:hover { color: var(--accent-2); }
.role__places { margin: 0; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.role__meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 0.92rem; }
.role__meta dt { color: var(--ink-faint); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; padding-top: 3px; }
.role__meta dd { margin: 0; color: var(--ink); }
.role__summary { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.role__actions { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 0; }
.role__pick { color: var(--ink); font-weight: 600; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid var(--line-soft); padding-bottom: 3px; transition: color .2s, border-color .2s; }
.role__pick:hover { color: var(--accent-2); border-color: var(--accent); }
.role__closes { color: var(--ink-faint); font-size: 0.8rem; }
.role__more { color: var(--ink-soft); font-size: 0.82rem; border-bottom: 1px solid var(--line-soft); padding-bottom: 2px; }
.role__more:hover { color: var(--ink); border-color: var(--ink); }
/* A job's own page: the detail under the cards, four ruled columns. */
.jobdetail { padding-top: 0; }
.jobdetail .section__title { text-align: left; }
.jobdetail__intro { margin: 0 0 40px; max-width: 62ch; }
.jobdetail__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.jobdetail__col { border-top: 1px solid var(--line); padding-top: 18px; }
.jobdetail__col h3 { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin: 0 0 14px; }
.jobdetail__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.jobdetail__col li { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; padding-left: 16px; position: relative; }
.jobdetail__col li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 1px; background: var(--gold); }
.jobdetail__cta { margin: 44px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
@media (max-width: 940px) { .jobdetail__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .jobdetail__grid { grid-template-columns: 1fr; gap: 24px; } }
/* A card with its poster: the creative on the left at noticeboard scale, the
   facts beside it. Without a poster the body simply fills the card. */
.role__body { display: grid; gap: 14px; align-content: start; min-width: 0; }
.role--art { grid-template-columns: clamp(150px, 19vw, 210px) minmax(0, 1fr); gap: 14px 26px; align-items: start; }
.role__art { display: block; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.role__art img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
  .role--art { grid-template-columns: 1fr; }
  .role__art { max-width: 300px; }
}

.paths--steps { margin-bottom: 0; }
.path__num { font-family: var(--font); font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: 0.8rem; letter-spacing: 0.16em; margin: 0 0 14px; }
.cta__fair { color: var(--ink-faint); font-size: 0.82rem; margin: 26px 0 0; max-width: 460px; }

.form__group { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.form__group legend { padding: 0; font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; margin-bottom: 2px; }
.form__hint { color: var(--ink-faint); font-weight: 400; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex; margin: 0; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: inline-block; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink-soft); font-size: 0.92rem; font-weight: 500; line-height: 1.2;
  transition: background .15s, color .15s, border-color .15s; user-select: none;
}
.choice input:hover + span { border-color: var(--ink); color: var(--ink); }
.choice input:checked + span { background: var(--ink); color: var(--accent-ink); border-color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.form__done { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 32px; display: grid; gap: 12px; color: var(--ink-soft); }
.form__done:focus { outline: none; }
.form__done-title { font-family: var(--font-display); color: var(--ink); font-size: 1.5rem; line-height: 1.25; margin: 0; }
.form__done a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 940px) { .roles { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .form--apply { padding: 22px; }
  .role__meta { grid-template-columns: 1fr; gap: 2px 0; }
  .role__meta dt { margin-top: 8px; }
}

/* ============================================================
   CAREERS: the drive
   Design: Brand for the offer and the clips, Product for the form.
   Layout: Editorial Split hero → ruled role cards → reel strip → three
   ruled steps + referral row → two-column ruled FAQ → split form.
   Color: Restrained (ivory, one champagne hairline). No new colour.
   ============================================================ */
.hire { padding-bottom: 72px; }
.hire__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 330px); gap: clamp(36px, 6vw, 88px); align-items: end; }
.hire__copy { min-width: 0; }
.hire .masthead__lead { max-width: 52ch; margin-bottom: 26px; }
/* The HR address in the lead reads as a link, like the FAQ answers. */
.hire .masthead__lead a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.hire .masthead__lead a:hover { text-decoration-color: var(--ink); }
.hire .masthead__actions { margin-bottom: 40px; }

/* the offer at a glance: a hairline ledger, not a metric row */
.ledger { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); max-width: 560px; }
.ledger--six { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
.worth .section__title { margin-bottom: 8px; }
.features--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 56px; max-width: 1040px; margin-top: 34px; }
.features--two .feature p { max-width: 46ch; }
@media (max-width: 760px) { .ledger--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } .features--two { grid-template-columns: 1fr; } }
.ledger > div { padding: 14px 20px 14px 0; border-bottom: 1px solid var(--line-soft); }
.ledger dt { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--gold); margin-bottom: 4px; font-feature-settings: "case"; }
.ledger dd { margin: 0; color: var(--ink); font-size: 0.98rem; line-height: 1.4; text-wrap: pretty; }
.ledger dd small { color: var(--ink-faint); font-size: 0.86em; }

.hire__film { position: relative; margin: 0; aspect-ratio: 9 / 16; max-height: 560px; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.hire__poster, .hire__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hire__video { opacity: 0; transition: opacity .8s cubic-bezier(.32,.72,0,1); }
.hire__film.has-video .hire__video { opacity: 1; }
.hire__film figcaption {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 56px 18px 16px;
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  color: var(--ink); background: linear-gradient(0deg, rgba(8,8,11,0.78), rgba(8,8,11,0));
}

/* every role, one line */
.form__referred { display: block; margin-top: 14px; }
/* The form's labels and groups set display, which would beat the hidden attribute. */
.form [hidden] { display: none !important; }
.form__file input[type="file"] { padding: 10px 12px; color: var(--ink-soft); font-size: 0.9rem; cursor: pointer; }
.form__file input[type="file"]::file-selector-button { font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; margin-right: 12px; cursor: pointer; }
.form__routes { margin: 14px 0 0; color: var(--ink-faint); font-size: 0.86rem; line-height: 1.55; }
.form__routes a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.form__routes a:hover { color: var(--ink); }
.form__referred input { margin-top: 8px; }
.friend__name { display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; color: var(--ink-soft); min-width: 0; }
.friend__name input { font: inherit; color: var(--ink); background: rgba(8,8,11,0.6); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; width: 180px; max-width: 100%; }
.friend__name input:focus { outline: none; border-color: var(--ink); }
.form__done-share { margin-top: 14px; color: var(--ink-soft); }
.form__done-link { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line-soft); padding-bottom: 2px; }
.roles__benefits { margin: 44px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft); color: var(--ink-soft); font-size: 0.95rem; }
.roles__benefits:empty { display: none; }
.roles__benefits strong { color: var(--ink); font-weight: 600; }

/* the reel, on a dark page: the card link carries caption and job */
.reel--jobs { padding-bottom: 80px; }
.reel--jobs .section__title { text-align: left; }
.reel--jobs .reel__lead { margin: 0; max-width: 52ch; }
.reel--jobs .reel__card { background: var(--surface); box-shadow: none; border-radius: var(--radius); }
.reel__go { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 72px 18px 18px; color: var(--ink); background: linear-gradient(0deg, rgba(8,8,11,0.82) 0%, rgba(8,8,11,0.35) 45%, rgba(8,8,11,0) 100%); }
.reel__go:focus-visible { outline: 1px solid var(--gold); outline-offset: -6px; }
.reel--jobs .reel__caption { position: static; padding: 0; background: none; color: var(--ink-faint); }
.reel__role { font-size: 0.98rem; font-weight: 600; line-height: 1.3; transition: color .3s cubic-bezier(.32,.72,0,1); }
.reel__card:hover .reel__role { color: var(--gold); }
.reel__card--text .reel__go { justify-content: space-between; padding: 22px 18px; background: none; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.reel__text { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.45; text-wrap: pretty; }
.reel--jobs .reel__hint { color: var(--ink); }

/* tell a friend: one ruled row under the three steps */
.friend { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; }
.friend__title { font-size: 1.3rem; font-weight: 400; margin: 0 0 8px; }
.friend__copy p { margin: 0; color: var(--ink-soft); max-width: 46ch; }
.friend__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.friend__note { font-size: 0.8rem; color: var(--ink-faint); min-width: 8ch; }

/* before you ring: two ruled columns, no accordion */
.faq { padding: 96px 0; }
/* Careers: the five-step application process, the benefits grid (icon +
   label, three across, like the benefits pages HR pointed to), what we're
   looking for, and the FAQ groups. Icons are single-weight line drawings in
   the champagne accent; labels in ivory. */
.paths--five { list-style: none; padding: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.paths--five .path h3 { font-size: 1.05rem; }
.paths--five .path p:not(.path__num) { font-size: 0.93rem; }
@media (max-width: 1080px) { .paths--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .paths--five { grid-template-columns: 1fr; } }
.benefits__grid { list-style: none; margin: 48px auto 0; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 40px; }
.benefits__grid li { display: flex; align-items: center; gap: 18px; font-weight: 600; font-size: 1rem; color: var(--ink); }
.benefits__grid li small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--ink-faint); }
.benefits__grid svg { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.lookfor { max-width: 1040px; margin: 72px auto 0; padding-top: 36px; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 48px; }
.lookfor__title { font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -0.01em; margin: 0; }
.lookfor__list { margin: 0; padding: 0 0 0 1.1em; color: var(--ink-soft); display: grid; gap: 10px; }
.lookfor__list li::marker { color: var(--gold); }
@media (max-width: 900px) { .benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lookfor { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .benefits__grid { grid-template-columns: 1fr; gap: 22px; } }
.faq__group { margin: 40px 0 4px; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.faq__group:first-of-type { margin-top: 20px; }
.faq__list { margin: 12px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; border-top: 1px solid var(--line-soft); }
.faq__item { padding: 26px 0 28px; border-bottom: 1px solid var(--line-soft); }
.faq__item dt { font-size: 1.12rem; font-weight: 600; margin-bottom: 10px; color: var(--ink); text-wrap: balance; }
.faq__item dd { margin: 0; color: var(--ink-soft); font-size: 0.97rem; max-width: 52ch; text-wrap: pretty; }
.faq__item a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.faq__item a:hover { text-decoration-color: var(--ink); }

@media (max-width: 940px) {
  .hire__grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .hire__film { aspect-ratio: 4 / 5; max-height: none; max-width: 420px; }
  .faq__list { grid-template-columns: 1fr; }
  .friend { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .hire { padding-bottom: 56px; }
  .hire__grid { gap: 32px; }
  .hire__film { aspect-ratio: 5 / 4; max-width: none; }
  .ledger { grid-template-columns: 1fr; }
  .ledger > div { padding-right: 0; }
  .faq { padding: 72px 0; }
  .friend { margin-top: 56px; }

  /* two ways in, one bar: the form, or the phone */
  .mobile-cta--split { padding: 0; gap: 0; align-items: stretch; }
  .mobile-cta--split a { display: flex; align-items: center; justify-content: center; gap: 10px; color: inherit; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
  .mobile-cta--split a:first-child { flex: 1; }
  .mobile-cta__call { flex: 0 0 auto; padding-inline: 26px !important; border-left: 1px solid rgba(8,8,11,0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .hire__video, .reel__role { transition: none; }
}