@charset "utf-8";
/* ===========================================================================
   Vedic Crunch — home page.

   A clean-room rebuild on the design system of the three sites the client
   finalised. Nothing here is borrowed from them except the system itself:
   the type scale, the colour logic, the grid, the spacing rhythm, the motion
   and the section architecture. Every word, figure and photograph on the page
   is Vedic Crunch's own.

   What was measured off the references, and is reproduced here exactly:

     · ONE geometric grotesk across the entire page, weights 400/500/700/800.
       LesserEvil runs Good Sans; Magic Spoon runs Mabry. Both are humanist
       geometric sans with a tall x-height and a friendly single-storey g.
       Figtree is the closest face on a host the page can actually reach.

     · The tracking rule, which is the signature and the thing that is wrong
       on almost every site that tries this look: display type is tracked
       NEGATIVE at -0.02em to -0.03em (80px/-2.4px, 56px/-1.68px, 48px/-0.96px
       on lesserevil.com), and small uppercase labels are tracked POSITIVE at
       +0.04em (16px/+0.64px, 14px/+0.56px). Nothing in between is tracked.

     · Display line-height 1.06-1.16, never looser. Body 1.6-1.7, never tighter.

     · The marigold-to-rose gradient, rgb(240,179,35) -> rgb(245,126,182),
       lifted as a ratio rather than as a file.

     · The hard-offset button: 2px ink border, 0 4px 0 ink shadow, full radius.

   The client's standing rules, which outrank the references wherever they
   disagree:

     · NO LINES ANYWHERE. Separation is air, a change of ground, a card edge,
       or the scalloped die-cut. There is not one border-bottom used as a rule
       in this file. Bombay Sweet Shop's outlined stat boxes were re-done as
       filled tiles for exactly this reason.
     · The hero ground is white and glowing. No smoke, no baking effect.
     · No background band behind the stockist logos, and the logos are big.
     · No underlines on headings.
     · Generous word-spacing in the hero.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root{
  /* ground */
  --white:#FFFFFF;
  --cream:#FBF6EE;          /* the page */
  --cream-2:#F3EADA;        /* recessed: carousel beds, tiles */
  --cream-3:#EADFC9;        /* pressed */
  --butter:#FDEFC4;         /* the one highlighted column */
  --orchid:#DEB3E6;         /* the story card */
  --sky:#C9E8F2;            /* the second accent ground */

  /* ink — a deep spruce, not an espresso brown.

     The ramp stops where it does because of the ground, not because of
     taste: on cream-2 anything lighter than about 70% ink over white falls
     under 4.5:1. -45 clears white and cream but NOT cream-2, so it is a
     white-ground tone and nothing else. Decoration that carries no text
     uses --ghost, where the contrast floor does not apply. */
  --ink:#0E2A2B;
  --ink-80:#44595A;       /* body secondary - 6.2:1 on cream-2    */
  --ink-62:#566A6B;       /* meta, labels   - 4.8:1 on cream-2    */
  --ink-45:#627575;       /* white grounds only - 4.9:1 on white  */
  --ghost:#B9C2C2;        /* non-text: dots, inactive marks       */

  /* the one accent, carried as a ratio */
  --sun:#F0B323;
  --rose:#F57EB6;
  --grad:linear-gradient(90deg,var(--sun) 0%,var(--rose) 100%);
  --grad-r:linear-gradient(90deg,var(--rose) 0%,var(--sun) 100%);

  /* the ten flavour grounds. Food colour, not brand colour — spread right
     round the wheel so a shelf of ten reads as ten and not as a palette. */
  --f-peri:#E8502E;  --f-salt:#8ECBE0;  --f-chaat:#F2A71B;  --f-ched:#FFC63F;
  --f-onion:#B9D49B; --f-tom:#DD4330;   --f-masala:#D98032; --f-ach:#D8C23F;
  --f-sp:#9FB0BC;    --f-date:#B5714A;

  /* measure */
  --wrap:1320px;
  --pad:clamp(20px,4.2vw,56px);
  --sp:clamp(68px,8.4vw,132px);      /* between sections */
  --sp-s:clamp(40px,5vw,72px);

  /* shape — ONE radius scale, used everywhere, no exceptions */
  --r:20px;
  --r-lg:32px;
  --r-xl:44px;
  --r-pill:999px;

  /* elevation — tinted to the ground, never pure black */
  --lift:0 18px 44px -26px rgba(14,42,43,.34);
  --lift-2:0 30px 70px -34px rgba(14,42,43,.42);
  --hard:0 4px 0 var(--ink);
  --hard-2:0 6px 0 var(--ink);

  --ease:cubic-bezier(.22,.68,.26,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* type */
  --sans:'Figtree','Hanken Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --t-d1:clamp(2.875rem,5.9vw,5.25rem);   /*  46 ->  84 */
  --t-d2:clamp(2.125rem,4.1vw,3.5rem);    /*  34 ->  56 */
  --t-d3:clamp(1.625rem,2.6vw,2.375rem);  /*  26 ->  38 */
  --t-h :clamp(1.1875rem,1.55vw,1.5rem);  /*  19 ->  24 */
  --t-lede:clamp(1.0625rem,1.32vw,1.375rem);
  --t-body:clamp(.9375rem,1.02vw,1.0625rem);
  --t-label:.78125rem;
}

/* ------------------------------------------------------------- the reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.7;
  letter-spacing:-.01em;
  overflow-x:hidden;            /* NOT clip — clip breaks position:sticky */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{display:block;max-width:100%;height:auto}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}

/* Headings carry no decoration, at any size, in any state. The client asked
   for this twice. It is enforced here rather than per-section so a new
   section cannot reintroduce it. */
h1,h2,h3,h4{
  margin:0;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.03em;
  text-wrap:balance;
  text-decoration:none;
}
h1 a,h2 a,h3 a,h4 a,
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover{text-decoration:none;color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}

:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:fixed;left:12px;top:-120px;z-index:999;
  padding:14px 22px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--cream);
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  font-size:var(--t-label);text-decoration:none;
  transition:top .22s var(--ease);
}
.skip:focus{top:12px}

.wrap{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;padding-inline:var(--pad);
}
.vh{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ------------------------------------------------- shared type utilities */
.d1{font-size:var(--t-d1);line-height:1.04;letter-spacing:-.034em}
.d2{font-size:var(--t-d2);line-height:1.08;letter-spacing:-.03em}
.d3{font-size:var(--t-d3);line-height:1.12;letter-spacing:-.026em}
.hh{font-size:var(--t-h);line-height:1.18;letter-spacing:-.022em}

/* Emphasis inside a headline is the SAME face, italic. A serif word dropped
   into a sans headline is the tell this page is trying hardest to avoid.
   leading is opened to 1.1 and a padding reserve added because Figtree's
   italic descenders (y g j p q) clip against a 1.04 line box. */
h1 i,h2 i,h3 i,.d1 i,.d2 i,.d3 i{
  font-style:italic;font-weight:800;
  line-height:1.12;padding-bottom:.04em;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

.lede{
  font-size:var(--t-lede);line-height:1.6;letter-spacing:-.015em;
  color:var(--ink-80);max-width:52ch;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:var(--t-label);font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-62);
}
.eyebrow::before{
  content:"";width:22px;height:22px;flex:none;
  background:var(--grad);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}

/* the four-point sparkle, used as a bullet and inside buttons */
.spark{
  width:1em;height:1em;flex:none;fill:currentColor;
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
  background:currentColor;
}

/* ------------------------------------------------------------- the pills */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1.05em 1.9em;
  border:2px solid var(--ink);border-radius:var(--r-pill);
  font-size:1rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  line-height:1;white-space:nowrap;text-decoration:none;
  box-shadow:var(--hard);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),
             background-color .2s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--hard-2)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}

.btn--grad{background:var(--grad);color:var(--ink)}
.btn--rose{background:var(--rose);color:var(--ink)}
.btn--ink {background:var(--ink);color:var(--cream);box-shadow:0 4px 0 rgba(14,42,43,.3)}
.btn--ink:hover{box-shadow:0 6px 0 rgba(14,42,43,.3)}
.btn--white{background:var(--white);color:var(--ink)}
.btn--sm{padding:.78em 1.35em;font-size:.8125rem}

/* The circular carousel arrow. Outline only — this is a control, not a rule,
   and a control is allowed its own edge. */
.rbtn{
  width:52px;height:52px;flex:none;
  display:grid;place-items:center;
  border:2px solid var(--ink);border-radius:50%;
  background:var(--white);color:var(--ink);
  transition:background-color .2s var(--ease),transform .2s var(--ease),
             opacity .2s var(--ease);
}
.rbtn:hover{background:var(--rose);transform:scale(1.06)}
.rbtn[disabled]{opacity:.28;pointer-events:none}
.rbtn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;
          stroke-linecap:round;stroke-linejoin:round;fill:none}

/* ------------------------------------------------------- the scrolled-in */
/* One mechanism for every reveal on the page. --d is the per-item stagger,
   the same convention the rest of the project uses. */
.rz{
  opacity:0;transform:translateY(20px);
  transition:opacity .72s var(--ease-out),transform .72s var(--ease-out);
  transition-delay:calc(var(--d,0) * 72ms);
}
.rz.in{opacity:1;transform:none}
html:not(.js) .rz{opacity:1;transform:none}
/* script off: the controls that switch things are withdrawn and
   everything they would have switched between is simply shown */
html:not(.js) .tabs{display:none}
html:not(.js) .pane{display:block}
html:not(.js) .rail__nav{display:none}
html:not(.js) .pnl__bar i{width:var(--pc,0%)}

@media (prefers-reduced-motion:reduce){
  .rz{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* =========================================================================
   1. THE ANNOUNCEMENT BAR
   ====================================================================== */
.bar{
  position:relative;z-index:60;
  background:var(--grad);color:var(--ink);
  font-size:.875rem;font-weight:500;line-height:1.3;
  letter-spacing:-.005em;
  text-align:center;
  padding:11px var(--pad);
}
.bar b{font-weight:800}
.bar a{font-weight:800;text-decoration:none;border-bottom:0}
.bar a:hover{text-decoration:underline}
.bar .arw{display:inline-block;transition:transform .2s var(--ease)}
.bar a:hover .arw{transform:translateX(4px)}

/* =========================================================================
   2. THE HEADER
   Cream, three columns, the brandmark centred on a shield that hangs below
   the header's own box. Sticky, and smaller once it sticks — the client
   asked for that specifically, "but more designed".

   The bottom edge is a scalloped die-cut, not a rule. It is the page's
   answer to "no lines anywhere": the separation is a shape.
   ====================================================================== */
.hdr{
  position:sticky;top:0;z-index:50;
  background:var(--cream);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.hdr__in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;
  height:84px;
  transition:height .32s var(--ease);
}
.hdr nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.hdr nav a{
  font-size:1rem;font-weight:500;letter-spacing:-.005em;
  text-decoration:none;padding:10px 2px;position:relative;
}
/* the hover mark is a soft gradient wash behind the word, not an underline */
.hdr nav a::after{
  content:"";position:absolute;inset:auto 0 6px;height:8px;border-radius:4px;
  background:var(--grad);opacity:0;transform:scaleX(.4);
  transform-origin:left;z-index:-1;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.hdr nav a:hover::after{opacity:.55;transform:none}
.hdr__r{display:flex;align-items:center;justify-content:flex-end;gap:12px}

/* the shield */
.mark{
  justify-self:center;position:relative;z-index:2;
  display:grid;place-items:center;
  width:clamp(104px,10vw,148px);
  padding:14px 16px 20px;
  /* white, not ink. The supplied mark is green-and-orange on transparent and
     the green loses too much against a deep teal shield. */
  background:var(--white);
  border-radius:12px 12px 46% 46%/12px 12px 30% 30%;
  box-shadow:var(--lift);
  transition:transform .32s var(--ease),padding .32s var(--ease);
  transform:translateY(14px);
}
.mark img{width:100%;height:auto}
.hdr nav a,.hdr__r{min-width:0}

/* scrolled */
.hdr.stuck{box-shadow:0 10px 30px -22px rgba(14,42,43,.5)}
.hdr.stuck .hdr__in{height:62px}
.hdr.stuck .mark{transform:translateY(8px) scale(.8);padding:12px 12px 16px}

/* the die-cut. A repeating radial along the bottom of the header, in the
   colour of whatever the header sits on. */
.hdr__edge{
  height:14px;
  background:
    radial-gradient(circle at 10px 0,var(--cream) 9px,transparent 9.5px) 0 0/20px 14px repeat-x;
  position:relative;z-index:1;
  pointer-events:none;
}

/* =========================================================================
   3. THE HERO
   White and glowing, as asked. The glow is two soft radial washes, one warm
   one rose, breathing very slowly. No smoke, no bake.
   ====================================================================== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--white);
  padding-block:clamp(26px,3.4vw,54px) clamp(40px,5vw,78px);
}
.hero__glow{
  position:absolute;inset:-18% -10% auto;height:132%;z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(58% 48% at 26% 30%,rgba(245,126,182,.30),transparent 68%),
    radial-gradient(52% 46% at 78% 22%,rgba(240,179,35,.30),transparent 66%),
    radial-gradient(70% 60% at 52% 96%,rgba(201,232,242,.44),transparent 70%);
  animation:breathe 15s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{transform:scale(1) translate3d(0,0,0);opacity:.92}
  50%    {transform:scale(1.07) translate3d(0,-1.4%,0);opacity:1}
}

.hero__in{
  display:grid;align-items:center;gap:clamp(22px,3vw,56px);
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
}
.hero__copy{max-width:min(100%,38rem)}
.hero h1{
  font-size:var(--t-d1);line-height:1.02;letter-spacing:-.036em;
  /* the client asked for air between the words in the hero specifically */
  word-spacing:.08em;
  margin:.26em 0 0;
  max-width:14ch;
}
.hero__sub{
  margin-top:clamp(16px,1.7vw,26px);
  font-size:clamp(1.0625rem,1.42vw,1.5rem);
  line-height:1.52;letter-spacing:-.016em;word-spacing:.05em;
  color:var(--ink-80);max-width:30ch;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(22px,2.4vw,38px)}

/* the three facts under the buttons — a ground change, never a rule */
.hero__facts{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:clamp(22px,2.4vw,36px);
}
.hero__facts li{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.56em 1em;border-radius:var(--r-pill);
  background:var(--cream);
  font-size:.8125rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase;
  color:var(--ink-80);
}
.hero__facts .spark{width:.72em;height:.72em;background:var(--rose)}

/* the pack composition */
.hero__art{position:relative;min-height:clamp(320px,38vw,560px)}
/* child combinator, or these also claim the four .hero__bits photos */
.hero__art > img{
  position:absolute;
  filter:drop-shadow(0 34px 42px rgba(14,42,43,.22));
  animation:bob 7s ease-in-out infinite;
}
.hero__art > img:nth-child(1){
  width:52%;left:24%;top:2%;z-index:3;animation-delay:-.2s;
}
.hero__art > img:nth-child(2){
  width:41%;left:0;top:30%;z-index:2;rotate:-8deg;animation-delay:-2.4s;
}
.hero__art > img:nth-child(3){
  width:41%;right:0;top:34%;z-index:2;rotate:8deg;animation-delay:-4.1s;
}
@keyframes bob{
  0%,100%{translate:0 0}
  50%    {translate:0 -14px}
}
/* loose pieces scattered round the packs */
.hero__bits{position:absolute;inset:0;pointer-events:none;z-index:4}
.hero__bits img{
  position:absolute;width:var(--w,74px);
  /* these are 170px photographs with their own grounds, not cut-outs, so
     they get masked into chips instead of sitting on the gradient as
     rectangles; aspect-ratio keeps the two non-square files round */
  aspect-ratio:1;object-fit:cover;border-radius:50%;
  box-shadow:0 0 0 4px var(--cream),0 10px 18px rgba(14,42,43,.22);
  animation:bob 9s ease-in-out infinite;
}
.hero__bits img:nth-child(2){animation-delay:-3.4s}

/* =========================================================================
   4. THE VALUE MARQUEE
   The reference runs this on white with a hairline under it. Ours runs on
   the ink, which separates it from the hero above and the cream below
   without drawing anything.
   ====================================================================== */
.mq{
  background:var(--ink);color:var(--cream);
  padding-block:clamp(14px,1.5vw,20px);
  overflow:hidden;position:relative;
}
.mq__t{display:flex;width:max-content;animation:slide 38s linear infinite}
.mq:hover .mq__t{animation-play-state:paused}
.mq ul{display:flex;align-items:center}
.mq li{
  display:inline-flex;align-items:center;gap:clamp(16px,2vw,34px);
  padding-inline:clamp(16px,2vw,34px);
  font-size:clamp(.875rem,1.08vw,1.125rem);
  font-weight:800;letter-spacing:.042em;text-transform:uppercase;
  white-space:nowrap;
}
.mq li img{
  width:clamp(30px,2.8vw,42px);height:clamp(30px,2.8vw,42px);
  border-radius:50%;object-fit:cover;flex:none;
}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* =========================================================================
   5. CATEGORY CIRCLES
   ====================================================================== */
.cats{padding-block:clamp(36px,4.4vw,64px)}
.cats ul{
  display:grid;gap:clamp(14px,2vw,30px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.cats a{
  display:grid;justify-items:center;gap:14px;text-decoration:none;
}
.cats .dsk{
  width:100%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;position:relative;
  background:var(--c,var(--cream-2));
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.cats a:hover .dsk{transform:translateY(-6px) scale(1.03);box-shadow:var(--lift-2)}
.cats .dsk img{
  /* abspos, or the 74% height does not resolve - see the note at .pcard__ph */
  position:absolute;left:13%;top:13%;width:74%;height:74%;object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(14,42,43,.26));
  transition:transform .4s var(--ease);
}
.cats a:hover .dsk img{transform:scale(1.08) rotate(-4deg)}
.cats b{
  font-size:clamp(.9375rem,1.12vw,1.125rem);font-weight:800;
  letter-spacing:-.018em;text-align:center;
}
.cats .n{
  display:block;font-size:.78125rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-62);margin-top:2px;
}

/* =========================================================================
   6. THE SHELF — headline column + card carousel
   ====================================================================== */
.shelf{
  background:var(--cream-2);
  padding-block:var(--sp);
  border-radius:var(--r-xl);
  margin-inline:clamp(0px,1.6vw,22px);
}
.shelf__in{
  display:grid;gap:clamp(26px,3.4vw,60px);
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:start;
}
.shelf__copy{position:sticky;top:120px}
.shelf h2{margin-top:.4em}
.shelf .lede{margin-top:1em}
.shelf__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:2em}

.rail{position:relative;min-width:0}
.rail__t{
  display:flex;gap:clamp(14px,1.6vw,22px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 22px;margin:-4px -4px -22px;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth;
}
.rail__t::-webkit-scrollbar{display:none}
.rail__nav{display:flex;gap:10px;margin-top:22px}

.pcard{
  flex:0 0 clamp(228px,24vw,300px);scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:var(--white);border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--lift);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  text-decoration:none;
}
.pcard:hover{transform:translateY(-7px);box-shadow:var(--lift-2)}
.pcard__ph{
  aspect-ratio:1/.94;position:relative;display:grid;place-items:center;
  background:var(--c,var(--cream-2));overflow:hidden;
}
.pcard__ph img{
  /* a percentage height on a grid item does not resolve against the parent's
     aspect-ratio height; out of flow it resolves against the containing block.
     Placed with left/top, not transform, because :hover claims transform. */
  position:absolute;left:9%;top:9%;width:82%;height:82%;object-fit:contain;
  filter:drop-shadow(0 18px 20px rgba(14,42,43,.28));
  transition:transform .42s var(--ease);
}
.pcard:hover .pcard__ph img{transform:scale(1.07) rotate(-3deg)}
.pcard__tag{
  position:absolute;top:12px;left:12px;
  padding:.42em .82em;border-radius:var(--r-pill);
  background:var(--white);
  font-size:.6875rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase;
}
.pcard__b{padding:clamp(16px,1.5vw,22px);display:flex;flex-direction:column;gap:7px;flex:1}
.pcard h3{font-size:clamp(1.0625rem,1.28vw,1.25rem);letter-spacing:-.024em}
.pcard p{font-size:.875rem;line-height:1.55;color:var(--ink-62)}
.pcard__f{
  display:flex;align-items:baseline;gap:.55em;margin-top:auto;padding-top:12px;
}
.pcard__p{font-size:1.125rem;font-weight:800;letter-spacing:-.02em;
          font-variant-numeric:tabular-nums}
.pcard__g{font-size:.8125rem;font-weight:700;color:var(--ink-45);
          letter-spacing:.04em;text-transform:uppercase}

/* =========================================================================
   7. WHY — pill tabs + benefit cards
   ====================================================================== */
.why{padding-block:var(--sp)}
.why__h{display:grid;justify-items:center;text-align:center;gap:14px}
.tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:clamp(22px,2.6vw,38px);
}
.tab{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.78em 1.4em;border-radius:var(--r-pill);
  background:var(--cream-2);color:var(--ink-80);
  font-size:.875rem;font-weight:800;letter-spacing:.045em;text-transform:uppercase;
  transition:background-color .24s var(--ease),color .24s var(--ease),
             transform .2s var(--ease);
}
.tab:hover{transform:translateY(-2px);background:var(--cream-3)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--cream)}
.tab[aria-selected="true"] .dot{background:var(--rose)}
.tab .dot{width:.55em;height:.55em;border-radius:50%;background:var(--c,var(--ghost));
          transition:background-color .24s var(--ease)}

.pane{display:none}
.pane.on{display:block;animation:fadeup .5s var(--ease-out) both}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.why__grid{
  display:grid;gap:clamp(18px,2.2vw,34px);
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:center;
  margin-top:clamp(26px,3vw,48px);
}
/* the scalloped die-cut frame round the photograph */
.scallop{
  position:relative;aspect-ratio:1/.84;overflow:hidden;
  background:var(--c,var(--cream-2));
  border-radius:var(--r-lg);
  display:grid;place-items:center;
  -webkit-mask:
    radial-gradient(circle at 14px 14px,#000 13px,transparent 13.5px) -14px -14px/28px 28px,
    linear-gradient(#000,#000) 14px 14px/calc(100% - 28px) calc(100% - 28px) no-repeat;
  mask:
    radial-gradient(circle at 14px 14px,#000 13px,transparent 13.5px) -14px -14px/28px 28px,
    linear-gradient(#000,#000) 14px 14px/calc(100% - 28px) calc(100% - 28px) no-repeat;
}
.scallop img:not(.bit){
  /* percentages, not height:70% on a grid item - see the note above */
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76%;height:82%;object-fit:contain;
  filter:drop-shadow(0 26px 30px rgba(14,42,43,.3));
  animation:bob 8s ease-in-out infinite;
}
.scallop .bit{
  position:absolute;width:var(--w,58px);height:auto;
  border-radius:50%;object-fit:cover;
  filter:drop-shadow(0 10px 12px rgba(14,42,43,.22));
  animation:bob 10s ease-in-out infinite;
}

.bens{display:grid;gap:clamp(12px,1.3vw,18px)}
.ben{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,1.4vw,20px);align-items:center;
  padding:clamp(16px,1.7vw,24px);
  border-radius:var(--r);
  background:var(--cream-2);
  transition:background-color .26s var(--ease),transform .26s var(--ease);
}
.ben:hover{background:var(--white);transform:translateX(5px)}
.ben__n{
  width:clamp(62px,6vw,82px);height:clamp(62px,6vw,82px);flex:none;
  display:grid;place-items:center;border-radius:50%;
  background:var(--white);
  font-size:clamp(.9375rem,1.22vw,1.1875rem);font-weight:800;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  text-align:center;line-height:1;
  box-shadow:var(--lift);
}
.ben h3{font-size:clamp(1rem,1.2vw,1.1875rem);letter-spacing:-.022em}
.ben p{font-size:.9375rem;line-height:1.55;color:var(--ink-62);margin-top:3px}

/* =========================================================================
   8. HOW WE CRUNCH UP — the comparison
   No competitor is named and no competitor figure is quoted. The right-hand
   column says what a generic fried extruded snack is, which is a category
   fact, not a claim about a company.
   ====================================================================== */
.cmp{padding-block:var(--sp)}
.cmp__h{display:grid;justify-items:center;text-align:center;gap:14px}
.cmp__t{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  max-width:980px;margin:clamp(28px,3.4vw,52px) auto 0;
  gap:0 clamp(6px,1vw,14px);
  align-items:stretch;
}
.cmp__t > *{min-width:0}
.cmp__hd{
  display:grid;place-items:center;gap:8px;text-align:center;
  padding:clamp(16px,1.8vw,26px) 10px;
}
.cmp__hd img{width:clamp(62px,7vw,96px);height:auto}
/* the right-hand column heads a category, not a product, so there is no
   pack shot to put here - a neutral puck holds the same box instead */
.cmp__hd .gl{
  width:clamp(52px,5.8vw,78px);aspect-ratio:1;border-radius:50%;
  background:var(--cream-3);display:grid;place-items:center;
}
.cmp__hd .gl svg{width:46%;height:46%;stroke:var(--ink-62);stroke-width:1.7;fill:none}
.cmp__hd span{
  font-size:.78125rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase;
  color:var(--ink-62);
}
/* the highlighted middle column: one continuous butter card behind rows 1..n,
   drawn by the cell itself rather than by a wrapper, so the grid stays flat */
.cmp__t .mid{background:var(--butter)}
.cmp__t .mid--t{border-radius:var(--r-lg) var(--r-lg) 0 0}
.cmp__t .mid--b{border-radius:0 0 var(--r-lg) var(--r-lg)}

.cmp__lb{
  display:flex;align-items:center;
  padding:clamp(14px,1.5vw,20px) clamp(10px,1.4vw,20px);
  font-size:clamp(.9375rem,1.1vw,1.0625rem);font-weight:800;letter-spacing:-.02em;
}
/* zebra by ground, which is how a table separates rows without a rule */
.cmp__t .z{background:var(--cream-2)}
.cmp__lb.z{border-radius:var(--r) 0 0 var(--r)}
.cmp__cell{
  display:grid;place-items:center;
  padding:clamp(14px,1.5vw,20px) 8px;
  font-size:.875rem;font-weight:700;line-height:1.35;text-align:center;
  color:var(--ink-62);
}
.cmp__cell.z{border-radius:0 var(--r) var(--r) 0}
/* ink-62 is right on cream and too light on butter, and butter is the
   column the eye is being sent to */
.cmp__cell.mid{color:var(--ink)}
.tick,.cross{
  width:clamp(26px,2.6vw,34px);height:clamp(26px,2.6vw,34px);
  display:grid;place-items:center;border-radius:50%;
}
.tick{background:var(--ink);color:var(--butter)}
.cross{background:var(--cream-3);color:var(--ink-62)}
.tick svg,.cross svg{
  width:54%;height:54%;fill:none;stroke:currentColor;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
}
.cmp__ft{
  margin:clamp(18px,2vw,28px) auto 0;max-width:62ch;text-align:center;
  font-size:.875rem;line-height:1.6;color:var(--ink-62);
}

/* =========================================================================
   9. THE PRINTED PANEL
   ====================================================================== */
.pnl{
  background:var(--ink);color:var(--cream);
  padding-block:var(--sp);
  border-radius:var(--r-xl);
  margin-inline:clamp(0px,1.6vw,22px);
}
.pnl .eyebrow{color:rgba(251,246,238,.62)}
.pnl .eyebrow::before{background:var(--sun)}
.pnl .lede{color:rgba(251,246,238,.74)}
.pnl__h{display:grid;gap:14px;max-width:46ch}
.pnl__g{
  display:grid;gap:clamp(16px,2vw,28px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(28px,3.4vw,50px);
}
.pnl__c{
  background:rgba(251,246,238,.055);
  border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,34px);
  display:grid;gap:16px;align-content:start;
}
.pnl__c h3{font-size:clamp(1.1875rem,1.5vw,1.5rem);letter-spacing:-.026em}
.pnl__c .ing{font-size:.9375rem;line-height:1.6;color:rgba(251,246,238,.7)}
.pnl__kcal{
  display:flex;align-items:baseline;gap:.5em;
  font-family:var(--mono);font-size:clamp(1.5rem,2.3vw,2.125rem);font-weight:500;
  letter-spacing:-.02em;color:var(--sun);
}
.pnl__kcal em{font-style:normal;font-family:var(--sans);font-size:.75rem;
              font-weight:800;letter-spacing:.09em;text-transform:uppercase;
              color:rgba(251,246,238,.55)}
.pnl__rows{display:grid;gap:3px}
.pnl__r{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:14px;
  padding:.62em .9em;border-radius:10px;
  background:rgba(251,246,238,.05);
  font-size:.875rem;
}
.pnl__r:nth-child(odd){background:rgba(251,246,238,.085)}
.pnl__r b{font-weight:500;color:rgba(251,246,238,.82)}
.pnl__v{
  font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;white-space:nowrap;
}
.pnl__v em{font-style:normal;font-size:.75em;opacity:.6;margin-left:.22em}
/* the fill bar lives inside the row's own ground — a bar, not a rule */
.pnl__bar{
  grid-column:1/-1;height:4px;border-radius:2px;
  background:rgba(251,246,238,.12);overflow:hidden;
}
.pnl__bar i{
  display:block;height:100%;border-radius:2px;background:var(--grad);
  width:0;transition:width 1.1s var(--ease-out);
  transition-delay:calc(var(--d,0) * 60ms);
}
.in .pnl__bar i{width:var(--pc,0%)}

/* =========================================================================
   10. OUR STORY — the split card
   ====================================================================== */
.story{padding-block:var(--sp)}
.story__c{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  border-radius:var(--r-xl);overflow:hidden;
  background:var(--orchid);
}
.story__l{
  padding:clamp(28px,4vw,72px);
  display:grid;align-content:center;gap:clamp(14px,1.6vw,24px);
}
.story__l h2{font-size:var(--t-d2);letter-spacing:-.032em;text-transform:uppercase}
.story__l p{font-size:var(--t-body);line-height:1.62;color:var(--ink);max-width:44ch}
.story__pts{display:grid;gap:11px}
.story__pts li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8em;
  align-items:start;font-size:var(--t-body);line-height:1.5;font-weight:500;
}
.story__pts .spark{margin-top:.34em;width:.82em;height:.82em;background:var(--ink)}
.story__r{
  position:relative;min-height:clamp(280px,32vw,460px);
  display:grid;place-items:center;overflow:hidden;
  background:var(--sky);
}
.story__r > img:first-child{
  width:62%;height:auto;z-index:2;
  filter:drop-shadow(0 32px 38px rgba(14,42,43,.3));
  animation:bob 9s ease-in-out infinite;
}
.story__r .bit{
  position:absolute;width:var(--w,66px);border-radius:50%;
  filter:drop-shadow(0 12px 14px rgba(14,42,43,.22));
  animation:bob 11s ease-in-out infinite;
}

/* =========================================================================
   11. STATS
   Bombay Sweet Shop draws these as thin outlined boxes. The house rule
   forbids that, so the separation is a filled tile and a gap instead.
   ====================================================================== */
.stats{padding-bottom:var(--sp)}
.stats ul{
  display:grid;gap:clamp(10px,1.3vw,18px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.stats li{
  display:grid;gap:4px;align-content:center;
  padding:clamp(22px,2.6vw,38px) clamp(16px,1.8vw,26px);
  border-radius:var(--r-lg);
  background:var(--cream-2);
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.stats li:hover{background:var(--butter);transform:translateY(-5px)}
.stats b{
  font-size:clamp(1.75rem,3.4vw,3rem);font-weight:800;letter-spacing:-.036em;
  line-height:1;font-variant-numeric:tabular-nums;
}
.stats span{
  font-size:.8125rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase;
  color:var(--ink-62);
}
.stats em{
  font-style:normal;display:block;font-size:.875rem;font-weight:400;
  letter-spacing:-.01em;color:var(--ink-62);text-transform:none;line-height:1.5;
  margin-top:6px;
}

/* =========================================================================
   12. STRAIGHT OFF THE LABEL
   The slot the references fill with customer reviews. We do not have reviews
   we can show, and inventing them is not on the table, so the same card
   figure carries three lines that are literally printed on three packs,
   with the pack's own back photograph as the picture.
   ====================================================================== */
.lbl{padding-bottom:var(--sp)}
.lbl__h{display:grid;justify-items:center;text-align:center;gap:14px}
.lbl__g{
  display:grid;gap:clamp(16px,2vw,28px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(26px,3vw,46px);
}
.lbl__c{
  display:grid;gap:16px;align-content:start;
  padding:clamp(18px,2vw,28px);
  border-radius:var(--r-lg);background:var(--cream-2);
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.lbl__c:hover{background:var(--white);transform:translateY(-5px);box-shadow:var(--lift)}
.lbl__ph{
  position:relative;
  aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;
  display:grid;place-items:center;background:var(--c,var(--cream-3));
}
/* same percentage-height trap as .pcard__ph */
.lbl__ph img{position:absolute;left:14%;top:8%;
             width:72%;height:84%;object-fit:contain;
             filter:drop-shadow(0 16px 18px rgba(14,42,43,.26))}
.lbl__c q{
  display:block;font-size:clamp(1.0625rem,1.28vw,1.25rem);font-weight:800;
  letter-spacing:-.024em;line-height:1.28;quotes:none;
}
.lbl__c p{font-size:.9375rem;line-height:1.58;color:var(--ink-62)}
.lbl__c cite{
  font-style:normal;font-size:.75rem;font-weight:800;letter-spacing:.075em;
  text-transform:uppercase;color:var(--ink-62);
}

/* =========================================================================
   13. WHERE YOU ALREADY SHOP
   No band behind the logos, and the logos are big. Both asked for directly.
   ====================================================================== */
.shops{padding-bottom:var(--sp);text-align:center}
.shops .eyebrow{justify-content:center}
.shops h2{margin-top:12px}
.shops__r{
  margin-top:clamp(24px,3vw,44px);overflow:hidden;position:relative;
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.shops__t{display:flex;width:max-content;animation:slide 30s linear infinite}
.shops:hover .shops__t{animation-play-state:paused}
.shops ul{display:flex;align-items:center}
.shops li{
  display:grid;place-items:center;gap:8px;
  padding-inline:clamp(26px,4vw,64px);
}
.shops img{
  height:clamp(48px,5.4vw,78px);width:auto;max-width:none;
  object-fit:contain;
}
.shops .nm{
  font-size:clamp(1.125rem,1.8vw,1.625rem);font-weight:800;letter-spacing:-.028em;
  white-space:nowrap;
}
.shops .sp{
  font-size:.75rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase;
  color:var(--ink-62);
}

/* =========================================================================
   14. THE JOURNAL
   ====================================================================== */
.jr{padding-bottom:var(--sp)}
.jr__h{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
       gap:18px}
.jr__g{
  display:grid;gap:clamp(16px,2vw,28px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(24px,2.8vw,42px);
}
.jr__c{
  display:grid;gap:0;align-content:start;text-decoration:none;
  border-radius:var(--r-lg);overflow:hidden;background:var(--cream-2);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.jr__c:hover{transform:translateY(-6px);box-shadow:var(--lift-2)}
.jr__ph{
  aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;
  background:var(--c,var(--cream-3));
}
.jr__ph img{width:58%;height:58%;object-fit:contain;
            filter:drop-shadow(0 18px 20px rgba(14,42,43,.26));
            transition:transform .42s var(--ease)}
.jr__c:hover .jr__ph img{transform:scale(1.1) rotate(-5deg)}
.jr__b{padding:clamp(16px,1.8vw,24px);display:grid;gap:9px}
.jr__k{font-size:.6875rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
       color:var(--ink-62)}
.jr__c h3{font-size:clamp(1.0625rem,1.26vw,1.25rem);letter-spacing:-.024em}
.jr__c p{font-size:.9375rem;line-height:1.56;color:var(--ink-62)}
.jr__m{
  display:inline-flex;align-items:center;gap:.45em;margin-top:4px;
  font-size:.78125rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
}
.jr__m .arw{transition:transform .22s var(--ease)}
.jr__c:hover .jr__m .arw{transform:translateX(5px)}

/* =========================================================================
   15. THE ANSWERS
   ====================================================================== */
.ask{padding-bottom:var(--sp)}
.ask__in{
  display:grid;gap:clamp(22px,3vw,54px);
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  align-items:start;
}
.ask__h{position:sticky;top:120px;display:grid;gap:14px}
.ask__l{display:grid;gap:9px}
.ask__i{
  border-radius:var(--r);background:var(--cream-2);
  transition:background-color .3s var(--ease);
}
.ask__i:hover{background:var(--cream-3)}
.ask__i[open]{background:var(--white);box-shadow:var(--lift)}
.ask__i summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:18px;align-items:center;
  padding:clamp(16px,1.6vw,22px) clamp(16px,1.8vw,26px);
  font-size:clamp(1rem,1.18vw,1.1875rem);font-weight:800;letter-spacing:-.022em;
}
.ask__i summary::-webkit-details-marker{display:none}
.ask__i .pm{
  width:30px;height:30px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--ink);color:var(--cream);
  transition:transform .3s var(--ease),background-color .3s var(--ease);
}
.ask__i[open] .pm{transform:rotate(45deg);background:var(--rose);color:var(--ink)}
.ask__i .pm svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.6;
                stroke-linecap:round;fill:none}
.ask__bd{
  padding:0 clamp(16px,1.8vw,26px) clamp(18px,1.8vw,26px);
  font-size:var(--t-body);line-height:1.68;color:var(--ink-80);max-width:70ch;
}
.ask__bd a{font-weight:700;color:var(--ink)}

/* =========================================================================
   16. THE CLOSING BAND
   ====================================================================== */
.end{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--grad);color:var(--ink);
  padding-block:clamp(56px,7vw,104px);
  border-radius:var(--r-xl);
  margin:0 clamp(0px,1.6vw,22px) clamp(40px,5vw,72px);
}
.end__in{
  display:grid;justify-items:center;text-align:center;gap:clamp(14px,1.6vw,24px);
}
.end h2{font-size:var(--t-d1);letter-spacing:-.036em;max-width:16ch;line-height:1.02}
/* the band IS the gradient, so the emphasis cannot also be the gradient -
   it disappears. Italic alone carries it here, and ink-62 is only 3.0:1
   on marigold, so the eyebrow goes to full ink as well. */
.end h2 i{background:none;-webkit-background-clip:border-box;
          background-clip:border-box;color:inherit}
.end .eyebrow{color:var(--ink)}
.end .eyebrow::before{background:var(--ink)}
.end p{font-size:var(--t-lede);line-height:1.55;max-width:46ch;font-weight:500}
.end__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:8px}

/* the rotating seal */
.seal{
  position:absolute;right:clamp(14px,4vw,72px);top:50%;translate:0 -50%;
  width:clamp(104px,11vw,164px);aspect-ratio:1;z-index:-1;opacity:.9;
  pointer-events:none;
}
.seal svg{width:100%;height:100%;animation:spin 26s linear infinite}
.seal text{
  font-family:var(--sans);font-size:9.1px;font-weight:800;
  /* 54 chars have to close a 339px circle without lapping; see home.js */
  letter-spacing:.153em;text-transform:uppercase;fill:var(--ink);
}
@keyframes spin{to{rotate:360deg}}
@media (max-width:1100px){.seal{display:none}}

/* =========================================================================
   17. THE FOOT
   ====================================================================== */
.foot{
  background:var(--ink);color:var(--cream);
  padding-block:clamp(44px,5.4vw,80px) clamp(28px,3vw,44px);
}
.foot__t{
  display:grid;gap:clamp(26px,3.2vw,56px);
  grid-template-columns:minmax(0,1.1fr) minmax(0,2.4fr);
}
.foot__b{display:grid;gap:16px;align-content:start;max-width:36ch}
/* the mark is green-and-orange on transparent, so on the ink ground it gets
   its own small cream plate rather than being left to sink into the dark */
.foot__b .plate{
  justify-self:start;background:var(--cream);
  padding:12px 16px;border-radius:14px;line-height:0;
}
.foot__b .plate img{width:clamp(104px,9vw,132px);height:auto}
.foot__b p{font-size:.9375rem;line-height:1.62;color:rgba(251,246,238,.62)}
.foot__cols{
  display:grid;gap:clamp(18px,2.4vw,36px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.foot h4{
  font-size:.78125rem;font-weight:800;letter-spacing:.095em;text-transform:uppercase;
  color:rgba(251,246,238,.6);margin-bottom:14px;
}
.foot li+li{margin-top:9px}
.foot__cols a{
  font-size:.9375rem;color:rgba(251,246,238,.84);text-decoration:none;
  transition:color .2s var(--ease);
}
.foot__cols a:hover{color:var(--sun)}
.foot__f{
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  align-items:center;
  margin-top:clamp(34px,4vw,62px);
  padding-top:clamp(22px,2.4vw,34px);
  font-size:.8125rem;color:rgba(251,246,238,.58);
}
/* the only "rule" on the page is this one, and it is not a rule — it is the
   same scalloped die-cut, run in the footer's own ink over its own ground */
.foot__f{
  background:
    radial-gradient(circle at 10px 0,rgba(251,246,238,.16) 3px,transparent 3.5px)
    0 0/20px 20px repeat-x;
}

/* =========================================================================
   THE MOBILE BAR
   Sticky, small, and designed: a floating capsule rather than a slab.
   ====================================================================== */
.mbar{
  position:fixed;left:50%;translate:-50% 0;
  bottom:max(12px,env(safe-area-inset-bottom));
  z-index:70;display:none;
  width:min(calc(100% - 24px),430px);
  padding:7px;border-radius:var(--r-pill);
  background:rgba(14,42,43,.93);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 18px 40px -16px rgba(14,42,43,.6);
  transition:transform .34s var(--ease),opacity .34s var(--ease);
}
.mbar ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center}
.mbar a{
  display:grid;justify-items:center;gap:3px;
  padding:9px 4px;border-radius:var(--r-pill);text-decoration:none;
  color:rgba(251,246,238,.78);
  font-size:.625rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.mbar a svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
            stroke-linecap:round;stroke-linejoin:round}
.mbar a.k{background:var(--grad);color:var(--ink)}
/* translate: already holds the centring, so only the Y goes here */
.mbar.down{transform:translateY(160%);opacity:0;pointer-events:none}

/* =========================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width:1080px){
  .shelf__in{grid-template-columns:1fr}
  .shelf__copy{position:static}
  .why__grid{grid-template-columns:1fr}
  .ask__in{grid-template-columns:1fr}
  .ask__h{position:static}
  .story__c{grid-template-columns:1fr}
  .story__r{min-height:300px;order:-1}
  .foot__t{grid-template-columns:1fr}
}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:10px}
  .hero__copy{max-width:none}
  .hero h1{max-width:18ch}
  .hero__sub{max-width:44ch}
  /* Stacked, the art sits above the copy and every jar in it is absolute,
     so the box carries no height of its own and a width-driven jar spills
     straight down onto the headline. Below 900 the jars are sized off the
     box HEIGHT instead - a percentage on an absolutely positioned child
     resolves against its containing block - so min-height now governs the
     whole composition and nothing can escape it. */
  .hero__art{
    min-height:clamp(240px,42vw,330px);order:-1;
    width:min(100%,460px);margin-inline:auto;
  }
  /* left:0 + right:0 + margin:auto centres a replaced box without touching
     transform or translate, and @keyframes bob already owns translate */
  .hero__art > img:nth-child(1){
    /* 5%, not 0: bob lifts this one 14px and the lid met the section edge */
    width:auto;height:70%;top:5%;left:0;right:0;margin-inline:auto;
  }
  .hero__art > img:nth-child(2){width:auto;height:76%;top:22%;left:6%;right:auto}
  .hero__art > img:nth-child(3){width:auto;height:77%;top:23%;right:6%;left:auto}
  /* the loose pieces are placed off the box edges, which just moved in */
  .hero__bits img{width:clamp(54px,7.4vw,74px)}
  .lbl__g,.jr__g{grid-template-columns:1fr}
  .stats ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cats ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .cats b{font-size:.875rem}
}

@media (max-width:760px){
  .hdr nav{display:none}
  /* the nav leaves the grid entirely here, so the two survivors are placed
     by hand - sparse auto-placement would drop .hdr__r into column one and
     take the mark off centre */
  .hdr__in{height:66px}
  .mark{grid-column:2}
  .hdr__r{grid-column:3}
  .hdr.stuck .hdr__in{height:56px}
  .mark{width:92px;padding:11px 11px 15px;transform:translateY(10px)}
  .hdr.stuck .mark{transform:translateY(6px) scale(.84)}
  .mbar{display:block}
  body{padding-bottom:86px}
  .cmp__t{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr)}
  .cmp__hd img{width:54px}
  .cmp__lb{font-size:.875rem}
  .cmp__cell{font-size:.75rem}
  .lbl__g,.jr__g{grid-template-columns:1fr}
  .pnl__g{grid-template-columns:1fr}
  .stats b{font-size:2rem}
}

@media (max-width:520px){
  .cats ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .btn{padding:.95em 1.45em;font-size:.875rem}
  .hero__facts li{font-size:.6875rem;padding:.5em .85em}
  .end h2{font-size:clamp(2rem,9vw,2.75rem)}
  .foot__f{flex-direction:column;align-items:flex-start;text-align:left}
}