/* ============================================================
   CHORSA MORSA - Design system
   Palette (locked, sampled from chorsamorsa.png)
     maroon  #600C0C  the wordmark ink        -> headings, deep surfaces
     brick   #C11410  the turban red          -> secondary accent
     flame   #E86F12  the flourish orange     -> primary accent
     saffron #F2A93B  the turban highlight    -> tints, rules
     cream   #FDF6EA  the faces / paper       -> page ground
   Radius system    : pill = interactive, 24px = panels, 14px = inputs
   Theme            : single light theme. No toggle, no dark tokens.
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:'Clash';src:url('../fonts/clash-display-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Clash';src:url('../fonts/clash-display-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Clash';src:url('../fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Clash';src:url('../fonts/clash-display-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-display:swap}
/* Home hero only: a brush script, latin subset. */
@font-face{font-family:'Mr Dafoe';src:url('../fonts/mr-dafoe-400.woff2') format('woff2');font-weight:400;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Brand, straight off the logo */
  --maroon:#600C0C;
  --maroon-2:#7E1512;
  --brick:#C11410;
  --flame:#E86F12;
  --flame-2:#F58A22;
  --saffron:#F2A93B;
  --cream:#FDF6EA;

  /* WhatsApp's own brand green. Orange stays the site's accent for the site's
     own actions; green marks every point where the order leaves for WhatsApp. */
  --wa:#25D366;
  --wa-2:#1FB855;
  --wa-glow:rgba(37,211,102,.3);

  --r-pill:999px;
  --r-lg:24px;
  --r-md:14px;

  --nav-h:72px;
  --shell:1320px;
  --gut:clamp(20px,5vw,64px);
  --sec:clamp(74px,8.4vw,124px);

  --ease:cubic-bezier(.16,1,.3,1);

  /* The carousel's sparkle, reused as a mask for eyebrows and rules. */
  --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0C21.6 11.2 28.8 18.4 40 20C28.8 21.6 21.6 28.8 20 40C18.4 28.8 11.2 21.6 0 20C11.2 18.4 18.4 11.2 20 0Z' fill='%23000'/%3E%3C/svg%3E");

  /* The carousel's rosette and scalloped tag, as masks, so any section can
     carry the same stickers without repeating the inline SVG. */
  --rosette:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(0.0 100 100)'/%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(22.5 100 100)'/%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(45.0 100 100)'/%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(67.5 100 100)'/%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(90.0 100 100)'/%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(112.5 100 100)'/%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(135.0 100 100)'/%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(157.5 100 100)'/%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(180.0 100 100)'/%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(202.5 100 100)'/%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(225.0 100 100)'/%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(247.5 100 100)'/%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(270.0 100 100)'/%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(292.5 100 100)'/%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(315.0 100 100)'/%3E%3Cpath d='M100 100C91 74 93 34 100 3C107 34 109 74 100 100Z' transform='rotate(337.5 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(11.25 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(33.75 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(56.25 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(78.75 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(101.25 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(123.75 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(146.25 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(168.75 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(191.25 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(213.75 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(236.25 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(258.75 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(281.25 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(303.75 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(326.25 100 100)'/%3E%3Cpath d='M100 100C85 88 86 54 100 44C114 54 115 88 100 100Z' transform='rotate(348.75 100 100)'/%3E%3Ccircle cx='100' cy='100' r='26'/%3E%3C/svg%3E");
  --scallop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 14 172 172'%3E%3Cpath d='M100 14A18.1 18.1 0 0 1 132.9 20.5A18.1 18.1 0 0 1 160.8 39.2A18.1 18.1 0 0 1 179.5 67.1A18.1 18.1 0 0 1 186 100A18.1 18.1 0 0 1 179.5 132.9A18.1 18.1 0 0 1 160.8 160.8A18.1 18.1 0 0 1 132.9 179.5A18.1 18.1 0 0 1 100 186A18.1 18.1 0 0 1 67.1 179.5A18.1 18.1 0 0 1 39.2 160.8A18.1 18.1 0 0 1 20.5 132.9A18.1 18.1 0 0 1 14 100A18.1 18.1 0 0 1 20.5 67.1A18.1 18.1 0 0 1 39.2 39.2A18.1 18.1 0 0 1 67.1 20.5A18.1 18.1 0 0 1 100 14Z'/%3E%3C/svg%3E");

  --display:'Clash',ui-sans-serif,system-ui,sans-serif;
  --body:'Satoshi',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --script:'Mr Dafoe','Brush Script MT',cursive;

  --strip-h:36px;
}

:root{
  --bg:#FDF8F0;
  --bg-2:#FFFFFF;
  --bg-3:#F7EDDD;
  --panel:rgba(96,12,12,.035);
  --panel-2:rgba(96,12,12,.062);
  --line:rgba(96,12,12,.13);
  --line-2:rgba(96,12,12,.26);
  --hd:#600C0C;
  --tx:#2B0E0A;
  --tx-2:rgba(43,14,10,.70);
  --tx-3:rgba(43,14,10,.50);
  --glow:rgba(232,111,18,.20);
  --img-shadow:drop-shadow(0 28px 34px rgba(96,12,12,.20));
  --scrim:linear-gradient(to top,rgba(26,8,6,.92) 0%,rgba(26,8,6,.8) 34%,rgba(26,8,6,.46) 66%,rgba(26,8,6,.24) 100%);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html.no-smooth{scroll-behavior:auto !important}
body{
  background:var(--bg);color:var(--tx);
  font-family:var(--body);font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.6;-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,input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--flame);color:#fff}
:focus-visible{outline:2px solid var(--flame);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Type scale ----------
   Clash Display carries a narrow word space; the tight tracking below closes it
   further and words start running together. word-spacing gives the gap back. */
h1,h2,h3,h4,.brand-txt,.price,.stat .n,.dl,.marquee-set span,.founders dd{word-spacing:.16em}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.025em;color:var(--hd)}
/* Blocks that invert (flame tile, maroon footer) take the parent's colour back. */
.bx-flame h1,.bx-flame h2,.bx-flame h3,.bx-photo h3,.foot h3{color:inherit}
/* The carousel headline sets the display voice for the whole site:
   heavy, uppercase, tightly tracked, on a short line. */
.d1,.d2,.d3{font-weight:700;text-transform:uppercase}
.d1{font-size:clamp(2.3rem,5vw,4.1rem);line-height:.9;letter-spacing:-.035em}
.d2{font-size:clamp(2.2rem,5vw,4.4rem);line-height:.88;letter-spacing:-.035em}
/* Headlines without a hand-set break wrap into even lines, not a stray last word. */
.d1,.d2,.d3{text-wrap:balance}
.d3{font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:.98;letter-spacing:-.03em}
.lead{font-size:clamp(1.02rem,.6vw + .9rem,1.2rem);color:var(--tx-2);max-width:52ch;line-height:1.62}
.body-2{color:var(--tx-2);max-width:62ch}
.flame{color:var(--flame)}

/* Eyebrow: rationed, max 3 per page */
.eyebrow{
  font-family:var(--body);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;color:var(--accent,var(--flame));
  display:flex;align-items:center;gap:.5rem;margin-bottom:1.1rem;
}
.eyebrow::before{
  content:"";width:.9em;height:.9em;flex:none;background:currentColor;
  -webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat;
}

/* ---------- Grounds ----------
   The hero carousel sets the tone for the rest of the site: full-bleed blocks
   of colour rather than one long cream page. A ground paints itself and flips
   the surface tokens, so the shared pieces - cards, rules, prices, buttons,
   eyebrows - follow it without per-element overrides. This is how .combos and
   .foot already worked; these classes make it the general case.
   --hd is heading ink, --accent the eyebrow and icon colour. */
.g-cream{
  background:#FBF0DD;color:#2B0E0A;
  --bg-2:#FFFAF0;--bg-3:#F6E7CE;
  --panel:rgba(96,12,12,.045);--panel-2:rgba(96,12,12,.075);
  --line:rgba(96,12,12,.16);--line-2:rgba(96,12,12,.3);
  --tx:#2B0E0A;--tx-2:rgba(43,14,10,.72);--tx-3:rgba(43,14,10,.52);
  --hd:var(--maroon);--accent:var(--flame);
  --paper:#FFFFFF;--sheen:rgba(255,255,255,.7);
}
.g-saffron{
  background:#F6B634;color:#5E0A07;
  --bg-2:#FFF4DC;--bg-3:#F9C95E;
  --panel:rgba(255,255,255,.32);--panel-2:rgba(255,255,255,.5);
  --line:rgba(94,10,7,.24);--line-2:rgba(94,10,7,.44);
  --tx:#5E0A07;--tx-2:rgba(94,10,7,.78);--tx-3:rgba(94,10,7,.58);
  --hd:#9E120E;--accent:#9E120E;
  --glow:rgba(158,18,14,.16);
  --img-shadow:drop-shadow(0 26px 30px rgba(94,10,7,.28));
  --paper:#FFF4DC;--sheen:rgba(255,236,190,.75);
}
.g-green{
  background:#2E6B3B;color:var(--cream);
  --bg-2:rgba(253,246,234,.1);--bg-3:#286034;
  --panel:rgba(253,246,234,.07);--panel-2:rgba(253,246,234,.12);
  --line:rgba(253,246,234,.18);--line-2:rgba(253,246,234,.34);
  --tx:var(--cream);--tx-2:rgba(253,246,234,.78);--tx-3:rgba(253,246,234,.56);
  --hd:#F7EBC9;--accent:var(--saffron);
  --glow:rgba(242,169,59,.2);
  --img-shadow:drop-shadow(0 26px 30px rgba(6,20,10,.45));
  --paper:rgba(253,246,234,.09);--sheen:rgba(203,234,106,.16);
}
.g-maroon{
  background:var(--maroon);color:var(--cream);
  --bg-2:rgba(253,246,234,.1);--bg-3:#57110F;
  --panel:rgba(253,246,234,.06);--panel-2:rgba(253,246,234,.1);
  --line:rgba(253,246,234,.16);--line-2:rgba(253,246,234,.32);
  --tx:var(--cream);--tx-2:rgba(253,246,234,.76);--tx-3:rgba(253,246,234,.52);
  --hd:var(--saffron);--accent:var(--saffron);
  --glow:rgba(242,169,59,.2);
  --img-shadow:drop-shadow(0 26px 30px rgba(20,4,3,.5));
  --paper:rgba(253,246,234,.08);--sheen:rgba(242,169,59,.2);
}

/* Buttons take the ground's strongest ink, the way the carousel's do: flame
   would sink into saffron, and a ghost button needs the local ink. */
.g-saffron .btn-primary{background:#9E120E;color:#FFF3D6;box-shadow:0 12px 30px rgba(94,10,7,.2)}
.g-saffron .btn-primary:hover{background:#7E0D0A;box-shadow:0 18px 38px rgba(94,10,7,.28)}
.g-green .btn-primary,.g-maroon .btn-primary{background:var(--saffron);color:#3A1406;box-shadow:0 12px 30px rgba(0,0,0,.24)}
.g-green .btn-primary:hover,.g-maroon .btn-primary:hover{background:#F7C356;box-shadow:0 18px 38px rgba(0,0,0,.3)}
.g-green .btn-ghost,.g-maroon .btn-ghost,.g-green .btn-solid,.g-maroon .btn-solid{color:var(--cream)}
.g-green .btn-solid,.g-maroon .btn-solid{background:var(--cream);color:var(--maroon)}
.g-saffron .chip[aria-pressed="true"]{background:#9E120E;border-color:#9E120E;color:#FFF3D6}

/* A band keeps its own type colour where a photograph or a gradient already
   owns the tile. */
.g-green .bx-photo h3,.g-maroon .bx-photo h3,.g-saffron .bx-photo h3{color:var(--cream)}

/* Grounds meet edge to edge, so a section that used to sit tight against the
   one above it gets its own air back. */
.g-cream + .g-cream{padding-top:0}

/* ---------- Poster pieces ----------
   The two carousels at the top of the home page speak in a few recurring
   pieces: a numbered kicker, a headline set huge, a faded word running the
   width of the screen, white sparkles and a slowly turning rosette, all on a
   ground lit from the middle. These are those pieces, ground-aware, so every
   section below the carousels talks the same way. */
.g-cream{--spk:var(--flame)}
.g-saffron{--spk:#fff}
.g-green,.g-maroon{--spk:var(--saffron)}

/* Every ground is lit from the middle, like the plate's glow. overflow-x:clip
   keeps the ghost word and rosettes in, without breaking position:sticky the
   way overflow:hidden would. */
.section{isolation:isolate;overflow-x:clip}
.section::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 42%,var(--sheen,transparent),transparent 74%);
}

/* The carousel's kicker: a pill number, then the label. */
.kick{
  display:flex;align-items:center;gap:.65rem;margin-bottom:clamp(1rem,1.8vw,1.4rem);
  font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--hd);
}
.kick b{
  font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:.02em;line-height:1;
  padding:.32rem .6rem;border:1.5px solid currentColor;border-radius:var(--r-pill);
}

/* The plate section's giant name, reused: one word per section, faded
   through the ground's ink and sized off its own letter count. */
.ghost{
  position:absolute;z-index:-1;left:0;right:0;pointer-events:none;
  text-align:center;white-space:nowrap;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:min(12rem,calc(150vw / var(--len,10)));line-height:.8;letter-spacing:-.035em;word-spacing:.08em;
  color:color-mix(in srgb,var(--hd) 8%,transparent);
}
.ghost-top{top:clamp(1rem,3vw,2.4rem)}
.ghost-bot{bottom:-.1em}

.spk{
  position:absolute;z-index:0;left:var(--x);top:var(--y);width:var(--s,26px);aspect-ratio:1;
  translate:-50% -50%;pointer-events:none;background:var(--spk,#fff);
  -webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat;
  animation:pc-twinkle 3.4s ease-in-out infinite;animation-delay:var(--dl,0s);
}
.rosette{
  position:absolute;z-index:-1;left:var(--x,50%);top:var(--y,50%);width:var(--rs,clamp(420px,52vw,820px));aspect-ratio:1;
  translate:-50% -50%;pointer-events:none;background:var(--ros,var(--hd));opacity:var(--ro,.07);
  -webkit-mask:var(--rosette) center/contain no-repeat;mask:var(--rosette) center/contain no-repeat;
  animation:pc-spin 140s linear infinite;
}
@media (max-width:760px){.spk{display:none}}

/* ---------- Layout ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec);position:relative}
.section-t{padding-top:var(--sec)}

/* ---------- Grain (fixed, pointer-events none) ---------- */
.grain{
  position:fixed;inset:-50%;z-index:90;pointer-events:none;
  opacity:.14;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ---------- Icons ---------- */
.ic{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.ic-lg{width:28px;height:28px;fill:currentColor;flex:none}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.86rem 1.5rem;border-radius:var(--r-pill);
  font-weight:700;font-size:.94rem;line-height:1;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
  transition:transform .35s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.btn .ic{width:1.2em;height:1.2em}
.btn-primary{background:var(--flame);color:#fff;box-shadow:0 10px 30px var(--glow)}
.btn-primary:hover{background:var(--flame-2);box-shadow:0 16px 40px var(--glow)}
.btn-ghost{border-color:var(--line-2);color:var(--tx);background:transparent}
.btn-ghost:hover{border-color:var(--tx);background:var(--panel-2)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 10px 30px var(--wa-glow)}
.btn-wa:hover{background:var(--wa-2);box-shadow:0 16px 40px var(--wa-glow)}
.btn-solid{background:var(--tx);color:var(--bg)}
.btn-solid:hover{opacity:.88}
.btn:active{transform:scale(.975)}
.btn-lg{padding:1.02rem 1.9rem;font-size:1rem}
.mag{display:inline-flex;will-change:transform}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
/* Every page gets the same frosted bar from the top, so the nav never goes
   see-through over a photo or a dark page head. */
.nav{
  background:color-mix(in srgb,var(--bg) 55%,transparent);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:rgba(96,12,12,.06);
}
@media (prefers-reduced-transparency:reduce){.nav{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}}

.nav-in{display:flex;align-items:center;gap:1.5rem;width:100%}
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
/* The mark sits in a 72px nav, so 48px fills it without crowding the edges.
   .foot-brand img comes later in this file and keeps its own height, so this
   only moves the compact mark in the nav. */
.brand img{height:48px;width:auto}
.brand-txt{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.02em;line-height:1}
.brand-txt small{display:block;font-family:var(--body);font-size:.55rem;font-weight:700;letter-spacing:.2em;color:var(--tx-3);text-transform:uppercase;margin-top:3px}
.nav-links{display:flex;align-items:center;gap:.2rem;margin-left:auto}
.nav-links a{
  padding:.5rem .78rem;border-radius:var(--r-pill);font-size:.9rem;font-weight:500;
  color:var(--tx-2);transition:color .25s var(--ease),background .25s var(--ease);
}
.nav-links a:hover{color:var(--tx);background:var(--panel-2)}
.nav-links a[aria-current="page"]{color:var(--tx);font-weight:700}
.nav-act{display:flex;align-items:center;gap:.5rem;flex:none;margin-left:auto}
.nav-links + .nav-act{margin-left:.5rem}
.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;flex:none;
  border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;
  color:var(--tx-2);cursor:pointer;transition:color .25s,border-color .25s,background .25s;
}
.icon-btn:hover{color:var(--tx);border-color:var(--line-2);background:var(--panel-2)}
.icon-btn .ic{width:19px;height:19px}
.nav-burger{display:none}

.drawer{
  position:fixed;inset:0;z-index:79;background:var(--bg);
  display:flex;flex-direction:column;padding:calc(var(--nav-h) + 24px) var(--gut) 40px;
  transform:translateY(-101%);transition:transform .55s var(--ease),visibility .55s;
  visibility:hidden;overflow-y:auto;
}
.drawer.open{transform:translateY(0);visibility:visible}
.drawer .dl{
  font-family:var(--display);font-size:clamp(1.6rem,7vw,2.1rem);font-weight:600;letter-spacing:-.02em;
  padding:.7rem 0;border-bottom:1px solid var(--line);color:var(--tx);
}
.drawer .btn{margin-top:2rem;align-self:flex-start}
/* Six links only just fit above the burger breakpoint, so they close up here. */
@media (max-width:1120px){
  .nav-links{gap:0}
  .nav-links a{padding:.5rem .55rem;font-size:.86rem}
  .nav-links + .nav-act{margin-left:.3rem}
}
@media (max-width:980px){
  .nav-links{display:none}
  .nav-burger{display:grid}
  .nav-act{margin-left:auto}
  .nav-cta{display:none}
}

/* ---------- Announcement strip ----------
   The strip scrolls away with the page; the nav sits under it until the first
   scroll, then docks to the top. */
.topbar{
  position:relative;height:var(--strip-h);
  background:linear-gradient(90deg,var(--maroon) 0%,var(--maroon-2) 50%,var(--maroon) 100%);
  color:var(--cream);font-size:.8rem;font-weight:500;line-height:1;
}
.topbar .shell{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.topbar ul{display:flex;align-items:center}
.topbar li{display:flex;align-items:center;gap:.45rem;padding-inline:1rem;border-left:1px solid rgba(253,246,234,.24)}
.topbar li:first-child{padding-left:0;border-left:0}
.topbar .ic{width:15px;height:15px;color:var(--saffron)}
.topbar a{display:inline-flex;align-items:center;gap:.45rem;transition:color .25s var(--ease)}
.topbar a:hover{color:#fff}
.topbar a .ic{color:var(--wa)}
@media (max-width:1079px){
  .topbar ul{display:none}
  .topbar .shell{justify-content:center}
}

/* Every page opens with the announcement strip. The nav starts below it,
   then docks to the top once the page scrolls. */
.nav{
  top:var(--strip-h);
  transition:top .45s var(--ease),background .4s var(--ease),border-color .4s var(--ease);
}
.nav.is-stuck{top:0}
.drawer{padding-top:calc(var(--nav-h) + var(--strip-h) + 24px)}

/* ---------- Marquee (exactly one per page) ---------- */
/* The ticker is a strip of tape under the hero: maroon ground, cream type,
   a sparkle between the names. */
.marquee{
  border-block:0;padding-block:1.05rem;overflow:hidden;
  background:var(--maroon);color:var(--cream);
}
.marquee-track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-set{display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem}
.marquee-set span{
  display:flex;align-items:center;gap:2.6rem;
  font-family:var(--display);font-size:clamp(1rem,1.5vw,1.35rem);font-weight:600;
  letter-spacing:.01em;text-transform:uppercase;color:var(--cream);white-space:nowrap;
}
.marquee-set span::after{
  content:"";width:.6em;height:.6em;flex:none;background:var(--saffron);
  -webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat;
}
.marquee-set .ic{width:11px;height:11px;color:var(--saffron)}
@keyframes slide{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- Stat band ----------
   A thin band, not a full section: it should read as a caption to the hero. */
.section-band{padding-block:clamp(52px,6.5vw,88px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem)}
.stat .n{font-family:var(--display);font-size:clamp(2.3rem,4.2vw,3.6rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.stat .k{margin-top:.6rem;font-size:.86rem;color:var(--tx-2);max-width:24ch}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem}}

/* ---------- Section head ---------- */
.sec-head{max-width:62ch;margin-bottom:clamp(2.4rem,5vw,4rem)}
.sec-head .lead{margin-top:1.1rem}

/* ---------- Product grid ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.4rem}
.chip{
  padding:.6rem 1.1rem;border-radius:var(--r-pill);border:1px solid var(--line);
  background:transparent;color:var(--tx-2);font-size:.88rem;font-weight:600;cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.chip:hover{border-color:var(--line-2);color:var(--tx)}
.chip[aria-pressed="true"]{background:var(--accent,var(--flame));border-color:var(--accent,var(--flame));color:#fff}

.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.4vw,1.35rem)}
@media (max-width:1080px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.pgrid{grid-template-columns:1fr}}

/* The card is a paper sticker; the packet stands on a stage painted in its
   own colour (--t-bg / --t-ink, set per product by main.js), with the
   carousel's rosette turning behind it. */
.pcard{
  position:relative;border-radius:clamp(24px,2.2vw,30px);
  background:var(--paper,#fff);padding:9px 9px 1.2rem;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  box-shadow:0 26px 50px -32px rgba(60,10,6,.5);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.pcard:hover{transform:translateY(-7px) rotate(-.7deg);box-shadow:0 36px 60px -30px rgba(60,10,6,.55)}
.pcard.is-out{display:none}
.pcard-img{
  aspect-ratio:1/1;display:grid;place-items:center;margin-bottom:1rem;
  border-radius:clamp(17px,1.6vw,22px);overflow:hidden;isolation:isolate;
  background:var(--t-bg,var(--saffron));
}
.pcard-img::before{
  content:"";position:absolute;z-index:-1;left:50%;top:50%;width:130%;aspect-ratio:1;translate:-50% -50%;
  background:var(--t-ink,var(--maroon));opacity:.1;
  -webkit-mask:var(--rosette) center/contain no-repeat;mask:var(--rosette) center/contain no-repeat;
  transition:rotate 1.2s var(--ease);
}
.pcard:hover .pcard-img::before{rotate:45deg}
.pcard-img img{width:88%;transition:transform .6s var(--ease);filter:drop-shadow(0 18px 20px rgba(40,8,4,.3))}
.pcard:hover .pcard-img img{transform:translateY(-7px) scale(1.045)}
/* The tag sits over the top of the packet, so it is a filled pill in the
   stage's ink rather than an outline: an outline vanishes into the pouch art. */
.pcard-tag{
  position:absolute;z-index:3;top:1.2rem;left:1.2rem;font-size:.6rem;font-weight:700;line-height:1;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--t-bg,#fff);background:var(--t-ink,var(--maroon));
  padding:.42rem .7rem;border-radius:var(--r-pill);
  box-shadow:0 6px 14px -6px rgba(20,6,2,.55);
}
.pcard h3,.pcard .desc,.pcard-foot{padding-inline:.65rem}
.pcard h3{font-size:1.2rem;font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:.95}
.pcard .desc{font-size:.85rem;color:var(--tx-2);margin-top:.45rem;line-height:1.5;flex:1}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-top:1.1rem}
.pcard .btn-primary{background:var(--t-ink,var(--maroon));color:var(--t-bg,#fff);box-shadow:0 10px 22px -10px rgba(40,8,4,.5)}
.pcard .btn-primary:hover{filter:brightness(1.15)}
.price{font-family:var(--display);font-size:1.12rem;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.price small{font-family:var(--body);font-size:.73rem;font-weight:500;color:var(--tx-3);margin-left:.3rem;letter-spacing:0}
.pcard .btn{padding:.58rem .95rem;font-size:.82rem}

.empty{
  display:none;padding:3.5rem 1.5rem;text-align:center;border:1px dashed var(--line-2);
  border-radius:var(--r-lg);color:var(--tx-2);
}
.empty.show{display:block}
.empty .ic-lg{color:var(--tx-3);margin:0 auto .9rem}

/* ---------- Combo tins ----------
   The gifting end of the range gets its own maroon ground rather than a third
   row of cards on the same cream. Inside the band the surface tokens flip, so
   the shared pieces (.price, chips, rules) come along without overrides. */
.combos{
  position:relative;isolation:isolate;
  background:var(--maroon);color:var(--cream);
  padding-block:clamp(3.4rem,7vw,6rem);
  --line:rgba(253,246,234,.15);
  --line-2:rgba(253,246,234,.3);
  --panel:rgba(253,246,234,.05);
  --panel-2:rgba(253,246,234,.09);
  --tx:var(--cream);
  --tx-2:rgba(253,246,234,.74);
  --tx-3:rgba(253,246,234,.5);
}
/* A warm spill from above, so the band is lit rather than flat. */
.combos::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(76% 58% at 50% -12%,rgba(242,169,59,.22),transparent 68%);
}
.combos h2,.combos h3{color:var(--cream)}

.combos-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  /* Tight when the two stack, generous when they sit side by side. */
  gap:clamp(.9rem,2vw,1.4rem) clamp(1.5rem,4vw,4rem);flex-wrap:wrap;
  margin-bottom:clamp(2.2rem,4.5vw,3.4rem);
}
.combos-head p{color:var(--tx-2);max-width:42ch;font-size:.97rem;line-height:1.62}

.tins{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.7vw,1.5rem)}
/* Each set is a cream sticker on the maroon, its stage painted in a colour of
   its own the way each carousel packet gets its own ground. The card flips
   the band's cream tokens back to ink. */
.tin{
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:clamp(26px,2.6vw,34px);background:var(--cream);color:#2B0E0A;
  --tx:#2B0E0A;--tx-2:rgba(43,14,10,.72);--tx-3:rgba(43,14,10,.52);
  --line:rgba(96,12,12,.14);--line-2:rgba(96,12,12,.3);
  box-shadow:0 40px 70px -36px rgba(0,0,0,.7);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.tin:hover{transform:translateY(-8px) rotate(-.8deg);box-shadow:0 50px 80px -36px rgba(0,0,0,.75)}
.tin:nth-child(even):hover{transform:translateY(-8px) rotate(.8deg)}
.tin{scroll-margin-top:calc(var(--nav-h,80px) + 1.5rem)}

.tin-stage{
  position:relative;isolation:isolate;aspect-ratio:4/3;display:grid;place-items:center;
  margin:10px 10px 1.1rem;border-radius:clamp(18px,2vw,24px);overflow:hidden;
  padding:clamp(.9rem,2vw,1.5rem);background:var(--t-bg,var(--saffron));
}
.tin-stage::before{
  content:"";position:absolute;z-index:-1;left:50%;top:55%;width:120%;aspect-ratio:1;translate:-50% -50%;
  background:var(--t-ink,var(--maroon));opacity:.1;
  -webkit-mask:var(--rosette) center/contain no-repeat;mask:var(--rosette) center/contain no-repeat;
  animation:pc-spin 140s linear infinite;
}
.tin-stage img{
  position:relative;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 20px 22px rgba(40,8,4,.35));
  transition:transform .7s var(--ease);
}
.tin:hover .tin-stage img{transform:scale(1.06) rotate(-2deg)}

/* The saving is a scalloped tag, the carousel's "60% peanut" sticker. */
.tin-save{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  width:clamp(72px,6.4vw,88px);aspect-ratio:1;display:grid;place-content:center;text-align:center;
  background:var(--maroon);color:var(--saffron);rotate:10deg;
  -webkit-mask:var(--scallop) center/contain no-repeat;mask:var(--scallop) center/contain no-repeat;
  font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.3vw,1.2rem);line-height:.95;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.tin-save small{display:block;font-size:.62em;letter-spacing:.06em;text-transform:uppercase}

.tin-body{
  display:flex;flex-direction:column;flex:1;gap:.6rem;
  padding:0 clamp(1.1rem,2vw,1.6rem) clamp(1.2rem,2vw,1.6rem);
}
.tin-count{
  font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx-3);
}
.combos .tin h3{font-size:clamp(1.4rem,2vw,1.8rem);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;color:var(--maroon)}
.tin-desc{font-size:.88rem;color:var(--tx-2);line-height:1.55}
.tin-in{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.7rem}
.tin-in li{
  font-size:.72rem;font-weight:600;padding:.3rem .6rem;
  border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--tx-2);
}
.tin-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:.8rem;flex-wrap:wrap;margin-top:.3rem;padding-top:.95rem;
  border-top:1px dashed var(--line-2);
}
.tin-price{display:flex;align-items:baseline;gap:.45rem}
.tin-price .price{font-size:1.5rem;font-weight:700;color:var(--maroon)}
.tin-price .was{font-size:.85rem;color:var(--tx-3);text-decoration:line-through}
.tin-foot .btn{padding:.7rem 1.1rem;font-size:.85rem}
.tin .btn-primary{background:var(--maroon);color:var(--cream);box-shadow:0 12px 26px -10px rgba(96,12,12,.6)}
.tin .btn-primary:hover{background:var(--maroon-2)}

@media (max-width:860px){
  .tins{grid-template-columns:1fr;gap:1.1rem}
  /* One column gives the room to lay the card on its side. */
  .tin{flex-direction:row;align-items:stretch}
  .tin-stage{aspect-ratio:1;flex:0 0 38%;padding:1rem;margin:10px}
  .tin-body{padding:1.2rem 1.3rem 1.3rem .4rem;justify-content:center}
}
@media (max-width:560px){
  .tin{flex-direction:column}
  .tin-stage{aspect-ratio:16/10;flex:none;width:auto;margin:10px 10px 1rem}
  .tin-body{padding:0 1.2rem 1.3rem}
}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.9rem,1.4vw,1.35rem)}
/* Tiles are solid stickers on the ground, not outlines on it: paper on the
   light grounds, cream on the green, each lifting and tipping on hover. */
.bx{
  position:relative;isolation:isolate;border-radius:clamp(24px,2.4vw,32px);overflow:hidden;
  padding:clamp(1.4rem,2.2vw,2rem);background:var(--paper);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:260px;
  box-shadow:0 30px 60px -34px rgba(20,6,2,.55);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.bx:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 40px 70px -34px rgba(20,6,2,.6)}
.bx h3{font-size:clamp(1.3rem,1.7vw,1.55rem);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;margin-bottom:.6rem}
.bx p{font-size:.92rem;color:var(--tx-2);max-width:40ch}
/* Icons sit in a disc, the carousel's seal in miniature. */
.bx .ic-lg{
  box-sizing:content-box;padding:14px;border-radius:50%;margin-bottom:auto;
  background:var(--accent,var(--flame));color:var(--paper-ink,#fff);
}
.g-green .bx:not(.bx-photo):not(.bx-flame){
  background:#F7EBC9;color:#1D4426;
  --tx:#1D4426;--tx-2:rgba(29,68,38,.8);--hd:#1D4426;--accent:#2E6B3B;--paper-ink:#F7EBC9;
}
.bx-photo{color:var(--cream)}
.bx-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1.1s var(--ease)}
.bx-photo:hover img{transform:scale(1.06)}
.bx-photo::after{content:"";position:absolute;inset:0;z-index:1;background:var(--scrim)}
.bx-photo > *{position:relative;z-index:2}
.bx-photo h3{color:var(--cream)}
.bx-photo p{color:rgba(253,246,234,.88);text-shadow:0 1px 12px rgba(20,6,4,.5)}
.bx-photo .ic-lg{color:var(--saffron)}
.bx-flame{background:var(--saffron);color:#3A1406;--hd:var(--maroon);--tx-2:rgba(58,20,6,.8);--accent:var(--maroon);--paper-ink:var(--saffron)}
.bx-flame h3{color:var(--maroon)}
.bx-flame p{color:rgba(58,20,6,.8)}
/* The rosette turning behind the saffron tile, as it does behind the packets. */
.bx-flame::before{
  content:"";position:absolute;z-index:-1;right:-30%;top:-30%;width:90%;aspect-ratio:1;
  background:var(--maroon);opacity:.09;
  -webkit-mask:var(--rosette) center/contain no-repeat;mask:var(--rosette) center/contain no-repeat;
  animation:pc-spin 140s linear infinite;
}
.b-a{grid-column:span 4}
.b-b,.b-c,.b-d,.b-e{grid-column:span 2}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .b-a{grid-column:span 2}
  .b-b,.b-c,.b-d,.b-e{grid-column:span 1}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .b-a,.b-b,.b-c,.b-d,.b-e{grid-column:span 1}
}

/* ---------- Story split ---------- */
.story{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,5rem);align-items:start}
/* A print on the ground: a paper border (a border, so the parallax image is
   clipped inside it), a slight tilt and a long soft shadow. */
.story-media{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--bg-3);
  border:clamp(8px,.8vw,12px) solid var(--paper,#fff);rotate:2deg;
  box-shadow:0 40px 80px -36px color-mix(in srgb,var(--hd) 60%,transparent);
}
.story-media img{width:100%;height:100%;object-fit:cover}
.story-media picture{display:block;height:100%}
/* On the dark grounds --paper is a tint, so the print border is cream. */
.g-green .story-media,.g-maroon .story-media{border-color:#F7EBC9}
/* The parallax drifts the photo ±6% of its own height, so it is cut taller
   than the frame (116%, centred) and never shows an edge while it moves. */
.story-media[data-parallax] img{position:absolute;left:0;top:-8%;height:116%}
.story-sticky{position:sticky;top:calc(var(--nav-h) + 2rem)}
.story-body p + p{margin-top:1.1rem}
.founders{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.founders dt{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--tx-3);margin-bottom:.35rem}
.founders dd{font-family:var(--display);font-size:1.1rem;font-weight:500;letter-spacing:-.015em}
.founders dd + dt{margin-top:1.1rem}
@media (max-width:880px){
  .story{grid-template-columns:1fr;gap:2.4rem}
  .story-sticky{position:static}
  .story-media{aspect-ratio:16/11}
}

/* ---------- CTA band ---------- */
/* Every page closes on the same poster: maroon, a turning rosette and a warm
   spill of light, whatever ground it sits on. It flips the tokens itself so
   the founders list, links and buttons inside it follow. */
.band{
  position:relative;isolation:isolate;border-radius:clamp(28px,3vw,44px);overflow:hidden;
  padding:clamp(2.4rem,5.4vw,4.8rem);
  background:var(--maroon);color:var(--cream);
  --tx:var(--cream);--tx-2:rgba(253,246,234,.8);--tx-3:rgba(253,246,234,.56);
  --line:rgba(253,246,234,.18);--line-2:rgba(253,246,234,.36);
  --hd:var(--saffron);--accent:var(--saffron);--panel-2:rgba(253,246,234,.1);
  box-shadow:0 50px 90px -46px rgba(40,4,2,.75);
}
.band::before{
  content:"";position:absolute;z-index:-1;inset:0;
  background:radial-gradient(60% 90% at 84% 20%,rgba(242,169,59,.28),transparent 66%);
}
.band::after{
  content:"";position:absolute;z-index:-1;right:-14%;top:50%;width:min(62%,640px);aspect-ratio:1;translate:0 -50%;
  background:var(--saffron);opacity:.1;
  -webkit-mask:var(--rosette) center/contain no-repeat;mask:var(--rosette) center/contain no-repeat;
  animation:pc-spin 140s linear infinite;
}
.band > *{position:relative}
.band .btn-primary{background:var(--saffron);color:#3A1406;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.band .btn-primary:hover{background:#F7C356}
.band .btn-ghost{color:var(--cream)}
.band .founders dd{color:var(--cream)}
.band .founders a:hover{color:var(--saffron)}
.band-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
/* The band sits inside a card, so its headline runs a size smaller. */
.band .d2{font-size:clamp(2rem,3.3vw,3.1rem)}
.band-cta{display:flex;flex-wrap:wrap;gap:.7rem}
@media (max-width:820px){.band-grid{grid-template-columns:1fr}}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.4vw,2.4rem)}
.step{
  padding:clamp(1.4rem,2.2vw,2rem);border-radius:clamp(24px,2.4vw,32px);background:var(--paper);
  box-shadow:0 26px 54px -34px rgba(20,6,2,.5);
  transition:transform .6s var(--ease);
}
.step:hover{transform:translateY(-5px) rotate(-.5deg)}
.step .ic-lg{
  width:24px;height:24px;box-sizing:content-box;padding:13px;border-radius:50%;
  background:var(--accent,var(--flame));color:var(--paper-ink,#fff);margin-bottom:1.2rem;
}
.step h3{font-size:1.25rem;font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;margin-bottom:.55rem}
.step p{font-size:.92rem;color:var(--tx-2)}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- Forms ---------- */
.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.45rem}
.field label{font-size:.82rem;font-weight:700;color:var(--tx)}
.field .hint{font-size:.76rem;color:var(--tx-2)}
.field input,.field textarea,.field select{
  width:100%;padding:.85rem 1rem;border-radius:var(--r-md);
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--tx);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--tx-3)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--flame);box-shadow:0 0 0 3px var(--glow);
}
.field .err{font-size:.78rem;color:var(--brick);display:none}
.field.invalid input,.field.invalid textarea{border-color:var(--brick)}
.field.invalid .err{display:block}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}

/* ---------- Contact hub ----------
   The number is the page. One large card carries it with every way to use
   it; the address and the trade route stack beside it as secondary cards. */
.chub{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(.9rem,1.4vw,1.35rem);align-items:stretch}
.chub-main{
  position:relative;overflow:hidden;isolation:isolate;container-type:inline-size;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.8rem,4vw,3.4rem);border-radius:clamp(24px,2.4vw,32px);
  background:var(--maroon);color:var(--cream);
  box-shadow:0 34px 70px -34px rgba(60,8,6,.6);
  --line-2:rgba(253,246,234,.34);--tx:var(--cream);--panel-2:rgba(253,246,234,.1);
}
/* A soft saffron glow in the corner, so the maroon reads as lit, not flat. */
.chub-main::before{
  content:"";position:absolute;z-index:-1;width:70%;aspect-ratio:1;right:-22%;top:-38%;
  background:radial-gradient(closest-side,rgba(242,169,59,.34),transparent);
}
.chub-tag{
  display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--saffron);
}
.chub-dot{width:8px;height:8px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 4px rgba(37,211,102,.22)}
.chub-lede{
  margin-top:1rem;max-width:26ch;
  font-size:clamp(1.25rem,1.9vw,1.7rem);font-weight:600;line-height:1.15;letter-spacing:-.02em;
  text-transform:none;color:var(--cream);
}
.chub-num{
  display:block;margin-top:clamp(1.4rem,3vw,2.2rem);
  font-family:var(--display);font-weight:700;letter-spacing:-.035em;word-spacing:.22em;line-height:1;
  font-size:clamp(1.7rem,8.2cqi,4.4rem);color:#F7EBC9;white-space:nowrap;
  transition:color .3s var(--ease);
}
.chub-num:hover{color:var(--saffron)}
.chub-act{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:clamp(1.4rem,2.6vw,2rem)}
.chub-copy{
  background:none;border:0;cursor:pointer;
  padding:.6rem .2rem;font-size:.86rem;font-weight:700;color:rgba(253,246,234,.72);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(253,246,234,.3);
  transition:color .25s var(--ease),text-decoration-color .25s var(--ease);
}
.chub-copy:hover{color:var(--cream);text-decoration-color:currentColor}
.chub-copy.is-done{color:var(--wa);text-decoration-color:transparent}
.chub-copy:focus-visible,.chub-num:focus-visible{outline:2px solid var(--saffron);outline-offset:4px;border-radius:6px}

.chub-side{display:grid;gap:clamp(.9rem,1.4vw,1.35rem)}
.ccard{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-content:start;
  border-radius:clamp(24px,2.4vw,32px);padding:clamp(1.4rem,2.2vw,1.9rem);background:var(--paper);
  box-shadow:0 26px 54px -34px rgba(20,6,2,.5);
}
.ccard .ic-lg{
  width:22px;height:22px;box-sizing:content-box;padding:12px;border-radius:50%;
  background:var(--accent,var(--flame));color:var(--paper-ink,#fff);
}
.ccard h3{font-size:1.15rem;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;margin:.35rem 0 .45rem}
.ccard p{font-size:.94rem;color:var(--tx-2);line-height:1.55;max-width:38ch}
.ccard-link{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-size:.9rem;font-weight:700;color:var(--hd);
}
.ccard-link .ic{width:1em;height:1em;transition:transform .3s var(--ease)}
.ccard-link:hover{color:var(--accent)}
.ccard-link:hover .ic{transform:translate(2px,-2px)}
@media (max-width:900px){.chub{grid-template-columns:1fr}}
@media (max-width:520px){
  .chub-act .btn{flex:1 1 auto;justify-content:center}
  .ccard{grid-template-columns:1fr}
}

/* ---------- Enquiry: how it works + the form card ---------- */
.how{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.1rem;max-width:30rem}
.how li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.how span{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  font-family:var(--display);font-weight:700;font-size:.95rem;
  background:var(--saffron);color:#3A1406;
}
.how p{font-size:.94rem;color:var(--tx-2);line-height:1.5;padding-top:.3rem}
.how strong{display:block;color:var(--tx);font-weight:700;margin-bottom:.1rem}
.how-note{margin-top:1.4rem;font-size:.82rem;color:var(--tx-3)}

/* The form sits on a cream card so the fields read as fields, not as
   holes in the green. It re-declares the cream tokens for its inputs. */
.form-card{
  padding:clamp(1.4rem,3vw,2.4rem);border-radius:clamp(24px,2.4vw,32px);
  background:#FDF6EA;color:#2B0E0A;box-shadow:0 34px 70px -30px rgba(6,20,10,.55);
  --bg-2:#FFFFFF;--line-2:rgba(96,12,12,.22);
  --tx:#2B0E0A;--tx-2:rgba(43,14,10,.72);--tx-3:rgba(43,14,10,.48);
  --glow:rgba(232,111,18,.18);
}
.topics{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.topics legend{font-size:.82rem;font-weight:700;color:var(--tx);margin-bottom:.6rem;padding:0}
.topics label{position:relative;cursor:pointer}
.topics input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.topics span{
  display:inline-block;padding:.6rem 1.1rem;border-radius:var(--r-pill);
  border:1px solid var(--line-2);font-size:.88rem;font-weight:700;color:var(--tx-2);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.topics label:hover span{border-color:var(--tx)}
.topics input:checked + span{background:var(--maroon);border-color:var(--maroon);color:var(--cream)}
.topics input:focus-visible + span{outline:2px solid var(--flame);outline-offset:2px}
.form-send{justify-self:stretch;justify-content:center}
.form-card .form-status{font-size:.86rem;color:var(--tx-2);text-align:center}
.form-card .form-status:empty{display:none}

/* ---------- Inner page header ---------- */
.phead{padding-top:calc(var(--nav-h) + clamp(3.5rem,8vw,7rem));padding-bottom:clamp(2.4rem,5vw,4rem);position:relative;overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(48% 60% at 82% 0%,var(--glow),transparent 66%)}
.phead .shell{position:relative}
.phead .lead{margin-top:1.2rem}

/* Two columns where a page header has a list worth carrying: the copy keeps
   its own measure on the left instead of stretching, and the right column
   picks up the space the headline was leaving empty on wide screens. The
   split header runs tighter than the single-column one, because the right
   column already gives the band its height. */
.phead-split{padding-top:calc(var(--nav-h) + clamp(1.6rem,3.2vw,2.6rem));padding-bottom:clamp(1.6rem,3vw,2.4rem)}
.phead-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.8rem,2.6vw,3rem);align-items:center}
/* One notch down from the full-width .d1 so the two authored lines survive the
   narrower column instead of breaking mid-phrase. */
.phead-grid .d1{font-size:clamp(2.3rem,4.2vw,3.6rem)}
.phead-grid .lead{max-width:50ch}
.phead-split .lead{margin-top:.9rem}

/* ---------- Legal pages (privacy, terms, disclaimer) ----------
   Long reading text: a contents rail on the left that stays in view, and the
   copy on a comfortable measure on the right. The rail drops above the text
   on narrow screens. */
.legal-grid{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.legal-toc{position:sticky;top:calc(var(--nav-h) + 2rem);padding-top:1.2rem;border-top:1px solid var(--line)}
.legal-toc h2{font-family:var(--body);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--tx-3);margin-bottom:.9rem}
.legal-toc li + li{margin-top:.5rem}
.legal-toc a{font-size:.9rem;color:var(--tx-2);transition:color .25s var(--ease)}
.legal-toc a:hover{color:var(--flame)}
.legal{max-width:68ch}
.legal h2{font-size:clamp(1.3rem,1.2vw + 1rem,1.7rem);margin:2.8rem 0 .9rem;scroll-margin-top:calc(var(--nav-h) + 1.5rem)}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.08rem;margin:1.6rem 0 .5rem}
.legal p,.legal li{color:var(--tx-2)}
.legal p + p{margin-top:.9rem}
.legal ul{list-style:disc;padding-left:1.25rem;margin:.8rem 0}
.legal li + li{margin-top:.45rem}
.legal li::marker{color:var(--flame)}
.legal strong{color:var(--tx);font-weight:600}
.legal a{color:var(--hd);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:text-decoration-color .25s var(--ease)}
.legal a:hover{text-decoration-color:currentColor}
.legal address{font-style:normal;color:var(--tx-2);margin-top:.9rem;padding-left:1rem;border-left:2px solid var(--line-2)}
@media (max-width:860px){
  .legal-grid{grid-template-columns:1fr}
  .legal-toc{position:static}
}

/* ---------- Jump cards (process header) ----------
   Where to go on the page, as four photo cards. The number is the order on
   the page; the count lives in the subtitle, where it reads as a count. */
.jumps-t{
  font-family:var(--body);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--tx-3);margin-bottom:.7rem;
}
.jumps-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.jump{
  position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:.75rem;align-items:center;height:100%;
  padding:.55rem .9rem .8rem .55rem;border-radius:20px;
  background:var(--panel);border:1px solid var(--line);color:var(--tx);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .4s var(--ease);
}
.jump-img{
  grid-column:1/-1;display:block;aspect-ratio:16/9;margin-bottom:.7rem;
  border-radius:14px;overflow:hidden;background:var(--bg-3);
}
.jump-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.jump-n{
  font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1;letter-spacing:-.03em;
  color:var(--hd);font-variant-numeric:tabular-nums;padding-left:.35rem;
}
.jump-k{
  font-family:var(--display);font-weight:600;font-size:.9rem;
  text-transform:uppercase;letter-spacing:-.005em;line-height:1.15;padding-right:1.2rem;
}
.jump-k small{
  display:block;margin-top:.15rem;font-family:var(--body);font-weight:400;font-size:.76rem;
  text-transform:none;letter-spacing:0;line-height:1.3;color:var(--tx-2);
}
.jump .ic{
  position:absolute;right:.8rem;bottom:.95rem;width:15px;height:15px;color:var(--tx-3);
  transition:transform .3s var(--ease),color .3s var(--ease);
}
.jump:hover{background:var(--panel-2);border-color:var(--line-2);transform:translateY(-3px)}
.jump:hover .jump-img img{transform:scale(1.06)}
.jump:hover .ic{transform:translateX(3px);color:var(--accent)}
.jump:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.phead-stats{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.phead-stats div{
  padding:.7rem 1.05rem;border-radius:16px;background:var(--panel);border:1px solid var(--line);
}
.phead-stats dt{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--tx-3)}
.phead-stats dd{margin:.2rem 0 0;font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;letter-spacing:-.03em;color:var(--hd)}

@media (max-width:1000px){
  .phead-grid{grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2rem);align-items:start}
}
@media (max-width:640px){
  .jumps-list{grid-template-columns:1fr 1fr;gap:.45rem}
  .jump{padding:.45rem .6rem .7rem .45rem}
  .jump-k{font-size:.8rem;padding-right:0}
  .jump-k small{display:none}
  .jump .ic{display:none}
}


/* ---------- Footer ---------- */
.foot{
  border-top:0;background:var(--maroon);color:var(--cream);
  padding-block:clamp(3rem,6vw,4.5rem) 2rem;
  --line:rgba(253,246,234,.17);
  --line-2:rgba(253,246,234,.3);
  --tx:var(--cream);
  --tx-2:rgba(253,246,234,.76);
  --tx-3:rgba(253,246,234,.52);
}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(1.8rem,3vw,3rem)}
.foot h4{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--tx-3);font-family:var(--body);margin-bottom:1.1rem}
.foot li + li{margin-top:.6rem}
.foot a{color:var(--tx-2);font-size:.92rem;transition:color .25s var(--ease)}
.foot a:hover{color:var(--saffron)}
.foot .brand{margin-bottom:1.1rem}
.foot address{font-style:normal;font-size:.92rem;color:var(--tx-2);line-height:1.65}
.socials{display:flex;gap:.5rem;margin-top:1.2rem}
.socials a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid var(--line);color:var(--tx-2);
  transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.socials a:hover{color:#fff;background:var(--flame);border-color:var(--flame)}
.socials a[href*="wa.me"]:hover{background:var(--wa);border-color:var(--wa)}
/* The maroon wordmark would disappear on maroon, so the footer carries the
   knocked-out lockup instead of the mark plus type. */
.foot-brand{display:block;margin-bottom:1.4rem}
.foot-brand img{height:clamp(64px,6vw,82px);width:auto}
.foot-base{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.84rem;color:var(--tx-3);
}
/* The FSSAI mark's navy letters would sink into the maroon, so the footer
   carries a knocked-out copy with cream letters; saffron and green stay. */
.foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}
.fssai{display:inline-flex;align-items:center;gap:.7rem;flex:none}
.fssai picture{display:block;line-height:0}
.fssai img{height:30px;width:auto}
.fssai span{
  display:flex;flex-direction:column;gap:.15rem;
  padding-left:.7rem;border-left:1px solid var(--line-2);
  color:var(--cream);font-size:.8rem;font-weight:600;line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.fssai small{
  font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-3);
}
/* A hairline parts the licence from the copyright while they share a row. */
.fssai + p{padding-left:1.75rem;border-left:1px solid var(--line)}
@media (max-width:640px){.fssai + p{padding-left:0;border-left:0;flex-basis:100%}}
.foot-base ul{display:flex;flex-wrap:wrap;gap:1.2rem}
.foot-base li + li{margin-top:0}
.foot-base a{font-size:.84rem}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Floating WhatsApp ---------- */
.wa-float{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:70;
  display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.25rem;
  border-radius:var(--r-pill);background:var(--wa);color:#fff;font-weight:700;font-size:.9rem;
  box-shadow:0 14px 38px var(--wa-glow);
  /* Hidden = pushed fully past the viewport edge: its own height, plus the
     bottom offset, plus room for the shadow. A plain percentage left the
     shorter order pill peeking out under the hero. */
  transform:translateY(calc(100% + clamp(16px,3vw,28px) + 48px));visibility:hidden;
  transition:transform .55s var(--ease),background .3s var(--ease),visibility 0s linear .55s;
}
.wa-float.show{transform:translateY(0);visibility:visible;transition:transform .55s var(--ease),background .3s var(--ease),visibility 0s}
.wa-float:hover{background:var(--wa-2)}
.wa-float .ic{width:20px;height:20px}
/* In its WhatsApp state the float is the icon and nothing else: a round button
   that sits quietly over the page instead of a pill competing with the cards.
   The label stays in the DOM and is clipped rather than display:none, so the
   link keeps its accessible name and syncFloat can still write to it. */
.wa-float:not(.is-order){
  width:58px;height:58px;padding:0;gap:0;justify-content:center;border-radius:50%;
}
.wa-float:not(.is-order) .lbl{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
.wa-float:not(.is-order) .ic{width:28px;height:28px}
@media (max-width:520px){.wa-float .lbl{display:none}.wa-float{padding:.95rem}}
/* Carrying a total, the float has to keep its label at every width: a basket
   total nobody can read is worse than no float at all. */
.wa-float.is-order{background:var(--maroon);box-shadow:0 14px 38px rgba(96,12,12,.32)}
.wa-float.is-order:hover{background:var(--maroon-2)}
@media (max-width:520px){.wa-float.is-order .lbl{display:inline}.wa-float.is-order{padding:.85rem 1.1rem}}

/* ---------- Scroll reveal ----------
   Scoped to .js so the page still renders with scripting disabled. */
.js .rv{opacity:0;transform:translateY(26px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .85s var(--ease),transform .85s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------- Contact split + map ---------- */
.contact-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4.5rem);align-items:start}
@media (max-width:900px){.contact-split{grid-template-columns:1fr;gap:2.6rem}}

/* ============================================================
   Pinned horizontal pan through the range
   ============================================================ */
.pan{position:relative}
.pan-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.pan-count{
  font-family:var(--display);font-size:.88rem;font-weight:600;color:var(--tx-2);
  white-space:nowrap;word-spacing:.16em;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.55rem 1.1rem;
}
.pan-count b{color:var(--flame);font-weight:600}
.pan-viewport{position:relative;overflow:hidden}
.pan-track{
  display:flex;gap:clamp(.9rem,1.4vw,1.4rem);
  padding-block:clamp(1.6rem,3vw,2.6rem);padding-inline:var(--gut);
  will-change:transform;
}
.pan-track > .pcard{width:clamp(260px,25vw,330px);flex:none}
/* Progress rail under the pan, so the pinned scroll has a readable length. */
.pan-rail{height:2px;background:var(--line);position:relative;margin-inline:var(--gut);border-radius:2px}
.pan-rail span{
  position:absolute;left:0;top:0;height:100%;width:100%;
  background:var(--flame);border-radius:2px;transform:scaleX(0);transform-origin:left;
}
/* Without the pin (narrow screens, reduced motion) it becomes a snap carousel. */
.pan-viewport.is-free{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pan-viewport.is-free::-webkit-scrollbar{display:none}
.pan-viewport.is-free .pcard{scroll-snap-align:center}

/* ============================================================
   Process: what happens between the grain and the packet
   ============================================================ */
.proc{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:start}
/* The photo is a print stuck to the ground, not a window cut into it: a
   paper border, a slight tilt and the carousel's seal on its corner. The
   wrapper carries the stickers; the frame inside it clips the photographs. */
.proc-media{
  position:sticky;top:calc(var(--nav-h) + 2.5rem);display:grid;
  border-radius:var(--r-lg);aspect-ratio:4/5;
  background:var(--paper,#FFF4DC);padding:clamp(8px,.8vw,12px);
  rotate:-2deg;box-shadow:0 34px 70px -24px color-mix(in srgb,var(--hd) 55%,transparent);
}
.proc-media > img{
  grid-area:1/1;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r-lg) - 8px);
  opacity:0;transform:scale(1.06);
  transition:opacity .8s var(--ease),transform 1.2s var(--ease);
}
.proc-media > img.is-on{opacity:1;transform:scale(1)}
.proc-media .pc-seal{--x:4%;--y:6%;z-index:2}
.proc-steps{display:grid;gap:clamp(.4rem,1vw,.8rem);counter-reset:proc}
/* Every step stays fully legible. The one being read lifts into a card,
   the way the carousel lifts the packet it is showing. */
.proc-step{
  position:relative;counter-increment:proc;
  display:grid;grid-template-columns:auto 1fr;column-gap:clamp(1rem,2vw,1.8rem);
  padding:clamp(1.4rem,2.6vw,2.2rem) clamp(1.2rem,2.4vw,2.2rem);
  border-radius:var(--r-lg);
  transition:background .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease);
}
.proc-step::before{
  content:counter(proc,decimal-leading-zero);grid-row:1/span 3;
  font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,4.4vw,3.8rem);
  line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px var(--hd);opacity:.45;
  transition:color .5s var(--ease),opacity .5s var(--ease);
}
.proc-step > *{grid-column:2}
.proc-step.is-on{background:var(--paper,#FFF4DC);box-shadow:0 24px 50px -26px color-mix(in srgb,var(--hd) 60%,transparent)}
.proc-step.is-on::before{color:var(--hd);opacity:1}
.proc-step .k{
  justify-self:start;
  font-family:var(--body);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent,var(--flame));
  padding:.3rem .65rem;border:1.5px solid currentColor;border-radius:var(--r-pill);
  margin-bottom:.8rem;
}
.proc-step h3{font-size:clamp(1.45rem,2.3vw,2rem);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;margin-bottom:.7rem}
.proc-step p{color:var(--tx-2);max-width:46ch}
.proc-more{margin-top:clamp(1rem,2vw,1.6rem);padding-left:clamp(1.2rem,2.4vw,2.2rem)}
@media (max-width:880px){
  .proc{grid-template-columns:1fr;gap:2rem}
  .proc-media{position:relative;top:auto;aspect-ratio:16/10;rotate:-1deg}
  .proc-media .pc-seal{--x:12%;--y:10%;--s:84px}
  .proc-step{background:var(--paper,#FFF4DC)}
  .proc-step::before{color:var(--hd);opacity:1}
}
@media (max-width:480px){
  .proc-step{grid-template-columns:1fr}
  .proc-step::before{grid-row:auto;margin-bottom:.8rem}
  .proc-step > *{grid-column:1}
}

/* ============================================================
   Side sheet (the order panel)
   ============================================================ */
.sheet-scrim{
  position:fixed;inset:0;z-index:95;background:rgba(6,5,5,.66);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.sheet-scrim.open{opacity:1;visibility:visible}
.sheet{
  position:fixed;z-index:96;right:0;top:0;bottom:0;width:min(560px,100%);
  background:var(--bg-2);border-left:1px solid var(--line);
  transform:translateX(101%);transition:transform .55s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
}
.sheet.open{transform:none}
.sheet-top{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1rem clamp(1.2rem,3vw,2rem);
  background:color-mix(in srgb,var(--bg-2) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
@media (prefers-reduced-transparency:reduce){
  .sheet-top{background:var(--bg-2);backdrop-filter:none;-webkit-backdrop-filter:none}
  .sheet-scrim{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(6,5,5,.88)}
}
@media (max-width:560px){
  .sheet{
    top:auto;width:100%;max-height:92dvh;border-left:0;border-top:1px solid var(--line);
    border-radius:var(--r-lg) var(--r-lg) 0 0;transform:translateY(101%);
  }
  .sheet.open{transform:none}
}

/* ============================================================
   Card spotlight (cursor-follow highlight)
   ============================================================ */
.pcard{cursor:pointer}


/* ============================================================
   Footer brand mark
   ============================================================ */
.foot-mark{
  margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--line);overflow:hidden;
}
.foot-mark span{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(2.2rem,11vw,9.4rem);line-height:.9;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px var(--line-2);
  word-spacing:.1em;white-space:nowrap;
}

/* ---- Pinned pan wrapper: one viewport tall so the pin has a clean anchor ---- */
.pan-inner{
  min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(1.2rem,2.5vw,2rem);padding-block:clamp(4rem,8vw,6rem);
}
.pan-head{padding-inline:var(--gut);max-width:var(--shell);margin-inline:auto;width:100%}
@media (max-width:900px){
  .pan-inner{min-height:0;padding-block:0}
  .pan-track > .pcard{width:min(74vw,300px)}
}

/* ---- Stretched card link: the whole card opens the product page, the Add
        link stays above it and still goes straight to WhatsApp ---- */
.pcard-open{
  background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;
  font:inherit;color:inherit;letter-spacing:inherit;word-spacing:inherit;
}
.pcard-open::before{content:"";position:absolute;inset:0;z-index:1}
.pcard-open:focus{outline:none}
.pcard-open:focus-visible::before{
  outline:2px solid var(--flame);outline-offset:-4px;border-radius:var(--r-lg);
}
.pcard-foot{position:relative;z-index:2}

/* ============================================================
   Product card: the packet is what you buy, so the card rests on the
   packet; the bowl - what you eat - fades in over it on hover. Cards
   marked .has-pack are the ones with both shots; the rest show the
   bowl alone and never swap.
   ============================================================ */
.pcard-img{position:relative}
.pcard-img .bowl{transition:opacity .5s var(--ease),transform .6s var(--ease)}
.pcard-img.has-pack .bowl{opacity:0;transform:scale(.94)}
.pcard-img .pack{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:90%;height:90%;max-width:none;object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(96,12,12,.24));
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.pcard:hover .pcard-img.has-pack .bowl{opacity:1;transform:none}
.pcard:hover .pcard-img .pack{opacity:0;transform:translateY(10px) scale(.95)}
/* No hover to swap with, so touch keeps the packet. */
@media (hover:none){
  .pcard:hover .pcard-img.has-pack .bowl{opacity:0;transform:scale(.94)}
  .pcard:hover .pcard-img .pack{opacity:1;transform:none}
}

/* ============================================================
   Range band: the whole range on the kitchen table, full bleed
   between the products header and the grid.
   ============================================================ */
.range-band{
  position:relative;overflow:hidden;
  height:clamp(160px,21vw,290px);
  border-top:1px solid var(--line);background:var(--bg-3);
  /* The fade below has to land on the exact cream of the .g-cream section
     that follows, or the two creams read as a seam. No bottom border and no
     margin either: the fade IS the join, and the section's own top padding
     supplies the air a margin used to. */
  --bg:#FBF0DD;
}
.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}
/* A section that opens the page, with no page head above it, clears the fixed nav itself. */
.sr-only + .section{padding-top:calc(var(--nav-h) + clamp(1.6rem,3.2vw,2.6rem))}
/* With no page head above it, the band opens the page and runs up under the fixed nav, so the frosted bar shows the photo through it. The extra height keeps the visible part the same size. */
.sr-only + .range-band{height:calc(clamp(160px,21vw,290px) + var(--nav-h));border-top:0}
/* The grid follows the band directly, so it needs only a little air, not a full section gap. */
.range-band + .section{padding-top:clamp(.5rem,1.5vw,1.25rem)}
.range-band img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
/* A short cream fade at the foot so the grid below does not butt into it. */
.range-band::after{
  content:"";position:absolute;inset:auto 0 0;height:34%;
  background:linear-gradient(to top,var(--bg),transparent);
}

/* ============================================================
   Order basket
   The site takes no payments: the basket gathers a few packs so the
   whole order reaches WhatsApp as one message instead of several.
   ============================================================ */
.cart-btn{position:relative;overflow:visible}
.cart-count{
  position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding-inline:5px;
  border-radius:var(--r-pill);background:var(--flame);color:#fff;
  font-family:var(--body);font-size:.66rem;font-weight:700;line-height:19px;text-align:center;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--bg);
}

.cart .sheet-top{padding-block:1.15rem}
.cart-title{font-size:1.15rem}
.cart-body{flex:1;padding:0 clamp(1.2rem,3vw,2rem)}

.cart-empty{
  display:grid;justify-items:start;gap:1rem;
  padding-block:clamp(3rem,8vw,5rem);color:var(--tx-2);
}
.cart-empty .ic-lg{color:var(--tx-3)}

.cart-list{display:grid}
.cart-line{
  display:grid;grid-template-columns:64px 1fr auto;gap:1rem;align-items:center;
  padding-block:1.1rem;border-bottom:1px solid var(--line);
}
.cart-thumb{
  width:64px;height:64px;border-radius:var(--r-md);overflow:hidden;
  background:var(--bg-3);display:grid;place-items:center;
}
.cart-thumb img{width:84%;height:84%;object-fit:contain}
.cart-info h3{font-size:1rem;letter-spacing:-.015em}
.cart-info p{font-size:.79rem;color:var(--tx-3);margin-top:.15rem}

.qty{
  display:inline-flex;align-items:center;gap:.1rem;margin-top:.55rem;
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:2px;
}
.qty button{
  width:26px;height:26px;display:grid;place-items:center;flex:none;
  border:0;background:transparent;border-radius:50%;color:var(--tx-2);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.qty button:hover{background:var(--panel-2);color:var(--tx)}
.qty button .ic{width:13px;height:13px}
.qty span{
  min-width:24px;text-align:center;font-size:.86rem;font-weight:700;
  font-variant-numeric:tabular-nums;
}

.cart-end{display:grid;justify-items:end;gap:.5rem}
.cart-end .price{font-size:1rem}
.cart-del{
  border:0;background:transparent;padding:2px;cursor:pointer;color:var(--tx-3);
  transition:color .25s var(--ease);
}
.cart-del:hover{color:var(--brick)}
.cart-del .ic{width:16px;height:16px}

.cart-foot{
  position:sticky;bottom:0;margin-top:auto;display:grid;gap:.9rem;
  padding:1.1rem clamp(1.2rem,3vw,2rem) 1.3rem;border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--bg-2) 92%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.cart-foot:empty{display:none}
.cart-sum{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-size:.86rem;color:var(--tx-2);
}
.cart-sum .price{font-size:1.45rem;color:var(--maroon)}
.cart-foot .btn{justify-content:center;width:100%}
.cart-note{font-size:.76rem;color:var(--tx-3);line-height:1.5}
@media (prefers-reduced-transparency:reduce){
  .cart-foot{background:var(--bg-2);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ============================================================
   Pack carousel (home)
   One packet per slide, each on a colour picked against its pouch.
   The ground is painted by JS in .pc-bg: the next colour grows out of
   the stage as a circle while the packets slide, and the stickers are
   slapped on once the new packet has landed. Each slide carries its own
   colours as --s-* custom properties; the section's --c-* pair follows
   the active slide so the controls change colour with it.
   Without JS the slides fall back to a swipeable row of colour cards.
   ============================================================ */
@property --c-bg{syntax:'<color>';inherits:true;initial-value:#F6B634}
@property --c-ink{syntax:'<color>';inherits:true;initial-value:#9E120E}

.pc{
  --pw:clamp(188px,min(25vw,40vh),340px);
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(64px,7.5vw,112px) clamp(44px,5vw,76px);
  color:var(--c-ink);
  /* Held back until the flood has reached the controls below the stage. */
  transition:--c-ink .7s var(--ease) .32s,--c-bg .7s var(--ease) .32s;
}
@supports (height:1svh){.pc{--pw:clamp(188px,min(25vw,40svh),340px)}}
.pc :focus-visible{outline-color:var(--c-ink)}
.pc-defs{position:absolute;width:0;height:0;overflow:hidden}

.pc-bg{position:absolute;inset:0;z-index:-2;background:var(--c-bg)}
.pc-flood{position:absolute;inset:0;transition:clip-path 1s cubic-bezier(.7,0,.22,1) .06s;will-change:clip-path}
.pc-rosette{
  position:absolute;z-index:-1;left:50%;top:var(--cy,62%);
  width:clamp(460px,62vw,960px);height:auto;max-width:none;translate:-50% -50%;
  fill:var(--c-ink);opacity:.08;pointer-events:none;
  animation:pc-spin 140s linear infinite;
}
@keyframes pc-spin{to{rotate:360deg}}

/* Every slide sits in the same grid cell, bottom-aligned, so the stage lands
   on the same line whatever the headline does. JS spaces them sideways. */
.js .pc-track{display:grid;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pc-slide{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--s-ink)}
.js .pc-slide{
  grid-area:1/1;align-self:end;justify-self:center;width:min(100%,1040px);padding-inline:var(--gut);
  pointer-events:none;will-change:transform;
  transition:transform .95s cubic-bezier(.62,.02,.2,1);
}
.js .pc:not(.is-live) .pc-slide:not(:first-child){visibility:hidden}
.pc.is-live .pc-slide.is-on{z-index:1}
.pc.is-live .pc-pack{pointer-events:auto;cursor:pointer}
@media (pointer:fine){.pc.is-live .pc-track{cursor:grab}}
.pc.is-dragging .pc-track,.pc.is-dragging .pc-pack{cursor:grabbing}

.pc-kick{
  display:flex;align-items:center;gap:.65rem;margin-bottom:clamp(.9rem,1.6vw,1.3rem);
  font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.pc-kick b{
  font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:.02em;line-height:1;
  padding:.32rem .6rem;border:1.5px solid currentColor;border-radius:var(--r-pill);
}
.pc-hl{
  font-size:clamp(2.1rem,5.6vw,5.4rem);font-weight:700;line-height:.86;letter-spacing:-.035em;
  text-transform:uppercase;color:inherit;
}
.pc-hl em{font-style:normal;color:var(--s-ink-2,inherit)}
.pc-kick,.pc-hl{transition:opacity .45s var(--ease),translate .9s var(--ease)}
.pc.is-live .pc-slide:not(.is-on) :is(.pc-kick,.pc-hl){opacity:0;translate:0 .4rem}
.pc.is-live .pc-slide.is-on :is(.pc-kick,.pc-hl){transition-delay:.25s}

/* ---- The stage: packet, contact shadow, stickers, sparkles ---- */
/* --s-w widens the flat papad packs so they stand about as tall as the pouches. */
.pc-stage{position:relative;isolation:isolate;width:calc(var(--pw) * var(--s-w,1));margin-top:clamp(.5rem,1.2vw,1.1rem)}
.pc-stage::before{
  content:"";position:absolute;z-index:-1;left:50%;bottom:-3%;width:84%;height:10%;translate:-50% 0;
  border-radius:50%;background:radial-gradient(closest-side,rgba(20,6,2,.38),transparent);filter:blur(6px);
}
.pc-pack{width:100%;transform-origin:50% 60%;transition:transform .95s cubic-bezier(.62,.02,.2,1);-webkit-user-drag:none}
.pc.is-live .pc-slide.is-on .pc-pack{transform:rotate(var(--s-tilt,0deg))}
.pc.is-live .pc-slide:not(.is-on) .pc-pack{transform:scale(.84)}
@media (hover:hover){
  .pc.is-live .pc-slide.is-on .pc-pack:hover{transform:rotate(0deg) scale(1.03);transition-duration:.5s}
}

.pc-st{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);height:auto;max-width:none;aspect-ratio:1;
  translate:-50% -50%;rotate:var(--r);
  transition:scale .3s var(--ease),rotate .3s var(--ease),opacity .2s var(--ease);
}
.pc.is-live .pc-slide:not(.is-on) .pc-st{scale:.3;rotate:calc(var(--r) - 40deg);opacity:0}
.pc.is-live .pc-slide.is-on .pc-st{
  transition:scale .85s cubic-bezier(.3,1.6,.5,1) var(--d),rotate .85s cubic-bezier(.3,1.4,.5,1) var(--d),opacity .25s var(--ease) var(--d);
}
.pc-seal{--x:-2%;--y:28%;--s:clamp(88px,11.5vw,178px);--r:-12deg;--d:.6s;border-radius:50%;box-shadow:0 12px 28px rgba(20,6,2,.2)}
.pc-disc{fill:var(--s-seal)}
.pc-dash{fill:none;stroke:var(--s-seal-ink);stroke-width:1.5;stroke-dasharray:2 5;opacity:.55}
.pc-ring{transform-origin:100px 100px;animation:pc-turn 26s linear infinite}
.pc-ring text{font:600 16.5px var(--display);fill:var(--s-seal-ink)}
.pc-big{font:700 50px var(--display);letter-spacing:-.03em;text-anchor:middle;fill:var(--s-seal-ink)}
.pc-big tspan{font-size:26px}
@keyframes pc-turn{to{transform:rotate(360deg)}}

.pc-tag{--x:101%;--y:74%;--s:clamp(84px,10vw,156px);--r:10deg;--d:.78s;filter:drop-shadow(0 10px 16px rgba(20,6,2,.22))}
.pc-tag use{fill:var(--s-tag)}
.pc-tag text{font:700 28px var(--display);letter-spacing:-.01em;text-transform:uppercase;text-anchor:middle;fill:var(--s-tag-ink)}

.pc-sp{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);max-width:none;
  translate:-50% -50%;fill:#fff;
  transition:opacity .35s var(--ease);animation:pc-twinkle 3.4s ease-in-out infinite;
}
.pc-sp-1{--x:-30%;--y:6%;--s:clamp(16px,2vw,30px)}
.pc-sp-2{--x:126%;--y:20%;--s:clamp(20px,2.4vw,36px);animation-delay:-1.1s}
.pc-sp-3{--x:-24%;--y:72%;--s:clamp(12px,1.4vw,20px);animation-delay:-2.2s}
.pc-sp-4{--x:118%;--y:46%;--s:clamp(11px,1.2vw,17px);animation-delay:-.6s}
.pc.is-live .pc-slide:not(.is-on) .pc-sp{opacity:0}
.pc.is-live .pc-slide.is-on .pc-sp{transition-delay:.75s}
@keyframes pc-twinkle{0%,100%{scale:1;rotate:0deg}50%{scale:.55;rotate:45deg}}

/* ---- Controls ---- */
.pc-ctl{
  position:relative;z-index:2;display:grid;justify-items:center;gap:clamp(1.2rem,2.2vw,1.7rem);
  margin-top:clamp(1.8rem,3.4vw,2.8rem);padding-inline:var(--gut);
}
.pc-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.65rem}
.pc-add{background:var(--c-ink);color:var(--c-bg);box-shadow:0 12px 30px rgba(20,6,2,.16)}
.pc-add:hover{box-shadow:0 18px 38px rgba(20,6,2,.24)}
.pc-more{background:transparent;color:var(--c-ink);border-color:color-mix(in srgb,var(--c-ink) 45%,transparent)}
.pc-more:hover{border-color:var(--c-ink);background:color-mix(in srgb,var(--c-ink) 10%,transparent)}

/* The dots are the whole control: one per packet, the active one carrying
   the autoplay timer. Arrows and a pause button used to sit either side. */
.pc-nav{display:flex;align-items:center;justify-content:center}

/* The fill in the active dot is the autoplay timer: when it completes the
   carousel moves on, and pausing it pauses the timer. */
.pc-dots{display:flex;align-items:center}
.pc-dot{display:grid;align-items:center;height:32px;padding:0 4px;border:0;background:transparent;cursor:pointer}
.pc-dot i{
  position:relative;display:block;width:8px;height:8px;border-radius:8px;overflow:hidden;
  background:color-mix(in srgb,var(--c-ink) 32%,transparent);transition:width .45s var(--ease);
}
.pc-dot.is-on i{width:36px}
.pc-dot b{position:absolute;inset:0;background:var(--c-ink);scale:0 1;transform-origin:left}
.pc-dot.is-on b{animation:pc-fill var(--dwell,4s) linear forwards}
.pc.is-held .pc-dot.is-on b{animation-play-state:paused}
.pc.no-auto .pc-dot.is-on b{animation:none;scale:1 1}
@keyframes pc-fill{to{scale:1 1}}

/* ---- The carousel is the home page's hero ----
   It fills the first screen, clears the fixed nav card, and gives the packet
   more room than it has when the carousel is a section further down. */
.pc.is-hero{
  --pw:clamp(190px,min(24vw,33vh),360px);
  min-height:calc(100vh - var(--strip-h));
  display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(84px + clamp(.4rem,1.6vh,1.2rem)) clamp(20px,3vh,44px);
}
@supports (height:1svh){
  .pc.is-hero{--pw:clamp(190px,min(24vw,33svh),360px);min-height:calc(100svh - var(--strip-h))}
}
/* The headline has to give way on a short screen, or the controls fall off it. */
.pc.is-hero .pc-hl{font-size:clamp(2.1rem,min(5.6vw,8vh),5.4rem)}
@supports (height:1svh){.pc.is-hero .pc-hl{font-size:clamp(2.1rem,min(5.6vw,8svh),5.4rem)}}
@media (max-width:980px){.pc.is-hero{padding-top:calc(76px + 1.2rem)}}
@media (max-width:760px){.pc.is-hero{--pw:min(62vw,300px)}}

/* ---- No JS: a row of colour cards ---- */
html:not(.js) .pc{padding-block:var(--sec)}
html:not(.js) .pc :is(.pc-bg,.pc-rosette,.pc-ctl){display:none}
html:not(.js) .pc-track{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--gut);scrollbar-width:none;
}
html:not(.js) .pc-slide{
  flex:0 0 min(86%,540px);scroll-snap-align:center;
  padding:2.6rem 1rem 3rem;border-radius:var(--r-lg);background:var(--s-bg);
}

/* ============================================================
   PROCESS PAGE (process.html)
   The home page carries a four-step summary in .proc; this page
   carries the whole line. Everything below is used only there,
   except .proc and .proc-step, which are shared and unchanged.
   ============================================================ */

/* The shared .k label is Clash, and Clash closes its word space to nothing at
   this tracking. The home page never noticed because its labels are one word
   each; this page numbers them, so "01 Grain" needs the gap back. */
.proc-step .k{word-spacing:.16em}

/* ---- The line at a glance: a horizontal rail of every stage ----
   Nine stages is past the point where a bulleted list reads. The rail
   keeps them one row deep and lets a thumb flick through them. */
.pline{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);
  gap:clamp(.7rem,1vw,1rem);
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;
  /* Bleed to the viewport edge so the last card is visibly cut, which is
     the only honest way to say "this scrolls" without a scroll cue. */
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  padding-bottom:.5rem;
}
.pline::-webkit-scrollbar{display:none}
.pline li{
  scroll-snap-align:start;
  border-top:2px solid var(--line);padding-top:1rem;
}
.pline li:first-child{border-top-color:var(--accent,var(--flame))}
.pline .n{
  font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.14em;
  color:var(--tx-3);display:block;margin-bottom:.5rem;
}
.pline h3{font-size:1.02rem;margin-bottom:.35rem}
.pline p{font-size:.86rem;color:var(--tx-2)}
/* Nine stages, so three rows of three. Five across would leave the last row
   one short, and a ragged row reads as a missing stage. */
@media (min-width:1100px){
  .pline{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;
    margin-inline:0;padding-inline:0;gap:clamp(1.6rem,2.6vw,2.6rem) clamp(1.4rem,2.4vw,2.6rem)}
  .pline h3{font-size:1.1rem}
  .pline p{max-width:34ch}
}

/* ---- The three cuts: same dough, three hole sizes ----
   Asymmetric on purpose. Three equal tiles would say the cuts are
   interchangeable, and the whole point of the section is that they are not. */
.cuts{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(1.2rem,2.4vw,2.4rem);align-items:start}
.cut figure{margin:0}
/* Each cut stands on its own colour, framed in cream like a product card,
   with the carousel's rosette turning behind the bowl. The three stages share
   one height so the row reads as a set; the first is simply wider. */
.cut-img{
  position:relative;isolation:isolate;overflow:hidden;
  height:clamp(240px,27vw,380px);display:grid;place-items:end center;
  padding:clamp(1.2rem,2.4vw,2.2rem) clamp(1rem,2vw,1.8rem) clamp(1.4rem,2.6vw,2.4rem);
  border-radius:clamp(24px,2.4vw,32px);border:clamp(7px,.7vw,10px) solid #F7EBC9;
  background:radial-gradient(70% 60% at 50% 38%,rgba(255,255,255,.34),transparent 70%),var(--t-bg,var(--saffron));
  box-shadow:0 34px 60px -34px rgba(6,20,10,.7);
  transition:transform .6s var(--ease);
}
.cut-img::before{
  content:"";position:absolute;z-index:-1;left:50%;top:44%;width:min(120%,560px);aspect-ratio:1;translate:-50% -50%;
  background:var(--t-ink,var(--maroon));opacity:.1;
  -webkit-mask:var(--rosette) center/contain no-repeat;mask:var(--rosette) center/contain no-repeat;
  animation:pc-spin 140s linear infinite;
}
/* A painted contact shadow, so the bowl sits on the stage instead of floating. */
.cut-img::after{
  content:"";position:absolute;z-index:-1;left:50%;bottom:clamp(1rem,2vw,1.8rem);width:62%;height:9%;translate:-50% 0;
  border-radius:50%;background:radial-gradient(closest-side,rgba(20,8,4,.42),transparent);filter:blur(4px);
}
.cut-img img{
  width:auto;height:auto;max-width:100%;max-height:100%;min-height:0;object-fit:contain;
  filter:drop-shadow(0 14px 14px rgba(20,8,4,.28));
  transition:transform .8s var(--ease);
}
.cut:hover .cut-img{transform:translateY(-6px) rotate(-.7deg)}
.cut:hover .cut-img img{transform:translateY(-4px) scale(1.05)}
.cut figcaption{padding-top:1.1rem}
.cut h3{font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;margin-bottom:.5rem}
.cut p{font-size:.9rem;color:var(--tx-2);max-width:34ch}
.cut .gauge{
  display:block;font-family:var(--display);font-size:.74rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--accent,var(--flame));
  margin-bottom:.55rem;
}
@media (max-width:880px){.cuts{grid-template-columns:1fr 1fr;align-items:start}}
@media (max-width:520px){.cuts{grid-template-columns:1fr}}

/* ---- The seven spices, as specimens ---- */
.spec{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(.6rem,1.4vw,1.4rem)}
.spec li{text-align:center}
.spec .sh{
  aspect-ratio:1;display:grid;place-items:center;border-radius:var(--r-lg);
  background:var(--paper);padding:18%;box-shadow:0 20px 40px -28px rgba(0,0,0,.6);
  transition:background .4s var(--ease),transform .5s var(--ease);
}
.spec li:hover .sh{background:var(--panel-2);transform:translateY(-4px)}
/* min-height:0 or the image's own min-content height beats aspect-ratio and
   each tile ends up a different height, which staggers the whole caption row. */
.spec .sh img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
.spec .sh span{
  font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.4vw,2rem);
  color:var(--accent,var(--flame));letter-spacing:-.02em;
}
.spec b{display:block;margin-top:.7rem;font-family:var(--display);font-weight:600;
  font-size:.92rem;letter-spacing:-.01em;color:var(--hd)}
.spec small{display:block;font-size:.76rem;color:var(--tx-2);margin-top:.15rem}
@media (max-width:900px){.spec{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.spec{grid-template-columns:repeat(2,1fr)}}

/* ---- A full-bleed frame of the kitchen between two reads ---- */
.pband{position:relative;overflow:hidden;height:clamp(240px,34vw,460px);background:var(--bg-3)}
.pband img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}

/* ---- Where the process ends up: numbers, not adjectives ---- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,3rem)}
.fig dt{
  font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:700;
  letter-spacing:-.03em;line-height:1;color:var(--hd);
}
.fig dd{margin-top:.6rem;font-size:.88rem;color:var(--tx-2);max-width:26ch}
@media (max-width:760px){.figs{grid-template-columns:repeat(2,1fr);gap:2rem 1.4rem}}

/* ============================================================
   On the plate: one snack per slide, plated from above, what goes
   into it floating either side and its name set huge underneath.
   The section takes each slide's --d-bg / --d-ink, so the ground,
   the rules, the dots and the button all change colour together.
   ============================================================ */
.dish{
  --pl:min(36vw,60svh,560px);
  --iw:clamp(62px,7.6vw,128px);
  position:relative;isolation:isolate;overflow:hidden;
  min-height:max(640px,100svh);
  background:var(--d-bg);color:var(--d-ink);
  transition:background-color 1s cubic-bezier(.65,0,.35,1),color 1s cubic-bezier(.65,0,.35,1);
}
.dish :focus-visible{outline-color:currentColor}
.dish-glow{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 52% at 50% 44%,rgba(255,255,255,.62),rgba(255,255,255,.18) 55%,rgba(255,255,255,0) 78%);
}
.dish-rule{
  position:absolute;top:15%;bottom:24%;width:2px;border-radius:2px;
  background:currentColor;opacity:.5;pointer-events:none;
}
.dish-rule-l{left:calc(50% - var(--pl) / 2 - clamp(28px,4vw,72px))}
.dish-rule-r{right:calc(50% - var(--pl) / 2 - clamp(28px,4vw,72px))}

.dish-track{position:absolute;inset:0;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.dish-slide{position:absolute;inset:0;pointer-events:none}
.dish-slide:not(.is-on){visibility:hidden;opacity:0}
.dish-slide img{-webkit-user-drag:none}
/* Idle motion only runs on the plate in view. */
.dish-slide:not(.is-on) :is(.dish-plate,.dish-ing) img{animation-play-state:paused}
.dish-name,.dish-desc{will-change:transform,opacity}

.dish-plate{
  position:absolute;z-index:2;left:50%;top:44%;width:var(--pl);aspect-ratio:1;
  margin:calc(var(--pl) / -2) 0 0 calc(var(--pl) / -2);
  will-change:transform;
}
/* The shadow is a painted ellipse, not a filter: a drop-shadow on a plate
   that turns would be re-blurred on every frame. The wrapper only slides;
   the image inside it does the turning, so the shadow stays put under it. */
.dish-plate::before{
  content:"";position:absolute;z-index:-1;inset:8% 2% -4%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,8,4,.34),rgba(20,8,4,.14) 62%,rgba(20,8,4,0));
  pointer-events:none;
}
.dish-slide.is-on .dish-plate{pointer-events:auto;cursor:pointer}
.dish-plate img{position:relative;width:100%;height:100%;animation:dish-spin 120s linear infinite;will-change:transform}
@keyframes dish-spin{to{rotate:360deg}}

.dish-ing{position:absolute;z-index:3;width:var(--iw);will-change:transform}
.dish-ing img{
  width:100%;animation:dish-bob 5.5s ease-in-out infinite alternate;
  /* On the moving layer itself, so the blur is drawn once and then moved. */
  filter:drop-shadow(0 14px 14px rgba(20,8,4,.22));will-change:transform;
}
.dish-ing-1{left:17%;top:13%;--r:-14deg}
.dish-ing-2{left:12%;top:47%;--r:18deg;--iw:clamp(54px,6.4vw,108px)}
.dish-ing-3{right:15%;top:11%;--r:22deg}
.dish-ing-4{right:12%;top:49%;--r:-10deg;--iw:clamp(54px,6.6vw,112px)}
.dish-ing-2 img{animation-delay:-1.6s;animation-duration:6.2s}
.dish-ing-3 img{animation-delay:-3.1s;animation-duration:5s}
.dish-ing-4 img{animation-delay:-.8s;animation-duration:6.8s}
@keyframes dish-bob{
  from{transform:translateY(-9px) rotate(var(--r))}
  to{transform:translateY(9px) rotate(calc(var(--r) + 8deg))}
}

/* The name runs the width of the screen, sized off its own letter count. */
.dish-name{
  position:absolute;z-index:1;left:0;right:0;bottom:clamp(4.6rem,13svh,8.4rem);
  text-align:center;white-space:nowrap;
  /* Faded through the colour, not opacity, so the slide tween can own opacity. */
  color:color-mix(in srgb,var(--d-ink) 20%,transparent);
  font-size:min(10.5rem,calc(148vw / var(--len,12)));
  font-weight:700;text-transform:uppercase;line-height:.8;letter-spacing:-.03em;word-spacing:.08em;
}
.dish-desc{
  position:absolute;z-index:4;left:var(--gut);bottom:calc(clamp(1.8rem,5svh,3rem) + 4.4rem);
  max-width:32ch;font-size:.95rem;line-height:1.5;color:inherit;
}
.dish-foot{
  position:absolute;z-index:4;left:var(--gut);bottom:clamp(1.8rem,5svh,3rem);
  display:flex;align-items:center;gap:1.3rem;
}
.dish-price{display:flex;flex-direction:column;line-height:1}
.dish-price b{font-family:var(--display);font-size:clamp(1.7rem,2.4vw,2.2rem);font-weight:600;letter-spacing:-.02em}
.dish-price span{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-top:.35rem}
.dish-add{background:var(--d-ink);color:#fff;box-shadow:0 12px 28px rgba(20,8,4,.2)}
.dish-add:hover{box-shadow:0 18px 36px rgba(20,8,4,.28);transform:translateY(-2px)}

/* Autoplay is the fill in the active dot; when it finishes, the slide moves on. */
.dish-dots{
  position:absolute;z-index:5;right:var(--gut);top:44%;translate:0 -50%;
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
}
.dish-dot{display:grid;place-items:center;width:28px;height:24px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.dish-dot.is-on{height:52px}
.dish-dot i{
  position:relative;display:block;width:4px;height:8px;border-radius:4px;overflow:hidden;
  background:currentColor;opacity:.4;transition:height .5s var(--ease),opacity .3s var(--ease);
}
.dish-dot:hover i{opacity:.75}
.dish-dot.is-on i{height:42px;opacity:1;background:color-mix(in srgb,currentColor 28%,transparent)}
.dish-dot b{position:absolute;inset:0;background:currentColor;transform-origin:50% 0;transform:scaleY(0)}
.dish-dot.is-on b{animation:dish-fill 6s linear forwards}
.dish.is-held .dish-dot.is-on b{animation-play-state:paused}
.dish.no-auto .dish-dot.is-on b{animation:none;transform:none}
@keyframes dish-fill{to{transform:scaleY(1)}}

/* Scroll-driven: the scrubbed timeline owns which plate shows and the
   colour, so every slide stays rendered and the CSS colour fade is off. */
.dish.is-scroll{transition:none}
.dish.is-scroll .dish-slide:not(.is-on){visibility:visible;opacity:1}

/* Without GSAP (or with reduced motion) the slides simply cross-fade. */
.dish.is-fade .dish-slide{transition:opacity .6s var(--ease),visibility 0s linear .6s}
.dish.is-fade .dish-slide.is-on{transition:opacity .6s var(--ease),visibility 0s}

@media (max-width:760px){
  .dish{--pl:min(74vw,42svh);--iw:clamp(52px,15vw,86px);min-height:max(620px,100svh)}
  .dish-rule{display:none}
  .dish-plate{top:38%}
  .dish-ing-1{left:5%;top:9%}
  .dish-ing-2{left:4%;top:52%;--iw:clamp(46px,12vw,72px)}
  .dish-ing-3{right:5%;top:8%}
  .dish-ing-4{right:4%;top:53%;--iw:clamp(46px,12vw,72px)}
  .dish-name{bottom:10.6rem;font-size:calc(160vw / var(--len,12))}
  .dish-desc{bottom:5.6rem;right:var(--gut);max-width:none;font-size:.9rem}
  .dish-foot{left:var(--gut);right:var(--gut);bottom:1.5rem;justify-content:space-between}
  .dish-dots{top:1.2rem;right:50%;translate:50% 0;flex-direction:row}
  .dish-dot{width:22px;height:28px}
  .dish-dot.is-on{width:52px;height:28px}
  .dish-dot i{width:8px;height:4px}
  .dish-dot.is-on i{width:42px;height:4px}
  .dish-dot b{transform-origin:0 50%;transform:scaleX(0)}
  .dish-dot.is-on b{animation-name:dish-fill-x}
  @keyframes dish-fill-x{to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion:reduce){
  .dish-plate img,.dish-ing img{animation:none}
}

/* ---- Section heads that carry a lead: headline left, lead right, on one
        baseline, the way the range head sets its count. ---- */
.sec-split{
  display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
  gap:clamp(1rem,2vw,1.4rem) clamp(1.5rem,4vw,4rem);max-width:var(--shell);
}
.sec-split .lead{max-width:40ch}
.combos{overflow-x:clip;--hd:var(--saffron)}

/* ============================================================
   Product page
   Each pack's page wears its own stage colour (--t-bg / --t-ink, the same
   pair its card uses). The gallery leads; the buy panel sits beside it.
   ============================================================ */
.pdp{padding-top:calc(var(--nav-h) + clamp(1rem,2.4vw,2rem))}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.8rem;color:var(--tx-3);list-style:none;margin:0;padding:0}
.crumbs li + li::before{content:"/";margin-right:.4rem;opacity:.6}
.crumbs a{color:var(--tx-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--tx)}

.pdp-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(1.6rem,4.5vw,4.5rem);align-items:start;margin-top:clamp(1rem,2vw,1.6rem);
}
.pdp-gallery{position:sticky;top:calc(var(--nav-h) + 1rem);display:grid;gap:.8rem}
.pdp-stage{
  position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;isolation:isolate;
  border-radius:clamp(24px,2.6vw,36px);background:var(--t-bg);
  box-shadow:0 34px 70px -40px rgba(60,10,6,.55);
}
/* The rosette the cards and the carousel turn behind every pack. */
.pdp-stage::before{
  content:"";position:absolute;z-index:-1;left:50%;top:50%;width:120%;aspect-ratio:1;translate:-50% -50%;
  background:var(--t-ink);opacity:.1;
  -webkit-mask:var(--rosette) center/contain no-repeat;mask:var(--rosette) center/contain no-repeat;
  animation:pdp-turn 60s linear infinite;
}
@keyframes pdp-turn{to{rotate:360deg}}
.pdp-shot{
  width:72%;max-height:86%;object-fit:contain;
  filter:drop-shadow(0 26px 26px rgba(40,8,4,.32));
  transition:opacity .18s ease,transform .5s var(--ease);
}
.pdp-stage[data-kind="bowl"] .pdp-shot{width:84%}
.pdp-shot.is-swap{opacity:0;transform:scale(.96)}
.pdp-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.pdp-thumb{
  display:grid;grid-template-rows:auto auto;justify-items:center;gap:.35rem;
  padding:.55rem .4rem .5rem;border-radius:18px;cursor:pointer;
  background:var(--paper);border:1.5px solid transparent;
  font-size:.74rem;font-weight:700;color:var(--tx-2);
  transition:border-color .25s var(--ease),color .25s var(--ease),transform .3s var(--ease);
}
.pdp-thumb img{width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:12px;background:var(--t-bg);padding:6%}
.pdp-thumb:hover{transform:translateY(-2px);color:var(--tx)}
.pdp-thumb[aria-pressed="true"]{border-color:var(--t-ink);color:var(--t-ink)}

.pdp-info{padding-top:clamp(0rem,1vw,1rem)}
.pdp-tag{
  display:inline-block;font-size:.66rem;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.16em;
  color:var(--t-bg);background:var(--t-ink);padding:.45rem .75rem;border-radius:var(--r-pill);
}
.pdp-title{
  margin-top:.9rem;font-size:clamp(2.4rem,5.2vw,4.6rem);font-weight:700;line-height:.9;
  letter-spacing:-.04em;text-transform:uppercase;color:var(--hd);
}
.pdp-desc{margin-top:1rem;font-size:clamp(1.02rem,.6vw + .9rem,1.2rem);color:var(--tx-2);max-width:40ch;line-height:1.55}
.pdp-price{display:flex;align-items:baseline;gap:.6rem;margin-top:1.6rem;color:var(--tx-3);font-size:.9rem}
.pdp-price .price{font-size:clamp(1.9rem,3vw,2.4rem);font-weight:700;color:var(--tx)}

.pdp-buy{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.pdp-qty{
  display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:4px;background:var(--paper);
}
.pdp-qty button{
  width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:var(--tx);cursor:pointer;transition:background .25s var(--ease),opacity .25s;
}
.pdp-qty button:hover{background:var(--panel-2)}
.pdp-qty button:disabled{opacity:.35;cursor:default;background:transparent}
.pdp-qty button .ic{width:15px;height:15px}
.pdp-qty output{min-width:2.2rem;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.pdp-add{flex:1 1 12rem;justify-content:center;background:var(--t-ink);color:#fff;box-shadow:0 14px 30px -14px var(--t-ink)}
.pdp-add:hover{background:var(--t-ink);filter:brightness(1.15)}
.pdp-wa{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;
  font-size:.9rem;font-weight:700;color:var(--tx-2);
}
.pdp-wa .ic{width:1.1em;height:1.1em}
.pdp-wa .ic:first-child{color:var(--wa)}
.pdp-wa .ic:last-child{width:.9em;height:.9em;transition:transform .3s var(--ease)}
.pdp-wa:hover{color:var(--tx)}
.pdp-wa:hover .ic:last-child{transform:translate(2px,-2px)}

.pdp-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;list-style:none;padding:0;
  margin:1.8rem 0 0;
}
.pdp-facts li{
  display:grid;gap:.15rem;padding:.9rem 1rem;border-radius:18px;background:var(--paper);
  box-shadow:0 16px 34px -28px rgba(60,10,6,.5);
}
.pdp-facts .ic{width:18px;height:18px;color:var(--t-ink);margin-bottom:.35rem}
.pdp-facts span{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--tx-3)}
.pdp-facts strong{font-family:var(--display);font-size:1.05rem;font-weight:600;letter-spacing:-.01em}

.pdp-more{margin-top:1.8rem;border-top:1px solid var(--line)}
.pdp-more details{border-bottom:1px solid var(--line)}
.pdp-more summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none;
  padding:1.05rem 0;font-weight:700;font-size:.98rem;
}
.pdp-more summary::-webkit-details-marker{display:none}
.pdp-more summary::after{
  content:"";width:10px;height:10px;flex:none;margin-right:.3rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  rotate:45deg;translate:0 -3px;transition:rotate .3s var(--ease),translate .3s var(--ease);
}
.pdp-more details[open] summary::after{rotate:225deg;translate:0 2px}
.pdp-more summary:hover{color:var(--accent)}
.pdp-more p{padding-bottom:1.15rem;color:var(--tx-2);font-size:.95rem;line-height:1.62;max-width:56ch}
.pdp-more .pdp-ing{font-size:.88rem}

/* FAQ (process and contact pages): the product page's accordion, set beside
   its heading on wide screens. */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,5vw,5rem);align-items:start}
.faq-grid .sec-head{margin-bottom:0}
.faq.pdp-more{margin-top:0}
.cut h3 a:hover{color:var(--accent)}
.faq.pdp-more p{max-width:62ch}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}

.pdp-related{padding-top:clamp(2rem,4vw,3.5rem)}
.pdp-related-head{
  display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  margin-bottom:clamp(1.4rem,2.6vw,2.2rem);
}
.pdp-related-head .d2{font-size:clamp(1.9rem,3.6vw,3rem)}

@media (max-width:900px){
  .pdp-grid{grid-template-columns:1fr}
  .pdp-gallery{position:static}
  .pdp-stage{aspect-ratio:1/.9}
}
@media (max-width:520px){
  .pdp-facts{grid-template-columns:1fr 1fr 1fr;gap:.4rem}
  .pdp-facts li{padding:.75rem .7rem}
  .pdp-facts strong{font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
  .pdp-stage::before{animation:none}
}

/* ============================================================
   Partners: a short head with both actions, then the three steps as one
   connected journey. The first step is lit, because it is the only one
   the reader can do from this page.
   ============================================================ */
.ptr-head{
  display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
  gap:clamp(1.2rem,3vw,2.4rem) clamp(1.5rem,4vw,4rem);margin-bottom:clamp(1.8rem,3.6vw,3rem);
}
.ptr-title{
  margin-top:.8rem;font-size:clamp(2.2rem,4.4vw,3.8rem);font-weight:700;line-height:.92;
  letter-spacing:-.04em;text-transform:uppercase;color:var(--hd);
}
.ptr-head .lead{margin-top:1rem;max-width:44ch}
.ptr-cta{display:flex;flex-wrap:wrap;gap:.7rem}

.journey{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);counter-reset:none;
}
/* The thread that ties the three cards together, running behind them
   through the number badges. */
.journey::before{
  content:"";position:absolute;z-index:0;left:8%;right:8%;top:2.35rem;height:2px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 16px);
}
.jstep{
  position:relative;z-index:1;display:flex;flex-direction:column;
  padding:clamp(1.4rem,2.2vw,2rem);padding-top:0;border-radius:clamp(24px,2.4vw,32px);
  background:var(--paper);box-shadow:0 26px 54px -34px rgba(20,6,2,.5);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.jstep:hover{transform:translateY(-5px);box-shadow:0 34px 60px -32px rgba(20,6,2,.55)}
.jstep-n{
  align-self:flex-start;margin:1.4rem 0 1.1rem;
  font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,3.4vw,3rem);line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px var(--hd);opacity:.5;
}
.jstep .ic-lg{
  position:absolute;top:1.3rem;right:1.3rem;
  width:22px;height:22px;box-sizing:content-box;padding:12px;border-radius:50%;
  background:var(--bg-3);color:var(--hd);
}
.jstep h3{font-size:1.2rem;font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;margin-bottom:.6rem}
.jstep p{font-size:.92rem;color:var(--tx-2);line-height:1.55}
.jstep-link{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:1.1rem;
  font-size:.9rem;font-weight:700;color:var(--saffron);
}
.jstep-link .ic{width:1em;height:1em;transition:transform .3s var(--ease)}
.jstep-link:hover .ic{transform:translateX(4px)}
.jstep.is-first{
  background:var(--maroon);color:var(--cream);box-shadow:0 34px 70px -34px rgba(60,8,6,.6);
  --tx-2:rgba(253,246,234,.78);--hd:var(--saffron);
}
.jstep.is-first h3{color:var(--cream)}
.jstep.is-first .jstep-n{color:var(--saffron);-webkit-text-stroke:0;opacity:1}
.jstep.is-first .ic-lg{background:rgba(253,246,234,.1);color:var(--saffron)}

.perks{
  list-style:none;padding:0;margin:clamp(1.4rem,2.6vw,2rem) 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:clamp(20px,2vw,26px);background:var(--bg-2);overflow:hidden;
}
.perks li{display:flex;align-items:flex-start;gap:.8rem;padding:clamp(1rem,1.8vw,1.4rem)}
.perks li + li{border-left:1px solid var(--line)}
.perks .ic{width:20px;height:20px;flex:none;color:var(--accent);margin-top:.1rem}
.perks li:last-child .ic{color:var(--wa)}
.perks span{font-size:.84rem;color:var(--tx-2);line-height:1.45}
.perks strong{display:block;font-size:.92rem;color:var(--tx);margin-bottom:.15rem}

@media (max-width:980px){
  .perks{grid-template-columns:1fr 1fr}
  .perks li:nth-child(3){border-left:0}
  .perks li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .journey{grid-template-columns:1fr}
  .journey::before{left:2.6rem;right:auto;top:3rem;bottom:3rem;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,var(--line-2) 0 8px,transparent 8px 16px)}
  .ptr-cta .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:520px){
  .perks{grid-template-columns:1fr}
  .perks li + li{border-left:0;border-top:1px solid var(--line)}
}

/* ---- Combos: the home band shows three sets and hands off to combos.html ---- */
.combos-more{display:flex;justify-content:center;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.combos .btn-ghost{color:var(--cream)}
/* On combos.html the band opens the page, so it clears the fixed nav. */
.combos-top{padding-top:calc(var(--nav-h) + clamp(2.4rem,5vw,4rem))}