/* ===========================================================
   WASH8 — hero scroll-slide animation
   =========================================================== */

:root{
  --ink:        #0a1220;
  --ink-soft:   #4a5768;
  --ink-faint:  #8592a4;
  --paper:      #f4f6f9;
  --paper-2:    #ffffff;
  --line:       rgba(10,18,32,.10);
  --brand:      #123d91;   /* WASH8 blue  */
  --brand-2:    #2f6fe0;
  --leaf:       #57a83a;   /* WASH8 green */
  --sale:       #c4291c;   /* discount / MRP savings */
  --link:       #0f5fa8;   /* rating + review links  */
  --amber:      #f0a01a;   /* buy-now button         */
  --star-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='14' viewBox='0 0 74 14'%3E%3Cg fill='%23000'%3E%3Cpath d='M7 0l2.1 4.4 4.9.6-3.6 3.3.9 4.7L7 10.8 2.7 13l.9-4.7L0 5l4.9-.6z'/%3E%3Cpath d='M22 0l2.1 4.4 4.9.6-3.6 3.3.9 4.7L22 10.8 17.7 13l.9-4.7L15 5l4.9-.6z'/%3E%3Cpath d='M37 0l2.1 4.4 4.9.6-3.6 3.3.9 4.7L37 10.8 32.7 13l.9-4.7L30 5l4.9-.6z'/%3E%3Cpath d='M52 0l2.1 4.4 4.9.6-3.6 3.3.9 4.7L52 10.8 47.7 13l.9-4.7L45 5l4.9-.6z'/%3E%3Cpath d='M67 0l2.1 4.4 4.9.6-3.6 3.3.9 4.7L67 10.8 62.7 13l.9-4.7L60 5l4.9-.6z'/%3E%3C/g%3E%3C/svg%3E")
    no-repeat center/contain;
  --radius:     26px;
  --ease:       cubic-bezier(.22,1,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --pad:        clamp(20px, 4.5vw, 72px);

  /* elevation — one ramp, used everywhere instead of ad-hoc shadows */
  --sh-1: 0 1px 2px rgba(10,18,32,.06), 0 1px 1px rgba(10,18,32,.04);
  --sh-2: 0 4px 12px -4px rgba(10,18,32,.12), 0 1px 3px rgba(10,18,32,.05);
  --sh-3: 0 14px 34px -14px rgba(10,18,32,.22), 0 2px 6px rgba(10,18,32,.05);
  --sh-4: 0 30px 70px -28px rgba(10,18,32,.34), 0 4px 12px rgba(10,18,32,.06);

  --util-h: 38px;
  --nav-h:  66px;

  /* ── type scale ──────────────────────────────────────────
     One fluid ramp for the whole site. Every heading and every
     paragraph picks a step from here instead of inventing its own
     clamp(), so sizes stay in proportion at any width. */
  --t-2xs:  clamp(10px,   0.58rem + 0.08vw, 11px);
  --t-xs:   clamp(11.5px, 0.66rem + 0.10vw, 12.5px);
  --t-sm:   clamp(12.5px, 0.72rem + 0.16vw, 14px);
  --t-base: clamp(14.5px, 0.80rem + 0.26vw, 16.5px);
  --t-md:   clamp(16px,   0.88rem + 0.34vw, 19px);
  --t-lg:   clamp(18px,   0.95rem + 0.60vw, 24px);
  --t-xl:   clamp(22px,   1.00rem + 1.25vw, 34px);
  --t-2xl:  clamp(27px,   1.00rem + 2.40vw, 46px);
  --t-3xl:  clamp(32px,   0.90rem + 3.70vw, 62px);
  --t-4xl:  clamp(40px,   0.70rem + 5.60vw, 88px);

  --lh-display: 1.0;
  --lh-title:   1.12;
  --lh-snug:    1.35;
  --lh-body:    1.7;

  --tr-display: -.04em;
  --tr-title:   -.025em;
  --tr-caps:    .15em;
}

/* the header is fixed, so anchor jumps have to clear it */
html{ scroll-padding-top: calc(var(--nav-h) + 18px); }

*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  background:var(--paper);
}

body{
  margin:0;
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:var(--t-base);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none;          /* never fake a weight we do not have */
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:"Manrope","Inter",ui-sans-serif,system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.03em;
  margin:0;
  /* display sizes read tighter and cleaner with optical tracking */
  text-wrap:balance;
}

/* every figure in the interface lines up in a column */
.pdp__price, .buybox__price, .card__price, .cart__row,
.copy__stats b, .pdp__specs dd, .line__end b{
  font-variant-numeric:tabular-nums;
}

img,canvas{ display:block; max-width:100%; }

::selection{ background:var(--brand); color:#fff; }

/* one visible focus ring for the whole site, keyboard only */
:focus-visible{
  outline:2px solid var(--brand-2);
  outline-offset:3px;
  border-radius:4px;
}
.nav.is-over :focus-visible,
.finale :focus-visible{ outline-color:#9be07a; }

/* a slimmer scrollbar that matches the palette */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{ width:11px; height:11px; }
  ::-webkit-scrollbar-track{ background:var(--paper); }
  ::-webkit-scrollbar-thumb{
    background:rgba(10,18,32,.22); border-radius:100px;
    border:3px solid var(--paper);
  }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(10,18,32,.38); }
}

/* ─────────────── splash ─────────────── */

.boot{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  overflow:hidden;
  /* matches the plate the logo film is rendered on, so the video edge
     never shows as a seam against the page */
  background:
    radial-gradient(60% 50% at 50% 42%, #ffffff 0%, #f2f4f7 58%, #e7eaef 100%);
  transition:opacity .75s var(--ease), visibility .75s;
}
.boot.is-done{ opacity:0; visibility:hidden; }
.boot[hidden]{ display:none; }

.boot__vid{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;              /* portrait phones must not crop the mark */
  background:transparent;
}
.boot.is-quick .boot__vid{ display:none; }

/* the still stands in when motion is reduced, autoplay is blocked, or the
   visitor has already seen the film this session */
.boot__still{
  width:min(44vw, 34vh, 280px);
  height:auto;
  opacity:0;
  animation:bootPop 1s var(--ease-out) forwards;
}
.boot:not(.is-quick) .boot__still{ display:none; }

@keyframes bootPop{
  from{ opacity:0; transform:scale(.94); }
  to  { opacity:1; transform:none; }
}

.boot__foot{
  position:absolute; left:0; right:0; bottom:clamp(30px,6vh,56px);
  display:grid; justify-items:center; gap:12px;
  padding:0 var(--pad);
}

.boot__bar{
  width:min(220px,46vw); height:2px; border-radius:2px;
  background:rgba(18,61,145,.16); overflow:hidden;
}
.boot__bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--brand),var(--leaf));
  transition:width .25s linear;
}
.boot__pct{
  margin:0;
  font-size:var(--t-2xs); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}

.boot__skip{
  position:absolute; top:clamp(18px,3vh,28px); right:clamp(18px,3vw,32px);
  padding:8px 16px; border-radius:100px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.8);
  font-family:inherit; font-size:var(--t-xs); font-weight:600;
  color:var(--ink-soft);
  transition:color .25s var(--ease), border-color .25s var(--ease),
             transform .3s var(--ease-out);
}
.boot__skip:hover{
  color:var(--ink); border-color:rgba(10,18,32,.28);
  transform:translateY(-1px);
}
.boot.is-quick .boot__skip{ display:none; }

/* ─────────────── header ─────────────── */

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  /* the utility strip and the bar move as one block */
  transition:transform .5s var(--ease-out), opacity .35s var(--ease);
}
/* a full-screen render owns the screen; the bar steps out of the frame.
   Pointer to the top edge, or a flick upwards, brings it back. */
.topbar.is-hidden{
  transform:translateY(-101%);
  opacity:0;
  pointer-events:none;
}

/* ── utility strip ── */

.util{
  overflow:hidden;
  height:var(--util-h);
  background:var(--ink);
  color:rgba(255,255,255,.62);
  transition:height .45s var(--ease-out), opacity .3s linear;
}
.topbar.is-scrolled .util{ height:0; opacity:0; }

.util__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; height:var(--util-h);
  padding:0 var(--pad);
  font-size:11.5px; letter-spacing:.01em;
}
/* the strip cycles through a few messages, one visible at a time */
.util__msg{
  position:relative;
  display:flex; align-items:center; gap:9px; margin:0;
  min-width:0; flex:1;
}
.util__msg b{
  position:absolute; left:24px; right:0;
  font-weight:400;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transform:translateY(5px);
  transition:opacity .45s var(--ease), transform .55s var(--ease-out);
  pointer-events:none;
}
.util__msg b.is-on{ opacity:1; transform:none; }
.util__msg svg{
  flex:0 0 auto; width:15px; height:15px;
  fill:none; stroke:var(--leaf); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.util__links{ display:flex; align-items:center; gap:18px; white-space:nowrap; }
.util__links a{
  color:rgba(255,255,255,.62); text-decoration:none;
  transition:color .3s var(--ease);
}
.util__links a:hover{ color:#fff; }

/* ── main bar ── */

.nav{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(14px,2.4vw,34px);
  height:var(--nav-h);
  padding:0 var(--pad);
  border-bottom:1px solid transparent;
  transition:color .45s var(--ease), background .45s var(--ease),
             border-color .45s var(--ease), box-shadow .45s var(--ease),
             height .35s var(--ease-out);
}
.topbar.is-scrolled .nav{ height:58px; }

/* inverted while a full-screen render is behind it */
.nav.is-over{
  color:#fff;
  background:transparent;                 /* the media scrim does the work */
  border-bottom-color:rgba(255,255,255,.14);
}
/* over the page below, the bar carries its own glass */
.nav.is-solid{
  background:rgba(255,255,255,.86);
  border-bottom-color:var(--line);
  backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:var(--sh-1);
}

/* ── logo ── */

.nav__logo{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--brand);
  transition:color .45s var(--ease), opacity .3s var(--ease);
}
.nav__logo:hover{ opacity:.82; }

/* the real mark, lifted out of the logo film */
.nav__mark{
  width:auto; height:34px; flex:0 0 auto;
  object-fit:contain;
  transition:height .35s var(--ease-out), filter .45s var(--ease);
}
.topbar.is-scrolled .nav__mark{ height:30px; }

.nav__word{
  display:grid; gap:1px;
  color:currentColor;
}
.nav__name{
  font-family:"Manrope",sans-serif; font-weight:800;
  font-size:17px; letter-spacing:-.03em; line-height:1;
  white-space:nowrap;
}
.nav__name b{ color:var(--leaf); font-weight:800; }
.nav__word em{
  font-family:"Inter",sans-serif; font-style:normal;
  font-size:9.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; opacity:.5;
}
.nav.is-over .nav__logo{ color:#fff; }
.nav.is-over .nav__name b{ color:#9be07a; }
/* the mark is a dark blue-green gradient — on the inverted bar it needs a
   glow behind it rather than a recolour, so the artwork stays intact */
.nav.is-over .nav__mark{
  filter:drop-shadow(0 0 10px rgba(255,255,255,.75))
         drop-shadow(0 0 3px rgba(255,255,255,.9));
}

/* ── links ── */

.nav__links{
  position:relative;
  display:flex; align-items:center;
  gap:clamp(14px,1.8vw,28px);
  margin-inline:auto;
}

/* one underline that travels, instead of five that fade in and out */
.nav__ink{
  position:absolute; left:0; bottom:2px;
  height:2px; width:0; border-radius:2px;
  background:var(--brand);
  opacity:0; pointer-events:none;
  transition:transform .42s var(--ease-out), width .42s var(--ease-out),
             opacity .3s var(--ease), background .4s var(--ease);
}
.nav.is-over .nav__ink{ background:#9be07a; }
.nav__links > a,
.drop__btn{
  position:relative;
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 2px;
  border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:500;
  text-decoration:none; color:var(--ink-soft);
  transition:color .3s var(--ease);
}
.nav__links > a:hover,
.drop__btn:hover{ color:var(--ink); }

.nav__links > a.is-here,
.drop__btn.is-here{ color:var(--brand); }

.drop__btn svg{
  width:14px; height:14px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .35s var(--ease-out);
}
.drop.is-open .drop__btn svg{ transform:rotate(180deg); }

.nav.is-over .nav__links > a,
.nav.is-over .drop__btn{ color:rgba(255,255,255,.8); }
.nav.is-over .nav__links > a:hover,
.nav.is-over .drop__btn:hover,
.nav.is-over .nav__links > a.is-here,
.nav.is-over .drop__btn.is-here{ color:#fff; }

/* ── mega menu ── */

.drop{ position:relative; }

.mega{
  position:absolute; top:calc(100% + 14px); left:50%;
  width:min(680px, calc(100vw - 2 * var(--pad)));
  transform:translate(-50%, -8px);
  padding:16px;
  border:1px solid var(--line); border-radius:16px;
  background:#fff; color:var(--ink);
  box-shadow:var(--sh-4);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), transform .38s var(--ease-out),
             visibility .28s;
}
.drop.is-open .mega{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(-50%, 0);
}
/* little pointer up to the button */
.mega::before{
  content:""; position:absolute; top:-5px; left:50%;
  width:10px; height:10px; margin-left:-5px;
  background:#fff; border-left:1px solid var(--line);
  border-top:1px solid var(--line);
  transform:rotate(45deg);
}

.mega__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; padding:0 4px 12px;
}
.mega__head p{
  margin:0; font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);
}
.mega__head a{
  font-size:12.5px; font-weight:500; color:var(--link); text-decoration:none;
}
.mega__head a:hover{ text-decoration:underline; }

.mega__grid{
  display:grid; gap:6px;
  grid-template-columns:repeat(5, minmax(0,1fr));
}
.mega__item{
  display:grid; gap:8px; justify-items:center;
  padding:10px 6px 12px;
  border:1px solid transparent; border-radius:11px;
  text-decoration:none; color:inherit; text-align:center;
  transition:background .25s var(--ease), border-color .25s var(--ease),
             transform .3s var(--ease-out);
}
.mega__item:hover{
  background:#f7f9fb; border-color:var(--line);
  transform:translateY(-2px);
}
.mega__thumb{
  position:relative; overflow:hidden;
  width:100%; aspect-ratio:1/1;
  border:1px solid var(--line); border-radius:9px; background:#fff;
}
.mega__thumb::before{
  content:""; position:absolute; inset:0 0 auto; height:3px; z-index:1;
  background:var(--tint,#123d91);
}
.mega__thumb img{
  width:100%; height:100%; padding:7px 5px 4px; object-fit:contain;
}
/* a fixed two-line box, so every price in the row sits on one baseline */
.mega__item b{
  font-size:11.5px; font-weight:600; line-height:1.3;
  min-height:2.6em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.mega__item span{ font-size:11.5px; font-weight:600; color:var(--brand); }

.mega__foot{
  display:flex; flex-wrap:wrap; gap:6px 20px;
  margin-top:14px; padding:12px 4px 2px;
  border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-faint);
}
.mega__foot b{ color:var(--ink-soft); font-weight:600; }

/* ── right cluster ── */

.nav__right{ display:flex; align-items:center; gap:10px; }

/* search — same chassis as the cart button */
.iconbtn{
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:11px;
  border:1px solid var(--line); background:rgba(255,255,255,.7);
  cursor:pointer;
  transition:background .4s var(--ease), border-color .4s var(--ease),
             transform .3s var(--ease-out);
}
.iconbtn:hover{ transform:translateY(-2px); background:#fff; }
.iconbtn svg{
  width:18px; height:18px; fill:none; stroke:var(--ink);
  stroke-width:1.8; stroke-linecap:round;
  transition:stroke .4s var(--ease);
}
.nav.is-over .iconbtn{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28);
}
.nav.is-over .iconbtn svg{ stroke:#fff; }

@media (max-width:860px){ .iconbtn{ display:none; } }

.cartbtn{
  position:relative; display:grid; place-items:center;
  width:38px; height:38px; border-radius:11px;
  border:1px solid var(--line); background:rgba(255,255,255,.7);
  cursor:pointer;
  transition:background .4s var(--ease), border-color .4s var(--ease),
             transform .3s var(--ease-out);
}
.cartbtn:hover{ transform:translateY(-2px); background:#fff; }
.cartbtn svg{
  width:18px; height:18px; fill:none; stroke:var(--ink);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .4s var(--ease);
}
.cartbtn__n{
  position:absolute; top:-5px; right:-5px;
  min-width:18px; height:18px; padding:0 5px;
  display:grid; place-items:center;
  border-radius:100px;
  font-size:10.5px; font-weight:700; color:#fff;
  background:var(--leaf);
  box-shadow:0 0 0 2px #fff;
  opacity:0; transform:scale(.6);
  transition:opacity .3s var(--ease), transform .3s var(--ease-out);
}
.cartbtn__n.is-on{ opacity:1; transform:none; }

.nav.is-over .cartbtn{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28);
}
.nav.is-over .cartbtn svg{ stroke:#fff; }
.nav.is-over .cartbtn__n{ box-shadow:0 0 0 2px rgba(10,18,32,.5); }

.nav__cta{
  font-size:13px; font-weight:600; text-decoration:none;
  padding:10px 20px; border-radius:100px;
  color:#fff; background:var(--ink);
  white-space:nowrap;
  transition:transform .3s var(--ease-out), background .45s var(--ease),
             color .45s var(--ease);
}
.nav__cta:hover{ transform:translateY(-2px); }
.nav.is-over .nav__cta{ background:#fff; color:var(--ink); }

/* ── hamburger ── */

.burger{
  display:none;
  width:38px; height:38px; border-radius:11px;
  border:1px solid var(--line); background:rgba(255,255,255,.7);
  cursor:pointer; padding:0;
  place-items:center; align-content:center; justify-items:center;
  gap:5px;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.burger i{
  display:block; width:16px; height:1.8px; border-radius:2px;
  background:var(--ink);
  transition:transform .35s var(--ease-out), background .4s var(--ease);
}
.nav.is-over .burger{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28);
}
.nav.is-over .burger i{ background:#fff; }

/* ── scroll progress ── */

.topbar__prog{
  display:block; height:2px; width:0%;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--leaf));
  transition:width .12s linear;
}

/* ── mobile drawer ── */

.drawer{
  position:fixed; inset:0; z-index:140;
  visibility:hidden;
}
.drawer.is-open{ visibility:visible; }

.drawer__veil{
  position:absolute; inset:0;
  background:rgba(8,14,26,.46); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .4s var(--ease);
}
.drawer.is-open .drawer__veil{ opacity:1; }

.drawer__panel{
  position:absolute; top:0; bottom:0; right:0;
  width:min(360px,100%);
  display:flex; flex-direction:column; gap:22px;
  padding:16px 20px 28px;
  overflow-y:auto;
  background:var(--paper-2);
  box-shadow:-30px 0 70px -30px rgba(10,18,32,.4);
  transform:translateX(100%);
  transition:transform .5s var(--ease-out);
}
.drawer.is-open .drawer__panel{ transform:none; }

.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.drawer__head .nav__mark{ height:32px; }
.drawer__x{
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:10px;
  border:1px solid var(--line); background:none; cursor:pointer;
  transition:background .3s var(--ease);
}
.drawer__x:hover{ background:#f1f4f8; }
.drawer__x svg{
  width:15px; height:15px; fill:none; stroke:var(--ink);
  stroke-width:1.8; stroke-linecap:round;
}

.drawer__nav{ display:grid; }
.drawer__nav a{
  display:grid; gap:3px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--ink);
  font-family:"Manrope",sans-serif; font-weight:800;
  font-size:19px; letter-spacing:-.02em;
  transition:color .3s var(--ease);
}
.drawer__nav a:hover{ color:var(--brand); }
.drawer__nav a span{
  font-family:"Inter",sans-serif; font-weight:400;
  font-size:12px; letter-spacing:0; color:var(--ink-faint);
}

.drawer__label{
  margin:0 0 10px;
  font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);
}

.drawer__items{ display:grid; gap:8px; }
.drawer__item{
  display:grid; grid-template-columns:44px 1fr auto;
  gap:11px; align-items:center;
  padding:8px; border:1px solid var(--line); border-radius:11px;
  text-decoration:none; color:inherit;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.drawer__item:hover{ border-color:var(--brand); background:#f7f9fb; }
.drawer__item img{
  width:44px; height:44px; padding:3px;
  border-radius:8px; object-fit:contain;
  background:#fff; border:1px solid var(--line);
  border-top:3px solid var(--tint,#123d91);
}
.drawer__item b{ font-size:13px; font-weight:600; }
.drawer__item small{ display:block; font-size:11px; color:var(--ink-faint); }
.drawer__item span{ font-size:14px; font-weight:600; }

.drawer__row{
  display:block; padding:9px 0;
  border-bottom:1px solid var(--line);
  font-size:13.5px; color:var(--ink-soft); text-decoration:none;
  transition:color .3s var(--ease);
}
.drawer__row:hover{ color:var(--brand); }

.drawer__cta{ justify-content:center; margin-top:auto; }

/* ── header responsive ── */

@media (max-width:1080px){
  .nav__links{ gap:16px; }
  .nav__word em{ display:none; }
}

@media (max-width:900px){
  .util__links a:not(:first-child){ display:none; }
}

@media (max-width:860px){
  .nav__links{ display:none; }
  .burger{ display:grid; }
  .nav__cta{ display:none; }
  .nav__logo{ margin-right:auto; }
}

@media (max-width:620px){
  .util__msg{ font-size:11px; }
  .util__links{ display:none; }
  .util__in{ justify-content:center; }
}

@media (max-width:420px){
  .nav__word{ font-size:15px; }
  :root{ --nav-h:60px; }
}

/* ═══════════════ SECTION 1 — hero ═══════════════ */

.hero{
  position:relative;
  height:780vh;              /* the scroll track */
  background:var(--paper);
}

.hero__stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  isolation:isolate;
}

/* soft studio backdrop behind the resting layout */
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(90% 70% at 78% 18%, rgba(47,111,224,.13), transparent 60%),
    radial-gradient(60% 55% at 6% 92%, rgba(87,168,58,.12), transparent 62%),
    linear-gradient(180deg,#fdfdff 0%, var(--paper) 100%);
}

/* ── resting grid ── */

.hero__grid{
  position:relative; z-index:1;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  align-items:center;
  gap:clamp(24px,4vw,64px);
  /* clears the utility strip plus the bar */
  padding:calc(var(--util-h) + var(--nav-h) + 22px) var(--pad) 72px;
}

.hero__slot{
  height:min(74vh,720px);
  border-radius:var(--radius);
}

/* ── left copy (simple, calm) ── */

.copy{ max-width:620px; }

.copy__eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 26px;
  font-size:var(--t-xs); font-weight:600; letter-spacing:var(--tr-caps);
  text-transform:uppercase; color:var(--brand);
}
.copy__eyebrow i{
  width:6px; height:6px; border-radius:50%; background:var(--leaf);
  box-shadow:0 0 0 4px rgba(87,168,58,.18);
}

.copy__title{
  font-size:var(--t-4xl);
  line-height:var(--lh-display);
  letter-spacing:var(--tr-display);
}
.copy__title span{
  background:linear-gradient(100deg,var(--brand) 10%,var(--brand-2) 55%,var(--leaf) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

.copy__sub{
  margin:26px 0 0;
  max-width:46ch;
  font-size:var(--t-md);
  line-height:var(--lh-body); color:var(--ink-soft);
}

.copy__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px; border-radius:100px;
  font-size:14px; font-weight:600; text-decoration:none;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease),
             background .35s, border-color .35s;
}
.btn--solid{
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 14px 32px -12px rgba(18,61,145,.6);
}
.btn--solid:hover{ transform:translateY(-3px); box-shadow:0 20px 42px -14px rgba(18,61,145,.62); }
.btn--ghost{
  color:var(--ink); border:1px solid var(--line); background:rgba(255,255,255,.6);
}
.btn--ghost:hover{ transform:translateY(-3px); border-color:rgba(10,18,32,.28); }
.btn--ghost span{ transition:transform .4s var(--ease); }
.btn--ghost:hover span{ transform:translateY(3px); }

.copy__stats{
  display:flex; gap:clamp(22px,3vw,46px);
  list-style:none; margin:46px 0 0; padding:30px 0 0;
  border-top:1px solid var(--line);
}
.copy__stats li{ display:grid; gap:4px; }
.copy__stats b{
  font-family:"Manrope",sans-serif; font-size:var(--t-lg); font-weight:800;
  letter-spacing:var(--tr-title);
}
.copy__stats span{
  font-size:var(--t-2xs); letter-spacing:var(--tr-caps); text-transform:uppercase;
  color:var(--ink-faint);
}

/* ── the growing media ── */

.media{
  position:absolute; z-index:2; margin:0;
  overflow:hidden;
  background:#eceff4;
  will-change:transform, width, height, border-radius;
  box-shadow:
    0 40px 90px -40px rgba(10,18,32,.42),
    0 2px 0 0 rgba(255,255,255,.7) inset;
}
.media canvas{
  width:100%; height:100%;
}

/* the render is a bright white studio shot, so the full-screen phase
   needs its own scrim for the nav and the captions to stay legible */
.media__scrim{
  position:absolute; inset:0; pointer-events:none;
  opacity:var(--fs,0);
  background:
    linear-gradient(180deg, rgba(6,12,24,.62) 0%, rgba(6,12,24,.16) 14%, transparent 26%),
    linear-gradient(0deg,   rgba(6,12,24,.78) 0%, rgba(6,12,24,.40) 22%, transparent 52%),
    radial-gradient(120% 90% at 50% 45%, transparent 52%, rgba(6,12,24,.30) 100%);
  transition:opacity .25s linear;
}

/* glass edge + gradient sheen, fades away as it goes full screen */
.media__sheen{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(200deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 34%),
    linear-gradient(0deg, rgba(10,18,32,.16) 0%, rgba(10,18,32,0) 42%);
  opacity:var(--sheen,1);
  transition:opacity .2s linear;
}
/* hairline frame that only shows while full screen */
.media__frameline{
  position:absolute; inset:18px; pointer-events:none;
  border:1px solid rgba(255,255,255,.22);
  border-radius:4px;
  opacity:var(--fs,0);
}
.media__frameline::before,
.media__frameline::after{
  content:""; position:absolute; width:11px; height:11px;
  border:1px solid rgba(255,255,255,.55);
}
.media__frameline::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.media__frameline::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* anchored bottom-left so it never collides with the fixed nav
   as the card grows up into it */
.media__tag{
  position:absolute; bottom:16px; left:16px; z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:100px;
  font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#fff;
  background:rgba(8,14,26,.42);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  opacity:var(--tag,1);
  transition:opacity .3s linear;
}
.media__tag i{
  width:6px; height:6px; border-radius:50%; background:#6ee06e;
  animation:pulse 1.9s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.35; transform:scale(.7); }
}

/* ── chapter captions (full-screen phase) ── */

.chapters{
  position:absolute; inset:auto 0 0 0; z-index:3;
  padding:0 clamp(24px,5vw,86px) clamp(56px,7vh,92px);
  pointer-events:none;
}
.chapter{
  position:absolute; bottom:clamp(56px,7vh,92px);
  left:clamp(24px,5vw,86px); right:clamp(24px,5vw,86px);
  max-width:620px;
  opacity:0; transform:translateY(26px);
  transition:opacity .55s var(--ease), transform .75s var(--ease);
}
.chapter.is-on{ opacity:1; transform:none; }

.chapter span{
  display:inline-block; margin-bottom:14px;
  font-size:11px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.72);
}
.chapter h2{
  font-size:var(--t-2xl); line-height:var(--lh-title);
  letter-spacing:var(--tr-display);
  color:#fff;
  text-shadow:0 6px 40px rgba(6,12,24,.45);
}
.chapter p{
  margin:14px 0 0; max-width:44ch;
  font-size:var(--t-base); line-height:var(--lh-body);
  color:rgba(255,255,255,.8);
}

/* ── progress rail ── */

.rail{
  position:absolute; z-index:3; right:clamp(18px,2.4vw,36px);
  top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:14px;
  opacity:var(--fs,0);
  transition:opacity .4s linear;
}
.rail__line{
  width:2px; height:min(34vh,260px); border-radius:2px;
  background:rgba(255,255,255,.22); overflow:hidden;
}
.rail__line i{
  display:block; width:100%; height:0%;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.55));
}
.rail__dots{ display:grid; gap:12px; }
.rail__dots b{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.3);
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.rail__dots b.is-on{ background:#fff; transform:scale(1.55); }

@media (max-width:760px){ .rail{ display:none; } }

/* ── scroll hint ── */

.scrollhint{
  position:absolute; z-index:4; left:50%; bottom:26px;
  transform:translateX(-50%);
  display:grid; justify-items:center; gap:9px;
  opacity:var(--hint,1);
  transition:opacity .4s linear;
  pointer-events:none;
}
.scrollhint span{
  font-size:10px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-faint);
}
.scrollhint i{
  width:1px; height:40px;
  background:linear-gradient(180deg,rgba(10,18,32,.35),transparent);
  position:relative; overflow:hidden;
}
.scrollhint i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,var(--brand),transparent);
  animation:run 1.9s var(--ease) infinite;
}
@keyframes run{
  0%  { transform:translateY(-100%); }
  100%{ transform:translateY(100%); }
}

/* ═══════════════ SECTION 2 — shop ═══════════════ */

.shop{
  position:relative; z-index:5;
  padding:clamp(72px,10vh,132px) var(--pad) clamp(80px,11vh,140px);
  background:var(--paper-2);
  border-top:1px solid var(--line);
}

.shop__head{ max-width:640px; margin-bottom:clamp(38px,5vh,62px); }
.shop__head h2{
  font-size:var(--t-3xl); line-height:var(--lh-title);
  letter-spacing:var(--tr-display);
}
.shop__lede{
  margin:18px 0 0; font-size:var(--t-md); line-height:var(--lh-body);
  color:var(--ink-soft);
}

/* ── rating stars: one masked strip, filled to the score ── */

.stars{
  position:relative; display:inline-block;
  width:74px; height:14px;
  background:currentColor; color:rgba(10,18,32,.18);
  -webkit-mask:var(--star-mask); mask:var(--star-mask);
}
.stars i{
  position:absolute; inset:0 auto 0 0;
  display:block; background:#f2a51a;
}

/* ── quantity stepper (cart lines) ── */

.stepper{
  display:inline-flex; align-items:center;
  border:1px solid rgba(10,18,32,.22); border-radius:100px;
  background:#fff; overflow:hidden;
}
.stepper button{
  width:40px; height:40px; border:0; cursor:pointer;
  background:none; font-size:18px; color:var(--ink);
  font-family:inherit; line-height:1;
  transition:background .25s var(--ease);
}
.stepper button:hover{ background:#f1f4f8; }
.stepper span{
  min-width:32px; text-align:center;
  font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
}
.stepper--sm button{ width:28px; height:28px; font-size:15px; }
.stepper--sm span{ min-width:24px; font-size:13px; }

/* ── featured product: a dense storefront PDP ──
   Three columns — gallery, details, buy box — the layout shoppers
   already know. The image box is deliberately modest; a huge render
   pushed the price and the buttons off the first screen. */

.pdp{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr) minmax(256px,.74fr);
  grid-template-areas:"gal info buy";
  gap:clamp(18px,2.4vw,38px);
  align-items:start;
  padding-bottom:clamp(40px,6vh,68px);
  border-bottom:1px solid var(--line);
}

/* ── gallery: thumb rail beside the image ── */

.pdp__gallery{
  grid-area:gal;
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:10px;
  align-items:start;
}

.pdp__thumbs{ display:grid; gap:8px; align-content:start; }

.thumb{
  position:relative; overflow:hidden;
  aspect-ratio:1/1; padding:0;
  border-radius:9px; cursor:pointer;
  border:1px solid var(--line);
  background:#fff;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.thumb::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:var(--tint,#123d91);
}
.thumb img{ width:100%; height:100%; padding:6px 4px 4px; object-fit:contain; }
.thumb:hover{ border-color:var(--brand-2); }
.thumb.is-on{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(18,61,145,.2);
}

.pdp__stage{
  position:relative; overflow:hidden;
  height:clamp(238px,25vw,352px);
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.pdp__stage::before{
  content:""; position:absolute; inset:0 0 auto; height:3px; z-index:1;
  background:var(--tint,#123d91);
}
/* fill + contain rather than percentage max-height: a percentage max-height
   does not resolve against an aspect-ratio row, so the image overflowed */
.pdp__stage img{
  width:100%; height:100%;
  padding:22px 18px 16px;
  object-fit:contain;
  /* the transform is driven from JS on mousemove for the zoom, so keep the
     transition short enough that it tracks the cursor */
  transition:transform .18s ease-out;
}
.pdp__stage{ cursor:zoom-in; }
@media (hover:none){
  .pdp__stage{ cursor:default; }
  .only-hover{ display:none; }     /* no hover, no zoom to advertise */
}

.pdp__badge{
  position:absolute; top:12px; left:12px; z-index:2;
  padding:5px 11px; border-radius:100px;
  font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff; background:var(--ink);
}

.pdp__note{
  grid-column:1/-1;
  margin:10px 0 0;
  font-size:11.5px; color:var(--ink-faint); text-align:center;
}

/* ── details column ── */

.pdp__info{ grid-area:info; min-width:0; }

.pdp__name{
  margin:0;
  font-family:"Inter",sans-serif; font-weight:600;
  font-size:var(--t-lg); line-height:var(--lh-snug);
  letter-spacing:var(--tr-title);
}
.pdp__sub{ margin:6px 0 0; font-size:13.5px; color:var(--ink-soft); }

.pdp__rate{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:10px; text-decoration:none;
}
.pdp__rate b{ font-size:13px; font-weight:600; color:var(--ink); }
.pdp__rate span:last-child{
  font-size:12.5px; color:var(--link);
}
.pdp__rate:hover span:last-child{ text-decoration:underline; }

.pdp__sep{
  height:1px; background:var(--line);
  margin:14px 0;
}

.pdp__price{ display:flex; align-items:center; gap:10px; }
.pdp__price i{
  font-style:normal; font-size:17px; font-weight:500;
  color:var(--sale);
}
.pdp__price b{
  font-family:"Inter",sans-serif; font-weight:600;
  font-size:clamp(26px,2.5vw,34px); letter-spacing:-.02em;
  line-height:1;
}
.pdp__price b sup{ font-size:.55em; top:-.6em; font-weight:500; }

.pdp__mrp{
  margin:7px 0 0; font-size:12.5px; color:var(--ink-faint);
}
.pdp__mrp s{ color:var(--ink-faint); }
.pdp__tax{ margin:3px 0 0; font-size:12px; color:var(--ink-faint); }

.pdp__flabel{
  display:block; margin-bottom:9px;
  font-size:12.5px; color:var(--ink-soft);
}
.pdp__flabel b{ color:var(--ink); font-weight:600; }

.packs{ display:flex; flex-wrap:wrap; gap:8px; }
.pack{
  position:relative;
  display:grid; gap:1px; text-align:left;
  padding:8px 14px; border-radius:9px; cursor:pointer;
  border:1px solid rgba(10,18,32,.22); background:#fff;
  font-family:inherit;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.pack:hover{ border-color:var(--brand-2); }
.pack b{ font-size:13px; font-weight:600; }
.pack span{ font-size:11.5px; color:var(--ink-faint); }
.pack em{
  position:absolute; top:-8px; right:8px;
  font-style:normal; font-size:9px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:100px;
  color:#fff; background:var(--leaf);
}
.pack.is-on{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(18,61,145,.18);
}

.pdp__h4{
  margin:0 0 9px;
  font-family:"Inter",sans-serif; font-weight:600;
  font-size:14px; letter-spacing:0;
}

.pdp__bullets{
  list-style:none; margin:0; padding:0;
  display:grid; gap:7px;
}
.pdp__bullets li{
  position:relative; padding-left:16px;
  font-size:var(--t-sm); line-height:var(--lh-body); color:var(--ink-soft);
}
.pdp__bullets li::before{
  content:""; position:absolute; left:2px; top:8px;
  width:5px; height:5px; border-radius:50%;
  background:var(--ink-faint);
}

.pdp__specs{
  display:grid; gap:0; margin:14px 0 0;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.pdp__specs > div{
  display:grid; grid-template-columns:42% 1fr; gap:12px;
  padding:9px 14px;
  font-size:12.5px;
}
.pdp__specs > div:nth-child(odd){ background:#f7f9fb; }
.pdp__specs dt{ color:var(--ink-faint); }
.pdp__specs dd{ margin:0; font-weight:500; }

/* ── buy box ── */

.buybox{
  grid-area:buy;
  position:sticky; top:92px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  background:#fff;
  box-shadow:0 2px 10px -6px rgba(10,18,32,.18);
}

.buybox__price{
  margin:0;
  font-family:"Inter",sans-serif; font-weight:600;
  font-size:24px; letter-spacing:-.02em;
}
.buybox__ship{
  margin:8px 0 0; font-size:12.5px; color:var(--ink-soft);
}
.buybox__ship b{ color:var(--ink); font-weight:600; }
.buybox__free{
  margin:4px 0 0; font-size:12px; color:var(--leaf); font-weight:500;
}
.buybox__stock{
  margin:12px 0 0;
  font-size:16px; font-weight:600; color:#1d7a34;
}

.buybox__qty{
  display:flex; align-items:center; gap:8px;
  margin:12px 0 14px;
  font-size:12.5px; color:var(--ink-soft);
}
.buybox__qty select{
  font-family:inherit; font-size:13px; color:var(--ink);
  padding:6px 10px; border-radius:8px;
  border:1px solid rgba(10,18,32,.22);
  background:#f7f9fb; cursor:pointer;
}
.buybox__qty select:focus-visible{ outline:2px solid var(--brand-2); }

.bb__btn{
  display:block; width:100%;
  padding:12px 16px; margin-bottom:9px;
  border:0; border-radius:100px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.bb__btn:hover{ transform:translateY(-2px); }
.bb__add{
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 10px 24px -12px rgba(18,61,145,.7);
}
.bb__buy{
  color:#4a2a00; background:var(--amber);
}
.bb__buy:hover{ background:#ffb133; }

.buybox__meta{
  list-style:none; margin:14px 0 0; padding:13px 0 0;
  border-top:1px solid var(--line);
  display:grid; gap:6px;
  font-size:11.5px; color:var(--ink-faint);
}
.buybox__meta b{ color:var(--ink-soft); font-weight:500; }

/* ── product grid ── */

.shop__more{ padding-top:clamp(36px,5vh,60px); }
.shop__morehead{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px;
  justify-content:space-between; margin-bottom:20px;
}
.shop__morehead h3{ font-size:clamp(18px,2vw,24px); }
.shop__morehead p{ margin:0; font-size:12.5px; color:var(--ink-faint); }

.cards{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(198px,1fr));
}

.card{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:12px;
  background:#fff; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             border-color .3s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(10,18,32,.18);
  box-shadow:0 18px 36px -22px rgba(10,18,32,.3);
}
.card.is-on{ border-color:var(--brand); box-shadow:0 0 0 2px rgba(18,61,145,.14); }

.card__pick{
  position:relative;
  height:170px; padding:0;
  border:0; cursor:pointer; width:100%;
  background:#fff; overflow:hidden;
}
.card__pick::before{
  content:""; position:absolute; inset:0 0 auto; height:3px; z-index:1;
  background:var(--tint,#123d91);
}
.card__pick img{
  width:100%; height:100%;
  padding:16px 12px 10px;
  object-fit:contain;
  transition:transform .5s var(--ease);
}
.card:hover .card__pick img{ transform:scale(1.06); }

.card__off{
  position:absolute; top:12px; left:10px;
  padding:3px 8px; border-radius:5px;
  font-size:10px; font-weight:700;
  color:#fff; background:var(--sale);
}

.card__body{
  display:flex; flex-direction:column; flex:1;
  padding:12px 13px 14px;
  border-top:1px solid var(--line);
}
.card__badge{
  margin:0 0 6px;
  font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand);
}
.card__body h4{
  font-family:"Inter",sans-serif; font-weight:600;
  font-size:14px; line-height:1.35; letter-spacing:0; margin:0;
  /* two lines max, so every card in the row lines up */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.card__rate{
  display:flex; align-items:center; gap:7px; margin-top:7px;
}
.card__rate .stars{ width:58px; height:11px; }
.card__rate small{ font-size:11px; color:var(--link); }

.card__price{
  margin:9px 0 0; display:flex; align-items:baseline; gap:6px;
  flex-wrap:wrap;
}
.card__price b{
  font-family:"Inter",sans-serif; font-weight:600;
  font-size:18px; letter-spacing:-.02em;
}
.card__price b sup{ font-size:.58em; top:-.55em; font-weight:500; }
.card__price s{ font-size:11.5px; color:var(--ink-faint); }

.card__ship{
  margin:5px 0 0; font-size:11px; color:var(--ink-faint);
}
.card__ship b{ color:var(--ink-soft); font-weight:600; }

.card__add{
  width:100%; margin-top:12px;
  padding:9px 14px; border-radius:100px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600;
  color:#fff; background:var(--brand); border:1px solid var(--brand);
  transition:background .3s var(--ease);
}
.card__add:hover{ background:var(--brand-2); }

/* ── shop responsive ── */

/* the buy box drops under the gallery and details */
@media (max-width:1180px){
  .pdp{
    grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
    grid-template-areas:"gal info" "buy buy";
  }
  .buybox{
    position:static;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:0 24px; align-items:center;
  }
  .buybox__price{ grid-column:1; }
  .buybox__ship, .buybox__free, .buybox__stock{ grid-column:1; }
  .buybox__qty{ margin:0; }
  .bb__btn{ margin:0; }
  .buybox__meta{
    grid-column:1/-1; margin-top:14px;
    grid-auto-flow:column; grid-auto-columns:1fr;
  }
}

/* single column: the thumb rail lies down under the image */
@media (max-width:820px){
  .pdp{
    grid-template-columns:1fr;
    grid-template-areas:"gal" "info" "buy";
    gap:22px;
  }
  .pdp__gallery{ grid-template-columns:1fr; }
  .pdp__thumbs{
    order:2;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);
    gap:8px;
  }
  /* stacked, the column is full width — cap the box so the tall can does
     not sit in a wide squat frame */
  .pdp__stage{
    order:1; height:clamp(250px,58vw,340px);
    max-width:400px; margin-inline:auto; width:100%;
  }
  .pdp__thumbs{ max-width:400px; margin-inline:auto; width:100%; }
  .pdp__note{ order:3; }
  .buybox{ grid-template-columns:1fr 1fr; }
  .buybox__meta{ grid-auto-flow:row; grid-auto-columns:auto; }
}

@media (max-width:520px){
  .buybox{ grid-template-columns:1fr; gap:0; }
  .buybox__qty{ margin:12px 0 14px; }
  .bb__btn{ margin-bottom:9px; }
  .pdp__specs > div{ grid-template-columns:46% 1fr; padding:8px 11px; }
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .card__pick{ height:132px; }
  .card__body{ padding:10px 11px 12px; }
  .card__body h4{ font-size:13px; }
  .card__sub{ display:none; }
  .card__ship{ display:none; }
  .shop__morehead p{ display:none; }
}

/* ═══════════════ cart drawer ═══════════════ */

body.no-scroll{ overflow:hidden; }

/* the cart button itself lives with the header styles above */

.cart{
  position:fixed; inset:0; z-index:150;
  visibility:hidden;
}
.cart.is-open{ visibility:visible; }

.cart__veil{
  position:absolute; inset:0;
  background:rgba(8,14,26,.42);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity .45s var(--ease);
}
.cart.is-open .cart__veil{ opacity:1; }

.cart__panel{
  position:absolute; top:0 ; right:0; bottom:0;
  width:min(430px,100%);
  display:flex; flex-direction:column;
  background:var(--paper-2);
  box-shadow:-30px 0 70px -30px rgba(10,18,32,.4);
  transform:translateX(100%);
  transition:transform .55s var(--ease);
}
.cart.is-open .cart__panel{ transform:none; }

.cart__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:22px 24px;
  border-bottom:1px solid var(--line);
}
.cart__head h3{ font-size:19px; display:flex; align-items:baseline; gap:10px; }
.cart__head small{
  font-size:12px; font-weight:500; color:var(--ink-faint);
  font-family:"Inter",sans-serif; letter-spacing:0;
}
.cart__x{
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:none; cursor:pointer;
  transition:background .3s var(--ease);
}
.cart__x:hover{ background:#f1f4f8; }
.cart__x svg{
  width:15px; height:15px; fill:none; stroke:var(--ink);
  stroke-width:1.8; stroke-linecap:round;
}

.cart__body{ flex:1; overflow-y:auto; padding:8px 24px; }

.cart__empty{
  display:grid; justify-items:center; gap:16px;
  padding:64px 0; text-align:center;
}
.cart__empty svg{
  width:44px; height:44px; fill:none; stroke:var(--ink-faint);
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
}
.cart__empty p{ margin:0; font-size:14px; color:var(--ink-soft); }

.line{
  display:grid; grid-template-columns:64px 1fr auto;
  gap:14px; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.line > img{
  width:64px; height:64px; padding:5px;
  border-radius:12px; object-fit:contain;
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--tint,#123d91);
}
.line__mid h5{
  margin:0; font-size:14px; font-weight:600;
  font-family:"Inter",sans-serif; letter-spacing:0;
}
.line__mid p{ margin:3px 0 9px; font-size:12px; color:var(--ink-faint); }
.line__end{ display:grid; justify-items:end; gap:7px; }
.line__end b{
  font-family:"Manrope",sans-serif; font-weight:800; font-size:15px;
}
.line__x{
  border:0; background:none; cursor:pointer; padding:0;
  font-family:inherit; font-size:11.5px; color:var(--ink-faint);
  text-decoration:underline; text-underline-offset:2px;
  transition:color .3s var(--ease);
}
.line__x:hover{ color:#c0392b; }

/* ── checkout: the details that go into the WhatsApp message ── */

.co{
  flex:1; overflow-y:auto;
  padding:16px 20px 20px;
  display:grid; gap:14px; align-content:start;
}
.co[hidden]{ display:none; }

.co__back{
  justify-self:start;
  border:0; background:none; cursor:pointer; padding:0;
  font-family:inherit; font-size:var(--t-sm); font-weight:600;
  color:var(--brand);
  transition:opacity .25s var(--ease);
}
.co__back:hover{ opacity:.7; }

.co__lead{
  margin:0; padding:12px 14px;
  border-radius:12px;
  background:rgba(31,170,83,.08);
  border:1px solid rgba(31,170,83,.2);
  font-size:var(--t-sm); line-height:1.6; color:var(--ink-soft);
}

.co__field{ display:grid; gap:6px; }
.co__field > span{
  font-size:var(--t-sm); font-weight:500; color:var(--ink-soft);
}
.co__field i{ font-style:normal; color:var(--sale); }
.co__field em{ font-style:normal; color:var(--ink-faint); }

.co__field input,
.co__field textarea{
  width:100%;
  padding:11px 14px;
  border:1px solid var(--line); border-radius:11px;
  background:#fff; color:var(--ink);
  font-family:inherit;
  /* iOS zooms the whole page in when a field under 16px is tapped */
  font-size:max(16px, var(--t-base));
  line-height:1.45;
  resize:vertical;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.co__field input::placeholder,
.co__field textarea::placeholder{ color:var(--ink-faint); }
.co__field input:focus,
.co__field textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(18,61,145,.14);
}

.co__row{
  display:grid; gap:14px;
  grid-template-columns:1fr 1fr;
}

.co__err{
  margin:0; padding:10px 13px;
  border-radius:10px;
  background:rgba(196,41,28,.08);
  border:1px solid rgba(196,41,28,.24);
  font-size:var(--t-sm); color:var(--sale);
}
.co__err[hidden]{ display:none; }

/* ── after the order has been handed to WhatsApp ── */

.co__sent{
  flex:1; overflow-y:auto;
  display:grid; align-content:center; justify-items:center;
  gap:14px; padding:40px 24px; text-align:center;
}
.co__sent[hidden]{ display:none; }

.co__tick{
  display:grid; place-items:center;
  width:58px; height:58px; border-radius:50%;
  background:rgba(31,170,83,.12);
  animation:tickPop .5s var(--ease-out);
}
.co__tick svg{
  width:26px; height:26px; fill:none; stroke:#1faa53;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
@keyframes tickPop{
  from{ transform:scale(.6); opacity:0; }
  to  { transform:none; opacity:1; }
}
.co__sent h4{
  margin:0; font-family:"Manrope",sans-serif; font-weight:800;
  font-size:var(--t-md); letter-spacing:var(--tr-title);
}
.co__sent p{
  margin:0; max-width:34ch;
  font-size:var(--t-sm); line-height:1.65; color:var(--ink-soft);
}
.co__sentbtns{
  display:grid; gap:9px; width:100%; max-width:300px; margin-top:6px;
}
.co__sentbtns .btn{ justify-content:center; }

/* [hidden] has to win over the flex/grid display these carry */
.cart__body[hidden], .cart__foot[hidden],
#coSend[hidden], #cartCheckout[hidden]{ display:none !important; }

.cart__foot{
  padding:20px 24px 24px;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.cart__row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13.5px; color:var(--ink-soft); margin-bottom:9px;
}
.cart__row b{ color:var(--ink); font-weight:600; }
.cart__row--tot{
  padding-top:11px; margin-top:4px; margin-bottom:6px;
  border-top:1px solid var(--line);
  font-size:15px; color:var(--ink);
}
.cart__row--tot b{
  font-family:"Manrope",sans-serif; font-weight:800; font-size:21px;
}
.cart__note{
  margin:0 0 14px; font-size:11.5px; color:var(--leaf); font-weight:500;
}
.cart__checkout{ width:100%; justify-content:center; }
.cart__demo{
  margin:12px 0 0; text-align:center;
  font-size:11px; color:var(--ink-faint);
}

/* ── toast ── */

.toast{
  position:fixed; z-index:180;
  left:50%; bottom:28px; transform:translate(-50%,16px);
  max-width:calc(100vw - 32px);
  padding:13px 22px; border-radius:100px;
  font-size:13.5px; font-weight:500; color:#fff;
  background:var(--ink);
  box-shadow:0 20px 44px -18px rgba(10,18,32,.5);
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ═══════════════ following sections ═══════════════ */

.kicker{
  margin:0 0 14px;
  font-size:var(--t-xs); font-weight:600; letter-spacing:var(--tr-caps);
  text-transform:uppercase; color:var(--brand);
}

.strip{
  position:relative; z-index:5;
  padding:clamp(80px,11vh,150px) var(--pad);
  background:var(--paper-2);
  border-top:1px solid var(--line);
}
.strip__head{ max-width:760px; margin-bottom:clamp(44px,6vh,76px); }
.strip__head h2{
  font-size:var(--t-3xl); line-height:var(--lh-title);
  letter-spacing:var(--tr-display);
}

.strip__grid{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  background:var(--line);
  border:1px solid var(--line);
  border-radius:20px; overflow:hidden;
}
.strip__grid article{
  padding:clamp(26px,3vw,40px);
  background:var(--paper-2);
  transition:background .45s var(--ease);
}
.strip__grid article:hover{ background:#f8fafc; }
.strip__grid b{
  font-family:"Manrope",sans-serif; font-size:12px; letter-spacing:.14em;
  color:var(--brand); display:block; margin-bottom:18px;
}
.strip__grid h3{ font-size:var(--t-md); margin-bottom:10px; }
.strip__grid p{
  margin:0; font-size:var(--t-base); line-height:var(--lh-body);
  color:var(--ink-soft);
}

/* ═══════════════ SECTION 4 — the closing film ═══════════════ */

.finale{
  position:relative; z-index:5;
  height:720vh;                      /* the scroll track */
  background:#05080f;
}

.finale__stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:#05080f;
  color:#fff;
}
/* a permanent scrim under the nav: while the aperture is still a slit the
   film's own scrim is nowhere near the top of the screen */
.finale__stage::before{
  content:""; position:absolute; inset:0 0 auto; height:180px; z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(4,7,14,.85) 0%, rgba(4,7,14,.35) 45%, transparent 100%);
}

.finale__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(70% 55% at 50% 4%,  rgba(47,111,224,.30), transparent 62%),
    radial-gradient(55% 45% at 88% 96%, rgba(87,168,58,.20),  transparent 64%),
    radial-gradient(60% 50% at 8% 88%,  rgba(18,61,145,.28),  transparent 66%),
    linear-gradient(180deg,#070b14 0%, #05080f 58%, #04060c 100%);
}
.finale__grain{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  pointer-events:none;
}

.kicker--light{ color:#8fc0ff; }

/* ── intro: read it, then the aperture wipes over it ── */

.finale__intro{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(88px,12vh,132px) var(--pad) clamp(34px,5vh,56px);
  pointer-events:none;
}
/* two lines only — a third would sit behind the opening slit */
.finale__introtop h2{
  margin:0;
  font-size:var(--t-3xl);
  line-height:var(--lh-title); letter-spacing:var(--tr-display);
}
.finale__introtop h2 em{
  font-style:normal;
  background:linear-gradient(100deg,#8fc0ff 0%,#a6e88a 62%,#fff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.finale__introfoot{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:20px;
  justify-content:space-between;
}
.finale__introfoot p{
  margin:0; max-width:44ch;
  font-size:var(--t-base); line-height:var(--lh-body);
  color:rgba(255,255,255,.6);
}
.finale__cue{
  display:inline-flex; align-items:center; gap:10px;
  font-size:10.5px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
  white-space:nowrap;
}
.finale__cue i{
  width:34px; height:1px; position:relative; overflow:hidden;
  background:rgba(255,255,255,.2);
}
.finale__cue i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,#8fc0ff);
  animation:runx 2s var(--ease) infinite;
}
@keyframes runx{
  0%  { transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}

/* ── closing layout the film contracts into ── */

.finale__grid{
  position:absolute; inset:0; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  align-items:center;
  gap:clamp(24px,4vw,64px);
  padding:96px var(--pad) 72px;
  opacity:0;
}
.finale__slot{ height:min(74vh,700px); }

.finale__copy h3{
  margin:16px 0 0;
  font-size:var(--t-2xl); line-height:var(--lh-title);
  letter-spacing:var(--tr-display);
}
.finale__list{
  list-style:none; margin:32px 0 0; padding:0;
  display:grid; gap:1px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; overflow:hidden;
}
.finale__list li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px;
  padding:14px 18px;
  background:rgba(255,255,255,.04);
}
.finale__list b{ font-size:14px; font-weight:600; }
.finale__list span{ font-size:12.5px; color:rgba(255,255,255,.52); }

.finale__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

.btn--light{
  color:#0a1220; background:#fff;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.6);
}
.btn--light:hover{ transform:translateY(-3px); }
.btn--outline{
  color:#fff; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.05);
}
.btn--outline:hover{ transform:translateY(-3px); border-color:#fff; }
.btn--outline span{ transition:transform .4s var(--ease); }
.btn--outline:hover span{ transform:translate(2px,-2px); }

/* ── the aperture itself ── */

.film{
  position:absolute; z-index:3; margin:0;
  overflow:hidden;
  background:#04060c;
  will-change:width, height, top, left;
  opacity:0; transform:scale(.985);
  transition:opacity .9s var(--ease), transform 1.1s var(--ease);
  box-shadow:0 40px 110px -40px rgba(0,0,0,.9);
}
.film.is-in{ opacity:1; transform:none; }
.film canvas{ width:100%; height:100%; }

/* the render is a bright white studio floor: the nav and the step text
   need their own gradients over it */
.film__scrim{
  position:absolute; inset:0; pointer-events:none;
  opacity:var(--full,0);
  background:
    linear-gradient(180deg, rgba(4,7,14,.66) 0%, rgba(4,7,14,.16) 15%, transparent 28%),
    linear-gradient(0deg,   rgba(4,7,14,.80) 0%, rgba(4,7,14,.42) 24%, transparent 55%),
    radial-gradient(125% 95% at 50% 45%, transparent 48%, rgba(4,7,14,.38) 100%);
  transition:opacity .25s linear;
}

/* light leaking from the slit edges before it opens */
.film__edge{
  position:absolute; inset:0; pointer-events:none;
  opacity:var(--edge,1);
  background:
    linear-gradient(180deg, rgba(143,192,255,.9) 0, transparent 2px),
    linear-gradient(0deg,   rgba(166,232,138,.9) 0, transparent 2px);
}
.film__edge::after{
  content:""; position:absolute; inset:-40% 0;
  background:radial-gradient(50% 50% at 50% 50%, rgba(143,192,255,.22), transparent 70%);
}

/* one pass of light at the moment it reaches full screen */
.film__sweep{
  position:absolute; inset:0; pointer-events:none;
  opacity:var(--sweep,0);
  background:linear-gradient(105deg,
    transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%);
  mix-blend-mode:screen;
}

/* ── step captions ── */

.steps{
  position:absolute; inset:auto 0 0 0; z-index:4;
  pointer-events:none;
}
.step{
  position:absolute; bottom:clamp(76px,10vh,120px);
  left:clamp(24px,5vw,86px); right:clamp(24px,5vw,86px);
  max-width:600px;
  opacity:0; transform:translateY(30px);
  transition:opacity .55s var(--ease), transform .8s var(--ease);
}
.step.is-on{ opacity:1; transform:none; }
.step span{
  display:inline-block; margin-bottom:12px;
  padding:5px 12px; border-radius:100px;
  font-size:10px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
}
.step h3{
  font-size:var(--t-3xl); line-height:var(--lh-display);
  letter-spacing:var(--tr-display); color:#fff;
  text-shadow:0 8px 50px rgba(0,0,0,.6);
}
.step p{
  margin:14px 0 0; max-width:42ch;
  font-size:var(--t-base); line-height:var(--lh-body);
  color:rgba(255,255,255,.8);
}

/* ── progress rail ── */

.filmbar{
  position:absolute; z-index:4;
  left:clamp(24px,5vw,86px); right:clamp(24px,5vw,86px);
  bottom:clamp(30px,4vh,48px);
  opacity:var(--bar,0);           /* only once the aperture is fully open */
  transition:opacity .35s linear;
}
.filmbar__line{
  height:2px; border-radius:2px;
  background:rgba(255,255,255,.2); overflow:hidden;
}
.filmbar__line i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#8fc0ff,#a6e88a);
}
.filmbar__ticks{
  display:flex; gap:26px; margin-top:12px;
}
.filmbar__ticks b{
  font-size:10px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.34);
  transition:color .4s var(--ease);
}
.filmbar__ticks b.is-on{ color:#fff; }

/* ═══════════════ search · filter · sort ═══════════════ */

.tools{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-bottom:14px;
}

.tools__search{
  position:relative; flex:1 1 260px; min-width:0;
  display:flex; align-items:center;
}
.tools__search > svg{
  position:absolute; left:13px; width:16px; height:16px;
  fill:none; stroke:var(--ink-faint); stroke-width:1.8;
  stroke-linecap:round; pointer-events:none;
}
.tools__search input{
  width:100%; height:42px;
  padding:0 38px 0 38px;
  border:1px solid var(--line); border-radius:100px;
  background:#fff; color:var(--ink);
  font-family:inherit; font-size:13.5px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tools__search input::placeholder{ color:var(--ink-faint); }
.tools__search input:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(18,61,145,.14);
}
.tools__search input::-webkit-search-cancel-button{ display:none; }
.tools__search button{
  position:absolute; right:8px;
  display:grid; place-items:center;
  width:26px; height:26px; border-radius:50%;
  border:0; background:#eef1f5; cursor:pointer;
  transition:background .25s var(--ease);
}
.tools__search button:hover{ background:#e2e7ee; }
.tools__search button svg{
  width:12px; height:12px; fill:none; stroke:var(--ink-soft);
  stroke-width:2; stroke-linecap:round;
}

.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  padding:9px 16px; border-radius:100px; cursor:pointer;
  border:1px solid var(--line); background:#fff;
  font-family:inherit; font-size:12.5px; font-weight:500;
  color:var(--ink-soft);
  transition:border-color .25s var(--ease), background .25s var(--ease),
             color .25s var(--ease);
}
.chip:hover{ border-color:rgba(10,18,32,.26); color:var(--ink); }
.chip.is-on{
  background:var(--ink); border-color:var(--ink); color:#fff;
}

.tools__sort{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--ink-faint);
}
.tools__sort select{
  height:42px; padding:0 12px;
  border:1px solid var(--line); border-radius:100px;
  background:#fff; color:var(--ink);
  font-family:inherit; font-size:13px; cursor:pointer;
}
.tools__sort select:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(18,61,145,.14);
}

.tools__count{
  margin:0 0 16px; font-size:12.5px; color:var(--ink-faint);
}
.tools__count b{ color:var(--ink); font-weight:600; }

.tools__none{
  margin:28px 0 0; padding:34px 0;
  text-align:center; font-size:14px; color:var(--ink-soft);
  border:1px dashed var(--line); border-radius:14px;
}
.tools__none button{
  border:0; background:none; cursor:pointer; padding:0;
  font-family:inherit; font-size:14px; font-weight:600;
  color:var(--brand); text-decoration:underline;
  text-underline-offset:3px;
}

/* ═══════════════ SECTION 3 — the story ═══════════════ */

.story{
  position:relative; z-index:5;
  padding:clamp(76px,10vh,136px) var(--pad);
  background:var(--paper);
  border-top:1px solid var(--line);
}

.story__head{ max-width:900px; margin-bottom:clamp(40px,6vh,72px); }
.story__head h2{
  margin-top:14px;
  font-size:var(--t-3xl); line-height:var(--lh-title);
  letter-spacing:var(--tr-display);
}
.story__head em{
  font-style:normal;
  background:linear-gradient(100deg,var(--brand) 0%,var(--brand-2) 50%,var(--leaf) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

.story__body{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:clamp(26px,4vw,68px);
  align-items:start;
}

.story__text{ max-width:62ch; }
.story__lead{
  margin:0 0 20px;
  font-family:"Manrope",sans-serif; font-weight:700;
  font-size:var(--t-lg); line-height:var(--lh-snug);
  letter-spacing:var(--tr-title); color:var(--ink);
}
.story__text p{
  margin:0 0 18px;
  font-size:var(--t-md); line-height:var(--lh-body); color:var(--ink-soft);
}
.story__sign{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  margin:26px 0 0 !important; padding-top:20px;
  border-top:1px solid var(--line);
}
.story__sign b{
  font-family:"Manrope",sans-serif; font-size:15px; color:var(--ink);
}
.story__sign span{ font-size:12.5px; color:var(--ink-faint); }

.story__cards{ display:grid; gap:14px; }

.vm{
  padding:clamp(20px,2.4vw,30px);
  border:1px solid var(--line); border-radius:18px;
  background:var(--paper-2);
  box-shadow:var(--sh-1);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease);
}
.vm:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); }

.vm__ico{
  display:grid; place-items:center;
  width:40px; height:40px; margin-bottom:16px;
  border-radius:11px;
  color:var(--brand);
  background:rgba(18,61,145,.08);
}
.vm__ico svg{
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.vm h3{ font-size:var(--t-md); margin-bottom:9px; }
.vm p{
  margin:0; font-size:var(--t-base); line-height:var(--lh-body);
  color:var(--ink-soft);
}

.story__stats{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  list-style:none; margin:clamp(40px,6vh,72px) 0 0; padding:0;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:18px; overflow:hidden;
}
.story__stats li{
  display:grid; gap:6px; align-content:start;
  padding:clamp(18px,2.2vw,26px);
  background:var(--paper-2);
}
.story__stats b{
  font-family:"Manrope",sans-serif; font-weight:800;
  font-size:var(--t-lg); letter-spacing:var(--tr-title);
}
.story__stats span{
  font-size:var(--t-sm); line-height:var(--lh-snug); color:var(--ink-faint);
}

/* ═══════════════ SECTION 5 — contact ═══════════════ */

.contact{
  position:relative; z-index:5;
  padding:clamp(76px,10vh,136px) var(--pad);
  background:var(--paper-2);
  border-top:1px solid var(--line);
}

.contact__head{ max-width:640px; margin-bottom:clamp(32px,4.5vh,56px); }
.contact__head h2{
  margin-top:14px;
  font-size:var(--t-3xl); line-height:var(--lh-title);
  letter-spacing:var(--tr-display);
}
.contact__lede{
  margin:16px 0 0; font-size:var(--t-md); line-height:var(--lh-body);
  color:var(--ink-soft);
}

.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(22px,3vw,44px);
  align-items:start;
}

.contact__info{ display:grid; gap:18px; }

.cbox{ display:grid; gap:4px; }
.cbox__label{
  margin:0 0 6px;
  font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);
}
.cbox__big{
  font-family:"Manrope",sans-serif; font-weight:800;
  font-size:var(--t-lg); letter-spacing:var(--tr-title);
  color:var(--ink); text-decoration:none;
  transition:color .25s var(--ease);
}
.cbox__big--sm{ font-size:clamp(16px,1.6vw,20px); }
.cbox__big:hover{ color:var(--brand); }

.cbox address{
  font-style:normal; font-size:var(--t-base); line-height:var(--lh-body);
  color:var(--ink-soft);
}
.cbox address span{
  display:block; margin-top:5px;
  font-size:12.5px; color:var(--ink-faint);
}
.cbox__link{
  margin-top:8px; font-size:13px; font-weight:500;
  color:var(--link); text-decoration:none;
}
.cbox__link:hover{ text-decoration:underline; }

.contact__actions{ display:flex; flex-wrap:wrap; gap:10px; }

.btn--wa{
  color:#fff; background:#1faa53;
  box-shadow:0 14px 30px -14px rgba(31,170,83,.6);
}
.btn--wa:hover{ transform:translateY(-3px); background:#24bd5d; }
.btn--wa svg{
  width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

.social__row{ display:flex; flex-wrap:wrap; gap:8px; }
.social__btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px 9px 12px; border-radius:100px;
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink-soft);
  text-decoration:none;
  transition:border-color .25s var(--ease), color .25s var(--ease),
             transform .3s var(--ease-out);
}
.social__btn:hover{
  transform:translateY(-2px);
  border-color:var(--brand); color:var(--brand);
}
.social__btn svg{
  width:17px; height:17px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

.contact__map{
  overflow:hidden;
  border:1px solid var(--line); border-radius:20px;
  background:#eef1f5;
  box-shadow:var(--sh-2);
}
.contact__map iframe{
  display:block; width:100%; height:clamp(320px,46vh,480px);
  border:0;
}

/* ═══════════════ floating WhatsApp ═══════════════ */

.wafab{
  position:fixed; z-index:120;
  right:clamp(16px,2.4vw,28px); bottom:clamp(16px,2.4vw,28px);
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 20px 13px 16px; border-radius:100px;
  color:#fff; background:#1faa53; text-decoration:none;
  font-size:13.5px; font-weight:600;
  box-shadow:0 18px 40px -14px rgba(31,170,83,.65),
             0 2px 8px rgba(10,18,32,.18);
  transition:transform .35s var(--ease-out), background .3s var(--ease);
}
.wafab:hover{ transform:translateY(-3px); background:#24bd5d; }
.wafab svg{
  width:20px; height:20px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
/* the cart drawer and the menu sit above it */
body.no-scroll .wafab{ opacity:0; pointer-events:none; }

@media (max-width:560px){
  .wafab{ padding:14px; }
  .wafab span{ display:none; }
}

/* ═══════════════ footer ═══════════════ */

.foot{
  position:relative; z-index:5;
  padding:clamp(48px,7vh,80px) var(--pad) 0;
  background:#0a1220; color:rgba(255,255,255,.55);
  font-size:13px;
}

.foot__top{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,4vw,56px);
  padding-bottom:clamp(36px,5vh,56px);
}

.foot__mark{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Manrope",sans-serif; font-weight:800; letter-spacing:-.04em;
  font-size:20px; color:#fff;
}
.foot__mark img{
  width:auto; height:30px;
  object-fit:contain;
  /* the mark's darkest blue would sink into the near-black footer */
  filter:drop-shadow(0 0 8px rgba(255,255,255,.45));
}
.foot__mark b{ color:#9be07a; }

.foot__tag{
  margin:14px 0 0;
  font-family:"Manrope",sans-serif; font-weight:700;
  font-size:15px; color:rgba(255,255,255,.9); letter-spacing:-.01em;
}
.foot__desc{
  margin:10px 0 0; max-width:42ch; line-height:1.72;
  font-size:13px;
}

.foot__social{ display:flex; gap:9px; margin-top:20px; }
.foot__social a{
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:11px;
  color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.16);
  transition:color .25s var(--ease), border-color .25s var(--ease),
             background .25s var(--ease), transform .3s var(--ease-out);
}
.foot__social a:hover{
  color:#fff; border-color:#fff; background:rgba(255,255,255,.08);
  transform:translateY(-2px);
}
.foot__social svg{
  width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

.foot__col{ display:grid; gap:9px; align-content:start; }
.foot__label{
  margin:0 0 4px;
  font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.4);
}
.foot__col a{
  color:rgba(255,255,255,.62); text-decoration:none;
  transition:color .25s var(--ease);
}
.foot__col a:hover{ color:#fff; }
.foot__col address{
  font-style:normal; line-height:1.7; margin-top:4px;
  color:rgba(255,255,255,.48);
}

.foot__bar{
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; justify-content:space-between;
  padding:20px 0 24px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12px; color:rgba(255,255,255,.42);
}

/* ═══════════════ new sections responsive ═══════════════ */

@media (max-width:980px){
  .story__body{ grid-template-columns:1fr; }
  .story__cards{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
  .contact__grid{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot__brand{ grid-column:1/-1; }
}

@media (max-width:700px){
  .tools{ gap:8px; }
  .tools__sort{ flex:1 1 100%; }
  .tools__sort select{ flex:1; }
  .chips{ flex:1 1 100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ flex:0 0 auto; }
}

@media (max-width:560px){
  .foot__top{ grid-template-columns:1fr; }
  .contact__actions .btn{ flex:1; justify-content:center; }
}

/* ═══════════════ entry reveal ═══════════════ */

.media{
  opacity:0; transform:scale(.962);
  transition:opacity .9s var(--ease), transform 1.2s var(--ease);
}
.media.is-in{ opacity:1; transform:none; }

.copy > *{ opacity:0; transform:translateY(22px); }

body.is-ready .copy > *{
  animation:rise .95s var(--ease) forwards;
}
body.is-ready .copy > *:nth-child(1){ animation-delay:.05s; }
body.is-ready .copy > *:nth-child(2){ animation-delay:.14s; }
body.is-ready .copy > *:nth-child(3){ animation-delay:.24s; }
body.is-ready .copy > *:nth-child(4){ animation-delay:.34s; }
body.is-ready .copy > *:nth-child(5){ animation-delay:.44s; }

@keyframes rise{
  to{ opacity:1; transform:none; }
}

/* ═══════════════ responsive ═══════════════ */

@media (max-width:1040px){
  .finale__grid{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    align-content:center;
    gap:clamp(20px,3vh,32px);
    padding:86px var(--pad) 60px;
  }
  .finale__slot{ height:min(34vh,320px); }
}

@media (max-width:980px){
  .hero{ height:680vh; }
  .finale{ height:640vh; }
  .hero__grid{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    align-content:center;
    gap:clamp(24px,3.2vh,34px);
    padding:82px var(--pad) 60px;
  }
  .copy__stats{ margin-top:30px; padding-top:22px; }
  .hero__slot{ height:min(38vh,340px); }
  /* the stacked card already invites the scroll, and it sits where
     the hint would be */
  .scrollhint{ display:none; }
}

@media (max-width:760px){
  /* the type scale already handles these two — overriding them here only
     made the hero smaller than the rest of the page */
  /* the stacked hero has to clear the nav and still leave room for the
     card, so the stat row steps out below this width */
  .copy__stats{ display:none; }
  .hero__slot{ height:min(29vh,290px); }
  .media__tag{ bottom:12px; left:12px; font-size:10px; }
  .media__frameline{ inset:12px; }

  .nav__cta{ display:none; }          /* the cart button is the action here */
  .cart__panel{ width:100%; }

  .finale__introfoot p{ display:none; }   /* the cue alone is enough here */
  .finale__list li{ padding:12px 14px; }
  .finale__actions .btn{ flex:1; justify-content:center; }
  .step{ bottom:clamp(64px,9vh,96px); }
  .filmbar__ticks{ gap:18px; }
}

@media (max-width:370px){
  .cards{ grid-template-columns:1fr; }
}

/* ═══════════════ reduced motion ═══════════════ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .media__tag i, .scrollhint i::after{ animation:none; }
  .media{ transition:opacity .3s linear; transform:none; }
  .copy > *{ opacity:1; transform:none; }
  body.is-ready .copy > *{ animation:none; }
  .chapter{ transition:opacity .2s linear; }
  .film{ transition:opacity .3s linear; transform:none; }
  .step{ transition:opacity .2s linear; }
  .finale__cue i::after{ animation:none; }
}