/* ==========================================================================
   Finsa Foods - design system
   Type:   Bricolage Grotesque (display) / Geist (text) / Geist Mono (numerals)
   Accent: one only, chilli vermilion. Locked across every page.
   Radius: buttons = pill, surfaces = --r, chips/inputs = --r-sm. No exceptions.
   Theme:  light, and only light. There is no dark palette and no toggle.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('../fonts/bricolage-latin.woff2') format('woff2');
  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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('../fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  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: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/geistmono-latin.woff2') format('woff2');
  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;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  --bg:        #F4F4F2;
  --bg-2:      #EAEAE7;
  --bg-3:      #FFFFFF;
  --bg-inset:  #E2E2DE;

  --fg:        #14120F;
  --fg-2:      #575249;
  --fg-3:      #6F6960;

  --line:      rgba(20, 18, 15, .16);
  --line-soft: rgba(20, 18, 15, .08);

  --accent:      #E24B2A;
  --accent-text: #AF2F13;
  --accent-wash: rgba(226, 75, 42, .11);

  /* Anything filled solid in the brand orange carries white, not ink. Black on
     orange reads as a warning label. White needs the fill a shade deeper than
     the decorative orange to clear 4.5:1, so solid fills get their own token
     and --accent stays put for rules, eyebrows and washes. */
  --accent-solid: #C9401F;
  --accent-ink:   #FFFFFF;

  /* The white sweep product photography is matted to. The catalogue panels use
     it directly, so no seam shows at the edge of a packshot. */
  --studio: #FFFFFF;

  --shadow-1: 0 1px 2px rgba(20,18,15,.06), 0 8px 24px rgba(20,18,15,.08);
  --shadow-2: 0 2px 6px rgba(20,18,15,.07), 0 28px 60px rgba(20,18,15,.13);

  --r-lg: 26px;
  --r:    16px;
  --r-sm: 10px;
  --r-pill: 999px;

  --font-display: 'Bricolage Grotesque', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --t-display: clamp(2.8rem, 1rem + 7.4vw, 7.5rem);
  --t-h2:      clamp(2.1rem, 1.1rem + 4.2vw, 4.6rem);
  --t-h3:      clamp(1.2rem, .96rem + 1vw, 1.65rem);
  --t-lead:    clamp(1.02rem, .95rem + .38vw, 1.22rem);
  --t-micro:   clamp(.72rem, .69rem + .12vw, .8rem);

  --wrap: 1400px;
  --gutter: clamp(1.25rem, 4.2vw, 4rem);
  --section-y: clamp(5rem, 3rem + 8vw, 11rem);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* Warm light pooling in a dark room. Fixed, so the glow stays put while the
     content moves through it rather than scrolling along as wallpaper. */
  background-color: var(--bg);
  background-image:
    radial-gradient(62% 48% at 8% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 64%),
    radial-gradient(48% 40% at 96% 14%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 66%),
    radial-gradient(70% 50% at 46% 104%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 62%);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--accent-solid); color: var(--accent-ink); }

@media (min-width: 1024px) {
  body { background-attachment: fixed; }
}

.skip-link {
  position: absolute; left: 1rem; top: -100%; z-index: 200;
  background: var(--accent-solid); color: var(--accent-ink);
  padding: .7rem 1.1rem; border-radius: var(--r-pill); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); }

.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* Every raised surface catches a little light on its top edge. One rule, applied
   everywhere, is most of what separates a flat page from a lit one. */
.surface,
.pcard, .item, .recipe, .bento__cell, .two-col__aside, .contact-tiles,
.stack__figure, .feature__media, .idx__stage {
  background-image: linear-gradient(180deg, rgba(255,255,255,.7), transparent 42%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.bento__cell--note { background-image: none; box-shadow: none; }

/* Cursor light. The card the pointer is over warms up, the rest stay in shadow. */
.spot { position: relative; isolation: isolate; }
.spot::after {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--accent) 11%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.spot:hover::after, .spot:focus-within::after { opacity: 1; }

/* Handling. Cards lean toward the pointer, then settle back. */
.tilt {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .7s var(--ease);
}
.tilt.is-held { transition: transform .1s linear; }

/* Headline entrance. Each line rises out of its own mask. */
.split { display: block; }
.split__line { display: block; overflow: hidden; padding-bottom: .04em; }
.split__inner { display: block; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .split:not(.is-shown) .split__inner { transform: translateY(105%); }
  .split__inner { transition: transform .9s var(--ease); transition-delay: var(--line-delay, 0ms); }
}

/* ---------- type utilities ---------- */
.display {
  font-size: var(--t-display);
  line-height: .94;
  letter-spacing: -.035em;
  font-weight: 800;
  font-stretch: 92%;
  text-wrap: balance;
}
.h2 {
  font-size: var(--t-h2);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 700;
  text-wrap: balance;
}
.h3 {
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 46ch;
}
.body-muted { color: var(--fg-2); max-width: 62ch; }
.accent { color: var(--accent-text); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 1.1rem;
}

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn {
  --_bg: transparent;
  --_fg: var(--fg);
  --_bd: var(--line);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
  padding: .82rem 1.5rem;
  border-radius: var(--r-pill);
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_bd);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -.01em;
  transition: transform .18s var(--ease), background-color .22s var(--ease),
              border-color .22s var(--ease), color .22s var(--ease);
}
.btn i { font-size: 1.05em; transition: transform .3s var(--ease); }
.btn:hover i { transform: translateX(3px); }
.btn:active { transform: scale(.975); }

.btn--primary { --_bg: var(--accent-solid); --_fg: var(--accent-ink); --_bd: var(--accent-solid); }
.btn--primary:hover { --_bg: color-mix(in oklab, var(--accent-solid) 86%, var(--fg)); }

.btn--ghost:hover { --_bg: var(--bg-2); --_bd: var(--fg-3); }

.btn--on-media {
  --_bg: rgba(255,255,255,.1);
  --_fg: #fff;
  --_bd: rgba(255,255,255,.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn--on-media:hover { --_bg: rgba(255,255,255,.2); --_bd: rgba(255,255,255,.7); }

/* ---------- magnetic buttons ---------- */
/* The pull rides on `translate`, not on `transform`. Sharing `transform` with
   .btn:active meant each overwrote the other - the press scale wiped the offset
   and the next pointermove wiped the scale - and it left Chrome promoting and
   demoting the layer as the transition started and settled, under-invalidating
   the old rect on the way out. That is what painted a crescent of the button's
   left cap at its rest position and left it there.
   A property nothing else writes to, plus one stable layer held for the life of
   the element, and the two stop fighting. */
[data-magnetic] {
  translate: var(--mag-x, 0px) var(--mag-y, 0px);
  will-change: transform;
  backface-visibility: hidden;
  transition: translate .18s var(--ease), transform .18s var(--ease),
              background-color .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  [data-magnetic] { translate: none; will-change: auto; }
}

/* ---------- the WhatsApp mark ---------- */
/* Drawn as the real logo rather than as an outline glyph from the general set:
   it is the one icon on the page people recognise before they read the label,
   and the outline version read as a plain chat bubble. The paths are classed
   rather than hard filled so an accent or dark ground can invert them. */
.wa-mark {
  flex: 0 0 auto;
  width: 1.2em; height: 1.2em;
  vertical-align: -.22em;
}
.wa-mark__bubble { fill: #25D366; }
.wa-mark__phone { fill: #fff; }
/* Green against the orange accent panel vibrates, so there the mark takes the
   panel's own pair and stays legible without fighting the ground. */
.panel .wa-mark__bubble { fill: var(--accent-ink); }
.panel .wa-mark__phone { fill: var(--accent-solid); }

/* A ghost button whose subject is WhatsApp borrows WhatsApp's green for the
   edge and the wash, so the hover confirms where the tap goes. The mark is a
   logo, not a direction, so it does not slide the way .btn i does. */
.btn--whatsapp { --_bd: color-mix(in srgb, #25D366 38%, var(--line)); }
.btn--whatsapp:hover {
  --_bg: color-mix(in srgb, #25D366 12%, transparent);
  --_bd: #25D366;
}
.btn--whatsapp .wa-mark { transition: transform .3s var(--ease); }
.btn--whatsapp:hover .wa-mark { transform: scale(1.08); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--accent-text);
  border-bottom: 1px solid color-mix(in oklab, var(--accent-text) 40%, transparent);
  padding-bottom: 2px;
  transition: gap .25s var(--ease), border-color .25s var(--ease);
}
.link-arrow:hover { gap: .8rem; border-color: var(--accent-text); }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line-soft); }
@media (prefers-reduced-transparency: reduce) {
  .header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.header__inner {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.brand img { width: 38px; height: 38px; object-fit: contain; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 88%;
  font-size: 1.08rem; letter-spacing: -.025em; line-height: 1;
}
.brand__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-3); margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: .35rem; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem .85rem;
  font-size: .93rem; font-weight: 500; color: var(--fg-2);
  border-radius: var(--r-pill);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link:hover { color: var(--fg); background: var(--bg-2); }
.nav__link[aria-current='page'] { color: var(--fg); }
.nav__link[aria-current='page']::after {
  content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .18rem;
  height: 2px; border-radius: 2px; background: var(--accent);
}
.nav__link--drop i { font-size: .75rem; transition: transform .3s var(--ease); }

/* Drop panels. Hover on pointer devices, click or focus everywhere else, and
   the whole thing is simply absent below the mobile breakpoint. */
.nav__item { position: relative; }
.nav__item > .nav__link { cursor: pointer; }
.nav__panel {
  position: absolute; top: calc(100% + .5rem); left: 50%;
  translate: -50% 0;
  z-index: 70;
  min-width: 320px;
  padding: .8rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 96%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav__panel--wide { min-width: min(860px, 82vw); }
.nav__item[data-open='true'] > .nav__panel {
  opacity: 1; visibility: visible; transform: none;
}
.nav__item[data-open='true'] > .nav__link i { transform: rotate(180deg); }

.navmega { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: .8rem; }
.navmega__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; }
.navmega__cat {
  display: flex; align-items: center; gap: .8rem;
  padding: .65rem .7rem;
  border-radius: var(--r);
  transition: background-color .2s var(--ease);
}
.navmega__cat:hover { background: var(--bg-3); }
.navmega__cat img {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--studio);
  object-fit: contain; padding: 4px;
}
.navmega__cat strong { display: block; font-size: .92rem; font-weight: 600; letter-spacing: -.01em; }
.navmega__cat span span { display: block; font-size: .76rem; color: var(--fg-3); line-height: 1.35; margin-top: 2px; }
.navmega__side {
  display: flex; flex-direction: column; gap: .1rem;
  padding: 1rem;
  border-radius: var(--r);
  background: var(--bg-inset);
}
.navmega__label {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3);
  margin-bottom: .5rem;
}
.navmega__side > a:not(.btn) {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 0;
  font-size: .9rem; color: var(--fg-2);
  border-bottom: 1px solid var(--line-soft);
  transition: color .2s var(--ease);
}
.navmega__side > a:not(.btn):hover { color: var(--accent-text); }
.navmega__side > a i { font-size: .85rem; }
.navmega__cta { margin-top: auto; justify-content: center; }

.navlist { display: grid; gap: .15rem; }
.navlist a {
  padding: .7rem .8rem;
  border-radius: var(--r);
  transition: background-color .2s var(--ease);
}
.navlist a:hover { background: var(--bg-3); }
.navlist strong { display: block; font-size: .93rem; font-weight: 600; letter-spacing: -.01em; }
.navlist span { display: block; font-size: .78rem; color: var(--fg-3); margin-top: 2px; line-height: 1.4; }

.header__actions { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 1.15rem;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.icon-btn:hover { color: var(--fg); border-color: var(--fg-3); background: var(--bg-2); }

.nav-toggle { display: none; }

@media (max-width: 1023px) {
  .nav, .header__actions .btn { display: none; }
  .nav-toggle { display: grid; }
}

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 70;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: 1.1rem var(--gutter) 2rem;
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
  overflow-y: auto;
}
.mobile-menu[data-open='true'] { transform: translateY(0); }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; height: 46px; }
.mobile-menu__links { margin-top: 1.8rem; display: grid; gap: .1rem; }
.mobile-menu__links a {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 6vw, 2.1rem);
  font-weight: 700; font-stretch: 90%; letter-spacing: -.035em;
  line-height: 1.2;
  padding-block: .3rem;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: baseline; justify-content: space-between;
}
.mobile-menu__links a span { font-family: var(--font-mono); font-size: .68rem; color: var(--fg-3); letter-spacing: .1em; }
.mobile-menu__label {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3);
  margin: 1.6rem 0 .5rem;
}
.mobile-menu__label:first-child { margin-top: 0; }
.mobile-menu__foot { margin-top: auto; padding-top: 2.5rem; display: grid; gap: .8rem; }
.mobile-menu__foot a { color: var(--fg-2); font-size: .95rem; display: flex; align-items: center; gap: .6rem; }
.mobile-menu__foot .btn { justify-content: center; }

/* ==========================================================================
   Hero  -  one photograph, edge to edge

   The flat-lay was shot for this job: bowls and papad banked to the right,
   the left third left as clean cream. So nothing here is a scrim laid over
   food to make type legible - the copy stands on ground the photograph
   actually gives it, and the only gradient is a short feather where the two
   halves meet, for the widths where the crop pushes the bowls inward.

   The hero runs warm (#FDF3E8, sampled off the photograph) against the cool
   page ground, so it has to own its own colour tokens. Everything that floats
   on it is rationed: one bestseller, one provenance stamp, one category rail.
   ========================================================================== */
.hero {
  --hero-ground: #FDF3E8;
  --hero-ink: #2A1408;
  --hero-line: color-mix(in srgb, var(--hero-ink) 15%, transparent);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(92svh, 900px);
  background: var(--hero-ground);

  /* Pulled up under the sticky header and padded back out, so the photograph
     starts at the top of the viewport rather than after a 68px band of the
     page cool grey. */
  margin-top: -68px;
  padding-block: calc(68px + clamp(1.75rem, 1rem + 3vw, 3.5rem)) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

/* The header is only a surface once it has something to sit on. At the top of
   the page it is over the hero own ground, and elsewhere over the page ground,
   so transparent is correct in both cases until it sticks. */
.header:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* A short feather into the band below, so the warm hero hands off to the cool
   assurance strip instead of butting against it. */
.hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(56px, 8vw, 110px);
  background: linear-gradient(to bottom, transparent, var(--bg-2));
  z-index: 1;
  pointer-events: none;
}

/* ---------- the photograph ---------- */
.hero__bg { position: absolute; inset: 0; z-index: 0; }

.hero__bg img {
  position: absolute;
  left: 0; width: 100%;
  /* Only just oversized. The photograph is a 2.28:1 crop and the hero is
     close to it, so every extra percent here is magnification, and
     magnification is what walks the bowls into the headline. */
  top: -2%; height: 104%;
  object-fit: cover;
  object-position: 100% 50%;
  display: block;
}

/* Feather, not a scrim. Opaque only across the strip the photograph already
   left empty; gone entirely by the time it reaches the bowls. The second layer
   is the nav's ground - a long, soft lift of the same cream across the top, so
   the links never have to be read against a bowl of chana. */
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--hero-ground) 82%, transparent) 0,
      color-mix(in srgb, var(--hero-ground) 40%, transparent) 9%,
      transparent 22%
    ),
    linear-gradient(
    96deg,
    var(--hero-ground) 0 26%,
    color-mix(in srgb, var(--hero-ground) 86%, transparent) 40%,
    color-mix(in srgb, var(--hero-ground) 40%, transparent) 52%,
    transparent 64%
  );
}

/* ---------- the message ---------- */
.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.hero__copy { max-width: min(37rem, 50%); }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.35rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--hero-ink) 60%, transparent);
}
.hero__eyebrow::after {
  content: '';
  flex: 0 0 auto;
  width: clamp(1.75rem, 5vw, 4.5rem);
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.hero__title {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 94%;
  font-size: clamp(2.5rem, .9rem + 4.5vw, 5.2rem);
  line-height: .93;
  letter-spacing: -.045em;
  color: var(--hero-ink);
}
.hero__line { display: block; }
/* Full-strength vermilion, not the darkened text tint. At this size the
   contrast requirement is 3:1 and the brighter red is what carries the line. */
.hero__line--accent { color: var(--accent); }

.hero__lead {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--hero-ink) 72%, transparent);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

/* The secondary route is a rule under a label, not a second button. Two pills
   side by side read as a choice between equals, which this is not. */
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid color-mix(in srgb, var(--hero-ink) 26%, transparent);
  font-weight: 600;
  font-size: 1rem;
  color: var(--hero-ink);
  transition: gap .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.hero__link i { transition: transform .3s var(--ease); }
.hero__link:hover { gap: .95rem; color: var(--accent-text); border-bottom-color: var(--accent); }

/* ---------- the three marks ---------- */
.hero__marks {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.1rem, 3vw, 2.6rem);
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 0;
  padding: 0;
  list-style: none;
}
.hero__marks li {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  text-align: center;
}
.hero__marks li + li::before {
  content: '';
  position: absolute;
  left: calc(clamp(1.1rem, 3vw, 2.6rem) / -2);
  top: .35rem; bottom: .35rem;
  width: 1px;
  background: var(--hero-line);
}
.hero__mark {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--accent);
  font-size: 1.3rem;
}
.hero__marks li > span + span {
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
  color: color-mix(in srgb, var(--hero-ink) 86%, transparent);
}

/* ---------- provenance, set against the right edge ---------- */
.hero__edge {
  position: absolute;
  z-index: 2;
  right: clamp(.75rem, 1.4vw, 1.5rem);
  top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(3rem, 10vw, 8rem);
  text-align: right;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.7;
  color: color-mix(in srgb, var(--hero-ink) 62%, transparent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--hero-ground) 85%, transparent);
}
.hero__edge p { margin: 0; position: relative; }
.hero__stamp::after {
  content: '';
  position: absolute; right: 0; bottom: -.8rem;
  width: 2.2rem; height: 1px;
  background: currentColor; opacity: .5;
}
.hero__place i { display: block; margin-bottom: .3rem; font-size: 1rem; color: var(--accent); }

/* ---------- the range rail ---------- */
.hero__foot {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

.hero__range {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.4vw, 1.4rem);
  padding: .65rem .65rem .65rem 1.5rem;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, #fff 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-1);
}
.hero__range-label {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.hero__range ul {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(.15rem, .8vw, .6rem);
  margin: 0; padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* Six categories rarely fit. Fading the trailing edge says the row scrolls,
     instead of leaving a chip that looks accidentally cut by the arrow. */
  mask-image: linear-gradient(to right, #000 0 calc(100% - 4.5rem), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 0 calc(100% - 4.5rem), transparent);
}
.hero__range li { scroll-snap-align: start; }
.hero__range ul::-webkit-scrollbar { display: none; }
.hero__range li { flex: 0 0 auto; }
.hero__range a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .9rem .4rem .4rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .94rem;
  letter-spacing: -.01em;
  color: var(--hero-ink);
  white-space: nowrap;
  transition: background-color .22s var(--ease);
}
.hero__range a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.hero__range img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--studio);
}
.hero__range a i { font-size: .8rem; opacity: .4; }

/* The rail ends in an action, not an ornament. A bare orange disc with an
   arrow in it never says where it goes, and it sits right where the trailing
   fade is eating the last chip, so it reads as part of the cut-off rather than
   as a control. A labelled pill says the thing, keeps the row's own pill
   language, and has somewhere to put a focus ring. */
.hero__range-all {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .5rem;
  height: 48px;
  padding: 0 1.05rem 0 1.2rem;
  border-radius: var(--r-pill);
  background: var(--accent-solid);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20,18,15,.14),
              0 10px 22px color-mix(in srgb, var(--accent-solid) 26%, transparent);
  transition: background-color .22s var(--ease), box-shadow .3s var(--ease),
              transform .22s var(--ease);
}
.hero__range-all i { font-size: .95rem; transition: transform .3s var(--ease); }
.hero__range-all:hover {
  background: color-mix(in oklab, var(--accent-solid) 86%, var(--fg));
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(20,18,15,.16),
              0 14px 30px color-mix(in srgb, var(--accent-solid) 34%, transparent);
}
.hero__range-all:hover i { transform: translateX(3px); }
.hero__range-all:active { transform: translateY(0) scale(.97); }
/* The global focus ring squares its own radius off at 4px, which cuts the
   corners off a pill. Give this one back its shape. */
.hero__range-all:focus-visible { outline-offset: 3px; border-radius: var(--r-pill); }

/* The signature. There is no script face in the kit and one webfont for one
   line is not worth the bytes, so it is the display face at its narrowest
   width axis, tilted, over a drawn underline. */
.hero__sign {
  flex: 0 0 auto;
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 76%;
  font-size: clamp(1rem, .55rem + .85vw, 1.4rem);
  line-height: 1.12;
  text-align: right;
  color: var(--accent-text);
  transform: rotate(-4deg);
  transform-origin: 100% 50%;
  /* It lands wherever the crop puts it - cream at one width, the red cloth at
     the next - so it carries its own ground rather than assuming one. */
  text-shadow:
    0 0 6px color-mix(in srgb, var(--hero-ground) 94%, transparent),
    0 0 16px color-mix(in srgb, var(--hero-ground) 88%, transparent),
    0 0 34px color-mix(in srgb, var(--hero-ground) 72%, transparent);
}
.hero__sign em { font-style: normal; display: inline-block; margin-right: .55rem; }
.hero__sign svg {
  display: block;
  width: 8.5rem; height: .6rem;
  margin: .3rem 0 0 auto;
  color: var(--accent);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--hero-ground) 90%, transparent));
}

@media (prefers-reduced-transparency: reduce) {
  .hero__range { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* `backwards`, not `both`. The last keyframe is opacity 1 / transform none,
     which is what these elements are anyway, so filling forwards bought
     nothing and cost something: a finished animation that still owns the
     transform property keeps the element a composited layer for the life of
     the page. .hero__cta is the parent of the magnetic button, and a child
     moving inside that stale layer was leaving unrepainted slivers of itself
     behind. Holding only the `from` state, before the delay elapses, is all
     this ever needed. */
  .hero__eyebrow,
  .hero__line,
  .hero__lead,
  .hero__cta,
  .hero__marks,
  .hero__foot {
    animation: hero-rise .95s var(--ease) backwards;
    animation-delay: var(--hero-in, 0ms);
  }
  .hero__line:nth-child(1) { --hero-in: 90ms; }
  .hero__line:nth-child(2) { --hero-in: 170ms; }
  .hero__lead  { --hero-in: 280ms; }
  .hero__cta   { --hero-in: 360ms; }
  .hero__marks { --hero-in: 440ms; }
  .hero__foot  { --hero-in: 640ms; }

  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   Hero  -  responsive
   ========================================================================== */

/* The edge stamp needs clear air outside the content column. Below this the
   wrap has grown into the gutter and there is none, so it goes. */
@media (max-width: 1360px) {
  .hero__edge { display: none; }
}

@media (max-width: 1180px) {
  .hero__copy { max-width: 55%; }
  .hero__sign { display: none; }
}

/* Below the split the photograph stops being a background and becomes a band
   of its own, under the message. The <source> swap hands it the crop that is
   mostly food, so it still reads at a third of the width. */
@media (max-width: 900px) {
  .hero {
    min-height: 0;
    justify-content: flex-start;
    padding-block: calc(68px + clamp(2rem, 6vw, 3rem)) clamp(2.5rem, 6vw, 3.5rem);
  }

  .hero__bg {
    position: relative;
    inset: auto;
    order: 2;
    height: clamp(240px, 54vw, 380px);
    margin-top: clamp(1.75rem, 5vw, 2.75rem);
  }
  .hero__bg img { inset: 0; top: 0; height: 100%; object-position: 50% 45%; }
  .hero__bg::after { display: none; }

  .hero__inner { order: 1; display: block; }
  .hero__foot { order: 3; }

  .hero__copy { max-width: 34rem; }
  .hero__title { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 3.6rem); }
  .hero__lead { max-width: 46ch; }

  .hero__range { padding-left: 1rem; }
  .hero__range-label { display: none; }
}

@media (max-width: 620px) {
  /* The eyebrow wraps to two lines here, which strands the rule at the end of
     the first one. Drop the rule rather than the words. */
  .hero__eyebrow { display: block; }
  .hero__eyebrow::after { content: none; }

  .hero__cta { gap: .9rem 1.2rem; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .hero__marks { gap: .9rem; justify-content: space-between; width: 100%; }
  .hero__marks li + li::before { left: -.45rem; }
  .hero__mark { width: 40px; height: 40px; font-size: 1.15rem; }
  .hero__marks li > span + span { font-size: .78rem; }
  .hero__range { padding: .5rem .5rem .5rem .75rem; border-radius: var(--r); }
  .hero__range img { width: 38px; height: 38px; }
  .hero__range a { font-size: .88rem; padding-right: .7rem; }
  /* The label stays. Dropping it here left a bare orange disc sitting in the
     rail's trailing fade, which is exactly the control this pill was made to
     replace - it reads as an ornament, or as part of the cut-off edge, rather
     than as the way out to the catalogue. It costs about 40px in a row that
     already scrolls, so the row pays it. */
  .hero__range-all {
    height: 44px;
    padding: 0 .8rem 0 .95rem;
    gap: .4rem;
    font-size: .82rem;
    box-shadow: 0 1px 2px rgba(20,18,15,.14),
                0 6px 16px color-mix(in srgb, var(--accent-solid) 24%, transparent);
  }
  .hero__range-all i { font-size: .9rem; }
}

/* ==========================================================================
   Assurance strip  (hairline, not cards)
   ========================================================================== */
.assure {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
}

/* Who we sell to. Lifted out of the hero, where it was a sixth element
   competing with the headline, and given the full width here instead. */
.assure__lead {
  display: flex; align-items: flex-start; gap: .85rem;
  max-width: 78ch;
  padding: clamp(1.5rem, 3vw, 2.2rem) 0 clamp(1.3rem, 2.4vw, 1.8rem);
  font-size: clamp(.98rem, .94rem + .2vw, 1.1rem);
  line-height: 1.55;
  color: var(--fg-2);
}
.assure__lead i { flex-shrink: 0; margin-top: .12rem; font-size: 1.4rem; color: var(--accent-text); }
.assure__lead strong { color: var(--fg); font-weight: 600; }

.assure__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-soft);
}
.assure__item {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.6rem clamp(.8rem, 2vw, 1.6rem);
  border-left: 1px solid var(--line-soft);
}
.assure__item:first-child { border-left: 0; }
.assure__item img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.assure__item i { font-size: 1.6rem; color: var(--accent-text); flex-shrink: 0; }
.assure__item strong { display: block; font-size: .9rem; font-weight: 600; letter-spacing: -.01em; }
.assure__item span { display: block; font-size: .8rem; color: var(--fg-3); line-height: 1.35; }

@media (max-width: 860px) {
  .assure__row { grid-template-columns: repeat(2, 1fr); }
  .assure__item:nth-child(odd) { border-left: 0; }
  .assure__item:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 460px) {
  .assure__row { grid-template-columns: 1fr; }
  .assure__item { border-left: 0; }
  .assure__item + .assure__item { border-top: 1px solid var(--line-soft); }
}

/* ==========================================================================
   Section headers
   ========================================================================== */
.sec-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 4vw, 4.5rem); }
.sec-head p { margin-top: 1.1rem; }
.sec-head--row {
  max-width: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.sec-head--row > div { max-width: 44rem; }

/* ==========================================================================
   Range  (pinned horizontal pan on desktop / scroll-snap on mobile)
   ========================================================================== */
.range { background: var(--bg); position: relative; }
.range__pin {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.range__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.range__head > div { max-width: 44rem; }
.range__head .sec-head { margin-bottom: 0; }
.range__viewport { overflow: hidden; }
.range__track {
  display: flex;
  gap: clamp(1rem, 1.6vw, 1.8rem);
  padding-inline: var(--gutter);
  will-change: transform;
}

.pcard {
  flex: 0 0 clamp(268px, 25vw, 360px);
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* White, like the catalogue tiles: the packshot panel and the label below it
     read as one surface instead of a white rectangle inset in a grey card. */
  background: var(--bg-3);
  border: 1px solid var(--line);
  aspect-ratio: 3 / 4.05;
  display: flex; flex-direction: column;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.pcard:hover { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); }
.pcard__media {
  position: relative;
  flex: 1;
  overflow: hidden;
  /* Product photography sits on a fixed studio sweep in both themes so the
     supplier shots stay colour-true. It is a media surface, not a theme flip. */
  background: var(--studio);
}
.pcard__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: clamp(1.4rem, 3vw, 2.6rem);
  transition: transform .6s var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.07) rotate(-2.5deg); }
.pcard__media--cover img { object-fit: cover; padding: 0; }

.pcard__body {
  padding: 1.15rem 1.3rem 1.35rem;
  border-top: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.pcard__body h3 { font-size: 1.22rem; letter-spacing: -.025em; }
.pcard__body p {
  font-size: .84rem; color: var(--fg-3); margin-top: .3rem; line-height: 1.4;
  min-height: 2.8em;
}
.pcard__body i { font-size: 1.1rem; color: var(--fg-3); transition: color .25s var(--ease), transform .35s var(--ease); }
.pcard:hover .pcard__body i { color: var(--accent-text); transform: translateX(4px); }

@media (max-width: 1023px) {
  .range__pin { min-height: 0; }
  .range__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .range__viewport::-webkit-scrollbar { display: none; }
  .range__track { padding-right: var(--gutter); }
  .pcard { scroll-snap-align: start; flex-basis: min(74vw, 320px); }
}

/* ==========================================================================
   Heritage  (full-bleed media with overlay)
   ========================================================================== */
.heritage {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.heritage__media { position: absolute; inset: 0; z-index: -2; }
.heritage__media img { width: 100%; height: 100%; object-fit: cover; }
.heritage::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,7,6,.45) 0%, rgba(8,7,6,.25) 32%, rgba(8,7,6,.9) 88%);
}
.heritage__inner { width: 100%; padding-block: clamp(3rem, 6vw, 6rem); color: #F7F4EF; }
.heritage .h2 { max-width: 52rem; }
.heritage p { color: rgba(247,244,239,.78); max-width: 52ch; margin-top: 1.2rem; }
.heritage .eyebrow { color: rgba(247,244,239,.62); }

.facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(247,244,239,.24);
}
.facts li { padding: 1.4rem clamp(1rem, 2vw, 1.8rem) 1.4rem 0; }
.facts li + li {
  padding-left: clamp(1rem, 2vw, 1.8rem);
  border-left: 1px solid rgba(247,244,239,.24);
}
.facts b {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.15rem, .9rem + .8vw, 1.6rem); font-weight: 700;
  letter-spacing: -.02em;
}
.facts span { display: block; font-size: .84rem; color: rgba(247,244,239,.62); margin-top: .3rem; }
@media (max-width: 700px) {
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts li { padding: 1.1rem 0; border-top: 1px solid rgba(247,244,239,.16); }
  .facts li:first-child { border-top: 0; }
  .facts li + li { padding-left: 0; }
}

/* ==========================================================================
   Process  (sticky stack)
   ========================================================================== */
.stack { position: relative; }
.stack__card {
  position: sticky; top: 0;
  min-height: 100dvh;
  display: flex; align-items: center;
  background: var(--bg);
}
.stack__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}
.stack__step {
  font-family: var(--font-mono);
  font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1.1rem;
}
.stack__figure {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.stack__figure img { width: 100%; height: 100%; object-fit: cover; }
.stack__inner ul { margin-top: 1.6rem; display: grid; gap: .7rem; }
.stack__inner ul li {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .95rem; color: var(--fg-2);
}
.stack__inner ul i { color: var(--accent-text); font-size: 1.1rem; margin-top: .12rem; flex-shrink: 0; }

@media (max-width: 900px) {
  .stack__card { position: static; min-height: 0; }
  .stack__inner { grid-template-columns: 1fr; }
  .stack__figure { order: -1; }
}

/* ==========================================================================
   Bento  (recipes)
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(300px, auto);
  gap: clamp(.9rem, 1.4vw, 1.4rem);
}
.bento__cell {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.3rem, 2.4vw, 2rem);
  min-height: 250px;
  isolation: isolate;
  transition: border-color .3s var(--ease);
}
.bento__cell:hover { border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); }
.bento__cell img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.bento__cell:hover img { transform: scale(1.05); }
/* ::before, not ::after. A cell that is also .spot shares ::after with the
   cursor light, which sets opacity:0 until hover - putting the scrim there
   meant the scrim vanished too, and the copy sat on bare photograph. */
.bento__cell::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  /* the copy sits in the lower third, so the scrim has to be genuinely dark
     there: these cells carry pale photographs as well as dark ones */
  background: linear-gradient(180deg, rgba(8,7,6,.12) 0%, rgba(8,7,6,.42) 34%,
              rgba(8,7,6,.86) 66%, rgba(8,7,6,.96) 100%);
}
.bento__cell h3 { color: #F7F4EF; font-size: clamp(1.15rem, .95rem + .7vw, 1.7rem); }
.bento__cell p { color: rgba(247,244,239,.76); font-size: .9rem; margin-top: .5rem; max-width: 40ch; }
.bento__cell .link-arrow { color: #FFAF97; border-color: rgba(255,175,151,.4); margin-top: 1.1rem; align-self: flex-start; }
.bento__cell .link-arrow:hover { border-color: #FFAF97; }

.bento__cell--wide { grid-column: span 2; min-height: 380px; }
.bento__cell--full { grid-column: 1 / -1; min-height: 240px; }

.bento__cell--note {
  background: var(--accent-solid);
  color: var(--accent-ink);
  justify-content: space-between;
}
.bento__cell--note::before { display: none; }
.bento__cell--note h3 { color: var(--accent-ink); }
.bento__cell--note p { color: color-mix(in srgb, var(--accent-ink) 82%, var(--accent-solid)); }
.bento__cell--note i { font-size: 1.9rem; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__cell--wide { grid-column: span 2; min-height: 330px; }
  .bento__cell--full { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell--wide { grid-column: span 1; }
}

/* ==========================================================================
   Index list  (hover swaps the pinned image)
   ========================================================================== */
.idx {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.idx__list { border-top: 1px solid var(--line); }
.idx__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: baseline;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) 0;
  border-bottom: 1px solid var(--line);
  cursor: default;
  transition: padding-left .35s var(--ease);
}
.idx__row:hover, .idx__row.is-active { padding-left: clamp(.5rem, 1.5vw, 1.2rem); }
.idx__row .num { font-size: .74rem; color: var(--fg-3); letter-spacing: .1em; }
.idx__row h3 { font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); transition: color .3s var(--ease); }
.idx__row.is-active h3 { color: var(--accent-text); }
.idx__row p { color: var(--fg-2); font-size: .93rem; margin-top: .6rem; max-width: 52ch; }
.idx__row figure { display: none; margin: 1.1rem 0 0; }

.idx__stage {
  position: sticky; top: 110px;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.idx__stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity .55s var(--ease), transform 1.1s var(--ease);
  transform: scale(1.05);
}
.idx__stage img.is-shown { opacity: 1; transform: scale(1); }

@media (max-width: 900px) {
  .idx { grid-template-columns: 1fr; }
  .idx__stage { display: none; }
  .idx__row figure {
    display: block;
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--line);
  }
  .idx__row figure img { width: 100%; height: 100%; object-fit: cover; }
}

/* ==========================================================================
   Marquee  (one per site)
   ========================================================================== */
.marquee {
  border-block: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
  padding-block: clamp(1.4rem, 2.6vw, 2.4rem);
  display: flex;
  --marquee-gap: clamp(1.6rem, 3vw, 3rem);
  gap: var(--marquee-gap);
}
.marquee__group {
  display: flex; gap: var(--marquee-gap); flex-shrink: 0;
  align-items: center;
  animation: marquee 34s linear infinite;
}
.marquee span {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2.6vw, 3.1rem);
  font-weight: 700; font-stretch: 88%; letter-spacing: -.03em;
  white-space: nowrap;
  color: var(--fg-3);
}
.marquee span:nth-of-type(even) { color: var(--accent-text); }
.marquee i { color: var(--fg-3); font-size: 1.4rem; opacity: .5; }
@keyframes marquee { to { transform: translateX(calc(-100% - var(--marquee-gap))); } }
.marquee:hover .marquee__group { animation-play-state: paused; }

/* ==========================================================================
   Split CTA
   ========================================================================== */
.cta {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
}
.cta__copy { padding: clamp(2rem, 4vw, 3.6rem); display: flex; flex-direction: column; justify-content: center; }
.cta__copy p { margin-top: 1.1rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.cta__media { position: relative; min-height: 300px; }
.cta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .cta { grid-template-columns: 1fr; }
  .cta__media { min-height: 240px; order: -1; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 3.2vw, 3rem);
  padding-block: clamp(3rem, 5vw, 5rem);
}
.footer__brand { grid-row: span 1; }
.footer__brand p { color: var(--fg-2); font-size: .93rem; margin-top: 1.2rem; max-width: 34ch; }
.footer__brand .footer__badges { margin-top: 1.4rem; }
.footer h4 {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3);
  font-weight: 500; margin-bottom: 1.1rem;
}
.footer ul { display: grid; gap: .6rem; }
.footer ul a, .footer address a {
  color: var(--fg-2); font-size: .93rem; font-style: normal;
  transition: color .2s var(--ease);
  display: inline-flex; align-items: center; gap: .5rem;
  overflow-wrap: anywhere;
}
.footer ul a:hover, .footer address a:hover { color: var(--accent-text); }
.footer address { display: grid; gap: .7rem; font-style: normal; }
.footer__bottom {
  border-top: 1px solid var(--line-soft);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: .82rem; color: var(--fg-3);
}
.footer__badges { display: flex; gap: .8rem; align-items: center; }
.footer__badges img {
  width: 34px; height: 34px; object-fit: contain;
  background: #fff; padding: 4px; border-radius: var(--r-sm);
}
@media (max-width: 1100px) {
  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .footer__top { grid-template-columns: 1fr; } }

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */
.page-head {
  padding-top: clamp(3.5rem, 6vw, 6rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 100% at 8% 0%, var(--accent-wash), transparent 60%);
  pointer-events: none;
}
.page-head__inner { position: relative; }
.page-head .display { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4.8rem); }
.page-head .lead { margin-top: 1.4rem; max-width: 52ch; }

.crumb {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 1.5rem;
}
.crumb a { transition: color .2s var(--ease); }
.crumb a:hover { color: var(--fg); }
.crumb i { font-size: .8rem; }

/* ==========================================================================
   Product catalogue
   ========================================================================== */
.filters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-bottom: clamp(2rem, 3vw, 3rem);
}
.chip {
  padding: .55rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: .88rem; font-weight: 500; color: var(--fg-2);
  transition: all .22s var(--ease);
}
.chip:hover { color: var(--fg); border-color: var(--fg-3); }
.chip[aria-pressed='true'] {
  background: var(--accent-solid); color: var(--accent-ink); border-color: var(--accent-solid);
}

.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: clamp(1rem, 1.6vw, 1.6rem);
}
.item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-3);
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease), transform .35s var(--ease);
}
.item:hover { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); transform: translateY(-3px); }
.item__media {
  position: relative; aspect-ratio: 1;
  background: var(--studio);
  overflow: hidden;
}
.item__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: clamp(1.2rem, 2.4vw, 2rem);
  transition: transform .6s var(--ease);
}
.item:hover .item__media img { transform: scale(1.06); }
.item__media--cover img { object-fit: cover; padding: 0; }
.item__body { padding: 1.1rem 1.25rem 1.35rem; border-top: 1px solid var(--line); }
.item__body h3 { font-size: 1.08rem; letter-spacing: -.02em; }
.item__body p { font-size: .85rem; color: var(--fg-2); margin-top: .45rem; line-height: 1.45; }
.item__tag {
  display: inline-block; margin-bottom: .6rem;
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text);
}
.item[hidden] { display: none; }

.catalog__empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.catalog__empty i { font-size: 2.2rem; color: var(--fg-3); }
.catalog__empty h3 { margin-top: 1rem; font-size: 1.2rem; }
.catalog__empty p { color: var(--fg-2); margin-top: .5rem; }
.catalog__empty .btn { margin-top: 1.6rem; }

/* ==========================================================================
   Prose (about / recipe detail)
   ========================================================================== */
.prose { max-width: 68ch; }
.prose > .h2 { margin-bottom: clamp(1.2rem, 2vw, 1.8rem); }
.prose p { color: var(--fg-2); font-size: 1.02rem; }
.prose p + p { margin-top: 1.2rem; }
.prose h3 { margin-top: 2.6rem; margin-bottom: .9rem; font-size: 1.35rem; }
.prose ol { counter-reset: step; display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.prose ol li {
  counter-increment: step;
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  color: var(--fg-2);
}
.prose ol li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .78rem; color: var(--accent-text);
  padding-top: .25rem;
}
.prose ul { display: grid; gap: .7rem; margin-top: 1.2rem; }
.prose ul li { display: flex; gap: .7rem; color: var(--fg-2); }
.prose ul li i { color: var(--accent-text); margin-top: .2rem; flex-shrink: 0; }

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.two-col__aside {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  background: var(--bg-2);
  position: sticky; top: 110px;
}
.two-col__aside dl { display: grid; gap: 1rem; margin: 1.2rem 0 0; }
.two-col__aside dt {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
}
.two-col__aside dd { margin: .25rem 0 0; font-size: .95rem; }
@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr. A bare 1fr floors at the column's min-content, and
     the contact tiles carry an email address with no break opportunity in it -
     308px of unbreakable text against 280px of usable width at 320. The track
     refused to shrink, so the whole column sat wider than the wrap and every
     width:100% input in the sibling column punched through the right gutter. */
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .two-col__aside { position: static; }
}

/* ==========================================================================
   Recipe cards
   ========================================================================== */
.recipes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.2rem, 2vw, 2rem);
}
.recipe {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease);
}
.recipe:hover { border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); }
.recipe__media { aspect-ratio: 16 / 11; overflow: hidden; }
.recipe__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.recipe:hover .recipe__media img { transform: scale(1.05); }
.recipe__body { padding: clamp(1.2rem, 2.2vw, 1.7rem); display: flex; flex-direction: column; flex: 1; }
.recipe__meta {
  display: flex; gap: 1.2rem; margin-top: .9rem;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3);
}
.recipe__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.recipe__body p { color: var(--fg-2); font-size: .92rem; margin-top: .8rem; }
.recipe details { margin-top: 1.3rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.recipe summary {
  cursor: pointer; list-style: none; font-weight: 600; font-size: .92rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.recipe summary::-webkit-details-marker { display: none; }
.recipe summary i { transition: transform .3s var(--ease); color: var(--fg-3); }
.recipe details[open] summary i { transform: rotate(45deg); }
.recipe details .prose { margin-top: 1.1rem; }
.recipe details .prose p, .recipe details .prose li { font-size: .9rem; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: 1.2rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: .88rem; font-weight: 600; }
.field .hint { font-size: .8rem; color: var(--fg-2); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: .82rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-3); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field textarea { min-height: 140px; resize: vertical; }
.field .error { font-size: .82rem; color: var(--accent-text); display: none; }
.field[data-invalid='true'] input,
.field[data-invalid='true'] textarea { border-color: var(--accent-text); }
.field[data-invalid='true'] .error { display: block; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

.form__status {
  border-radius: var(--r-sm);
  padding: .9rem 1.1rem;
  font-size: .9rem;
  border: 1px solid var(--line);
  background: var(--bg-3);
  display: none;
}
.form__status[data-state='ok'] { display: block; border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.form__status[data-state='error'] { display: block; border-color: var(--accent-text); color: var(--accent-text); }

.btn[data-loading='true'] { pointer-events: none; opacity: .72; }
.btn[data-loading='true'] .ph-arrow-right { display: none; }
.spinner { display: none; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid color-mix(in oklab, currentColor 30%, transparent);
  border-top-color: currentColor; animation: spin .7s linear infinite; }
.btn[data-loading='true'] .spinner { display: block; }

/* contact tiles */
.contact-tiles { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.contact-tiles a, .contact-tiles div {
  background: var(--bg-2);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  display: flex; gap: 1rem; align-items: flex-start;
  transition: background-color .25s var(--ease);
}
.contact-tiles a:hover { background: var(--bg-3); }
.contact-tiles i { font-size: 1.4rem; color: var(--accent-text); flex-shrink: 0; }
.contact-tiles .wa-mark { width: 1.4rem; height: 1.4rem; margin-top: .1rem; }
/* The email is one long token. Told it may break anywhere it wraps at 320
   instead of setting the width of everything around it. */
.contact-tiles strong { display: block; font-size: .95rem; overflow-wrap: anywhere; }
.contact-tiles a > span { min-width: 0; }
.contact-tiles span { display: block; font-size: .88rem; color: var(--fg-2); margin-top: .25rem; }

/* ==========================================================================
   Motion  (entry reveals; all gated on prefers-reduced-motion)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__group { animation: none; }
}

/* grain: fixed overlay only, never on a scrolling container */
.grain {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: .028;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ==========================================================================
   Feature split  (about / recipe lead)
   ========================================================================== */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.feature--reverse .feature__media { order: 2; }
.feature__media {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature--reverse .feature__media { order: 0; }
}

/* ==========================================================================
   Numbered rules
   ========================================================================== */
.rules { display: grid; gap: 0; border-top: 1px solid var(--line); }
.rules li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.2rem, 4vw, 3.5rem);
  padding: clamp(1.6rem, 3vw, 2.6rem) 0;
  border-bottom: 1px solid var(--line);
}
.rules .num { font-size: .76rem; color: var(--accent-text); letter-spacing: .12em; padding-top: .45rem; }
.rules p { color: var(--fg-2); margin-top: .7rem; max-width: 62ch; }
@media (max-width: 560px) {
  .rules li { grid-template-columns: 1fr; gap: .5rem; }
  .rules .num { padding-top: 0; }
}

/* ==========================================================================
   Accent panel
   ========================================================================== */
.panel {
  background: var(--accent-solid);
  color: var(--accent-ink);
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 4vw, 3.4rem);
}
.panel .h2 { max-width: 34rem; }

/* A button sitting on the accent panel borrows the panel's ink. Left to the
   page default it reaches for --fg and lands ink-on-orange, which is the pair
   the primary button just stopped being. */
.panel .btn {
  --_fg: var(--accent-ink);
  --_bd: color-mix(in srgb, var(--accent-ink) 42%, transparent);
}
.panel .btn:hover {
  --_bg: color-mix(in srgb, var(--accent-ink) 15%, transparent);
  --_bd: var(--accent-ink);
}
.panel__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid color-mix(in srgb, var(--accent-ink) 24%, transparent);
}
.panel__grid b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem; letter-spacing: -.02em;
}
.panel__grid span {
  display: block; margin-top: .5rem;
  font-size: .92rem; line-height: 1.5;
  color: color-mix(in srgb, var(--accent-ink) 82%, var(--accent-solid));
}
@media (max-width: 760px) { .panel__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Numbered steps  (contact aside)
   ========================================================================== */
.steps { counter-reset: s; display: grid; gap: .9rem; margin-top: 1.2rem; }
.steps li {
  counter-increment: s;
  display: grid; grid-template-columns: auto 1fr; gap: .85rem;
  font-size: .93rem; color: var(--fg-2);
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--accent-text); padding-top: .28rem;
}

/* ---------- misc ---------- */
.footer__place {
  color: var(--fg-2); font-size: .93rem;
  display: flex; gap: .5rem; align-items: center;
}
.two-col--wide-aside { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
@media (max-width: 900px) { .two-col--wide-aside { grid-template-columns: minmax(0, 1fr); } }

.recipe__body .recipe__meta { margin-top: .8rem; }
.prose .recipe__meta { margin-top: 1rem; }
.prose > p > strong { color: var(--fg); font-weight: 600; }


/* ==========================================================================
   Figures band
   ========================================================================== */
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.figures li {
  padding: clamp(1.8rem, 3.5vw, 3.2rem) clamp(1rem, 2vw, 2rem) clamp(1.8rem, 3.5vw, 3.2rem) 0;
  border-left: 1px solid var(--line);
}
.figures li:first-child { border-left: 0; }
.figures li + li { padding-left: clamp(1rem, 2vw, 2rem); }
.figures b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5.6rem);
  font-weight: 800; font-stretch: 88%;
  line-height: .88; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.figures b span { color: var(--accent-text); }
.figures p {
  margin-top: .9rem;
  font-size: .92rem; color: var(--fg-2);
  max-width: 24ch;
}
@media (max-width: 860px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .figures li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .figures { grid-template-columns: 1fr; }
  .figures li { border-left: 0; padding-left: 0; }
  .figures li + li { border-top: 1px solid var(--line); padding-left: 0; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.3rem, 2.4vw, 1.9rem) 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, .95rem + .7vw, 1.5rem);
  font-weight: 700; letter-spacing: -.022em; line-height: 1.25;
  transition: color .25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
.faq summary i {
  font-size: 1.15rem; color: var(--fg-3);
  transition: transform .35s var(--ease), color .25s var(--ease);
}
.faq details[open] summary i { transform: rotate(135deg); color: var(--accent-text); }
.faq__body {
  padding-bottom: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--fg-2);
  max-width: 68ch;
}
.faq__body p + p { margin-top: .9rem; }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .faq__body { animation: faq-in .45s var(--ease); }
  @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
}

/* ==========================================================================
   Product drawer
   ========================================================================== */
.drawer { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.drawer[data-open='true'] { visibility: visible; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(6, 5, 4, .62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.drawer[data-open='true'] .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; right: 0; top: 0;
  height: 100%; width: min(520px, 100%);
  background: var(--bg-2);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .55s var(--ease);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.drawer[data-open='true'] .drawer__panel { transform: none; }
.drawer__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  background: color-mix(in srgb, var(--bg-3) 80%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.drawer__media {
  aspect-ratio: 4 / 3;
  background: var(--studio);
  flex-shrink: 0;
}
.drawer__media img { width: 100%; height: 100%; object-fit: contain; padding: clamp(1.6rem, 4vw, 2.8rem); }
.drawer__media--cover img { object-fit: cover; padding: 0; }
.drawer__body { padding: clamp(1.5rem, 3vw, 2.4rem); }
.drawer__body h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin-top: .6rem; }
.drawer__body > p { color: var(--fg-2); margin-top: 1rem; }
.drawer__meta { margin-top: 1.8rem; border-top: 1px solid var(--line); }
.drawer__meta div {
  display: grid; grid-template-columns: 8rem 1fr; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.drawer__meta dt {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
  padding-top: .2rem;
}
.drawer__meta dd { margin: 0; color: var(--fg-2); }
.drawer__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
/* The tile is one big link, stretched from the heading, so the quick look
   button can sit over it without a button nested inside an anchor. */
.item { position: relative; }
.item__link::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
}
.item__link:focus-visible { outline: none; }
.item__link:focus-visible::after {
  outline: 2px solid var(--accent-text);
  outline-offset: -3px;
  border-radius: var(--r-lg);
}
.item__more {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .9rem;
  font-size: .78rem; font-weight: 600; color: var(--accent-text);
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.item:hover .item__more, .item:focus-within .item__more { opacity: 1; transform: none; }
@media (hover: none) {
  .item__more { opacity: 1; transform: none; }
}

.item__quick {
  position: absolute; z-index: 4; right: .85rem; top: .85rem;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .8rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg-3) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  font-size: .74rem; font-weight: 600; color: var(--fg-2);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              color .2s var(--ease), border-color .2s var(--ease);
}
.item__quick:hover { color: var(--fg); border-color: var(--fg-3); }
.item:hover .item__quick, .item:focus-within .item__quick,
.item__quick:focus-visible { opacity: 1; transform: none; }
@media (hover: none) {
  .item__quick { opacity: 1; transform: none; }
  .item__quick span { display: none; }
  .item__quick { padding: .5rem; }
}

.item__tag--soft {
  color: var(--fg-3);
  margin-left: .6rem;
}

/* ==========================================================================
   Topper  -  the page opener used by papad, quality, process, collections
   ========================================================================== */
.topper {
  position: relative;
  padding-block: clamp(5rem, 4rem + 9vw, 10rem) clamp(3rem, 2rem + 5vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.topper__media { position: absolute; inset: 0; z-index: -2; }
.topper__media img { width: 100%; height: 100%; object-fit: cover; }
.topper::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* The copy sits left, so the scrim has to be genuinely opaque there and can
     fall away on the right where the photograph should still read. */
  background:
    linear-gradient(100deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 95%, transparent) 44%,
                    color-mix(in srgb, var(--bg) 62%, transparent) 72%, transparent 100%),
    linear-gradient(0deg, var(--bg) 2%, transparent 42%);
}
.topper__inner { position: relative; max-width: 56rem; }
.topper .display { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.2rem); }
.topper .lead { margin-top: 1.4rem; max-width: 54ch; }
.topper__meta {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  margin-top: 2rem;
}
.topper__meta li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-3) 88%, transparent);
  font-size: .82rem; color: var(--fg-2);
}
.topper__meta i { color: var(--accent-text); font-size: 1rem; }
.topper .crumb { margin-bottom: 1.6rem; }

/* ==========================================================================
   Catalogue bar  -  filters and search on one line
   ========================================================================== */
.catalog-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem;
  padding-bottom: clamp(2rem, 3vw, 3rem);
}
.catalog-bar .filters { padding-bottom: 0; }

.search {
  position: relative;
  display: flex; align-items: center;
  min-width: min(280px, 100%);
  padding: .1rem .8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg-2);
  transition: border-color .2s var(--ease);
}
.search:focus-within { border-color: var(--fg-3); }
.search > i { color: var(--fg-3); font-size: 1.05rem; flex-shrink: 0; }
.search input {
  flex: 1; min-width: 0;
  padding: .6rem .6rem;
  background: none; border: 0; outline: none;
  font-size: .9rem;
}
.search input::-webkit-search-cancel-button { display: none; }
.search__clear {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: var(--r-pill);
  color: var(--fg-3); font-size: .85rem;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.search__clear:hover { color: var(--fg); background: var(--bg-3); }
/* display:grid above beats the user agent [hidden] rule, so say it again. */
.search__clear[hidden] { display: none; }

/* ==========================================================================
   Product page
   ========================================================================== */
.pdp { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(2rem, 1rem + 4vw, 4rem); }
.pdp .crumb { margin-bottom: clamp(1.6rem, 3vw, 2.6rem); flex-wrap: wrap; }
.pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.pdp__media { position: sticky; top: 96px; display: grid; gap: .8rem; }
.pdp__shot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--studio);
  overflow: hidden;
}
.pdp__shot img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: clamp(1.6rem, 4vw, 3.2rem);
  transition: opacity .3s var(--ease);
}
.pdp__shot--cover img, .pdp__shot.is-cover img { object-fit: cover; padding: 0; }
.pdp__zoom {
  position: absolute; right: .9rem; bottom: .9rem; z-index: 2;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid rgba(20,18,15,.16);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #14120F; font-size: 1.05rem;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.pdp__zoom:hover { transform: scale(1.06); background: #fff; }

.pdp__thumbs { display: flex; gap: .6rem; }
.pdp__thumb {
  width: 82px; height: 68px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--studio);
  overflow: hidden;
  padding: 0;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb:hover { transform: translateY(-2px); }
.pdp__thumb.is-active { border-color: var(--accent); }

.pdp__tags { display: flex; align-items: center; }
.pdp__tags .item__tag { margin-bottom: 0; }
.pdp__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem);
  line-height: 1.02; letter-spacing: -.035em; font-weight: 800; font-stretch: 92%;
  margin-top: 1rem;
}
.pdp__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  color: var(--accent-text);
  letter-spacing: -.02em;
  margin-top: .8rem;
}
.pdp__copy .lead { margin-top: 1.2rem; max-width: 52ch; }

.pdp__spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
  border-top: 1px solid var(--line);
}
.pdp__spec div {
  padding: .85rem .2rem;
  border-bottom: 1px solid var(--line);
}
.pdp__spec div:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 1rem; }
.pdp__spec div:nth-child(even) { padding-left: 1rem; }
.pdp__spec dt {
  font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
}
.pdp__spec dd { margin: .35rem 0 0; font-size: .95rem; font-weight: 500; }

.pdp__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.pdp__note {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: 1.6rem;
  padding: .9rem 1.1rem;
  border-radius: var(--r);
  background: var(--accent-wash);
  font-size: .85rem; color: var(--fg-2); line-height: 1.5;
}
.pdp__note i { color: var(--accent-text); font-size: 1.05rem; margin-top: .1rem; flex-shrink: 0; }

.pdp__packing { display: grid; gap: 0; margin: 1.2rem 0 0; border-top: 1px solid var(--line); }
.pdp__packing div { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.pdp__packing dt {
  font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
}
.pdp__packing dd { margin: .35rem 0 0; font-size: .9rem; color: var(--fg-2); line-height: 1.5; }
.pdp__aside-note { margin-top: 1rem; font-size: .84rem; color: var(--fg-3); }
.pdp__aside-note a { color: var(--accent-text); }

.pdp__collections {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: 2.4rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  color: var(--fg-3); font-size: .88rem;
}
.pdp__siblings {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  font-size: .88rem;
}
.pdp__siblings > span { color: var(--fg-3); }
.pdp__siblings a { color: var(--fg-2); border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: color .2s var(--ease), border-color .2s var(--ease); }
.pdp__siblings a:hover { color: var(--accent-text); border-color: var(--accent-text); }

@media (max-width: 900px) {
  .pdp__grid { grid-template-columns: 1fr; }
  .pdp__media { position: static; }
}

/* ==========================================================================
   Reviews  -  an honest empty state, not invented testimonials
   ========================================================================== */
.reviews {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  border-radius: var(--r-lg);
  border: 1px dashed var(--line);
  background: var(--bg-2);
}
.reviews .h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); }
.reviews p { margin-top: 1rem; }
.reviews__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.reviews__on { display: grid; gap: .8rem; }
.reviews__on li {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem;
  border-radius: var(--r);
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  font-size: .88rem; color: var(--fg-2);
}
.reviews__on i { color: var(--accent-text); font-size: 1.1rem; }
@media (max-width: 820px) { .reviews { grid-template-columns: 1fr; } }

/* ==========================================================================
   Collections
   ========================================================================== */
.coll__head {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.coll__media {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.coll__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.coll__head:hover .coll__media img { transform: scale(1.04); }
.coll__head .lead { margin-top: 1rem; }
.coll__head .body-muted { margin-top: 1rem; }
.coll__head .btn { margin-top: 1.8rem; }
@media (max-width: 820px) { .coll__head { grid-template-columns: 1fr; } }

.collstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 1.4vw, 1.3rem);
}
.collstrip__card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 3 / 4;
  display: flex; align-items: flex-end;
  padding: clamp(1rem, 2vw, 1.5rem);
  isolation: isolate;
  transition: border-color .3s var(--ease);
}
.collstrip__card:hover { border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); }
.collstrip__card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.collstrip__card:hover img { transform: scale(1.06); }
.collstrip__card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,7,6,.15) 0%, rgba(8,7,6,.55) 48%, rgba(8,7,6,.95) 100%);
}
.collstrip__card strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
  letter-spacing: -.02em; color: #F7F4EF;
}
.collstrip__card span span { display: block; font-size: .8rem; color: rgba(247,244,239,.7); margin-top: .3rem; }
@media (max-width: 900px) { .collstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.jump { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip--link { display: inline-flex; align-items: center; }

/* ==========================================================================
   Quality
   ========================================================================== */
.qgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(1rem, 1.6vw, 1.6rem);
}
.qgrid__card {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-2);
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease), transform .35s var(--ease);
}
.qgrid__card:hover { border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); transform: translateY(-3px); }
.qgrid__card > img { width: 44px; height: 44px; object-fit: contain; }
.qgrid__card > i { font-size: 2rem; color: var(--accent-text); height: 44px; display: grid; align-items: center; }
.qgrid__card h3 { margin-top: 1.2rem; }
.qgrid__card p { margin-top: .8rem; font-size: .92rem; color: var(--fg-2); line-height: 1.55; }
.qgrid__foot {
  margin-top: auto; padding-top: 1.2rem;
  font-size: .8rem !important; color: var(--fg-3) !important;
}

.honest {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(1.8rem, 4vw, 3.4rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.honest .body-muted { margin-top: 1.2rem; }
.honest__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.honest__list li { padding-top: 1.2rem; border-top: 1px solid var(--line); }
.honest__list p { margin-top: .6rem; font-size: .9rem; color: var(--fg-2); line-height: 1.55; }
@media (max-width: 900px) {
  .honest { grid-template-columns: 1fr; }
  .honest__list { grid-template-columns: 1fr; }
}

.ticks { display: grid; gap: .7rem; }
.ticks li { display: flex; gap: .7rem; color: var(--fg-2); font-size: .93rem; }
.ticks li i { color: var(--accent-text); margin-top: .2rem; flex-shrink: 0; }

/* ==========================================================================
   Process
   ========================================================================== */
.flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .5rem;
  counter-reset: none;
}
.flow li {
  position: relative;
  padding: 1.1rem 1rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.flow li + li::before {
  content: ''; position: absolute; left: -.5rem; top: 50%;
  width: .5rem; height: 1px; background: var(--line);
}
.flow .num { font-size: .66rem; color: var(--accent-text); letter-spacing: .14em; }
.flow b { display: block; margin-top: .5rem; font-family: var(--font-display); font-size: .96rem; letter-spacing: -.02em; }
.flow b + span { display: block; margin-top: .25rem; font-size: .78rem; color: var(--fg-3); line-height: 1.4; }
@media (max-width: 1000px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flow li + li::before { display: none; } }
@media (max-width: 560px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.journey { padding-block: clamp(2rem, 3vw, 4rem); }
.jstep {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 6rem);
  border-top: 1px solid var(--line-soft);
}
.jstep:first-child { border-top: 0; }
.jstep--reverse .jstep__media { order: -1; }
.jstep__no {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 1.1rem;
}
.jstep__no .num {
  font-size: 1.5rem; letter-spacing: -.02em;
  color: var(--accent-text);
}
.jstep__copy .h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 3rem); }
.jstep__copy .body-muted { margin-top: 1.1rem; }
.jstep__copy .ticks { margin-top: 1.6rem; }
.jstep__media {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.jstep__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .jstep { grid-template-columns: 1fr; gap: 1.8rem; }
  .jstep--reverse .jstep__media { order: 0; }
}

/* ==========================================================================
   Comparison table
   ========================================================================== */
.cmp {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.cmp__table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: .92rem; }
.cmp__table th, .cmp__table td { padding: .95rem 1.2rem; text-align: left; }
.cmp__table thead th {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.cmp__table tbody tr { border-bottom: 1px solid var(--line-soft); transition: background-color .2s var(--ease); }
.cmp__table tbody tr:last-child { border-bottom: 0; }
.cmp__table tbody tr:hover { background: var(--bg-3); }
.cmp__table tbody th {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -.02em; white-space: nowrap;
}
.cmp__table tbody th a { border-bottom: 1px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
.cmp__table tbody th a:hover { color: var(--accent-text); border-bottom-color: var(--accent-text); }
.cmp__table td { color: var(--fg-2); }
.cmp__from { color: var(--fg-3) !important; }

/* ==========================================================================
   Split cards and dual cards
   ========================================================================== */
.split-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.split-cards__card {
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.split-cards__card i { font-size: 1.5rem; color: var(--accent-text); }
.split-cards__card h3 { margin-top: .8rem; }
.split-cards__card p { margin-top: .6rem; font-size: .88rem; color: var(--fg-2); line-height: 1.55; }
@media (max-width: 620px) { .split-cards { grid-template-columns: 1fr; } }

.dual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.6rem); }
.dual__card {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: clamp(320px, 38vw, 460px);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .3s var(--ease);
}
.dual__card:hover { border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); }
.dual__card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease);
}
.dual__card:hover img { transform: scale(1.05); }
.dual__card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,7,6,.18) 0%, rgba(8,7,6,.52) 42%, rgba(8,7,6,.94) 100%);
}
.dual__body { display: block; max-width: 42ch; }
.dual__body .eyebrow { color: rgba(247,244,239,.6); margin-bottom: .7rem; }
.dual__body .h3 { display: block; color: #F7F4EF; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem); }
.dual__body > span:not(.eyebrow):not(.h3):not(.link-arrow) {
  display: block; margin-top: .7rem;
  font-size: .9rem; color: rgba(247,244,239,.74); line-height: 1.55;
}
.dual__body .link-arrow { display: inline-flex; margin-top: 1.2rem; color: #FFAF97; border-color: rgba(255,175,151,.4); }
.dual__card:hover .link-arrow { gap: .8rem; border-color: #FFAF97; }
@media (max-width: 820px) { .dual { grid-template-columns: 1fr; } }

.sec-head__links { display: flex; flex-wrap: wrap; gap: 1.4rem; }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background-color: rgba(6,5,5,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox[data-open='true'] { opacity: 1; visibility: visible; }
.lightbox__figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; }
.lightbox__figure img {
  max-width: 100%; max-height: 78vh;
  width: auto; height: auto;
  margin-inline: auto;
  border-radius: var(--r);
  background: var(--studio);
  transform: scale(.97);
  transition: transform .35s var(--ease);
}
.lightbox[data-open='true'] .lightbox__figure img { transform: none; }
.lightbox__figure figcaption {
  margin-top: 1rem; text-align: center;
  font-size: .86rem; color: rgba(247,244,239,.7);
}
.lightbox__close {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  color: #F7F4EF; border-color: rgba(247,244,239,.3);
}
.lightbox__close:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.1); }

/* ==========================================================================
   Footer additions
   ========================================================================== */
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer__legal a { color: var(--fg-3); transition: color .2s var(--ease); }
.footer__legal a:hover { color: var(--fg); }

.footer__credit {
  order: 3; width: 100%;
  padding-top: 1.1rem; margin-top: .3rem;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-3);
}
.footer__credit a {
  color: var(--fg); font-weight: 600; letter-spacing: .04em;
  text-decoration: none; border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer__credit a:hover { color: var(--accent); border-bottom-color: currentColor; }

/* ==========================================================================
   Cross document page transitions
   ========================================================================== */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in .38s var(--ease) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
}