/* ===========================================================
   Nalukettu Payasam — "Bold" concept v2
   Scroll-choreographed build referenced from buckssauce.com,
   re-skinned in the Nalukettu warm-cream palette (NOT dark).
   =========================================================== */

/* ---------- Self-hosted brand fonts (per brand guidelines: Glowkin for headers, Axiforma for everything else) ---------- */
@font-face { font-family:"Glowkin"; src:url("../fonts/Glowkin.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Axiforma"; src:url("../fonts/Axiforma-Book.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Axiforma"; src:url("../fonts/Axiforma-Bold.otf") format("opentype"); font-weight:700; font-display:swap; }

:root{
  --green-cream:#FCFFD2; --olive:#6F7A4F; --olive-800:#5A6342;
  --terra-100:#FFC296; --terra-300:#D08B62; --terra-500:#B97149; --terra-700:#A15732;
  --gold-100:#FFDA91; --gold-300:#D1AA67; --gold-500:#BA9352; --gold-700:#A47C3E;
  --paper:#FBF6E9; --paper-2:#F4EAD3; --paper-3:#EFE2C4;
  --ink:#3A2A1E; --ink-soft:#6B5645; --brown-deep:#4A2E20; --cream-text:#FBF6E9;

  --maxw:1280px; --radius:18px; --radius-lg:30px;
  --shadow:0 24px 60px -26px rgba(74,46,32,.5);
  --shadow-sm:0 10px 28px -16px rgba(74,46,32,.42);

  --display:"Glowkin", "Axiforma", system-ui, sans-serif;
  --sans:"Axiforma", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,picture{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }

/* ---------- Type utils ---------- */
/* Glowkin has a lot of internal detail (ligature-like curves, uneven stroke weight) —
   a fully hollow outline at display sizes turns that detail into visual noise. A faint
   fill keeps letterforms readable as solid shapes while still reading as "outline". */
.outl{
  -webkit-text-fill-color:color-mix(in srgb, var(--brown-deep) 16%, transparent);
  color:color-mix(in srgb, var(--brown-deep) 16%, transparent);
  -webkit-text-stroke:1.5px var(--brown-deep);
  text-stroke:1.5px var(--brown-deep);
}
.outl--cream{
  -webkit-text-stroke-color:var(--cream-text);
  text-stroke-color:var(--cream-text);
  -webkit-text-fill-color:color-mix(in srgb, var(--cream-text) 16%, transparent);
  color:color-mix(in srgb, var(--cream-text) 16%, transparent);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:.95rem;
  background:var(--brown-deep); color:var(--cream-text);
  padding:14px 30px; border-radius:999px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1.4), background .25s ease, color .25s ease;
}
.btn:hover{ transform:translateY(-3px) scale(1.03); background:var(--terra-700); }
.btn--sm{ padding:10px 22px; font-size:.85rem; }
.btn--lg{ padding:18px 42px; font-size:1.15rem; }
.btn--cream{ background:var(--cream-text); color:var(--brown-deep); }
.btn--cream:hover{ background:var(--gold-100); }

/* ===========================================================
   HEADER — fixed, revealed after intro
   =========================================================== */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:90;
  /* dark, near-opaque so the cream logo mark (a light colour meant for dark
     backgrounds — all our logo files are) actually has contrast to read against */
  background:rgba(58,42,30,.94); backdrop-filter:blur(12px);
  border-bottom:1.5px dashed rgba(251,246,233,.14);
}
html.anim .hdr{ opacity:0; visibility:hidden; transform:translateY(-100%); transition:.6s ease; }
html.anim .hdr.is-on{ opacity:1; visibility:visible; transform:none; }
.hdr__inner{
  max-width:var(--maxw); margin-inline:auto; padding-inline:24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; height:66px;
}
.hdr__logo img{ height:36px; width:auto; }
.hdr__nav{ display:flex; gap:28px; margin-left:auto; }
.hdr__nav a{
  font-family:var(--sans); font-weight:700; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(251,246,233,.78); transition:color .25s ease;
}
.hdr__nav a:hover{ color:var(--gold-100); }
.hdr__right{ display:flex; align-items:center; gap:16px; }

/* ===========================================================
   INTRO — pinned scene
   =========================================================== */
.intro{
  position:relative; height:100vh; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(251,246,233,.72) 0%, rgba(251,246,233,.5) 45%, rgba(251,246,233,.8) 100%),
    url("../img/bg-trust-watercolor.jpg") center 62%/cover no-repeat,
    var(--paper);
}
html:not(.anim) .intro{ display:none; }  /* no-JS / reduced-motion: skip straight to hero */
.intro__scene{ position:absolute; inset:0; }

/* paper grain — sits behind the USP takeover/rings/brand, just breaks up the flat cream */
.intro__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.4; mix-blend-mode:multiply;
  background:url("../img/grain.png"); background-size:170px;
}

/* USP takeover — one benefit fills the frame at a time */
.intro__usp{ position:absolute; inset:0; }
.usp{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 24px; opacity:0; pointer-events:none;
}
.usp h2{
  font-family:var(--display); font-weight:400; text-transform:uppercase; line-height:.96;
  font-size:clamp(2.6rem, 8.6vw, 5.8rem); color:var(--brown-deep); margin-bottom:22px;
}
.usp p{
  max-width:32ch; font-size:clamp(1.05rem, 1.7vw, 1.3rem); color:var(--ink-soft);
}
.usp--1 h2{ color:var(--terra-700); }
.usp--1 .outl{ -webkit-text-stroke-color:var(--terra-700); text-stroke-color:var(--terra-700); -webkit-text-fill-color:color-mix(in srgb, var(--terra-700) 16%, transparent); color:color-mix(in srgb, var(--terra-700) 16%, transparent); }
.usp--2 h2{ color:var(--gold-700); }
.usp--2 .outl{ -webkit-text-stroke-color:var(--gold-700); text-stroke-color:var(--gold-700); -webkit-text-fill-color:color-mix(in srgb, var(--gold-700) 16%, transparent); color:color-mix(in srgb, var(--gold-700) 16%, transparent); }
.usp--3 h2{ color:var(--olive-800); }
.usp--3 .outl{ -webkit-text-stroke-color:var(--olive-800); text-stroke-color:var(--olive-800); -webkit-text-fill-color:color-mix(in srgb, var(--olive-800) 16%, transparent); color:color-mix(in srgb, var(--olive-800) 16%, transparent); }
.usp--4 h2{ color:var(--brown-deep); }

/* growing rings */
.intro__rings{ position:absolute; inset:0; pointer-events:none; }
.ring{
  position:absolute; left:50%; top:50%;
  width:185vmax; aspect-ratio:1/1; border-radius:50%;
  translate:-50% -50%; scale:0;
}
.ring--terra{ background:var(--terra-500); }
.ring--gold{ background:var(--gold-500); }
.ring--deep{ background:var(--brown-deep); }
.ring--paper{ background:var(--paper); }

/* brand mark, glimpsed faintly while the ring wipe is still cycling colours,
   fades out before the full wordmark logo takes over */
.intro__icon{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:1;
  width:min(200px, 28vw); opacity:0; pointer-events:none;
}

/* opening line — eyebrow and headline are positioned independently off the exact same
   center point as the seed dot (each via its own transform offset), rather than via a
   shared flex `gap`. A flex gap measures space between box edges, and the eyebrow's much
   smaller font-size gives it a shorter box — that pulled the whole block's visual centre
   away from the dot and made the two gaps read as uneven. This keeps both gaps identical
   regardless of either line's own font-size. */
.intro__lead{
  position:absolute; inset:0; z-index:1;
  text-align:center; padding:0 24px; pointer-events:none;
}
:root{ --lead-gap:clamp(20px, 5.5vmax, 110px); }
.intro__eyebrow{
  position:absolute; left:50%; top:50%; width:100%;
  transform:translate(-50%, calc(-100% - var(--lead-gap)));
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  font-size:clamp(.85rem, 1.9vw, 1.2rem); letter-spacing:.3em; color:var(--ink-soft);
}
.intro__eyebrow [data-word],
.intro__headline [data-word]{ display:inline-block; } /* own transform, separate from the parent's positioning transform — avoids GSAP's y-tween clobbering it */
.intro__headline{
  position:absolute; left:50%; top:50%; width:100%;
  transform:translate(-50%, var(--lead-gap));
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  letter-spacing:.02em; line-height:1.08;
  font-size:clamp(2.2rem, 7vw, 4.6rem); color:var(--brown-deep); /* solid, not outlined — reserve the hollow treatment for smaller labels */
}

/* steam rising from the seed dot — one quiet motion cue, not a feature */
.intro__steam{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:80px; height:10px; pointer-events:none;
}
.intro__steam span{
  position:absolute; bottom:0; width:2px; height:56px;
  background:linear-gradient(to top, transparent, var(--terra-500) 45%, transparent);
  border-radius:999px; opacity:0;
  animation:steamRise 6s ease-in-out infinite;
}
.intro__steam span:nth-child(1){ left:20px; animation-delay:0s; }
.intro__steam span:nth-child(2){ left:52px; animation-delay:2.6s; }
@keyframes steamRise{
  0%{ transform:translateY(0) scaleY(.6); opacity:0; }
  35%{ opacity:.22; }
  70%{ opacity:.12; }
  100%{ transform:translateY(-70px) scaleY(1.15); opacity:0; }
}

/* brand moment — logo, caption and ticker all share the same grid cell (grid-area:1/1)
   and are centered as a stack, each offset from that shared center by its own transform.
   This keeps their vertical relationship fixed and predictable at any viewport height,
   instead of pinning the ticker to the viewport bottom edge where it can run off-screen. */
.intro__brand{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.intro__logo{ grid-area:1/1; width:min(400px, 62vw); opacity:0; }
.intro__caption{
  grid-area:1/1; text-align:center; white-space:nowrap;
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  font-size:clamp(.75rem, 1.5vw, 1rem); letter-spacing:.34em; color:var(--cream-text);
  opacity:0; transform:translateY(90px);
}
/* product names, as a ticker band — same pattern as the .strip ticker further down the page */
.intro__names{
  grid-area:1/1; justify-self:stretch; width:100%;
  overflow:hidden; opacity:0; transform:translateY(148px);
  padding:15px 0;
  border-top:1.5px dashed rgba(251,246,233,.32);
  border-bottom:1.5px dashed rgba(251,246,233,.32);
}
.intro__names-track{
  display:inline-flex; align-items:center; gap:30px; white-space:nowrap;
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  font-size:clamp(1rem, 2.1vw, 1.35rem); letter-spacing:.03em; color:var(--cream-text);
  animation:tick 31s linear infinite;
}
.intro__names-track i{ font-style:normal; color:var(--terra-300); font-size:.75em; }

/* scroll cue */
.intro__hint{
  position:absolute; left:50%; bottom:38px; translate:-50% 0;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--sans); font-weight:700; letter-spacing:.24em; text-transform:uppercase; font-size:.8rem;
  color:var(--brown-deep);
}
.intro__hint-arrow{
  width:22px; height:22px;
  border-right:3px solid var(--terra-700); border-bottom:3px solid var(--terra-700);
  transform:rotate(45deg);
  animation:hintBounce 1.8s ease-in-out infinite;
}
@keyframes hintBounce{
  0%,100%{ transform:translateY(0) rotate(45deg); opacity:.5; }
  50%{ transform:translateY(10px) rotate(45deg); opacity:1; }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  /* the pinned #intro reserves a full extra 100vh of scroll for its own (now-empty)
     box after it unpins — standard GSAP pin side effect. Pulling hero up by that same
     amount closes the dead gap instead of just cueing the user through it. */
  position:relative; min-height:100vh; overflow:hidden; margin-top:-100vh;
  display:flex; flex-direction:column; align-items:center;
  padding:96px 24px 40px;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(255,218,145,.35), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(155,163,119,.22), transparent 55%),
    var(--paper);
}
.hero__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background:url("../img/grain.png"); background-size:170px;
}
.hero__title{
  position:relative; z-index:3; text-align:center;
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem, 7.2vw, 6.4rem);
  line-height:.98; letter-spacing:.01em; text-transform:uppercase;
  color:var(--brown-deep);
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > *, .hero__title .line{ will-change:transform; }
.hero__title em{ font-style:normal; color:var(--terra-700); }

.hero__stage{
  position:relative; z-index:2; width:100%; max-width:1200px; flex:1;
  min-height:400px; display:grid; place-items:center; margin-top:8px;
}
.hero__disc{
  position:absolute; width:min(46vh, 78vw); aspect-ratio:1/1; border-radius:50%;
  /* soft radial "spotlight" pedestal instead of a flat colour disc — the product photo
     reads like it's lit from below, closer to the studio-shot look on buckssauce.com */
  background:radial-gradient(closest-side,
    var(--disc-color, var(--gold-500)),
    color-mix(in srgb, var(--disc-color, var(--gold-500)) 45%, transparent) 72%,
    transparent 100%);
  filter:blur(1px);
  box-shadow:var(--shadow);
  transition:background .7s ease;
}
.hero__prod{
  position:absolute; width:min(34vh, 60vw); aspect-ratio:3.6/4.6;
  opacity:0; transform:translateY(26px) rotate(-6deg) scale(.94);
  pointer-events:none;
}
.hero__prod img{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 30px 26px rgba(74,46,32,.42)) drop-shadow(0 10px 10px rgba(74,46,32,.28));
}
.hero__prod.is-active{ opacity:1; transform:none; }

/* placeholder tile for products awaiting real photography */
.hero__prod--placeholder{
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end;
  background:var(--paper-2); overflow:hidden;
  border-radius:16px; border:6px solid var(--cream-text);
  box-shadow:0 44px 60px -18px rgba(74,46,32,.6), 0 14px 24px -12px rgba(74,46,32,.4);
}
.hero__prod--placeholder img{
  width:100%; height:80%; object-fit:cover;
  border-radius:0; border:0; box-shadow:none;
}
.hero__prod--placeholder span{
  padding:12px 10px; text-align:center;
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  font-size:.78rem; letter-spacing:.03em; line-height:1.3; color:var(--brown-deep); background:var(--cream-text);
}

.hero__leader{
  position:absolute; top:22%; left:0; right:0; z-index:1;
  display:flex; align-items:center; gap:14px; padding-inline:2vw;
  font-family:var(--sans); font-weight:700; letter-spacing:.08em; color:var(--ink-soft);
  text-transform:uppercase;
}
.hero__tag{ font-size:clamp(1rem, 1.7vw, 1.3rem); color:var(--brown-deep); }
.hero__dots{ flex:1; border-top:2px dashed rgba(74,46,32,.35); }
.hero__flavor{ font-size:clamp(.82rem, 1.3vw, 1rem); letter-spacing:.14em; color:var(--terra-700); }

.hero__arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:4;
  width:64px; height:64px; border-radius:50%;
  background:var(--cream-text); color:var(--brown-deep);
  border:2px solid var(--brown-deep);
  font-size:1.4rem; display:grid; place-items:center;
  transition:transform .3s cubic-bezier(.2,.7,.3,1.5), background .25s;
}
.hero__arrow:hover{ transform:translate(0,-50%) scale(1.12); background:var(--gold-100); }
.hero__arrow--l{ left:max(2vw, 12px); }
.hero__arrow--r{ right:max(2vw, 12px); }

.hero__foot{ position:relative; z-index:3; padding-top:18px; }

/* ===========================================================
   TICKER
   =========================================================== */
.strip{ background:var(--olive); color:var(--green-cream); overflow:hidden; }
.strip__track{
  display:inline-flex; align-items:center; gap:34px; white-space:nowrap;
  padding:16px 0; font-family:var(--sans); font-weight:700; font-size:1.05rem; letter-spacing:.05em;
  animation:tick 35s linear infinite;
}
.strip__track i{ font-style:normal; color:var(--gold-100); font-size:.9rem; }
@keyframes tick{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ===========================================================
   SAY — word-fill statement
   =========================================================== */
.say{ position:relative; background:var(--paper); overflow:hidden; }
.say__inner{
  max-width:var(--maxw); margin-inline:auto; padding:clamp(60px,8vw,110px) 24px;
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:clamp(30px,5vw,80px);
}
.say__text{
  text-align:left;
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.5rem, 2.9vw, 2.6rem); line-height:1.16; letter-spacing:.01em;
  color:var(--brown-deep);
}
/* portrait video shown whole — no crop, no border box, just a floating column of motion */
.say__media video{
  display:block; width:100%; max-width:420px; margin-inline:auto;
  aspect-ratio:9/16; object-fit:cover; border-radius:var(--radius-lg);
  box-shadow:0 44px 70px -26px rgba(74,46,32,.5);
}
[data-fill] .w{ opacity:.16; display:inline-block; }

/* ===========================================================
   SHOP
   =========================================================== */
.shop{
  background:
    linear-gradient(180deg, var(--paper-2) 0%, color-mix(in srgb, var(--paper-2) 88%, transparent) 60%, var(--paper-2) 100%),
    url("../img/bg-trust-watercolor.jpg") center 30%/cover no-repeat;
  padding-bottom:clamp(70px,9vw,120px); overflow:hidden;
}
.shop__header{ position:relative; overflow:hidden; }
.shop__big{
  position:relative; z-index:2;
  padding:clamp(50px,7vw,90px) 0 clamp(20px,3vw,32px);
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem, 4vw, 3.2rem); line-height:1; text-transform:uppercase;
}
.shop__ticker{ display:block; overflow:hidden; white-space:nowrap; }
.shop__ticker-track{
  display:inline-flex; white-space:nowrap; will-change:transform;
  animation:tick 26s linear infinite;
}
.shop__ticker:hover .shop__ticker-track{ animation-play-state:paused; }
.shop__cta{ position:relative; z-index:2; text-align:center; margin-top:clamp(36px,5vw,56px); }
.shop__bigline{
  display:inline-block;
  -webkit-text-fill-color:color-mix(in srgb, var(--brown-deep) 12%, transparent);
  color:color-mix(in srgb, var(--brown-deep) 12%, transparent);
  -webkit-text-stroke:1.8px var(--brown-deep);
}
.shop__grid{
  max-width:var(--maxw); margin-inline:auto; padding-inline:24px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}

/* ===========================================================
   MAKING BANNER — copy beside the paning.mp4 portrait video, uncropped
   =========================================================== */
.makebanner{ background:var(--ink); color:var(--cream-text); overflow:hidden; }
.makebanner__inner{
  max-width:var(--maxw); margin-inline:auto; padding:clamp(60px,8vw,110px) 24px;
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:clamp(30px,5vw,80px);
}
.makebanner__eyebrow{
  display:block; font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-100); margin-bottom:14px;
}
.makebanner__title{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2rem, 4.2vw, 3.6rem); line-height:1.05; margin-bottom:clamp(18px,2.5vw,28px);
}
.makebanner__text{
  font-size:clamp(1rem, 1.5vw, 1.2rem); line-height:1.6; color:rgba(251,246,233,.78); max-width:36em;
}
.makebanner__media video{
  display:block; width:100%; max-width:400px; margin-inline:auto;
  aspect-ratio:9/16; object-fit:cover; border-radius:var(--radius-lg);
  box-shadow:0 44px 70px -26px rgba(0,0,0,.7);
}
.pcard{
  position:relative; border-radius:var(--radius); padding:26px 24px 24px;
  color:var(--cream-text); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  outline:2px dashed rgba(251,246,233,.55); outline-offset:-12px;
  transition:transform .35s ease, box-shadow .35s ease;
}
.pcard:hover{ transform:translateY(-8px) rotate(-.5deg); box-shadow:var(--shadow); }
.pcard--gold{ background:var(--gold-500); }
.pcard--terra{ background:var(--terra-700); }
.pcard--olive{ background:var(--olive); }
.pcard--deep{ background:var(--brown-deep); }
.pcard__no{
  font-family:var(--sans); font-weight:700; letter-spacing:.15em; font-size:.78rem; opacity:.85; margin-bottom:10px;
}
.pcard__name{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.9rem, 2.6vw, 2.5rem); line-height:.98; margin-bottom:20px;
}
.pcard__arch{
  width:74%; aspect-ratio:3/3.6;
  margin-bottom:20px;
}
.pcard__arch img{
  width:100%; height:100%; object-fit:contain; transition:transform .6s ease;
  filter:drop-shadow(0 22px 20px rgba(0,0,0,.32));
}
.pcard:hover .pcard__arch img{ transform:scale(1.07); }
.pcard__note{ font-size:.98rem; opacity:.92; margin-bottom:20px; flex:1; }
.pcard__row{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.pcard__taste{
  font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(251,246,233,.9);
  border:1.5px dashed rgba(251,246,233,.4); border-radius:999px; padding:8px 18px;
}

/* ===========================================================
   WHY — pinned
   =========================================================== */
.why{ position:relative; background:var(--paper); }
.why__pinwrap{ position:relative; min-height:100vh; overflow:hidden; display:flex; align-items:center; }
.why__vert{
  position:absolute; top:0; right:1vw; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--display); font-size:clamp(2.4rem, 6.5vh, 4.4rem); line-height:.94;
  -webkit-text-fill-color:color-mix(in srgb, var(--terra-300) 14%, transparent);
  color:color-mix(in srgb, var(--terra-300) 14%, transparent);
  -webkit-text-stroke:1.4px var(--terra-300);
  pointer-events:none; user-select:none;
}
.why__vert b{ font-weight:400; display:block; }
.why__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:clamp(70px,9vw,120px) 24px; padding-right:clamp(90px, 12vw, 180px);
}
.why__statement{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.7rem, 3.6vw, 3.3rem); line-height:1.06;
  color:var(--brown-deep); max-width:17ch; margin-bottom:60px;
}
.why__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; max-width:1000px; }
.why__num{
  font-family:var(--display); font-size:2.6rem; display:block; margin-bottom:8px;
  -webkit-text-fill-color:color-mix(in srgb, var(--terra-500) 14%, transparent);
  color:color-mix(in srgb, var(--terra-500) 14%, transparent);
  -webkit-text-stroke:1.4px var(--terra-500);
}
.why__item h3{ font-family:var(--sans); font-weight:700; font-size:1.05rem; letter-spacing:.03em; color:var(--terra-700); margin-bottom:10px; }
.why__item p{ color:var(--ink-soft); font-size:.98rem; }

/* ===========================================================
   HISTORY OF PAYASAM — story carousel
   =========================================================== */
.history{
  position:relative; overflow:hidden;
  background:var(--brown-deep); color:var(--cream-text);
  padding:clamp(24px,3vw,48px) 0;
}
.history__head{ text-align:center; padding:0 24px; margin-bottom:clamp(36px,5vw,56px); }
.history__eyebrow{
  display:block; font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-100); margin-bottom:14px;
}
.history__title{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2rem, 4vw, 3.2rem); line-height:1.05; color:var(--cream-text);
  margin-bottom:16px;
}
.history__lead{
  max-width:52em; margin-inline:auto;
  font-size:clamp(.95rem, 1.4vw, 1.1rem); line-height:1.6; color:rgba(251,246,233,.7);
}
/* full-bleed panel strip — pinned while scrolling, one panel advances per scroll step.
   Exactly one viewport tall: if the section were taller than the viewport, the pin
   would leave a leftover stretch after the strip finishes (the "shows again" bug). */
.history{ height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.history__strip{ overflow:hidden; }
.history__track{
  display:flex; align-items:center; width:max-content;
  padding-left:max(24px, calc((100vw - min(58vh, 80vw)) / 2));
  will-change:transform;
}
.history__track img{
  /* the panels are all square — declaring it keeps the track's width (and the pin
     distance measured from it) correct before the lazy images load */
  height:min(52vh, 78vw); width:auto; aspect-ratio:1/1; object-fit:cover; display:block;
  margin-right:clamp(16px,2vw,28px);
  border-radius:var(--radius); box-shadow:0 30px 50px -22px rgba(0,0,0,.6);
}
/* no-JS / reduced-motion fallback: a hand-scrollable filmstrip */
html:not(.anim) .history{ height:auto; padding:clamp(70px,9vw,120px) 0; }
html:not(.anim) .history__strip{ overflow-x:auto; }

/* ===========================================================
   PACKS
   =========================================================== */
.packs{ background:var(--brown-deep); color:var(--cream-text); overflow:hidden; }
.packs__inner{ max-width:var(--maxw); margin-inline:auto; padding:clamp(70px,9vw,120px) 24px; }
.packs__title{
  text-align:center; margin-bottom:clamp(40px,5vw,64px);
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.2rem, 5vw, 4.2rem); line-height:1.02;
}
.packs__card{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  border:2px dashed rgba(251,246,233,.4); border-radius:var(--radius-lg); overflow:hidden;
  background:rgba(251,246,233,.05);
}
.packs__pic{ min-height:300px; }
.packs__pic img, .packs__pic video{ width:100%; height:100%; object-fit:cover; display:block; }
.packs__copy{
  display:flex; flex-direction:column; align-items:flex-start; gap:20px;
  padding:clamp(28px,4vw,48px); justify-content:center;
}
.packs__lead{ color:rgba(251,246,233,.85); font-size:1.05rem; }
.packs__note{ color:rgba(251,246,233,.6); font-size:.9rem; }
.packs__copy .btn{ margin-top:4px; }

/* ===========================================================
   REVIEWS — double marquee
   =========================================================== */
.reviews{ position:relative; background:var(--paper-2); padding:clamp(70px,9vw,110px) 0; overflow:hidden; }
/* title + video share the header row — the accent never sits over the marquee */
.reviews__head{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(28px,5vw,80px); padding:0 24px;
  margin-bottom:clamp(40px,5vw,64px);
}
.reviews__accent{
  flex:0 0 auto;
  width:min(240px, 26vw); aspect-ratio:9/16; border-radius:18px; overflow:hidden;
  border:7px solid var(--paper); box-shadow:var(--shadow);
  transform:rotate(5deg);
}
.reviews__accent video{ width:100%; height:100%; object-fit:cover; display:block; }
.reviews__title{
  text-align:center; margin-bottom:0;
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.4rem, 6vw, 5rem); line-height:1; color:var(--brown-deep);
}
.reviews__title .outl{ -webkit-text-stroke-color:var(--terra-700); text-stroke-color:var(--terra-700); -webkit-text-fill-color:color-mix(in srgb, var(--terra-700) 16%, transparent); color:color-mix(in srgb, var(--terra-700) 16%, transparent); }
.marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  margin-bottom:22px;
}
.marquee__track{ display:flex; gap:22px; width:max-content; animation:tick 54s linear infinite; }
.marquee--rev .marquee__track{ animation-direction:reverse; animation-duration:60s; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.rev{
  width:360px; flex:0 0 auto; background:var(--paper);
  border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm);
  border:1.5px dashed rgba(74,46,32,.25);
}
.rev__who{ font-family:var(--sans); font-weight:700; letter-spacing:.08em; font-size:.78rem; color:var(--terra-700); margin-bottom:12px; text-transform:uppercase; }
.rev__quote{ font-family:var(--display); font-size:1.35rem; line-height:1.12; color:var(--brown-deep); text-transform:uppercase; margin-bottom:10px; }
.rev__body{ color:var(--ink-soft); font-size:.96rem; }

/* ===========================================================
   ABOUT / CAREERS — shared split layout
   =========================================================== */
.split{ background:var(--paper-2); padding:clamp(70px,9vw,120px) 24px; overflow:hidden; }
.split--career{ background:var(--paper); }
.split__inner{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center;
}
.split__inner--rev{ grid-template-columns:1.1fr .9fr; }
.split__inner--rev .split__media{ order:2; }
.split__media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3.2; box-shadow:var(--shadow-sm); }
/* the founder video is portrait — show it at native aspect so the poster isn't upscale-cropped into mush */
.split--about .split__media{ aspect-ratio:9/16; width:min(400px,100%); margin-inline:auto; }
.split__media img, .split__media video{ width:100%; height:100%; object-fit:cover; display:block; background:var(--ink); }
/* careers — copy alone, stretched across the full section width */
.split__inner--full{ grid-template-columns:1fr; }
.split__inner--full .split__copy{ max-width:none; }
.split__inner--full .split__copy p{ max-width:none; }
.split__play{
  position:absolute; inset:0; margin:auto; width:76px; height:76px; border-radius:50%;
  background:rgba(58,42,30,.55); backdrop-filter:blur(2px); color:var(--cream-text);
  display:flex; align-items:center; justify-content:center; border:2px solid rgba(251,246,233,.75);
  transition:transform .3s cubic-bezier(.2,.7,.3,1.5), background .25s;
}
.split__play svg{ margin-left:4px; } /* optical centering for the play triangle */
.split__play:hover{ transform:scale(1.08); background:rgba(58,42,30,.78); }
.split__media.is-playing .split__play{ display:none; }
.split__media video[controls]{ background:#000; }
.split__eyebrow{
  display:block; font-family:var(--sans); font-weight:700; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--terra-700); margin-bottom:14px;
}
.split__title{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2rem, 4.4vw, 3.6rem); line-height:1.02; color:var(--brown-deep); margin-bottom:20px;
}
.split__copy p{ color:var(--ink-soft); font-size:1rem; max-width:42em; margin-bottom:16px; }
.split__copy .btn{ margin:6px 0 16px; }
.split__note{ font-size:.82rem; font-style:italic; color:rgba(74,46,32,.45); }

/* ===========================================================
   LOCATIONS
   =========================================================== */
/* dark olive, deliberately — breaks up what was four near-identical cream
   sections in a row (reviews, about, locations, career) with no punctuation
   between the bulk-orders section and the footer */
.locations{ background:var(--olive); color:var(--green-cream); padding:clamp(70px,9vw,120px) 24px; }
.locations__inner{ max-width:var(--maxw); margin-inline:auto; }
.locations__title{
  text-align:center; margin-bottom:clamp(40px,5vw,60px);
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.2rem, 5.4vw, 4.4rem); line-height:1; color:var(--cream-text);
}
.locations__title .outl{
  -webkit-text-stroke-color:var(--cream-text); text-stroke-color:var(--cream-text);
  -webkit-text-fill-color:color-mix(in srgb, var(--cream-text) 16%, transparent);
  color:color-mix(in srgb, var(--cream-text) 16%, transparent);
}
.locations__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:44px; }
.loc{
  border:1.5px dashed rgba(251,246,233,.32); border-radius:var(--radius); padding:26px 22px;
  background:rgba(251,246,233,.06); text-align:center; transition:transform .35s ease, box-shadow .35s ease;
}
.loc:hover{ transform:translateY(-4px); background:rgba(251,246,233,.1); }
.loc__city{
  display:block; margin-bottom:8px;
  font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-100);
}
.loc h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:1.4rem; color:var(--cream-text); }
.loc--soon{ opacity:.72; }
.loc__tag{
  display:inline-block; margin-top:10px;
  font-family:var(--sans); font-weight:700; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cream-text); background:var(--terra-700); border-radius:999px; padding:4px 12px;
}
.locations__expand{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; text-align:center;
  padding-top:30px; border-top:1.5px dashed rgba(251,246,233,.25);
}
.locations__expand-label{ font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(251,246,233,.7); }
.locations__expand-city{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:1.6rem; text-transform:uppercase; color:var(--cream-text);
}

/* ===========================================================
   FOOTER
   =========================================================== */
.ft{ position:relative; background:var(--ink); color:var(--cream-text); overflow:hidden; }

/* "also order on" banner — the order video fills the banner's full right height,
   copy sits left with big brand-coloured platform badges */
.ft__orderbanner{
  background:rgba(251,246,233,.06); border-bottom:1.5px dashed rgba(251,246,233,.2);
}
.ft__orderbanner-inner{
  max-width:var(--maxw); margin-inline:auto; padding:clamp(40px,5vw,64px) 24px;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:clamp(28px,5vw,80px);
}
.ft__orderbanner-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
/* the order video as a tile at its own 9:16 height — whole frame, no crop */
.ft__orderbanner-video{
  width:min(280px, 30vw); aspect-ratio:9/16; object-fit:cover; display:block;
  border-radius:16px; border:2px solid rgba(251,246,233,.25);
  box-shadow:0 30px 50px -22px rgba(0,0,0,.7);
}
.ft__brands{ display:flex; flex-wrap:wrap; gap:14px; }
.brand{
  font-family:var(--sans); font-weight:800; letter-spacing:.01em;
  font-size:clamp(1.15rem, 2vw, 1.5rem); line-height:1;
  padding:15px 32px; border-radius:14px; color:#fff;
  box-shadow:0 14px 26px -14px rgba(0,0,0,.55);
}
.brand--swiggy{ background:#fc8019; }
.brand--zomato{ background:#e23744; }
.brand--potafo{ background:#00a651; }
.ft__body{ position:relative; }
.ft__mark{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.ft__mark img{ width:min(760px, 68vw); height:auto; opacity:.05; }
.ft__inner{
  position:relative; z-index:1;
  max-width:var(--maxw); margin-inline:auto; padding:64px 24px 30px;
  display:grid; grid-template-columns:1.3fr .8fr; gap:44px;
}
.ft__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.ft__brand p{ color:rgba(251,246,233,.6); max-width:26em; font-size:.95rem; }
.ft__social{ display:flex; gap:12px; }
.ft__social-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-weight:700; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gold-100); border:1.5px solid rgba(251,246,233,.3); border-radius:999px; padding:9px 20px;
  transition:.25s ease;
}
.ft__social-link:hover{ background:rgba(251,246,233,.1); color:var(--cream-text); }
.ft__navhead{
  display:block; font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(251,246,233,.42); margin-bottom:2px;
}
.ft__nav{ display:flex; flex-direction:column; gap:12px; justify-self:end; }
.ft__nav a{ font-family:var(--sans); font-weight:700; font-size:.88rem; letter-spacing:.05em; text-transform:uppercase; color:rgba(251,246,233,.85); }
.ft__nav a:hover{ color:var(--gold-100); }
.ft__platforms{ display:flex; flex-wrap:wrap; align-content:flex-start; gap:10px; }
.ft__platforms span{
  font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.03em; text-transform:uppercase;
  color:rgba(251,246,233,.85); border:1.5px dashed rgba(251,246,233,.32); border-radius:999px; padding:8px 16px;
}
.ft__platforms-note{ color:rgba(251,246,233,.5); font-size:.85rem; }
.ft__bottom{
  position:relative; z-index:1;
  max-width:var(--maxw); margin-inline:auto; padding:18px 24px 40px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1.5px dashed rgba(251,246,233,.2);
  font-size:.82rem; color:rgba(251,246,233,.5);
}

/* ===========================================================
   PRODUCTS LISTING PAGE
   =========================================================== */
.products-hero{
  padding:clamp(140px,16vw,180px) 24px clamp(50px,7vw,80px); text-align:center;
  background:var(--paper);
}
.products-hero__title{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.6rem, 7vw, 5.4rem); line-height:1; color:var(--brown-deep); margin-bottom:18px;
}
.products-hero__lead{ max-width:46em; margin-inline:auto; color:var(--ink-soft); font-size:1.05rem; }
.products-grid{
  background:var(--paper-2); padding:0 24px clamp(70px,9vw,120px);
}
.products-grid__inner{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}

/* ===========================================================
   PRODUCT DETAIL PAGE
   =========================================================== */
.pdp{ padding-top:66px; background:var(--paper); min-height:100vh; }
.pdp__inner{
  max-width:var(--maxw); margin-inline:auto; padding:clamp(40px,6vw,80px) 24px;
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(40px,6vw,72px); align-items:start;
}
.pdp__media{
  position:relative;
  aspect-ratio:3.6/4.6; background:var(--paper-2);
  display:flex; align-items:center; justify-content:center;
}
.pdp__media picture{ display:block; width:100%; height:100%; }
.pdp__media img{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 34px 30px rgba(74,46,32,.34));
}
.pdp__arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:56px; height:56px; border-radius:50%;
  background:var(--cream-text); color:var(--brown-deep); border:2px solid var(--brown-deep);
  display:grid; place-items:center; font-size:1.3rem;
  transition:transform .3s cubic-bezier(.2,.7,.3,1.5), background .25s;
}
.pdp__arrow:hover{ transform:translate(0,-50%) scale(1.1); background:var(--gold-100); }
.pdp__arrow--l{ left:16px; }
.pdp__arrow--r{ right:16px; }

.pdp__eyebrow{
  display:block; font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--terra-700); margin-bottom:12px;
}
.pdp__title{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.4rem, 5vw, 4rem); line-height:.98; color:var(--brown-deep); margin-bottom:14px;
}
.pdp__subtitle{ font-size:1.15rem; color:var(--ink-soft); margin-bottom:32px; }
.pdp__note-inline{ font-size:.85rem; font-style:italic; color:rgba(74,46,32,.45); margin-top:-20px; margin-bottom:28px; }

.pdp__info{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:32px; }
.pdp__box{
  border:1.5px dashed rgba(74,46,32,.25); border-radius:var(--radius); padding:22px;
  background:var(--paper-2);
}
.pdp__box h3{
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  font-size:.78rem; letter-spacing:.08em; color:var(--terra-700); margin-bottom:14px;
}
.pdp__box ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.pdp__box li{ font-size:.95rem; color:var(--ink-soft); padding-left:18px; position:relative; }
.pdp__box li::before{ content:"◆"; position:absolute; left:0; font-size:.6rem; top:.45em; color:var(--terra-500); }
.pdp__box p{ font-size:.95rem; color:var(--ink-soft); }

.pdp__features{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:32px; }
.pdp__feature{
  text-align:center; padding:16px 8px; border-radius:var(--radius);
  background:var(--paper-2); border:1.5px solid rgba(74,46,32,.12);
  font-size:.75rem; letter-spacing:.03em; color:var(--ink-soft); text-transform:uppercase;
}
.pdp__feature span{ display:block; font-family:var(--sans); font-weight:700; font-size:1rem; color:var(--brown-deep); margin-bottom:4px; }

.pdp .btn--lg{ width:100%; justify-content:center; }

/* ===========================================================
   ENQUIRY MODAL
   =========================================================== */
.modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; }
.modal.is-open{ display:flex; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(58,42,30,.55); backdrop-filter:blur(4px); }
.modal__panel{
  position:relative; z-index:1; width:100%; max-width:440px; max-height:90vh; overflow-y:auto;
  background:var(--paper); border-radius:var(--radius-lg); padding:38px 32px;
  box-shadow:var(--shadow);
}
.modal__close{
  position:absolute; top:14px; right:16px; font-size:1.7rem; line-height:1;
  color:var(--ink-soft); transition:color .25s ease;
}
.modal__close:hover{ color:var(--terra-700); }
.modal__panel h3{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:1.9rem; color:var(--brown-deep); margin-bottom:8px;
}
.modal__sub{ color:var(--ink-soft); font-size:.95rem; margin-bottom:24px; }
.modal__form{ display:flex; flex-direction:column; gap:16px; }
.modal__form label{
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft);
}
.modal__form input, .modal__form textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper-2);
  border:1.5px solid rgba(74,46,32,.18); border-radius:12px; padding:12px 14px; resize:vertical;
}
.modal__form input:focus, .modal__form textarea:focus{ outline:2px solid var(--terra-500); outline-offset:1px; }
.modal__form button{ margin-top:6px; }
.modal__success{ font-family:var(--sans); font-weight:700; font-size:1.05rem; color:var(--olive-800); text-align:center; padding:16px 0 4px; }

/* ===========================================================
   ANIM INITIAL STATES (gated on html.anim)
   =========================================================== */
html.anim [data-reveal]{ opacity:0; transform:translateY(36px); }
html.anim [data-reveal-card]{ opacity:0; transform:translateY(70px) rotate(2.5deg); }
html.anim .hero__title .line{ transform:translateY(110%); }
html.anim .hero__disc{ scale:0; }
html.anim .hero__arrow{ opacity:0; }
html.anim .hero__leader{ opacity:0; }
html.anim .hero__foot{ opacity:0; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:900px){
  .hdr__nav{ display:none; }
  .shop__grid{ grid-template-columns:1fr; max-width:460px; }
  .why__grid{ grid-template-columns:1fr; gap:26px; }
  .why__inner{ padding-right:clamp(70px, 16vw, 120px); }
  .packs__card{ grid-template-columns:1fr; }
  .hero__leader{ font-size:.72rem; }
  .hero__arrow{ width:52px; height:52px; }
  .ft__inner{ grid-template-columns:1fr; gap:34px; }
  .ft__nav{ justify-self:start; }
  .ft__orderbanner-inner{ grid-template-columns:1fr; justify-items:center; }
  .ft__orderbanner-copy{ align-items:center; text-align:center; }
  .ft__orderbanner-video{ width:min(280px, 70vw); }
  .ft__brands{ justify-content:center; }
  .locations__grid{ grid-template-columns:1fr; }
  .split__inner{ grid-template-columns:1fr; }
  .products-grid__inner{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .pdp__inner{ grid-template-columns:1fr; }
  .pdp__info{ grid-template-columns:1fr; }
  .pdp__features{ grid-template-columns:repeat(2,1fr); }
  /* too cramped beside the title at this width — drops into normal flow, centred above it, instead of disappearing */
  .reviews__head{ flex-direction:column; gap:24px; }
  .reviews__accent{ width:170px; transform:rotate(4deg); }
  .say__inner{ grid-template-columns:1fr; }
  .say__text{ text-align:center; }
  .makebanner__inner{ grid-template-columns:1fr; }
  .makebanner__copy{ text-align:center; }
  .makebanner__text{ margin-inline:auto; }
}

@media (prefers-reduced-motion:reduce){
  .strip__track, .marquee__track, .intro__hint-arrow, .intro__names-track,
  .shop__ticker-track,
  .intro__steam span{ animation:none !important; }
}