/* ============================================================================
   SPLIFF NATION — HOMEPAGE (LOCKED DESIGN)
   Single stylesheet. No framework. No build step.

   Geometry, type sizes and section heights in this file were measured off the
   approved mockup at a 1440px viewport. Treat the numbers as specification,
   not preference. See README.md → "DO NOT REDESIGN DURING WORDPRESS
   INTEGRATION".

   ORDER OF CONTENTS
   00  Fonts
   01  Design tokens
   02  Reset + base
   03  Layout primitives (.shell, .section, .sec-head)
   04  Buttons, links, labels
   05  Section 01 — utility strip
   06  Section 02 — retail nav
   07  Section 03 — hero
   08  Sections 04/05 — brand statement + stat row
   09  Sections 06/07 — STIIIZY / Cookies promos
   10  Section 08 — shop by category
   11  Section 09 — trending products
   12  Section 10 — top brands strip
   13  Section 11 — America's Favorite Dispensary
   14  Section 12 — location cards
   15  Section 13 — reviews / trust
   16  Section 14 — how it works
   17  Sections 15/16 — discover + join the nation
   18  Section 17 — footer
   19  Breakpoints  (1180 · 960 · 700 · 480)
   ========================================================================= */

/* 00 · FONTS ===============================================================
   One variable family carries the whole display voice, at two widths:
     condensed black  (wdth 62 / wght 900) — headlines, stat figures
     wide light       (wdth 112 / wght 300) — editorial titles
   Inter carries UI/body. Caveat carries the single script lockup.
   ========================================================================= */
@font-face{
  font-family:"Archivo Variable";
  src:url("fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
}

/* 2026-09-23 exact-reference correction layer. */
.sn-image-one{--sn-black:#050807;--sn-green:#07392f;--sn-paper:#fff;color:#0a0c0b;background:#fff}
.sn-image-one .image-one-header{background:transparent;color:#fff}
.sn-image-one .utility{height:35px;background:#07121c;border-bottom:1px solid rgba(255,255,255,.1)}
.sn-image-one .utility__inner{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;font-size:9px;font-weight:700;letter-spacing:.04em}
.sn-image-one .utility__inner>span{text-align:right}
.sn-image-one .utility__inner a{color:#fff}
.sn-image-one .utility-logo{font:900 22px/.72 Arial Black,Arial,sans-serif;letter-spacing:-.04em;text-align:center}
.sn-image-one .utility-logo small{display:block;font:700 7px/1 Arial,sans-serif;letter-spacing:.28em;margin-left:.28em}
.sn-image-one .nav{height:54px;background:rgba(7,18,28,.84);backdrop-filter:blur(8px)}
.sn-image-one .nav__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px}
.sn-image-one .nav__primary{gap:clamp(16px,2.3vw,36px);font-size:10px}
.sn-image-one .nav__right{gap:17px}
.sn-image-one .nav-icon{font-size:18px;line-height:1}
.sn-image-one .order{padding:10px 22px;background:#fff;color:#07121c!important;font-size:9px;letter-spacing:.05em}
.sn-image-one .hero{height:clamp(390px,38vw,570px);min-height:390px}
.sn-image-one .hero__video{width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.sn-image-one .hero__scrim{background:linear-gradient(180deg,rgba(4,10,16,.14),rgba(4,10,16,.52))}
.sn-image-one .hero__caption{bottom:22px;align-items:flex-end}
.sn-image-one .hero__film{margin-top:18px;border:0;background:transparent;color:#fff;font-size:9px;font-weight:800;letter-spacing:.08em;display:flex;gap:9px;align-items:center;padding:0;cursor:pointer}
.sn-image-one .hero__film span{width:34px;height:34px;border:1px solid #fff;border-radius:50%;display:grid;place-items:center;font-size:10px}
.sn-image-one .statement{padding-top:34px}
.sn-image-one .statement h1{font:400 clamp(58px,7.4vw,118px)/.82 Anton,Impact,sans-serif;letter-spacing:-.035em}
.sn-image-one .statement h1 sup{font:700 .16em/1 Arial,sans-serif;vertical-align:top;margin-left:4px}
.sn-image-one .statement>div>p:not(.eyebrow){font-size:16px;line-height:1.3}
.sn-image-one .proof{padding-block:14px}
.sn-image-one .proof>div{min-height:72px}
.sn-image-one .promos{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:#fff}
.sn-image-one .promo-card{position:relative;display:block;height:clamp(210px,20.5vw,320px);overflow:hidden;background:#0a0a0a}
.sn-image-one .promo-card>img{width:100%;height:100%;object-fit:cover}
.sn-image-one .promo-card--cookies{background:#0755a5;isolation:isolate}
.sn-image-one .promo-card--cookies>img{position:absolute;right:-3%;bottom:-18%;width:60%;height:115%;object-fit:contain;z-index:-1;filter:saturate(1.08) contrast(1.03)}
.sn-image-one .promo-card--cookies:after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#06498f 0%,#0971c7 100%)}
.sn-image-one .cookies-copy{position:absolute;z-index:2;left:7%;top:50%;transform:translateY(-50%);color:#fff;display:flex;flex-direction:column;align-items:flex-start;text-shadow:0 1px 5px rgba(0,0,0,.2)}
.sn-image-one .cookies-copy b{font:700 clamp(36px,4.8vw,68px)/.86 Georgia,serif}
.sn-image-one .cookies-copy small{font:700 clamp(10px,1.05vw,15px)/1.15 Georgia,serif;margin-top:14px}
.sn-image-one .cookies-copy em{font:800 9px/1 Arial,sans-serif;font-style:normal;border:1px solid #fff;padding:9px 12px;margin-top:18px;letter-spacing:.04em}
.sn-image-one .category-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(14px,2.2vw,34px)}
.sn-image-one .category-image{width:100%!important;aspect-ratio:1/1;border:1px solid #ecece8;border-radius:50%!important;background-color:#f7f6f3;background-image:var(--category-sprite);background-repeat:no-repeat;background-size:700% 100%;background-position:calc(var(--category-index) * 16.666667%) center;box-shadow:0 3px 13px rgba(0,0,0,.04)}
.sn-image-one .category-grid strong{font-size:10px;color:#0b0c0b}
.sn-image-one .trending{padding-top:14px}
.sn-image-one .product-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1100px}
.sn-image-one .product-card{background:#fff;border-color:#e2e2df}
.sn-image-one .location-intro{display:none}
.sn-image-one .brand-rail{background:#050807;color:#fff}
.sn-image-one .story-join{grid-template-columns:2fr 1fr}
.sn-image-one .reviews{grid-template-columns:1.12fr repeat(3,1fr)}
.sn-image-one .foot{background:#050708;padding-top:38px}
.sn-image-one .foot-grid{grid-template-columns:1.35fr repeat(3,.82fr) 1fr;gap:clamp(20px,2.5vw,40px)}
.sn-image-one .legal-links{border-top:1px solid rgba(255,255,255,.13);margin-top:30px;padding-top:18px;display:flex;flex-wrap:wrap;gap:11px 22px}
.sn-image-one .legal-links a{font-size:9px;color:#aeb2b0}
.sn-image-one .copyright{border-top:1px solid rgba(255,255,255,.08);margin-top:18px;padding-top:18px}

@media(max-width:900px){
 .sn-image-one .nav__primary{gap:14px}
 .sn-image-one .nav__primary a:nth-last-child(-n+2){display:none}
 .sn-image-one .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .sn-image-one .foot-grid{grid-template-columns:repeat(3,1fr)}
 .sn-image-one .foot-brand,.sn-image-one .foot-contact{grid-column:span 1}
}
@media(max-width:600px){
 .sn-image-one .utility{height:30px}
 .sn-image-one .utility__inner{grid-template-columns:1fr auto;font-size:8px}
 .sn-image-one .utility-logo{display:none}
 .sn-image-one .utility__inner>span{white-space:nowrap}
 .sn-image-one .nav{height:54px}
 .sn-image-one .nav__inner{grid-template-columns:auto 1fr}
 .sn-image-one .nav__primary{display:none}
 .sn-image-one .mobile-menu{display:block}
 .sn-image-one .nav__right{justify-content:flex-end;gap:12px}
 .sn-image-one .nav-icon{font-size:16px}
 .sn-image-one .nav-icon:nth-of-type(2){display:none}
 .sn-image-one .order{padding:9px 12px}
 .sn-image-one .hero{height:460px;min-height:460px}
 .sn-image-one .hero__video{object-position:center center}
 .sn-image-one .hero__caption{bottom:18px}
 .sn-image-one .statement h1{font-size:13vw;line-height:.84}
 .sn-image-one .statement>div>p:not(.eyebrow){font-size:13px}
 .sn-image-one .proof{grid-template-columns:repeat(3,1fr)}
 .sn-image-one .promos{grid-template-columns:1fr}
 .sn-image-one .promo-card{height:240px}
 .sn-image-one .promo-card--cookies>img{width:52%;right:0}
 .sn-image-one .category-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px 10px}
 .sn-image-one .category-grid>li{grid-column:auto!important}
 .sn-image-one .category-grid>li:nth-child(n+5){transform:translateX(50%)}
 .sn-image-one .category-grid>li:nth-child(7){transform:translateX(150%)}
 .sn-image-one .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sn-image-one .story-join{grid-template-columns:1fr}
 .sn-image-one .reviews{grid-template-columns:1fr}
 .sn-image-one .foot-grid{grid-template-columns:repeat(2,1fr)}
 .sn-image-one .foot-brand,.sn-image-one .foot-contact{grid-column:1/-1}
}

/* Production integration: retain the locked system while supporting seven live categories. */
.cat-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.review-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.review-proof__item{border:1px solid #d8d8d2;padding:18px;background:#fff;min-height:126px;display:flex;flex-direction:column;justify-content:space-between}
.review-proof__item p{font-size:13px;line-height:1.5;color:#33332f}
.review-proof__item a{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.faq-mini{margin-top:18px;max-width:60ch}
.faq-mini details{border-top:1px solid rgba(255,255,255,.35);padding:8px 0}
.faq-mini summary{cursor:pointer;font-size:12px;font-weight:700}
.faq-mini p{margin:6px 0 0;font-size:12px;line-height:1.5}
.sn-home .pwa-install-prompt,.sn-home .pwa-popup{display:none!important}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.review-proof{grid-template-columns:1fr}}
@font-face{font-family:"Caveat";src:url("fonts/caveat-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* 01 · DESIGN TOKENS ======================================================= */
:root{
  /* colour — black / white / one green. Nothing else carries brand weight. */
  --c-black:#000;
  --c-ink:#0b0b0b;
  --c-ink-3:#1f1f1f;
  --c-paper:#fff;
  --c-paper-2:#f7f6f3;
  --c-paper-3:#f1f0ec;
  --c-line:#e4e2dc;
  --c-line-2:#d5d3cc;
  --c-line-dark:rgba(255,255,255,.16);
  --c-muted:#6f6f69;
  --c-muted-dark:rgba(255,255,255,.66);
  --c-green:#14532d;
  --c-green-hi:#1a6b39;
  --c-blue:#0d3a86;            /* Cookies panel field */
  --c-badge-best:#4a3520;
  --c-badge-new:#c0271c;
  --c-star:#f5a623;

  /* nav theme — the mockup ships the LIGHT nav. Flip these two tokens (and
     --nav-search-bg / --nav-line) for the black variant; nothing else moves. */
  --nav-bg:var(--c-paper-2);
  --nav-fg:var(--c-ink);
  --nav-fg-soft:#3b3b36;
  --nav-line:#dedcd5;
  --nav-search-bg:#fff;

  /* type */
  --ff-display:"Archivo Variable","Arial Narrow","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ff-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ff-script:"Caveat","Segoe Script","Bradley Hand",cursive;

  --fs-h1:clamp(38px,5.95vw,86px);
  --fs-story:clamp(30px,3.35vw,48px);
  --fs-support:clamp(26px,2.9vw,42px);
  --fs-title:clamp(14px,1.18vw,17px);
  --fs-body:15px;
  --fs-sm:13px;
  --fs-xs:12px;
  --fs-micro:10px;

  --tr-wide:.085em;
  --tr-wider:.13em;
  --tr-display:-.015em;

  /* space */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:22px;
  --s-6:32px; --s-7:44px; --s-8:60px; --s-9:80px;
  --sec-y:clamp(24px,2.1vw,30px);
  --gap-card:clamp(8px,.62vw,9px);
  --gap-card-lg:clamp(12px,1.2vw,17px);

  /* structure — measured off the mockup */
  --page-max:1400px;
  --gutter:clamp(18px,2.6vw,38px);
  --bleed-pad:max(var(--gutter),calc((100vw - var(--page-max))/2 + var(--gutter)));
  --panel-pad:calc(var(--bleed-pad) + 12px);
  --radius:3px;
  --radius-card:5px;
  --nav-h:67px;
  --utility-h:28px;

  /* product row column count. Written spec = 5 across on desktop.
     Set to 6 to reproduce the mockup's six-up row exactly. */
  --prod-cols:5;
}

/* Display voices ---------------------------------------------------------- */
.u-cond{font-family:var(--ff-display);font-weight:900;font-stretch:62%;font-synthesis:none}
.u-wide{font-family:var(--ff-display);font-weight:300;font-stretch:112%;font-synthesis:none}

/* 02 · RESET + BASE ======================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.spliff-home{
  margin:0;
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--c-ink);
  background:var(--c-paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
address{font-style:normal}
sup{font-size:.44em;vertical-align:super;line-height:0}
.tm{font-size:.3em;vertical-align:super;line-height:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ico{width:1em;height:1em;fill:currentColor;flex:none}

.skip-link{
  position:absolute;left:var(--gutter);top:-60px;z-index:99;
  background:var(--c-black);color:#fff;padding:10px 16px;
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tr-wide);
  transition:top .15s ease;
}
.skip-link:focus{top:8px}

a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--c-green-hi);outline-offset:2px;border-radius:2px;
}
.promo a:focus-visible,.story a:focus-visible,.hero a:focus-visible,
.closer a:focus-visible,.reviews__support a:focus-visible,
.brands a:focus-visible,.foot a:focus-visible,
.utility a:focus-visible,.signup__submit:focus-visible{outline-color:#fff}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* 03 · LAYOUT PRIMITIVES =================================================== */
.shell{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec-y)}

.sec-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  margin-bottom:var(--s-4);
}
.sec-title{
  font-family:var(--ff-body);font-size:var(--fs-title);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--tr-wide);line-height:1.2;margin:0;
}
.sec-title--lg{font-size:clamp(15px,1.32vw,19px);letter-spacing:.055em}
.eyebrow{
  font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--tr-wider);color:#4a4a45;margin:0;
}

/* 04 · BUTTONS + INLINE LINKS ============================================= */
.btn{
  --btn-h:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:var(--btn-h);padding-inline:24px;border:1px solid transparent;border-radius:var(--radius);
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tr-wide);
  line-height:1;white-space:nowrap;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn--sm{--btn-h:38px;padding-inline:18px;font-size:11px}
.btn--dark{background:var(--c-black);color:#fff}
.btn--dark:hover{background:var(--c-ink-3)}
.btn--green{background:var(--c-green);color:#fff}
.btn--green:hover{background:var(--c-green-hi)}
.btn--ghost-dark{background:transparent;color:var(--c-black);border-color:var(--c-line-2)}
.btn--ghost-dark:hover{border-color:var(--c-black)}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.62)}
.btn--ghost-light:hover{background:#fff;color:var(--c-black);border-color:#fff}
.btn__arrow{font-size:1.1em;line-height:1;transform:translateY(-.5px)}

.sec-link{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tr-wide);color:var(--c-ink);white-space:nowrap;
}
.sec-link:hover{color:var(--c-green-hi)}
.sec-link--light{color:rgba(255,255,255,.85)}
.sec-link--light:hover{color:#fff}

/* 05 · SECTION 01 — UTILITY STRIP ========================================== */
.utility{background:var(--c-black);color:rgba(255,255,255,.82)}
.utility__inner{
  min-height:var(--utility-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
}
.utility__list{display:flex;align-items:center;gap:clamp(16px,4.6vw,88px)}
.utility__item{
  display:flex;align-items:center;gap:7px;
  font-size:var(--fs-micro);font-weight:600;text-transform:uppercase;letter-spacing:.11em;
  white-space:nowrap;
}
.utility__item .ico{font-size:11px;opacity:.8}
.utility__right{display:flex;align-items:center;gap:var(--s-4)}
.utility__phone{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.11em;color:#fff;
}
.utility__phone:hover{opacity:.78}
.utility__phone .ico{font-size:11px}
.utility__mark{font-size:12px;opacity:.6;display:flex}

/* 06 · SECTION 02 — RETAIL NAV ============================================ */
.nav{background:var(--nav-bg);color:var(--nav-fg);border-bottom:1px solid var(--nav-line)}
.nav__inner{
  min-height:var(--nav-h);
  display:flex;align-items:center;gap:clamp(14px,2vw,34px);
}
.logo{display:flex;flex-direction:column;line-height:.82;flex:none;color:inherit}
.logo__word{
  font-family:var(--ff-display);font-weight:900;font-stretch:105%;
  font-size:34px;letter-spacing:-.005em;text-transform:uppercase;
}
.logo__tm{font-size:.28em;vertical-align:super}
.logo__sub{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5em;padding-left:2px;opacity:.9;
}
.nav__toggle{display:none}

.nav__menu{flex:none}
.nav__list{display:flex;align-items:center;gap:clamp(13px,1.75vw,30px)}
.nav__list a{
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tr-wide);color:var(--nav-fg-soft);
  padding-block:6px;transition:color .16s ease;
}
.nav__list a:hover{color:var(--nav-fg)}

.nav__search{
  flex:1 1 auto;min-width:0;max-width:400px;margin-left:auto;
  display:flex;align-items:center;gap:10px;height:40px;padding-inline:15px;
  background:var(--nav-search-bg);border:1px solid var(--nav-line);border-radius:var(--radius);
}
.nav__search .ico{font-size:14px;opacity:.55}
.nav__search input{
  flex:1;min-width:0;background:none;border:0;color:inherit;
  font-size:var(--fs-sm);font-family:inherit;
}
.nav__search input::placeholder{color:#8d8d86}
.nav__search input:focus{outline:none}
.nav__search:focus-within{border-color:var(--c-line-2)}

.nav__actions{display:flex;align-items:center;gap:clamp(12px,1.3vw,18px);flex:none}
.nav__icon{position:relative;display:flex;font-size:19px;color:var(--nav-fg-soft)}
.nav__icon:hover{color:var(--nav-fg)}
.nav__cart-count{
  position:absolute;top:-4px;right:-6px;min-width:15px;height:15px;
  display:grid;place-items:center;padding:0 3px;
  background:var(--c-green);color:#fff;border-radius:999px;
  font-size:8.5px;font-weight:800;line-height:1;
}
.nav__actions .btn{--btn-h:42px;width:136px;max-width:100%}

/* 07 · SECTION 03 — CINEMATIC HERO ======================================== */
.hero{position:relative;background:var(--c-black);isolation:isolate}
.hero__img{
  width:100%;height:clamp(310px,35.5vw,511px);
  object-fit:cover;object-position:50% 42%;
}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.04) 58%,rgba(0,0,0,.62) 100%);
}
.hero__caption{
  position:absolute;left:0;right:0;bottom:clamp(16px,1.8vw,26px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);
  color:#fff;
}
.hero__eyebrow{
  font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tr-wider);
}
.hero__place{
  font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;text-align:right;color:rgba(255,255,255,.86);
}
.hero__place-sub{color:rgba(255,255,255,.64)}

/* 08 · SECTIONS 04/05 — BRAND STATEMENT + STAT ROW ========================
   Left copy column = 55.3% of the viewport at 1440 (measured).
   Right visual = photo : black script panel at 2.22 : 1.
   ========================================================================= */
.statement{
  display:grid;grid-template-columns:minmax(0,55.3fr) minmax(0,44.7fr);
  background:var(--c-paper-2);
}
.statement__copy{
  padding:clamp(24px,2.1vw,30px) clamp(20px,3vw,44px) clamp(22px,1.95vw,28px);
  padding-left:var(--panel-pad);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
}
.statement__title{
  font-family:var(--ff-display);font-weight:900;font-stretch:62%;font-synthesis:none;
  font-size:var(--fs-h1);line-height:.95;letter-spacing:var(--tr-display);
  text-transform:uppercase;margin-top:var(--s-3);
}
.statement__lede{
  margin-top:clamp(20px,2.2vw,32px);font-size:var(--fs-body);line-height:1.62;color:#3a3a36;
  max-width:48ch;
}
.statement__cta{display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:clamp(16px,1.5vw,21px)}
.statement__cta .btn{width:215px;max-width:100%}
.statement__cta .btn--ghost-dark{width:245px;max-width:100%;background:#fff}

.stats{display:flex;align-items:stretch;flex-wrap:wrap;margin-top:clamp(18px,1.8vw,26px)}
.stats__item{
  display:flex;flex-direction:column;gap:5px;
  padding-inline:clamp(16px,1.8vw,26px);border-left:1px solid var(--c-line-2);
}
.stats__item:first-child{padding-left:0;border-left:0}
.stats__num{
  font-family:var(--ff-display);font-weight:900;font-stretch:62%;font-synthesis:none;
  font-size:clamp(20px,1.95vw,28px);line-height:1;letter-spacing:0;text-transform:uppercase;
}
.stats__label{
  font-size:var(--fs-micro);font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;color:var(--c-muted);line-height:1.4;
}

.statement__visual{
  display:grid;grid-template-columns:minmax(0,2.22fr) minmax(0,1fr);
  background:var(--c-black);
}
.statement__photo{position:relative;overflow:hidden}
.statement__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.statement__panel{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-5);
  padding:clamp(26px,3vw,44px) 0 clamp(24px,2.6vw,38px) 0;
  padding-right:var(--bleed-pad);color:#fff;
}
.script{
  font-family:var(--ff-script);font-weight:700;
  font-size:clamp(26px,2.9vw,42px);line-height:1.06;
  transform:rotate(-7deg);transform-origin:0 0;
  margin-left:clamp(-34px,-2.2vw,-8px);
}
.statement__panel-meta{
  font-size:var(--fs-micro);font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;color:var(--c-muted-dark);line-height:2;
}

/* 09 · SECTIONS 06/07 — STIIIZY / COOKIES PROMOS ==========================
   Two equal panels, hairline white gutter between, 375px tall at 1440.
   ========================================================================= */
.promos{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
  background:var(--c-paper-2);
}
.promo{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(250px,26vw,375px);display:flex;align-items:center;
}
.promo--stiiizy{background:#0b0b0b}
.promo--cookies{background:var(--c-blue)}
.promo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.promo__scrim{position:absolute;inset:0;z-index:-1}
.promo--stiiizy .promo__scrim{background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.66) 44%,rgba(0,0,0,.12) 100%)}
.promo--cookies .promo__scrim{background:linear-gradient(90deg,rgba(6,24,62,.88) 0%,rgba(6,24,62,.6) 44%,rgba(6,24,62,.08) 100%)}
.promo__body{
  position:relative;color:#fff;
  padding:clamp(24px,2.8vw,42px) clamp(22px,2.6vw,40px);
  max-width:min(66%,470px);
}
.promo--stiiizy .promo__body{padding-left:var(--panel-pad)}
.promo--cookies .promo__body{padding-left:clamp(24px,4.9vw,70px)}
.promo__logo{line-height:1;margin-bottom:clamp(16px,1.9vw,26px)}
.promo__logo--stiiizy{
  font-family:var(--ff-display);font-weight:300;font-stretch:112%;font-synthesis:none;
  font-size:clamp(30px,3.2vw,46px);text-transform:uppercase;letter-spacing:.05em;
}
.promo__logo--cookies{
  font-family:var(--ff-script);font-weight:700;font-size:clamp(36px,4.1vw,58px);
}
.promo__title{
  font-family:var(--ff-display);font-weight:300;font-stretch:112%;font-synthesis:none;
  font-size:clamp(19px,1.88vw,27px);line-height:1.18;text-transform:uppercase;
  letter-spacing:.005em;
}
.promo__cta{margin-top:clamp(18px,2vw,28px)}
.promo__cta .btn{--btn-h:44px;width:186px;max-width:100%}

/* 10 · SECTION 08 — SHOP BY CATEGORY ====================================== */
.cat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap-card-lg)}
.cat__link{
  position:relative;display:block;overflow:hidden;border-radius:var(--radius);
  background:var(--c-ink);
}
.cat__media{display:block;aspect-ratio:5/4}
.cat__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.cat__link:hover .cat__media img{transform:scale(1.035)}
.cat__link::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.8) 100%);
}
.cat__foot{
  position:absolute;inset:auto 0 0 0;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:clamp(11px,1.15vw,17px) clamp(12px,1.2vw,18px);color:#fff;
}
.cat__name{
  font-size:var(--fs-title);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
}
.cat__arrow{font-size:15px;line-height:1;opacity:.92}

/* 11 · SECTION 09 — TRENDING PRODUCTS ===================================== */
.tabs{display:flex;align-items:center;gap:var(--s-1);margin-left:auto;flex-wrap:wrap}
.tab{
  background:none;border:0;cursor:pointer;padding:7px 13px;border-radius:var(--radius);
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:#4a4a45;
  transition:background-color .16s ease,color .16s ease;
}
.tab:hover{color:var(--c-ink)}
.tab.is-active{background:var(--c-paper-3);color:var(--c-ink)}
.trending .sec-link{margin-left:clamp(10px,1.4vw,22px)}

.prod-grid{
  display:grid;grid-template-columns:repeat(var(--prod-cols),minmax(0,1fr));
  gap:var(--gap-card);
}
.pcard{
  display:flex;flex-direction:column;background:var(--c-paper);
  border:1px solid var(--c-line);border-radius:var(--radius-card);overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.pcard:hover{border-color:var(--c-line-2);box-shadow:0 8px 22px -16px rgba(0,0,0,.4)}
.pcard__media{position:relative;display:block;aspect-ratio:16/10;background:#fff}
.pcard__media img{width:100%;height:100%;object-fit:cover}
.pcard__badge{
  position:absolute;top:8px;left:8px;z-index:1;
  padding:4px 9px;border-radius:var(--radius);
  font-size:10px;font-weight:700;letter-spacing:.02em;
  color:#fff;background:var(--c-badge-best);
}
.pcard__badge--new{background:var(--c-badge-new)}
.pcard__body{
  flex:1 1 auto;display:flex;flex-direction:column;gap:3px;
  padding:clamp(10px,.95vw,14px) clamp(10px,.95vw,14px) 0;
}
.pcard__name{font-size:14px;font-weight:700;line-height:1.3;letter-spacing:-.005em}
.pcard__name a:hover{color:var(--c-green-hi)}
.pcard__meta{font-size:12.5px;color:var(--c-muted);line-height:1.35}
.pcard__price{margin-top:auto;padding-top:var(--s-2);font-size:16px;font-weight:700;letter-spacing:-.01em}
.pcard__foot{padding:clamp(9px,.85vw,12px)}
.pcard__cart{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  height:36px;padding:0 4px 0 14px;cursor:pointer;
  background:var(--c-paper-3);border:0;border-radius:999px;
  font-size:var(--fs-sm);font-weight:500;letter-spacing:0;
  transition:background-color .16s ease;
}
.pcard__cart:hover{background:#e7e6e1}
.pcard__plus{
  width:28px;height:28px;flex:none;display:grid;place-items:center;
  background:var(--c-black);color:#fff;border-radius:999px;
}
.pcard__plus svg{width:13px;height:13px;fill:currentColor}

/* 12 · SECTION 10 — TOP BRANDS STRIP ====================================== */
.brands{background:var(--c-black);color:#fff;padding-block:clamp(18px,2.1vw,30px)}
.brands__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  margin-bottom:clamp(14px,1.5vw,22px);
}
.brands__title{
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tr-wider);color:rgba(255,255,255,.78);
}
.brands__row{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,1.7vw,26px);
}
.brands__row li{flex:0 1 auto;min-width:0}
.brands__row a{display:block;opacity:.94;transition:opacity .16s ease}
.brands__row a:hover{opacity:1}
.brandmark{
  display:block;font-family:var(--ff-display);font-weight:900;font-stretch:88%;
  font-synthesis:none;font-size:clamp(13px,1.35vw,20px);line-height:1;
  text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;
}
.brandmark--stiiizy{font-weight:300;font-stretch:112%;letter-spacing:.06em}
.brandmark--tight{font-size:clamp(11px,1.12vw,16px);letter-spacing:.02em}
.brandmark--script{
  font-family:var(--ff-script);font-weight:700;text-transform:none;
  font-size:clamp(17px,1.75vw,26px);letter-spacing:0;
}
.brandmark--stack{
  font-size:clamp(10px,1.02vw,15px);line-height:1.06;white-space:normal;letter-spacing:.02em;
}

/* 13 · SECTION 11 — AMERICA'S FAVOURITE DISPENSARY ======================== */
.story{position:relative;isolation:isolate;background:var(--c-ink);color:#fff;overflow:hidden}
.story__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;z-index:-2}
.story__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.28) 72%,rgba(0,0,0,.5) 100%);
}
.story__inner{
  min-height:clamp(270px,24.8vw,358px);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-7);
  padding-block:clamp(30px,3.2vw,46px);padding-left:var(--panel-pad);
}
.story__copy{max-width:min(52%,470px)}
.story__title{
  font-family:var(--ff-display);font-weight:300;font-stretch:112%;font-synthesis:none;
  font-size:var(--fs-story);line-height:1.05;letter-spacing:.005em;text-transform:uppercase;
}
.story__lede{
  margin-top:var(--s-4);font-size:var(--fs-sm);line-height:1.65;
  color:rgba(255,255,255,.84);margin-bottom:clamp(18px,2vw,26px);
}
.story__copy .btn{width:200px;max-width:100%}
.story__pillars{display:flex;flex-direction:column;gap:var(--s-3);flex:none}
.story__pillars li{
  font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--tr-wider);color:rgba(255,255,255,.9);
}

/* 14 · SECTION 12 — LOCATION CARDS ======================================== */
.loc-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap-card-lg)}
.loc{
  display:flex;flex-direction:column;background:var(--c-paper);
  border:1px solid var(--c-line);border-radius:var(--radius-card);overflow:hidden;
  transition:border-color .18s ease;
}
.loc:hover{border-color:var(--c-line-2)}
.loc__media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--c-ink)}
.loc__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.loc__media:hover img{transform:scale(1.035)}
.loc__name{
  font-size:15px;font-weight:700;letter-spacing:-.005em;line-height:1.25;
  padding:clamp(10px,1vw,13px) clamp(12px,1.15vw,16px) 0;
}
.loc__name a:hover{color:var(--c-green-hi)}
.loc__addr{
  font-size:var(--fs-sm);line-height:1.5;color:var(--c-muted);
  padding:6px clamp(12px,1.15vw,16px) 0;
}
.loc__dir{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;color:var(--c-green);
  font-size:var(--fs-xs);font-weight:700;
  padding:clamp(10px,1vw,13px) clamp(12px,1.15vw,16px) clamp(11px,1.05vw,14px);
}
.loc__dir:hover{color:var(--c-green-hi)}

/* 15 · SECTION 13 — REVIEWS / TRUST ======================================= */
.reviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--c-paper-2)}
.reviews__support{position:relative;isolation:isolate;overflow:hidden;background:var(--c-ink);color:#fff}
.reviews__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-2}
.reviews__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.56) 52%,rgba(0,0,0,.2) 100%);
}
.reviews__support-body{
  min-height:clamp(210px,16.4vw,236px);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s-3);
  padding:clamp(20px,2vw,26px) clamp(24px,2.7vw,38px);
  padding-left:var(--panel-pad);
}
.reviews__support-title{
  font-family:var(--ff-display);font-weight:300;font-stretch:112%;font-synthesis:none;
  font-size:var(--fs-support);line-height:1.06;letter-spacing:.005em;text-transform:uppercase;
}
.reviews__support-copy{font-size:var(--fs-sm);color:rgba(255,255,255,.82);line-height:1.65}
.reviews__support-body p:last-child{margin-top:var(--s-3)}
.reviews__support-body .btn{width:196px;max-width:100%}

.reviews__panel{
  padding:clamp(16px,1.5vw,20px) clamp(24px,2.7vw,38px);
  padding-right:var(--bleed-pad);
  display:flex;flex-direction:column;
}
.reviews__panel .sec-head{margin-bottom:var(--s-2)}
.rating{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-3)}
.rating__score{
  font-family:var(--ff-display);font-weight:500;font-stretch:108%;font-synthesis:none;
  font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-.01em;
}
.rating__meta{display:flex;flex-direction:column;gap:2px}
.rating__stars{display:flex;gap:3px;color:var(--c-star)}
.rating__stars svg{width:24px;height:24px;fill:currentColor}
.rating__count{font-size:var(--fs-sm);font-weight:600;color:#3a3a36}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-card-lg);margin-top:auto}
.quote{
  display:flex;flex-direction:column;gap:var(--s-3);
  padding:clamp(12px,1.1vw,15px);
  border:1px solid var(--c-line);border-radius:var(--radius-card);background:#fff;
}
.quote__text{font-size:var(--fs-sm);line-height:1.5;color:#33332f}
.quote__by{display:flex;align-items:flex-start;gap:var(--s-3);margin-top:auto}
.quote__name{display:flex;flex-direction:column;gap:1px;font-size:var(--fs-sm)}
.quote__name b{font-weight:700}
.quote__loc{color:var(--c-muted)}
.quote__g{
  margin-left:auto;width:22px;height:22px;flex:none;display:grid;place-items:center;
  border-radius:999px;background:#fff;border:1px solid var(--c-line);
  font-family:var(--ff-display);font-weight:900;font-size:12px;color:#4285f4;
}

/* 16 · SECTION 14 — HOW IT WORKS ========================================== */
.how{background:var(--c-paper-2);border-top:1px solid var(--c-line)}
.how__inner{padding-block:clamp(18px,1.9vw,24px)}
.how__title{margin-bottom:clamp(10px,1.1vw,13px)}
.how__row{display:flex;align-items:flex-start;gap:clamp(16px,2vw,32px)}
.how__steps{
  flex:1 1 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.step{display:flex;align-items:flex-start;gap:var(--s-3);padding-inline:clamp(14px,1.6vw,24px)}
.step+.step{border-left:1px solid var(--c-line)}
.step:first-child{padding-left:0}
.step__num{
  width:42px;height:42px;flex:none;display:grid;place-items:center;
  border:1px solid var(--c-line-2);border-radius:999px;
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em;
}
.step__text{display:flex;flex-direction:column;gap:3px;font-size:12.5px;line-height:1.45;color:var(--c-muted)}
.step__text strong{
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tr-wide);color:var(--c-ink);
}
.how__cta{flex:none}
.how__cta .btn{width:186px;max-width:100%}

/* 17 · SECTIONS 15/16 — DISCOVER + JOIN THE NATION ======================== */
.closers{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);background:var(--c-black)}
.closer{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--c-ink)}
.closer+.closer{border-left:2px solid var(--c-black)}
.closer__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.closer__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.54) 52%,rgba(0,0,0,.24) 100%);
}
.closer__body{
  min-height:clamp(200px,16.8vw,242px);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s-3);
  padding:clamp(20px,2.2vw,28px);max-width:min(72%,470px);
}
.closer--discover .closer__body{padding-left:var(--panel-pad)}
.closer--join .closer__body{max-width:min(88%,520px);padding-left:clamp(20px,2.2vw,28px)}
.closer__kicker{
  font-family:var(--ff-display);font-weight:300;font-stretch:112%;font-synthesis:none;
  font-size:clamp(24px,2.5vw,36px);text-transform:uppercase;letter-spacing:.03em;line-height:1;
}
.closer__title{
  font-family:var(--ff-display);font-weight:300;font-stretch:112%;font-synthesis:none;
  font-size:clamp(21px,2.1vw,30px);line-height:1.12;letter-spacing:.005em;
}
.closer__title--join{font-size:clamp(20px,1.95vw,28px)}
.closer__copy{font-size:var(--fs-sm);color:rgba(255,255,255,.8);line-height:1.6;max-width:44ch}
.closer__body p:last-of-type{margin-top:var(--s-2)}
.closer--discover .btn{width:206px;max-width:100%}

.signup{display:flex;align-items:stretch;margin-top:var(--s-3);max-width:400px}
.signup__input{
  flex:1 1 auto;min-width:0;height:46px;padding-inline:16px;
  background:#fff;color:var(--c-ink);
  border:1px solid #fff;border-right:0;border-radius:var(--radius) 0 0 var(--radius);
  font-family:inherit;font-size:var(--fs-sm);
}
.signup__input::placeholder{color:#8d8d86}
.signup__input:focus{outline:none}
.signup__submit{
  width:52px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:var(--c-green);color:#fff;border:1px solid var(--c-green);
  border-radius:0 var(--radius) var(--radius) 0;font-size:16px;
  transition:background-color .16s ease;
}
.signup__submit:hover{background:var(--c-green-hi)}

/* 18 · SECTION 17 — FOOTER ================================================ */
.foot{background:var(--c-black);color:var(--c-muted-dark)}
.foot__inner{
  display:grid;
  grid-template-columns:minmax(190px,1.5fr) repeat(5,minmax(0,.82fr)) minmax(214px,1.1fr);
  gap:clamp(16px,2vw,30px);
  padding-block:clamp(26px,2.4vw,34px);
}
.foot__brand{padding-right:clamp(12px,1.5vw,24px);border-right:1px solid rgba(255,255,255,.1)}
.logo--foot{color:#fff}
.logo--foot .logo__word{font-size:33px}
.foot__tag{margin-top:var(--s-4);font-size:var(--fs-sm);line-height:1.65;color:var(--c-muted-dark)}
.foot__social{display:flex;gap:var(--s-4);margin-top:clamp(18px,2vw,26px)}
.foot__social a{display:flex;font-size:20px;color:rgba(255,255,255,.82)}
.foot__social a:hover{color:#fff}

.foot__h{
  font-size:var(--fs-sm);font-weight:700;color:#fff;margin-bottom:var(--s-3);
}
.foot__col li+li{margin-top:3px}
.foot__col a{font-size:var(--fs-sm);color:var(--c-muted-dark);line-height:1.6}
.foot__col a:hover{color:#fff}

.foot__contact{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4);
  padding-left:clamp(12px,1.5vw,24px);border-left:1px solid rgba(255,255,255,.1);
}
.foot__phone{display:flex;align-items:center;gap:9px;color:#fff;font-size:15px;font-weight:700;letter-spacing:.02em}
.foot__phone .ico{font-size:14px}
.foot__hours-h{font-size:var(--fs-sm);font-weight:700;color:#fff;margin-bottom:var(--s-2)}
.foot__hours dl{display:flex;flex-direction:column;gap:4px}
.foot__hours dl>div{display:flex;gap:10px;font-size:var(--fs-sm);color:var(--c-muted-dark)}
.foot__hours dt{min-width:70px}
.foot__hours dd{margin:0}
.foot__contact .btn{width:206px;max-width:100%}

.foot__bar{border-top:1px solid rgba(255,255,255,.1)}
.foot__bar-inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding-block:var(--s-4);font-size:var(--fs-xs);letter-spacing:.01em;color:rgba(255,255,255,.55);
}

/* ==========================================================================
   19 · BREAKPOINTS
   Mobile is a deliberate recomposition of the same design language:
   same type, same black/white/green balance, same section order.
   ========================================================================== */

/* ---- 900px: the utility strip sheds its third promise ------------------ */
@media (max-width:900px){
  .utility__item--wide{display:none}
  .utility__list{gap:clamp(14px,2.6vw,32px)}
}

/* ---- 1180px: nav sheds the inline search; grids tighten ---------------- */
@media (max-width:1180px){
  :root{--nav-h:64px}
  .nav__search{display:none}
  .nav__actions{margin-left:auto}
  .brands__row{flex-wrap:wrap;justify-content:flex-start;row-gap:16px}
  .story__copy{max-width:60%}
  .how__row{flex-wrap:wrap}
  .how__steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-5)}
  .step:nth-child(3){padding-left:0;border-left:0}
  .how__cta{margin-left:auto}
}

/* ---- 960px: split sections stack; 3-up grids --------------------------- */
@media (max-width:960px){
  .statement{grid-template-columns:minmax(0,1fr)}
  .statement__copy{padding-inline:var(--gutter);padding-block:clamp(30px,6vw,46px)}
  .statement__visual{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);min-height:330px}
  .statement__panel{padding-inline:var(--gutter)}
  .script{margin-left:0}
  .promos{grid-template-columns:minmax(0,1fr)}
  .promo__body{max-width:min(72%,460px)}
  .promo--stiiizy .promo__body,.promo--cookies .promo__body{padding-inline:var(--gutter)}
  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .loc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  :root{--prod-cols:3}
  .reviews{grid-template-columns:minmax(0,1fr)}
  .reviews__support-body,.reviews__panel{padding-inline:var(--gutter)}
  .closers{grid-template-columns:minmax(0,1fr)}
  .closer+.closer{border-left:0;border-top:2px solid var(--c-black)}
  .closer--discover .closer__body,.closer--join .closer__body{padding-inline:var(--gutter);max-width:none}
  .story__inner{padding-inline:var(--gutter)}
  .foot__inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,34px)}
  .foot__brand{grid-column:span 3;border-right:0;padding-right:0}
  .foot__contact{
    grid-column:span 3;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s-6);
    padding:var(--s-5) 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.1);
  }
}

/* ---- 700px: single-column composition, mobile nav --------------------- */
@media (max-width:700px){
  :root{
    --nav-h:56px;--utility-h:32px;
    --fs-h1:clamp(32px,9.4vw,46px);
    --fs-story:clamp(26px,7.4vw,34px);
    --fs-support:clamp(24px,7vw,32px);
    --fs-title:14px;
    --gap-card-lg:12px;
  }

  /* the strip keeps one promise plus the phone; three would wrap badly */
  .utility__item:not(:first-child){display:none}
  .utility__mark{display:none}

  .nav__inner{flex-wrap:wrap;gap:12px;padding-block:9px}
  .nav__toggle{
    order:-1;display:grid;place-items:center;width:36px;height:36px;
    background:none;border:1px solid var(--nav-line);border-radius:var(--radius);cursor:pointer;
  }
  .nav__toggle-bars{display:grid;gap:3px}
  .nav__toggle-bars i{display:block;width:16px;height:1.5px;background:currentColor}
  .logo{margin-right:auto}
  .logo__word{font-size:27px}
  .logo__sub{font-size:8.5px;letter-spacing:.42em}
  .nav__actions{gap:16px}
  .nav__actions .btn{display:none}
  .nav__menu{order:3;flex:1 0 100%;display:none;border-top:1px solid var(--nav-line);padding-top:8px}
  .nav__menu.is-open{display:block}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__list li+li{border-top:1px solid var(--nav-line)}
  .nav__list a{display:block;padding-block:12px}

  /* hero: intentional crop — the subject stays in frame, captions stack */
  .hero__img{height:clamp(300px,66vw,370px);object-position:56% 38%}
  .hero__caption{flex-direction:column;align-items:flex-start;gap:6px}
  .hero__place{text-align:left}
  .hero__place-sub{display:none}

  .statement__cta{gap:var(--s-3)}
  .statement__cta .btn,.statement__cta .btn--ghost-dark{width:auto;flex:1 1 46%}
  .stats{gap:var(--s-5) 0}
  .stats__item{flex:1 1 44%}
  .stats__item:nth-child(odd){padding-left:0;border-left:0}
  .statement__visual{grid-template-columns:minmax(0,1fr);min-height:0}
  .statement__photo{aspect-ratio:4/3}
  .statement__photo img{position:static;height:100%}
  .statement__panel{
    flex-direction:row;align-items:flex-end;justify-content:space-between;
    padding-block:var(--s-6) var(--s-5);
  }
  .script{font-size:32px;transform:rotate(-6deg)}

  /* the promo panels stay photographic overlays on mobile — stacking the
     image above the copy would double the section height and lose the look */
  .promo{min-height:clamp(230px,62vw,265px)}
  .promo__scrim{background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.72) 100%)!important}
  .promo--cookies .promo__scrim{background:linear-gradient(180deg,rgba(6,24,62,.2) 0%,rgba(6,24,62,.76) 100%)!important}
  .promo__body{max-width:none;padding-block:var(--s-6)}
  .promo__title{max-width:none}
  .promo__cta .btn{width:100%}

  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root{--prod-cols:2}
  .sec-head{flex-wrap:wrap;gap:var(--s-3)}
  .tabs{margin-left:0;order:4;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;
        padding-bottom:2px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .trending .sec-link{margin-left:auto}

  .story__inner{flex-direction:column;align-items:flex-start;gap:var(--s-5)}
  .story__copy{max-width:none}
  .story__scrim{background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.82) 100%)}
  .story__copy .btn{width:100%}
  .story__pillars{
    flex-direction:row;flex-wrap:wrap;gap:var(--s-2) var(--s-5);width:100%;
    padding-top:var(--s-4);border-top:1px solid var(--c-line-dark);
  }

  .loc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reviews__support-body{min-height:0;padding-block:var(--s-7)}
  .reviews__support-body .btn{width:100%}
  .quotes{grid-template-columns:minmax(0,1fr)}
  .rating__stars svg{width:20px;height:20px}

  .how__row{flex-direction:column;align-items:stretch;gap:var(--s-5)}
  .how__steps{grid-template-columns:minmax(0,1fr);row-gap:var(--s-4)}
  .step,.step:first-child{padding-inline:0}
  .step+.step{border-left:0}
  .how__cta{margin-left:0}
  .how__cta .btn{width:100%}

  .closer__body{min-height:0;padding-block:var(--s-7)}
  .closer--discover .btn{width:100%}
  .signup{max-width:none}

  .foot__inner{grid-template-columns:repeat(2,minmax(0,1fr));padding-block:var(--s-7)}
  .foot__brand,.foot__contact{grid-column:span 2}
  .foot__contact{flex-direction:column;align-items:flex-start;gap:var(--s-5)}
  .foot__contact .btn{width:100%}
  .foot__bar-inner{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---- 480px: the 390x844 target — final tightening --------------------- */
@media (max-width:480px){
  :root{--gutter:16px}
  .utility__item,.utility__phone{font-size:9.5px;letter-spacing:.09em}
  .hero__eyebrow{font-size:9.5px;letter-spacing:.1em}
  .statement__lede{font-size:14px}
  .promo__logo--stiiizy{font-size:31px}
  .promo__logo--cookies{font-size:38px}
  .pcard__name{font-size:13px}
  .pcard__meta{font-size:11.5px}
  .pcard__price{font-size:15px}
  .pcard__cart{font-size:12px;padding-left:12px}
  .brandmark{font-size:14px}
  .brandmark--script{font-size:18px}
  .brandmark--stack{font-size:10.5px}
  .brands__row{gap:14px 20px}
  .foot__col a,.foot__h{font-size:12px}
  .foot__hours dl>div{font-size:12px}
}

/* ---- 380px and below: keep the phone, drop the strip copy -------------- */
@media (max-width:380px){
  .utility__list{display:none}
  .utility__inner{justify-content:flex-end}
}