/* =============================================================================
   AMB Walk'n Talk — storefront stylesheet
   Palette: graphite + grey, chrome accents, a deep, muted green.
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
:root{
  --bg:            #eef0f2;
  --bg-2:          #ffffff;
  --bg-3:          #f7f8f9;
  --bg-4:          #d8dbde;

  --surface:       rgba(14,17,20,.04);
  --surface-2:     rgba(14,17,20,.075);
  --line:          rgba(14,17,20,.11);
  --line-strong:   rgba(14,17,20,.24);

  --text:          #0e1114;
  --text-2:        #52585f;
  --text-3:        #83898f;

  --green:         #01411c;
  --green-dark:    #012a12;
  --green-light:   #0f6b30;
  --green-tint:    #e6ece8;

  --chrome: linear-gradient(180deg,
              #888e93 0%, #e6e8ea 26%, #52585d 50%,
              #c7cbce 72%, #6b7075 100%);

  --radius-sm:     10px;
  --radius:        16px;
  --radius-lg:     24px;

  --shadow-sm:     0 1px 3px rgba(14,17,20,.07), 0 6px 16px -8px rgba(14,17,20,.12);
  --shadow:        0 4px 12px rgba(14,17,20,.05), 0 28px 60px -28px rgba(14,17,20,.28);
  --shadow-lg:     0 40px 100px -30px rgba(14,17,20,.35);

  --ease:          cubic-bezier(.22,1,.36,1);
  --ease-io:       cubic-bezier(.65,0,.35,1);

  --container:     1280px;
  --gutter:        clamp(20px, 5vw, 64px);
  --nav-h:         72px;
  --topbar-h:      34px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* -------------------------------------------------------------------- BASE */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.035em; line-height:1.06; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

::selection{ background:rgba(1,65,28,.22); color:var(--text); }

:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
  border-radius:6px;
}

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

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:2000;
  background:var(--text); color:#fff; padding:10px 16px; border-radius:10px;
  font-size:14px; font-weight:600; transition:top .2s var(--ease);
}
.skip-link:focus{ top:14px; }

/* ------------------------------------------------------------- TYPE HELPERS */
.chrome{
  background:var(--chrome);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-stroke:.4px rgba(14,17,20,.14);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9));
}

.eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--green);
}

.lead{ color:var(--text-2); font-size:clamp(15.5px,1.55vw,18px); max-width:56ch; }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 13px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--bg-3); color:var(--text-2);
}
.pill--green{ background:var(--green-tint); color:var(--green-dark); }

/* --------------------------------------------------------------- UTILITIES */
.section{
  position:relative;
  padding:clamp(72px,10vh,132px) var(--gutter);
  max-width:var(--container);
  margin-inline:auto;
}

.section__head{ margin-bottom:clamp(36px,5vw,64px); }

.section__title{
  font-size:clamp(32px,5.6vw,66px);
  letter-spacing:-.04em;
  margin:12px 0 18px;
}

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  will-change:opacity,transform;
}
.reveal.is-in{ opacity:1; transform:none; }

/* ------------------------------------------------------------------ LOADER */
.loader{
  position:fixed; inset:0; z-index:3000;
  display:grid; place-items:center;
  background:var(--bg);
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__inner{ text-align:center; }
.loader__logo{
  width:min(180px,44vw); height:auto; margin-inline:auto;
  animation:logoIn 1s var(--ease) both;
}
@keyframes logoIn{ from{ opacity:0; transform:translateY(14px) scale(.95); } to{ opacity:1; transform:none; } }

.loader__bar{
  width:min(200px,46vw); height:2px; margin:26px auto 0;
  background:var(--bg-3); border-radius:2px; overflow:hidden;
}
.loader__bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--green-light),var(--green));
  animation:loadBar 1.15s var(--ease-io) forwards;
}
@keyframes loadBar{ to{ width:100%; } }

/* ------------------------------------------------------ PROGRESS / CURSOR */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:1200;
  pointer-events:none;
}
.scroll-progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--green-light),var(--green));
}


/* ------------------------------------------------------------------ TOPBAR */
.topbar{
  height:var(--topbar-h);
  background:linear-gradient(90deg, var(--green-dark), var(--green));
  color:#fff;
  display:flex; align-items:center;
  overflow:hidden;
}
.topbar__track{
  display:flex; align-items:center; gap:16px; width:max-content;
  padding-inline:var(--gutter);
  font-size:12px; font-weight:600; letter-spacing:.02em; color:#fff;
  white-space:nowrap;
  animation:topbarSlide 22s linear infinite;
}
.topbar__track i{ color:rgba(255,255,255,.55); font-style:normal; }
@keyframes topbarSlide{ to{ transform:translateX(-50%); } }

/* --------------------------------------------------------------------- NAV */
.nav{
  position:sticky; top:0; z-index:1100;
  height:var(--nav-h);
  background:linear-gradient(180deg, rgba(58,122,92,.22), rgba(233,237,234,.55));
  -webkit-backdrop-filter:saturate(200%) blur(20px);
  backdrop-filter:saturate(200%) blur(20px);
  border-bottom:1.5px solid rgba(1,65,28,.28);
  transition:border-color .4s, box-shadow .4s;
}
.nav.is-stuck{ border-bottom-color:rgba(1,65,28,.4); box-shadow:0 4px 26px -10px rgba(1,65,28,.35); }

.nav__inner{
  height:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:22px;
}

.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand img{ height:46px; width:auto; }
.brand--footer img{ height:62px; }

.nav__links{ display:flex; gap:2px; margin-inline:auto; }
.nav__links a{
  position:relative; padding:9px 15px; border-radius:999px;
  font-size:14px; font-weight:500; color:var(--text-2);
  transition:color .25s, background-color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:50%; bottom:3px;
  width:0; height:2px; border-radius:2px; background:var(--green);
  transform:translateX(-50%); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--text); background:var(--surface); }
.nav__links a:hover::after,
.nav__links a.is-active::after{ width:16px; }
.nav__links a.is-active{ color:var(--text); }

.nav__actions{ display:flex; align-items:center; gap:8px; }

.icon-btn{
  position:relative;
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:50%; color:var(--text-2);
  border:1px solid transparent;
  transition:background-color .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.icon-btn:hover{ background:var(--surface); color:var(--text); border-color:var(--line); transform:translateY(-1px); }

.badge{
  position:absolute; top:-2px; right:-2px;
  min-width:17px; height:17px; padding:0 4px;
  display:grid; place-items:center;
  border-radius:9px; background:var(--green); color:#fff;
  font-size:10px; font-weight:700; line-height:1;
  transform:scale(0); transition:transform .32s var(--ease);
}
.badge.is-on{ transform:scale(1); }

/* ----------------------------------------------------------------- BUTTONS */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:14px 26px; border-radius:999px;
  font-size:15px; font-weight:600; white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             background-color .3s, color .3s, border-color .3s;
}
.btn--sm{ padding:10px 18px; font-size:13.5px; }
.btn--block{ width:100%; }

.btn--primary{
  color:#fff; background:var(--green);
  box-shadow:0 8px 24px -10px rgba(1,65,28,.7);
}
.btn--primary:hover{
  background:var(--green-dark);
  transform:translateY(-2px);
  box-shadow:0 14px 34px -12px rgba(1,65,28,.75);
}

.btn--ghost{
  color:var(--text); border:1px solid var(--line-strong); background:transparent;
}
.btn--ghost:hover{ background:var(--surface); transform:translateY(-2px); }

/* Burger */
.burger{
  display:none; width:38px; height:38px; border-radius:10px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger i{
  display:block; width:18px; height:1.7px; border-radius:2px; background:var(--text);
  transition:transform .35s var(--ease);
}
.burger[aria-expanded="true"] i:first-child{ transform:translateY(3.35px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child{ transform:translateY(-3.35px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:calc(var(--nav-h) + var(--topbar-h)) 0 auto 0; z-index:1050;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--line);
  padding:12px var(--gutter) 28px;
  transform:translateY(-12px); opacity:0;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  box-shadow:var(--shadow);
}
.mobile-menu.is-open{ opacity:1; transform:none; }
.mobile-menu nav{ display:flex; flex-direction:column; }
.mobile-menu a{
  padding:16px 4px; font-size:19px; font-weight:600;
  border-bottom:1px solid var(--line);
}
.mobile-menu a:last-child{ border-bottom:0; }
.mobile-menu__cta{
  margin-top:18px; text-align:center; border-radius:999px;
  background:var(--green); color:#fff; padding:15px !important; font-size:16px !important;
}

/* ================================================================== SLIDER */
.hero{ background:linear-gradient(180deg, rgba(1,65,28,.14) 0%, var(--bg-2) 55%); padding-top:14px; }

.azadi-banner{
  max-width:var(--container); margin:clamp(28px,4vw,48px) auto 0; padding-inline:var(--gutter);
}
.azadi-banner img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius-lg);
  box-shadow:0 20px 44px -20px rgba(1,65,28,.4);
}

.featured-banner{
  max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
}
.featured-banner img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius-lg);
  box-shadow:0 24px 54px -22px rgba(14,17,20,.45);
}

/* ----------------------------------------------------------------- SHOWCASE */
.showcase{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.showcase + .showcase{ margin-top:24px; }

.showcase__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  margin-bottom:20px; align-items:stretch;
}
.showcase__grid .card__media{ aspect-ratio:1/1; padding:10px 12px 0; }

.showcase__banner{
  position:relative; display:block; overflow:hidden; aspect-ratio:2/1;
  border-radius:var(--radius-lg); border:1px solid var(--line);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.showcase__banner:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.showcase__banner img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:760px){
  .showcase__grid{ grid-template-columns:1fr 1fr; }
  .showcase__banner{ aspect-ratio:16/10; }
}
#hero .slider{ border-radius:var(--radius-lg); box-shadow:0 34px 84px -30px rgba(1,65,28,.42); }

/* The banners are supplied at 1600x900. The viewport is locked to the same
   16:9 so `cover` never crops the artwork — deliberately no height cap, since
   trimming a brand banner is worse than a tall hero. max-width keeps it from
   getting absurd on ultra-wide monitors. */
.slider{
  position:relative;
  width:100%;
  max-width:2000px;
  margin-inline:auto;
  overflow:hidden;
  background:var(--bg-3);
}
.slider__viewport{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
}
/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 16/9){
  .slider__viewport{ height:56.25vw; }
}

.slide{
  position:absolute; inset:0;
  display:block;
  opacity:0; visibility:hidden;
  transition:opacity .9s var(--ease), visibility .9s;
}
.slide.is-on{ opacity:1; visibility:visible; z-index:2; }
.slide img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:scale(1.045);
  transition:transform 7s linear;
}
.slide.is-on img{ transform:scale(1); }

/* Desktop shows the banner artwork as designed — its text is already in the
   image, so the markup caption stays hidden until the narrow-screen crop. */
.slide__caption{ display:none; }

.slider__arrow{
  position:absolute; top:50%; z-index:5;
  width:46px; height:46px; margin-top:-23px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.78);
  color:var(--text);
  border:1px solid rgba(14,17,20,.08);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
  opacity:0; transform:scale(.9);
  transition:opacity .35s var(--ease), transform .35s var(--ease), background-color .25s;
}
.slider:hover .slider__arrow,
.slider__arrow:focus-visible{ opacity:1; transform:scale(1); }
.slider__arrow:hover{ background:#fff; }
.slider__arrow--prev{ left:clamp(12px,2vw,26px); }
.slider__arrow--next{ right:clamp(12px,2vw,26px); }

.slider__dots{
  position:absolute; z-index:5;
  left:50%; bottom:clamp(14px,2.4vw,26px); transform:translateX(-50%);
  display:flex; gap:9px;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(14,17,20,.07);
}
.slider__dots button{
  width:34px; height:4px; padding:0;
  display:block; border-radius:3px; overflow:hidden;
  background:rgba(14,17,20,.18);
  transition:background-color .3s;
}
.slider__dots button:hover{ background:rgba(14,17,20,.34); }
.slider__dots button i{
  display:block; height:100%; width:0;
  background:var(--green); border-radius:3px;
}
/* The fill doubles as the autoplay timer. Flipping aria-selected restarts it. */
.slider__dots button[aria-selected="true"] i{
  animation:dotFill var(--slide-dur,6000ms) linear forwards;
}
@keyframes dotFill{ from{ width:0 } to{ width:100% } }
.slider.is-paused .slider__dots button[aria-selected="true"] i{ animation-play-state:paused; }
/* No autoplay timer when motion is reduced — show a static fill instead. */
@media (prefers-reduced-motion:reduce){
  .slider__dots button[aria-selected="true"] i{ animation:none; width:100%; }
}

.tech-showcase{ padding-block:clamp(32px,6vh,64px); }
.slider--sm{ max-width:900px; border-radius:var(--radius-lg); }
.slider--sm .slide img{ border-radius:var(--radius-lg); }

/* -------------------------------------------------------------- TRUST STRIP */
.strip{
  border-bottom:1.5px solid rgba(1,65,28,.3);
  background:linear-gradient(90deg, rgba(58,122,92,.28), rgba(233,237,234,.6));
  -webkit-backdrop-filter:blur(10px) saturate(180%);
  backdrop-filter:blur(10px) saturate(180%);
}
.strip__inner{
  max-width:var(--container); margin-inline:auto;
  padding:22px var(--gutter);
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.strip__item{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:12px;
  align-items:center;
}
.strip__item svg{ grid-row:1/3; color:var(--green); }
.strip__item b{ font-size:14px; font-weight:600; }
.strip__item span{ font-size:12.5px; color:var(--text-3); }

/* ---------------------------------------------------------------- FEATURED */
.featured{ position:relative; overflow:hidden; }
.featured__rings{
  position:absolute; top:8%; left:50%; width:1200px; height:1200px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(1,65,28,.11) 0%, rgba(1,65,28,.11) 18%,
    transparent 18%, transparent 30%,
    rgba(1,65,28,.075) 30%, rgba(1,65,28,.075) 42%,
    transparent 42%, transparent 54%,
    rgba(1,65,28,.045) 54%, rgba(1,65,28,.045) 66%,
    transparent 66%);
  pointer-events:none; z-index:0;
}
.featured .section__head, .featured .feature-grid{ position:relative; z-index:1; }

.feature-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);
}
.feature{
  display:flex; flex-direction:column;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:var(--bg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
  transform-style:preserve-3d;
}
.feature:hover{ box-shadow:var(--shadow); border-color:var(--line-strong); }

.feature__media{
  position:relative;
  aspect-ratio:1/.85;
  overflow:hidden;
  background:radial-gradient(circle at 50% 45%,var(--bg-2) 0%,var(--bg-3) 100%);
  display:grid; place-items:center;
  padding:26px;
}
.feature__media img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  transition:transform .8s var(--ease);
  filter:drop-shadow(0 16px 20px rgba(14,17,20,.16));
}
.feature:hover .feature__media img{ transform:scale(1.06); }

.feature__body{ padding:16px 20px 20px; display:flex; flex-direction:column; gap:7px; flex:1; }
.feature__body h3{ font-size:clamp(22px,2.2vw,28px); letter-spacing:-.03em; }
.feature__body > p{ color:var(--text-2); font-size:14.5px; }

.feature__specs{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:2px;
}
.feature__specs li{
  padding:5px 11px; border-radius:8px;
  background:var(--bg-2); border:1px solid var(--line);
  font-size:11.5px; font-weight:500; color:var(--text-2);
}

.feature__foot{
  margin-top:auto; padding-top:16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.feature__foot .btn{
  color:#fff; background:var(--text); box-shadow:none;
}
.feature__foot .btn:hover{ background:#000; transform:translateY(-2px); }

.feature__badge{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--green-dark);
}

/* -------------------------------------------------------------------- AZADI */
.azadi{
  position:relative; overflow:hidden;
  padding:clamp(50px,7vw,90px) var(--gutter);
  background:linear-gradient(135deg, var(--green-dark) 0%, var(--green) 46%, var(--green-light) 100%);
  text-align:center;
}
.azadi::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 30%, rgba(255,255,255,.14), transparent 45%),
             radial-gradient(circle at 82% 70%, rgba(255,255,255,.12), transparent 50%);
  pointer-events:none;
}
.azadi__inner{ position:relative; z-index:1; max-width:640px; margin-inline:auto; }
.azadi .eyebrow{ color:rgba(255,255,255,.75); }
.azadi .section__title{ color:#fff; -webkit-text-fill-color:#fff; background:none; }
.azadi .lead{ color:rgba(255,255,255,.85); margin-inline:auto; }
.azadi .btn--primary{ margin-top:18px; background:#fff; color:var(--green-dark); box-shadow:0 14px 34px -14px rgba(0,0,0,.35); }
.azadi .btn--primary:hover{ background:#f0f2f0; color:var(--green-dark); }

.azadi__marquee{
  position:relative; z-index:1;
  margin-top:clamp(36px,5vw,56px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.azadi__track{
  display:flex; align-items:center; gap:18px; width:max-content;
  animation:azadiSlide 28s linear infinite;
}
.azadi__track img{
  height:clamp(160px,18vw,240px); width:auto;
  border-radius:var(--radius); box-shadow:0 20px 40px -20px rgba(0,0,0,.35);
  flex-shrink:0;
}
@keyframes azadiSlide{ to{ transform:translateX(-50%); } }

/* ------------------------------------------------------------------ TICKER */
.ticker{
  border-block:1px solid var(--line);
  background:var(--green-tint);
  overflow:hidden; padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.ticker__track{
  display:flex; align-items:center; gap:34px; width:max-content;
  animation:slide 34s linear infinite;
}
.ticker__track span:nth-child(4n+1){ color:var(--green-dark); -webkit-text-stroke:0; }
.ticker__track span{
  font-size:clamp(20px,3.2vw,38px); font-weight:700; letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1.5px rgba(1,65,28,.5);
  transition:color .35s, -webkit-text-stroke-color .35s;
}
.ticker__track span:hover{ color:var(--green); -webkit-text-stroke-color:transparent; }
.ticker__track i{ color:var(--green); font-style:normal; font-size:13px; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ------------------------------------------------------------------- STORY */
.story{ position:relative; height:340vh; background:var(--bg); }
.story__sticky{
  position:sticky; top:0; height:100svh;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(24px,5vw,80px);
  max-width:var(--container); margin-inline:auto;
  padding:var(--nav-h) var(--gutter) 0;
}

.story__visual{ position:relative; display:grid; place-items:center; height:min(60vh,520px); }
.story__halo{
  position:absolute; width:76%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,var(--bg-3),transparent 66%);
  transition:background .8s var(--ease);
}
.story__svg{
  position:absolute; width:min(70%,340px); height:auto;
  opacity:0; transform:scale(.84) translateY(24px) rotate(-5deg);
  transition:opacity .75s var(--ease), transform .95s var(--ease);
  filter:drop-shadow(0 30px 40px rgba(14,17,20,.18));
}
.story__svg.is-on{ opacity:1; transform:none; }

.story__wave{
  position:absolute; bottom:4%; left:0; right:0; height:100px;
  opacity:.5; pointer-events:none;
}
.story__wave svg{ width:100%; height:100%; }
.story__wave path{ animation:waveShift 5s ease-in-out infinite alternate; }
.story__wave path:last-child{ animation-duration:7s; }
@keyframes waveShift{ from{ transform:translateX(0); } to{ transform:translateX(-40px); } }

.story__panels{ position:relative; min-height:420px; }
.story__panel{
  position:absolute; inset:0;
  opacity:0; transform:translateY(30px);
  transition:opacity .6s var(--ease), transform .7s var(--ease);
  pointer-events:none;
}
.story__panel.is-on{ opacity:1; transform:none; pointer-events:auto; }
.story__panel h2{
  font-size:clamp(30px,4.6vw,56px); letter-spacing:-.045em; margin:12px 0 18px;
}
.story__panel > p{ color:var(--text-2); max-width:46ch; font-size:clamp(15px,1.45vw,17px); }

.story__list{ margin-top:26px; display:grid; gap:11px; }
.story__list li{
  position:relative; padding-left:26px;
  color:var(--text-2); font-size:15px;
}
.story__list b{ color:var(--text); font-weight:600; }
.story__list li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:8px; height:8px; border-radius:50%;
  background:var(--green);
}

/* ------------------------------------------------------------------- BENTO */
.bento-section{ background:var(--bg); }
.bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,22px);
}
.bento__card{
  position:relative; overflow:hidden;
  grid-column:span 1;
  min-height:270px;
  padding:30px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(1,65,28,.14);
  background:linear-gradient(150deg,#ffffff 0%,#e8f1ed 100%);
  box-shadow:0 16px 38px -20px rgba(1,65,28,.28), inset 0 1px 0 rgba(255,255,255,.9);
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform .5s var(--ease), border-color .5s, box-shadow .5s;
  transform-style:preserve-3d;
}
.bento__card::before{
  content:""; position:absolute; inset:0 0 auto; height:4px;
  background:linear-gradient(90deg,var(--green-light),rgba(15,107,48,0));
  opacity:.75;
}
.bento__card:hover{ border-color:rgba(1,65,28,.42); box-shadow:0 22px 54px -16px rgba(1,65,28,.38), inset 0 1px 0 rgba(255,255,255,.7); }
.bento__card--lg{
  grid-column:span 2; grid-row:span 2; min-height:560px;
  background:linear-gradient(145deg,#0f6b30 0%,#01411c 72%,#012a12 100%);
}
.bento__card--wide{
  background:linear-gradient(145deg,#01411c 0%,#0f6b30 100%);
}
.bento__card h3, .bento__card--lg h3{ color:var(--green-dark); }
.bento__card--lg h3,.bento__card--wide h3{ color:#fff; }
.bento__card--wide{ grid-column:span 2; }

.bento__glow{
  position:absolute; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(1,65,28,.16),transparent 66%);
  left:var(--mx,50%); top:var(--my,50%);
  transform:translate(-50%,-50%);
  opacity:0; transition:opacity .45s var(--ease);
  pointer-events:none;
}
.bento__card:hover .bento__glow{ opacity:1; }

.bento__body{ position:relative; z-index:2; }
.bento__body h3{ font-size:clamp(19px,2vw,25px); margin-bottom:9px; letter-spacing:-.03em; }
.bento__body p{ color:#4b5a53; font-size:14.5px; max-width:40ch; }
.bento__card--lg .bento__body p,.bento__card--wide .bento__body p{ color:rgba(255,255,255,.82); }
.bento__card--lg .bento__body h3{ font-size:clamp(25px,2.8vw,36px); }
.bento__card--lg .bento__body p{ font-size:16px; max-width:34ch; }

.bento__viz{ position:absolute; z-index:1; pointer-events:none; }

.bento__viz--anc{
  inset:0 0 36% 0; display:flex; align-items:center; justify-content:center; gap:6px;
}
.bento__viz--anc span{
  width:5px; border-radius:4px;
  background:linear-gradient(180deg,var(--green-light),var(--green));
  animation:eq 1.5s var(--ease-io) infinite alternate;
  opacity:.8;
}
.bento__card--lg .bento__viz--anc span,.bento__card--wide .bento__viz--mic span{
  background:linear-gradient(180deg,#b6f0c7,#75c58f);
}
.bento__viz--anc span:nth-child(1){ height:24%; animation-delay:0s }
.bento__viz--anc span:nth-child(2){ height:44%; animation-delay:.08s }
.bento__viz--anc span:nth-child(3){ height:62%; animation-delay:.16s }
.bento__viz--anc span:nth-child(4){ height:38%; animation-delay:.24s }
.bento__viz--anc span:nth-child(5){ height:74%; animation-delay:.32s }
.bento__viz--anc span:nth-child(6){ height:52%; animation-delay:.4s }
.bento__viz--anc span:nth-child(7){ height:80%; animation-delay:.48s }
.bento__viz--anc span:nth-child(8){ height:34%; animation-delay:.56s }
.bento__viz--anc span:nth-child(9){ height:58%; animation-delay:.64s }
.bento__viz--anc span:nth-child(10){ height:28%; animation-delay:.72s }
.bento__viz--anc span:nth-child(11){ height:46%; animation-delay:.8s }
.bento__viz--anc span:nth-child(12){ height:20%; animation-delay:.88s }
@keyframes eq{ from{ transform:scaleY(.35); } to{ transform:scaleY(1); } }

.bento__viz--batt{
  top:28px; right:28px; width:76px; height:34px;
  border:2px solid var(--line-strong); border-radius:9px;
}
.bento__viz--batt::after{
  content:""; position:absolute; right:-7px; top:10px;
  width:5px; height:14px; border-radius:0 3px 3px 0; background:var(--line-strong);
}
.bento__viz--batt i{
  position:absolute; inset:4px auto 4px 4px; width:0;
  border-radius:5px; background:var(--green);
  animation:charge 3.4s var(--ease-io) infinite;
}
@keyframes charge{ 0%{ width:8% } 70%,100%{ width:calc(100% - 8px) } }

.bento__viz--latency{
  top:24px; right:28px; display:flex; align-items:baseline; gap:3px;
  font-weight:800; letter-spacing:-.05em; color:var(--text); opacity:.08;
}
.bento__viz--latency b{ font-size:70px; }
.bento__viz--latency small{ font-size:22px; }

.bento__viz--drop{ top:28px; right:32px; width:60px; height:70px; }
.bento__viz--drop i{
  position:absolute; width:9px; height:9px; border-radius:50% 50% 50% 0;
  background:var(--green-light);
  transform:rotate(-45deg); opacity:0;
  animation:drop 2.4s var(--ease-io) infinite;
}
.bento__viz--drop i:nth-child(1){ left:0;  animation-delay:0s }
.bento__viz--drop i:nth-child(2){ left:24px; animation-delay:.5s }
.bento__viz--drop i:nth-child(3){ left:48px; animation-delay:1s }
@keyframes drop{
  0%{ opacity:0; transform:translateY(-12px) rotate(-45deg); }
  25%,75%{ opacity:1; }
  75%{ transform:translateY(52px) rotate(-45deg); }
  100%{ opacity:0; transform:translateY(64px) rotate(-45deg); }
}

.bento__viz--mic{
  inset:auto 28px 0 28px; height:54%;
  display:flex; align-items:flex-end; justify-content:space-between; gap:4px;
  opacity:.42;
}
.bento__viz--mic span{
  flex:1; border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--green),transparent);
  animation:eq 1.9s var(--ease-io) infinite alternate;
}
.bento__viz--mic span:nth-child(odd){ animation-duration:1.4s; }
.bento__viz--mic span:nth-child(1){ height:30% } .bento__viz--mic span:nth-child(2){ height:55% }
.bento__viz--mic span:nth-child(3){ height:40% } .bento__viz--mic span:nth-child(4){ height:70% }
.bento__viz--mic span:nth-child(5){ height:48% } .bento__viz--mic span:nth-child(6){ height:82% }
.bento__viz--mic span:nth-child(7){ height:36% } .bento__viz--mic span:nth-child(8){ height:64% }
.bento__viz--mic span:nth-child(9){ height:44% } .bento__viz--mic span:nth-child(10){ height:76% }
.bento__viz--mic span:nth-child(11){ height:32% } .bento__viz--mic span:nth-child(12){ height:58% }
.bento__viz--mic span:nth-child(13){ height:42% } .bento__viz--mic span:nth-child(14){ height:26% }

/* -------------------------------------------------------------------- SHOP */
.shop{ background:var(--bg); }
.filters{
  position:relative;
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:clamp(26px,4vw,40px);
}
.chip{
  position:relative; z-index:2;
  padding:11px 20px; border-radius:999px;
  font-size:14px; font-weight:500; color:var(--text-2);
  border:1px solid var(--line);
  transition:color .3s, border-color .3s;
}
.chip:hover{ color:var(--text); border-color:var(--line-strong); }
.chip.is-active{ color:#fff; border-color:transparent; }
.chip__pill{
  position:absolute; z-index:1; left:0; top:0; height:0; width:0;
  border-radius:999px; background:var(--green);
  transition:transform .5s var(--ease), width .5s var(--ease), height .5s var(--ease);
  pointer-events:none;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:clamp(14px,1.6vw,20px);
}

.card{
  position:relative; overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid rgba(14,17,20,.07);
  background:#fff;
  display:flex; flex-direction:column;
  box-shadow:0 14px 32px -20px rgba(14,17,20,.36);
  transition:transform .55s var(--ease), border-color .4s, box-shadow .55s;
  transform-style:preserve-3d;
}
.card:hover{ border-color:var(--line-strong); box-shadow:var(--shadow); }
.card.is-hidden{ display:none; }
.card.is-entering{ animation:cardIn .55s var(--ease) both; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }

.card__ribbon{
  position:absolute; top:0; left:0; z-index:4;
  writing-mode:vertical-rl; transform:rotate(180deg);
  background:#1e293b; color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:14px 7px; border-radius:0 0 10px 0;
}

.card__tag{
  position:absolute; top:15px; left:38px; z-index:3;
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--green-dark);
}
.card__tag--new{ color:var(--green-dark); }

.card__media{
  position:relative; aspect-ratio:1/1.05;
  display:grid; place-items:center; padding:10px 12px 0;
  background:transparent;
}
.card__media::after{
  display:none;
}
.card__media svg{
  width:auto; height:100%; max-height:186px;
  transform:translateZ(40px);
  transition:transform .6s var(--ease);
  filter:none;
}
.card:hover .card__media svg{ transform:translateZ(60px) scale(1.07) rotate(-2deg); }
.card__media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:translateZ(40px);
  transition:transform .6s var(--ease);
  filter:none;
}
.card:hover .card__media img{ transform:translateZ(60px) scale(1.06); }

.card__link{ display:flex; flex-direction:column; flex:1; color:inherit; text-decoration:none; }
.card__info{ padding:18px 22px 22px; display:flex; flex-direction:column; gap:4px; margin-top:auto; }
.card__info h3{
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  font-size:19px; font-weight:500; letter-spacing:-.025em;
}
.card__model{ display:block; margin-top:1px; font-size:11px; line-height:1.35; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.card__info > p{ font-size:12px; line-height:1.45; color:var(--text-2); }

.card__foot{
  margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.price{ font-size:18px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.price--tbd{ font-size:13.5px; font-weight:600; color:var(--text-3); font-style:italic; }
.price__original{ text-decoration:line-through; color:var(--text-3); font-weight:500; font-size:13.5px; margin-right:6px; font-variant-numeric:tabular-nums; }

.card__sale{ position:absolute; top:6px; right:6px; z-index:4; width:22%; aspect-ratio:1/1; min-width:72px; max-width:130px; }
.card__sale img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(14,17,20,.28)); }

.add{
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0; white-space:nowrap;
  padding:10px 15px; border-radius:12px;
  font-size:13px; font-weight:600;
  border:1px solid transparent; background:var(--text); color:#fff;
  transition:background-color .3s, color .3s, transform .3s var(--ease), border-color .3s;
}
.add:hover{ background:#000; color:#fff; border-color:transparent; transform:translateY(-2px); }
.add.is-added{ background:var(--green-dark); color:#fff; border-color:transparent; }

.grid__empty{ margin-top:40px; text-align:center; color:var(--text-3); }

/* --------------------------------------------------------- INFO PAGES */
.info-main{ padding-bottom:clamp(54px,8vw,100px); }
.info-hero{
  position:relative; overflow:hidden;
  padding:clamp(58px,9vw,112px) var(--gutter) clamp(50px,7vw,86px);
  background:linear-gradient(135deg,#e6ebe8 0%,#f5f6f7 55%,#e2e7e9 100%);
  border-bottom:1px solid var(--line);
}
.info-hero::after{
  content:""; position:absolute; width:min(48vw,620px); aspect-ratio:1;
  right:-12%; top:-42%; border-radius:50%;
  background:radial-gradient(circle,rgba(1,65,28,.16),transparent 68%);
  pointer-events:none;
}
.info-hero__inner{ position:relative; z-index:1; max-width:var(--container); margin-inline:auto; }
.info-hero h1{ max-width:760px; font-size:clamp(38px,6vw,76px); letter-spacing:-.055em; }
.info-hero .lead{ max-width:700px; margin-top:20px; color:var(--text-2); font-size:clamp(16px,1.8vw,20px); }
.info-layout{
  max-width:var(--container); margin:clamp(34px,6vw,70px) auto 0;
  padding-inline:var(--gutter); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;
}
.info-card{
  padding:clamp(22px,3vw,34px); border:1px solid var(--line); border-radius:var(--radius-lg);
  background:#fff; box-shadow:0 14px 32px -22px rgba(14,17,20,.35);
}
.info-card--wide{ grid-column:1 / -1; }
.info-card h2{ margin-bottom:12px; font-size:clamp(23px,2.5vw,32px); letter-spacing:-.035em; }
.info-card h3{ margin:22px 0 8px; font-size:17px; }
.info-card p{ color:var(--text-2); font-size:15px; line-height:1.75; }
.info-card p + p{ margin-top:12px; }
.info-card ul,.info-card ol{ display:grid; gap:10px; margin-top:14px; padding-left:21px; color:var(--text-2); font-size:15px; line-height:1.65; }
.info-card ul{ list-style:disc; }
.info-card ol{ list-style:decimal; }
.info-card li::marker{ color:var(--green); }
.info-card a{ color:var(--green-dark); text-decoration:underline; text-underline-offset:3px; }
.info-callout{ background:var(--green-dark); border-color:transparent; color:#fff; }
.info-callout h2,.info-callout h3{ color:#fff; }
.info-callout p,.info-callout li{ color:rgba(255,255,255,.82); }
.info-callout li::marker{ color:#9bd4ad; }
.info-callout a{ color:#fff; }
.info-email{ display:inline-block; margin-top:16px; font-weight:700; }

@media (max-width:760px){
  .info-layout{ grid-template-columns:1fr; }
  .info-card--wide{ grid-column:auto; }
}

/* ------------------------------------------------------------------ COLORS */
.colors{ background:var(--bg); }
.colors__inner{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(30px,5vw,72px);
  padding:clamp(36px,5vw,64px);
  border-radius:var(--radius-lg);
  background:var(--bg-2);
  border:1px solid var(--line);
}
.colors__stage{ position:relative; display:grid; place-items:center; min-height:min(52vh,440px); }
.colors__halo{
  position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(14,17,20,.1),transparent 66%);
  transition:background .7s var(--ease);
}
.colors__svg{
  position:relative; width:min(100%,440px); height:auto;
  filter:drop-shadow(0 30px 40px rgba(14,17,20,.22));
  transition:transform .7s var(--ease);
}
.colors__svg.is-swap{ animation:swap .65s var(--ease); }
@keyframes swap{
  0%{ transform:scale(1) rotate(0); }
  45%{ transform:scale(.93) rotate(-3deg); }
  100%{ transform:scale(1) rotate(0); }
}

.swatches{ display:flex; gap:13px; margin:30px 0 12px; }
.swatch{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background:#fff;
  transition:transform .35s var(--ease), border-color .35s;
}
.swatch i{
  display:block; width:30px; height:30px; border-radius:50%;
  background:var(--c);
  box-shadow:inset 0 -4px 9px rgba(0,0,0,.3), inset 0 4px 8px rgba(255,255,255,.4);
}
.swatch:hover{ transform:scale(1.09); border-color:var(--line-strong); }
.swatch.is-active{ border-color:var(--green); box-shadow:0 0 0 3px var(--green-tint); transform:scale(1.09); }

.colors__name{ font-size:14px; color:var(--text-2); }

/* ----------------------------------------------------------------- REVIEWS */
.reviews{ background:var(--bg); }
.marquee{
  display:flex; gap:18px; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.marquee__track{
  display:flex; gap:18px; flex-shrink:0;
  animation:slideX 55s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slideX{ to{ transform:translateX(calc(-100% - 18px)); } }

.quote{
  margin:0; width:min(78vw,350px); flex-shrink:0;
  min-height:218px; padding:28px;
  border-radius:20px;
  border:1px solid rgba(14,17,20,.08);
  background:#fff;
  box-shadow:0 16px 34px -24px rgba(14,17,20,.4);
  display:flex; flex-direction:column; gap:11px;
}
.stars{ color:#e79b1a; font-size:15px; letter-spacing:2px; }
.quote blockquote{ margin:0; font-size:16px; line-height:1.55; color:var(--text); }
.quote figcaption{ font-size:13px; color:var(--text-3); margin-top:auto; }

/* --------------------------------------------------------------------- CTA */
.cta{
  position:relative; overflow:hidden;
  padding:clamp(64px,9vh,104px) var(--gutter);
  text-align:center;
  background:
    radial-gradient(60% 100% at 50% 0%,rgba(117,197,143,.28),transparent 70%),
    linear-gradient(145deg,#012a12 0%,#01411c 58%,#0f6b30 100%);
  border-top:0;
}
.cta__inner{ max-width:640px; margin-inline:auto; }
.cta h2{ font-size:clamp(32px,5.4vw,60px); letter-spacing:-.045em; margin-top:12px; }
.cta .eyebrow{ color:#b6f0c7; }
.cta h2{ color:#fff; }
.cta h2 .chrome{ background:linear-gradient(180deg,#ffffff 0%,#a5d8b5 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:0; filter:none; }
.cta__lead{ color:rgba(255,255,255,.82); margin:18px auto 30px; max-width:44ch; }

.cta__form{
  display:flex; gap:8px; padding:7px;
  border-radius:999px; border:1px solid var(--line-strong);
  background:#fff;
  max-width:480px; margin-inline:auto;
  box-shadow:var(--shadow-sm);
  transition:border-color .3s, box-shadow .3s;
}
.cta__form:focus-within{ border-color:#9bd4ad; box-shadow:0 0 0 5px rgba(155,212,173,.22); }
.cta__form input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  padding:0 18px; color:var(--text); font-size:15px;
}
.cta__form input::placeholder{ color:var(--text-3); }

.cta__note{ min-height:22px; margin-top:16px; font-size:13.5px; color:#b6f0c7; font-weight:500; }
.cta__note.is-err{ color:#c62828; }

/* ------------------------------------------------------------------ FOOTER */
.footer{
  border-top:1px solid var(--line);
  background:var(--bg);
  padding:clamp(52px,7vh,84px) var(--gutter) 28px;
}
.footer__top{
  max-width:var(--container); margin-inline:auto;
  display:grid; grid-template-columns:1.2fr 2fr; gap:clamp(34px,5vw,70px);
}
.footer__brand p{ color:var(--text-3); font-size:14px; margin:18px 0 12px; max-width:34ch; }
.footer__site{
  display:inline-block; margin-bottom:20px;
  font-size:13.5px; font-weight:600; color:var(--green);
  border-bottom:1px solid transparent;
  transition:border-color .25s;
}
.footer__site:hover{ border-bottom-color:var(--green); }

.socials{ display:flex; gap:10px; }
.socials a{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line); color:var(--text-2);
  transition:background-color .3s, color .3s, transform .3s var(--ease), border-color .3s;
}
.socials a:hover{ background:var(--green); color:#fff; transform:translateY(-3px); border-color:transparent; }

.footer__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.footer__cols h4{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text); margin-bottom:14px;
}
.footer__cols a{
  display:block; font-size:14px; color:var(--text-3); padding:5px 0;
  transition:color .25s, transform .25s var(--ease);
}
.footer__cols a:hover{ color:var(--green); transform:translateX(3px); }

.footer__bottom{
  max-width:var(--container); margin:clamp(40px,5vh,60px) auto 0;
  padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  font-size:12.5px; color:var(--text-3);
}
.footer__pay{ display:flex; gap:8px; flex-wrap:wrap; }
.footer__pay span{
  padding:5px 11px; border-radius:7px;
  border:1px solid var(--line); font-size:11px;
}

/* -------------------------------------------------------------- QUICKVIEW */
.qv{ position:fixed; inset:0; z-index:1500; display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s; }
.qv.is-open{ opacity:1; visibility:visible; }
.qv__scrim{ position:absolute; inset:0; background:rgba(14,17,20,.5); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.qv__panel{
  position:relative; width:min(760px,100%); max-height:88vh; overflow-y:auto;
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:1fr 1fr;
  transform:scale(.94) translateY(10px); transition:transform .4s var(--ease);
}
.qv.is-open .qv__panel{ transform:none; }
.qv__close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.85); border:1px solid var(--line); color:var(--text);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.qv__media{ background:var(--bg-2); display:grid; place-items:center; padding:32px; min-height:280px; }
.qv__media img{ width:100%; height:auto; max-height:420px; object-fit:contain; filter:drop-shadow(0 20px 30px rgba(14,17,20,.16)); }
.qv__body{ padding:32px 32px 32px 0; display:flex; flex-direction:column; }
.qv__body .eyebrow{ margin-bottom:8px; }
.qv__body h2{ font-size:26px; letter-spacing:-.03em; margin-bottom:10px; }
.qv__body p{ color:var(--text-2); font-size:14.5px; line-height:1.6; margin-bottom:18px; }
.qv__price{ font-size:24px; font-weight:800; letter-spacing:-.03em; margin-bottom:20px; }
.qv__foot{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:640px){
  .qv__panel{ grid-template-columns:1fr; max-height:92vh; }
  .qv__body{ padding:24px; }
}

/* ------------------------------------------------------------------ DRAWER */
.drawer{ position:fixed; inset:0; z-index:1400; }
.drawer__scrim{
  position:absolute; inset:0; background:rgba(14,17,20,.4);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .45s var(--ease);
}
.drawer__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(420px,100%);
  background:#fff; border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .5s var(--ease);
  box-shadow:var(--shadow-lg);
}
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer.is-open .drawer__panel{ transform:none; }

/* -------------------------------------------------------------- SEARCH OVERLAY */
.search-overlay{ position:fixed; inset:0; z-index:1450; }
.search-overlay__scrim{
  position:absolute; inset:0; background:rgba(14,17,20,.5);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .4s var(--ease);
}
.search-overlay__panel{
  position:absolute; top:0; left:50%; width:min(760px,92vw);
  max-height:82vh; margin-top:6vh;
  transform:translate(-50%,-24px); opacity:0;
  background:linear-gradient(165deg, rgba(255,255,255,.82), rgba(233,237,234,.78));
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(1,65,28,.14);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.search-overlay.is-open .search-overlay__scrim{ opacity:1; }
.search-overlay.is-open .search-overlay__panel{ transform:translate(-50%,0); opacity:1; }

.search-overlay__bar{
  display:flex; align-items:center; gap:12px;
  padding:18px 20px; border-bottom:1px solid var(--line);
  color:var(--text-3);
}
.search-overlay__bar #searchInput{
  flex:1; border:0; outline:0; font-size:16px; color:var(--text);
  background:transparent;
}
.search-overlay__tabs{
  display:flex; gap:8px; padding:14px 20px; border-bottom:1px solid var(--line);
}
.search-tab{
  padding:8px 16px; border-radius:999px;
  background:transparent; color:var(--text-3);
  font-size:13px; font-weight:700; letter-spacing:.02em;
  border:1px solid var(--line); cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.search-tab.is-active{ background:var(--green-tint); color:var(--green-dark); border-color:transparent; }
.search-tab:hover{ border-color:var(--green); }

.search-overlay__results{ overflow-y:auto; padding:16px 20px 20px; }
.search-overlay__hint{ padding:30px 14px; color:var(--text-3); font-size:14px; text-align:center; }

.search-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
.search-card{
  display:flex; flex-direction:column; color:inherit; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;
  background:#fff;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.search-card:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.search-card__media{
  aspect-ratio:1/1; display:grid; place-items:center; padding:10px;
  background:transparent;
}
.search-card__media img{ width:100%; height:100%; object-fit:contain; }
.search-card__body{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:2px; }
.search-card__body h4{ font-size:13px; font-weight:700; line-height:1.25; }
.search-card__body p{ font-size:11.5px; color:var(--text-3); }
.search-card__body .price{ margin-top:4px; font-size:13.5px; font-weight:700; }
.search-card__body .price--tbd{ font-size:11.5px; font-weight:600; font-style:italic; }

@keyframes foundPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(1,65,28,0); }
  30%{ box-shadow:0 0 0 6px rgba(1,65,28,.28); }
}
.card.is-found, .feature.is-found{
  animation:foundPulse 1.1s var(--ease) 2;
  border-color:var(--green);
}

.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--line);
}
.drawer__head h3{ font-size:19px; }
.drawer__body{ flex:1; overflow-y:auto; padding:14px 24px; }
.drawer__empty{ color:var(--text-3); font-size:14px; padding:30px 0; text-align:center; }

.line-item{
  display:flex; align-items:center; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.line-item__thumb{
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--bg-2);
  border:1px solid var(--line);
}
.line-item__thumb svg{ width:30px; height:30px; }
.line-item__thumb img{ width:38px; height:38px; object-fit:contain; }
.line-item__meta{ flex:1; min-width:0; }
.line-item__meta b{ display:block; font-size:14.5px; font-weight:600; }
.line-item__meta span{ font-size:12.5px; color:var(--text-3); }
.line-item__qty{ display:flex; align-items:center; gap:8px; }
.line-item__qty button{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--line-strong);
  display:grid; place-items:center; font-size:14px; line-height:1; color:var(--text-2);
  transition:background-color .25s,color .25s,border-color .25s;
}
.line-item__qty button:hover{ background:var(--green); color:#fff; border-color:transparent; }
.line-item__qty b{ font-size:13px; min-width:16px; text-align:center; font-variant-numeric:tabular-nums; }

.drawer__foot{ padding:18px 24px 24px; border-top:1px solid var(--line); }
.drawer__total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:14px; font-size:15px; color:var(--text-2);
}
.drawer__total b{ font-size:22px; color:var(--text); letter-spacing:-.03em; }
.drawer__fine{ margin-top:12px; font-size:11.5px; color:var(--text-3); text-align:center; }

/* ------------------------------------------------------------------- TOAST */
.toast{
  position:fixed; left:50%; bottom:32px; z-index:1600;
  transform:translate(-50%,26px); opacity:0; pointer-events:none;
  padding:13px 22px; border-radius:999px;
  background:var(--text); color:#fff;
  font-size:14px; font-weight:600;
  box-shadow:var(--shadow);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ------------------------------------------------------------- NAV DROPDOWN */
.nav__drop{ position:relative; }
.nav__drop-btn{
  display:flex; align-items:center; gap:5px;
  padding:9px 15px; border-radius:999px;
  font-size:14px; font-weight:500; color:var(--text-2);
  transition:color .25s, background-color .25s;
}
.nav__drop-btn svg{ transition:transform .3s var(--ease); }
.nav__drop-btn:hover{ color:var(--text); background:var(--surface); }
.nav__drop:hover .nav__drop-btn svg,
.nav__drop:focus-within .nav__drop-btn svg{ transform:rotate(180deg); }

.nav__drop-menu{
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:206px; padding:10px; border-radius:16px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index:20;
}
.nav__drop:hover .nav__drop-menu,
.nav__drop:focus-within .nav__drop-menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav__drop-menu a{
  display:block; padding:10px 14px; border-radius:10px;
  font-size:14px; font-weight:500; color:var(--text-2);
  transition:background-color .2s, color .2s;
}
.nav__drop-menu a:hover{ background:var(--bg-2); color:var(--text); }
.nav__drop-menu a.is-active{ color:var(--green-dark); background:var(--green-tint); }

.mobile-menu__label{
  padding:16px 4px 2px; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-3);
}

/* --------------------------------------------------------------- BREADCRUMB */
.breadcrumb{
  display:flex; align-items:center; gap:6px; margin-bottom:18px;
  font-size:12.5px; color:var(--text-3);
}
.breadcrumb a{ color:var(--text-3); transition:color .2s; }
.breadcrumb a:hover{ color:var(--green); }
.breadcrumb i{ font-style:normal; opacity:.6; }

/* --------------------------------------------------------------- CAT HERO */
.cat-hero{ position:relative; overflow:hidden; background:var(--bg-2); border-bottom:1px solid var(--line); }
.cat-hero__inner{
  max-width:var(--container); margin-inline:auto;
  padding:clamp(44px,8vh,84px) var(--gutter) clamp(52px,9vh,92px);
  display:grid; grid-template-columns:1.1fr 1fr; align-items:center;
  gap:clamp(24px,4vw,60px); position:relative; z-index:2;
}
.cat-hero__copy h1{ font-size:clamp(34px,6vw,68px); letter-spacing:-.045em; margin:10px 0 16px; }
.cat-hero__copy p{ color:var(--text-2); max-width:48ch; margin-bottom:24px; }
.cat-hero__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cat-hero__stage{ position:relative; display:grid; place-items:center; min-height:min(44vh,360px); }
.cat-hero__halo{
  position:absolute; width:80%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,var(--halo,rgba(1,65,28,.16)),transparent 68%);
}
.cat-hero__stage svg{
  position:relative; width:min(78%,320px); height:auto;
  filter:drop-shadow(0 30px 40px rgba(14,17,20,.2));
}
.cat-hero__stage img{
  position:relative; width:min(84%,380px); height:auto; border-radius:28px;
  filter:drop-shadow(0 30px 40px rgba(14,17,20,.22));
}
.cat-hero--dark{ background:var(--text); border-bottom-color:rgba(255,255,255,.08); }
.cat-hero--dark .cat-hero__copy h1{ color:#fff; }
.cat-hero--dark .cat-hero__copy p{ color:rgba(255,255,255,.62); }
.cat-hero--dark .eyebrow{ color:var(--green-light); }
.cat-hero--dark .breadcrumb{ color:rgba(255,255,255,.4); }
.cat-hero--dark .breadcrumb a{ color:rgba(255,255,255,.55); }
.cat-hero--dark .breadcrumb a:hover{ color:#fff; }
.cat-hero--dark .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.28); }
.cat-hero--dark .btn--ghost:hover{ background:rgba(255,255,255,.08); }

.cat-banner{ display:block; width:100%; line-height:0; background:var(--bg-2); overflow:hidden; }
.cat-banner img{ width:100%; height:auto; display:block; }
.cat-hero--banner .cat-hero__inner{ grid-template-columns:1fr; text-align:center; }
.cat-hero--banner .cat-hero__copy{ max-width:640px; margin-inline:auto; }
.cat-hero--banner .breadcrumb{ justify-content:center; }
.cat-hero--banner .cat-hero__copy p{ margin-inline:auto; }

/* --------------------------------------------------------- PRODUCT DETAIL */
.product-detail, .product-notfound{
  max-width:var(--container); margin-inline:auto; padding:clamp(20px,4vw,40px) var(--gutter) clamp(60px,8vw,100px);
}
.product-detail__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start;
}
.product-detail__media{
  position:relative; aspect-ratio:1/1; border-radius:var(--radius-lg);
  background:radial-gradient(circle at 50% 45%,var(--bg-2) 0%,var(--bg-3) 100%);
  display:grid; place-items:center; padding:clamp(24px,4vw,56px);
  position:sticky; top:calc(var(--nav-h) + 20px);
}
.product-detail__media img{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 20px 30px rgba(14,17,20,.18));
}
.product-detail__body h1{ font-size:clamp(26px,3vw,38px); letter-spacing:-.03em; margin-bottom:4px; }
.product-detail__model{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-bottom:14px; }
.product-detail__desc{ color:var(--text-2); font-size:15.5px; line-height:1.6; margin-bottom:18px; max-width:52ch; }
.product-detail__price{ display:block; font-size:clamp(24px,2.6vw,32px); font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin-bottom:18px; }
.product-detail__price--tbd{ font-size:16px; font-style:italic; color:var(--text-3); }

.product-detail__colors{ margin-bottom:18px; }
.product-detail__colors-label{ display:block; font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:8px; }
.product-detail__swatches{ display:flex; gap:10px; }
.color-swatch{
  width:30px; height:30px; border-radius:50%;
  border:2px solid var(--line); cursor:pointer;
  padding:0; transition:border-color .2s, transform .2s;
}
.color-swatch:hover{ transform:translateY(-1px); }
.color-swatch.is-active{ border-color:var(--green); box-shadow:0 0 0 2px var(--green-tint); }

.variant-pill{
  padding:9px 16px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); background:var(--bg);
  font-size:13.5px; font-weight:600; color:var(--text-2);
  cursor:pointer; transition:border-color .2s, color .2s, transform .2s;
}
.variant-pill:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.variant-pill.is-active{ border-color:var(--green); color:var(--green-dark); background:var(--green-tint); }
.product-detail__actions{ display:flex; gap:12px; margin-bottom:32px; }
.product-detail__actions .btn{ flex:1; }
.product-detail__specs-title{ font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); margin-bottom:10px; }
.product-detail__specs{ margin-bottom:28px; }
.product-detail__specs li{
  padding:10px 0; border-bottom:1px solid var(--line);
  font-size:14.5px; color:var(--text-2);
}
.product-detail__specs li::before{ content:"✓ "; color:var(--green); font-weight:700; }
.product-detail__trust{ display:flex; flex-direction:column; gap:8px; }
.product-detail__trust li{ font-size:13.5px; color:var(--text-3); }

@media (max-width:860px){
  .product-detail__grid{ grid-template-columns:1fr; }
  .product-detail__media{ position:static; }
}

/* ------------------------------------------------------------ CATEGORY TILES */
.cat-tiles-wrap{ position:relative; }
.cat-tiles__arrow{ opacity:.95; }
@media (max-width:620px){ .cat-tiles__arrow{ display:none; } }

.cat-tiles{
  display:flex; align-items:flex-start; gap:clamp(14px,1.8vw,22px);
  overflow-x:auto; scroll-snap-type:x proximity;
  padding:4px 10px 12px; margin-bottom:-6px;
  scrollbar-width:none;
}
.cat-tiles::-webkit-scrollbar{ display:none; }
.cat-tile{
  position:relative; display:flex; flex:0 0 auto;
  width:clamp(90px,8.4vw,120px); flex-direction:column; align-items:center; gap:10px;
  scroll-snap-align:start;
  border:0; background:transparent;
  transition:transform .35s var(--ease);
}
.cat-tile:hover{ transform:translateY(-4px); }
.cat-tile__icon{
  display:block; width:clamp(78px,7.2vw,102px); height:clamp(78px,7.2vw,102px);
  overflow:hidden; border-radius:50%; border:1px solid var(--line);
  background:var(--bg-2); box-shadow:var(--shadow-sm);
  transition:box-shadow .35s var(--ease), border-color .35s;
}
.cat-tile:hover .cat-tile__icon{ border-color:var(--line-strong); box-shadow:var(--shadow); }
.cat-tile__icon img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.cat-tile__label{
  display:block; max-width:100%; color:var(--text); font-size:13px; font-weight:700;
  line-height:1.15; text-align:center; white-space:nowrap;
}

/* ---------------------------------------------------------------- STAT ROW */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,18px); margin-bottom:clamp(40px,6vw,64px); }
.stat-tile{ padding:30px 24px; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--bg-2); text-align:center; }
.stat-tile b{ display:block; font-size:clamp(32px,4.4vw,52px); font-weight:800; letter-spacing:-.04em; color:var(--text); }
.stat-tile span{ font-size:13.5px; color:var(--text-3); }

/* ----------------------------------------------------------- COMPARE TABLE */
.compare-wrap{ overflow-x:auto; margin-bottom:clamp(40px,6vw,64px); }
.compare{ width:100%; min-width:520px; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.compare th,.compare td{ padding:16px 20px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--line); }
.compare thead th{ background:var(--bg-2); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); font-weight:700; }
.compare tbody th{ font-weight:600; color:var(--text-2); white-space:nowrap; }
.compare tbody tr:last-child td,.compare tbody tr:last-child th{ border-bottom:0; }
.compare td.yes{ color:var(--green-dark); font-weight:600; }
.compare td.yes::before{ content:"✓ "; color:var(--green); font-weight:700; }
.compare td.no{ color:var(--text-3); }

/* ------------------------------------------------------------ SPEC HIGHLIGHT */
.spec-highlight{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(30px,5vw,72px); padding:clamp(34px,5vw,60px);
  border-radius:var(--radius-lg); background:var(--bg-2); border:1px solid var(--line);
  margin-bottom:clamp(40px,6vw,64px);
}
.spec-highlight__stage{ display:grid; place-items:center; min-height:min(42vh,340px); position:relative; }
.spec-highlight__stage svg{ width:min(88%,320px); height:auto; filter:drop-shadow(0 30px 40px rgba(14,17,20,.2)); }
.spec-highlight__list{ margin-top:22px; display:grid; gap:11px; }
.spec-highlight__list li{ position:relative; padding-left:26px; color:var(--text-2); font-size:15px; }
.spec-highlight__list b{ color:var(--text); font-weight:600; }
.spec-highlight__list li::before{ content:""; position:absolute; left:0; top:.58em; width:8px; height:8px; border-radius:50%; background:var(--green); }

/* --------------------------------------------------------------- CALLOUT ROW */
.callout-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  padding:clamp(26px,4vw,38px); border-radius:var(--radius-lg);
  background:var(--bg-2); border:1px solid var(--line);
  margin-top:clamp(40px,6vw,64px);
}
.callout-row__item{ text-align:center; }
.callout-row__item svg{ margin-inline:auto; color:var(--green); margin-bottom:10px; }
.callout-row__item b{ display:block; font-size:14.5px; margin-bottom:3px; }
.callout-row__item span{ font-size:12.5px; color:var(--text-3); }

/* -------------------------------------------------------------- RESPONSIVE */
@media (max-width:1080px){
  .feature-grid{ grid-template-columns:1fr; }
  .feature{ flex-direction:row; }
  .feature__media{ flex:0 0 42%; aspect-ratio:auto; }
  .feature__body{ flex:1; }
  .story{ height:300vh; }
  .story__sticky{ grid-template-columns:1fr; align-content:center; gap:16px; }
  .story__visual{ height:min(30vh,250px); }
  .story__panels{ min-height:370px; }
  .story__svg{ width:min(42%,190px); }
  .story__wave{ display:none; }
  .colors__inner{ grid-template-columns:1fr; }
  .colors__stage{ order:-1; }
  .bento__card--lg{ grid-column:span 2; grid-row:span 1; min-height:330px; }
  .footer__top{ grid-template-columns:1fr; }
  .cat-hero__inner{ grid-template-columns:1fr; text-align:center; }
  .cat-hero__copy p{ margin-inline:auto; }
  .cat-hero__actions{ justify-content:center; }
  .cat-hero__stage{ order:-1; min-height:260px; }
  .stat-row{ grid-template-columns:1fr 1fr; }
  .spec-highlight{ grid-template-columns:1fr; }
  .spec-highlight__stage{ order:-1; min-height:240px; }
}

@media (max-width:860px){
  /* A 16:9 banner shrunk to phone width renders its baked-in text at ~7px.
     Crop to the product instead and use the real markup caption. */
  .slider__viewport{ aspect-ratio:4/3; }
  .slide img{ object-position:var(--focus,68%) center; }
  .slider__dots{ top:14px; bottom:auto; }
  .slide__caption{
    position:absolute; left:0; right:0; bottom:0; z-index:3;
    display:flex; flex-direction:column; align-items:flex-start; gap:7px;
    padding:80px 22px 22px;
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.82) 38%,
      rgba(255,255,255,.97) 72%,
      #fff 100%);
  }
  .slide__eyebrow{
    font-size:11px; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; color:var(--green-dark);
  }
  .slide__title{
    font-size:clamp(26px,7vw,38px); font-weight:700;
    letter-spacing:-.04em; line-height:1; color:var(--text);
  }
  .slide__cta{
    margin-top:5px; padding:10px 20px; border-radius:999px;
    background:var(--green); color:#fff;
    font-size:13.5px; font-weight:600;
  }

  .nav__links{ display:none; }
  .burger{ display:flex; }
  .nav__actions .btn--primary{ display:none; }
  .brand img{ height:40px; }
  .strip__inner{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento__card--wide{ grid-column:span 2; }
  .footer__cols{ grid-template-columns:repeat(2,1fr); }
  .topbar__track{ font-size:11px; gap:10px; }
  .callout-row{ grid-template-columns:repeat(2,1fr); gap:22px; }
}

@media (max-width:620px){
  body{ font-size:16px; }
  :root{ --nav-h:64px; }
  .slider__arrow{ display:none; }
  .slider__dots button{ width:24px; }
  .feature{ flex-direction:column; }
  .feature__body{ padding:14px 18px 18px; }
  .bento{ grid-template-columns:1fr; }
  .bento__card,.bento__card--lg,.bento__card--wide{ grid-column:span 1; min-height:250px; }
  .bento__card{ padding:22px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; }
  .card__info{ padding:14px 15px 16px; }
  .card__info h3{ font-size:15.5px; }
  .card__foot{ flex-direction:column; align-items:stretch; gap:9px; }
  .add{ width:100%; justify-content:center; }
  .story__panels{ min-height:400px; }
  .colors__inner{ padding:24px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .drawer__panel{ width:100%; }
  .stat-row{ grid-template-columns:1fr; }
  .compare th,.compare td{ padding:12px 14px; font-size:13.5px; }
  .spec-highlight,.cat-hero__inner{ padding:26px; }
}

/* ---------------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .story__svg.is-on{ opacity:1; transform:none; }
  .slide img{ transform:none; }
}

/* ---------------------------------------------------------------- PRINTING */
@media print{
  .nav,.topbar,.loader,.scroll-progress,.drawer,.toast,
  .slider__arrow,.slider__dots{ display:none !important; }
  body{ background:#fff; color:#000; }
}