/* ============================================================
   VITALCOREX IV INFUSION CORP — v3.0 "50/50 cinematic"
   Alternating light editorial + full-bleed dark cinematic bands.
   Display: Playfair Display. Body: Inter.
   Light: cream / deep-navy ink / azure + gold accents (airy editorial positioning)
   Dark:  near-black navy, aurora glow, silver type, electric azure (his logo)
   ============================================================ */

:root{
  --cream:#FAF8F4;
  --mist:#EFF3F6;
  --white:#FFFFFF;
  --ink:#0A1B2E;
  --ink-soft:#54677A;
  --navy:#0E2A44;
  --azure:#2E9FD8;
  --azure-soft:#7CC4E8;
  --gold:#C89B3C;
  --gold-soft:#E4CE9A;
  --abyss:#040B14;
  --abyss-2:#071527;
  --silver:#C9D6E2;
  --silver-dim:#7E93A6;
  --hair:rgba(10,27,46,.12);
  --hair-d:rgba(201,214,226,.14);
  --maxw:1200px;
  --r:22px;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--cream);line-height:1.75;font-size:16.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.12;margin:0 0 .5em;color:var(--ink);letter-spacing:.005em}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.8vw,3rem)}
h3{font-size:1.35rem}
h1 em,h2 em{font-style:italic;font-weight:500}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px}
.tcenter{text-align:center}
.tcenter .sub{margin-left:auto;margin-right:auto}

/* ---------- type accents ---------- */
.eyebrow{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--azure);font-weight:600;margin:0 0 20px;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:38px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);flex-shrink:0}
.tcenter .eyebrow{justify-content:center}
.tcenter .eyebrow::after{content:"";width:38px;height:1px;background:linear-gradient(270deg,var(--gold),transparent)}
.sub{color:var(--ink-soft);font-size:1.08rem;max-width:36em;font-weight:300}
.lede{font-size:1.16rem}
.dark-band .sub{color:var(--silver-dim)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#123a5e,#0E2A44);color:#fff;border:0;padding:17px 38px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;cursor:pointer;text-align:center;border-radius:999px;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;box-shadow:0 10px 28px rgba(10,27,46,.18)}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(10,27,46,.26)}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-20deg);transition:left .65s ease}
.btn:hover::after{left:135%}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair);box-shadow:none}
.btn.ghost:hover{border-color:var(--azure);color:var(--navy)}
.dark-band .btn,.btn.glow{background:linear-gradient(135deg,var(--azure),#1c6fa3);color:#fff;box-shadow:0 0 34px rgba(46,159,216,.45)}
.dark-band .btn:hover,.btn.glow:hover{box-shadow:0 0 54px rgba(46,159,216,.65)}
.dark-band .btn.ghost,.chero .btn.ghost,.driphero .btn.ghost,.sticky .btn.ghost{background:transparent;border:1px solid var(--hair-d);color:var(--silver);box-shadow:none}
.dark-band .btn.ghost:hover,.chero .btn.ghost:hover,.driphero .btn.ghost:hover{border-color:var(--azure);color:#fff}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}
.textlink{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--azure);border-bottom:1px solid var(--gold-soft);padding-bottom:4px}
.textlink:hover{border-color:var(--gold)}

/* ---------- nav ---------- */
.topline{background:var(--abyss);color:var(--silver-dim)}
.topline .wrap{display:flex;justify-content:center;gap:10px;padding:9px 30px;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase}
.topline b{color:var(--azure);font-weight:600}
.nav{position:sticky;top:0;z-index:80;background:rgba(250,248,244,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:82px;transition:height .35s ease}
.nav.scrolled .wrap{height:64px}
.logo{display:flex;align-items:center;gap:13px}
.navmark{width:40px;height:auto;filter:drop-shadow(0 2px 8px rgba(46,159,216,.4));transition:width .35s}
.nav.scrolled .navmark{width:33px}
.logotext{font-family:var(--serif);font-weight:600;font-size:1.16rem;letter-spacing:.2em;color:var(--ink);line-height:1.1}
.logotext small{display:block;font-family:var(--sans);font-size:.53rem;letter-spacing:.44em;color:var(--ink-soft);margin-top:2px;font-weight:500}
.nav nav{display:flex;gap:34px}
.nav nav a{font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:500;padding:6px 0;position:relative}
.nav nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(90deg,var(--azure),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.nav nav a:hover::after,.nav nav a.on::after{transform:scaleX(1)}
.nav .bookbtn{padding:13px 28px}
.menu-toggle{display:none;background:none;border:1px solid var(--hair);border-radius:999px;
  width:44px;height:44px;padding:0;cursor:pointer;color:var(--ink);
  align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;
  transition:border-color .3s,background .3s}
.menu-toggle:hover,.menu-toggle:focus-visible{border-color:var(--azure)}
.mt-bars{display:block;position:relative;width:19px;height:13px}
.mt-bars i{position:absolute;left:0;right:0;height:1.6px;border-radius:2px;background:currentColor;
  transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .22s ease}
.mt-bars i:nth-child(1){top:0}
.mt-bars i:nth-child(2){top:50%;margin-top:-.8px}
.mt-bars i:nth-child(3){bottom:0}
.menu-toggle[aria-expanded="true"] .mt-bars i:nth-child(1){transform:translateY(5.7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .mt-bars i:nth-child(2){opacity:0;transform:scaleX(.4)}
.menu-toggle[aria-expanded="true"] .mt-bars i:nth-child(3){transform:translateY(-5.7px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.mt-bars i{transition:none}}

/* ---------- cinematic dark hero ---------- */
.chero{position:relative;background:var(--abyss);color:#fff;min-height:92vh;display:flex;align-items:center;overflow:hidden}
.chero .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;animation:heroken 22s ease-in-out infinite alternate}
@keyframes heroken{from{transform:scale(1)}to{transform:scale(1.09)}}
.chero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(4,11,20,.94) 22%,rgba(4,11,20,.55) 55%,rgba(4,11,20,.25));z-index:1}
.chero::after{content:"";position:absolute;left:-20%;bottom:-40%;width:80%;height:90%;background:radial-gradient(ellipse,rgba(46,159,216,.2),transparent 65%);z-index:1;animation:aurora 16s ease-in-out infinite alternate}
.chero .wrap{position:relative;z-index:2;padding-top:80px;padding-bottom:110px}
.chero h1{color:#fff;max-width:11em}
.chero h1 em{background:linear-gradient(100deg,var(--azure-soft),var(--azure));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.chero .sub{color:var(--silver);font-size:1.15rem}
.chero .trust{margin-top:40px;padding-top:26px;border-top:1px solid var(--hair-d);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--silver-dim);line-height:2.2}
.chero .scrollcue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;width:1px;height:56px;background:linear-gradient(var(--azure),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:translateX(-50%) scaleY(.6)}50%{opacity:1;transform:translateX(-50%) scaleY(1)}}
.hero-lines .rl{display:block;overflow:hidden}
.hero-lines .rl span{display:block;transform:translateY(110%);animation:riseline 1.1s cubic-bezier(.22,1,.36,1) forwards}
.hero-lines .rl:nth-child(2) span{animation-delay:.16s}
@keyframes riseline{to{transform:none}}
.chero .sub,.chero .cta-row,.chero .trust{opacity:0;animation:fadeup 1s ease forwards}
.chero .sub{animation-delay:.45s}.chero .cta-row{animation-delay:.62s}.chero .trust{animation-delay:.8s}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- aurora ambience for dark bands ---------- */
@keyframes aurora{0%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,-7%) scale(1.15)}100%{transform:translate(-6%,5%) scale(1.05)}}
.dark-band{position:relative;background:linear-gradient(180deg,var(--abyss) 0%,var(--abyss-2) 50%,var(--abyss) 100%);color:var(--silver);overflow:hidden}
.dark-band h1,.dark-band h2,.dark-band h3{color:#fff}
.dark-band .eyebrow{color:var(--azure-soft)}
.dark-band::before{content:"";position:absolute;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;background:radial-gradient(circle,rgba(46,159,216,.14),transparent 62%);top:-30%;right:-20%;animation:aurora 18s ease-in-out infinite alternate;pointer-events:none}
.dark-band::after{content:"";position:absolute;width:52vw;height:52vw;max-width:700px;max-height:700px;border-radius:50%;background:radial-gradient(circle,rgba(200,155,60,.08),transparent 60%);bottom:-25%;left:-15%;animation:aurora 22s ease-in-out infinite alternate-reverse;pointer-events:none}
.dark-band>.wrap{position:relative;z-index:2}

/* ---------- section rhythm + curve dividers ---------- */
.band{padding:104px 0}
.band.tight{padding:84px 0}
.curve{display:block;width:100%;height:90px;margin:-1px 0;line-height:0}
.curve svg{display:block;width:100%;height:100%}
.bandhead{max-width:680px;margin-bottom:60px}
.bandhead.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- light editorial cards ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.gcard{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);padding:46px 38px;position:relative;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.gcard:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(10,27,46,.12)}
.gcard .n{font-family:var(--serif);font-size:2.4rem;color:transparent;-webkit-text-stroke:1px var(--gold);display:block;margin-bottom:16px;line-height:1}
.gcard h3{font-size:1.24rem}
.gcard p{color:var(--ink-soft);font-size:.98rem;margin:0}

/* ---------- steps (visit) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;margin:0}
.step:hover{transform:translateY(-8px);box-shadow:0 28px 54px rgba(10,27,46,.13)}
.step .imgwrap{overflow:hidden;height:220px}
.step img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.step:hover img{transform:scale(1.07)}
.step figcaption{padding:24px 24px 28px}
.step b{font-family:var(--serif);color:var(--gold);font-size:.95rem;letter-spacing:.12em;display:block;margin-bottom:8px}
.step span{font-family:var(--serif);font-size:1.12rem;display:block;margin-bottom:6px;color:var(--ink)}
.step p{font-size:.9rem;color:var(--ink-soft);margin:0}

/* ---------- glowing bag tiles (dark menu) ---------- */
.baggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bagtile{background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--hair-d);border-radius:var(--r);padding:40px 26px 32px;text-align:center;position:relative;overflow:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .45s,box-shadow .45s;backdrop-filter:blur(6px)}
.bagtile::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 38%,var(--glow,rgba(46,159,216,.22)),transparent 70%);opacity:.7;transition:opacity .45s}
.bagtile:hover{transform:translateY(-10px);border-color:rgba(46,159,216,.4);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.bagtile:hover::before{opacity:1}
.bagtile img{width:150px;margin:0 auto 20px;position:relative;z-index:1;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));animation:bagfloat 6.5s ease-in-out infinite;transform-origin:50% 8%}
.bagtile b{display:block;font-family:var(--serif);font-weight:500;color:#fff;font-size:1.14rem;letter-spacing:.03em;position:relative;z-index:1}
.bagtile span{color:var(--azure-soft);font-family:var(--serif);font-size:1rem;position:relative;z-index:1}
.baggrid .bagtile:nth-child(3n+2) img{animation-delay:.9s}
.baggrid .bagtile:nth-child(3n) img{animation-delay:1.7s}
@keyframes bagfloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}

/* ---------- menu rows (dark board) ---------- */
.menuboard{border-top:1px solid var(--hair-d)}
.mrow{display:grid;grid-template-columns:70px 150px 1fr auto;gap:34px;align-items:center;padding:36px 18px;border-bottom:1px solid var(--hair-d);border-radius:14px;transition:background .3s;position:relative}
.mrow:hover{background:rgba(255,255,255,.035)}
.mrow .num{font-family:var(--serif);color:transparent;-webkit-text-stroke:1px var(--gold);font-size:1.7rem}
.mrow .bagcell{width:150px;display:flex;justify-content:center;position:relative}
.mrow .bagcell::before{content:"";position:absolute;inset:-10%;background:radial-gradient(ellipse,var(--glow,rgba(46,159,216,.25)),transparent 68%)}
.mrow .bagcell img{width:104px;height:auto;position:relative;filter:drop-shadow(0 12px 30px rgba(0,0,0,.5));animation:bagfloat 6.5s ease-in-out infinite;transform-origin:50% 8%}
.mrow:nth-child(even) .bagcell img{animation-delay:1.1s}
.mrow h3{color:#fff;font-size:1.42rem;margin:0 0 6px}
.mrow .ing{color:var(--silver-dim);font-size:.86rem;letter-spacing:.02em;margin:0 0 8px}
.mrow .line{color:var(--silver);font-size:.98rem;margin:0;max-width:40em}
.mrow .price{font-family:var(--serif);color:var(--azure-soft);font-size:1.6rem;white-space:nowrap}
.mrow .go{display:block;text-align:right;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--silver-dim);margin-top:12px;transition:color .3s}
.mrow:hover .go{color:var(--azure)}
.addonbar{margin-top:70px;border:1px solid var(--hair-d);border-radius:var(--r);padding:44px 46px;background:linear-gradient(165deg,rgba(255,255,255,.04),transparent)}
.addonbar h3{color:#fff}
.addons{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:26px}
.addons div{border-top:1px solid rgba(200,155,60,.45);padding-top:16px}
.addons b{display:block;color:#fff;font-weight:500;font-size:.96rem}
.addons span{color:var(--gold-soft);font-family:var(--serif);font-size:1.05rem}
.band:not(.dark-band) .addons b{color:var(--ink)}
.band:not(.dark-band) .addons span{color:var(--gold)}

/* ---------- marquee ---------- */
.marquee{background:var(--abyss);overflow:hidden;padding:22px 0;border-top:1px solid var(--hair-d);border-bottom:1px solid var(--hair-d)}
.marquee .track{display:flex;width:max-content;animation:mq 38s linear infinite}
.marquee span{font-family:var(--serif);font-size:1rem;letter-spacing:.36em;text-transform:uppercase;color:var(--silver-dim);padding:0 36px;white-space:nowrap}
.marquee i{color:var(--azure);font-style:normal}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .track{animation-play-state:paused}

/* ---------- feel-duo (cinematic) ---------- */
.feelduo{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--abyss)}
.fcell{position:relative;display:block;overflow:hidden;height:520px}
.fcell img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform 1.2s cubic-bezier(.22,1,.36,1),opacity .5s}
.fcell:hover img{transform:scale(1.06);opacity:1}
.fcell .fcap{position:absolute;inset:auto 0 0 0;padding:140px 48px 48px;background:linear-gradient(transparent,rgba(4,11,20,.92));color:#fff}
.fcell .fcap i{display:block;font-style:normal;font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--azure-soft);margin-bottom:12px}
.fcell .fcap strong{display:block;font-family:var(--serif);font-weight:500;font-size:2rem;line-height:1.15;margin-bottom:12px}
.fcell .fcap em{font-style:normal;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);border-bottom:1px solid rgba(228,206,154,.5);padding-bottom:5px;transition:color .3s,border-color .3s}
.fcell:hover .fcap em{color:#fff;border-color:var(--azure)}

/* ---------- signature split + frames ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.frame{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 40px 90px rgba(10,27,46,.2)}
.frame img{width:100%;height:520px;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.frame:hover img{transform:scale(1.05)}
.pricechip{display:inline-block;border:1px solid var(--gold);border-radius:999px;padding:9px 24px;font-size:.78rem;letter-spacing:.22em;color:var(--ink);margin:8px 0 20px;font-weight:600}
.dark-band .pricechip{color:var(--gold-soft)}
.iglist{list-style:none;margin:0 0 8px;padding:0;color:var(--ink-soft);font-size:.97rem}
.iglist li{padding:10px 0;border-bottom:1px solid var(--hair)}
.iglist li::before{content:"—";color:var(--azure);margin-right:12px}
.dark-band .iglist{color:var(--silver-dim)}
.dark-band .iglist li{border-color:var(--hair-d)}

/* ---------- quiz ---------- */
.qopts{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:48px}
.qopt{background:var(--white);border:1px solid var(--hair);border-radius:18px;padding:26px 10px 20px;cursor:pointer;font-family:var(--sans);transition:border-color .35s,transform .35s,box-shadow .35s}
.qopt:hover{border-color:var(--azure);transform:translateY(-6px);box-shadow:0 20px 44px rgba(10,27,46,.12)}
.qopt.sel{border-color:var(--azure);box-shadow:0 20px 44px rgba(46,159,216,.18)}
.qopt img{width:72px;margin:0 auto 14px;animation:bagfloat 6.5s ease-in-out infinite;transform-origin:50% 8%;filter:drop-shadow(0 8px 16px rgba(10,27,46,.25))}
.qopt:nth-child(2n) img{animation-delay:.7s}
.qopt:nth-child(3n) img{animation-delay:1.4s}
.qopt span{display:block;text-align:center;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:500}
.qresult{margin-top:34px;border:1px solid rgba(46,159,216,.35);border-radius:var(--r);background:linear-gradient(135deg,#0B1E33,#071527);padding:44px 48px;display:flex;gap:48px;align-items:center;color:var(--silver);animation:fadeup .6s ease;box-shadow:0 30px 70px rgba(10,27,46,.25)}
.qresult img{width:140px;flex-shrink:0;filter:drop-shadow(0 18px 40px rgba(0,0,0,.5));animation:bagfloat 6.5s ease-in-out infinite}
.qresult .qrname{font-family:var(--serif);font-size:1.7rem;margin:0 0 8px;color:#fff}
.qresult .qrline{color:var(--silver-dim);margin:0 0 8px}
.qresult .qrprice{font-family:var(--serif);color:var(--azure-soft);font-size:1.3rem;margin:0 0 8px}
.qresult .cta-row{margin-top:12px}

/* ---------- reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.review{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);padding:44px 38px;margin:0;position:relative;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.review:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(10,27,46,.1)}
.review::before{content:"\201C";font-family:var(--serif);font-size:4rem;color:var(--azure-soft);line-height:0;display:block;margin:22px 0 8px;opacity:.7}
.review blockquote{margin:0 0 24px;font-size:1.04rem;color:var(--ink);font-style:italic;font-family:var(--serif);line-height:1.7}
.review figcaption{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- membership path ---------- */
.pathrow{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:50px 0}
.pathcell{background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--hair-d);border-radius:var(--r);padding:48px 44px;position:relative;overflow:hidden}
.pathcell::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 45% at 50% 30%,var(--glow,rgba(46,159,216,.16)),transparent 70%)}
.pathcell>*{position:relative}
.pathcell .n{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);display:block;margin-bottom:16px;font-weight:600}
.pathcell h3{color:#fff;font-size:1.5rem}
.pathcell>img{width:150px;margin:8px 0 22px;filter:drop-shadow(0 18px 40px rgba(0,0,0,.5));animation:bagfloat 6.5s ease-in-out infinite;transform-origin:50% 8%}
.perks{list-style:none;padding:0;margin:28px 0 0}
.perks li{padding:14px 0;border-bottom:1px solid var(--hair-d);font-size:1rem;color:var(--silver)}
.perks li::before{content:"◆";color:var(--gold);margin-right:14px;font-size:.7em;vertical-align:1px}

/* ---------- drip pages ---------- */
.driphero{position:relative;background:var(--abyss);color:var(--silver);padding:100px 0 90px;overflow:hidden}
.driphero::before{content:"";position:absolute;width:60vw;height:60vw;max-width:760px;max-height:760px;border-radius:50%;background:radial-gradient(circle,var(--glow,rgba(46,159,216,.3)),transparent 62%);top:-16%;left:-8%;animation:aurora 17s ease-in-out infinite alternate;pointer-events:none}
.driphero .wrap{display:grid;grid-template-columns:400px 1fr;gap:84px;align-items:center;position:relative;z-index:2}
.driphero .bagpane{display:flex;justify-content:center;position:relative;padding:20px 0}
.driphero .bagpane::before{content:"";position:absolute;inset:2%;background:radial-gradient(closest-side,var(--glow,rgba(46,159,216,.4)),transparent 72%);animation:glowpulse 5s ease-in-out infinite}
.driphero .bagpane img{width:300px;position:relative;z-index:1;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));animation:bagfloat 7s ease-in-out infinite;transform-origin:50% 8%}
@keyframes glowpulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.driphero h1{color:#fff;font-size:clamp(2.4rem,5vw,3.8rem)}
.driphero .ing{color:var(--silver-dim);font-size:.94rem;letter-spacing:.04em;max-width:36em}
.driphero .price{font-family:var(--serif);color:var(--azure-soft);font-size:2rem;margin:12px 0 6px}
.dripbody{padding:96px 0}
.dripgrid2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.dripcell{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);padding:46px 42px}
.dripcell h3{font-size:.98rem;letter-spacing:.22em;text-transform:uppercase;font-family:var(--sans);font-weight:600;color:var(--azure);margin-bottom:18px}
.dripcell h3::after{content:"";display:block;width:30px;height:1px;background:var(--gold-soft);margin-top:12px}
.dripcell p,.dripcell li{color:var(--ink-soft);font-size:1rem}
.dripcell ul{padding-left:0;list-style:none;margin:0}
.dripcell li{padding:9px 0;border-bottom:1px solid var(--hair)}
.dripcell li::before{content:"—";color:var(--azure);margin-right:12px}
.scene{margin:74px 0 0;border-radius:var(--r);overflow:hidden;box-shadow:0 40px 90px rgba(10,27,46,.18)}
.scene img{width:100%;height:420px;object-fit:cover}
.relrow{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.relcard{border:1px solid var(--hair-d);background:linear-gradient(165deg,#0B1E33,#071527);border-radius:var(--r);padding:34px;text-align:center;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;position:relative;overflow:hidden}
.relcard::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 34%,var(--glow,rgba(46,159,216,.18)),transparent 70%)}
.relcard:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(10,27,46,.3)}
.relcard img{width:104px;margin:0 auto 18px;position:relative;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5));animation:bagfloat 6.5s ease-in-out infinite;transform-origin:50% 8%}
.relcard b{font-family:var(--serif);font-weight:500;display:block;margin-bottom:4px;color:#fff;position:relative}
.relcard span{color:var(--azure-soft);font-family:var(--serif);font-size:1rem;position:relative}
.relrow .relcard:nth-child(2) img{animation-delay:.8s}
.relrow .relcard:nth-child(3) img{animation-delay:1.5s}

/* ---------- faq ---------- */
.faqlist{max-width:800px;margin:0 auto}
.faqlist details{background:var(--white);border:1px solid var(--hair);border-radius:18px;margin-bottom:14px;overflow:hidden;transition:box-shadow .3s}
.faqlist details[open]{box-shadow:0 20px 44px rgba(10,27,46,.08)}
.faqlist summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 30px;font-family:var(--serif);font-size:1.16rem;font-weight:500}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{content:"+";font-family:var(--serif);color:var(--azure);font-size:1.5rem;flex-shrink:0;transition:transform .3s}
.faqlist details[open] summary::after{transform:rotate(45deg)}
.faqlist details p{color:var(--ink-soft);padding:0 30px 28px;max-width:46em;margin:0}

/* ---------- forms ---------- */
.joinbox{display:flex;gap:12px;max-width:540px;margin:30px auto 0}
.joinbox input[type=email]{flex:1;border:1px solid var(--hair-d);border-radius:999px;background:rgba(255,255,255,.06);padding:16px 24px;font-family:var(--sans);font-size:.96rem;color:#fff}
.joinbox input[type=email]::placeholder{color:var(--silver-dim)}
.joinbox input[type=email]:focus{outline:none;border-color:var(--azure)}
.band:not(.dark-band) .joinbox input[type=email]{background:var(--white);color:var(--ink);border-color:var(--hair)}
.joinhp{position:absolute;left:-9999px}
.joinnote{font-size:.82rem;color:var(--silver-dim);margin-top:16px}
.band:not(.dark-band) .joinnote{color:var(--ink-soft)}
.joinnote.bad{color:#d98a7c}
.joinnote.good{color:var(--azure-soft)}

/* ---------- service area / footer ---------- */
.areas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.areas a{padding:13px 32px;border:1px solid var(--hair-d);border-radius:999px;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--silver);transition:border-color .3s,color .3s,background .3s}
.areas a:hover{border-color:var(--azure);color:#fff;background:rgba(46,159,216,.1)}
footer{background:var(--abyss);color:var(--silver-dim);padding:84px 0 46px;font-size:.94rem;border-top:1px solid var(--hair-d)}
footer h4{color:#fff;font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;font-family:var(--sans);font-weight:600;margin-bottom:22px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:54px}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin-bottom:11px}
.fgrid a{color:var(--silver-dim);transition:color .25s}
.fgrid a:hover{color:var(--azure-soft)}
.flogoimg{width:180px;height:auto;margin-bottom:20px}
.legal{border-top:1px solid var(--hair-d);margin-top:60px;padding-top:28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.78rem;color:#5A7085}
.legal a{color:var(--silver-dim)}

/* ---------- sticky mobile bar ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(4,11,20,.96);display:none;align-items:center;gap:12px;padding:12px 16px;backdrop-filter:blur(10px);border-top:1px solid var(--hair-d)}
.sticky .sp{color:var(--silver);font-size:.72rem;letter-spacing:.1em;flex:1}
.sticky .btn{padding:12px 22px;font-size:.66rem}

/* ---------- motion ---------- */
.fadein{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.fadein.vis{opacity:1;transform:none}
.plx img{will-change:transform}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .chero{min-height:76vh}
  .split,.driphero .wrap{grid-template-columns:1fr;gap:50px}
  .trio,.reviews,.relrow{grid-template-columns:1fr}
  .steps,.baggrid{grid-template-columns:1fr 1fr}
  .addons,.qopts{grid-template-columns:repeat(3,1fr)}
  .pathrow,.dripgrid2{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .feelduo{grid-template-columns:1fr}
  .fcell{height:400px}
  .mrow{grid-template-columns:48px 104px 1fr;gap:20px}
  .mrow .price{grid-column:3;text-align:left}
  .mrow .bagcell{width:104px}
  .mrow .bagcell img{width:78px}
  .driphero .bagpane img{width:230px}
  .qresult{flex-direction:column;text-align:center;gap:24px}
  .qresult .cta-row{justify-content:center}
}
@media (max-width:760px){
  .nav nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--hair);flex-direction:column;gap:0;padding:12px 30px 24px}
  .nav nav.open{display:flex}
  .nav nav a{padding:14px 0;border-bottom:1px solid var(--hair)}
  .menu-toggle{display:flex}
  .nav .bookbtn{display:none}
  .sticky{display:flex}
  body{padding-bottom:66px}
  .steps,.baggrid{grid-template-columns:1fr}
  .qopts,.addons{grid-template-columns:1fr 1fr}
  .band{padding:70px 0}
  .chero{min-height:auto}
  .chero .wrap{padding-top:70px;padding-bottom:90px}
  .joinbox{flex-direction:column}
  .navmark{width:32px}
  .logotext{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fadein,.hero-lines .rl span,.chero .sub,.chero .cta-row,.chero .trust,.qresult{opacity:1!important;transform:none!important}
}

/* ================= v3.1 aesthetic & motion layer ================= */

/* cinematic film grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

/* scroll progress */
.progressbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;background:linear-gradient(90deg,var(--azure),var(--gold));transform-origin:left;transform:scaleX(0)}

/* nav transparent over dark heroes */
.nav{transition:background .45s ease,border-color .45s ease}
.nav.overdark{background:transparent;border-color:transparent;backdrop-filter:none}
.nav.overdark .logotext{color:#fff}
.nav.overdark .logotext small{color:var(--silver-dim)}
.nav.overdark nav a{color:var(--silver)}
.nav.overdark nav a:hover,.nav.overdark nav a.on{color:#fff}
.nav.overdark .menu-toggle{color:#fff;border-color:rgba(255,255,255,.32)}

/* promo topline */
.topline .star{color:var(--gold);margin-right:6px}
.topline a{color:var(--silver);text-decoration:none}
.topline a b{color:var(--azure-soft);font-weight:600}
.topline .sm{display:none}

/* shimmer on gradient italics */
.chero h1 em{background:linear-gradient(100deg,var(--azure-soft),var(--azure),#BFE3F7,var(--azure));background-size:280% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 7s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 0}50%{background-position:95% 0}}

/* falling droplet on the scroll cue */
.chero .scrollcue{overflow:visible}
.chero .scrollcue::after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:-6px;width:7px;height:9px;border-radius:50% 50% 50% 50%/38% 38% 62% 62%;background:linear-gradient(var(--azure-soft),var(--azure));animation:dripfall 2.4s cubic-bezier(.55,.06,.68,.19) infinite}
@keyframes dripfall{0%{top:-6px;opacity:0}22%{opacity:1}88%{opacity:1}100%{top:54px;opacity:0}}

/* rising bubbles in dark bands */
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.bubbles i{position:absolute;bottom:-24px;display:block;border:1px solid rgba(124,196,232,.35);border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.28),rgba(124,196,232,.05));animation:bubbleup linear infinite}
@keyframes bubbleup{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.85}92%{opacity:.6}100%{transform:translateY(-108vh) translateX(26px);opacity:0}}

/* cursor-following glow + 3D tilt on product tiles */
.bagtile,.relcard,.qopt{transform-style:preserve-3d;will-change:transform}
.bagtile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--mx,50%) var(--my,38%),rgba(124,196,232,.16),transparent 68%);opacity:0;transition:opacity .35s;pointer-events:none}
.bagtile:hover::after{opacity:1}

/* image clip reveals */
.frame.fadein,.scene.fadein{clip-path:inset(9% 7% 9% 7% round 22px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),clip-path 1.2s cubic-bezier(.22,1,.36,1)}
.frame.fadein.vis,.scene.fadein.vis{clip-path:inset(0 0 0 0 round 22px)}

/* gold-gradient price chips */
.pricechip{border:1px solid transparent;background:linear-gradient(var(--cream),var(--cream)) padding-box,linear-gradient(120deg,var(--gold),#E9D9AC,var(--gold)) border-box}
.dark-band .pricechip,.driphero .pricechip{background:linear-gradient(#0B1E33,#0B1E33) padding-box,linear-gradient(120deg,var(--gold),#E9D9AC,var(--gold)) border-box}

/* promo line in book bands */
.promoline{color:var(--gold-soft);font-size:.98rem;letter-spacing:.02em;margin:10px 0 0}
.promoline b{color:#fff;font-weight:600}
.band:not(.dark-band) .promoline{color:var(--gold)}
.band:not(.dark-band) .promoline b{color:var(--ink)}

/* keyboard focus */
:focus-visible{outline:2px solid var(--azure);outline-offset:3px;border-radius:4px}
.btn:focus-visible{outline-offset:4px}

/* responsive eyebrow variants */
.eyebrow .sm{display:none}

/* ---------- mobile refinements ---------- */
@media (max-width:760px){
  .topline .lg{display:none}
  .topline .sm{display:inline}
  .eyebrow .lg{display:none}
  .eyebrow .sm{display:inline}
  .chero .trust{font-size:.68rem;line-height:2}
}
@media (max-width:560px){
  .mrow{grid-template-columns:92px 1fr;grid-template-areas:"bag content" "bag price";gap:4px 18px;padding:26px 6px}
  .mrow .num{display:none}
  .mrow .bagcell{grid-area:bag;width:92px}
  .mrow .bagcell img{width:78px}
  .mrow>span:nth-child(3){grid-area:content}
  .mrow>span:nth-child(4){grid-area:price;display:flex;gap:16px;align-items:baseline}
  .mrow h3{font-size:1.16rem}
  .mrow .ing{font-size:.76rem;margin-bottom:4px}
  .mrow .line{font-size:.88rem}
  .mrow .price{font-size:1.25rem}
  .mrow .go{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .chero h1 em{animation:none}
  .scrollcue::after,.bubbles i{display:none}
  .progressbar{display:none}
  .frame.fadein,.scene.fadein{clip-path:none}
}

/* dark-hero pages: hero slides up beneath the transparent nav */
body.has-dark-hero .chero{margin-top:-82px}
body.has-dark-hero .chero .wrap{padding-top:190px}
body.has-dark-hero .driphero{margin-top:-82px;padding-top:190px}

/* ================= v3.2 content layer: veteran chip, journal, city depth ================= */

/* veteran-owned credential chip */
.vetchip{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(200,155,60,.55);border-radius:999px;padding:8px 20px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--gold);background:rgba(200,155,60,.06)}
.vetchip::before{content:"\2605";font-size:.85em;color:var(--gold)}
.dark-band .vetchip,.chero .vetchip{color:var(--gold-soft);border-color:rgba(228,206,154,.5);background:rgba(228,206,154,.07)}

/* journal cards */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.postcard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.postcard:hover{transform:translateY(-8px);box-shadow:0 28px 56px rgba(10,27,46,.13)}
.postcard .imgwrap{height:210px;overflow:hidden}
.postcard img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.postcard:hover img{transform:scale(1.06)}
.postcard .pbody{padding:26px 26px 30px;display:flex;flex-direction:column;gap:8px;flex:1}
.postcard .ptag{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--azure);font-weight:600}
.postcard h3{font-size:1.28rem;line-height:1.25;color:var(--ink)}
.postcard p{color:var(--ink-soft);font-size:.93rem;margin:0;flex:1}
.postcard .pmore{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--azure);margin-top:12px}

/* article pages */
.article{max-width:720px;margin:0 auto}
.article .artmeta{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:26px;display:flex;gap:16px;flex-wrap:wrap}
.article h2{font-size:1.55rem;margin-top:44px}
.article p{color:#3D4F60;font-size:1.03rem}
.article ul{color:#3D4F60;padding-left:22px}
.article li{margin-bottom:8px}
.article .artcta{border:1px solid var(--hair);border-left:3px solid var(--azure);border-radius:0 14px 14px 0;background:var(--white);padding:22px 26px;margin:36px 0}
.article .artcta p{margin:0 0 4px;font-size:.98rem}
.article .disclaimer{font-size:.82rem;color:var(--ink-soft);border-top:1px solid var(--hair);padding-top:18px;margin-top:44px}
.arthero{border-radius:var(--r);overflow:hidden;margin:0 0 40px;box-shadow:0 30px 70px rgba(10,27,46,.16)}
.arthero img{width:100%;height:340px;object-fit:cover}
@media (prefers-color-scheme: dark){}
/* city extras */
.cityfacts{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px}
.cityfacts .gcard h3{font-size:1.08rem}
@media (max-width:900px){.postgrid{grid-template-columns:1fr}.cityfacts{grid-template-columns:1fr}}

/* locations hub: two-up cards, stacking on mobile */
.postgrid.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.postgrid.two{grid-template-columns:1fr}}

/* ================= v3.3 menu page: cinematic board ================= */
.menuhero{position:relative;background:var(--abyss);color:var(--silver);padding:90px 0 70px;overflow:hidden}
.menuhero::before{content:"";position:absolute;width:70vw;height:70vw;max-width:860px;max-height:860px;border-radius:50%;background:radial-gradient(circle,rgba(46,159,216,.16),transparent 62%);top:-30%;right:-14%;animation:aurora 18s ease-in-out infinite alternate;pointer-events:none}
.menuhero::after{content:"";position:absolute;width:50vw;height:50vw;max-width:640px;max-height:640px;border-radius:50%;background:radial-gradient(circle,rgba(200,155,60,.09),transparent 60%);bottom:-30%;left:-12%;animation:aurora 22s ease-in-out infinite alternate-reverse;pointer-events:none}
.menuhero .wrap{position:relative;z-index:2}
.menuhero h1{color:#fff}
.menuhero .sub{color:var(--silver-dim)}
.menuhero .eyebrow{color:var(--azure-soft)}

/* start-with-how-you-feel rail */
.feelrail{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.fchip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--hair-d);border-radius:999px;padding:10px 20px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--silver);transition:border-color .3s,color .3s,background .3s,transform .3s}
.fchip i{width:9px;height:9px;border-radius:50%;background:var(--dot,var(--azure));box-shadow:0 0 10px var(--dot,var(--azure));font-style:normal}
.fchip:hover{border-color:var(--azure);color:#fff;background:rgba(46,159,216,.1);transform:translateY(-2px)}
.feellead{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--silver-dim);margin:40px 0 0;font-weight:600}

/* everything-included strip */
.allincl{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-top:1px solid var(--hair-d);margin-top:44px;padding-top:26px}
.allincl span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver-dim);font-weight:600}
.allincl span b{color:var(--gold-soft);font-weight:600;margin-right:8px}

/* menu card grid */
.menugrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.menucard{scroll-margin-top:120px;padding-top:46px}
.menucard .num{position:absolute;top:18px;left:22px;font-family:var(--serif);font-size:1.15rem;color:transparent;-webkit-text-stroke:1px var(--gold);z-index:1}
.bagtile .mbadge, .mbadge{position:absolute;top:18px;right:18px;z-index:3;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--abyss);background:linear-gradient(120deg,var(--gold-soft),var(--gold));border-radius:999px;padding:5px 12px}
.bagtile .mbadge{font-family:var(--sans);color:var(--abyss)}
.bagtile .mbadge.step, .mbadge.step{background:rgba(124,196,232,.16);color:var(--azure-soft);border:1px solid rgba(124,196,232,.4)}
.menucard .ing{color:var(--silver-dim);font-size:.8rem;letter-spacing:.02em;margin:8px 0 10px;position:relative;z-index:1;min-height:2.6em}
.menucard .hook{color:var(--silver);font-size:.93rem;margin:0;position:relative;z-index:1;min-height:3.4em}
.mc-bottom{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--hair-d);position:relative;z-index:1}
.mc-bottom .price{font-family:var(--serif);color:var(--azure-soft);font-size:1.5rem}
.mc-bottom .go{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--silver-dim);transition:color .3s}
.menucard:hover .go{color:var(--azure)}

@media (max-width:1020px){.menugrid{grid-template-columns:1fr 1fr}.allincl{grid-template-columns:1fr 1fr;gap:12px}}
@media (max-width:640px){.menugrid{grid-template-columns:1fr}.menucard{padding-top:50px}.menuhero{padding:70px 0 56px}}
body.has-dark-hero .menuhero{margin-top:-82px;padding-top:190px}

/* dimension attrs are for CLS only: CSS-sized bag images keep their ratio */
.bagtile img,.menucard img,.relcard img,.qopt img,.qresult img,.pathcell>img,.driphero .bagpane img,.navmark,.flogoimg{height:auto}

/* ================= v3.4 menu theater ================= */

/* "I'm feeling ..." conversational selector */
.feelline{margin-top:38px;position:relative;z-index:5}
.feelline button.fl-toggle{background:none;border:0;cursor:pointer;font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3.6vw,2.6rem);color:#fff;padding:0;display:inline-flex;align-items:baseline;gap:14px;letter-spacing:.01em}
.fl-toggle .fl-blank{font-style:italic;color:var(--azure-soft);border-bottom:2px solid rgba(124,196,232,.45);padding:0 6px;min-width:5.5em;text-align:left;display:inline-block;position:relative}
.fl-toggle .fl-blank::after{content:"";display:inline-block;width:2px;height:.9em;background:var(--azure);margin-left:3px;vertical-align:-2px;animation:caret 1.1s step-end infinite}
@keyframes caret{50%{opacity:0}}
.fl-toggle .fl-chev{font-size:.55em;color:var(--silver-dim);transition:transform .35s}
.feelline.open .fl-chev{transform:rotate(180deg)}
.fl-hint{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--silver-dim);font-weight:600;margin:0 0 10px}

/* mood panel: three doors, feelings inside */
.feelpanel{display:none;margin-top:26px;background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--hair-d);border-radius:var(--r);padding:30px;backdrop-filter:blur(10px)}
.feelline.open .feelpanel{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;animation:fadeup .45s ease}
.mood h5{margin:0 0 4px;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);font-weight:700}
.mood p.mline{margin:0 0 14px;font-size:.8rem;color:var(--silver-dim)}
.mood .fopt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--hair-d);padding:12px 4px;cursor:pointer;font-family:var(--sans);font-size:.92rem;color:var(--silver);transition:color .25s,padding-left .25s}
.mood .fopt:hover{color:#fff;padding-left:10px}
.mood .fopt i{width:9px;height:9px;border-radius:50%;background:var(--dot);box-shadow:0 0 10px var(--dot);flex-shrink:0;font-style:normal}
.mood .fopt small{margin-left:auto;color:var(--silver-dim);font-size:.78rem}

/* ---------------- the stage ---------------- */
.stage{position:relative;background:linear-gradient(180deg,var(--abyss),var(--abyss-2) 55%,var(--abyss));color:var(--silver);padding:90px 0 70px;overflow:hidden}
.stage::before{content:"";position:absolute;width:80vw;height:80vw;max-width:980px;max-height:980px;border-radius:50%;background:radial-gradient(circle,var(--stageglow,rgba(46,159,216,.3)),transparent 62%);top:-18%;left:-16%;transition:background 1s ease;animation:aurora 19s ease-in-out infinite alternate;pointer-events:none}
.stage .wrap{position:relative;z-index:2}
.stagegrid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.stageleft{position:relative;display:flex;justify-content:center;padding:30px 0}
.pedestal{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);width:70%;height:34px;background:radial-gradient(ellipse,var(--stageglow,rgba(46,159,216,.5)),transparent 70%);filter:blur(6px);transition:background 1s ease}
.stagebag{width:290px;height:auto;position:relative;z-index:2;filter:drop-shadow(0 34px 70px rgba(0,0,0,.65));animation:bagfloat 7s ease-in-out infinite;transform-origin:50% 8%;transition:opacity .35s ease,transform .35s ease}
.stagebag.swap{opacity:0;transform:scale(.96)}

/* ingredient constellation */
.orbit{position:absolute;inset:0;pointer-events:none;z-index:3}
.orb{position:absolute;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--silver);background:rgba(4,11,20,.55);border:1px solid var(--hair-d);border-radius:999px;padding:6px 14px;white-space:nowrap;opacity:0;backdrop-filter:blur(4px);animation:orbin .7s ease forwards, orbfloat 6s ease-in-out infinite}
.orb::after{content:"";position:absolute;top:50%;width:34px;height:1px;background:linear-gradient(90deg,var(--hair-d),transparent)}
.orb.left::after{left:100%;background:linear-gradient(90deg,var(--hair-d),transparent)}
.orb.right::after{right:100%;background:linear-gradient(270deg,var(--hair-d),transparent)}
@keyframes orbin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes orbfloat{0%,100%{margin-top:0}50%{margin-top:-6px}}

.stageright .eyebrow{margin-bottom:12px}
.stagename{font-family:var(--serif);font-weight:500;color:#fff;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.08;margin:0 0 8px}
.stageprice{font-family:var(--serif);color:var(--azure-soft);font-size:1.9rem;margin:0 0 10px;transition:color 1s ease}
.stageing{color:var(--silver-dim);font-size:.9rem;letter-spacing:.03em;margin:0 0 12px;max-width:36em}
.stagehook{color:var(--silver);font-size:1rem;margin:0 0 20px;max-width:34em}

/* build-your-bag */
.builder{border:1px solid var(--hair-d);border-radius:18px;padding:20px 22px;background:rgba(255,255,255,.03)}
.builder h6{margin:0 0 4px;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);font-weight:700}
.builder p.bnote{margin:0 0 12px;font-size:.78rem;color:var(--silver-dim)}
.addrow{display:flex;flex-wrap:wrap;gap:10px}
.addchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair-d);border-radius:999px;background:none;color:var(--silver);padding:9px 16px;font-family:var(--sans);font-size:.8rem;font-weight:500;cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.addchip b{font-weight:600;color:var(--silver-dim)}
.addchip[aria-pressed="true"]{border-color:var(--azure);color:#fff;background:rgba(46,159,216,.14)}
.addchip[aria-pressed="true"] b{color:var(--azure-soft)}
.stagetotal{display:flex;align-items:baseline;gap:14px;margin-top:16px}
.stagetotal .tlab{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--silver-dim);font-weight:600}
.stagetotal .tval{font-family:var(--serif);color:#fff;font-size:1.6rem;font-variant-numeric:tabular-nums}
.stage .cta-row{margin-top:20px}

/* thumbnail dock */
.dock{display:flex;gap:14px;justify-content:center;margin-top:56px;flex-wrap:wrap}
.dockbtn{background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--hair-d);border-radius:16px;padding:10px 10px 6px;cursor:pointer;transition:border-color .3s,transform .3s,box-shadow .3s;position:relative}
.dockbtn img{width:38px;height:52px;object-fit:contain;display:block;margin:0 auto;transition:transform .18s ease}
.dockbtn i{display:block;width:7px;height:7px;border-radius:50%;background:var(--dot);box-shadow:0 0 8px var(--dot);margin:7px auto 3px;font-style:normal}
.dockbtn:hover{transform:translateY(-4px);border-color:rgba(124,196,232,.45)}
.dockbtn[aria-pressed="true"]{border-color:var(--azure);box-shadow:0 0 24px rgba(46,159,216,.3)}

/* editorial breathers inside the grid */
.breather{grid-column:1/-1;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.6rem);color:var(--silver);padding:26px 20px;margin:0}
.breather::before,.breather::after{content:"";display:inline-block;width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);vertical-align:middle;margin:0 18px}

/* dot rail wayfinding */
.dotrail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:70;display:flex;flex-direction:column;gap:12px;opacity:0;pointer-events:none;transition:opacity .4s}
.dotrail.on{opacity:1;pointer-events:auto}
.dotrail button{width:12px;height:12px;border-radius:50%;border:0;background:var(--dot);opacity:.4;cursor:pointer;box-shadow:0 0 8px var(--dot);transition:opacity .3s,transform .3s;padding:0;position:relative}
.dotrail button:hover,.dotrail button.on{opacity:1;transform:scale(1.35)}
.dotrail button span{position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--silver);background:rgba(4,11,20,.8);border:1px solid var(--hair-d);border-radius:999px;padding:4px 12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s}
.dotrail button:hover span{opacity:1}

@media (max-width:1020px){
 .stagegrid{grid-template-columns:1fr;gap:40px}
 .stagebag{width:240px}
 .orbit{display:none}
 .feelline.open .feelpanel{grid-template-columns:1fr}
 .dotrail{display:none}
}
@media (max-width:640px){
 .dock{gap:9px}
 .dockbtn img{width:36px}
 .fl-toggle .fl-blank{min-width:4.5em}
}
@media (prefers-reduced-motion:reduce){
 .fl-toggle .fl-blank::after{animation:none}
 .orb{animation:orbin .01s forwards}
 .stagebag{animation:none}
}

/* ================= v3.6 stage finesse ================= */

/* liquid-fill reveal on bag swap */
.stagebag.fill{clip-path:inset(100% 0 0 0)}
.stagebag.filling{clip-path:inset(0 0 0 0);transition:clip-path .8s cubic-bezier(.3,.9,.3,1),opacity .3s ease}

/* single falling drop from the stage bag */
.stagedrop{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);width:8px;height:11px;border-radius:50% 50% 50% 50%/36% 36% 64% 64%;background:linear-gradient(var(--azure-soft),var(--azure));z-index:1;animation:stagedrip 5.2s cubic-bezier(.55,.06,.68,.19) infinite;pointer-events:none}
@keyframes stagedrip{0%,78%{opacity:0;transform:translate(-50%,0) scale(.8)}82%{opacity:1;transform:translate(-50%,4px) scale(1)}97%{opacity:.9}100%{opacity:0;transform:translate(-50%,70px) scale(.9)}}

/* ghost category word behind the stage */
.ghostword{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-family:var(--serif);font-weight:600;font-size:clamp(6rem,13vw,11rem);letter-spacing:.08em;color:transparent;-webkit-text-stroke:1px rgba(201,214,226,.07);z-index:0;pointer-events:none;white-space:nowrap;transition:opacity .8s}
.ghostword.dim{opacity:0}

/* stage arrows */
.stagearrow{position:absolute;top:44%;z-index:5;width:52px;height:52px;border-radius:50%;border:1px solid var(--hair-d);background:rgba(4,11,20,.5);color:var(--silver);font-size:1.1rem;cursor:pointer;opacity:0;transition:opacity .35s,border-color .3s,color .3s;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center}
.stage:hover .stagearrow,.stagearrow:focus-visible{opacity:1}
.stagearrow:hover{border-color:var(--azure);color:#fff}
.stagearrow.prev{left:14px}
.stagearrow.next{right:14px}

/* four-word gold moment */
.stagemoment{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--gold-soft);margin:0 0 18px}
.stagemoment::before{content:"";display:inline-block;width:26px;height:1px;background:var(--gold);vertical-align:middle;margin-right:12px}

/* dot pulse when the board syncs */
@keyframes dotpulse{0%{transform:scale(1)}45%{transform:scale(1.7)}100%{transform:scale(1)}}
.dotrail button.pulse{animation:dotpulse .8s ease}

/* board hover glow variable */
#board::before{background:radial-gradient(circle,var(--boardglow,rgba(46,159,216,.14)),transparent 62%)!important}

/* QR finisher */
.qrcard{display:inline-flex;align-items:center;gap:18px;margin-top:34px;border:1px solid var(--hair-d);border-radius:18px;padding:16px 22px;background:rgba(255,255,255,.03);text-align:left}
.qrcard img{width:96px;height:96px;border-radius:10px}
.qrcard p{margin:0;font-size:.8rem;color:var(--silver-dim);max-width:15em}
.qrcard p b{display:block;color:var(--silver);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:4px}
@media (max-width:760px){.qrcard{display:none}.stagearrow{opacity:.75}}
@media (prefers-reduced-motion:reduce){.stagedrop{display:none}.stagebag.fill,.stagebag.filling{clip-path:none;transition:none}}

/* feel options: label + outcome stack */
.mood .fopt{align-items:flex-start}
.mood .fopt i{margin-top:7px}
.mood .fo-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.mood .fo-l{font-weight:600;color:var(--silver);transition:color .25s}
.mood .fopt:hover .fo-l{color:#fff}
.mood .fo-o{font-size:.78rem;color:var(--silver-dim);line-height:1.5;font-weight:400}
.mood .fo-b{margin-left:12px;color:var(--azure-soft);font-size:.72rem;white-space:nowrap;flex-shrink:0;margin-top:3px}

/* v4.1 · nineband: full-bleed nine-bag lineup on the home page */
/* its own section now: a curve above and below, so it only needs breathing room */
.nineband{position:relative;background:#040B14;overflow:hidden;padding:46px 0 26px}
.nineband img{width:100%;height:clamp(320px,38vw,540px);object-fit:cover;object-position:50% 44%;display:block}
.nb-cap{position:absolute;left:0;right:0;bottom:0;padding:140px 32px 48px;text-align:center;background:linear-gradient(to top,rgba(4,11,20,.97) 22%,rgba(4,11,20,.8) 56%,rgba(4,11,20,0))}
.nb-cap span{display:block;font:600 11px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--azure-soft)}
.nb-cap b{display:block;margin:10px auto 22px;max-width:18em;font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3vw,2.3rem);color:#fff;line-height:1.25}
.nb-cap .btn.ghost{border-color:rgba(255,255,255,.35);color:var(--silver)}
.nb-cap .btn.ghost:hover{border-color:var(--gold);color:var(--gold-soft)}
@media(max-width:700px){.nb-cap{padding:100px 20px 36px}}

/* ================= v4.3 mobile finesse ================= */

/* swipe hint under the stage bag (phones only) */
.swipehint{display:none;margin:20px auto 0;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--silver-dim);text-align:center;transition:opacity .5s;position:relative;z-index:2}
.swipehint::before{content:"\2039";margin-right:10px;color:var(--azure-soft)}
.swipehint::after{content:"\203A";margin-left:10px;color:var(--azure-soft)}
.swipehint.off{opacity:0}

/* mood tabs (hidden on desktop, JS adds .tabbed) */
.moodtabs{display:none}

@media (max-width:1020px){
 .feelpanel.tabbed .moodtabs{display:flex;gap:8px;margin-bottom:16px}
 .moodtabs .mtab{flex:1;border:1px solid var(--hair-d);background:none;border-radius:999px;padding:12px 0;color:var(--silver-dim);font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
 .moodtabs .mtab.on{color:#fff;border-color:var(--azure);background:rgba(46,159,216,.14)}
 .feelline.open .feelpanel.tabbed{display:block}
 .feelpanel.tabbed .mood{display:none}
 .feelpanel.tabbed .mood.on{display:block;animation:fadeup .35s ease}
}

@media (max-width:760px){
 .stagearrow{display:none}
 /* the hint is a flex sibling of the bag: let it wrap to its own full-width line */
 .stageleft{flex-wrap:wrap}
 .swipehint{display:block;flex:0 0 100%;width:100%;margin-top:14px}
 .sticky .sp{font-size:.78rem;letter-spacing:.03em}
 .sticky .sp b{color:#fff;font-weight:600;font-family:var(--serif);letter-spacing:.02em}
 .sticky .btn{padding:13px 20px}
}

@media (max-width:640px){
 /* ghost word can outgrow a phone screen */
 .ghostword{display:none}
 /* snap-scrolling dock */
 .dock{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 6px 12px;margin:44px -6px 0}
 .dock::-webkit-scrollbar{display:none}
 .dockbtn{flex:0 0 auto;scroll-snap-align:center}
 .dockbtn img{width:42px;height:56px}
 .dockbtn[aria-pressed="true"] img{transform:scale(1.14)}
 /* add-on chips: one swipeable row */
 .addrow{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px}
 .addrow::-webkit-scrollbar{display:none}
 .addchip{flex:0 0 auto;scroll-snap-align:start;padding:12px 16px;white-space:nowrap}
 /* the board becomes tight menu rows */
 .menugrid{gap:10px}
 /* the compact row now lives on the link wrapper, not the card */
 .bagtile.menucard{padding:0}
 .bagtile.menucard .mc-link{display:grid;grid-template-columns:56px 1fr auto;grid-template-areas:"img name price" "img ing ing";column-gap:14px;row-gap:2px;align-items:center;text-align:left;padding:14px 16px}
 .bagtile.menucard img{grid-area:img;width:46px;margin:0;animation:none}
 .bagtile.menucard b{grid-area:name;font-size:.98rem}
 .bagtile.menucard .ing{grid-area:ing;min-height:0;margin:2px 0 0;font-size:.7rem}
 .bagtile.menucard .hook{display:none}
 .bagtile.menucard .num{display:none}
 .bagtile.menucard .mbadge{display:none}
 .bagtile.menucard .mc-bottom{grid-area:price;margin:0;padding:0;border:0;display:block;text-align:right}
 .bagtile.menucard .mc-bottom .price{font-size:1.05rem}
 .bagtile.menucard .mc-bottom .go{display:none}
 .breather{font-size:.72rem;margin:10px 0}
}
/* grid children must be allowed to shrink so scroll rows actually scroll */
.stagegrid>*{min-width:0}
.builder{max-width:100%}

/* v4.7 · hero trust pills */
.trustpills{display:flex;flex-wrap:wrap;gap:11px;margin-top:32px}
.tpill{position:relative;display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.2);background:linear-gradient(120deg,rgba(255,255,255,.11),rgba(255,255,255,.04));backdrop-filter:blur(10px);border-radius:999px;padding:11px 20px;font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#EDF3F8;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 26px rgba(0,0,0,.28);overflow:hidden;opacity:0;transform:translateY(8px);animation:pillin .7s cubic-bezier(.22,1,.36,1) forwards;transition:border-color .3s,transform .3s}
.tpill:hover{border-color:rgba(124,196,232,.55);transform:translateY(-2px)}
.tpill::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--azure-soft);box-shadow:0 0 8px var(--azure-soft);flex-shrink:0}
.tpill:nth-child(1){animation-delay:.9s}
.tpill:nth-child(2){animation-delay:1.02s}
.tpill:nth-child(3){animation-delay:1.14s}
.tpill:nth-child(4){animation-delay:1.26s}
.tpill:nth-child(5){animation-delay:1.38s}
@keyframes pillin{to{opacity:1;transform:translateY(0)}}
.tpill.vet{border-color:rgba(124,196,232,.5);background:linear-gradient(120deg,rgba(46,159,216,.2),rgba(46,159,216,.07));color:#CFE8F7}
.tpill.vet::before{content:none}
.tpill.gold{border-color:rgba(200,155,60,.6);background:linear-gradient(120deg,rgba(200,155,60,.2),rgba(200,155,60,.07));color:var(--gold-soft);box-shadow:inset 0 1px 0 rgba(228,206,154,.25),0 10px 26px rgba(0,0,0,.28),0 0 22px rgba(200,155,60,.16)}
.tpill.gold::before{background:var(--gold-soft);box-shadow:0 0 8px var(--gold-soft)}
.tpill.gold::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,244,214,.22),transparent);transform:skewX(-18deg);animation:pillsheen 4.6s ease-in-out 2.2s infinite}
@keyframes pillsheen{0%{left:-70%}22%{left:130%}100%{left:130%}}
@media (max-width:560px){.tpill{padding:9px 15px;font-size:.6rem;gap:7px}.trustpills{gap:8px}}
@media (prefers-reduced-motion:reduce){.tpill{animation:none;opacity:1;transform:none}.tpill.gold::after{animation:none;content:none}}

/* v4.8 · visit storyrail (Anywhere-style full-bleed strip) */
.storyband{padding:90px 0 0;background:var(--cream)}
.storyhead{text-align:center;max-width:820px;margin:0 auto 46px}
.storyhead .sub{max-width:34em;margin:10px auto 0}
.storyrail{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:var(--abyss)}
.sframe{position:relative;margin:0;overflow:hidden;aspect-ratio:3/4;background:var(--abyss-2)}
.sframe img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.6,.2,1);filter:saturate(1.06) contrast(1.03)}
.sframe:hover img{transform:scale(1.06)}
.sframe figcaption{position:absolute;left:0;right:0;bottom:0;padding:70px 22px 20px;background:linear-gradient(to top,rgba(4,11,20,.93) 26%,rgba(4,11,20,0));color:#fff}
.sframe figcaption b{display:block;font-family:var(--serif);color:var(--gold-soft);font-size:1rem;letter-spacing:.16em}
.sframe figcaption span{display:block;font-family:var(--serif);font-weight:500;font-size:1.15rem;margin:6px 0 4px;color:#fff}
.sframe figcaption p{margin:0;font-size:.8rem;color:var(--silver);line-height:1.5}
@media (max-width:900px){.storyrail{grid-template-columns:repeat(2,1fr)}.sframe{aspect-ratio:1/1}}
@media (max-width:560px){.storyrail{gap:2px}.sframe figcaption{padding:48px 14px 12px}.sframe figcaption p{display:none}.sframe figcaption span{font-size:.95rem}}

/* v4.9 · home motion pass */
/* nine-bag lineup drifts slowly, like a product film still breathing */
.nineband img{animation:ninedrift 34s ease-in-out infinite alternate}
@keyframes ninedrift{from{transform:scale(1.035) translateX(-1.1%)}to{transform:scale(1.065) translateX(1.1%)}}
/* story rail: frames land one after another, captions rise a beat later */
.storyrail .sframe:nth-child(2){transition-delay:.12s}
.storyrail .sframe:nth-child(3){transition-delay:.24s}
.storyrail .sframe:nth-child(4){transition-delay:.36s}
.sframe figcaption{opacity:0;transform:translateY(14px);transition:opacity .7s ease .4s,transform .7s cubic-bezier(.22,1,.36,1) .4s}
.sframe.vis figcaption{opacity:1;transform:none}
.sframe figcaption b{display:block;position:relative}
.sframe figcaption b::after{content:"";display:block;width:0;height:1px;background:var(--gold);margin-top:6px;transition:width .8s cubic-bezier(.22,1,.36,1) .7s}
.sframe.vis figcaption b::after{width:34px}
/* quiz bags idle-float like the menu tiles */
.qopt img{animation:bagfloat 7s ease-in-out infinite}
.qopt:nth-child(2) img{animation-delay:.9s}
.qopt:nth-child(3) img{animation-delay:1.8s}
.qopt:nth-child(4) img{animation-delay:2.7s}
.qopt:nth-child(5) img{animation-delay:3.6s}
.qopt:nth-child(6) img{animation-delay:4.5s}
@media (prefers-reduced-motion:reduce){
 .nineband img{animation:none}
 .sframe figcaption{opacity:1;transform:none;transition:none}
 .sframe figcaption b::after{width:34px;transition:none}
 .qopt img{animation:none}
 .storyrail .sframe{transition-delay:0s}
}

/* v5.0 · mobile hero fits one screen: tighter padding, pills become a swipe strip */
@media (max-width:560px){
 .chero .wrap,body.has-dark-hero .chero .wrap{padding-top:148px;padding-bottom:50px}
 .chero .sub{margin-top:14px!important}
 .trustpills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:24px -30px 0;padding:2px 30px 6px;width:100vw;max-width:100vw}
 .trustpills::-webkit-scrollbar{display:none}
 .tpill{flex:0 0 auto}
}

/* v5.2 · drip pages, Anywhere anatomy */
.band.mist{background:var(--mist)}
.crumb{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver-dim);margin:0 0 18px}
.crumb a{color:var(--silver-dim)}
.crumb a:hover{color:var(--azure-soft)}
.ingchips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 18px}
.ingchip{border:1px solid var(--hair);background:var(--white);border-radius:999px;padding:10px 20px;font-size:.85rem;color:var(--ink);font-weight:500}
.ingnote{font-size:.78rem;color:var(--ink-soft);max-width:44em}
.pcovers{font-size:.85rem;color:var(--silver-dim);max-width:30em;margin:10px 0 0}
.memline{margin:6px 0 0;font-size:.85rem;color:var(--gold-soft)}
.memline a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px}

/* v5.3 · drip info cards: color-coded by role, animated entrances */
.dripgrid2 .dripcell{--cellc:var(--dripc,var(--azure));position:relative;overflow:hidden;border-left:3px solid var(--cellc);background:linear-gradient(150deg,color-mix(in srgb,var(--cellc) 7%,#fff),#fff 58%);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.dripgrid2 .dripcell:nth-child(2){--cellc:var(--azure)}
.dripgrid2 .dripcell:nth-child(3){--cellc:var(--gold)}
.dripgrid2 .dripcell:nth-child(4){--cellc:#3FA98F}
.dripgrid2 .dripcell:hover{transform:translateY(-6px);box-shadow:0 26px 56px color-mix(in srgb,var(--cellc) 20%,rgba(10,27,46,.10))}
.dripgrid2 .dripcell::after{content:"";position:absolute;top:-70px;right:-70px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--cellc) 14%,transparent),transparent 68%);pointer-events:none}
.dc-ic{display:inline-flex;width:42px;height:42px;border-radius:13px;align-items:center;justify-content:center;color:var(--cellc);background:color-mix(in srgb,var(--cellc) 12%,#fff);border:1px solid color-mix(in srgb,var(--cellc) 26%,#fff);margin-bottom:16px;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.dc-ic svg{width:21px;height:21px}
.dripgrid2 .dripcell:hover .dc-ic{transform:scale(1.1) rotate(-4deg)}
.dripgrid2 .dripcell h3{color:var(--cellc)}
.dripgrid2 .dripcell h3::after{background:var(--cellc);width:0;height:2px;transition:width .8s cubic-bezier(.22,1,.36,1) .45s}
.dripgrid2 .dripcell.vis h3::after{width:34px}
.dripgrid2 .dripcell li::before{color:var(--cellc)}
.dripgrid2 .dripcell.fadein{transform:none}
.dripgrid2 .dripcell.fadein.vis{animation:cellin .7s cubic-bezier(.22,1,.36,1) backwards}
.dripgrid2 .dripcell.fadein.vis:nth-child(2){animation-delay:.12s}
.dripgrid2 .dripcell.fadein.vis:nth-child(3){animation-delay:.24s}
.dripgrid2 .dripcell.fadein.vis:nth-child(4){animation-delay:.36s}
@keyframes cellin{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dripgrid2 .dripcell.fadein.vis{animation:none}.dripgrid2 .dripcell h3::after{width:34px;transition:none}}

/* v5.9 · hero fits one screen with the two-line category headline */
@media (min-width:761px){body.has-dark-hero .chero .wrap{padding-top:158px}}
.chero .hero-lines{max-width:14.6em}
@media (max-width:560px){
 .chero .hero-lines{font-size:2.12rem}
 body.has-dark-hero .chero .wrap{padding-top:130px}
 .chero .sub.lede{font-size:.95rem;margin-top:12px!important}
 .chero .cta-row{margin-top:18px}
 .trustpills{margin-top:16px}
}

/* v6.2 · portrait frames show the full photo, no crop */
.frame.portrait img{height:auto;object-fit:contain}

/* v6.3 · membership hero: two bags, one path */
.memhero{position:relative;background:var(--abyss);overflow:hidden;padding:70px 0 60px;text-align:center}
body.has-dark-hero .memhero{margin-top:-82px;padding-top:170px}
.memhero::before{content:"";position:absolute;inset:-25%;background:radial-gradient(ellipse 55% 48% at 20% 42%,rgba(95,191,174,.17),transparent 62%),radial-gradient(ellipse 55% 48% at 80% 42%,rgba(143,123,216,.19),transparent 62%);animation:aurora 16s ease-in-out infinite alternate;pointer-events:none}
.mh-grid{position:relative;display:grid;grid-template-columns:190px 1fr 190px;gap:28px;align-items:center}
.mh-bag{width:168px;height:auto;justify-self:center;filter:drop-shadow(0 26px 52px rgba(0,0,0,.55));animation:bagfloat 6.5s ease-in-out infinite;transform-origin:50% 8%}
.mh-bag.right{animation-delay:1.7s}
.memhero h1{color:#fff;font-size:clamp(2.3rem,4.6vw,3.6rem)}
.memhero .sub{color:var(--silver);max-width:36em;margin:14px auto 0}
.months{display:flex;align-items:center;justify-content:center;margin:36px auto 10px}
.mo{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.02rem;color:#fff;border:1px solid rgba(95,191,174,.5);background:rgba(95,191,174,.12);opacity:0;animation:moin .6s cubic-bezier(.22,1,.36,1) forwards}
.mo.m1{animation-delay:.25s}.mo.m2{animation-delay:.5s}.mo.m3{animation-delay:.75s}
.mo.m4{border-color:rgba(143,123,216,.65);background:rgba(143,123,216,.17);box-shadow:0 0 26px rgba(143,123,216,.4);animation-delay:1.05s}
.months i{width:36px;height:1px;background:linear-gradient(90deg,rgba(95,191,174,.45),rgba(143,123,216,.45))}
@keyframes moin{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
.molabel{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin:0}
.molabel .c-reset{color:#5FBFAE}
.molabel .c-rewind{color:#A79CE0}
.molabel .mosep{color:var(--silver-dim);margin:0 12px}
.valline{margin:28px 0 0;color:var(--silver);font-size:1.02rem}
.strike{position:relative;color:var(--silver-dim);white-space:nowrap;padding:0 2px}
.strike::after{content:"";position:absolute;left:0;right:0;top:52%;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;animation:strikein .7s cubic-bezier(.22,1,.36,1) 1.5s forwards}
@keyframes strikein{to{transform:scaleX(1)}}
.valchip{display:inline-block;border:1px solid rgba(200,155,60,.55);background:rgba(200,155,60,.14);color:var(--gold-soft);border-radius:999px;padding:6px 16px;font-weight:600;font-family:var(--sans);font-size:.92rem}
.memterms{margin:20px 0 0;font-size:.78rem;color:var(--silver-dim)}
.paththread{display:block;width:1px;height:74px;margin:34px auto -60px;background:linear-gradient(var(--gold),transparent)}
@media (max-width:900px){.mh-grid{grid-template-columns:1fr}.mh-bag{display:none}.memhero{padding-bottom:44px}body.has-dark-hero .memhero{padding-top:140px}}
@media (prefers-reduced-motion:reduce){.mo{animation:none;opacity:1}.strike::after{animation:none;transform:scaleX(1)}.mh-bag{animation:none}.memhero::before{animation:none}}

/* v6.4 · membership price lockup: unmissable */
.pricelock{margin:32px auto 2px;display:flex;flex-direction:column;align-items:center;gap:8px}
.pl-was{font-size:.95rem;color:var(--silver-dim)}
.pl-now{font-family:var(--serif);font-weight:500;font-size:clamp(3.4rem,7.2vw,5.2rem);line-height:1;color:var(--gold-soft);text-shadow:0 0 38px rgba(200,155,60,.45),0 2px 10px rgba(0,0,0,.4);opacity:0;transform:scale(.86);animation:pricein .8s cubic-bezier(.22,1,.36,1) 1.35s forwards}
.pl-now small{font-family:var(--sans);font-size:.24em;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-left:6px;vertical-align:6px}
@keyframes pricein{to{opacity:1;transform:scale(1)}}
.pl-save{font-size:.9rem;color:var(--silver);max-width:36em;line-height:1.7;margin-top:4px}
@media (prefers-reduced-motion:reduce){.pl-now{animation:none;opacity:1;transform:none}}

/* v6.9 · city page depth: area chips and local scene cards */
.areachips{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 22px}
.areachip{border:1px solid var(--hair);background:var(--white);border-radius:999px;padding:9px 18px;font-size:.86rem;color:var(--ink)}
.ziprow{font-size:.88rem;color:var(--ink-soft);margin:0 0 18px}
.ziprow b{color:var(--ink);font-weight:600;letter-spacing:.02em}
.scenegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.scenecard{background:var(--white);border:1px solid var(--hair);border-left:3px solid var(--azure);border-radius:var(--r);padding:30px 28px}
.scenecard h3{font-size:1.12rem;margin-bottom:10px}
.scenecard p{color:var(--ink-soft);font-size:.95rem;margin:0}
.scenegrid .scenecard:nth-child(2){border-left-color:var(--gold)}
.scenegrid .scenecard:nth-child(3){border-left-color:#5FBFAE}
@media (max-width:900px){.scenegrid{grid-template-columns:1fr}}

/* ================= v7.4 mobile menu: one list, tap to build ================= */
/* desktop keeps the stage; the card stays a plain link */
.mc-link{display:block;color:inherit}
.mc-panel{display:none}

@media (max-width:760px){
 /* the stage and the board showed the same nine bags twice. On a phone the
    board becomes the whole menu and the stage carousel stands down. */
 .stage,.dotrail{display:none!important}

 .menucard{padding:0;overflow:hidden;transition:border-color .4s,box-shadow .4s,transform .18s cubic-bezier(.34,1.56,.64,1)}
 .menucard:active{transform:scale(.985)}


 .mc-panel{display:none}
 .mc-inner{padding:20px 16px 22px;border-top:1px solid var(--hair-d)}
 .mcp-ing{color:var(--silver-dim);font-size:.82rem;margin:0 0 16px;line-height:1.6}
 .mcp-lab{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);font-weight:700;margin:0 0 10px}
 .mcp-adds{display:flex;flex-wrap:wrap;gap:8px}
 .mcp-adds .addchip{font-size:.76rem;padding:9px 13px}
 .mcp-total{display:flex;align-items:baseline;justify-content:space-between;margin-top:18px;
   padding-top:14px;border-top:1px solid var(--hair-d)}
 .mcp-total span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--silver-dim);font-weight:600}
 .mcp-val{font-family:var(--serif);font-size:1.9rem;color:var(--bagc,var(--azure-soft));font-weight:500;
   font-variant-numeric:tabular-nums;transition:color .4s}
 .mcp-cta{display:flex;gap:10px;margin-top:18px}
 .mcp-cta .btn{flex:1;text-align:center;padding:14px 10px;font-size:.68rem}

 /* the open card takes its own colour */
 .menucard.open{border-color:color-mix(in srgb,var(--bagc) 45%,transparent);
   box-shadow:0 18px 46px color-mix(in srgb,var(--bagc) 22%,rgba(0,0,0,.5))}

 /* liquid fill: the bag colours in from the bottom as the card opens */
 .menucard img{clip-path:inset(0 0 0 0);transition:clip-path .7s cubic-bezier(.3,.9,.3,1),filter .5s}
 .menucard.filling img{clip-path:inset(100% 0 0 0)}
 .menucard.open img{filter:drop-shadow(0 10px 26px color-mix(in srgb,var(--bagc) 40%,transparent))}

 /* included row scrolls instead of stacking four deep */
 .allincl{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:22px;scrollbar-width:none;
   width:100vw;max-width:100vw;margin-left:-30px;padding:22px 30px 4px}
 .allincl::-webkit-scrollbar{display:none}
 .allincl span{flex:0 0 auto;white-space:nowrap}

 /* sticky bar holds back until the menu is actually in play (menu page only) */
 body.sticky-gated .sticky{transform:translateY(110%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
 body.sticky-gated.sticky-on .sticky{transform:none}
}
@media (prefers-reduced-motion:reduce){
 .mc-panel{transition:none}
 .menucard img,.menucard,.sticky{transition:none}
 .menucard.filling img{clip-path:none}
}

/* the pour: the headline fills with fluid on arrival.
   Two layers so the word is never invisible while the fill is still rising:
   a static base underneath, the azure fill climbing over it. */
.menuhero h1 em{
  background-image:linear-gradient(180deg,var(--azure-soft),var(--azure)),
                   linear-gradient(180deg,#DCE7F0,#DCE7F0);
  background-repeat:no-repeat,no-repeat;
  background-position:0 100%,0 0;
  background-size:100% 100%,100% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media (prefers-reduced-motion:no-preference){
 .menuhero h1 em{background-size:100% 0%,100% 100%;
   animation:pourfill 1.15s cubic-bezier(.3,.9,.3,1) .45s forwards}
 @keyframes pourfill{to{background-size:100% 100%,100% 100%}}
}
@media (prefers-reduced-motion:reduce){
}

/* ================= v7.8 contrast fixes ================= */
/* The mobile drawer was painting cream while the transparent-nav pages coloured
   its links white or silver, so About/Locations were all but invisible. Over a
   dark hero the drawer now goes dark to match. */
@media (max-width:760px){
 .nav.overdark nav{background:rgba(4,11,20,.97);border-bottom:1px solid var(--hair-d);
   backdrop-filter:blur(12px);box-shadow:0 24px 50px rgba(0,0,0,.5)}
 .nav.overdark nav a{color:#E8EFF5;border-bottom:1px solid var(--hair-d);font-weight:500}
 .nav.overdark nav a.on,.nav.overdark nav a:hover{color:#fff}
 .nav.overdark nav a.on{border-bottom-color:var(--azure)}
 /* and on light pages keep the ink links plainly readable */
 .nav:not(.overdark) nav a{color:var(--ink);font-weight:500}
}

/* "Full details" sat as dark navy text on the near-black bag view */
.bagview .mcp-cta .btn.ghost{background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.38);color:#fff}
.bagview .mcp-cta .btn.ghost:hover,.bagview .mcp-cta .btn.ghost:focus-visible{
  border-color:var(--bagc,var(--azure));background:rgba(255,255,255,.12);color:#fff}
.bagview .mcp-cta .btn.glow{box-shadow:0 14px 34px color-mix(in srgb,var(--bagc,#2E9FD8) 40%,transparent)}


/* ================= v8.1 the bag view ================= */
/* One fixed composition: the bag is pinned and never moves, the details sit on
   a glass sheet below it. Nothing slides, nothing swipes. */
.bagview{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;
  overflow:hidden;opacity:0;transition:opacity .3s ease;
  background:
    radial-gradient(ellipse 70% 44% at 50% 26%,
      color-mix(in srgb,var(--bagc,#2E9FD8) 30%,transparent),transparent 70%),
    linear-gradient(180deg,#02060b,#06111e 52%,#01040a)}
.bagview.on{opacity:1}
.bagview[hidden]{display:none}
body.bv-open{overflow:hidden}
@media (min-width:761px){.bagview{display:none!important}}

/* a shaft of light that drifts across the room */
.bagview::before{content:"";position:absolute;left:50%;top:-18%;width:150%;height:80%;
  transform:translateX(-50%);pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0%,transparent 38%,
    color-mix(in srgb,var(--bagc,#2E9FD8) 22%,transparent) 50%,transparent 62%);
  filter:blur(38px);animation:bvbeam 15s ease-in-out infinite alternate}
@keyframes bvbeam{from{transform:translateX(-53%) scaleX(.9)}to{transform:translateX(-47%) scaleX(1.1)}}
.bagview::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 34%,transparent 42%,rgba(0,0,0,.66))}

.bv-close{position:absolute;top:14px;right:14px;z-index:6;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;
  font-size:1rem;cursor:pointer;backdrop-filter:blur(8px);-webkit-tap-highlight-color:transparent}
.bv-close:hover,.bv-close:focus-visible{border-color:var(--bagc,var(--azure));background:rgba(255,255,255,.16)}

/* the bag: fixed, centred, always fits its half of the screen */
.bv-stage{position:relative;z-index:2;flex:1 1 auto;min-height:0;
  display:grid;place-items:center;padding:56px 24px 22px}
.bv-halo{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);
  width:min(78vw,300px);height:min(78vw,300px);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--bagc,#2E9FD8) 42%,transparent),transparent 66%);
  filter:blur(28px);animation:bvhalo 9s ease-in-out infinite alternate}
@keyframes bvhalo{from{opacity:.7;transform:translate(-50%,-50%) scale(.94)}
                  to{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.bv-bagwrap{position:relative;z-index:2;display:inline-block;line-height:0;
  transition:transform .18s ease-out;will-change:transform}
.bv-bag{display:block;height:auto;width:auto;
  max-height:min(38vh,360px);max-width:min(52vw,210px);object-fit:contain;
  filter:drop-shadow(0 0 34px color-mix(in srgb,var(--bagc,#2E9FD8) 62%,transparent))
         drop-shadow(0 22px 46px rgba(0,0,0,.8))}
.bagview.on .bv-bag{animation:bagfloat 8s ease-in-out 1.2s infinite}
/* a specular sweep travels across the glass */
.bv-sweep{position:absolute;top:0;bottom:0;left:-30%;width:34%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);
  transform:skewX(-14deg);mix-blend-mode:overlay;
  animation:bvsweep 6.5s ease-in-out 1.4s infinite}
@keyframes bvsweep{0%{left:-34%}42%{left:104%}100%{left:104%}}
.bv-pool{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:min(58vw,240px);height:22px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--bagc,#2E9FD8) 60%,transparent),transparent 72%);
  filter:blur(9px)}

/* the sheet: everything you read and tap, on frosted glass */
.bv-sheet{position:relative;z-index:4;flex:0 0 auto;max-height:54%;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,rgba(10,22,38,.78),rgba(4,11,20,.94));
  backdrop-filter:blur(18px);border-top:1px solid rgba(255,255,255,.12);
  border-radius:26px 26px 0 0;box-shadow:0 -22px 60px rgba(0,0,0,.6);
  transform:translateY(26px);opacity:0;
  transition:transform .55s cubic-bezier(.22,1,.36,1) .12s,opacity .45s ease .12s}
.bagview.on .bv-sheet{transform:none;opacity:1}
.bv-sheet::before{content:"";display:block;width:38px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.22);margin:11px auto 0}
.bv-body{padding:16px 24px 30px;text-align:center}

.bv-cat{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700;
  color:var(--bagc,var(--azure-soft));margin:0 0 7px}
.bv-name{font-family:var(--serif);font-weight:500;color:#fff;font-size:1.85rem;margin:0 0 2px;line-height:1.15}
.bv-price{font-family:var(--serif);font-size:1.45rem;color:var(--silver);margin:0 0 18px}

.bv-ing{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-width:23em;
  margin:0 auto 20px}
.bv-chip{border:1px solid color-mix(in srgb,var(--bagc,#2E9FD8) 42%,transparent);
  background:color-mix(in srgb,var(--bagc,#2E9FD8) 13%,transparent);backdrop-filter:blur(6px);
  color:#EAF1F7;border-radius:999px;padding:7px 14px;font-size:.72rem;
  opacity:0;transform:translateY(8px);animation:chipin .5s cubic-bezier(.22,1,.36,1) forwards}
@keyframes chipin{to{opacity:1;transform:none}}

.bv-slot .mc-panel{display:block!important;height:auto!important;text-align:left}
.bv-slot .mc-inner{border-top:1px solid var(--hair-d);padding:20px 0 0}
.bv-slot .mcp-val{color:var(--bagc,var(--azure-soft))}
.bagview .mcp-ing{display:none}
.bagview .mcp-cta .btn.ghost{background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.38);color:#fff}
.bagview .mcp-cta .btn.ghost:hover,.bagview .mcp-cta .btn.ghost:focus-visible{
  border-color:var(--bagc,var(--azure));background:rgba(255,255,255,.12);color:#fff}
.bagview .mcp-cta .btn.glow{box-shadow:0 14px 34px color-mix(in srgb,var(--bagc,#2E9FD8) 40%,transparent)}

@media (prefers-reduced-motion:reduce){
 .bagview,.bv-sheet{transition:none}
 .bagview::before,.bv-halo,.bv-sweep,.bagview.on .bv-bag{animation:none}
 .bv-chip{animation:none;opacity:1;transform:none}
 .bv-sheet{transform:none;opacity:1}
}

@media (max-height:720px){
 .bv-bag{max-height:min(32vh,280px)}
 .bv-name{font-size:1.6rem}
 .bv-price{font-size:1.3rem;margin-bottom:14px}
 .bv-body{padding:12px 22px 24px}
 .bv-ing{margin-bottom:16px}
}

/* ---- v8.2 the liquid stays alive ---- */
/* bubbles are masked to the bag's own silhouette, so they rise inside it */
.bv-bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:var(--bagmask);mask-image:var(--bagmask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.bv-bubbles i{position:absolute;bottom:-8%;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95),rgba(255,255,255,.28) 62%,transparent);
  opacity:0;animation-name:bvrise;animation-timing-function:cubic-bezier(.4,.05,.6,.95);
  animation-iteration-count:infinite}
@keyframes bvrise{
  0%{transform:translateY(0) scale(.7);opacity:0}
  12%{opacity:.85}
  75%{opacity:.6}
  100%{transform:translateY(-260px) scale(1.05);opacity:0}}

/* the room dims a touch as the sheet comes up, so the bag reads as further away */
.bagview .bv-halo{opacity:calc(var(--depth,1) * 1)}
.bv-sweep{opacity:var(--depth,1)}

@media (prefers-reduced-motion:reduce){
 .bv-bubbles{display:none}
 .bv-bagwrap{transition:none}
}

/* ================= v8.6 review carousel ================= */
.reviewband{padding:34px 0 30px}
.reviewband .bandhead{margin-bottom:14px}
.rv-rating{margin:8px 0 0;font-size:.85rem;color:var(--silver-dim)}
.rv-rating b{color:#fff;font-weight:600}

/* the stage holds one review at a time, centred */
.rvstage{position:relative;max-width:700px;margin:0 auto;display:flex;align-items:center;
  justify-content:center;min-height:104px}
.rvtrack{position:relative;flex:1;min-height:104px;display:grid;place-items:center}
.rvslide{grid-area:1/1;margin:0;text-align:center;max-width:640px;padding:0 12px;
  opacity:0;visibility:hidden;transform:translateX(38px) scale(.97);
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1),visibility .5s}
.rvslide.on{opacity:1;visibility:visible;transform:none}
.rvslide.leaving{opacity:0;visibility:visible;transform:translateX(-38px) scale(.97)}
.rvslide blockquote{margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.35rem);line-height:1.55;color:#fff;letter-spacing:.005em}
.rv-stars{display:block;color:var(--gold);letter-spacing:.2em;font-size:1rem;margin-bottom:16px}
.rvslide figcaption{margin-top:16px}
.rv-who{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--silver)}
.rv-who::before{content:"";display:inline-block;width:26px;height:1px;background:var(--gold);
  vertical-align:middle;margin-right:13px}

/* a quiet quote mark behind the whole thing */
.rvstage::before{content:"\201C";position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  font-family:var(--serif);font-size:5rem;line-height:1;color:var(--azure-soft);opacity:.18;pointer-events:none}

.rvarrow{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--hair-d);
  background:rgba(255,255,255,.06);color:var(--silver);backdrop-filter:blur(6px);font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .3s,color .3s,transform .3s;
  -webkit-tap-highlight-color:transparent}
.rvarrow:hover,.rvarrow:focus-visible{border-color:var(--azure);color:#fff;background:rgba(255,255,255,.12);transform:scale(1.06)}

.rvdots{display:flex;justify-content:center;gap:10px;margin-top:20px}
.rvdot{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.24);transition:background .3s,transform .3s,width .3s}
.rvdot.on{background:var(--azure-soft);width:26px;border-radius:99px}
.rvdot:hover{background:rgba(124,196,232,.6)}

@media (max-width:760px){
 .reviewband{padding:38px 0 34px}
 .rvarrow{display:none}
 .rvstage{min-height:150px}
 .rvtrack{min-height:150px}
 .rvslide{padding:0}
 .rvstage::before{font-size:4rem;top:-22px}
}
@media (prefers-reduced-motion:reduce){
 .rvslide{transition:opacity .2s ease,visibility .2s}
 .rvslide,.rvslide.leaving{transform:none}
}
.rv-agg{display:inline;color:var(--gold);letter-spacing:.18em;font-size:.86rem;margin-right:9px}

.rv-more{margin:14px 0 0;text-align:center}
.rv-more .textlink{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.reviewband .bandhead h2{margin-bottom:0}
@media (max-width:760px){ .rvstage{min-height:116px} .rvtrack{min-height:116px} }

/* this band stays compact: the quotes are the point, not the heading */
.reviewband .bandhead h2{font-size:clamp(1.35rem,2.4vw,1.8rem)}
.reviewband .rvdots{margin-top:16px}

/* v9.2 · the About page's four values.
   This was an inline grid-template-columns, which outranks any stylesheet rule,
   so the mobile collapse never applied and the cards wrapped one word per line. */
.trio.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1020px){.trio.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.trio.four{grid-template-columns:1fr}}

/* v9.3 · tap targets.
   Text links were rendering ~18px tall, which is a hard thing to hit with a
   thumb. On a phone they get real vertical padding so the tappable box is
   closer to the 44px guidance, without changing how anything looks. */
@media (max-width:760px){
 footer .fgrid ul a,
 footer .fgrid p a,
 footer .legal a{display:inline-block;padding:11px 0;line-height:1.35}
 footer .fgrid ul li{margin:0}
 .areas a{display:inline-block;padding:10px 0}
 .textlink{display:inline-block;padding:10px 0}
 .rv-more .textlink{padding:12px 8px}
 .topline a{display:inline-block;padding:8px 0}
 .crumb a{display:inline-block;padding:8px 4px 8px 0}
 .faqlist summary{padding-top:18px;padding-bottom:18px}
}

/* v9.6 · the quiz result's two actions read as one bar across the card
   instead of two pills floating in the middle of it. */
.qresult .cta-row{display:flex;gap:0;margin-top:20px;width:100%}
.qresult .cta-row .btn{flex:1 1 0;text-align:center;border-radius:0;box-shadow:none;
  padding:18px 14px;white-space:nowrap}
.qresult .cta-row .btn:first-child{border-radius:4px 0 0 4px}
.qresult .cta-row .btn:last-child{border-radius:0 4px 4px 0;border-left:0}
@media (max-width:760px){
 .qresult .cta-row{flex-direction:column}
 .qresult .cta-row .btn{width:100%}
 .qresult .cta-row .btn:first-child{border-radius:4px 4px 0 0}
 .qresult .cta-row .btn:last-child{border-radius:0 0 4px 4px;border-left:1px solid var(--hair-d)}
}

/* v9.6b · the nine-bag button was sitting hard against the bottom edge */
.nineband{padding-bottom:44px}
.nb-cap{padding-bottom:64px}
@media (max-width:760px){.nineband{padding-bottom:34px}.nb-cap{padding-bottom:44px}}

/* the quiz result's bar has to actually span the card */
.qresult .qrbody{flex:1 1 auto;min-width:0;width:100%}
.qresult .cta-row{justify-content:stretch}

/* ==========================================================================
   Revision round 1 (Salvador), applied 2026-09-12
   ========================================================================== */

/* --- Bag sizes -----------------------------------------------------------
   The nine bag photos have different canvas aspect ratios (404x904 up to
   640x960). Sizing them by WIDTH therefore rendered the wide ones shorter,
   which is why Migraine Cocktail, Cellular Rewind, Cellular Reset and Post
   Surgery Recovery read as "smaller". Sizing by HEIGHT makes every bag the
   same visual size. Each height below reproduces the height the tall
   reference bags already had, so the cards Salvador was happy with do not
   move at all.                                                              */
.qopt img{height:161px;width:auto;max-width:100%}      /* home, was width:72px  */
.bagtile img{height:336px;width:auto;max-width:100%}   /* menu, was width:150px */
.relcard img{height:233px;width:auto;max-width:100%}   /* towns, was width:104px */

/* --- "Details" on the menu cards ----------------------------------------
   Sat at silver-dim on a dark card and read as disabled. Matched to the
   .textlink treatment used on the home page.                               */
.mc-bottom .go{color:var(--azure);font-size:.72rem;
  border-bottom:1px solid var(--gold-soft);padding-bottom:3px}
.menucard:hover .go{color:var(--azure-soft);border-bottom-color:var(--gold)}

/* --- "Also serving" town links ------------------------------------------
   Were weight 300 with no underline, so they did not read as links.        */
.alsoserving a{color:var(--azure);font-weight:500;
  border-bottom:1px solid var(--gold-soft);padding-bottom:2px}
.alsoserving a:hover,.alsoserving a:focus-visible{color:var(--azure-soft);border-bottom-color:var(--gold)}

/* --- Previous / next between infusions ----------------------------------- */
.bagnavband{padding-top:0}
.bagnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
  border-top:1px solid var(--hair);padding-top:26px}
.bagnav-side{display:flex;align-items:center;gap:14px;min-width:0}
.bagnav-side.next{justify-content:flex-end;text-align:right}
.bagnav .bn-ar{font-size:1.35rem;line-height:1;color:var(--azure);flex:0 0 auto;transition:transform .3s}
.bagnav-side:hover .bn-ar{transform:translateX(-5px)}
.bagnav-side.next:hover .bn-ar{transform:translateX(5px)}
.bagnav .bn-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.bagnav .bn-lab{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft)}
.bagnav .bn-name{font-family:var(--serif);font-size:1.05rem;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bagnav-side:hover .bn-name{color:var(--azure)}
.bagnav-all{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--ink-soft);border:1px solid var(--hair);border-radius:999px;padding:11px 22px;
  white-space:nowrap;transition:border-color .3s,color .3s}
.bagnav-all:hover{border-color:var(--azure);color:var(--azure)}

@media (max-width:640px){
  /* the compact mobile menu row: same height-normalising, wider image cell
     so the widest bag still fits                                            */
  .bagtile.menucard .mc-link{grid-template-columns:74px 1fr auto}
  .bagtile.menucard img{height:103px;width:auto;max-width:100%}
  .bagnav{grid-template-columns:1fr 1fr;gap:14px 10px}
  .bagnav-all{grid-column:1 / -1;order:3;justify-self:center}
  .bagnav .bn-name{font-size:.92rem}
  .bagnav .bn-ar{font-size:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  .bagnav-side:hover .bn-ar,.bagnav-side.next:hover .bn-ar{transform:none}
}

/* "Full details" on the dark menu stage inherited the light-page outline
   button: dark navy text and a 12% navy border on a near-black background,
   so it all but disappeared next to Book this bag. */
.stage .btn.ghost,.memhero .btn.ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.42);color:#fff;box-shadow:none}
.stage .btn.ghost:hover,.stage .btn.ghost:focus-visible,.memhero .btn.ghost:hover,.memhero .btn.ghost:focus-visible{border-color:var(--azure-soft);background:rgba(255,255,255,.12);color:#fff}