/* ==========================================================================
   Aroma Cannabis — aromacannabiswny.com
   Base stylesheet: tokens, shared components, header, footer, age gate.
   Palette: THE CABINET — emerald-black ink #050B07, warm cream #F2F5EE,
   gold drawer pulls #37B34A, a lime accent #B8F04E used sparingly.
   ========================================================================== */

/* ---------- 1. TOKENS -------------------------------------------------- */
:root{
  /* ground — emerald-black, the cabinet's own shadow */
  --ink:#050B07;          /* primary dark ground */
  --ink-2:#0B1710;        /* raised dark surface */
  --ink-3:#16301F;        /* hairlines on dark */
  --cream:#F2F5EE;        /* the light ground / text on dark */
  --cream-2:#E6EBDC;      /* raised light surface */
  --paper:#FFFFFF;

  /* gold — the brand primary, off the drawer pulls */
  --gold:#37B34A;         /* gold, the brand primary */
  --gold-deep:#7BE05A;    /* light gold */
  --gold-dark:#1E6B34;    /* deep gold, for accents on light grounds */
  --gold-wash:#04120A;

  /* secondaries */
  --sage:#2FA34A;
  --sage-deep:#0F3D1E;
  --moss:#0F3D1E;
  --rust:#0C1A10;
  --plum:#0F3D1E;
  --amber:#37B34A;
  --teal:#B8F04E;

  /* type on ground */
  --on-dark:#F2F5EE;
  --on-dark-soft:rgba(242,245,238,.68);
  --on-dark-faint:rgba(242,245,238,.42);
  --on-light:#0A1F12;
  --on-light-soft:rgba(10,31,18,.70);
  --on-light-faint:rgba(10,31,18,.48);

  /* type — Archivo Black is the display sans, Archivo the body sans */
  --display:'Archivo Black',Arial,'Helvetica Neue',sans-serif;
  --body:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* rhythm */
  --wrap:1200px;
  --wrap-narrow:760px;
  --gut:clamp(20px,5vw,48px);
  --sec:clamp(64px,9vw,132px);
  --r:10px;
  --r-lg:16px;

  --shadow:0 1px 2px rgba(4,18,10,.20),0 12px 34px -12px rgba(4,18,10,.42);
  --shadow-lg:0 2px 4px rgba(4,18,10,.24),0 30px 70px -24px rgba(4,18,10,.60);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. RESET --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--cream);
  color:var(--on-light);
  font-family:var(--body);
  font-size:clamp(16px,.55vw + 15px,18px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-variation-settings:"SOFT" 80;font-weight:600;line-height:1.06;letter-spacing:-.02em;
  }
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2.5px solid var(--gold-deep);outline-offset:3px;border-radius:4px}

/* ---------- 3. LAYOUT -------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:clamp(44px,6vw,80px)}
.dark{background:var(--ink);color:var(--on-dark)}
.dark h1,.dark h2,.dark h3{color:var(--cream)}
.light{background:var(--cream);color:var(--on-light)}
.paper{background:var(--paper)}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:12px 18px;z-index:999;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ---------- 4. TYPE ---------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dark);margin:0 0 18px;display:flex;align-items:center;gap:12px;
}
.dark .eyebrow{color:var(--gold)}
.eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor;flex:none;opacity:.7}
.h1{font-size:clamp(2.6rem,7.2vw,5.1rem)}
.h2{font-size:clamp(2.05rem,4.6vw,3.5rem)}
.h3{font-size:clamp(1.35rem,2vw,1.85rem);letter-spacing:-.015em}
.h4{font-size:clamp(1.08rem,1.3vw,1.28rem);letter-spacing:-.01em}
.lede{font-size:clamp(1.08rem,1.5vw,1.32rem);line-height:1.55;color:var(--on-light-soft);max-width:62ch}
.dark .lede{color:var(--on-dark-soft)}
.small{font-size:.92rem;line-height:1.6}
.fine{font-size:.8rem;line-height:1.55;color:var(--on-light-faint)}
.dark .fine{color:var(--on-dark-faint)}
.gold{color:var(--gold-deep)}
.dark .gold{color:var(--gold)}
.sec-head{max-width:66ch;margin-bottom:clamp(34px,4.5vw,58px)}
.sec-head .lede{margin-top:20px}

/* ---------- 5. BUTTONS ------------------------------------------------- */
.btn{
  --bg:var(--ink);--fg:var(--cream);--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border:1.5px solid var(--bd);border-radius:4px;
  background:var(--bg);color:var(--fg);
  font-weight:650;font-size:.95rem;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;
  transition:transform .28s var(--ease),background .22s,color .22s,border-color .22s,box-shadow .28s;

}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -10px rgba(5,11,7,.45)}
.btn:active{transform:translateY(0)}
.btn--gold{--bg:var(--gold);--fg:var(--ink);--bd:var(--gold)}
.btn--gold:hover{--bg:var(--gold-deep);--bd:var(--gold-deep)}
.btn--ghost{--bg:transparent;--fg:var(--on-light);--bd:rgba(5,11,7,.28)}
.btn--ghost:hover{--bd:var(--ink);--bg:var(--ink);--fg:var(--cream)}
.dark .btn--ghost{--fg:var(--cream);--bd:rgba(242,245,238,.34)}
.dark .btn--ghost:hover{--bg:var(--cream);--fg:var(--ink);--bd:var(--cream)}
.btn--sm{padding:11px 20px;font-size:.86rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.arrow{transition:transform .28s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

.tlink{
  display:inline-flex;align-items:center;gap:8px;font-weight:650;
  text-decoration:none;border-bottom:1.5px solid var(--gold-deep);padding-bottom:2px;
  transition:gap .25s var(--ease),border-color .25s;
}
.tlink:hover{gap:13px}

/* ---------- 6. HEADER -------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:70;
  background:rgba(5,11,7,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(242,245,238,.10);
  transition:background .3s;
}
.hdr__in{display:flex;align-items:center;gap:20px;min-height:74px}
.hdr__logo{display:flex;align-items:center;flex:none;text-decoration:none}
.hdr__logo img{height:36px;width:auto}
.hdr__nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.hdr__nav a{
  padding:9px 14px;border-radius:4px;text-decoration:none;
  font-size:.92rem;font-weight:600;color:rgba(242,245,238,.80);
  transition:color .2s,background .2s;
}
.hdr__nav a:hover{color:var(--cream);background:rgba(242,245,238,.09)}
.hdr__nav a[aria-current="page"]{color:var(--gold)}
.hdr__cta{margin-left:12px;flex:none}
.burger{
  margin-left:auto;display:none;width:44px;height:44px;border:1px solid rgba(242,245,238,.24);
  border-radius:12px;background:transparent;align-items:center;justify-content:center;cursor:pointer;
}
.burger span{display:block;width:19px;height:1.8px;background:var(--cream);position:relative;transition:.25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.8px;background:var(--cream);transition:.25s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:940px){
  .hdr__nav{
    position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);border-bottom:1px solid rgba(242,245,238,.12);
    padding:12px var(--gut) 26px;margin:0;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.26s var(--ease);
    max-height:calc(100dvh - 74px);overflow:auto;
  }
  .hdr__nav[data-open="true"]{transform:none;opacity:1;pointer-events:auto}
  .hdr__nav a{padding:15px 6px;border-radius:0;border-bottom:1px solid rgba(242,245,238,.09);font-size:1.05rem}
  .hdr__nav .btn{margin-top:18px;justify-content:center}
  .hdr__cta{display:none}
  .burger{display:flex}
}

/* ---------- 7. AGE GATE ------------------------------------------------ */
.gate{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--ink);padding:24px;text-align:center;
}
.gate[hidden]{display:none}
html:not(.js) .gate{display:none}
.gate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%,rgba(123,224,90,.14),transparent 62%);
}
.gate__card{position:relative;z-index:1;width:100%;max-width:470px}
.gate__card img{height:78px;width:auto;margin:0 auto 30px}
.gate__card h1,.gate__card .gate__title{font-size:clamp(1.5rem,6vw,2.4rem);color:var(--cream);margin:0}
.gate__card p{color:var(--on-dark-soft);margin:16px auto 30px;max-width:min(38ch,100%)}
.gate__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.gate__no{color:var(--on-dark-faint);font-size:.82rem;margin-top:24px}

/* ---------- 8. HERO ---------------------------------------------------- */
.hero{position:relative;background:var(--ink);color:var(--cream);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(90% 60% at 50% 8%,rgba(123,224,90,.16),transparent 60%),
    linear-gradient(180deg,rgba(5,11,7,.55) 0%,rgba(5,11,7,.72) 45%,var(--ink) 100%);
}
.hero__in{padding-block:clamp(60px,10vw,110px) clamp(72px,11vw,130px);text-align:center}
.hero__logo{height:clamp(78px,12vw,132px);width:auto;margin:0 auto clamp(26px,4vw,40px)}
.hero__welcome{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px;
}
.hero h1{font-size:clamp(2.5rem,7vw,5rem);max-width:15ch;margin-inline:auto}
.hero__sub{margin:24px auto 0;max-width:52ch;color:var(--on-dark-soft);font-size:clamp(1.05rem,1.5vw,1.25rem)}
.hero .btn-row{justify-content:center}
.hero__facts{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;
  margin-top:clamp(38px,5vw,56px);padding-top:30px;
  border-top:1px solid rgba(242,245,238,.14);
}
.hero__fact{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--on-dark-soft)}
.hero__fact b{color:var(--gold);font-weight:650}

/* pull quote */
.quote{
  position:relative;background:var(--ink-2);color:var(--cream);
  padding-block:clamp(50px,7vw,86px);text-align:center;
  border-top:1px solid rgba(242,245,238,.08);
}
.quote blockquote{margin:0;font-family:var(--display);font-variation-settings:"SOFT" 80;font-style:italic;
  font-size:clamp(1.35rem,3.1vw,2.35rem);line-height:1.32;letter-spacing:-.015em;
  max-width:22ch;margin-inline:auto;
  }
.quote blockquote span{color:var(--gold)}
.quote cite{display:block;margin-top:22px;font-style:normal;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-faint)}

/* ---------- 9. SECTION DIVIDER ---------- */
.ridge{display:block;width:100%;height:clamp(28px,3.4vw,52px);margin-bottom:-1px;background:var(--ink)}
.ridge--q{background:var(--ink-2)}   /* when the ridge follows the quote band */
.ridge--up{background:var(--cream)} /* when the ridge runs cream -> dark */
.ridge--flip{transform:scaleY(-1);margin:-1px 0 0}

/* ---------- 10. CARDS & GRIDS ------------------------------------------ */
.grid{display:grid;gap:clamp(18px,2.2vw,28px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

.card{
  background:var(--paper);border:1px solid rgba(5,11,7,.09);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .3s;
}
.dark .card{background:var(--ink-2);border-color:rgba(242,245,238,.11)}
a.card{text-decoration:none}
a.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--gold-deep)}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--cream-2)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
a.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:10px;flex:1}
.card__body p{color:var(--on-light-soft);font-size:.95rem}
.dark .card__body p{color:var(--on-dark-soft)}
.card__body .tlink{margin-top:auto;padding-top:8px}

.tag{
  display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;padding:5px 11px;border-radius:4px;
  background:rgba(55,179,74,.15);color:var(--gold-dark);border:1px solid rgba(55,179,74,.32);
}
.dark .tag{background:rgba(123,224,90,.14);color:var(--gold);border-color:rgba(123,224,90,.3)}

/* split feature */
.split{display:grid;gap:clamp(28px,4.5vw,68px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.split--reverse .split__media{order:2}
@media (max-width:720px){.split--reverse .split__media{order:0}}
.split__media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split__media--tall img{aspect-ratio:4/5}

/* ---------- 11. PHOTO GRIDS -------------------------------------------- */
.mosaic{display:grid;gap:clamp(10px,1.4vw,16px);grid-template-columns:repeat(6,1fr)}
.mosaic figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-2);position:relative}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mosaic figure:hover img{transform:scale(1.05)}
.m-6{grid-column:span 6}.m-4{grid-column:span 4}.m-3{grid-column:span 3}.m-2{grid-column:span 2}
.ar-wide{aspect-ratio:16/9}.ar-sq{aspect-ratio:1}.ar-tall{aspect-ratio:3/4}.ar-43{aspect-ratio:4/3}
@media (max-width:860px){
  .mosaic{grid-template-columns:repeat(4,1fr)}
  .m-6,.m-4,.m-3{grid-column:span 4}.m-2{grid-column:span 2}
}
@media (max-width:520px){
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .m-6,.m-4,.m-3{grid-column:span 2}.m-2{grid-column:span 2}
}
figcaption{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  padding:10px 2px 0;color:var(--on-light-faint);
}
.dark figcaption{color:var(--on-dark-faint)}

/* ---------- 12. PROCESS (soil to shelf) -------------------------------- */
.steps{display:grid;gap:clamp(20px,2.4vw,26px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));counter-reset:s}
.step{
  background:var(--ink-2);border:1px solid rgba(242,245,238,.11);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
}
.light .step{background:var(--paper);border-color:rgba(5,11,7,.09)}
.step__media{aspect-ratio:5/4;overflow:hidden}
.step__media img{width:100%;height:100%;object-fit:cover}
.step__body{padding:clamp(20px,2.2vw,26px)}
.step__n{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--gold);
  display:block;margin-bottom:12px;
}
.light .step__n{color:var(--gold-dark)}
.step h3{margin-bottom:10px}
.step p{font-size:.94rem;color:var(--on-dark-soft)}
.light .step p{color:var(--on-light-soft)}

/* ---------- 13. DAILY DEALS BOARD -------------------------------------- */
.board{
  background:linear-gradient(168deg,#0B1710,#030907);
  border:10px solid var(--gold-dark);border-radius:18px;
  padding:clamp(26px,4vw,46px);box-shadow:var(--shadow-lg),inset 0 0 90px rgba(0,0,0,.5);
  position:relative;overflow:hidden;
}
.board::before{
  content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:radial-gradient(circle at 20% 30%,#FFF 0.6px,transparent 0.7px),
                   radial-gradient(circle at 70% 65%,#FFF 0.5px,transparent 0.6px);
  background-size:52px 52px,37px 37px;
}
.board h3{color:var(--cream);text-align:center;font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:6px}
.board__note{text-align:center;color:var(--on-dark-faint);font-size:.82rem;margin-bottom:clamp(24px,3vw,36px)}
.deal{
  display:grid;grid-template-columns:minmax(96px,150px) 1fr;gap:16px 22px;align-items:baseline;
  padding:15px 0;border-bottom:1px dashed rgba(242,245,238,.18);
}
.deal:last-of-type{border-bottom:0}
.deal__day{
  font-family:var(--display);font-variation-settings:"SOFT" 80;font-style:italic;font-size:clamp(1.05rem,1.9vw,1.4rem);
  color:var(--gold);
}
.deal__what{color:var(--cream);font-size:clamp(.98rem,1.4vw,1.12rem);font-weight:550}
@media (max-width:560px){.deal{grid-template-columns:1fr;gap:3px}}

/* ---------- 14. LOCATIONS ---------------------------------------------- */
.loc{
  background:var(--paper);border:1px solid rgba(5,11,7,.10);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
}
.dark .loc{background:var(--ink-2);border-color:rgba(242,245,238,.12)}
.loc__media{aspect-ratio:16/10;overflow:hidden;position:relative}
.loc__media img{width:100%;height:100%;object-fit:cover}
.loc__badge{
  position:absolute;left:16px;top:16px;z-index:2;
  background:rgba(5,11,7,.82);backdrop-filter:blur(8px);color:var(--gold);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 13px;border-radius:4px;border:1px solid rgba(123,224,90,.3);
}
.loc__body{padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:18px;flex:1}
.loc__rows{display:flex;flex-direction:column;gap:13px;margin:0;padding:0;list-style:none}
.loc__rows li{display:grid;grid-template-columns:22px 1fr;gap:13px;align-items:start;font-size:.95rem}
.loc__rows svg{width:17px;height:17px;margin-top:4px;color:var(--gold-dark);flex:none}
.dark .loc__rows svg{color:var(--gold)}
.loc__rows a{text-decoration:none;border-bottom:1px solid rgba(55,179,74,.5)}
.loc__rows a:hover{border-bottom-color:var(--gold-deep)}
.loc .btn-row{margin-top:auto;padding-top:8px}

/* ---------- 15. REVIEWS ------------------------------------------------ */
.rev{
  background:var(--paper);border:1px solid rgba(5,11,7,.09);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:14px;
}
.dark .rev{background:var(--ink-2);border-color:rgba(242,245,238,.11)}
.rev__stars{color:var(--gold-deep);letter-spacing:.14em;font-size:.9rem}
.dark .rev__stars{color:var(--gold)}
.rev blockquote{margin:0;font-size:1.02rem;line-height:1.55}
.rev cite{
  font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-light-faint);margin-top:auto;
}
.dark .rev cite{color:var(--on-dark-faint)}

.score{display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);flex-wrap:wrap}
.score__n{font-family:var(--display);font-variation-settings:"SOFT" 80;font-size:clamp(3rem,7vw,4.6rem);line-height:.9;color:var(--gold)}
.score__meta{font-size:.92rem;color:var(--on-dark-soft)}

/* ---------- 16. FAQ ---------------------------------------------------- */
.faq{border-top:1px solid rgba(5,11,7,.12)}
.dark .faq{border-color:rgba(242,245,238,.14)}
.faq details{border-bottom:1px solid rgba(5,11,7,.12)}
.dark .faq details{border-bottom-color:rgba(242,245,238,.14)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-variation-settings:"SOFT" 80;font-size:clamp(1.05rem,1.6vw,1.28rem);font-weight:600;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:hover{color:var(--gold-dark)}
.dark .faq summary:hover{color:var(--gold)}
.faq__a{padding:0 44px 26px 0;color:var(--on-light-soft);max-width:72ch}
.dark .faq__a{color:var(--on-dark-soft)}

/* ---------- 17. REWARDS / APP BADGES ----------------------------------- */
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.store{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  padding:12px 20px;border-radius:14px;border:1.5px solid rgba(242,245,238,.28);
  background:rgba(242,245,238,.04);transition:.26s var(--ease);
}
.store:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);transform:translateY(-2px)}
.store svg{width:23px;height:23px;flex:none}
.store b{display:block;font-size:.98rem;line-height:1.2}
.store span{font-size:.7rem;opacity:.7;letter-spacing:.08em;text-transform:uppercase}

/* ---------- 18. PILL LIST / FACTS -------------------------------------- */
.pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.pills li{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 15px;border-radius:4px;border:1px solid rgba(5,11,7,.16);color:var(--on-light-soft);
}
.dark .pills li{border-color:rgba(242,245,238,.2);color:var(--on-dark-soft)}

/* ---------- 19. AWARD -------------------------------------------------- */
.award{display:flex;align-items:center;gap:clamp(18px,3vw,32px);flex-wrap:wrap;
  padding:clamp(22px,3vw,34px);border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(123,224,90,.13),rgba(123,224,90,.03));
  border:1px solid rgba(123,224,90,.32)}
.award img{width:clamp(88px,12vw,124px);height:auto;flex:none}
.award__t{flex:1;min-width:230px}

/* ---------- 20. FOOTER ------------------------------------------------- */
.ftr{background:var(--ink);color:var(--on-dark);padding-block:clamp(54px,7vw,84px) 34px;
  border-top:1px solid rgba(242,245,238,.10)}
.ftr__grid{display:grid;gap:clamp(30px,4vw,50px);grid-template-columns:minmax(240px,1.4fr) repeat(auto-fit,minmax(150px,1fr))}
.ftr__grid>div:last-child ul{column-count:2;column-gap:24px}
.ftr__logo{height:52px;width:auto;margin-bottom:20px}
.ftr h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;font-weight:500}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ftr a{text-decoration:none;color:var(--on-dark-soft);font-size:.94rem;transition:color .2s}
.ftr a:hover{color:var(--gold)}
.ftr__bottom{
  display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center;
  margin-top:clamp(40px,5vw,60px);padding-top:26px;border-top:1px solid rgba(242,245,238,.10);
}
.ftr__bottom p{font-size:.8rem;color:var(--on-dark-faint);margin:0}
.warn{
  margin-top:22px;padding:16px 20px;border-radius:12px;
  border:1px solid rgba(30,107,52,.4);background:rgba(30,107,52,.09);
  font-size:.79rem;line-height:1.55;color:var(--on-dark-soft);
}

/* ---------- 21. MOBILE CTA BAR ----------------------------------------- */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:9px;padding:10px 12px
    calc(10px + env(safe-area-inset-bottom));
  background:rgba(5,11,7,.94);backdrop-filter:blur(14px);
  border-top:1px solid rgba(242,245,238,.14);
}
.mbar .btn{flex:1;padding:13px 12px;font-size:.88rem}
@media (max-width:720px){.mbar{display:flex}body{padding-bottom:72px}}

/* ---------- 22. REVEAL ------------------------------------------------- */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ---------- 23. PAGE HEAD (inner pages) -------------------------------- */
.phead{background:var(--ink);color:var(--cream);padding-block:clamp(52px,7vw,96px) clamp(46px,6vw,80px);
  position:relative;overflow:hidden;isolation:isolate}
.phead::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(80% 70% at 15% 0%,rgba(123,224,90,.15),transparent 62%)}
.phead h1{max-width:18ch}
.phead .lede{margin-top:22px}
.crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark-faint);margin-bottom:20px}
.crumb a{text-decoration:none;color:var(--gold)}

/* ---------- 24. UTIL --------------------------------------------------- */
.center{text-align:center}
.center .lede,.center .sec-head{margin-inline:auto}
.center .eyebrow{justify-content:center}
.mt{margin-top:clamp(30px,4vw,50px)}
.mt-sm{margin-top:20px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Gate + hero sit on the dark ground but are not .dark containers */
.gate .btn--ghost,.hero .btn--ghost,.phead .btn--ghost{--fg:var(--cream);--bd:rgba(242,245,238,.34)}
.gate .btn--ghost:hover,.hero .btn--ghost:hover,.phead .btn--ghost:hover{--bg:var(--cream);--fg:var(--ink);--bd:var(--cream)}
.hero .eyebrow,.phead .eyebrow{color:var(--gold)}
.hero .lede,.phead .lede{color:var(--on-dark-soft)}
.hero .fine,.phead .fine{color:var(--on-dark-faint)}
/* the in-nav Shop button is for the mobile drawer only */
@media (min-width:941px){.hdr__nav .btn{display:none}}
/* Gallery / FAQ / Blog / Calculator live in the mobile full-screen menu only — the desktop bar keeps the six numbered links */
@media (min-width:941px){.hdr__nav-more{display:none}}
/* ==========================================================================
   BLOCK LIBRARY — appended to site.css
   Every section type a page may use. Pages compose from these only.
   ========================================================================== */

/* ---------- B1. STAT BAND --------------------------------------------- */
.stats{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  background:rgba(242,245,238,.14);border-radius:var(--r-lg);overflow:hidden}
.light .stats{background:rgba(5,11,7,.12)}
.stat{background:var(--ink);padding:clamp(24px,3vw,36px) clamp(18px,2.4vw,28px);text-align:center}
.light .stat{background:var(--cream)}
.stat b{display:block;font-family:var(--display);font-variation-settings:"SOFT" 80;font-size:clamp(2.1rem,4.4vw,3.2rem);
  line-height:1;color:var(--gold);letter-spacing:-.03em}
.light .stat b{color:var(--gold-dark)}
.stat span{display:block;margin-top:12px;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft)}
.light .stat span{color:var(--on-light-soft)}

/* ---------- B2. MARQUEE ----------------------------------------------- */
.marquee{overflow:hidden;border-block:1px solid rgba(242,245,238,.14);
  padding-block:clamp(16px,2vw,24px);background:var(--ink-2)}
.light .marquee{border-color:rgba(5,11,7,.12);background:var(--cream-2)}
.marquee__track{display:flex;gap:0;width:max-content;animation:mq 44s linear infinite}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
.marquee__track span{display:inline-flex;align-items:center;gap:clamp(20px,3vw,40px);
  padding-inline:clamp(10px,1.5vw,20px);
  font-family:var(--display);font-variation-settings:"SOFT" 80;font-style:italic;font-size:clamp(1.1rem,2.4vw,1.9rem);
  color:var(--gold);white-space:nowrap;}
.light .marquee__track span{color:var(--gold-dark)}
.marquee__track span::after{content:"◆";font-size:.5em;font-style:normal;opacity:.55}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- B3. STATEMENT (oversized pull line) ------------------------ */
.statement{max-width:20ch;font-family:var(--display);font-variation-settings:"SOFT" 80;font-size:clamp(2rem,5.6vw,4.2rem);
  line-height:1.05;letter-spacing:-.03em;}
.statement em{font-style:italic;color:var(--gold)}
.light .statement em{color:var(--gold-dark)}
.statement--center{margin-inline:auto;text-align:center;max-width:24ch}

/* ---------- B4. FULL-BLEED IMAGE BAND ---------------------------------- */
.band{position:relative;overflow:hidden;isolation:isolate}
.band img{width:100%;height:clamp(260px,42vw,560px);object-fit:cover;display:block}
.band__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3vw,36px) var(--gut);
  background:linear-gradient(transparent,rgba(5,11,7,.86));color:var(--cream)}
.band__cap p{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.band__cap h3{margin-top:10px;max-width:24ch}

/* ---------- B5. TIMELINE ----------------------------------------------- */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:1.5px;
  background:linear-gradient(var(--gold-deep),transparent)}
.tl li{position:relative;padding:0 0 clamp(28px,3.4vw,40px) 42px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:3px;top:7px;width:13px;height:13px;
  border-radius:50%;background:var(--gold);border:3px solid var(--ink)}
.light .tl li::before{border-color:var(--cream)}
.tl h3{margin-bottom:8px}
.tl .step__n{margin-bottom:8px}
.tl p{color:var(--on-dark-soft);font-size:.96rem}
.light .tl p{color:var(--on-light-soft)}

/* ---------- B6. CHECK LIST --------------------------------------------- */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.checks li{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;font-size:.98rem}
.checks li::before{content:"";width:20px;height:20px;margin-top:3px;border-radius:50%;
  background:rgba(55,179,74,.18);border:1.5px solid var(--gold-deep);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9A23B' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat}

/* ---------- B7. COMPARE TABLE ------------------------------------------ */
.cmp{width:100%;border-collapse:collapse;font-size:.96rem}
.cmp caption{text-align:left;padding-bottom:16px;color:var(--on-light-soft);font-size:.9rem}
.dark .cmp caption{color:var(--on-dark-soft)}
.cmp th,.cmp td{text-align:left;padding:15px 16px;border-bottom:1px solid rgba(5,11,7,.12);vertical-align:top}
.dark .cmp th,.dark .cmp td{border-bottom-color:rgba(242,245,238,.14)}
.cmp thead th{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-dark);border-bottom-width:1.5px}
.dark .cmp thead th{color:var(--gold)}
.cmp tbody th{font-weight:650}
.cmp__wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- B8. CTA BAND ----------------------------------------------- */
.ctaband{background:linear-gradient(120deg,var(--gold),var(--gold-deep));color:var(--ink);
  padding-block:clamp(44px,6vw,76px)}
.ctaband h2,.ctaband h3{color:var(--ink)}
.ctaband p{color:rgba(5,11,7,.76)}
.ctaband .btn{--bg:var(--ink);--fg:var(--gold);--bd:var(--ink)}
.ctaband .btn:hover{--bg:#000;--bd:#000}
.ctaband .btn--ghost{--bg:transparent;--fg:var(--ink);--bd:rgba(5,11,7,.4)}
.ctaband .btn--ghost:hover{--bg:var(--ink);--fg:var(--gold);--bd:var(--ink)}
.ctaband .eyebrow{color:rgba(5,11,7,.7)}

/* ---------- B9. NOTE / CALLOUT ----------------------------------------- */
.note{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:clamp(20px,2.6vw,30px);border-radius:var(--r-lg);
  border:1px solid rgba(55,179,74,.34);background:rgba(55,179,74,.08)}
.note svg{width:22px;height:22px;color:var(--gold-dark);flex:none;margin-top:2px}
.dark .note svg{color:var(--gold)}
.note h3{margin-bottom:8px}
.note p{color:var(--on-light-soft);font-size:.96rem}
.dark .note p{color:var(--on-dark-soft)}
.note--plain{border-color:rgba(5,11,7,.14);background:rgba(5,11,7,.03)}
.dark .note--plain{border-color:rgba(242,245,238,.16);background:rgba(242,245,238,.04)}

/* ---------- B10. DEFINITION ROWS --------------------------------------- */
.defs{display:grid;gap:0;margin:0;border-top:1px solid rgba(5,11,7,.12)}
.dark .defs{border-color:rgba(242,245,238,.14)}
.defs > div{display:grid;grid-template-columns:minmax(140px,.42fr) 1fr;gap:12px 30px;
  padding:clamp(16px,2vw,22px) 0;border-bottom:1px solid rgba(5,11,7,.12)}
.dark .defs > div{border-bottom-color:rgba(242,245,238,.14)}
.defs dt{font-family:var(--display);font-variation-settings:"SOFT" 80;font-size:clamp(1.02rem,1.5vw,1.22rem);font-weight:600;letter-spacing:-.01em}
.defs dd{margin:0;color:var(--on-light-soft);font-size:.97rem}
.dark .defs dd{color:var(--on-dark-soft)}
@media (max-width:560px){.defs > div{grid-template-columns:1fr;gap:6px}}

/* ---------- B11. ICON GRID --------------------------------------------- */
.icons{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.icons div{display:flex;flex-direction:column;gap:12px}
.icons svg{width:30px;height:30px;color:var(--gold-dark);stroke-width:1.5}
.dark .icons svg{color:var(--gold)}
.icons h3{font-size:1.04rem}
.icons p{font-size:.93rem;color:var(--on-light-soft)}
.dark .icons p{color:var(--on-dark-soft)}

/* ---------- B12. PHOTO STRIP (horizontal scroll) ----------------------- */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,29vw);
  gap:clamp(10px,1.4vw,16px);overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory;
  scrollbar-width:thin}
.strip figure{margin:0;scroll-snap-align:start}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);background:var(--ink-2)}
.strip figcaption{padding-top:10px}

/* ---------- B13. BIG SINGLE REVIEW ------------------------------------- */
.bigrev{text-align:center;max-width:26ch;margin-inline:auto}
.bigrev p.rev__stars{font-size:1.1rem;letter-spacing:.2em;margin-bottom:22px}
.bigrev blockquote{margin:0;font-family:var(--display);font-variation-settings:"SOFT" 80;font-size:clamp(1.4rem,3.2vw,2.4rem);
  line-height:1.28;letter-spacing:-.02em;}
.bigrev cite{display:block;margin-top:24px;font-style:normal;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-light-faint)}
.dark .bigrev cite{color:var(--on-dark-faint)}

/* ---------- B14. BRAND STRIP ------------------------------------------- */
.brands{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.brands span{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 20px;border-radius:4px;border:1px solid rgba(242,245,238,.2);color:var(--on-dark-soft)}
.light .brands span{border-color:rgba(5,11,7,.16);color:var(--on-light-soft)}

/* ---------- B15. MAP CARD ---------------------------------------------- */
.mapcard{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.4vw,28px)}
.mapcard a{display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  padding:clamp(24px,3vw,34px);border-radius:var(--r-lg);text-decoration:none;
  border:1px solid rgba(242,245,238,.14);background:var(--ink-2);
  transition:transform .3s var(--ease),border-color .3s}
.light .mapcard a{border-color:rgba(5,11,7,.1);background:var(--paper)}
.mapcard a:hover{transform:translateY(-4px);border-color:var(--gold-deep)}
.mapcard__pin{width:38px;height:38px;color:var(--gold)}
.light .mapcard__pin{color:var(--gold-dark)}
.mapcard b{display:block;font-family:var(--display);font-variation-settings:"SOFT" 80;font-size:1.3rem;letter-spacing:-.015em}
.mapcard__email{font-size:clamp(.95rem,1.1vw,1.15rem);overflow-wrap:anywhere}
.mapcard small{display:block;margin-top:8px;font-size:.92rem;color:var(--on-dark-soft);line-height:1.5}
.light .mapcard small{color:var(--on-light-soft)}

/* ---------- B16. NUMBERED HOW-TO (horizontal) -------------------------- */
.howto{counter-reset:h;display:grid;gap:clamp(20px,2.6vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.howto > div{counter-increment:h;position:relative;padding-top:56px}
.howto > div::before{content:counter(h,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--mono);font-size:2.1rem;color:var(--gold);opacity:.85;line-height:1}
.light .howto > div::before{color:var(--gold-dark)}
.howto h3{margin-bottom:10px;font-size:1.1rem}
.howto p{font-size:.94rem;color:var(--on-dark-soft)}
.light .howto p{color:var(--on-light-soft)}

/* ---------- B17. GLOSSARY GRID ----------------------------------------- */
.gloss{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gloss div{padding:clamp(20px,2.4vw,26px);border-radius:var(--r);
  border:1px solid rgba(5,11,7,.1);background:var(--paper)}
.dark .gloss div{border-color:rgba(242,245,238,.12);background:var(--ink-2)}
.gloss h3{font-size:1.02rem;margin-bottom:8px}
.gloss p{font-size:.92rem;color:var(--on-light-soft)}
.dark .gloss p{color:var(--on-dark-soft)}

/* ---------- B18. DAY STRIP (mini deals) -------------------------------- */
.days{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.days div{padding:18px;border-radius:var(--r);border:1px solid rgba(242,245,238,.14);
  background:var(--ink-2);text-align:center}
.light .days div{border-color:rgba(5,11,7,.1);background:var(--paper)}
.days b{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.light .days b{color:var(--gold-dark)}
.days span{font-size:.93rem;line-height:1.45}

/* ---------- B19. SPLIT WITH TWO IMAGES --------------------------------- */
.duo{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:1fr 1fr}
.duo figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-2)}
.duo img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.duo figure:first-child{margin-top:clamp(18px,3vw,48px)}

/* ---------- B20. QUIZ --------------------------------------------------- */
.quiz{background:var(--ink-2);border:1px solid rgba(242,245,238,.14);border-radius:var(--r-lg);
  padding:clamp(24px,4vw,52px);position:relative;overflow:hidden}
.light .quiz{background:var(--paper);border-color:rgba(5,11,7,.1)}
.quiz__bar{height:3px;border-radius:4px;background:rgba(242,245,238,.14);overflow:hidden;margin-bottom:clamp(24px,3vw,36px)}
.light .quiz__bar{background:rgba(5,11,7,.1)}
.quiz__fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-deep));
  transition:width .45s var(--ease)}
.quiz__count{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px}
.light .quiz__count{color:var(--gold-dark)}
.quiz h3{font-size:clamp(1.4rem,3vw,2.1rem);margin-bottom:clamp(22px,3vw,32px);max-width:22ch}
.quiz__opts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.quiz__opt{display:flex;align-items:flex-start;gap:14px;text-align:left;cursor:pointer;
  padding:18px 20px;border-radius:var(--r);background:transparent;
  border:1.5px solid rgba(242,245,238,.2);color:inherit;
  transition:border-color .22s,background .22s,transform .22s var(--ease)}
.light .quiz__opt{border-color:rgba(5,11,7,.16)}
.quiz__opt:hover{border-color:var(--gold-deep);background:rgba(55,179,74,.08);transform:translateY(-2px)}
.quiz__opt b{display:block;font-size:1rem;font-weight:650;line-height:1.3}
.quiz__opt small{display:block;margin-top:5px;font-size:.86rem;color:var(--on-dark-soft);line-height:1.45}
.light .quiz__opt small{color:var(--on-light-soft)}
.quiz__opt span[aria-hidden]{font-family:var(--mono);font-size:.74rem;color:var(--gold);
  border:1px solid currentColor;border-radius:6px;padding:2px 7px;flex:none;margin-top:1px}
.light .quiz__opt span[aria-hidden]{color:var(--gold-dark)}
.quiz__nav{display:flex;gap:12px;align-items:center;margin-top:clamp(22px,3vw,30px);flex-wrap:wrap}
.quiz__back{background:none;border:0;cursor:pointer;font-size:.9rem;font-weight:600;
  color:var(--on-dark-soft);text-decoration:underline;text-underline-offset:4px;padding:8px 0}
.light .quiz__back{color:var(--on-light-soft)}
.quiz__back:hover{color:var(--gold)}
.light .quiz__back:hover{color:var(--gold-dark)}
/* result */
.quiz__res{display:grid;gap:clamp(22px,3vw,34px);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.quiz__res{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.quiz__res img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.quiz__pick{font-family:var(--display);font-variation-settings:"SOFT" 80;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.05;
  letter-spacing:-.025em;color:var(--gold);margin-bottom:14px}
.light .quiz__pick{color:var(--gold-dark)}
.quiz__why{color:var(--on-dark-soft);margin-bottom:20px}
.light .quiz__why{color:var(--on-light-soft)}
.quiz__tip{margin-top:20px;padding:16px 18px;border-radius:var(--r);
  border:1px dashed rgba(55,179,74,.45);background:rgba(55,179,74,.07);font-size:.93rem}
.quiz__tip b{color:var(--gold)}
.light .quiz__tip b{color:var(--gold-dark)}
.quiz__fallback{display:none}
html:not(.js) .quiz__fallback{display:block}
html:not(.js) .quiz__live{display:none}

/* ---------- B21. SECTION KICKER RULE ----------------------------------- */
.rule{height:1px;background:rgba(5,11,7,.12);margin-block:clamp(30px,4vw,50px)}
.dark .rule{background:rgba(242,245,238,.14)}

/* ---------- B22. INLINE GALLERY OF 3 ----------------------------------- */
.trio{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.trio figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-2)}
.trio img{width:100%;aspect-ratio:1;object-fit:cover}

/* ---------- B23. QUOTE CARD ROW ---------------------------------------- */
.qcards{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.qcard{padding:clamp(22px,2.6vw,30px);border-radius:var(--r-lg);border-left:3px solid var(--gold-deep);
  background:rgba(55,179,74,.06)}
.qcard p{font-family:var(--display);font-variation-settings:"SOFT" 80;font-style:italic;font-size:1.06rem;line-height:1.45;margin-bottom:14px}
.qcard cite{font-style:normal;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-light-faint)}
.dark .qcard cite{color:var(--on-dark-faint)}

/* ---------- B24. TWO-COLUMN PROSE -------------------------------------- */
.prose2{columns:2;column-gap:clamp(30px,4vw,56px);max-width:none}
.prose2 p{break-inside:avoid;margin-bottom:1.1em}
@media (max-width:720px){.prose2{columns:1}}

/* ---------- B25. ANCHOR NAV (jump links) ------------------------------- */
.jump{display:flex;flex-wrap:wrap;gap:10px}
.jump a{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 16px;border-radius:4px;text-decoration:none;
  border:1px solid rgba(242,245,238,.22);color:var(--on-dark-soft);transition:.22s}
.light .jump a{border-color:rgba(5,11,7,.16);color:var(--on-light-soft)}
.jump a:hover{border-color:var(--gold-deep);color:var(--gold)}
.light .jump a:hover{color:var(--gold-dark)}

/* ---------- LOGO ------------------------------------------------------- */
/* One mark file, /assets/brand/leaf-mark.svg (leaf green), used everywhere —
   header, gate, footer. The only dark ground the header itself ever floats
   over is the homepage hero before you scroll, so that single state alone
   knocks the mark back to a plain light silhouette for contrast via filter. */
.hdr__logo img{height:46px}
.gate__card > img{height:110px;width:auto}
.ftr__logo{height:64px;width:auto}
.home .hdr:not(.stuck) .hdr__logo img{filter:brightness(0) invert(1);opacity:.95}
@media (max-width:940px){.hdr__logo img{height:38px}}

/* ---------- 6b. HEADER, build 03 — a gallery front desk, not a template bar ----- */
.hdr{background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .35s,box-shadow .35s}
.hdr.stuck{background:rgba(242,245,238,.94);box-shadow:0 1px 0 rgba(5,11,7,.12),0 12px 30px -18px rgba(0,0,0,.35)}
.hdr__in{min-height:78px;gap:26px}
.hdr__logo{gap:12px}
.hdr__logo img{height:44px;width:44px;object-fit:contain}
.hdr__word{display:grid;line-height:1}
.hdr__word b{font-family:var(--display);font-variation-settings:"SOFT" 80;font-weight:700;font-size:1.25rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream)}
.hdr__word span{font:500 .56rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--brass-2,#7BE05A);margin-top:5px}
.hdr.stuck .hdr__word b{color:var(--ink)} .hdr.stuck .hdr__word span{color:#123D22}
.hdr__nav{gap:2px}
.hdr__nav a:not(.btn){
  position:relative;padding:10px 12px;border-radius:0;background:none;
  font:600 .7rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(242,245,238,.86);
}
.hdr__nav a:not(.btn) i{font-style:normal;color:var(--brass-2,#7BE05A);margin-right:7px;font-weight:500}
.hdr__nav a:not(.btn)::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:1.5px;background:var(--brass-2,#7BE05A);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
.hdr__nav a:not(.btn):hover{background:none;color:var(--cream)}
.hdr__nav a:not(.btn):hover::after,.hdr__nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr.stuck .hdr__nav a:not(.btn){color:rgba(5,11,7,.82)} .hdr.stuck .hdr__nav a:not(.btn):hover{color:var(--ink)}
.hdr.stuck .hdr__nav a:not(.btn) i{color:var(--gold-dark,#1E6B34)}
.hdr.stuck .hdr__nav a:not(.btn)::after{background:var(--gold-dark,#1E6B34)}
.hdr__live{display:inline-flex;align-items:center;gap:8px;margin-left:8px;padding:8px 12px;border:1px solid rgba(242,245,238,.25);border-radius:999px;font:600 .6rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(242,245,238,.86)}
.hdr__live i{width:7px;height:7px;border-radius:50%;background:#37B34A;box-shadow:0 0 10px #37B34A}
.hdr__live.closed i{background:#0C1A10;box-shadow:none}
.hdr.stuck .hdr__live{border-color:rgba(5,11,7,.25);color:var(--ink)}
.hdr__nav .btn.btn--gold{
  margin-left:10px;padding:12px 18px;border-radius:3px;background:var(--brass,#37B34A);border-color:var(--ink);color:var(--ink);
  font:700 .7rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s;
}
.hdr__nav .btn.btn--gold:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);background:#7BE05A}
.hdr__nav .btn.btn--gold:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.burger{border-color:rgba(242,245,238,.35);border-radius:4px}
.hdr.stuck .burger{border-color:rgba(5,11,7,.35)} .hdr.stuck .burger span,.hdr.stuck .burger span::before,.hdr.stuck .burger span::after{background:var(--ink)}
@media (max-width:940px){
  .hdr__nav{inset:0;top:78px;bottom:0;max-height:none;background:var(--ink);padding:20px var(--gut) 40px;justify-content:flex-start}
  .hdr__nav a:not(.btn){font:700 clamp(2rem,9vw,3rem)/1.05 var(--display);font-variation-settings:"SOFT" 80;letter-spacing:-.02em;text-transform:none;padding:14px 0;border-bottom:1px solid rgba(242,245,238,.12);color:var(--cream)}
  .hdr__nav a:not(.btn) i{display:inline-block;font:500 .62rem/1 var(--mono);letter-spacing:.2em;vertical-align:middle;margin-right:14px;color:var(--brass-2,#7BE05A)}
  .hdr__nav a:not(.btn)::after{display:none}
  .hdr__live{margin:16px 0 0;justify-content:center}
  .hdr__nav .btn.btn--gold{margin:18px 0 0;padding:18px;font-size:.8rem}
  .hdr.stuck .hdr__nav a:not(.btn){color:var(--cream)}
}

/* footer pills sit on ink */
.ftr .pills li{color:var(--on-dark-soft);border-color:rgba(242,245,238,.22)}

/* mobile CTA bar sits on ink; the footer grid stacks on phones; the gate locks scroll */
.mbar{background:rgba(4,18,10,.94)}
.mbar .btn--ghost{--fg:var(--cream);--bd:rgba(242,245,238,.34)}
@media (max-width:700px){.ftr__grid>div:last-child ul{column-count:1}}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}}
body:has(.gate:not([hidden])){overflow:hidden}


/* ---------- 26 Oct 2026: Aroma's real logo everywhere ------------------------
   The leaf mark is replaced by the client's own logo: a side-by-side lockup in the
   header (assets/brand/logo-h-560.*, cut from logo-sign-transparent.png with its
   grey box keyed out) and the stacked logo on the age gate and footer. The logo's
   "cannabis" is white, so the scrolled header stays dark instead of turning cream. */
.hdr__logo img{height:44px;width:auto;object-fit:contain}
.home .hdr:not(.stuck) .hdr__logo img{filter:none;opacity:1}
.hdr.stuck{background:rgba(5,11,7,.94);box-shadow:0 1px 0 rgba(242,245,238,.08),0 14px 30px -18px rgba(0,0,0,.6)}
.hdr.stuck .hdr__nav a:not(.btn){color:rgba(242,245,238,.86)}
.hdr.stuck .hdr__nav a:not(.btn):hover{color:var(--cream)}
.hdr.stuck .hdr__nav a:not(.btn) i{color:var(--brass-2,#7BE05A)}
.hdr.stuck .hdr__nav a:not(.btn)::after{background:var(--brass-2,#7BE05A)}
.hdr.stuck .hdr__live{border-color:rgba(242,245,238,.3);color:var(--cream)}
.hdr.stuck .burger{border-color:rgba(242,245,238,.35)}
.hdr.stuck .burger span,.hdr.stuck .burger span::before,.hdr.stuck .burger span::after{background:var(--cream)}
.gate__card img.gate__logo{height:auto;width:min(300px,72vw);margin:0 auto 26px}
.ftr__logo{height:auto;width:min(220px,60vw)}
@media (max-width:940px){.hdr__logo img{height:34px}}
@media (max-width:380px){.hdr__logo img{height:28px}}
/* 26 Oct 2026: the header's Order online button shows on desktop too (it was hidden ≥941px) */
@media (min-width:941px){.hdr__nav .btn{display:inline-flex;margin-left:10px}}
/* the wider real-logo lockup needs room: drop the hours chip, then the Order button, before the burger takes over at 940 */
@media (max-width:1400px) and (min-width:941px){.hdr__live{display:none}.hdr__logo img{height:38px}}
@media (max-width:1280px) and (min-width:941px){.hdr__nav .btn{display:none}.hdr__logo img{height:32px}}
@media (max-width:1100px) and (min-width:941px){.hdr__nav a:not(.btn){padding-inline:9px;letter-spacing:.14em}}