/* Aura Concierge Wellness. Palette straight from Cesar's intake:
background green #1C2A22, contrast green #25362C, gold accent #D4B26F.
Vibe words: warm & luxurious, earthy & natural, modern & minimal. */
:root{
--forest:#1C2A22; --forest2:#25362C; --deep:#131E18;
--gold:#D4B26F; --gold-l:#E4C88F; --gold-d:#7E6024;
--ivory:#F7F4ED; --cream:#EDE7DA; --ink:#16211B; --mut:#5C6B61; --mutd:#A3B5A9;
--line:rgba(212,178,111,.26); --linel:rgba(22,33,27,.12);
--dsp:'Fraunces',Georgia,serif; --ui:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--ui);
font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.center{text-align:center}
.ctr{margin-left:auto;margin-right:auto}
h1,h2,h3{font-family:var(--dsp);font-weight:400;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:clamp(38px,6vw,66px);line-height:1.06}
h2{font-size:clamp(29px,3.7vw,44px);line-height:1.14}
h3{font-size:22px;line-height:1.3}
p{margin:0}
.eye{font:600 11px var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-d);margin-bottom:16px}
.lead{font-size:19px;color:var(--mut);max-width:62ch;margin-top:20px}
.lead.ctr{text-align:center}
.small{font-size:13.5px}
/* nav */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:26px;
padding:16px 26px;background:rgba(247,244,237,.88);backdrop-filter:blur(14px);
border-bottom:1px solid var(--linel)}
.nav.dk{background:rgba(28,42,34,.9);border-bottom-color:var(--line)}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1;margin-right:auto}
.brand .mark{font-family:var(--dsp);font-size:21px;letter-spacing:.3em;color:var(--ink)}
.brand .sub{font:500 9.5px var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d);margin-top:5px}
.links{display:flex;gap:26px}
.links a{font:500 14px var(--ui);text-decoration:none;color:var(--ink);opacity:.82;padding:4px 0;border-bottom:1px solid transparent}
.links a:hover,.links a.on{opacity:1;border-bottom-color:var(--gold)}
.burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{display:block;width:22px;height:1.6px;background:var(--ink)}
.drawer{display:none;flex-direction:column;gap:2px;padding:14px 26px 24px;background:var(--ivory);
border-bottom:1px solid var(--linel);position:sticky;top:65px;z-index:59}
.drawer.open{display:flex}
.drawer a{padding:11px 0;text-decoration:none;font:500 16px var(--ui);border-bottom:1px solid var(--linel)}
.drawer .btn{margin-top:14px;border-bottom:0}
/* buttons */
.btn{display:inline-block;font:600 15px var(--ui);text-decoration:none;padding:15px 30px;
border-radius:2px;transition:.18s;letter-spacing:.02em;border:1px solid transparent}
.btn.sm{padding:11px 20px;font-size:13.5px}
.btn.gold{background:var(--gold);color:#1C2A22}
.btn.gold:hover{background:var(--gold-l)}
.btn.ghost{border-color:var(--linel);color:var(--ink)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-d)}
.dark .btn.ghost,.hero .btn.ghost,.lux .btn.ghost,.phero .btn.ghost,.book .btn.ghost,.deep .btn.ghost{border-color:rgba(247,244,237,.34);color:var(--ivory)}
.dark .btn.ghost:hover,.hero .btn.ghost:hover,.lux .btn.ghost:hover,.phero .btn.ghost:hover,.book .btn.ghost:hover,.deep .btn.ghost:hover{border-color:var(--gold);color:var(--gold-l)}
.cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}
.cta.ctr{justify-content:center}
/* bands */
.band{padding:104px 0}
.band.tight{padding:74px 0}
.dark{background:var(--forest);color:var(--ivory)}
.dark h1,.dark h2,.dark h3{color:var(--ivory)}
.dark .lead,.dark p{color:var(--mutd)}
.dark .eye{color:var(--gold)}
.deep{background:var(--deep);color:var(--ivory)}
.cream{background:var(--cream)}
.book{background:var(--forest2);color:var(--ivory)}
.book h2{color:var(--ivory)}.book .lead{color:var(--mutd)}.book .eye{color:var(--gold)}
/* hero: two calls to action, the shape he liked on his inspiration site */
.hero{position:relative;background:var(--forest);color:var(--ivory);overflow:hidden}
.hero .wrap{position:relative;z-index:2;padding-top:118px;padding-bottom:118px;max-width:1180px}
.hero .in{max-width:660px}
.hero h1{color:var(--ivory)}
.hero .lead{color:var(--mutd);font-size:20px}
.hero .shot{position:absolute;right:0;top:0;bottom:0;width:58%;z-index:1}
.hero .shot img{width:100%;height:100%;object-fit:cover;opacity:.78}
.hero .shot:after{content:'';position:absolute;inset:0;
background:linear-gradient(90deg,var(--forest) 0%,rgba(28,42,34,.92) 26%,rgba(28,42,34,.52) 62%,rgba(28,42,34,.22) 100%)}
.hero .rule{width:64px;height:2px;background:var(--gold);margin:26px 0}
.trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.trust div{font:500 13.5px var(--ui);color:var(--mutd)}
.trust b{display:block;font-family:var(--dsp);font-size:19px;color:var(--gold-l);font-weight:400}
/* single column service rows, straight off theivdoc's layout */
.rows{margin-top:52px;border-top:1px solid var(--linel)}
.dark .rows,.dark .row{border-color:var(--line)}
.row{display:grid;grid-template-columns:46px 124px 1fr auto;gap:24px;align-items:start;
padding:34px 0;border-bottom:1px solid var(--linel);text-decoration:none;transition:.18s}
.row:hover{background:rgba(212,178,111,.06)}
.row .ix{font-family:var(--dsp);font-size:15px;color:var(--gold-d);padding-top:6px}
.row h3{margin-bottom:6px}
.row .tag{font:600 10.5px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);margin-bottom:9px}
.row .desc{font-size:15.5px;color:var(--mut);max-width:60ch}
.dark .row .desc{color:var(--mutd)}
.row .px{text-align:right;white-space:nowrap;padding-top:4px}
.row .px b{font-family:var(--dsp);font-size:27px;font-weight:400;color:var(--ink)}
.dark .row .px b{color:var(--gold-l)}
.row .px span{display:block;font-size:12px;color:var(--mut);margin-top:3px}
.chip{display:inline-block;font:600 10px var(--ui);letter-spacing:.14em;text-transform:uppercase;
padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--gold-d);margin-left:10px}
/* cards */
.grid{display:grid;gap:22px;margin-top:48px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--linel);border-radius:3px;padding:32px}
.dark .card{background:rgba(247,244,237,.045);border-color:var(--line)}
.card .n{font-family:var(--dsp);font-size:14px;color:var(--gold-d);margin-bottom:14px}
.card h3{margin-bottom:10px}
.card p{font-size:15.5px;color:var(--mut)}
.dark .card p{color:var(--mutd)}
/* lists */
.ul{list-style:none;padding:0;margin:26px 0 0}
.ul li{position:relative;padding-left:30px;margin-bottom:13px;font-size:16px;color:var(--mut)}
.dark .ul li{color:var(--mutd)}
.ul li:before{content:'';position:absolute;left:3px;top:4px;width:6px;height:11px;
border-right:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);transform:rotate(45deg)}
/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split.rev>*:first-child{order:2}
.frame{position:relative;border:1px solid var(--line);padding:14px}
.frame img{width:100%;height:520px;object-fit:cover}
/* price block */
.pricebox{background:var(--forest2);color:var(--ivory);padding:34px;border:1px solid var(--line)}
.pricebox .amt{font-family:var(--dsp);font-size:52px;color:var(--gold-l);line-height:1}
.pricebox .per{font-size:14px;color:var(--mutd);margin-top:8px}
/* membership */
.tier{background:#fff;border:1px solid var(--linel);padding:34px;display:flex;flex-direction:column}
.tier.feature{background:var(--forest);color:var(--ivory);border-color:var(--gold)}
.tier.feature h3,.tier.feature .amt{color:var(--ivory)}
.tier.feature .ul li{color:var(--mutd)}
.tier .amt{font-family:var(--dsp);font-size:42px;color:var(--ink);line-height:1;margin:6px 0 4px}
.tier.feature .amt{color:var(--gold-l)}
.tier .per{font-size:13px;color:var(--mut)}
.tier.feature .per{color:var(--mutd)}
.tier .btn{margin-top:auto}
/* quotes + notes */
.pull{font-family:var(--dsp);font-size:clamp(23px,2.7vw,32px);line-height:1.4;max-width:22ch}
.note{font-size:13.5px;color:var(--mut);margin-top:22px;padding-top:18px;border-top:1px solid var(--linel)}
.dark .note{color:var(--mutd);border-color:var(--line)}
/* towns */
.towns{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px;margin-top:44px;
border:1px solid var(--linel)}
.towns a{padding:22px;text-decoration:none;border:1px solid var(--linel);margin:-1px;
display:flex;justify-content:space-between;align-items:center;transition:.16s}
.towns a:hover{background:#fff;border-color:var(--gold)}
.towns .t{font-family:var(--dsp);font-size:19px}
.towns .go{font-size:12px;color:var(--gold-d);letter-spacing:.1em;text-transform:uppercase}
/* steps */
.steps{counter-reset:s;display:grid;gap:2px;margin-top:48px}
.step{counter-increment:s;display:grid;grid-template-columns:74px 1fr;gap:26px;padding:30px 0;
border-bottom:1px solid var(--linel)}
.dark .step{border-color:var(--line)}
.step:before{content:counter(s,decimal-leading-zero);font-family:var(--dsp);font-size:26px;color:var(--gold-d)}
/* faq */
.faq{margin-top:44px;border-top:1px solid var(--linel)}
.faq details{border-bottom:1px solid var(--linel)}
.faq summary{cursor:pointer;padding:24px 0;font:500 18px var(--ui);list-style:none;
display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';font-family:var(--dsp);font-size:24px;color:var(--gold-d)}
.faq details[open] summary:after{content:'-'}
.faq p{padding:0 0 24px;color:var(--mut);max-width:74ch}
/* prose */
.prose p{margin-bottom:20px;color:var(--mut);max-width:70ch}
.prose h2{margin:44px 0 16px}
.prose h3{margin:32px 0 10px}
/* footer */
.foot{background:var(--deep);color:var(--mutd);padding:82px 0 34px}
.foot h4{font:600 11px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 18px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:11px;font-size:14.5px}
.foot a{text-decoration:none;color:var(--mutd)}
.foot a:hover{color:var(--gold-l)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:56px}
.foot-brand .mark{color:var(--ivory)}
.fp{font-size:14.5px;margin-top:16px;line-height:1.75}
.fbot{margin-top:56px;padding-top:26px;border-top:1px solid var(--line)}
.fbot .fp{margin-top:9px;color:#7E9186}
@media(max-width:900px){
.links{display:none}.burger{display:flex}
.hero .shot{display:none}.hero .wrap{padding-top:76px;padding-bottom:76px}
.split,.g2,.g3{grid-template-columns:1fr;gap:36px}
.split.rev>*:first-child{order:0}
.band{padding:70px 0}
.row{grid-template-columns:1fr;gap:10px}
.row .ix{display:none}.row .px{text-align:left}
.fgrid{grid-template-columns:1fr;gap:38px}
.frame img{height:340px}
}
/* ── v2 components: product pages, menu tiles, boosters ── */
.phero{background:var(--forest);color:var(--ivory);padding:52px 0 96px;position:relative;overflow:hidden}
.phero:after{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 70% at 82% 12%,rgba(212,178,111,.16),transparent 60%)}
.phero .wrap{position:relative;z-index:2}
.phero h1{color:var(--ivory);font-size:clamp(33px,4.6vw,54px)}
.phero .lead{color:var(--mutd);margin-top:22px}
.phero .eye{color:var(--gold)}
.phero.menu{padding-bottom:104px}
.phero.sm h1{font-size:clamp(29px,3.6vw,42px)}
.crumb{font-size:12.5px;color:var(--mutd);letter-spacing:.04em;margin-bottom:34px}
.crumb a{color:var(--mutd);text-decoration:none;border-bottom:1px solid rgba(163,181,169,.35)}
.crumb a:hover{color:var(--gold-l);border-color:var(--gold)}
.dhead{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.pricebar{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:34px;
padding:22px 24px;border:1px solid var(--line);background:rgba(212,178,111,.06)}
.pn{font-family:var(--dsp);font-size:40px;color:var(--gold-l);line-height:1;display:block}
.pd{display:block;font-size:13.5px;color:var(--mutd);margin-top:8px;max-width:34ch}
.ptime{display:inline-block;margin-top:12px;font:600 10.5px var(--ui);letter-spacing:.18em;
text-transform:uppercase;color:var(--gold-l);padding:6px 12px;border:1px solid var(--line);
border-radius:999px}
.pricebar>div{flex:1;min-width:210px}
.doses{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.doses span{font-size:13px;color:var(--mutd);border:1px solid var(--line);padding:9px 15px}
.doses b{color:var(--gold-l);font-weight:500}
/* product tile: the shared master bag, tinted per infusion, monogram over it */
.dbag{position:relative;display:grid;place-items:center;padding:22px}
.dbag:before{content:'';position:absolute;width:78%;height:70%;border-radius:50%;filter:blur(58px);opacity:.7}
.dbag img{position:relative;z-index:2;max-height:520px;width:auto;object-fit:contain;
background:#fff;border-radius:20px;padding:16px 22px;mix-blend-mode:normal;
box-shadow:0 34px 70px rgba(0,0,0,.42)}
.dbag.booster img{max-height:400px;border-radius:2px}
.dbag.aura-hydrate:before{background:#7FB2C9}
.dbag.aura-recover:before{background:#C98F5F}
.dbag.aura-defend:before{background:#8FC98F}
.dbag.aura-signature:before{background:#D4B26F}
.dbag.aura-optimize:before{background:#B57FC9}
.ings{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.ing{font:500 14px var(--ui);padding:11px 17px;background:#fff;border:1px solid var(--linel)}
.enh{margin-top:34px;padding:26px;border-left:2px solid var(--gold);background:#fff}
.enh p{color:var(--mut)}
.bstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;margin-top:34px}
.bstrip .bcard{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 22px;
text-decoration:none;box-shadow:0 0 0 1px var(--linel);transition:.16s}
.bstrip .bcard:hover{background:#fff;border-color:var(--gold)}
.bn{font:500 15px var(--ui);color:var(--ink)}
.bp{font-family:var(--dsp);font-size:20px;color:var(--gold-d)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:26px;margin-top:48px}
.mtile{background:#fff;border:1px solid var(--linel);text-decoration:none;display:flex;flex-direction:column;transition:.2s}
.mtile:hover{border-color:var(--gold);transform:translateY(-3px)}
.mt-img{position:relative;height:300px;display:grid;place-items:center;overflow:hidden;
background:linear-gradient(180deg,#ffffff 0%,#FBF8F3 100%)}
.mt-img:after{content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
background:linear-gradient(90deg,transparent,var(--dc,#7FB2C9),transparent);opacity:.95}
.mt-img:before{content:'';position:absolute;top:-42px;left:50%;transform:translateX(-50%);
width:250px;height:250px;border-radius:50%;opacity:.34;transition:opacity .35s ease;
background:radial-gradient(circle,var(--dc,#7FB2C9) 0%,transparent 68%)}
.mtile:hover .mt-img:before{opacity:.58}
.mt-img.aura-hydrate{--dc:#7FB2C9}
.mt-img.aura-recover{--dc:#C98F5F}
.mt-img.aura-defend{--dc:#8FC98F}
.mt-img.aura-signature{--dc:#D4B26F}
.mt-img.aura-optimize{--dc:#B57FC9}
.mt-img img{position:relative;z-index:2;max-height:250px;width:auto;mix-blend-mode:multiply;
filter:drop-shadow(0 16px 22px rgba(28,42,34,.16))}
.mt-body{padding:26px;display:flex;flex-direction:column;flex:1}
.mt-body h3{margin:4px 0 10px}
.mt-body p{font-size:15px;color:var(--mut);flex:1}
.mt-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:22px;
padding-top:16px;border-top:1px solid var(--linel)}
.mt-px{font-family:var(--dsp);font-size:26px;color:var(--ink)}
.mt-go{font:600 11px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d)}
.card.blink{text-decoration:none;display:flex;flex-direction:column;transition:.18s}
.card.blink:hover{border-color:var(--gold);transform:translateY(-2px)}
.card.blink .mt-go{margin-top:18px}
@media(max-width:900px){
.dhead{grid-template-columns:1fr;gap:38px}
.dbag img{max-height:340px}
.phero{padding:34px 0 64px}
.mt-img{height:230px}
}
/* the menu rows carry the bag itself, the way the Anywhere rows do */
.rbag{position:relative;display:grid;place-items:center;padding-top:2px}
.rbag:before{content:'';position:absolute;width:120%;height:76%;top:6%;border-radius:50%;
filter:blur(24px);opacity:.42;background:var(--dc,#7FB2C9)}
.rbag img{position:relative;z-index:2;width:62px;height:auto;mix-blend-mode:multiply}
.dark .rbag img{mix-blend-mode:normal;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.rbag img{mix-blend-mode:normal}
.rbag.aura-hydrate{--dc:#7FB2C9}
.rbag.aura-recover{--dc:#C98F5F}
.rbag.aura-defend{--dc:#8FC98F}
.rbag.aura-signature{--dc:#D4B26F}
.rbag.aura-optimize{--dc:#B57FC9}
@media(max-width:700px){.row{grid-template-columns:40px 56px 1fr}.rbag img{width:48px}.row .px{grid-column:2/-1;text-align:left;padding-top:10px}}
/* ── v2.1 motion, ported from the Anywhere Infusions system ── */
@keyframes bagfloat{0%,100%{transform:translateY(0) rotate(-1.1deg)}50%{transform:translateY(-7px) rotate(1.1deg)}}
@keyframes riseIn{to{opacity:1;transform:none}}
@keyframes kenburns{0%{transform:scale(1)}100%{transform:scale(1.07)}}
@keyframes pagein{to{opacity:1}}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes bgdrift{0%{background-position:0% 0%}100%{background-position:100% 100%}}
@keyframes auraglow{0%,100%{opacity:.30;transform:translateX(-50%) scale(1)}50%{opacity:.46;transform:translateX(-50%) scale(1.06)}}
/* the bags breathe, offset so the grid never marches in step */
.mt-img img,.dbag img{transform-origin:50% 6%;animation:bagfloat 6.4s ease-in-out infinite}
.mgrid .mtile:nth-child(2) .mt-img img{animation-delay:.8s}
.mgrid .mtile:nth-child(3) .mt-img img{animation-delay:1.6s}
.mgrid .mtile:nth-child(4) .mt-img img{animation-delay:.4s}
.mgrid .mtile:nth-child(5) .mt-img img{animation-delay:1.2s}
.dbag img{animation-duration:7.2s}
.mtile:hover .mt-img img{animation-play-state:paused;transform:translateY(-10px) scale(1.04);transition:transform .35s}
.mt-img:before{animation:auraglow 7s ease-in-out infinite}
/* cards and tiles lift */
.mtile{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.mtile:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(28,42,34,.16)}
.card,.tier,.bstrip .bcard,.towns a{transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover,.tier:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(28,42,34,.12)}
.mtile:hover .mt-go{letter-spacing:.26em;color:var(--gold);transition:letter-spacing .3s,color .3s}
/* buttons: a slow sheen sweep, and a real press */
.btn{position:relative;overflow:hidden}
.btn:after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.34),transparent);
transform:skewX(-20deg);transition:left .6s;pointer-events:none}
.btn:hover:after{left:130%}
.btn:active{transform:scale(.97)}
/* nav gains a shadow once you move, page gets a progress hairline */
.nav{transition:box-shadow .3s,background .3s}
.nav.scrolled{box-shadow:0 10px 34px -18px rgba(12,19,15,.45)}
#pgbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:220;
background:linear-gradient(90deg,var(--gold),var(--gold-l));border-radius:0 2px 2px 0}
/* the hero rises in, the hero photo drifts */
/* v12: body-level opacity gate REMOVED. It could strand a visitor on a blank
page and the hero entrance below already does the work. */
body.jsanim .hero h1,body.jsanim .hero .lead,body.jsanim .hero .cta,
body.jsanim .hero .eye,body.jsanim .hero .micro{opacity:0;transform:translateY(16px);
animation:riseIn .8s cubic-bezier(.2,.7,.3,1) forwards}
body.jsanim .hero .lead{animation-delay:.14s}
body.jsanim .hero .cta{animation-delay:.28s}
body.jsanim .hero .micro{animation-delay:.42s}
.hero-img img,.himg img{animation:kenburns 20s ease-in-out infinite alternate}
/* headings draw their own underline when they arrive */
body.jsanim .wrap h2{display:inline-block}
body.jsanim .wrap h2:after{content:"";display:block;height:2px;margin-top:10px;border-radius:2px;
background:linear-gradient(90deg,var(--gold),rgba(212,178,111,0));
transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.3,1) .15s}
body.jsanim .wrap h2.vis:after{transform:scaleX(1)}
/* directional scroll reveal, assigned by shared.js so no markup changes */
.rv.rv-armed{opacity:.001;will-change:transform,opacity;
transition:opacity .85s cubic-bezier(.22,.61,.21,1),transform .95s cubic-bezier(.22,.61,.21,1)}
.rv-armed.rv-l{transform:translateX(-46px) rotate(-1.5deg)}
.rv-armed.rv-r{transform:translateX(46px) rotate(1.5deg)}
.rv-armed.rv-u{transform:translateY(44px)}
.rv-armed.rv-s{transform:scale(1.07)}
.rv-in{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
@media(max-width:880px){.rv-armed.rv-l{transform:translateX(-26px) rotate(-1deg)}
.rv-armed.rv-r{transform:translateX(26px) rotate(1deg)}
.rv-armed.rv-u{transform:translateY(30px)}
.rv-armed.rv-s{transform:scale(1.045)}}
/* the menu page ground drifts, slowly */
.phero.menu{background-image:linear-gradient(140deg,#1C2A22,#25362C,#1C2A22,#25362C);
background-size:300% 300%;animation:bgdrift 28s ease-in-out infinite alternate}
details .ings,details p{animation:fadeup .35s ease}
.chip,.ing,.doses span{transition:transform .25s,border-color .25s,color .25s}
.chip:hover,.ing:hover,.doses span:hover{transform:translateY(-2px);border-color:var(--gold)}
@media(prefers-reduced-motion:reduce){
.mt-img img,.dbag img,.mt-img:before,.hero-img img,.himg img,.phero.menu,body.jsanim,
.qrfeel,.qr-shot img,.thero-pic img,.fshot img,.shot img{animation:none!important}
body.jsanim .hero h1,body.jsanim .hero .lead,body.jsanim .hero .cta,
body.jsanim .hero .eye,body.jsanim .hero .micro{opacity:1!important;transform:none!important;animation:none!important}
.rv{opacity:1!important;transform:none!important;transition:none!important}
body.jsanim .wrap h2:after{transform:scaleX(1)}
.btn:after{display:none}
}
/* ══ v3.0 EDITORIAL LAYER ══ */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .88 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:1240px;padding:0 32px}
h1{font-size:clamp(42px,7vw,86px);line-height:1.02;letter-spacing:-.025em}
h1.xl{font-size:clamp(46px,8vw,104px);letter-spacing:-.032em}
h2{font-size:clamp(31px,4.5vw,58px);line-height:1.08;letter-spacing:-.02em}
h3{font-size:24px;letter-spacing:-.01em}
.lead{font-size:20px;line-height:1.68;max-width:60ch}
.band{padding:128px 0}
.band.tight{padding:88px 0}
.eye{font-size:11px;letter-spacing:.26em}
.eye:before{content:'';display:inline-block;width:26px;height:1px;background:currentColor;
margin-right:13px;vertical-align:middle;opacity:.55}
/* film grain on every dark ground, the thing that stops flat colour looking cheap */
.dark,.deep,.book,.hero,.phero,.lux{position:relative}
.dark:before,.deep:before,.book:before,.hero:before,.phero:before,.lux:before{
content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.5;
pointer-events:none;z-index:1;mix-blend-mode:overlay}
.dark>*,.deep>*,.book>*,.hero>*,.phero>*,.lux>*{position:relative;z-index:2}
/* nav: glass, and it tightens once you move */
.nav{padding:20px 32px;transition:padding .35s cubic-bezier(.2,.7,.3,1),background .35s,box-shadow .35s}
.nav.scrolled{padding:11px 32px;background:rgba(247,244,237,.94)}
.nav .brand .mark{transition:font-size .35s,letter-spacing .35s}
.nav.scrolled .brand .mark{font-size:18px;letter-spacing:.26em}
.links a{position:relative;border-bottom:0}
.links a:after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;
background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.links a:hover:after,.links a.on:after{transform:scaleX(1);transform-origin:left}
/* buttons carry a little weight now */
.btn{border-radius:3px;padding:16px 32px;letter-spacing:.03em}
.btn.gold{background:linear-gradient(135deg,var(--gold-l),var(--gold));color:#18251E;
box-shadow:0 14px 34px -14px rgba(212,178,111,.75)}
.btn.gold:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px rgba(212,178,111,.9)}
.btn.sm{padding:11px 22px}
/* ══ the menu hero ══ */
.lux{overflow:hidden;color:var(--ivory);
background:radial-gradient(122% 145% at 82% -22%,#31493A 0%,#25362C 40%,#131E18 100%)}
.lux h1,.lux h2{color:var(--ivory)}
.lux .lead{color:#BFD0C4}
.lux .eye{color:var(--gold)}
.mhero .wrap{padding-top:136px;padding-bottom:84px;position:relative;z-index:3}
.mhero .lead{margin-top:26px;font-size:21px;max-width:56ch}
.orbs{position:absolute;inset:0;pointer-events:none;z-index:1}
.orbs i{position:absolute;border-radius:50%;filter:blur(34px);opacity:.42;animation:orbfloat 15s ease-in-out infinite}
.orbs i:nth-child(1){width:240px;height:240px;left:-70px;top:10%;background:#4E7A5E}
.orbs i:nth-child(2){width:150px;height:150px;right:14%;top:-46px;background:var(--gold);opacity:.24;animation-delay:2s}
.orbs i:nth-child(3){width:100px;height:100px;left:32%;bottom:6%;background:#8FC9A6;opacity:.2;animation-delay:5s}
.orbs i:nth-child(4){width:70px;height:70px;right:34%;bottom:22%;background:var(--gold-l);opacity:.26;animation-delay:8s}
.orbs i:nth-child(5){width:210px;height:210px;right:-60px;bottom:-70px;background:#1C2A22;opacity:.65;animation-delay:3.5s}
@keyframes orbfloat{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-28px)}}
.dripline{position:absolute;top:0;left:64%;width:1px;height:100%;z-index:2;pointer-events:none;
background:linear-gradient(180deg,rgba(212,178,111,0),rgba(212,178,111,.34) 30%,rgba(212,178,111,0))}
.dripline:after{content:'';position:absolute;left:-4px;width:9px;height:13px;border-radius:50% 50% 60% 60%;
background:radial-gradient(circle at 34% 30%,#F4E8CC,var(--gold));animation:dropfall 4.6s cubic-bezier(.55,0,.85,.55) infinite}
@keyframes dropfall{0%{top:-4%;opacity:0}12%{opacity:1}82%{opacity:1}92%{top:96%;opacity:0}100%{top:96%;opacity:0}}
.lux .cursorglow{position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:1;
background:radial-gradient(circle,rgba(212,178,111,.16),transparent 66%);opacity:0;transition:opacity .5s}
.edgelabel{position:absolute;right:34px;top:50%;transform:translateY(-50%) rotate(90deg);
transform-origin:right center;z-index:3;font:500 10.5px var(--ui);letter-spacing:.34em;
text-transform:uppercase;color:rgba(212,178,111,.62);white-space:nowrap}
.scrollcue{position:absolute;right:76px;bottom:38px;z-index:4;display:flex;align-items:center;gap:12px;
text-decoration:none;font:500 10.5px var(--ui);letter-spacing:.28em;text-transform:uppercase;
color:#9DB3A4;transition:color .3s}
.scrollcue:hover{color:var(--gold-l)}
.scrollcue span{display:block;width:1px;height:44px;background:linear-gradient(180deg,rgba(212,178,111,0),var(--gold));
position:relative;overflow:hidden}
.scrollcue span:after{content:'';position:absolute;left:0;width:1px;height:14px;background:#F4E8CC;
animation:cueslide 2.4s ease-in-out infinite}
@keyframes cueslide{0%{top:-16px}100%{top:46px}}
.mstats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:62px;border-top:1px solid var(--line)}
.mstats div{padding:28px 26px 4px 0}
.mstats b{font-family:var(--dsp);font-weight:400;font-size:clamp(30px,3.4vw,44px);color:var(--gold-l);
display:block;line-height:1;font-variant-numeric:tabular-nums}
.mstats span{display:block;margin-top:12px;font:500 11.5px var(--ui);letter-spacing:.16em;
text-transform:uppercase;color:#9DB3A4}
.hbrail{position:relative;z-index:3;display:flex;justify-content:center;align-items:flex-end;
gap:clamp(10px,3vw,44px);padding:0 32px 54px}
.hb{position:relative;display:block;text-decoration:none;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.hb:before{content:'';position:absolute;left:50%;top:12%;transform:translateX(-50%);
width:190px;height:190px;border-radius:50%;filter:blur(30px);opacity:.5;
background:var(--dc,#7FB2C9);transition:opacity .4s}
.hb img{position:relative;z-index:2;height:clamp(96px,13vw,178px);width:auto;
background:#fff;border-radius:12px;padding:9px 13px;
box-shadow:0 22px 44px rgba(0,0,0,.42);animation:bagfloat 6.6s ease-in-out infinite;transform-origin:50% 6%}
.hb:hover{transform:translateY(-12px)}
.hb:hover:before{opacity:.78}
.hb:nth-child(2) img{animation-delay:.7s}.hb:nth-child(3) img{animation-delay:1.4s}
.hb:nth-child(4) img{animation-delay:2.1s}.hb:nth-child(5) img{animation-delay:2.8s}
.hb.aura-hydrate{--dc:#7FB2C9}.hb.aura-recover{--dc:#C98F5F}.hb.aura-defend{--dc:#8FC98F}
.hb.aura-signature{--dc:#D4B26F}.hb.aura-optimize{--dc:#B57FC9}
/* ══ the editorial infusion rows ══ */
.mflow .lead{margin-top:22px}
.frows{margin-top:44px}
.frow{position:relative;isolation:isolate;display:grid;grid-template-columns:.94fr 1.06fr;gap:clamp(32px,5.5vw,84px);
align-items:center;padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--linel)}
.frow.alt .fbag{order:2}
.frow.aura-hydrate{--dc:#7FB2C9}.frow.aura-recover{--dc:#C98F5F}.frow.aura-defend{--dc:#8FC98F}
.frow.aura-signature{--dc:#D4B26F}.frow.aura-optimize{--dc:#B57FC9}
.fbag{position:relative;display:grid;place-items:center;min-height:clamp(300px,34vw,440px)}
.fbag:before{content:'';position:absolute;width:clamp(260px,30vw,420px);height:clamp(260px,30vw,420px);
border-radius:50%;opacity:.6;background:radial-gradient(circle,var(--dc) 0%,rgba(255,255,255,0) 62%);
animation:auraglow 8.5s ease-in-out infinite;transform:translateX(-50%);left:50%;filter:blur(4px)}
.fbag:after{content:'';position:absolute;bottom:6%;left:50%;transform:translateX(-50%);
width:clamp(150px,17vw,230px);height:22px;border-radius:50%;background:rgba(28,42,34,.2);filter:blur(16px)}
.frow:hover .fbag:before{opacity:.82}
.frow:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.07;
background:radial-gradient(58% 78% at 22% 50%,var(--dc) 0%,transparent 68%)}
.frow.alt:after{background:radial-gradient(58% 78% at 78% 50%,var(--dc) 0%,transparent 68%)}
.fnum{position:absolute;top:2%;left:6%;z-index:0;font-family:var(--dsp);font-weight:400;
font-size:clamp(104px,13vw,178px);line-height:.8;color:transparent;
-webkit-text-stroke:1px rgba(22,33,27,.16);pointer-events:none;user-select:none;letter-spacing:-.03em}
.frow.alt .fnum{left:auto;right:6%}
.fbag img{position:relative;z-index:2;height:clamp(260px,32vw,460px);width:auto;mix-blend-mode:multiply;
filter:drop-shadow(0 34px 44px rgba(28,42,34,.2));transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.frow:hover .fbag img{transform:translateY(-12px) scale(1.03)}
.ftag{font:600 11px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d);margin-bottom:14px}
.frow h2{font-size:clamp(30px,3.7vw,48px)}
.flead{font-size:18.5px;line-height:1.68;color:var(--mut);margin-top:20px;max-width:52ch}
.fings{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.fings span{font:500 12.5px var(--ui);padding:9px 15px;background:#fff;border:1px solid var(--linel);
transition:transform .25s,border-color .25s}
.fings span:hover{transform:translateY(-2px);border-color:var(--gold)}
.fform{margin-top:24px;padding:18px 20px;background:#fff;border-left:2px solid var(--gold);
font-size:15px;line-height:1.62;color:var(--mut);max-width:52ch}
.fform-h{display:block;font:600 10.5px var(--ui);letter-spacing:.2em;text-transform:uppercase;
color:var(--gold-d);margin-bottom:8px}
.fdose{margin-top:18px;font-size:13px;color:var(--mut);letter-spacing:.02em}
.fdose b{color:var(--gold-d);font-weight:500;margin-right:14px;white-space:nowrap}
.ffoot{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-top:36px;padding-top:26px;
border-top:1px solid var(--linel)}
.fpx{font-family:var(--dsp);font-size:clamp(38px,4.6vw,56px);line-height:1;color:var(--ink);
font-variant-numeric:tabular-nums}
.ftime{font-size:13px;color:var(--mut)}
.flink{margin-left:auto;font:600 11.5px var(--ui);letter-spacing:.18em;text-transform:uppercase;
color:var(--gold-d);text-decoration:none;white-space:nowrap}
.flink i{display:inline-block;font-style:normal;transition:transform .3s;margin-left:5px}
.flink:hover{color:var(--gold)}
.flink:hover i{transform:translateX(7px)}
/* ══ boosters, as a single joined index ══ */
.bxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1px;margin-top:58px}
.bx{position:relative;overflow:hidden;background:var(--cream);padding:36px 34px 34px;
text-decoration:none;display:block;transition:color .35s;box-shadow:0 0 0 1px var(--linel)}
.band:not(.cream) .bx{background:#fff}
.band:not(.cream) .bx:after{background:var(--cream)}
.bx:after{content:'';position:absolute;inset:0;background:#fff;transform:translateY(101%);
transition:transform .5s cubic-bezier(.2,.7,.3,1);z-index:0}
.bx:hover:after{transform:none}
.bx>span{position:relative;z-index:2;display:block}
.bx-n{font:600 11px var(--ui);letter-spacing:.22em;color:var(--gold-d)}
.bx-t{font-family:var(--dsp);font-size:26px;line-height:1.2;margin-top:14px;color:var(--ink)}
.bx-f{font-size:15px;line-height:1.6;color:var(--mut);margin-top:12px}
.bx-p{font-family:var(--dsp);font-size:34px;color:var(--gold-d);margin-top:24px;line-height:1}
.bx-go{font:600 11px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d);
margin-top:16px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.bx-go i{font-style:normal;display:inline-block;margin-left:5px}
.bx:hover .bx-go{opacity:1;transform:none}
/* ══ split-line heading reveal ══ */
.ln{display:block;overflow:hidden;padding-bottom:.10em;margin-bottom:-.10em}
.ln>span{display:block;transition:transform .95s cubic-bezier(.19,.8,.24,1)}
.ln.ln-armed>span{transform:translateY(104%)}
.ln.in>span{transform:none}
.ln:nth-child(2)>span{transition-delay:.09s}
.ln:nth-child(3)>span{transition-delay:.18s}
@media(max-width:900px){
.nav>.btn.gold.sm{display:none}
.nav{padding:14px 22px}
.mhero .wrap{padding-top:92px;padding-bottom:56px}
.hbrail{padding:0 22px 44px;gap:8px}
.frow{grid-template-columns:1fr;gap:26px;padding:56px 0}
.frow.alt .fbag{order:0}
.fbag{min-height:280px}
.mstats{grid-template-columns:1fr 1fr}
.mhero .wrap{padding:96px 22px 56px}
.dripline,.edgelabel,.scrollcue{display:none}
.band{padding:84px 0}
.wrap{padding:0 22px}
}
@media(prefers-reduced-motion:reduce){
.orbs i,.dripline:after,.hb img,.fbag:before,.scrollcue span:after{animation:none!important}
.ln>span{transform:none!important;transition:none!important}
.lux .cursorglow{display:none}
}
/* ══ v3.0b POLISH ══ */
::selection{background:rgba(212,178,111,.32);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
html{scrollbar-color:var(--gold-d) transparent;scrollbar-width:thin}
.fpx,.mt-px,.pn,.bx-p,.mstats b,.tier .amt{font-variant-numeric:tabular-nums}
/* every card fills from underneath on hover, the way the booster index does */
.card,.tile,.blink{position:relative;overflow:hidden;isolation:isolate}
.card:before,.blink:before{content:'';position:absolute;inset:0;z-index:-1;background:#fff;
transform:translateY(101%);transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.card:hover:before,.blink:hover:before{transform:none}
.card:after,.blink:after{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:1;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
transform:scaleX(0);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover:after,.blink:hover:after{transform:scaleX(1)}
.dark .card:before,.dark .blink:before{background:rgba(212,178,111,.09)}
/* the town grid lights up cell by cell */
.towns a{position:relative;overflow:hidden;transition:color .3s}
.towns a:before{content:'';position:absolute;inset:0;background:#fff;transform:translateY(101%);
transition:transform .45s cubic-bezier(.2,.7,.3,1);z-index:0}
.towns a:hover:before{transform:none}
.towns a>*{position:relative;z-index:2}
.towns a:hover .go{color:var(--gold-d);letter-spacing:.22em;transition:.3s}
/* accordions: a mark that turns, and a body that unrolls */
.faq details,details{border-bottom:1px solid var(--linel)}
.faq summary,details>summary{cursor:pointer;list-style:none;position:relative;
padding:26px 52px 26px 0;font:400 21px var(--dsp);color:var(--ink);
transition:color .3s,padding-left .3s;display:block}
.faq summary::-webkit-details-marker,details>summary::-webkit-details-marker{display:none}
.faq summary:hover,details>summary:hover{color:var(--gold-d);padding-left:6px}
.faq summary:after,details>summary:after{content:'';position:absolute;right:8px;top:50%;
width:15px;height:1px;margin-top:0;transform:translateY(-50%);
background:var(--gold-d);font-size:0;transition:background .3s}
.faq summary:before,details>summary:before{content:'';position:absolute;right:15px;top:50%;
width:1px;height:15px;transform:translateY(-50%);background:var(--gold-d);
transition:transform .4s cubic-bezier(.2,.7,.3,1),opacity .4s}
.faq details[open] summary:before,details[open]>summary:before{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq details[open] summary,details[open]>summary{color:var(--gold-d)}
.faq p,details>p,details>div{padding:0 0 26px;animation:fadeup .4s ease}
/* framed photography arrives behind a wipe */
.frame,.himg,.hero-img{overflow:hidden}
.mask img{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.19,.8,.24,1)}
.mask.in img{clip-path:inset(0 0 0 0)}
/* the featured membership tier carries its own light */
.tier.feature{position:relative;box-shadow:0 34px 70px -30px rgba(212,178,111,.55)}
.tier.feature:before{content:'';position:absolute;inset:-1px;pointer-events:none;
border:1px solid rgba(212,178,111,.55)}
/* footer */
.foot{border-top:1px solid var(--line)}
.foot a{text-decoration:none;transition:color .25s}
.foot a:hover{color:var(--gold-l)}
.foot h4{font:600 11px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.fbot{border-top:1px solid rgba(212,178,111,.18);margin-top:44px;padding-top:26px}
/* the price bar on a product page gets a soft gold wash */
.pricebar{position:relative;overflow:hidden}
.pricebar:after{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(70% 140% at 8% 50%,rgba(212,178,111,.16),transparent 62%)}
@media(prefers-reduced-motion:reduce){
.mask img{clip-path:none!important;transition:none!important}
.card:before,.blink:before,.towns a:before,.bx:after{transition:none!important}
}
.phero + .band,.hero + .band,.lux + .band{padding-top:96px}
.band + .band{padding-top:104px}
@media(max-width:900px){.phero + .band,.hero + .band,.lux + .band{padding-top:64px}}
/* ══ v3.1 PAGE COMPONENTS ══ */
/* page heroes get the full measure, so a headline sets on one or two lines */
.phero.apage,.phero.tpage{padding:110px 0 96px}
.phero.apage h1,.phero.tpage h1{max-width:17ch;font-size:clamp(40px,6vw,76px)}
.phero.apage .lead,.phero.tpage .lead{max-width:58ch;margin-top:26px;font-size:21px}
.phero.apage .cta,.phero.tpage .cta{margin-top:38px}
.phero.sm h1{font-size:clamp(34px,4.4vw,56px);max-width:18ch}
/* the credential and town stat rails */
.acreds,.tstats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px;
border-top:1px solid var(--line);gap:0}
.acreds div,.tstats div{padding:28px 26px 4px 0}
.acreds b,.tstats b{display:block;font-family:var(--dsp);font-weight:400;line-height:1.05;
font-size:clamp(22px,2.4vw,32px);color:var(--gold-l);font-variant-numeric:tabular-nums}
.acreds span,.tstats span{display:block;margin-top:12px;font:500 11.5px var(--ui);
letter-spacing:.16em;text-transform:uppercase;color:#9DB3A4}
/* ── booster pages ── */
.compound{font:500 13px var(--ui);letter-spacing:.16em;text-transform:uppercase;
color:var(--gold-l);margin-top:14px}
.bpage .dhead{align-items:stretch}
.ccard{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
min-height:400px;padding:40px 36px;border:1px solid rgba(212,178,111,.28);border-radius:4px;
background:radial-gradient(120% 90% at 78% 6%,var(--dc,#D4B26F) 0%,rgba(19,30,24,0) 62%),#131E18}
.ccard:before{content:'';position:absolute;top:-90px;right:-90px;width:300px;height:300px;
border-radius:50%;border:1px solid rgba(247,244,237,.14)}
.ccard:after{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;
border-radius:50%;border:1px solid rgba(247,244,237,.1)}
.ccard>span{position:relative;z-index:2;display:block}
.cc-eye{font:600 10.5px var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.cc-name{font-family:var(--dsp);font-size:clamp(24px,2.5vw,34px);line-height:1.18;color:var(--ivory);margin-top:14px}
.cc-px{font-family:var(--dsp);font-size:46px;color:var(--gold-l);margin-top:26px;line-height:1;
font-variant-numeric:tabular-nums}
.cc-foot{font:500 11px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:#9DB3A4;margin-top:12px}
/* focus cards, topic cards */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;margin-top:46px}
.fcard{position:relative;overflow:hidden;background:#fff;padding:32px 28px 30px;isolation:isolate;
box-shadow:0 0 0 1px var(--linel)}
.fcard:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--cream);
transform:translateY(101%);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.fcard:hover:before{transform:none}
.cream .fcard{background:#fff}
.cream .fcard:before{background:var(--ivory)}
.fc-n{display:block;font:600 11px var(--ui);letter-spacing:.22em;color:var(--gold-d)}
.fcard h3{font-size:21px;margin-top:14px}
.fcard p{font-size:15.5px;line-height:1.62;color:var(--mut);margin-top:12px}
.fcard h3 + p{margin-top:10px}
/* how it is given */
.wc-n{display:block;font:600 11px var(--ui);letter-spacing:.22em;color:var(--gold-d)}
/* safety cards */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1px;margin-top:48px}
.scard{position:relative;overflow:hidden;background:#fff;padding:34px 32px 32px;isolation:isolate;
box-shadow:0 0 0 1px var(--linel)}
.scard:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold);
transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.scard:hover:before{transform:none}
.sc-n{display:block;font:600 11px var(--ui);letter-spacing:.22em;color:var(--gold-d)}
.scard h3{font-size:22px;margin-top:14px}
.scard p{font-size:15.5px;line-height:1.62;color:var(--mut);margin-top:12px}
/* the ten standards and the FAQ groups -- Website edits 1.pdf, 2026-08-31.
The standards are longer than the six cards they replace (three paragraphs
and a closing line, not one sentence), so the grid takes a wider minimum and
the card takes more air. The closing line gets its own rule above it: in his
document those lines sit alone on a line, and they read as the point of the
item rather than the last sentence of it. */
.stdgrid{grid-template-columns:repeat(auto-fill,minmax(370px,1fr))}
.fpeye{margin-bottom:34px}
.scard.std{padding:38px 34px 34px;display:flex;flex-direction:column}
.scard.std h3{font-size:21px;line-height:1.32}
.sc-k{margin-top:auto;padding-top:18px;font-family:var(--dsp);font-size:17px;line-height:1.45;
color:var(--gold-d)}
.scard.std .sc-k:before{content:'';display:block;width:26px;height:1px;background:var(--gold);
margin-bottom:16px}
/* what we don't do: five refusals, on the deep ground, borders drawn on the
ink rather than with --linel, which is a light-ground token and disappears */
.dontlist{list-style:none;margin-top:44px;max-width:76ch;border-top:1px solid rgba(255,255,255,.14)}
.dontlist li{position:relative;padding:22px 0 22px 46px;font-size:17.5px;line-height:1.6;
border-bottom:1px solid rgba(255,255,255,.14)}
.dontlist li:before{content:'';position:absolute;left:6px;top:33px;width:20px;height:1px;
background:var(--gold)}
.fqnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.fqnav a{font:600 11px var(--ui);letter-spacing:.16em;text-transform:uppercase;
padding:10px 17px;border:1px solid rgba(255,255,255,.22);border-radius:999px;
transition:border-color .3s,color .3s}
.fqnav a:hover{border-color:var(--gold);color:var(--gold-d)}
.fqgroup + .fqgroup{margin-top:66px}
.fqh{font-size:26px;padding-bottom:16px;border-bottom:1px solid var(--gold);color:var(--gold-d)}
.fqgroup .faq{margin-top:0;border-top:0}
.fqlist{list-style:none;margin:4px 0 26px;columns:2;column-gap:38px}
.fqlist li{position:relative;padding:7px 0 7px 20px;color:var(--mut);font-size:16px;
break-inside:avoid}
.fqlist li:before{content:'';position:absolute;left:2px;top:17px;width:9px;height:1px;
background:var(--gold)}
@media(max-width:760px){.fqlist{columns:1}.dontlist li{padding-left:34px}
.dontlist li:before{left:2px;width:14px}}
/* service area, grouped */
.agrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:44px;margin-top:52px}
.acol h3{font-size:20px;padding-bottom:14px;border-bottom:1px solid var(--gold);
color:var(--gold-d);margin-bottom:2px}
.acol .towns{grid-template-columns:1fr;border:0}
.acol .towns a{border-left:0;border-right:0}
/* about: pull quote and two column prose */
.pull{margin:0 auto;max-width:22ch;font-family:var(--dsp);font-weight:400;
font-size:clamp(30px,4vw,52px);line-height:1.14;color:var(--gold-l);letter-spacing:-.015em}
.pcols{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.pcols .prose p{margin-bottom:20px}
/* the honest empty shelf */
.emptyshelf{max-width:760px;padding:56px 52px;border:1px solid var(--linel);background:#fff;
position:relative;overflow:hidden}
.emptyshelf:before{content:'';position:absolute;top:-70px;right:-70px;width:260px;height:260px;
border-radius:50%;background:radial-gradient(circle,rgba(212,178,111,.3),transparent 66%)}
.emptyshelf>*{position:relative;z-index:2}
.es-eye{display:block;font:600 11px var(--ui);letter-spacing:.24em;text-transform:uppercase;
color:var(--gold-d);margin-bottom:16px}
.emptyshelf h2{font-size:clamp(27px,3.2vw,40px)}
.emptyshelf .lead{margin-top:18px}
@media(max-width:900px){
.acreds,.tstats{grid-template-columns:1fr 1fr}
.pcols{grid-template-columns:1fr;gap:0}
.ccard{min-height:280px;padding:30px 26px}
.phero.apage,.phero.tpage{padding:80px 0 64px}
.emptyshelf{padding:36px 26px}
}
/* ══ v4.0 HOME ══ */
.hero.lux{background:radial-gradient(122% 145% at 80% -22%,#31493A 0%,#25362C 40%,#131E18 100%)}
.hero.lux .shot{opacity:.62}
.hero.lux .shot:after{background:linear-gradient(90deg,var(--forest) 0%,rgba(28,42,34,.94) 30%,rgba(28,42,34,.58) 66%,rgba(28,42,34,.3) 100%)}
.hero .wrap{padding-top:124px;padding-bottom:104px}
.hero .in{max-width:720px}
.hero h1{max-width:15ch}
/* the credential card takes the seat his review card sits in */
.credcard{margin:34px 0 0;max-width:520px;padding:22px 26px 18px;border-radius:4px;
background:rgba(247,244,237,.96);box-shadow:0 30px 70px rgba(0,0,0,.42);color:var(--ink)}
.credcard b{display:block;font:600 11px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d)}
.credcard p{margin:10px 0 8px;font-size:15.5px;line-height:1.58;color:var(--ink)}
.credcard figcaption{font-size:12.5px;color:var(--mut)}
.hero .trust{margin-top:38px}
/* the curve that hands the dark hero to the page */
.goldcurve{line-height:0;overflow:hidden;background:var(--ivory)}
.goldcurve svg{display:block;width:100%;height:74px}
/* creed band, with four bags drifting behind it */
.creedband{position:relative;overflow:hidden;text-align:center}
.creedband .wrap{max-width:900px;position:relative;z-index:2}
.creed{margin:30px auto 6px;max-width:56ch;text-align:left}
.creed p{font-family:var(--dsp);font-size:clamp(18px,1.7vw,23px);line-height:1.46;color:var(--ink);
margin:0;padding:20px 0;border-bottom:1px solid var(--linel)}
.creed p:last-child{border-bottom:0}
.creed b{color:var(--gold-d);font-weight:400}
.creedlink{display:inline-block;margin-top:12px;font:600 11.5px var(--ui);letter-spacing:.18em;
text-transform:uppercase;color:var(--gold-d);text-decoration:none}
.creedlink i{font-style:normal;display:inline-block;margin-left:6px;transition:transform .3s}
.creedlink:hover i{transform:translateX(7px)}
.cbag{position:absolute;width:140px;height:auto;z-index:0;pointer-events:none;opacity:.9;
mix-blend-mode:multiply;filter:drop-shadow(0 20px 26px rgba(28,42,34,.16));animation:bagfloat 8s ease-in-out infinite}
.cbag1{left:4%;top:52px;transform:rotate(-10deg)}
.cbag2{right:4%;top:74px;transform:rotate(9deg);animation-delay:1.2s}
.cbag3{left:8%;bottom:44px;transform:rotate(6deg);width:114px;animation-delay:2.4s}
.cbag4{right:9%;bottom:34px;transform:rotate(-7deg);width:118px;animation-delay:3.6s}
@media(max-width:1180px){.cbag{display:none}}
/* the four step rail */
.storyband{padding:112px 0 0;background:var(--cream)}
.storyhead{margin-bottom:52px}
.storyrail{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--deep)}
.sframe{position:relative;margin:0;overflow:hidden;aspect-ratio:3/4;background:var(--forest)}
.sframe img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.sframe:hover img{transform:scale(1.06)}
.sframe figcaption{position:absolute;inset:auto 0 0 0;padding:64px 24px 22px;color:var(--ivory);
background:linear-gradient(to top,rgba(12,19,15,.94) 28%,rgba(12,19,15,0))}
.sframe figcaption b{display:block;font-family:var(--dsp);font-weight:400;color:var(--gold);
font-size:15px;letter-spacing:.16em}
.sframe figcaption span{display:block;font-family:var(--dsp);font-size:21px;margin:6px 0 4px}
.sframe figcaption p{font-size:13.5px;line-height:1.5;color:#C6D5CB}
/* the two feel cells */
.feelduo{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--deep)}
.fcell{position:relative;display:block;overflow:hidden;height:clamp(360px,42vw,520px);text-decoration:none}
.fcell img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.fcell:hover img{transform:scale(1.05)}
.fcell:after{content:'';position:absolute;inset:0;
background:linear-gradient(to top,rgba(12,19,15,.9) 6%,rgba(12,19,15,.14) 58%)}
.fcap{position:absolute;left:38px;right:38px;bottom:34px;z-index:2;color:var(--ivory)}
.fcap i{display:block;font-style:normal;font:600 11.5px var(--ui);letter-spacing:.2em;
text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.fcap strong{display:block;font-family:var(--dsp);font-weight:400;line-height:1.06;
font-size:clamp(27px,3.1vw,42px)}
.fcap em{display:inline-block;font-style:normal;margin-top:14px;font-size:14px;color:var(--gold-l);
border-bottom:1px solid var(--gold);padding-bottom:3px}
.fcell:hover .fcap em{color:#F4E8CC}
.duobar{grid-column:1/-1;background:var(--deep);color:var(--ivory);display:flex;flex-wrap:wrap;
align-items:center;justify-content:center;gap:16px 30px;padding:30px 24px;text-align:center}
.duobar p{margin:0;font-size:17px;color:#C6D5CB;max-width:52ch}
.duobar .btn.ghost{border-color:rgba(247,244,237,.36);color:var(--ivory)}
.duobar .btn.ghost:hover{border-color:var(--gold);color:var(--gold-l)}
.duobar b{color:var(--gold-l)}
/* the match quiz */
.quizband{position:relative;overflow:hidden;padding:120px 0 104px;color:var(--ivory);
background:radial-gradient(130% 120% at 50% -12%,#31493A 0%,#16221B 72%)}
.quizband:before{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.5;
pointer-events:none;mix-blend-mode:overlay;z-index:1}
.quizband .wrap{position:relative;z-index:2;text-align:center}
.quizband h2{color:var(--ivory)}
.quizband .eye{color:var(--gold)}
.quizband .lead{color:#BFD0C4;margin-left:auto;margin-right:auto}
.quizband .wrap h2:after{margin-left:auto;margin-right:auto}
.qopts{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin:44px 0 0}
.qopt{appearance:none;cursor:pointer;border:1px solid rgba(247,244,237,.2);border-radius:4px;
background:rgba(247,244,237,.05);padding:20px 12px 16px;backdrop-filter:blur(4px);
transition:transform .28s,border-color .28s,background .28s}
.qopt img.legacy-unused{width:58px;height:auto;display:block;margin:0 auto 12px;border-radius:6px;
background:#fff;padding:5px 7px}
.qopt span{display:block;font:600 12.5px/1.35 var(--ui);color:#D6E2DA;letter-spacing:.02em}
.qopt:hover{transform:translateY(-5px);border-color:var(--gold)}
.qopt.picked{background:rgba(212,178,111,.16);border-color:var(--gold)}
.qopt.picked span{color:#F4E8CC}
.qresult{display:flex;gap:30px;align-items:center;text-align:left;background:#fff;color:var(--ink);
border-radius:4px;padding:28px 34px;margin-top:34px;box-shadow:0 34px 80px rgba(0,0,0,.5)}
.qresult[hidden]{display:none!important}
.qrimg{width:112px;height:auto;flex:0 0 auto;mix-blend-mode:multiply}
.qrbody{flex:1}
.qh{display:block;font-family:var(--dsp);font-size:28px;line-height:1.15}
.qrline{font-size:15.5px;line-height:1.6;color:var(--mut);margin-top:8px}
.qrprice{display:block;font-family:var(--dsp);font-size:34px;color:var(--gold-d);margin-top:14px;
font-variant-numeric:tabular-nums}
.qresult .cta{margin-top:18px}
/* founder quote */
.quoteband .pull{max-width:24ch}
/* the sticky book bar, mobile only */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;align-items:center;
justify-content:center;padding:11px 14px calc(11px + env(safe-area-inset-bottom));
background:rgba(19,30,24,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);
transform:translateY(112%);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.sticky.show{transform:none}
.sticky .btn{padding:13px 20px;font-size:14px;flex:1;text-align:center;max-width:220px}
.sticky .btn.ghost{color:#EFF4F0;border-color:rgba(247,244,237,.42)}
@media(max-width:1020px){
.qopts{grid-template-columns:repeat(3,1fr)}
.storyrail{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
.sticky{display:flex}
body{padding-bottom:0}
.feelduo{grid-template-columns:1fr}
.fcell{height:340px}
.fcap{left:24px;right:24px;bottom:26px}
.storyband{padding-top:78px}
.quizband{padding:88px 0 96px}
.qopts{grid-template-columns:1fr 1fr;gap:10px}
.qopt{padding:16px 10px 13px}
.qresult{flex-direction:column;text-align:center;padding:24px 22px;gap:16px}
.qresult .cta{justify-content:center}
.credcard{max-width:100%;padding:18px 20px 16px}
.goldcurve svg{height:40px}
.hero .wrap{padding-top:84px;padding-bottom:72px}
}
@media(prefers-reduced-motion:reduce){.cbag,.qpbags img{animation:none!important}}
/* ══ v4.0 MOBILE ══ */
@media(max-width:760px){
/* the menu row: bag, then the words, then the price on its own line */
.row{display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;
column-gap:16px;row-gap:6px;padding:28px 0;align-items:start}
.row .ix{display:none!important}
.rbag{grid-column:1;grid-row:1/span 2;padding-top:4px}
.rbag{height:70px}
.rbag .rb-bag{height:58px}
.row>div:not(.ix):not(.rbag):not(.px){grid-column:2;grid-row:1;min-width:0}
.row .desc{max-width:none;font-size:15px}
.row .tag{font-size:9.5px;letter-spacing:.13em}
.row h3{font-size:20px}
.row .px{grid-column:1/-1!important;grid-row:3;text-align:left!important;padding-top:10px;
display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.row .px b{font-family:var(--dsp);font-size:26px;color:var(--ink)}
.dark .row .px b{color:var(--gold-l)}
.row .px span{font-size:12px;color:var(--mut)}
}
@media(max-width:900px){
/* the hero photograph should not vanish on a phone, it should sit behind it */
.hero .shot{display:block;position:absolute;inset:0;width:100%;z-index:1;opacity:.5}
.hero .shot img{height:100%;object-fit:cover}
.hero .shot:after{background:linear-gradient(180deg,rgba(28,42,34,.72) 0%,rgba(28,42,34,.86) 46%,var(--forest) 100%)}
.hero .in{max-width:none}
.hero h1{max-width:none}
/* type and tracking that survive a 390px column */
.eye{font-size:10.5px;letter-spacing:.18em}
.eye:before{width:18px;margin-right:10px}
.lead{font-size:17.5px;line-height:1.62}
.phero.apage .lead,.phero.tpage .lead,.mhero .lead{font-size:18px}
.crumb{margin-bottom:24px;font-size:11.5px;line-height:1.9}
/* nothing should sit under the sticky book bar */
body{padding-bottom:76px}
.foot{padding-bottom:20px}
/* comfortable taps */
.btn{padding:15px 24px}
.btn.sm{padding:12px 18px}
.links a,.drawer a,.towns a,.bstrip .bcard,.qopt{min-height:44px}
.drawer a{padding:14px 0}
/* grids that were still trying to be desktop */
.bstrip{grid-template-columns:1fr}
.towns{grid-template-columns:1fr 1fr}
.agrid{gap:30px}
.sgrid,.bxgrid,.fgrid,.mgrid{grid-template-columns:1fr;gap:14px}
.cta{gap:10px}
.cta .btn{flex:1 1 auto;text-align:center}
/* the editorial menu rows */
.frow{padding:44px 0}
.fbag{min-height:250px}
.fbag img{height:250px}
.fnum{font-size:96px;top:0;left:0}
.frow.alt .fnum{right:0;left:auto}
.ffoot{gap:14px}
.fpx{font-size:38px}
.flink{margin-left:0;width:100%}
/* product and booster heroes */
.dhead{gap:32px}
.pricebar{padding:20px;gap:16px}
.pricebar>div{min-width:0}
.pn{font-size:34px}
.doses{gap:8px}
.doses span{font-size:12px;padding:8px 12px}
/* stat rails read better as two rows of two */
.mstats div,.acreds div,.tstats div{padding:20px 16px 4px 0}
.trust{gap:18px 22px;margin-top:30px;padding-top:20px}
.trust div{flex:1 1 40%}
/* the story rail and the four steps */
.sframe figcaption{padding:48px 16px 16px}
.sframe figcaption span{font-size:18px}
.sframe figcaption p{display:none}
.steps .st{padding:22px 0}
/* the founder quote */
.pull{font-size:clamp(24px,7vw,34px);max-width:none}
.quoteband .pull{max-width:none}
/* tables of prices should never push the page sideways */
.bstrip .bcard{padding:16px 18px}
}
@media(max-width:900px){
/* on a phone the nav is solid. backdrop-filter is dropped here: it costs
compositing work on mobile and the blurred backdrop is not worth the risk
of the page reading through the bar. */
.nav,.nav.scrolled{background:var(--ivory);backdrop-filter:none;-webkit-backdrop-filter:none;
box-shadow:0 8px 24px -18px rgba(12,19,15,.5)}
.nav.dk,.nav.dk.scrolled{background:var(--forest)}
.sticky{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--deep)}
.drawer{background:var(--ivory);box-shadow:0 20px 40px -24px rgba(12,19,15,.45)}
}
@media(max-width:420px){
.wrap{padding:0 18px}
h1{font-size:clamp(32px,9.4vw,40px)}
h1.xl{font-size:clamp(34px,10vw,44px)}
h2{font-size:clamp(25px,7.4vw,33px)}
.lead{font-size:16.5px}
.cta{flex-direction:column;align-items:stretch}
.cta .btn{width:100%}
.sticky .btn{padding:13px 14px;font-size:13.5px}
.mstats,.acreds,.tstats{grid-template-columns:1fr 1fr}
.fcap{left:18px;right:18px;bottom:22px}
.duobar{padding:24px 18px}
.emptyshelf{padding:30px 20px}
.qresult{padding:20px 16px}
.qrimg{width:88px}
}
/* ══ v4.1 ══ */
/* the quiz becomes two columns: chips left, the answer pinned right */
.qsplit{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,5vw,68px);
align-items:start;text-align:left}
.quizband .wrap{text-align:left}
.quizband .qleft .lead{margin-left:0;margin-right:0;max-width:46ch}
.quizband .wrap h2:after{margin-left:0}
.qopts{grid-template-columns:1fr 1fr;gap:12px;margin-top:36px}
.qopt{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px}
.qopt span{text-align:left}
.qright{position:sticky;top:104px;align-self:center}
.qprompt{background:rgba(247,244,237,.06);border:1px dashed rgba(247,244,237,.24);
border-radius:4px;padding:38px 34px}
.qp-eye{display:block;font:600 10.5px var(--ui);letter-spacing:.24em;text-transform:uppercase;
color:var(--gold);margin-bottom:14px}
.qprompt p{font-size:16px;line-height:1.66;color:#BFD0C4;margin-bottom:26px}
.qpbags{display:flex;gap:8px;align-items:flex-end;margin-bottom:12px}
.qpbags img{height:74px;width:auto;background:#fff;border-radius:6px;padding:5px 7px;opacity:.9;
animation:bagfloat 7s ease-in-out infinite;transform-origin:50% 6%}
.qpbags>*:nth-child(2) img{animation-delay:.7s}.qpbags>*:nth-child(3) img{animation-delay:1.4s}
.qpbags>*:nth-child(4) img{animation-delay:2.1s}.qpbags>*:nth-child(5) img{animation-delay:2.8s}
.qp-foot{display:block;font:500 11px var(--ui);letter-spacing:.18em;text-transform:uppercase;
color:#9DB3A4;margin-bottom:24px}
.qprompt .btn.ghost{border-color:rgba(247,244,237,.34);color:var(--ivory)}
.qresult{display:block;text-align:left;padding:30px 34px 32px;margin-top:0}
.qresult .qp-eye{color:var(--gold-d)}
.qresult .qrimg{width:96px;float:right;margin:0 0 12px 20px}
.qresult .cta{margin-top:20px}
.qresult .cta .btn{font-size:14px;padding:14px 22px}
/* the creed band is one oversized bag cropped by the edge, not four small ones */
.creedband{overflow:hidden;text-align:left}
.creedband .wrap{max-width:1240px}
.creedsplit{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,5vw,72px);align-items:center}
.creedbag{position:relative;display:grid;place-items:center;min-height:clamp(340px,40vw,540px)}
.creedbag:before{content:'';position:absolute;left:44%;top:50%;transform:translate(-50%,-50%);
width:clamp(320px,34vw,520px);height:clamp(320px,34vw,520px);border-radius:50%;
background:radial-gradient(circle,#D4B26F 0%,rgba(212,178,111,0) 64%);opacity:.5;
animation:auraglow 9s ease-in-out infinite}
.creedbag img{position:relative;z-index:2;width:auto;height:clamp(330px,40vw,560px);
margin-left:-14%;mix-blend-mode:multiply;filter:drop-shadow(0 40px 50px rgba(28,42,34,.22))}
.creedcopy .creed{margin:28px 0 6px;max-width:56ch;text-align:left}
.creedcopy .note{margin-top:26px;max-width:64ch}
.creedband .creedlink{margin-top:16px}
/* the four steps: a vertical gold thread, alternating sides */
.timeband .wrap{max-width:1080px}
.timeline{list-style:none;margin:64px 0 0;padding:0;position:relative}
.timeline:before{content:'';position:absolute;left:50%;top:6px;bottom:6px;width:1px;
background:linear-gradient(180deg,rgba(212,178,111,0),var(--gold) 12%,var(--gold) 88%,rgba(212,178,111,0))}
.tstep{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;align-items:start;
gap:0;padding:30px 0}
.tnum{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:2;width:56px;height:56px;
border-radius:50%;display:grid;place-items:center;background:var(--cream);
border:1px solid var(--gold);font-family:var(--dsp);font-size:16px;color:var(--gold-d)}
.tcard{grid-column:1;grid-row:1;text-align:right;padding:6px 34px 0 0}
.tshot{grid-column:3;grid-row:1;padding-left:34px}
.tnum{margin-top:2px}
.tstep:nth-child(even) .tcard{grid-column:3;grid-row:1;text-align:left;padding:6px 0 0 34px}
.tstep:nth-child(even) .tshot{grid-column:1;grid-row:1;padding-left:0;padding-right:34px}
.tcard h3{font-size:26px}
.tcard p{font-size:16px;line-height:1.66;color:var(--mut);margin-top:10px}
.tshot img{width:100%;height:220px;object-fit:cover;display:block;
transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.tshot{overflow:hidden}
.tstep:hover .tshot img{transform:scale(1.05)}
/* two feel cells become an asymmetric trio */
.feeltrio{display:grid;grid-template-columns:1.32fr 1fr;grid-template-rows:auto auto;gap:2px;
background:var(--deep)}
.feeltrio .fcell{position:relative;display:block;overflow:hidden;text-decoration:none}
.feeltrio .fcell.big{grid-row:1/3;height:clamp(430px,52vw,660px)}
.feeltrio .fcell:not(.big){height:clamp(212px,26vw,329px)}
.feeltrio .fcell img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.feeltrio .fcell:hover img{transform:scale(1.05)}
.feeltrio .fcell:after{content:'';position:absolute;inset:0;
background:linear-gradient(to top,rgba(12,19,15,.9) 6%,rgba(12,19,15,.14) 58%)}
.feeltrio .duobar{grid-column:1/-1}
.feeltrio .fcell:not(.big) .fcap strong{font-size:clamp(22px,2.2vw,30px)}
@media(max-width:1020px){
.qsplit{grid-template-columns:1fr;gap:34px}
.qright{position:static}
.creedsplit{grid-template-columns:1fr;gap:24px}
.creedbag{min-height:300px;order:2}
.creedbag img{margin-left:0;height:300px}
.creedbag:before{left:50%;width:300px;height:300px}
.feeltrio{grid-template-columns:1fr}
.feeltrio .fcell.big{grid-row:auto;height:360px}
.feeltrio .fcell:not(.big){height:300px}
}
@media(max-width:760px){
.timeline:before{left:26px}
.tstep{grid-template-columns:52px 1fr;gap:16px;padding:22px 0}
.tnum{grid-column:1;grid-row:1;width:52px;height:52px;justify-self:start}
.tcard,.tstep:nth-child(even) .tcard{grid-column:2;grid-row:1;text-align:left;padding:0}
.tshot,.tstep:nth-child(even) .tshot{grid-column:2;grid-row:2;padding:14px 0 0}
.tshot img{height:180px}
.qopts{grid-template-columns:1fr;gap:10px}
.qopt{padding:13px 14px}
.qresult .qrimg{float:none;display:block;margin:0 auto 14px;width:110px}
.qresult{text-align:center}
.qresult .cta{justify-content:center}
.qprompt{padding:28px 22px}
}
/* ══ v5.0 THE IVDOC LAYOUT ══ */
/* the hero: one centred column on a flat ground, no photograph behind it */
.hero.flat{background:radial-gradient(130% 130% at 50% -20%,#31493A 0%,#25362C 42%,#131E18 100%);
text-align:center;overflow:hidden}
.hero.flat .wrap{position:relative;z-index:3;padding-top:128px;padding-bottom:56px;max-width:1000px}
.hero.flat h1{max-width:none;margin:0 auto;color:var(--ivory);font-size:clamp(34px,4.7vw,64px);text-wrap:pretty}
.hero.flat .lead{margin:26px auto 0;max-width:60ch;color:#BFD0C4;text-align:center}
.hero.flat .cta{justify-content:center;margin-top:36px}
.heroline{margin-top:40px;font:500 11.5px var(--ui);letter-spacing:.18em;text-transform:uppercase;
color:#8FA697;line-height:2}
.hero.flat .hbrail{position:relative;z-index:3;padding:26px 32px 62px;gap:clamp(8px,2.6vw,38px);
align-items:flex-end}
.hero.flat .hb{text-align:center}
.hero.flat .hb span{display:block;margin-top:14px;font:600 10.5px var(--ui);letter-spacing:.18em;
text-transform:uppercase;color:#9DB3A4;transition:color .3s}
.hero.flat .hb:hover span{color:var(--gold-l)}
.hero.flat .hb img{height:clamp(84px,11vw,150px)}
/* three service cards, theivdoc's category row */
.wc-n{display:block;font:600 11px var(--ui);letter-spacing:.22em;color:var(--gold-d)}
.wc-go{display:block;margin-top:26px;font:600 11px var(--ui);letter-spacing:.18em;
text-transform:uppercase;color:var(--gold-d)}
.wc-go i{font-style:normal;display:inline-block;margin-left:6px;transition:transform .3s}
/* the recurring Book Now strip, the thing theivdoc does between every section */
.ctastrip{background:var(--forest);color:var(--ivory);padding:34px 0;position:relative}
.ctastrip:before{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.45;
pointer-events:none;mix-blend-mode:overlay}
.ctastrip.alt{background:var(--deep)}
.ctastrip .wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
gap:24px 34px;flex-wrap:wrap}
.ctastrip p{margin:0;font-family:var(--dsp);font-size:clamp(19px,2.1vw,27px);line-height:1.3;
color:var(--ivory);max-width:44ch}
.ctastrip .cta{margin:0;flex-wrap:nowrap}
.ctastrip .btn.ghost{border-color:rgba(247,244,237,.36);color:var(--ivory)}
.ctastrip .btn.ghost:hover{border-color:var(--gold);color:var(--gold-l)}
/* how to book: a plain numbered list, no photographs */
.howlist{list-style:none;margin:52px 0 0;padding:0;max-width:860px;
border-top:1px solid var(--linel)}
.howstep{display:grid;grid-template-columns:112px 1fr;gap:28px;align-items:start;
padding:32px 0;border-bottom:1px solid var(--linel)}
.hs-n{font-family:var(--dsp);font-weight:400;font-size:clamp(38px,4.4vw,58px);line-height:.9;
color:transparent;-webkit-text-stroke:1px var(--gold-d)}
.howstep h3{font-size:25px}
.howstep p{font-size:16.5px;line-height:1.68;color:var(--mut);margin-top:10px;max-width:58ch}
.howstep:hover .hs-n{color:var(--gold);-webkit-text-stroke-color:var(--gold);transition:color .4s}
.howband .cta{margin-top:44px}
@media(max-width:1020px){
.ways{grid-template-columns:1fr}
}
@media(max-width:820px){
.hero.flat .wrap{padding-top:88px;padding-bottom:34px}
.heroline{margin-top:28px;font-size:10.5px;letter-spacing:.14em;line-height:2.1}
.hero.flat .hbrail{padding:14px 18px 44px;gap:6px}
.hero.flat .hb img{height:74px}
.hero.flat .hb span{margin-top:9px;font-size:9px;letter-spacing:.1em}
.ctastrip{padding:28px 0}
.ctastrip .wrap{flex-direction:column;align-items:flex-start}
.ctastrip .cta{width:100%;flex-wrap:wrap}
.howstep{grid-template-columns:72px 1fr;gap:18px;padding:26px 0}
}
@media(max-width:480px){
/* five labels under five bags do not fit a 390px column, and the lineup
reads perfectly well without them */
.hero.flat .hb span{display:none}
.hero.flat .hbrail{padding-bottom:34px;gap:5px}
.hero.flat .hb img{height:66px;padding:6px 8px}
}
/* ══ v5.1 ══ */
/* full bleed photograph hero, copy centred over it */
.hero.shotfull{text-align:center;background:var(--deep);overflow:hidden;position:relative}
.hero.shotfull .shot{position:absolute;inset:0;width:100%;z-index:1}
.hero.shotfull .shot img{width:100%;height:100%;object-fit:cover;opacity:.9}
.hero.shotfull .shot:after{content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(12,19,15,.86) 0%,rgba(19,30,24,.7) 38%,rgba(19,30,24,.82) 72%,rgba(12,19,15,.94) 100%)}
.hero.shotfull .wrap{position:relative;z-index:3;max-width:1000px;
padding-top:clamp(96px,13vw,168px);padding-bottom:clamp(84px,11vw,150px)}
.hero.shotfull h1{max-width:none;margin:0 auto;color:var(--ivory);
font-size:clamp(40px,6.4vw,88px);line-height:1.02;text-shadow:0 4px 40px rgba(0,0,0,.4)}
.hero.shotfull .lead{margin:28px auto 0;max-width:58ch;color:#D2DED6;text-align:center;font-size:19.5px}
.hero.shotfull .cta{justify-content:center;margin-top:38px}
.hero.shotfull .eye{color:var(--gold-l)}
.hero.shotfull .heroline{margin-top:44px;font:500 11px var(--ui);letter-spacing:.2em;
text-transform:uppercase;color:#A5BAAC}
/* who is doing this */
.ovband .lead + .lead{margin-top:18px}
.ovcard{margin-top:28px;padding:22px 26px;border-left:2px solid var(--gold);background:#fff}
.ov-eye{display:block;font:600 10.5px var(--ui);letter-spacing:.22em;text-transform:uppercase;
color:var(--gold-d);margin-bottom:10px}
.ovcard b{font-family:var(--dsp);font-weight:400;font-size:23px;display:block}
.ovcard p{font-size:15.5px;color:var(--mut);margin-top:6px}
.ovband .cta{margin-top:32px}
/* the founder story */
.storyband2 .lead + .lead{margin-top:18px}
.ul.tight{margin-top:26px}
.ul.tight li{margin-bottom:9px;font-size:15.5px}
.sig{margin-top:24px;font:500 12.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;
color:var(--gold-d)}
/* the how list now carries a photograph per step */
.howlist{max-width:none}
.howstep{grid-template-columns:96px minmax(0,1fr) 300px;gap:30px;align-items:center}
.hs-body{min-width:0}
.hs-shot{overflow:hidden}
.hs-shot img{width:100%;height:180px;object-fit:cover;display:block;
transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.howstep:hover .hs-shot img{transform:scale(1.06)}
@media(max-width:1020px){
.howstep{grid-template-columns:80px minmax(0,1fr) 220px;gap:22px}
.hs-shot img{height:150px}
}
@media(max-width:820px){
.howstep{grid-template-columns:64px minmax(0,1fr);gap:16px;padding:26px 0}
.hs-body{grid-column:2}
.hs-shot{grid-column:1/-1;margin-top:14px}
.hs-shot img{height:190px}
.hero.shotfull .lead{font-size:17.5px}
.hero.shotfull .heroline{margin-top:30px;font-size:10px;letter-spacing:.14em;line-height:2}
}
/* ══ v6.0 ══ */
/* the menu row thumbnail is now a photo of what the drip is FOR, with the
bag standing in front of it */
.rbag{position:relative;overflow:hidden;display:block;padding:0;height:92px;border-radius:2px}
.rbag:before{display:none}
.rbag .rb-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.rbag:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,
rgba(28,42,34,.06),rgba(28,42,34,.3));z-index:1}
.rbag .rb-bag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
height:78px;width:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.row:hover .rbag .rb-shot{transform:scale(1.06);transition:transform .6s}
.rbag .rb-shot{transition:transform .6s}
/* the menu page rows carry the same photo, tucked beside the bag */
.fbag{position:relative}
.fshot{position:absolute;right:-2%;bottom:2%;width:clamp(150px,18vw,248px);height:clamp(112px,13vw,176px);
overflow:hidden;z-index:3;box-shadow:0 22px 50px rgba(28,42,34,.3);border:4px solid var(--ivory)}
.fshot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s}
.frow:hover .fshot img{transform:scale(1.06)}
.frow.alt .fshot{right:auto;left:-2%}
/* oversight band */
.ovband .lead + .lead{margin-top:16px}
.kicker{margin-top:22px;font-family:var(--dsp);font-size:19px;line-height:1.45;color:var(--gold-d);
max-width:46ch}
.ovband .cta{margin-top:30px}
/* shorter pages: the bands stop shouting */
.band{padding:104px 0}
.band.tight{padding:74px 0}
.howstep{padding:26px 0}
.hs-shot img{height:150px}
@media(max-width:900px){
.band{padding:64px 0}
.rbag{height:78px}
.rbag .rb-bag{height:64px}
.fshot{width:112px;height:84px;right:0;bottom:0}
.frow.alt .fshot{left:0}
}
/* ══ v6.1 HERO ══ */
.hero.shotfull .wrap{padding-top:clamp(84px,10vw,132px);padding-bottom:clamp(72px,9vw,116px);
max-width:1080px}
.hero.shotfull h1{font-size:clamp(38px,6vw,80px)}
.kick{margin:20px auto 0;font-family:var(--dsp);font-weight:400;
font-size:clamp(20px,2.5vw,32px);line-height:1.25;color:var(--gold-l);letter-spacing:-.01em}
.hero.shotfull .lead{margin-top:22px;max-width:62ch;font-size:18.5px;color:#CBD9D1}
/* the five things you can actually book, right in the hero */
.hchips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.hchip{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
padding:10px 22px;border-radius:999px;border:1px solid rgba(247,244,237,.22);
background:rgba(247,244,237,.07);backdrop-filter:blur(6px);
font:600 12.5px var(--ui);letter-spacing:.06em;color:#E4EDE7;
transition:border-color .3s,background .3s,transform .3s}
.hchip:hover{border-color:var(--gold);background:rgba(212,178,111,.16);transform:translateY(-2px)}
/* the four things people want to know before they read anything else */
.hfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;
border-top:1px solid rgba(212,178,111,.3);padding-top:26px}
.hfacts div{padding:0 14px}
.hfacts b{display:block;font-family:var(--dsp);font-weight:400;line-height:1.1;
font-size:clamp(19px,2.1vw,27px);color:var(--gold-l);font-variant-numeric:tabular-nums}
.hfacts span{display:block;margin-top:8px;font:500 11px var(--ui);letter-spacing:.14em;
text-transform:uppercase;color:#9DB3A4;line-height:1.5}
@media(max-width:900px){
.hero.shotfull .wrap{padding-top:74px;padding-bottom:56px}
.kick{font-size:19px;margin-top:16px}
.hero.shotfull .lead{font-size:16.5px;margin-top:18px}
.hchips{gap:7px;margin-top:24px}
.hchip{padding:8px 15px;font-size:11.5px}
.hfacts{grid-template-columns:1fr;gap:18px 0;margin-top:30px;padding-top:20px;text-align:center}
.hfacts div{padding:0 10px 0 0}
.hfacts span{font-size:10px;letter-spacing:.1em}
}
/* ══ v7.0 QUIZ ══ */
.qopts{grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}
.qopt{position:relative;display:grid;grid-template-columns:98px 1fr 26px;align-items:center;gap:16px;
text-align:left;padding:12px 14px 12px 12px;border-radius:6px;overflow:hidden;
border:1px solid rgba(247,244,237,.18);background:rgba(247,244,237,.05);
transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,background .3s,box-shadow .3s}
.qopt:before{content:'';position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .4s;
background:radial-gradient(120% 130% at 0% 50%,var(--dc,#D4B26F),transparent 62%)}
.qopt.aura-hydrate{--dc:#7FB2C9}.qopt.aura-recover{--dc:#C98F5F}.qopt.aura-defend{--dc:#8FC98F}
.qopt.aura-signature{--dc:#D4B26F}.qopt.aura-optimize{--dc:#B57FC9}
.qopt>*{position:relative;z-index:2}
.qopt:hover{transform:translateY(-4px);border-color:rgba(212,178,111,.6);
box-shadow:0 20px 40px -22px rgba(0,0,0,.7)}
.qopt:hover:before{opacity:.22}
.qopt.picked{border-color:var(--gold);background:rgba(212,178,111,.12)}
.qopt.picked:before{opacity:.3}
/* the feeling, with the bag standing in front of it */
.qo-shot{position:relative;display:block;width:98px;height:70px;overflow:hidden;border-radius:4px;
background:var(--deep)}
.qo-feel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.86;
transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.qopt:hover .qo-feel{transform:scale(1.09)}
.qo-bag{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);height:46px;width:auto;
filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.qopt:hover .qo-bag{transform:translate(-50%,-58%) scale(1.06)}
.qo-label{font:600 13.5px var(--ui);color:#DCE7E0;letter-spacing:.01em;line-height:1.35}
.qopt.picked .qo-label{color:#F6EBD2}
.qo-tick{width:22px;height:22px;border-radius:50%;border:1px solid rgba(247,244,237,.3);
position:relative;transition:background .3s,border-color .3s,transform .3s}
.qo-tick:after{content:'';position:absolute;left:7px;top:3px;width:6px;height:11px;
border-right:2px solid #18251E;border-bottom:2px solid #18251E;transform:rotate(45deg) scale(0);
transition:transform .35s cubic-bezier(.2,1.5,.4,1)}
.qopt.picked .qo-tick{background:var(--gold);border-color:var(--gold);transform:scale(1.08)}
.qopt.picked .qo-tick:after{transform:rotate(45deg) scale(1)}
/* the answer card */
@keyframes qrin{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.qresult{position:relative;padding:0;overflow:visible;animation:qrin .5s cubic-bezier(.2,.7,.3,1)}
.qr-shot{border-radius:4px 4px 0 0}
.qr-shot{position:relative;z-index:1;height:190px;overflow:hidden;background:var(--forest)}
.qrfeel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
animation:kenburns 14s ease-in-out infinite alternate}
.qr-shot:after{content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(12,19,15,.1),rgba(12,19,15,.62))}
.qresult .qrimg{display:none}
.qrbody{padding:26px 30px 30px}
.qrtag{display:block;font:600 10px var(--ui);letter-spacing:.2em;text-transform:uppercase;
color:var(--gold-d);margin-bottom:8px}
.qresult .qp-eye{margin-bottom:6px}
.qresult .qrprice{transition:color .3s}
@media(max-width:820px){
.qopts{grid-template-columns:1fr}
.qopt{grid-template-columns:84px 1fr 24px;gap:13px}
.qo-shot{width:84px;height:62px}
.qo-bag{height:40px}
.qr-shot{height:150px}
.qrbody{padding:22px 20px 24px}
.qresult{text-align:left}
.qresult .cta{justify-content:flex-start}
}
/* ══ v7.1 ══ */
.topbar{background:var(--deep);color:#B8CCBE;font:500 12px var(--ui);letter-spacing:.06em;
position:relative;z-index:70}
.tb-in{max-width:1240px;margin:0 auto;padding:9px 32px;display:flex;align-items:center;
justify-content:space-between;gap:18px}
.tb-l{opacity:.9}
.tb-tel{text-decoration:none;color:var(--gold-l);font-weight:600;letter-spacing:.04em;
white-space:nowrap;transition:color .25s}
.tb-tel span{color:#9DB3A4;font-weight:500;margin-right:6px}
.tb-tel:hover{color:#F4E8CC}
/* the offer bar */
.offerbar{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--deep);
color:var(--ivory);border-top:1px solid rgba(212,178,111,.4);
box-shadow:0 -18px 44px rgba(0,0,0,.4);
transform:translateY(110%);transition:transform .45s cubic-bezier(.2,.7,.3,1);
padding-bottom:env(safe-area-inset-bottom)}
.offerbar.show{transform:none}
.offerbar[hidden]{display:none}
.ob-in{max-width:1240px;margin:0 auto;padding:16px 54px 16px 32px;display:flex;align-items:center;
gap:20px 30px;flex-wrap:wrap;justify-content:center}
.ob-eye{display:block;font:600 10px var(--ui);letter-spacing:.24em;text-transform:uppercase;
color:var(--gold);margin-bottom:5px}
.ob-copy p{margin:0;font-family:var(--dsp);font-size:19px;line-height:1.3;color:var(--ivory)}
.ob-copy b{color:var(--gold-l);font-weight:400}
.ob-form{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.ob-form[hidden]{display:none}
.ob-form input[type=email]{width:min(280px,60vw);padding:13px 16px;border-radius:3px;
border:1px solid rgba(247,244,237,.28);background:rgba(247,244,237,.07);color:var(--ivory);
font:400 15px var(--ui)}
.ob-form input[type=email]::placeholder{color:#8FA697}
.ob-form input[type=email]:focus{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold);background:rgba(247,244,237,.12)}
.ob-form .btn{padding:13px 24px;font-size:14.5px}
.ob-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ob-done{margin:0;font-size:15px;color:var(--gold-l);font-family:var(--dsp);font-size:18px}
.ob-x{position:absolute;right:14px;top:12px;background:none;border:0;color:#8FA697;font-size:26px;
line-height:1;cursor:pointer;padding:4px 8px;transition:color .25s}
.ob-x:hover{color:var(--ivory)}
/* the sticky book bar has to sit above the offer bar, not under it */
body.hasoffer .sticky{bottom:84px}
@media(max-width:900px){
.tb-in{padding:8px 22px;font-size:11px;gap:12px}
.tb-l{display:none}
.tb-in{justify-content:center}
.ob-in{padding:14px 44px 14px 20px;gap:12px;flex-direction:column;align-items:stretch;text-align:center}
.ob-copy p{font-size:16.5px}
.ob-form{justify-content:center}
.ob-form input[type=email]{width:100%;flex:1 1 100%}
.ob-form .btn{width:100%}
body.hasoffer{padding-bottom:0}
body.hasoffer .sticky{display:none}
}
/* ══ v8.0 ══ */
/* ── the mark, in the nav and the footer ── */
.brand{flex-direction:row;align-items:center;gap:12px}
.blogo{width:38px;height:auto;flex:0 0 auto;transition:width .35s,transform .6s cubic-bezier(.2,.7,.3,1)}
.brand:hover .blogo{transform:rotate(-8deg) scale(1.05)}
.btxt{display:flex;flex-direction:column;line-height:1}
.nav.scrolled .blogo{width:30px}
.foot-brand{margin-bottom:18px}
.foot-brand .blogo{width:46px}
@media(max-width:900px){.blogo{width:32px}.foot-brand .blogo{width:40px}}
/* ── IDEA 10: one radius scale and one rule system, instead of six of each ── */
:root{--r:3px;--r-lg:6px;--hair:1px solid var(--linel);--hair-gold:1px solid var(--line)}
.btn,.card,.tier,.frame,.fcard,.scard,.bx,.qopt,.qprompt,.qresult,
.ings li,.enh,.ob-form input,.credcard,.ovcard,.emptyshelf,.mt-img,.mtile{border-radius:var(--r)}
.qr-shot{border-radius:var(--r) var(--r) 0 0}
.hchip,.qo-tick{border-radius:999px}
.dbag img,.driphead img{border-radius:var(--r-lg)}
.fpx,.mt-px,.pn,.bx-p,.mstats b,.tier .amt,.qrprice,.cc-px,.hfacts b,.tstats b,.acreds b{
font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.005em}
p,li,.lead,.desc{font-variant-numeric:oldstyle-nums}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r)}
/* ── IDEA 5: the light bands get texture too. They were completely flat. ── */
.band,.cream,.storyband,.howband{position:relative}
.band:not(.dark):not(.deep):not(.book):before,
.storyband:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
opacity:.55;mix-blend-mode:multiply;background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .40 0 0 0 0 .35 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
.band>.wrap,.storyband>.wrap{position:relative;z-index:1}
/* ── IDEA 4: oversized ghosted numerals behind the section headers ── */
.band .wrap{position:relative}
.eye[data-n]:after{content:attr(data-n);position:absolute;right:0;top:-42px;z-index:0;
font-family:var(--dsp);font-size:clamp(120px,15vw,210px);line-height:.8;color:transparent;
-webkit-text-stroke:1px rgba(22,33,27,.09);pointer-events:none;user-select:none}
.dark .eye[data-n]:after,.deep .eye[data-n]:after,.quizband .eye[data-n]:after{
-webkit-text-stroke-color:rgba(247,244,237,.09)}
/* ── IDEA 3: the bag gets a pedestal and a cast shadow, not a white card ── */
.dbag{position:relative}
.dbag:after{content:'';position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
width:62%;height:34px;border-radius:50%;background:rgba(6,11,8,.55);filter:blur(26px);z-index:1}
.dbag img{background:none;padding:0;box-shadow:none;position:relative;z-index:2;
filter:drop-shadow(0 34px 40px rgba(0,0,0,.55))}
.dbag:before{content:'';position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
width:clamp(280px,32vw,460px);height:clamp(280px,32vw,460px);border-radius:50%;z-index:0;
background:radial-gradient(circle,var(--dc,#D4B26F) 0%,rgba(0,0,0,0) 68%);opacity:.2;
animation:auraglow 9s ease-in-out infinite;filter:blur(48px)}
/* ── IDEA 2: the product page wears its own colour ── */
.drippage.aura-hydrate{--dc:#7FB2C9}.drippage.aura-recover{--dc:#C98F5F}
.drippage.aura-defend{--dc:#8FC98F}.drippage.aura-signature{--dc:#D4B26F}
.drippage.aura-optimize{--dc:#B57FC9}
.drippage:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
background:radial-gradient(90% 70% at 82% 8%,var(--dc) 0%,rgba(0,0,0,0) 58%);opacity:.16}
.drippage .eye{color:var(--dc)}
.drippage .pricebar{border-color:color-mix(in srgb,var(--dc) 42%,transparent)}
.drippage .pricebar:after{background:radial-gradient(70% 140% at 8% 50%,
color-mix(in srgb,var(--dc) 26%,transparent),transparent 62%)}
.drippage .crumb a:hover{color:var(--dc);border-color:var(--dc)}
/* ── IDEA 8: the formulation reads as a list, not ragged pills ── */
.ings{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0;margin:26px 0 0;padding:0;
border-top:var(--hair)}
.ings li{position:relative;padding:15px 16px 15px 30px;border-bottom:var(--hair);
font:500 15px var(--ui);color:var(--ink);background:none;border-radius:0}
.ings li:before{content:'';position:absolute;left:8px;top:22px;width:6px;height:6px;
border-radius:50%;background:var(--dc,var(--gold))}
.ings li:nth-child(odd){border-right:var(--hair)}
@media(max-width:760px){.ings{grid-template-columns:1fr}.ings li:nth-child(odd){border-right:0}}
/* ── IDEA 9: the family portrait band ── */
.fiveband{position:relative;background:var(--deep);overflow:hidden}
.fiveband img{width:100%;height:clamp(280px,36vw,500px);object-fit:cover;object-position:50% 34%;display:block}
.fb-cap{position:absolute;left:0;right:0;bottom:0;padding:120px 32px 40px;text-align:center;
background:linear-gradient(to top,rgba(9,15,12,.96) 22%,rgba(9,15,12,.72) 58%,rgba(9,15,12,0))}
.fb-cap span{display:block;font:600 10.5px var(--ui);letter-spacing:.24em;text-transform:uppercase;
color:var(--gold)}
.fb-cap b{display:block;margin:10px 0 20px;font-family:var(--dsp);font-weight:400;
font-size:clamp(24px,3.2vw,42px);color:var(--ivory);text-shadow:0 3px 26px rgba(0,0,0,.7)}
.fb-cap .btn.ghost{border-color:rgba(247,244,237,.4);color:var(--ivory)}
.fb-cap .btn.ghost:hover{border-color:var(--gold);color:var(--gold-l)}
/* ── IDEA 6: the fluid motif. A gold drop falls between the bands, and the
scroll bar fills like a line running. ── */
.dropdiv{position:relative;height:74px;background:inherit;overflow:hidden}
.dropdiv:before{content:'';position:absolute;left:50%;top:0;width:1px;height:100%;
background:linear-gradient(180deg,rgba(212,178,111,0),rgba(212,178,111,.4),rgba(212,178,111,0))}
.dropdiv:after{content:'';position:absolute;left:calc(50% - 4px);width:8px;height:11px;
border-radius:50% 50% 60% 60%;background:radial-gradient(circle at 34% 30%,#F4E8CC,var(--gold));
animation:dropfall 4.2s cubic-bezier(.55,0,.85,.55) infinite}
#pgbar{height:3px;background:linear-gradient(90deg,var(--gold-d),var(--gold),var(--gold-l))}
@media(prefers-reduced-motion:reduce){
.dropdiv:after,.dbag:before{animation:none!important}
.brand:hover .blogo{transform:none}
}
/* ══ v8.1 ══ */
.feelrail{position:relative;z-index:3;max-width:1240px;margin:0 auto;padding:8px 32px 62px}
.fr-lead{text-align:center;font:500 13px var(--ui);letter-spacing:.06em;color:#A5BAAC;
margin:0 0 22px}
.fr-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.feeltile{position:relative;display:block;text-decoration:none;overflow:hidden;
border-radius:var(--r);border:1px solid rgba(247,244,237,.16);background:var(--deep);
transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s,box-shadow .35s}
.feeltile.aura-hydrate{--dc:#7FB2C9}.feeltile.aura-recover{--dc:#C98F5F}
.feeltile.aura-defend{--dc:#8FC98F}.feeltile.aura-signature{--dc:#D4B26F}
.feeltile.aura-optimize{--dc:#B57FC9}
.ft-shot{display:block;position:relative;height:clamp(130px,15vw,186px);overflow:hidden}
.ft-shot img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82;
transition:transform .7s cubic-bezier(.2,.6,.2,1),opacity .35s}
.ft-shot:after{content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(12,19,15,.16),rgba(12,19,15,.86))}
.ft-label{position:absolute;left:16px;right:16px;bottom:44px;z-index:2;
font:600 13.5px/1.35 var(--ui);color:var(--ivory);text-shadow:0 2px 14px rgba(0,0,0,.6)}
.ft-go{position:absolute;left:16px;bottom:16px;z-index:2;font:600 10px var(--ui);
letter-spacing:.18em;text-transform:uppercase;color:var(--gold);opacity:0;
transform:translateY(6px);transition:opacity .35s,transform .35s}
.ft-go i{font-style:normal;display:inline-block;margin-left:5px}
.feeltile:before{content:'';position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .35s;
background:radial-gradient(90% 70% at 50% 100%,var(--dc),transparent 70%)}
.feeltile:hover{transform:translateY(-6px);border-color:var(--gold);
box-shadow:0 24px 48px -22px rgba(0,0,0,.8)}
.feeltile:hover .ft-shot img{transform:scale(1.08);opacity:.95}
.feeltile:hover .ft-go{opacity:1;transform:none}
.feeltile:hover:before{opacity:.34}
/* landing on a row should be obvious */
.frow{scroll-margin-top:96px}
@keyframes rowflash{0%{background:rgba(212,178,111,0)}18%{background:rgba(212,178,111,.16)}
100%{background:rgba(212,178,111,0)}}
.frow.flash{animation:rowflash 1.9s ease-out}
@media(max-width:900px){
.feelrail{padding:4px 22px 42px}
.fr-grid{grid-template-columns:1fr 1fr;gap:9px}
.ft-shot{height:118px}
.ft-label{left:12px;right:12px;bottom:12px;font-size:12.5px}
.ft-go{display:none}
.fr-lead{font-size:12px;margin-bottom:16px}
}
@media(max-width:420px){.ft-shot{height:104px}.ft-label{font-size:11.5px}}
/* ══ v9.0 ADD-ON BAR ══ */
.abhero .lead{max-width:70ch}
.abnote{margin-top:18px;font-size:14px;line-height:1.65;color:var(--gold-d);max-width:62ch;
padding-left:16px;border-left:2px solid var(--gold)}
.dark .abnote,.phero .abnote,.abhero .abnote{color:var(--gold-l);border-color:var(--gold)}
.abband{background:var(--ivory)}
/* a category */
.ab-group{margin-top:76px;scroll-margin-top:96px}
.ab-group:first-child{margin-top:52px}
.ab-ghead{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
padding-bottom:22px;border-bottom:2px solid var(--dc,var(--gold))}
.ab-gn{font-family:var(--dsp);font-size:clamp(38px,4.6vw,62px);line-height:.86;color:transparent;
-webkit-text-stroke:1px var(--dc,var(--gold))}
.ab-ghead h2{font-size:clamp(24px,2.9vw,38px);line-height:1.14}
.ab-gsub{margin-top:8px;font-size:16px;color:var(--mut);max-width:56ch}
.ab-gate{margin-top:20px;padding:14px 18px;background:#fff;border:1px dashed var(--dc,var(--gold));
border-radius:var(--r);font-size:13.5px;line-height:1.6;color:var(--mut)}
.ab-gate:before{content:'Please note';display:block;font:600 10px var(--ui);letter-spacing:.2em;
text-transform:uppercase;color:var(--dc,var(--gold-d));margin-bottom:6px}
/* an enhancement */
.ab-items{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:2px}
.ab-item{position:relative;overflow:hidden;isolation:isolate;background:#fff;
padding:30px 30px 26px;box-shadow:0 0 0 1px var(--linel);transition:transform .35s,box-shadow .35s}
.ab-item:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:1;
background:var(--dc,var(--gold));transform:scaleX(0);transform-origin:left;
transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.ab-item:hover{transform:translateY(-4px);box-shadow:0 24px 44px -26px rgba(28,42,34,.42),0 0 0 1px var(--linel)}
.ab-item:hover:before{transform:none}
.ab-head{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;
padding-bottom:16px;border-bottom:var(--hair)}
.ab-item h3{font-size:23px;line-height:1.2}
.ab-comp{margin-top:7px;font:500 12px var(--ui);letter-spacing:.05em;color:var(--dc,var(--gold-d));
line-height:1.5}
.ab-px{font-family:var(--dsp);font-size:34px;line-height:1;color:var(--ink);
font-variant-numeric:tabular-nums lining-nums}
.ab-exp{margin-top:16px;font-size:15.5px;line-height:1.68;color:var(--mut)}
.ab-spec{margin:18px 0 0;display:grid;gap:12px}
.ab-spec>div{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:start}
.ab-spec dt{font:600 10px var(--ui);letter-spacing:.18em;text-transform:uppercase;
color:var(--gold-d);padding-top:3px}
.ab-spec dd{margin:0;font-size:14.5px;line-height:1.6;color:var(--mut)}
/* the condensed bar that sits on every infusion page */
.abstrip{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:34px}
.abs-row{display:grid;grid-template-columns:1fr auto;gap:8px 18px;align-items:baseline;
padding:18px 22px;background:#fff;box-shadow:0 0 0 1px var(--linel);text-decoration:none;
transition:background .3s,transform .3s}
.abs-row:hover{background:var(--cream);transform:translateY(-2px)}
.abs-n{font-family:var(--dsp);font-size:19px;color:var(--ink)}
.abs-p{font-family:var(--dsp);font-size:21px;color:var(--gold-d);
font-variant-numeric:tabular-nums lining-nums}
.abs-c{grid-column:1/-1;font:500 11.5px var(--ui);letter-spacing:.04em;color:var(--mut);line-height:1.5}
@media(max-width:900px){
.ab-items,.abstrip{grid-template-columns:1fr}
.ab-item{padding:24px 22px 22px}
.ab-ghead{grid-template-columns:1fr;gap:10px}
.ab-gn{font-size:34px}
.ab-spec>div{grid-template-columns:1fr;gap:4px}
.ab-spec dt{padding-top:0}
.abs-row{padding:16px 18px}
}
/* ══ v10.0 ══ */
/* 1. a brand curtain on the first view of a session, then never again */
#curtain{position:fixed;inset:0;z-index:400;background:var(--deep);display:grid;place-items:center;
transition:opacity .55s ease,visibility .55s}
#curtain img{width:96px;height:auto;opacity:0;transform:scale(.86);
animation:curtainmark 1.05s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes curtainmark{40%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
#curtain.gone{opacity:0;visibility:hidden;pointer-events:none}
/* 3. sticky in-page rail for the long pages */
.jumprail{position:sticky;top:74px;z-index:40;margin:0 0 6px;
background:rgba(247,244,237,.96);border-bottom:var(--hair);
backdrop-filter:none}
.dark .jumprail,.abband .jumprail{background:rgba(247,244,237,.97)}
.jr-in{max-width:1240px;margin:0 auto;padding:12px 32px;display:flex;gap:8px;overflow-x:auto;
scrollbar-width:none}
.jr-in::-webkit-scrollbar{display:none}
.jr-in a{flex:0 0 auto;text-decoration:none;font:600 11.5px var(--ui);letter-spacing:.12em;
text-transform:uppercase;color:var(--mut);padding:8px 14px;border-radius:999px;
border:1px solid transparent;transition:.28s;white-space:nowrap}
.jr-in a:hover{color:var(--gold-d);border-color:var(--linel)}
.jr-in a.on{color:#18251E;background:var(--gold);border-color:var(--gold)}
/* 4 + 5. the bag tilts to the pointer, and pins while the formulation scrolls */
.dbag{perspective:900px}
.dbag img{transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .4s;will-change:transform}
.dbag.tilt img{transition:transform .12s linear}
@media(min-width:1024px){
.dhead{align-items:start}
.dbag{position:sticky;top:112px}
}
/* 6. a seam between bands instead of a hard colour edge */
.seam{position:relative;height:1px;background:linear-gradient(90deg,
transparent,var(--line) 18%,var(--line) 82%,transparent)}
.seam:after{content:'';position:absolute;left:50%;top:-4px;width:9px;height:9px;
margin-left:-4.5px;border-radius:50%;background:var(--gold);
box-shadow:0 0 0 5px rgba(212,178,111,.14)}
/* 7. editorial typography */
.dropcap > p:first-of-type:first-letter{float:left;font-family:var(--dsp);font-weight:400;
font-size:4.6em;line-height:.82;padding:6px 14px 0 0;color:var(--gold-d)}
.pull,.qh,blockquote{hanging-punctuation:first last}
.lead,.prose p,.ab-exp,.flead{text-wrap:pretty}
h1,h2,h3,.fcap strong,.ab-item h3{text-wrap:balance}
/* 8. photographs dissolve in from their own colour instead of popping */
.rv img,.frame img,.hs-shot img,.ft-shot img,.sframe img{
transition:filter .9s ease,opacity .9s ease,transform .95s cubic-bezier(.22,.61,.21,1)}
img.blurup{filter:blur(18px);opacity:.35}
img.blurup.ready{filter:none;opacity:1}
/* 9. the calls to action carry a little more craft */
.btn{position:relative;isolation:isolate}
.btn .rip{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);
background:rgba(255,255,255,.45);pointer-events:none;z-index:-1;
animation:rip .62s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
a[target="_blank"].btn:after{content:'';display:inline-block;width:9px;height:9px;margin-left:9px;
border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
transform:rotate(45deg) translateY(-1px);opacity:.55;transition:transform .3s,opacity .3s}
a[target="_blank"].btn:hover:after{transform:rotate(45deg) translate(2px,-3px);opacity:.9}
.btn.gold:after{border-color:#18251E}
/* 10. a print sheet, because people print an IV menu */
@media print{
*{background:#fff!important;color:#000!important;box-shadow:none!important;
text-shadow:none!important;animation:none!important}
.topbar,.nav,.drawer,.sticky,.offerbar,#pgbar,#curtain,.jumprail,.quizband,.hero .shot,
.fiveband,.dropdiv,.seam,.ctastrip,.orbs,.dripline,.scrollcue,.edgelabel,.cursorglow{display:none!important}
body{font-size:11pt;padding:0}
.band{padding:14pt 0;page-break-inside:avoid}
.wrap{max-width:none;padding:0 12pt}
h1{font-size:22pt}h2{font-size:16pt}h3{font-size:12pt}
.frow,.ab-item,.ab-group,.row,.tier{page-break-inside:avoid;border:1px solid #ccc;margin-bottom:6pt}
.fbag,.dbag,.rbag,.fshot,.qpbags{display:none!important}
a[href^="http"]:after{content:" (" attr(href) ")";font-size:8pt;color:#555}
.foot{border-top:1px solid #999;padding-top:8pt}
}
@media(max-width:900px){
.jumprail{top:58px}
.jr-in{padding:10px 18px}
.dbag{position:static}
}
@media(prefers-reduced-motion:reduce){
#curtain{display:none}
.btn .rip{display:none}
img.blurup{filter:none;opacity:1}
}
/* ══ v10.1 ══ */
/* the bar, grouped by category, on every infusion page */
.abcols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px;align-items:start}
.abcol{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--linel);overflow:hidden;
transition:transform .35s,box-shadow .35s}
.abcol:hover{transform:translateY(-4px);box-shadow:0 26px 48px -28px rgba(28,42,34,.4),0 0 0 1px var(--linel)}
.abc-head{padding:24px 24px 20px;border-bottom:3px solid var(--dc,var(--gold));background:var(--cream)}
.abc-num{display:block;font:600 10.5px var(--ui);letter-spacing:.24em;color:var(--dc,var(--gold-d))}
.abc-head h3{font-size:19px;line-height:1.28;margin-top:10px}
.abc-head p{font-size:13.5px;line-height:1.55;color:var(--mut);margin-top:8px}
.abc-gate{display:inline-block;margin-top:12px;font:600 9.5px var(--ui);letter-spacing:.16em;
text-transform:uppercase;color:var(--dc,var(--gold-d));border:1px dashed currentColor;
padding:5px 9px;border-radius:999px}
.abc-rows{padding:6px 0}
.abc-row{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:13px 24px;
text-decoration:none;border-bottom:var(--hair);transition:background .25s,padding-left .25s}
.abc-row:last-child{border-bottom:0}
.abc-row:hover{background:var(--cream);padding-left:28px}
.abc-n{font-family:var(--dsp);font-size:17px;color:var(--ink);line-height:1.25}
.abc-p{font-family:var(--dsp);font-size:19px;color:var(--dc,var(--gold-d));
font-variant-numeric:tabular-nums lining-nums}
.abc-c{grid-column:1/-1;font:500 11px var(--ui);letter-spacing:.05em;color:var(--mut);line-height:1.45}
/* portraits keep their proportions and their subject */
.frame.portrait img{height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.abouthero{padding-bottom:0}
.ah-split{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,68px);align-items:end}
.ah-shot{position:relative;align-self:end;margin-bottom:-1px}
.ah-shot img{width:100%;height:auto;display:block;border-radius:var(--r) var(--r) 0 0;
mask-image:linear-gradient(180deg,#000 84%,transparent);
-webkit-mask-image:linear-gradient(180deg,#000 84%,transparent)}
/* four stats in a half-width column is too tight, so the About hero takes two by two */
.abouthero .acreds{margin-bottom:56px;grid-template-columns:1fr 1fr;gap:6px 0}
.abouthero .acreds div{padding:22px 22px 4px 0}
.abouthero .acreds b{font-size:clamp(20px,2vw,26px)}
.abouthero .acreds span{margin-top:9px}
@media(max-width:1020px){.abcols{grid-template-columns:1fr;gap:16px}}
@media(max-width:900px){
.ah-split{grid-template-columns:1fr;gap:26px}
.ah-shot{margin-bottom:0}
.ah-shot img{border-radius:var(--r);mask-image:none;-webkit-mask-image:none}
.abouthero{padding-bottom:56px}
.abouthero .acreds{margin-bottom:0}
}
/* ══ v10.2 ══ */
.whyband{padding:clamp(96px,11vw,148px) 0}
.split.wide{grid-template-columns:1fr .82fr;gap:clamp(48px,7vw,110px);align-items:center}
.why-copy .lead{margin-top:26px;font-size:19px}
.why-copy .sig{margin-top:30px}
.portrait-fig{margin:0;position:relative}
.portrait-fig img{width:100%;height:auto;display:block;border-radius:var(--r);
aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;
box-shadow:0 40px 80px -40px rgba(28,42,34,.55)}
.portrait-fig:before{content:'';position:absolute;left:-22px;top:-22px;right:34px;bottom:34px;
border:1px solid var(--line);border-radius:var(--r);z-index:-1}
.portrait-fig figcaption{margin-top:16px;font:600 10.5px var(--ui);letter-spacing:.2em;
text-transform:uppercase;color:var(--gold-d)}
@media(max-width:900px){
.whyband{padding:64px 0}
.split.wide{grid-template-columns:1fr;gap:34px}
.portrait-fig:before{display:none}
}
/* ══ v10.3 ══ */
.idealband.aura-hydrate{--dc:#7FB2C9}.idealband.aura-recover{--dc:#C98F5F}
.idealband.aura-defend{--dc:#8FC98F}.idealband.aura-signature{--dc:#D4B26F}
.idealband.aura-optimize{--dc:#B57FC9}
.idealband .cta{margin-top:36px}
.icards{list-style:none;margin:44px 0 0;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.icard{position:relative;overflow:hidden;border-radius:var(--r);background:rgba(247,244,237,.05);
box-shadow:0 0 0 1px var(--line);padding:26px 24px 24px;display:flex;flex-direction:column;
gap:14px;transition:transform .35s,box-shadow .35s,background .35s;min-height:150px}
.icard:hover{transform:translateY(-4px);background:rgba(247,244,237,.09);
box-shadow:0 0 0 1px var(--gold)}
.ic-n{font-family:var(--dsp);font-size:15px;color:var(--dc,var(--gold));letter-spacing:.06em}
.ic-t{font:400 17.5px/1.45 var(--dsp);color:var(--ivory)}
.dark .ic-t,.phero .ic-t{color:var(--ivory)}
/* with a photograph the card becomes a picture with the line laid over it */
.icard.has{padding:0;min-height:0;gap:0}
.ic-shot{display:block;position:relative;aspect-ratio:4/3;overflow:hidden}
.ic-shot img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.icard.has:hover .ic-shot img{transform:scale(1.06)}
.ic-shot:after{content:'';position:absolute;inset:0;
background:linear-gradient(to top,rgba(12,19,15,.9) 8%,rgba(12,19,15,.05) 62%)}
.icard.has .ic-n{position:absolute;top:16px;left:18px;z-index:2}
.icard.has .ic-t{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;font-size:16.5px;
text-shadow:0 2px 14px rgba(0,0,0,.6)}
@media(max-width:760px){.icards{grid-template-columns:1fr;gap:12px}}
.icard{padding:28px 24px 26px}
.ic-top{display:flex;align-items:center;gap:14px}
.ic-ico{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;
color:var(--dc,var(--gold));border-radius:50%;
background:rgba(247,244,237,.05);box-shadow:inset 0 0 0 1px rgba(247,244,237,.14);
transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .35s}
.ic-ico svg{width:30px;height:30px;display:block;overflow:visible}
.icard:hover .ic-ico{transform:translateY(-3px) scale(1.06);
background:rgba(247,244,237,.09);box-shadow:inset 0 0 0 1px var(--dc,var(--gold))}
.ic-n{font-size:13px;opacity:.75}
/* the marks draw themselves in as the band scrolls up */
.ic-ico svg *{stroke-dasharray:340;stroke-dashoffset:340;
animation:icdraw 1.15s cubic-bezier(.3,.7,.2,1) forwards}
.ic-ico svg *:nth-child(2){animation-delay:.13s}
.ic-ico svg *:nth-child(3){animation-delay:.22s}
.ic-ico svg *:nth-child(4){animation-delay:.3s}
@keyframes icdraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
.ic-ico svg *{stroke-dashoffset:0;animation:none}
.icard:hover .ic-ico{transform:none}
}
/* photo present: the glyph steps aside, number rides on the picture */
.icard.has .ic-top{position:absolute;top:16px;left:18px;z-index:2;gap:0}
.icard.has .ic-n{position:static;font-size:15px;opacity:1}
@media(max-width:760px){.ic-ico{width:48px;height:48px}.ic-ico svg{width:26px;height:26px}}
/* infusion pages: the why band is now a picture and the words, not words alone */
.whysplit{align-items:center;gap:52px}
.whysplit .frame{aspect-ratio:4/5;max-height:520px}
.whysplit h2{margin-top:8px}
@media(max-width:900px){.whysplit{gap:26px}.whysplit .frame{aspect-ratio:16/10;max-height:none}}
/* booster pages: the compound card wears its own detail shot */
.ccard{overflow:hidden;padding-top:0}
/* bleed the shot out through the card's own 36px padding so it meets the
border on three sides instead of floating in a frame */
/* a photographed Ideal For card needs its numeral readable against whatever
the top of the picture happens to be */
.icard.has .ic-shot:before{content:'';position:absolute;inset:0 0 auto;height:38%;z-index:1;
background:linear-gradient(to bottom,rgba(12,19,15,.55),rgba(12,19,15,0))}
.icard.has .ic-n{text-shadow:0 1px 10px rgba(0,0,0,.7)}
.cc-shot{display:block;margin:0 -36px 24px;position:relative;aspect-ratio:16/10;overflow:hidden}
.cc-shot img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1s cubic-bezier(.2,.6,.2,1)}
.ccard:hover .cc-shot img{transform:scale(1.05)}
.cc-shot:after{content:'';position:absolute;inset:0;
background:linear-gradient(to top,var(--cream) 2%,rgba(237,231,218,0) 46%)}
.dark .cc-shot:after,.phero .cc-shot:after{
background:linear-gradient(to top,#131E18 0%,rgba(19,30,24,.55) 22%,rgba(19,30,24,0) 62%)}
@media(max-width:900px){.cc-shot{margin:0 -26px 20px;aspect-ratio:16/8}}
.flink{margin-left:auto;display:inline-flex;align-items:center;gap:9px;
font:600 12.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;
color:var(--ink);text-decoration:none;white-space:nowrap;
padding:11px 20px;border-radius:var(--r);
background:rgba(212,178,111,.15);box-shadow:inset 0 0 0 1px rgba(212,178,111,.55);
transition:background .28s,box-shadow .28s,color .28s,transform .28s}
.flink i{margin-left:0;color:var(--gold-d);transition:transform .3s,color .28s}
.row:hover .flink{background:rgba(212,178,111,.26);box-shadow:inset 0 0 0 1px rgba(212,178,111,.85)}
.flink:hover{background:var(--gold);color:var(--ink);transform:translateY(-1px);
box-shadow:inset 0 0 0 1px var(--gold),0 8px 20px rgba(212,178,111,.3)}
.flink:hover i{transform:translateX(6px);color:var(--ink)}
.flink:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.dark .flink,.phero .flink{color:var(--ivory);background:rgba(212,178,111,.18);
box-shadow:inset 0 0 0 1px rgba(212,178,111,.5)}
.dark .flink i,.phero .flink i{color:var(--gold)}
.dark .flink:hover,.phero .flink:hover{color:var(--ink)}
@media(max-width:760px){.flink{width:100%;justify-content:center;margin-left:0;padding:13px 20px}}
.mtypes{display:grid;grid-template-columns:repeat(5,1fr);margin-top:62px;
border-top:1px solid var(--line)}
.mtype{position:relative;display:block;padding:30px 22px 30px 0;text-decoration:none;
transition:transform .3s}
.mtype:before{content:'';position:absolute;left:0;right:14px;top:-1px;height:1px;
background:var(--dc,var(--gold));transform:scaleX(0);transform-origin:0 50%;
transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.mtype:hover:before{transform:scaleX(1)}
.mtype:hover{transform:translateY(-2px)}
.mt-n{display:block;font:500 11px var(--ui);letter-spacing:.18em;color:var(--dc,var(--gold));opacity:.75}
.mt-name{display:block;margin-top:12px;font-family:var(--dsp);font-weight:400;
font-size:clamp(21px,2.1vw,28px);color:var(--ivory);letter-spacing:.01em}
.mt-for{display:block;margin-top:9px;font:500 11.5px var(--ui);letter-spacing:.16em;
text-transform:uppercase;color:var(--mut)}
.mtype.aura-hydrate{--dc:#7FB2C9}.mtype.aura-recover{--dc:#C98F5F}
.mtype.aura-defend{--dc:#8FC98F}.mtype.aura-signature{--dc:#D4B26F}
.mtype.aura-optimize{--dc:#B57FC9}
@media(max-width:900px){.mtypes{grid-template-columns:repeat(2,1fr)}
.mtype{padding:22px 16px 22px 0}}
@media(max-width:420px){.mtypes{grid-template-columns:1fr}}
.tmenu{display:flex;flex-direction:column;border-top:1px solid rgba(28,42,34,.14)}
.tmrow{display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:16px;
padding:19px 4px;border-bottom:1px solid rgba(28,42,34,.14);text-decoration:none;color:inherit;
transition:background .18s ease,padding .18s ease}
.tmrow:hover,.tmrow:focus-visible{background:rgba(28,42,34,.04);padding-left:12px}
.tm-n{font:600 12px/1 var(--ui);letter-spacing:.14em;color:var(--dc,#8a8578)}
.tm-name{font:600 20px/1.2 var(--dsp);letter-spacing:.01em}
.tm-for{font:500 13px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;opacity:.62}
.tm-p{font:600 19px/1 var(--ui);font-variant-numeric:tabular-nums}
@media(max-width:680px){
.tmrow{grid-template-columns:34px 1fr auto;gap:11px;padding:16px 2px}
.tm-for{display:none}}
.tstats{grid-template-columns:repeat(2,1fr) !important;max-width:440px}
.acreds.two{grid-template-columns:repeat(2,1fr) !important;max-width:460px}
.phero.tpage{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch;
overflow:hidden;padding:0}
.phero.tpage>.wrap{padding:118px 0 104px}
.thero-pic{position:relative;min-height:460px}
.thero-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thero-pic::after{content:"";position:absolute;inset:0;z-index:2;
background:linear-gradient(90deg,rgba(28,42,34,1) 0%,rgba(28,42,34,.55) 22%,rgba(28,42,34,.10) 55%,rgba(28,42,34,0) 78%)}
.tlocal{margin:30px 0 0;max-width:46ch;font:400 16.5px/1.72 var(--ui);color:rgba(247,244,237,.80);
padding-left:16px;border-left:2px solid var(--gold)}
@media(max-width:900px){
.phero.tpage{grid-template-columns:1fr}
.phero.tpage>.wrap{padding:88px 22px 44px}
.thero-pic{min-height:250px;order:2}
.thero-pic::after{background:linear-gradient(0deg,rgba(28,42,34,.72) 0%,rgba(28,42,34,0) 60%)}
.tlocal{max-width:none}}
.faqwrap{max-width:1240px;margin-left:auto;margin-right:auto}
.faqwrap .faq{max-width:900px;margin-left:0}
/* ══ v12 GRID: no orphan cells ══
Every grid on the site was leaving a ragged last row -- six boosters in five
columns, sixteen towns in five, five ingredients in two. Column counts now
divide their content, and where a count cannot divide, the last child spans
the remainder instead of leaving a hole. */
.bstrip{grid-template-columns:repeat(3,1fr)!important}
.towns{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
/* Inside the three location columns a town list is already in a ~354px column, so it
must stay single file. The v12 rule is appended after the original .acol rule and was
overriding it, which clipped "Millbrae", "Burlingame" and "Hillsborough" mid-word. */
.acol .towns{grid-template-columns:1fr!important}
/* the h3 border-bottom and the .towns border-top both fired, leaving an empty band
between two rules at the head of every column */
.acol .towns{border-top:0}
.ings{grid-template-columns:1fr!important}
.fgrid{grid-template-columns:repeat(3,1fr)!important}
.ab-items{grid-template-columns:repeat(3,1fr)!important}
.bxgrid>*:last-child:nth-child(3n+1),.fgrid>*:last-child:nth-child(3n+1){grid-column:span 3}
.bxgrid>*:last-child:nth-child(3n+2),.fgrid>*:last-child:nth-child(3n+2){grid-column:span 2}
.ab-items>*:last-child:nth-child(3n+1){grid-column:span 3}
.ab-items>*:last-child:nth-child(3n+2){grid-column:span 2}
/* The .towns span rules were removed: inside a ONE column .acol list a "span 4" on the
last child creates three implicit columns, which is what jammed South San Francisco,
Millbrae, Burlingame and Hillsborough into a single clipped row. auto-fill already
leaves no orphan here. */
.fr-grid>*:last-child:nth-child(2n+1){grid-column:1/-1}
@media(max-width:1080px){
.bstrip,.fgrid,.ab-items{grid-template-columns:repeat(2,1fr)!important}
.bxgrid>*:last-child,.ab-items>*:last-child,.fgrid>*:last-child,
.fr-grid>*:last-child{grid-column:auto!important}
}
@media(max-width:680px){
.bstrip,.fgrid{grid-template-columns:repeat(2,1fr)!important}
/* two columns at 390 squeezed .ab-head to 133px and threw the price badge 11px
past the viewport. The add-on bar and the menu filter rail go single file. */
.towns,.wrap.fgrid,.ab-items,.fr-grid{grid-template-columns:1fr!important}
.bxgrid>*:last-child,.ab-items>*:last-child,.fgrid>*:last-child,
.towns>*:last-child,.fr-grid>*:last-child{grid-column:auto!important}
/* the add-on price badge was hanging 11px past the right edge at 390 */
.ab-px{position:static!important;display:inline-block;margin-top:6px}}
/* membership tier buttons pinned to the card floor, not to three different baselines */
.tier{display:flex;flex-direction:column}
.tier .btn{margin-top:auto}
/* the .dropdiv ornament inherited body ivory while the band under it is cream,
so it read as a 74px strip of the wrong colour with a hairline down it */
.dropdiv{background:var(--cream,#EDE7DA)!important}
/* ══ v12.7 ══ */
/* A menu row is a link and nothing said so. The price was the loudest thing in it. */
.rgo{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:9px 15px;
border:1px solid var(--linel);border-radius:999px;white-space:nowrap;
font:600 12.5px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;
color:var(--gold-d);background:transparent;transition:background .22s,border-color .22s,gap .22s}
.rgo i{font-style:normal;transition:transform .22s}
.row:hover .rgo,.row:focus-visible .rgo{background:var(--gold);border-color:var(--gold);color:#1C2A22;gap:11px}
.row:hover .rgo i{transform:translateX(3px)}
.dark .rgo{border-color:rgba(247,244,237,.26);color:var(--gold-l)}
@media(max-width:760px){.rgo{margin-top:9px;padding:8px 13px;font-size:11.5px}}
/* The FAQ accordion sat 900px wide inside a 1240px band with 310px of dead margin beside
it. One wrap width, and the measure narrows by centring rather than by hanging left. */
.faqwrap .faq{max-width:1000px;margin-left:auto;margin-right:auto}
/* locations: three separate lists of 5 / 4 / 8 left one column hanging four rows below
the others. One grid of seventeen, filled by auto-fill, has no ragged edge. */
.agrid{display:grid;grid-template-columns:1fr;gap:0}
.agrid .acol{display:contents}
.agrid .acol h3{grid-column:1/-1;margin-top:34px}
.acol .towns{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important}
@media(max-width:680px){.acol .towns{grid-template-columns:1fr!important}}
/* the town "we also come to" grid drew empty bordered cells in its last row */
.towns a:empty{display:none}
.towns{align-items:stretch}
/* the decorative hairline on the menu page crossed two band boundaries and ran straight
through a photograph */
.phero.menu .vrule,.mhero .vrule{display:none}
/* ══ v12.8 ══ */
/* The orphan-protection rule was written for a two-column .fr-grid that no longer exists.
Above 1080 the grid is repeat(5,1fr) for exactly five tiles, and the rule stretched the
fifth into a full-width banner with a dead track beside it -- five peer feelings, one of
them five times the weight of the others, on the page the nav calls The Menu. */
.fr-grid>*:last-child:nth-child(2n+1){grid-column:auto}
@media(max-width:900px){
.fr-grid{grid-template-columns:repeat(2,1fr)}
.fr-grid>*:last-child:nth-child(2n+1){grid-column:1/-1}}
/* the band label was followed by a 44px empty strip between two rules: the border was
removed when locations became one grid, the margin that made room for it was not */
.acol .towns{margin-top:0}
.acol h3{margin-bottom:14px}
/* these two !important overrides were written for card grids and were reaching the footer
and the ingredient list, collapsing a designed 1.6fr/1fr/1fr and a two-column list */
footer .fgrid,.wrap.fgrid{grid-template-columns:1.6fr 1fr 1fr!important}
.ings{grid-template-columns:1fr 1fr!important}
@media(max-width:760px){
footer .fgrid,.wrap.fgrid{grid-template-columns:1fr!important}
.ings{grid-template-columns:1fr!important}
.ings li:nth-child(odd){border-right:0}}
/* the whole town cell is the link; a separate gold VISIT micro-label on 33 of them turned
the accent into wallpaper and threw row heights when a name wrapped */
.towns a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px}
.towns .go{opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.towns a:hover .go,.towns a:focus-visible .go{opacity:1;transform:none}
.towns .t{font-size:18px}
/* decorative hairline aligned to nothing, terminating arbitrarily, crossing a photograph */
.vrule,.phero.menu .vrule,.mhero .vrule{display:none!important}
/* the quiz result bag is display:none -- the markup and its src swap render nothing */
.qp-eye{margin-bottom:10px}
.ob-form input:focus{outline:2px solid var(--gold);outline-offset:2px}
/* ══ v13.0 the physician ══ */
.physband{background:var(--ivory)}
.physband .portrait-fig figcaption{margin-top:12px}
/* Mirrored against the founder block on desktop only. Below 900 the section inherits the
founder block's own stacking, unchanged, so there is one layout to maintain, not two. */
@media(min-width:901px){
.physband .split.wide{align-items:center}
.physband .portrait-fig{order:-1}}
/* ══ v13.3 ══ */
/* GROUND-AWARE GOLD. Darkening --gold-d to #7E6024 fixed 4.75:1 on cream and 5.33 on ivory
and simultaneously broke every dark surface: "CONCIERGE WELLNESS" under the footer mark
went from ~5.6:1 to 2.92:1 on all 40 pages. The token is used on BOTH grounds, so the
token itself has to know which ground it is on. Redefining the custom property inside
every dark container fixes all twenty-odd uses at once, rather than patching each one
and missing some. #E4C88F measures 10.56:1 on the footer ink. */
.dark,.deep,.hero,.phero,footer,.band.dark,.band.deep,.ovband.dark,.abouthero,
.drippage,.mhero,.tpage,.apage,.physband.dark{--gold-d:var(--gold-l)}
/* the arrow inside a gold-tinted chip needs the ink, not more gold */
.rgo i{color:inherit}
/* .ings li:nth-child(odd){border-right:0} zeroed only the ODD cells, so in a single column
every even row kept its right border and rendered as a closed box between open rules. */
@media(max-width:760px){ .ings li{border-right:0!important} }
/* the orphan rule at max-width:1080 carries !important and outranked the 900px companion,
so between 681 and 900 the fifth tile sat alone with an equal empty cell beside it */
@media(max-width:900px){
.fr-grid>*:last-child:nth-child(2n+1){grid-column:1/-1!important}}
/* REMOVED on Tiffany's instruction, 8/31: "take out all the random A next to
each location".
It was never meant to be an A. This CSS lives in an ordinary Python string,
so the chevron escape 'A' was eaten by PYTHON as the octal escape
followed by a literal A, and the stylesheet only ever received a control
character and the letter. Every one of the seventeen towns carried it.
The fix, if the affordance is ever wanted back, is to double the backslash
or to paste the character itself. Removed rather than fixed because she
asked for it gone, and the "Visit" label still appears on hover and is
always visible on touch. */
.towns .go{margin-left:auto}
@media(hover:none){ .towns .go{opacity:1;transform:none;color:var(--mut)} }
/* the supporting portrait was landing in the WIDER grid track, so the physician's picture
rendered 22% larger than the founder's on the founder's own page */
@media(min-width:901px){
.physband .split.wide{grid-template-columns:.82fr 1fr}
.physband .portrait-fig:before{left:34px;right:-22px}}
/* ══ v13.5 ══ */
/* THE HERO HEADLINE GOT LONGER. "You stay put." is 13 characters; "Not everyone runs it
past a doctor." is 35. The operative rule was .hero.shotfull h1{font-size:clamp(38px,6vw,80px)}
with max-width:none -- at 80px that second line needs roughly 1340px of measure inside a
1080px wrap, so it broke into a ragged third and fourth line and the two-beat structure
the headline depends on disappeared. Sized so BOTH lines hold at every width, measured
rather than guessed. .xl is untouched: the drip and about heroes still use it. */
.hero.shotfull h1{font-size:clamp(31px,4.55vw,62px);letter-spacing:-.022em;line-height:1.06}
/* The reassurance line under the buttons. It answers "am I being shortchanged or upsold"
with two facts about Aura and no claim about anyone else -- see the note in voice.py.
#A3B5A9 on #131E18 measures 8.6:1; it reads quiet without being unreadable. */
/* THE HERO IS NOW FOUR ELEMENTS, NOT FIVE. The five bag chips came out - Tiffany, 8/30:
"take out under it where you can select your bag, it looks cluttered, just make it a
clean hero so you can easily identify what's going on." They were also the wrong ask at
the wrong moment: the hero's job is to say what this is, and five product choices in the
first screen makes the visitor pick before they know what they are picking. Every drip
page is still linked twice more from this page, so nothing is orphaned. With the chips
gone the block is shorter, so the floor comes up to keep the hero from bottoming out in
empty scrim. */
.hero.shotfull .wrap{padding-bottom:clamp(72px,8.5vw,116px)}
/* the longer lead ran to four lines with "living room." alone on the fourth. Widening the
measure from 62ch pulls it back to three full lines on desktop and reads faster, which is
what the extra sell needed anyway. */
@media(min-width:1024px){ .hero.shotfull .lead{max-width:78ch} }
.hero.shotfull .micro{margin:24px auto 0;max-width:72ch;
font:500 15px/1.6 var(--ui);color:var(--mutd);text-align:center}
@media(max-width:760px){
.hero.shotfull .micro{margin-top:18px;font-size:13.5px;max-width:none;line-height:1.55}
.hero.shotfull .micro span{display:block}
}
/* text-wrap:balance is set on every h1 and it does NOT stop at a
: Chromium balances the
whole element, so a two-line headline broken by hand came out as three near-equal lines
("Not everyone runs / it past a doctor.") even though the second line fit its box with
110px to spare. The hand break IS the headline here, so this one opts out of balancing and
still wraps normally when the viewport is genuinely too narrow. */
/* text-wrap stays BALANCE here, but only because the .ln wrappers below make it behave.
Balance operates per block container: with the max-width collision fixed, each hand-broken
line balances inside its own .ln, which is what we want -- desktop leaves both lines alone
because they fit, and a phone splits the long line evenly instead of orphaning "doctor."
on a line by itself. (Note for later: `text-wrap:normal` is NOT a valid value --
wrap|nowrap|balance|pretty|stable -- so writing it silently changes nothing.) */
.hero.shotfull h1{text-wrap:balance}
/* THE HERO PHOTOGRAPH WAS NOT VISIBLE. The scrim ran .86/.70/.82/.94 top to bottom over an
image already at opacity .9, which is roughly a 92% black wash - the room, the chair and
the drip stand were all guesswork. Lightened to the point where the photograph reads and
no further; the luminance under the headline and the lead was sampled off the rendered
page afterwards rather than assumed, and both still clear 7:1. */
/* A CLASS COLLISION, and it was breaking every hero headline on the site. The line-reveal
wraps each headline line as ... - "in" is the
animation's arrived state. .hero .in{max-width:720px} is a v4.0 layout utility for the
old left-aligned hero column. So every revealed headline line silently inherited a 720px
measure: "Not everyone runs it past a doctor." needs 805px at 62px type inside a 1016px
box and had 720, so it broke into a third line. Nothing looked broken enough to notice.
Scoped out here rather than renaming the state class, which the JS and three other
components also key off. */
.hero .ln.in{max-width:none}
/* THE HERO PHOTOGRAPH WAS NOT VISIBLE. A flat vertical scrim running .86/.70/.82/.94 over an
image at opacity .9 is roughly a 92% black wash - the room, the chair and the drip stand
were all guesswork. Washing the whole frame is also the wrong tool: it has to be dark
enough for the worst pixel behind the text, so it drags the parts with no text over them
down too. Replaced with a centred elliptical scrim that is heavy where the words are and
light at the edges, over a gentler vertical one for the top and bottom. Contrast was
sampled off the rendered pixels behind each text block afterwards, not assumed. */
.hero.shotfull .shot img{opacity:.96}
.hero.shotfull .shot:after{
background:
radial-gradient(118% 80% at 50% 47%, rgba(9,15,12,.88) 0%, rgba(9,15,12,.80) 40%,
rgba(9,15,12,.38) 76%, rgba(9,15,12,.14) 100%),
linear-gradient(180deg, rgba(12,19,15,.60) 0%, rgba(19,30,24,.30) 34%,
rgba(19,30,24,.38) 70%, rgba(12,19,15,.86) 100%)}
/* ══ v14.2 — THE MENU PAGE ON A PHONE ══ */
/* Tiffany, 8/30: "the Hydrate Recover Defend Signature Optimize looks really weird on
mobile... I like maybe on mobile not having that and more doing like rundown dehydrated.
Start with how you feel. I like that a lot."
*
* .mtypes is a 01-05 index of the five product names. On a desktop, five columns under a
* hairline read as a contents page. Stacked on a phone it becomes 624px -- most of a
* second screen -- of near-identical rows, and it asks the visitor to choose between five
* words they have not been taught yet. HYDRATE / RECOVER / DEFEND / SIGNATURE / OPTIMIZE
* mean nothing until you have read the page they are indexing.
*
* The feel rail immediately below already asks the better question and points at the SAME
* five anchors, so hiding one and promoting the other loses no destination and no link.
* Desktop keeps the index. */
@media(max-width:900px){
.mhero .mtypes{display:none}
/* the rail is now the first thing after the buttons, so it gets the room the index had */
.feelrail{padding:30px 22px 46px}
/* 24ch broke this into three ragged lines. 32ch holds it to two even ones. */
.fr-lead{font-size:14px;line-height:1.5;letter-spacing:0;color:#CBD9D1;
max-width:32ch;margin:0 auto 18px}
.fr-grid{gap:10px}
.ft-shot{height:138px}
/* the FEELING is the headline on the tile and the product name is the footnote, which is
the whole point of the change -- the old rail had that hierarchy upside down */
.ft-label{left:15px;right:15px;bottom:34px;font-size:17px;line-height:1.24;font-weight:600}
.ft-meta{position:absolute;left:15px;right:15px;bottom:13px;z-index:2;
font:600 11px var(--ui);letter-spacing:.13em;text-transform:uppercase;
color:var(--gold-l);text-shadow:0 2px 12px rgba(0,0,0,.7)}
/* "See the drip" was a hover affordance and a phone has no hover, so it stays hidden and
the price line does the work of telling you the tap goes somewhere */
.ft-go{display:none}
}
@media(max-width:420px){
.ft-shot{height:126px}
.ft-label{font-size:15.5px;bottom:32px}
.ft-meta{font-size:10.5px;letter-spacing:.11em}
}
/* on desktop the sub-label would compete with the hover affordance, so it is not shown */
@media(min-width:901px){ .ft-meta{display:none} }
/* THE JUMP RAIL LOOKED BROKEN, NOT SCROLLABLE. .jr-in is 675px of chips in a 390px
viewport with overflow-x:auto and a hidden scrollbar, so on a phone the fifth category
is sliced down its middle at the right edge and nothing says it moves. A cut-off word is
read as a layout bug, not as an invitation to swipe.
The rail itself is worth keeping -- this page is 11,000px tall on a phone and it is the
only way back to another infusion without scrolling the whole thing -- so it gets an
affordance instead of being deleted: the chips fade out into the bar at the right edge,
which reads as "there is more this way". The mask is on .jr-in and the background lives
on .jumprail, so the sticky bar itself stays opaque and only the chips fade. */
@media(max-width:900px){
.jr-in{padding:9px 16px;gap:6px;scroll-snap-type:x proximity;
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 38px),transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 38px),transparent 100%)}
.jr-in a{scroll-snap-align:start;font-size:10.5px;letter-spacing:.09em;padding:8px 13px}
/* the hero used to end on the 01-05 index; with that gone its floor was left hanging
over the feel rail */
.mhero .wrap{padding-bottom:22px}
}
.bpband{padding-top:86px;padding-bottom:92px;scroll-margin-top:112px}
/* The add-on hero h1 is now the doctor's own section title, which is a great
deal longer than the four-word headline that used to sit there. His words do
not get trimmed, so the type scales to them instead: smaller clamp, tighter
measure, and it clears the logo watermark. */
.phero.apage.abhero h1{font-size:clamp(30px,3.5vw,50px);line-height:1.12;max-width:15ch}
/* ── THE SOFT-OPENING BANNER ──────────────────────────────────────────────
Above everything, on every page, not dismissible. Gold on deep green so it
reads as an announcement rather than as a cookie bar people have learned to
swat away. It carries the one fact the rest of the site cannot: Aura is not
trading yet. */
.openbar{background:var(--gold);color:#22160A}
/* ── THE ABOUT HERO ───────────────────────────────────────────────────────
The headline ran four lines at the shared .apage display size, which put the
whole left column out of balance with the portrait and pushed the stats to
the floor. It gets its own scale and its own measure, the stats go to three
across, and the portrait is anchored on the face rather than centred, which
is what was cutting the crop off at an odd point. */
/* The headline carries its own line break. Sized so each half FITS on one line
in the left column, because at the shared display size it wrapped to four and
that is what made the hero look top heavy. */
.phero.apage.abouthero h1{font-size:clamp(29px,3.1vw,45px);line-height:1.12;
max-width:none;text-wrap:balance}
.phero.apage.abouthero .lead{max-width:46ch;margin-top:22px;font-size:19px}
/* the byline is what makes the first person read as his and not as copy about
him, so it sits close under the sentence rather than floating off it */
.phero.apage.abouthero .sig{margin-top:26px;color:var(--gold-l)}
/* the stat row is gone, so the copy block sits on its own and gets the air
instead. A short column beside a tall portrait is the point here, not a fault. */
.phero.apage.abouthero .ah-split{align-items:center}
.phero.apage.abouthero{padding-bottom:104px}
@media(max-width:900px){.phero.apage.abouthero{padding-bottom:56px}}
.abouthero .ah-shot img{object-position:50% 24%}
@media(max-width:900px){
.abouthero h1{font-size:clamp(30px,8vw,42px);max-width:none}
.abouthero .acreds{grid-template-columns:1fr 1fr!important;gap:4px 18px;
margin-top:34px;margin-bottom:30px}
}
/* the review photograph is a 4:3 landscape and the portrait crop was cutting the
drip stand off one side and the chair off the other. It keeps its own shape. */
.portrait-fig.land img{aspect-ratio:4/3;object-position:50% 50%}
.physframe figcaption{margin-top:14px;font:600 10.5px var(--ui);letter-spacing:.2em;
text-transform:uppercase;color:var(--gold-d)}
/* with the phone gone the topbar's right slot is a statement, not a link */
.tb-solo .tb-tel{color:#8FA79A;font-weight:500;letter-spacing:.06em;text-decoration:none;cursor:default}
.ob-in{max-width:1240px;margin:0 auto;padding:10px 32px;display:flex;align-items:center;
justify-content:center;gap:14px;flex-wrap:wrap;text-align:center}
.ob-tag{font:700 10px var(--ui);letter-spacing:.2em;text-transform:uppercase;
background:#22160A;color:var(--gold-l);padding:4px 10px;border-radius:100px;white-space:nowrap}
.ob-in p{margin:0;font:500 13px/1.5 var(--ui);letter-spacing:.01em}
.ob-in p b{font-weight:700}
.ob-in a{color:#22160A;font:600 13px var(--ui);text-decoration:underline;
text-underline-offset:3px;white-space:nowrap}
.ob-in a:hover{opacity:.72}
/* the banner's one action: opens the 10% signup box */
.ob-in a.ob-join{background:#22160A;color:var(--gold-l);text-decoration:none;
padding:6px 14px;border-radius:100px;letter-spacing:.02em}
.ob-in a.ob-join:hover{opacity:1;background:#3A2812}
/* the opening countdown, in the banner and in the signup box */
.ob-count{font:500 13px var(--ui);white-space:nowrap;font-variant-numeric:tabular-nums}
.ob-count b{font-weight:700}
.ob-cd{display:block;margin-top:6px;font:500 12.5px var(--ui);letter-spacing:.02em;
color:#B9C7BE;font-variant-numeric:tabular-nums}
.ob-cd b{color:var(--gold-l);font-weight:600}
.ob-count[hidden],.ob-cd[hidden]{display:none}
@media(max-width:900px){
.ob-in{padding:9px 18px;gap:8px}
.ob-in p{font-size:12px}
.ob-in a{font-size:12px}
.ob-count{font-size:12px}
}
/* ── THE DOCTOR'S LABELS ──────────────────────────────────────────────────
His eleven labels ship with his capitals and his colons. The site's label
styling uppercases everything, which would turn "Clinical Focus:" into
"CLINICAL FOCUS:" on screen -- same words, not his typography -- so
text-transform is switched off wherever one of his labels sits. */
.doclab{text-transform:none!important;letter-spacing:.01em!important}
h2.doclab,h3.doclab{font-family:var(--dsp);font-weight:400}
.doclab.sm{font:600 12px var(--ui);letter-spacing:.06em!important;color:var(--gold-d);
margin-bottom:8px}
.dark .doclab.sm,.idealband .doclab.sm{color:var(--gold-l)}
.doclab.sm.tt{margin-top:22px;color:var(--mut)}
.doclab.sm.tt b{color:var(--ink);font-weight:600}
.doclab.in{font:600 12px var(--ui);letter-spacing:.04em;color:var(--gold-d)}
.bp-exp .doclab.in,.bp-best .doclab{color:var(--gold)}
.ab-spec dt.doclab,.bp-spec dt.doclab{font-size:11.5px}
.ab-gate .doclab{font:600 11.5px var(--ui);color:var(--dc,var(--gold-d))}
.ab-gate:before{content:none}
/* his booster and bundle section titles are full sentences, so they get a
measure and a jump-rail offset rather than running the width of the page */
.boostband h2,.bpband h2{max-width:20ch}
#boosters,#infusions{scroll-margin-top:118px}
@media(max-width:900px){.phero.apage.abhero h1{font-size:clamp(26px,7vw,36px);max-width:none}}
.bpband .lead{max-width:58ch;margin-top:16px}
.bp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:44px;
background:rgba(212,178,111,.22)}
.bp-card{position:relative;background:var(--ink);padding:34px 34px 30px;
transition:background .35s}
.bp-card:hover{background:#22332a}
.bp-top{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:start;
padding-bottom:18px;border-bottom:1px solid rgba(212,178,111,.3)}
.bp-n{font-family:var(--dsp);font-size:30px;line-height:1;color:transparent;
-webkit-text-stroke:1px var(--gold);font-variant-numeric:lining-nums}
.bp-card h3{font-size:25px;line-height:1.16;color:var(--ivory)}
.bp-tag{margin-top:7px;font:500 11.5px var(--ui);letter-spacing:.09em;
text-transform:uppercase;color:var(--gold-l);line-height:1.5}
.bp-px{font-family:var(--dsp);font-size:34px;line-height:1;color:var(--gold-l);
font-variant-numeric:tabular-nums lining-nums}
.bp-spec{margin:20px 0 0;display:grid;gap:10px}
.bp-spec>div{display:grid;gap:6px}
.bp-spec dt{font:600 10px var(--ui);letter-spacing:.18em;text-transform:uppercase;
color:var(--gold)}
.bp-spec dd{margin:0;font-size:14.5px;line-height:1.62;color:rgba(247,244,238,.9)}
.bp-exp{margin-top:18px;font-size:15.5px;line-height:1.68;color:rgba(247,244,238,.76)}
.bp-best{margin-top:18px;padding-top:16px;border-top:1px solid rgba(247,244,238,.13);
font-size:14.5px;line-height:1.6;color:rgba(247,244,238,.9)}
.bp-best span{display:block;font:600 10px var(--ui);letter-spacing:.18em;
text-transform:uppercase;color:var(--gold);margin-bottom:6px}
@media(max-width:900px){
.bp-grid{grid-template-columns:1fr}
.bp-card{padding:26px 22px 24px}
.bp-top{grid-template-columns:auto 1fr;gap:14px}
.bp-px{grid-column:2;font-size:29px}
.bpband{padding-top:64px;padding-bottom:70px}
}
/* v10.5 blur-up: 24px of the picture, inlined, so no card is ever
an empty box while the real file is still on the wire */
.pic{display:contents}
.pic>img{background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
.lq-airy-window{background-image:url(data:image/webp;base64,UklGRqwAAABXRUJQVlA4IKAAAABQBACdASoYABAAPulgqE0pJaOiMAgBIB0JYgCsIDZCdaWWrjJBC7leV9f0AP2YVjcRoP8ZTleANrByI9UB6E0ejpsjyzsGCsWXUxb0UsIV4hfWigsCjB+DjsFV+MMMOO+qaIwPgt4y7mxuShZ3QUOzbdbQzeCdo9cXFZ1FLxyofbKLZWlltaJ4pChTO9Gm8YNELZSW+IkEycSbrTWwhgAA)}
.lq-amber-bag{background-image:url(data:image/webp;base64,UklGRnIAAABXRUJQVlA4IGYAAACQBACdASoYAB4APt1apE0opSOiMAwBEBuJYwC2yCHfT6w6d3RWKIXosHEWdAAA/vQgpFJ/ozywKRH5to8ur3Tv8gELNhlAYYv7dvWZMm0wQc3brMUemrg/4eM0cgW5aTc4feVAAAA=)}
.lq-brass-detail{background-image:url(data:image/webp;base64,UklGRsoAAABXRUJQVlA4IL4AAACwBQCdASoYABgAPuloq1CpJaOiqAqpIB0JYwC26TNgxQujwLGavP8+1S3rGzFL9sY8sKGyPaAA/vDiTXa3f7+67ejyImnGf9K5eAlA108gyEud80Q4maOaXDsYdHbHVyy1MF7othc321Dzn8wF0rbwAArJa5jgvgcXv/nbxyTfjRqQTjAxezLhCcLUt9JuNBD5AMT3YBQv4iy3DqyncLG2Hm3SIliEiWTGx7grfiIUGwi4RSaNadEWQ2iYikAA)}
.lq-bst-keratin-matrix{background-image:url(data:image/webp;base64,UklGRmIAAABXRUJQVlA4IFYAAAAQBACdASoYABEAPtVYo00oJSMiN/qoAQAaiWUAvzggvDAmEd6jlHd9AADKeo/Z4KQdRY5+ieMJpJz7J391JtyjrB28iQXIaO346uHhjCrsxwcTqgAAAA==)}
.lq-bst-luminous-glow{background-image:url(data:image/webp;base64,UklGRlwAAABXRUJQVlA4IFAAAAAwBACdASoYABEAPt1apU0opSOiMAwBEBuJZwDGQBIwG6MoN3gvkv3HhwAA/hRwCR520qstAPPMadsVjWewhnAYjbLvYKZ+6dRUCqmhphAAAA==)}
.lq-bst-metabolic-ignite{background-image:url(data:image/webp;base64,UklGRsIAAABXRUJQVlA4ILYAAABQBQCdASoYABEAPuloq1CpJaOiqAqpIB0JQBOmUI/cApMh3vWlC2SQFXNMonNgWf9V7AAA/tq5q/wKZgeDg5ZdBHTLay05LpfKam/2OU+/0Fg57XBe4Tc4CAddJcJ+9WhLPeZLqv2ES8Xud8M4m0r/f24m8LTeyq5qoMco1NgyTDdXZPF4ZStUvthrQKHfrX0JxI9kMayBQ9QYgWVQMMhZQAQR2ZkOfMtFfrE6hIQNpuNrS8AAAA==)}
.lq-bst-neural-charge{background-image:url(data:image/webp;base64,UklGRrQAAABXRUJQVlA4IKgAAAAQBQCdASoYABEAPulmrVApJSQiqAqpIB0JYwAALoXqh/NTysANVKpEU9lBmEeeOFKAAP7uwhBAoa9vTNJvN/c3I3yJGDW2Kyi3BF2zS4hIBOVINxtSGcouthagvhtOkpEp3Vx/gATzrPEqC2TeHKrt3XpOQfNvUCxgwEOXEJ/daDw2lnVbwPRvsFURhbueNjTuE+RVbzV63jDVd1/TI1XujGksWmJEMAA=)}
.lq-bst-shield-protect{background-image:url(data:image/webp;base64,UklGRnIAAABXRUJQVlA4IGYAAAAQBACdASoYABEAPrVMn0snJCKhsBgIAOAWiWcAwcwAzvGVNWXP30vGAAD+zXuH8NyL9hZghaelTQ3jxpHDoBLEXc4OOq5SFFQAGJKp9yNhTXqXIbODOnUCoby4gy/8X2uddiQAAAA=)}
.lq-bst-youth-longevity{background-image:url(data:image/webp;base64,UklGRqAAAABXRUJQVlA4IJQAAACwBACdASoYABEAPulmq1ApJSOiqAqpIB0JZQC7AA3xwIgsF8vZIUu2WVJPWdwAAP6Bc/mTeKte3pm3veE4+K5JDmpWKrCzpx0UOXqkajWfAIJj3uWiPJKoMDeIEwa1E35NlJHLARt3UCP2e4qXkLO035TgKt4snACyLLjNjmBfJvaeDWGEEQEPCKrEiwXgEXxnkGwA)}
.lq-cesar-nurse{background-image:url(data:image/webp;base64,UklGRlABAABXRUJQVlA4IEQBAABwBwCdASoYACIAPuliqk2pJaQiKqwBIB0JQBTo8HZZI7ilUctslnlozPL2MBDT32ANh/vlVE2smEhaJHZnFK/noP0UAAD+kLOPZovyLPEoWJ3d4Sh8vYKeHe91KWTE7on3zajBqsS/Hx4pEh3NuU2HnUW0LymKRqpATnag155Ah2I8d48TNGrNe9bLHms16G0seGe0Lv1l1ze5pv7sx8bFrb8ZrmHAXHdKDrBeaUyNPsKQL05bc6rcwGZY/Xdn1ay5OaEMik9AMjUUQg31ge2ijf8XGk7j6aDPGqMZbeAgIrU9UVdNc5Z2Yz4keYhNaAkxhOR6KyVIFyjCHU67gwbUVvgkAoRRyEble50PclZesy4EX6H1OBs4IWrS1vIAO1BfGOgSLYomhuH3N0KJaTwGsWXtSTU3IxRuDPaTgZiGgoIAAAA=)}
.lq-cesar-portrait{background-image:url(data:image/webp;base64,UklGRh4BAABXRUJQVlA4IBIBAABwBQCdASoYABoAPrVSo00nJKMiKAgA4BaJbACdMoPKGA0iu1l4bWck/fxll7bgags5owAAAPkrrtgGewkf+MZsNBcHD3L0WP19JTwfSESK/N/0slTFeOk+fWpY1X5zl+woXjhRJc0PAmoXhOiOVuA9LphZsYDK0pp1rfOTweQPU5gLsVhPpS4s1KDBBGvH4FmlT3CKSHSnpFpDmlDe26e1x9owIqYRk7MvBSAytoD4p3mVo5ICgluniVjEeqnYF78fLmrXmvP9H7TPZJprFxTWeVsZSwz2GpEiIS01rV8wH9pfujxZxc/yn5kCDe2Wh+yIrWzZ+n966Y25gdP7NnLnW8Y6pWsN3KN29vvhLzF0AAAA)}
.lq-cesar-story{background-image:url(data:image/webp;base64,UklGRugAAABXRUJQVlA4INwAAADQBQCdASoYAB8APuliqE8pJSOiMBgIASAdCUATplAM4DSZiKOv2QLVcL6xGu2fBTxeLhMiS+IAAN9m/Pbjx+cOEqdN/CadgMYdSH2U41GFSWSXfMddd4O+P/OK3ObLZ+xMYND6EvIlcMUjWKK0/2wJQxSFRJu3Na6lHcXJ5/Cb9C9GUPlp+kKp3hpTxk9sQcfg3pxZKsGU43PvDZRbQHurrps9ykXA5E0kyzqKJqAsLtJSMfdrWra9BTXCe0RRv12BqB6hHbFBGYONZIpOiv/iHm6hTZ9HKe2IrgAA)}
.lq-clinical-morning{background-image:url(data:image/webp;base64,UklGRrAAAABXRUJQVlA4IKQAAADQBACdASoYABAAPuleqE0pJSOiMAgBIB0JYwCdMoAluhgcm9NEXLETuiU0pLMN3AD+1PoAGH3+kLzzYQbMjhO+wZ8ff/MSKAKVv7qWZy2BHei65bC8cuBsTjFuHtDvUcC78xFeL6xRZbkkYfBxK9N3E4tf+UGBc/t/+m7w892QtQsMG5ZLzyommCYksG7z9LEeRCBv2nwf6Ecm2Yx6UevPgNOAAA==)}
.lq-dr-hill{background-image:url(data:image/webp;base64,UklGRrgAAABXRUJQVlA4IKwAAACwBQCdASoYAB0APu1qqU8ppiOiMBgIATAdiWgAwN3cAHicvLlCBNBrItL1AATTGtKltPS4pQAA/u1FfwTr16p+ggLCe42aLRTTFcxpU8oSEsAAla8NoVzEWsUpFXSX8y8Otkpc2gBwA8pV+H4ce2ZvG6QrojLUmSuP1G9Ow7dnfzaOB9x4CxgYgh1SGrtmuUBQD2rxv0q2ruXyWliVnD9PCsxEBh3zbxKbZogA);background-size:cover}
.lq-feel-defend{background-image:url(data:image/webp;base64,UklGRqoAAABXRUJQVlA4IJ4AAAAQBACdASoYABAAPulgqE0pJaOiMAgBIB0JZQCdABwo2Fn4DLDNtOFDsAD1VUtkHq9dWNrq05Isbsa4AdVLLTuiPdfrJaQHkojoBEurHhGsECszhRR/oN9n9Q+JCAh64vmMg+2IkiGge6ifoCh55YC92qLbv8hM/wkNSoG5clC4k7wKFZExbncXnDkuQGfLDQnDfuU/CU9Kp3KBhvgAAA==)}
.lq-feel-hydrate{background-image:url(data:image/webp;base64,UklGRqQAAABXRUJQVlA4IJgAAABQBACdASoYABAAPuleqE0pJSOiMAgBIB0JQBYeNQJAITi+TkUDMvlFf+yAAP7ulAGkALMqYfJ3zgnCg9C7oxaoAn4oogodK3Lz8keYCgHrd+QovC3lGdMuuSLoPET6aWeO20PszooONTtkp3KG2h+zUTE7ve4uS7rVMqyWmmmkZB3kAg7YsIiO8oBpWBZNW2bSpzNZ1FAAAA==)}
.lq-feel-optimize{background-image:url(data:image/webp;base64,UklGRpIAAABXRUJQVlA4IIYAAADwAwCdASoYABAAPulep00pJSOiMAgBIB0JYwC7AB6V7Klym/JklAaAAP7xhUdMfeBL/CT8LRfKl4MlrMaNAcJeAAhf7VnMZWIwBq0Z+Pi9tut/zYHAeq0h3GlNcmkUKwJB3D2LObNdSEJBQ4NZzpjpF6DMBigueH/Hg9wbL12pdtSVT9AAAA==)}
.lq-feel-recover{background-image:url(data:image/webp;base64,UklGRpgAAABXRUJQVlA4IIwAAAAwBACdASoYABAAPuleqE0pJSOiMAgBIB0JQBdl4AA5/L9sZ6H5MjvoDMAA/uzHH9wBnqKqOACkH7wCoc82E6J48JldWEojfO7Jc4r8x+SatnwwCiunNnT2Uz6klq0l2R5N8aRFc9bt263XPWGN2HGNpjzt/4SeKaXpseDknMstx30pBHU3H4hj3wAAAA==)}
.lq-feel-signature{background-image:url(data:image/webp;base64,UklGRswAAABXRUJQVlA4IMAAAACwBACdASoYABAAPuleqE0pJSOiMAgBIB0JQBOmUAS4AqkT6sBhFSrSIoUeXWGwAPjuZq3VOXakw5pahrVOVP6G/5Mss7gNrPX38GUjWJwEaFV6SQiQPrWWPLbuCdPMyktaEBs9iTWHtNe9GGaQwTIr+aSPLQBwsNKar7K4w2MpzCcrd8ZbjEtJZNNN8wWzxcw1O+pWPznvM/v/dqHt1iiO7+FV9WUXJ1L4as8iD9ZMFRFt6DsbrwtQRxLkP4QAAAA=)}
.lq-for-aura-recover-1{background-image:url(data:image/webp;base64,UklGRq4AAABXRUJQVlA4IKIAAACwBACdASoYABAAPulep00pJSOiMAgBIB0JYwC7AYwI5sItyHRuzGs+imb3XWYAAP2nxcX3iynf86OFOEqXN6mD0ElRq8Q82R4POu2szFRWIj/hC4DNZfNO9lDNLDjH6IubQldDlLlMhATRoCHYdF/PJf4a9yZTTfNUuTuDxfffcv3CxwBCu45g0sqcpT9b32+yIPMbgm3gHEE55ZGjxls9AAA=)}
.lq-hero-home-two{background-image:url(data:image/webp;base64,UklGRpgAAABXRUJQVlA4IIwAAAAQBACdASoYABAAPuleqE0pJSOiMAgBIB0JZQC06BnNifPUWzmBCqomAAD+NFYYaelcuE0o1fqqkPUiH2BZrI/uu5UsTpVoLkrj5L2EhhOPm0qf9Bz8uvnIbp5+OllcH6BoF9pYlIOXCf8nWu5G8CtVKtFxn7fHb3TzZlwrb4EGpjOOJkFbpwC+4mAAAA==)}
.lq-hero-lounge{background-image:url(data:image/webp;base64,UklGRo4AAABXRUJQVlA4IIIAAADQAwCdASoYABAAPuleqE0pJSQiMAgBIB0JQBOgAxutK8bCYsHI0HAA/t8eUCGHNiaa8hRMjA5Z6VDH/VjM4sVrsBAZnTtZnuODgQRCb841yYpJtpLb4raZYqwlqXdtAcOO/w3Pyc0ZBvEoMC+bgNKhZFqsmG+8I7lg+xRzGgLKJfAA)}
.lq-linen-weave{background-image:url(data:image/webp;base64,UklGRn4AAABXRUJQVlA4IHIAAAAwBQCdASoYABgAPulsrlIpJaQiqAgBIB0JZQDE2BBcibw6Lr9tnT5SrhXyybRlc24TTAD+FNoXiJBd+tP5VFq3fik0T07DktEYaJGRBEHFC5MlSawvJHWTE+/GbSL3BjIWSVAUGfgGSCqZUeT2hVAAAAA=)}
.lq-morning-blinds{background-image:url(data:image/webp;base64,UklGRpQAAABXRUJQVlA4IIgAAABQBACdASoYABAAPulgqU2pJaQiMAgBIB0JZQC06CBjk8H3yYVG1398hlMgAP6tkAo3NFP4v6pmeKaDYn35AybNtdXVSsP2JzynPSRo53KYbd8hwvKxN6cmW96R+fr/mCb2l1LEPVIxhj58REwq+dM4nRiPUzG2fH9aVKsKMQyvDst83pDM8AAA)}
.lq-night-arrival{background-image:url(data:image/webp;base64,UklGRsYAAABXRUJQVlA4ILoAAACQBQCdASoYAB4APulsrlGpJaQiqAgBIB0JZADA3BEdEV30bCF93PblNzS8+fb7UZIF61OHgAD+7NeCKGulRloFTwUeorkwTI/BMFEWrc34efAm5Y6lwYhYx2Gm6fklXjbGZRsrWfxt9rU68Oanrjhrnqm+Qhu6WEvG7UAaQIhHNwQJgL0ahtEPBLqvB88xuBWsItsQ4vdQIAC1oygoqg/SDaQVzRgW/dijwJ+q+Os+15H20JesI8E5EAA=)}
.lq-organic-arch{background-image:url(data:image/webp;base64,UklGRswAAABXRUJQVlA4IMAAAADwBACdASoYAB4APulmp0+pJaMiKA1RIB0JYwC7AEbJim1Cq2co2xwCd2BTuPgbJ0AA/uaa8jys4lhmqHec2XkSzD/Q6wDf8iiqRq/Y5Ho4Ww5NRMiq/crCk7Xv3tu/NtDg9avb+JDW7oJWps8vKavLuMU71QEn/H4CAxi3w+5rYNvxndc2YBfzaj77FTEByqpTdoEECM9jKzqrg62n6Le1NZNsSG8pFdRNIB2iJ6s48tTJAFd/i09/D7kFNVXeAAA=)}
.lq-pick-your-drip{background-image:url(data:image/webp;base64,UklGRr4AAABXRUJQVlA4ILIAAACwBACdASoYABAAPulgqE0pJaOiMAgBIB0JZAC7MoAltRldAF5VhkgJvjDgMqmgAP3ACr7o7CPKAPPK7Yd1iX7YbTl1pjHga04xE2uD7+pAaLRIYRDEdX3OtFrpeQOFUzXr21JH/a5fRiHHk5gr+NrcG2HmUb44wXTSUx0ceijNCJKhQ6VeoNaTf1Y8i0/4N70iby6s2cC8VZdtuSbMHxoEF/d5twD0BHmUBjCwZwNWkkAA)}
.lq-review-chair{background-image:url(data:image/webp;base64,UklGRsIAAABXRUJQVlA4ILYAAABQBQCdASoYABIAPrVKoEunJCMhsBgIAOAWiWMAsR9HSIAVBC9op9uMuoXeoHnewdiJboAA/uqahXuCYK6ii3a6v9+deJZTj8SzA34enY3hQ69/UiX7/dvEpHMT3JKQ/orDk4eWEzVlJQKqaxLT8FFrzIuh3MYVt6+f/NSze6LRboSr/LuVlzHQkYEm0UotrmRHcI/aUhSb9/iexI7jVSSAGlSiEHaIeNo1MUi6bG+RepxDe/t4AA==)}
.lq-ritual-lamp{background-image:url(data:image/webp;base64,UklGRr4AAABXRUJQVlA4ILIAAADwBQCdASoYAB4APuVeq00pJSQiMBgMASAciWIAuwAQuXRS8+78JH/q4mVxXQK/KETal3v7XjnUAAD+8Muc4F0jBb/qTdtFgB09hoJue37CxhbpCOE6LSs5M785ia4M+agmO9/jYmMzfnqgaLvnBUdMz6tYDg0dtad3bnkmqAQVJWx6DnEmrbKhrzSqGIKalQNU3yTR57biXKTUjkxkS73A9kw/1MzRDMr1tTabFvydfqYA)}
.lq-room-kitchen{background-image:url(data:image/webp;base64,UklGRqAAAABXRUJQVlA4IJQAAACwBACdASoYABAAPuleqE0pJSOiMAgBIB0JQBOmUAS4AxdDjzVz9vdEgYt95mMAAP7W9yTH+LibHh8XiAHqMW7znvMZKfK0yT4IYMWQQLjJN2irJNT2w0EoMlsw3gLqg9di1VlKW4YBd2k7kqp3St9IX3CeFJ5QBUTWKBAyuHl3cggwO6FqCU+CkwZ1h0ONGroNr0IA)}
.lq-room-living{background-image:url(data:image/webp;base64,UklGRrIAAABXRUJQVlA4IKYAAABwBACdASoYABAAPuleqE0pJSOiMAgBIB0JZQCdMoAC5RrEuw+fuRLW98FGAAD+7A50OvAbRn8gDMAADy+Ow6jImrzOPGFXs9UBZnNgeDoRRxQJqTWXtlyQyhIsiDN06rJRzklPT624Wfz/Ndlbql+QyhW1S74RY3YMVhrLMYxGa8whZIf7UBPWc1c0exzbompIS0bWuTBPArXR5qcxjDiAOtMzgAAA)}
.lq-room-office{background-image:url(data:image/webp;base64,UklGRq4AAABXRUJQVlA4IKIAAAAQBACdASoYABAAPulgqE2pJaQiMAgBIB0JZQCo9Bxa+tsFu9CguTVFGAD8dBVMrVvrvSagH8x97yJSRZTG6nVpII3addur3oK7mPibkDb8lkV0xchbmFT5A/MrvCzV+0UHQ0dmKcx4Y8HjKsHrIeZUZOdW4mmny6pB6GKTsQWatZjLTr7ah4exQpkm1aKbp9M78VmxQOKfgat0+LyEM0qAAAA=)}
.lq-room-study{background-image:url(data:image/webp;base64,UklGRpQAAABXRUJQVlA4IIgAAACwBACdASoYABAAPulgqE0pJaOiMAgBIB0JZQCdAywBwj0TbKddA8CAxUGvBdlAAP7vgumyHagtuJP1m83COUwBBSp4fLhygunijZz1Vve/oX0HW9X8tZNNPfJk0xIg0L47dIf9/foF6bn3DAD6Mwmqv//CsRpVcmTyOs/WIFSOqZZiSL/AzAAA)}
.lq-room-sunroom{background-image:url(data:image/webp;base64,UklGRrAAAABXRUJQVlA4IKQAAACwAwCdASoYABAAPulep00pJSOiMAgBIB0JQBOmUAA9dilK0eWJAAD+vzy6Kk1zOEuUxNNtrBeCg6fbje1aPKXo52DKmZfGcJX9SKLJwUnaXpHNoHf6HXy3bU217QVhPmbotVL29NcfjvvpsxMynyjLcfQacxCuSntpcIy4MJfvg+C1GbWsciu1JMe27AebyVCtVZwu+++aLGIQ1OUnX16YnAAAAA==)}
.lq-room-window-seat{background-image:url(data:image/webp;base64,UklGRp4AAABXRUJQVlA4IJIAAAAwBACdASoYABAAPuliqE2pJaOiMAgBIB0JYwCw7YyKkx8wf60D4wf69AAA/uSj4Bh00RN2NkaUlX/otCVbtC04TFjeUvc3pmfeg9IPNgjCBK/q22JXJ+RoEp+o33RJz+5LynWTm4ilFEca5o7jdnu6h1dh/KOb8Pjz3rRQ/zriJ0cNicEp1xg6dCPx0JRscgAAAA==)}
.lq-runner-shoes{background-image:url(data:image/webp;base64,UklGRtoAAABXRUJQVlA4IM4AAACQBQCdASoYABgAPulorFApJiQiqAqpIB0JZQCw7YzGZaxXSHs6TBr4bcjhcGnlf/bNxa+VMAD+0ZrjhLSEP7Lq/L8hBchd+YKdLxnHLBI9JtSj9baRLx1Vi4ylfHVVMVqD45z7clPRIXLF+259h+S/LURNxnGGgW8FQPoYLNhFMyhm4u74E4NPczBFtU322oX+Qmu9o8TRi/FqvF4+v6DQbBenNDL76C+hqEFXEcTH7o2TEJUm1F7+34owaRk88jdfAw1vRYXdapCxkLAAAA==)}
.lq-sealed-supplies{background-image:url(data:image/webp;base64,UklGRqQAAABXRUJQVlA4IJgAAACwBACdASoYABAAPuleqE0pJSQiMAgBIB0JbACdMoMYJn/AfIkhSDvssXuCKK+AAM43mc6NburX6NHN+uay5XQiD7sLOefRTa8MoI/T6J3slhfiX7aG9FSRTJZxAtb4SriRQH+B+00LUaSLSlBY2BFWJrcuqalfK/F/pBB8e8LjVnx2QcBMNxVUfK3j+zIO2M68Zun+AHEAAA==)}
.lq-sick-day{background-image:url(data:image/webp;base64,UklGRqgAAABXRUJQVlA4IJwAAADQAwCdASoYABAAPulgqE0pJaOiMAgBIB0JZQCdACEGH1yBINOt4kAA/uvm41ZjrtyasURZFUfcQ43EZhG/TPySaqIaI8mzCHSIrhm0Jx0XV/AG+WlgSoWhSmJ6RO9deRStT8Hd/p2+b9yUuIeORQckg8C3M6uOmnd7Pgbff5DM6HxPNk3ENyoqaXdLjhN99EMvDMIJ5tbDxuYAAAA=)}
.lq-signature-reset{background-image:url(data:image/webp;base64,UklGRrwAAABXRUJQVlA4ILAAAADwAwCdASoYABAAPuleqE0pJSOiMAgBIB0JYwCdABk1CicYGR/fmvYgAP7W9vWoDm/abWREhn+0cEwpT4I2qY/ZfVvtoUbpNVoYGMqF4di0sjaTVPydOT+XIwd7BVlwOUZ1nujPQyd5q7Q3be043f2dLc//HlqHonLWUQGWCgrUCeH7Waxc3dfW3JnvE0PFpB9JVB/nkCbXymZ5XgwJs6+thDvB6gMBcgRwAiDEAaQAAA==)}
.lq-summer-heat{background-image:url(data:image/webp;base64,UklGRgIBAABXRUJQVlA4IPYAAADwBQCdASoYABgAPulsrlGpJaQiqAgBIB0JQBOmUAnAQlOtMHyrIShhZ0eFDGd9wscwQypVXy9kAAD+ynkm1Z5CfphLrK9RihlpPZgB3YlyszG9zBE5h9IWVOc5hz38D1Xi66GXByD7vFhyexF+J4ey2UYoRtasy+kGXio4tzwbI/3e/Og2BjFEF/6L2YV+ddCibVrAlPRFqlzSLzxM9BZORPAXMKDwON4sMx/gU9cU5V7b3XdGTyjbEKBzqzfH953RgrXf4JI+1L1+F8dN3TSEtX/ALuEIDuOyZnYdlIJIt7nk77aV/DMG03fqo88D0TG0DSPqAAA=)}
.lq-the-five{background-image:url(data:image/webp;base64,UklGRpwAAABXRUJQVlA4IJAAAACwAwCdASoYAAkAPulgqE2pJaQiMAgBIB0JYwCsAB0+bQlRzScwIAD8Is1lkN6f2syzhZqmtRk8DU2w+Slt9wqtszlv554jgfdSuNvQqGRLYGFGHFyO5JjP/Q9pst04n7clrWcXZPAffzgCeP41QQ/3/u9olsOhTOVBAqN5KWxhevUuSLqmuvE8T03WcZYYAAA=)}
.lq-town-atherton{background-image:url(data:image/webp;base64,UklGRoIAAABXRUJQVlA4IHYAAACwAwCdASoYABAAPulep00pJSOiMAgBIB0JZzuAHG+G/3N0olxAAAD+7eNNO8JmFQ0S72nCoRwKuSj24Nl9RsIHq+aYatPO83EDBvNa5TCgUo3cmpumvjU8CgOWfcokdc0Jtv9jlSDjguHBd5h3ZVTT2ePaAAAA)}
.lq-town-belmont{background-image:url(data:image/webp;base64,UklGRqgAAABXRUJQVlA4IJwAAACQBACdASoYABAAPulep00pJSOiMAgBIB0JQBdgZYJ0ESGHEnVKgY3J2B0+jvAA9oVw+HqYlOeZUAk6l9uALIrKRygUSv2SWUwnwAogufT2xHgU6F/m6CocLameMm4lJVuqpbpIr345N+OIN2GX3ABfsDW0APM3lM0n56F6yHOJt2pNPdsn024GavbE4TtYF+7gOAdoaeokafIAAAA=)}
.lq-town-burlingame{background-image:url(data:image/webp;base64,UklGRqwAAABXRUJQVlA4IKAAAAAQBACdASoYABAAPulgqE0pJaOiMAgBIB0JZACdABiHxZVe8pCzE+YoAAD+2YZrdVACthu4XDV6BZquqlTRH8UTAfwdEKmPS/L3E7fOqlO7ZeMmwRUyk2cJ5OPGGUH1iKH3C7uY0yPux1Kq+LN0kgLl2ijtlp6mvUlNh5ZTAGda1++slQw8YeaEYevH+S4AYRGLUxa5Y9m7Y7t1SoianAAA)}
.lq-town-east-palo-alto{background-image:url(data:image/webp;base64,UklGRowAAABXRUJQVlA4IIAAAAAwBACdASoYABAAPulgqU2pJaQiMAgBIB0JQBOmUGYwCTK402qLSsVutgAA/urODKXUIogIV/jfPg1RxoiDMWiLYWWl9uofvV4yDEcfraAJDh/cJRJe4C5s6LC76glF4yDorezQUb+ceTOTDttZQG5iaR0dia5EY+2fEChwHEAAAA==)}
.lq-town-foster-city{background-image:url(data:image/webp;base64,UklGRrQAAABXRUJQVlA4IKgAAAAwBACdASoYABAAPuleqE0pJSQiMAgBIB0JYwCdMoADTicRpenYdz0aTsAA/u1HXozAdsvaeLR44dxngLqK+gpRP5d6rEmmp049c2ArUzrEzST36h7xwwJkg0oCSmce83IdN47csa/qioRgNmTFuTNMQXoVrv7l9g+GSmE28tbub3czSwkv+Frz4iV2F26uHQYeUfbuhgfu/8ugbAFBNRsg91DhQXeAAAA=)}
.lq-town-hillsborough{background-image:url(data:image/webp;base64,UklGRpYAAABXRUJQVlA4IIoAAACQBACdASoYABAAPulep00pJSOiMAgBIB0JZwCsAYw65MWx52umehD+9Geyw6AA/uVvJFA3ngJeBxRmbd5sofqOq8NxyUCx8/GPfY69X7IQzGN03sQ3Ublb8MwFbwJvrsk4k3clLvoXFROh/2EiJ/gCxdbpv95rCLz2yTPFdUfRFLwrhkF0yqSwAAA=)}
.lq-why-hydrate{background-image:url(data:image/webp;base64,UklGRpwAAABXRUJQVlA4IJAAAAAwBACdASoYABAAPulep00pJSOiMAgBIB0JYwCdACKxLPWVQfEcOcp3NQAA/uX4EZEFtxeU0mVADhJb9pYvUV4m0eTEYyc8Fi27qBqMv7z4jyM5TX7G079xof8OU5nkKayNhF8BMCBu39hRexLP/6eIKO/vEQf223x1wWieJ/hakdRaQabprUH8Cimatj0q4AA=)}
.lq-why-optimize{background-image:url(data:image/webp;base64,UklGRrwAAABXRUJQVlA4ILAAAACQBACdASoYABAAPulep00pJSOiMAgBIB0JZACdAdwLgnU0RkBPzLZIjDgKYmAA/uHQ+QBPUthZd9ckF12uEOXxFLrE0bbJJ2VQ18LBqayp8e+D2okvfoHgWSNupwO0eIoDSGDE3HtybFxM6JLe/gkvuAFfdLL2Y9eb7rTp9QBRtlpghRLGla0wVJhPmpN5SAadzP6RdwuQ7c966I5x2dMu/zFoeSDmMt6db2jqQeAAAA==)}
/* ============================================================
v16.6 DESIGN CORRECTION LAYER (design agent, 2026-09-01)
The generator template should absorb all of this — the 8/30
and 8/31 layers were both wiped by rebuilds. Do not remove
without checking claude/design-2026-09-01 run log.
============================================================ */
/* 1. Add-on bar hero h1: the 15ch cap was sized for a four-word
headline; the current 55-char headline wrapped to 4 lines
beside a half-empty band. Same fix shipped 8/31 (v15.3). */
@media(min-width:901px){.phero.apage.abhero h1{max-width:30ch}}
/* 2. Nearby-towns grid on the 17 town pages: auto-fill minmax(190px)
makes 6 narrow columns at 1440 and five of the sixteen town names
wrap to two lines. Four even columns hold every name on one line.
.acol .towns (locations page grouped grid) keeps its own
!important rule and is not affected. */
@media(min-width:901px){.towns{grid-template-columns:repeat(4,1fr)}}
/* 3. Legacy orphan header compat: five legacy pages (iv-therapy,
review-us, legal-terms, privacy-policy, blog-your-first-iv-therapy-visit)
use .nav>.wrap markup the v16 stylesheet no longer styles — the
header rendered as an unstyled centered stack at every width and
forced 8px of horizontal scroll at 390. Modern pages have no .wrap
directly under .nav, so this scope touches only the legacy five.
The .menu-toggle button has no JS handler in shared.js, so it is
hidden rather than left dead. */
.nav>.wrap{display:flex;align-items:center;gap:26px;width:100%;max-width:none;min-width:0;padding:0}
.nav>.wrap .logo.brand{flex:0 0 auto}
.nav>.wrap>nav{display:flex;gap:22px;margin-left:auto;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.nav>.wrap>nav a{font:500 14px var(--ui);color:var(--ink);text-decoration:none;white-space:nowrap}
.nav>.wrap>nav a:hover{color:var(--gold-d)}
.nav>.wrap .menu-toggle{display:none}
.nav>.wrap .btn.bookbtn{background:var(--gold);color:var(--forest);padding:11px 18px;font:600 13px var(--ui);white-space:nowrap;flex:0 0 auto}
@media(max-width:900px){
.nav>.wrap{gap:14px}
.nav>.wrap>nav{display:none}
.nav>.wrap .btn.bookbtn{margin-left:auto}
}
/* ═══════════════════════════════════════════════════════════════════
v16.9 DESIGN CORRECTION LAYER (design agent, 2026-09-02)
Appended, never edited above this line. gen.py: absorb these.
═══════════════════════════════════════════════════════════════════ */
/* v16.9-1 · legacy iv-therapy.html cards. The v16 .card hover-fill chrome
(white :before slab + gold :after hairline) leaks onto the legacy page's
INLINE anchors and paints stray white slabs over the text
at every width. .cards exists only on iv-therapy.html (verified). */
.cards{display:grid;gap:14px;margin-top:18px}
@media(min-width:761px){.cards{grid-template-columns:repeat(2,1fr)}}
.cards .card{display:block;padding:22px 24px;background:var(--ivory);
border:1px solid var(--linel)}
.cards .card:before,.cards .card:after{display:none}
/* v16.9-2 · bare class="btn" appears only on the five legacy pages (11×,
verified against all 45 pages) and rendered borderless — an invisible
button ("Leave a Google review" on review-us). Ghost treatment. */
.btn:not(.gold):not(.ghost):not(.bookbtn):not(.sm){border-color:var(--linel);color:var(--ink)}
.btn:not(.gold):not(.ghost):not(.bookbtn):not(.sm):hover{border-color:var(--gold);color:var(--gold-d)}
/* v16.9-3 · fiveband caption: the headline crosses the pale HYDRATE/DEFEND
bags at a measured 1.75:1 worst-case against white text (98th-pct sample
from a 1440 render). Deepen the scrim's mid-stop; leave the photograph. */
.fiveband .fb-cap{background:linear-gradient(to top,rgba(9,15,12,.96) 26%,rgba(9,15,12,.86) 62%,rgba(9,15,12,0))}
/* ── v16.11 DESIGN CORRECTION LAYER (design agent, 2026-09-03) ──
All 17 town-page heroes set their text at the literal viewport edge on
desktop. The v16 town split-hero (.phero.tpage, a 1.05fr/.95fr grid)
overrides the global .wrap gutter with `padding:118px 0 104px`, so the
kicker, h1, lead, CTAs and the $199 strip all start at x=0 at any width
over 900px (measured: h1 x=0 on all 17 town pages at 1440; every other
page's content sits at x=132). Mobile (<=900px) has its own 22px rule and
was never wrong. The left padding below puts the hero text back on the
same left edge as the global 1240px wrap; 48px right keeps it off the
photo seam. gen.py MUST absorb this with the v16.6/v16.9 layers. */
@media(min-width:901px){
.phero.tpage>.wrap{padding:118px 48px 104px calc(max(0px,(100vw - 1240px)/2) + 32px)}
}
/* ── THE 10% POPUP ─────────────────────────────────────────────────────────
Built like Anywhere Infusions' popup, in Aura's colours. A line of tubing
runs down from the top, a drop falls along it and lands on the card, and
the card fills from that point. Closing drains it and the last of it falls
away as a drop. shared.js measures the card and sets --ccp-top and
--ccp-bot so the drop lands on the real edge at any screen size. Off under
prefers-reduced-motion. */
.ccp-scrim{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;
background:rgba(19,30,24,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
--ccp-top:40vh;--ccp-bot:70vh;
opacity:0;pointer-events:none;transition:opacity .34s ease}
.ccp-scrim.on{opacity:1;pointer-events:auto}
.ccp-scrim.out{opacity:0;pointer-events:none;transition:opacity .42s ease .16s}
.ccp-line{position:absolute;top:0;left:50%;width:2px;height:var(--ccp-top);margin-left:-1px;opacity:0;
background:linear-gradient(180deg,rgba(212,178,111,0),rgba(212,178,111,.6));
transform:scaleY(0);transform-origin:top center}
.ccp-scrim.on .ccp-line{animation:ccpTube .72s ease-out both}
.ccp-scrim.out .ccp-line{animation:none;opacity:0}
.ccp-drop{position:absolute;top:0;left:50%;width:13px;height:13px;margin-left:-6.5px;opacity:0;
background:var(--gold-l);box-shadow:0 0 12px rgba(212,178,111,.5);
border-radius:50% 50% 50% 50% / 62% 62% 38% 38%}
.ccp-scrim.on .ccp-drop{animation:ccpDropIn .62s cubic-bezier(.55,.08,.9,.5) both}
.ccp-scrim.out .ccp-drop{animation:ccpDropOut .6s cubic-bezier(.5,.05,.9,.45) both}
.ccp-card{position:relative;width:100%;max-width:428px;background:var(--ivory);border-radius:var(--r-lg);
padding:40px 34px 30px;max-height:92vh;overflow:hidden auto;text-align:center;
box-shadow:0 26px 70px rgba(19,30,24,.4),0 2px 6px rgba(19,30,24,.12);
opacity:0;clip-path:inset(0 0 100% 0)}
.ccp-scrim.on .ccp-card{animation:ccpFill .54s cubic-bezier(.25,.85,.35,1) .42s both}
.ccp-scrim.out .ccp-card{animation:ccpDrain .38s cubic-bezier(.5,0,.85,.4) both}
@keyframes ccpTube{0%{transform:scaleY(0);opacity:0}14%{opacity:.9}62%{transform:scaleY(1);opacity:.9}100%{transform:scaleY(1);opacity:0}}
@keyframes ccpDropIn{
0%{transform:translateY(-14px) scale(.55);opacity:0}
14%{opacity:1}
70%{transform:translateY(var(--ccp-top)) scale(1);opacity:1}
86%{transform:translateY(var(--ccp-top)) scaleX(1.7) scaleY(.45);opacity:.9}
100%{transform:translateY(var(--ccp-top)) scaleX(2.6) scaleY(.15);opacity:0}}
@keyframes ccpDropOut{
0%{transform:translateY(var(--ccp-bot)) scaleX(1.5) scaleY(.5);opacity:0}
22%{transform:translateY(var(--ccp-bot)) scale(1);opacity:1}
100%{transform:translateY(102vh) scale(.75);opacity:0}}
@keyframes ccpFill{0%{opacity:1;clip-path:inset(0 0 100% 0)}100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes ccpDrain{0%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:1;clip-path:inset(100% 0 0 0)}}
.ccp-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;pointer-events:none;
background:linear-gradient(90deg,var(--gold),var(--gold-l),var(--gold))}
.ccp-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
background:transparent;color:var(--mut);font-size:20px;line-height:1;transition:background .15s,color .15s}
.ccp-x:hover{background:var(--cream);color:var(--ink)}
.ccp-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* the one red thing: it has to read as an interruption */
.ccp-badge{display:inline-block;font:700 11.5px var(--ui);letter-spacing:.2em;text-transform:uppercase;
color:#fff;background:#c02b26;border-radius:999px;padding:8px 17px;
box-shadow:0 6px 18px rgba(192,43,38,.3);animation:ccpBadge 2.4s ease-in-out infinite}
@keyframes ccpBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.ccp-card .ccp-hed{font-family:var(--dsp);font-size:1.5rem;color:var(--forest);margin:14px 0 0;font-weight:400}
.ccp-num{font-family:var(--dsp);font-size:3.6rem;line-height:1;color:var(--forest);margin:16px 0 2px;font-weight:400}
.ccp-num span{font-size:1.5rem;vertical-align:.55em;margin-left:2px}
.ccp-off{font-family:var(--dsp);font-size:1.28rem;color:var(--forest);margin:0;font-weight:400}
.ccp-plus{display:inline-block;margin:12px 0 0;padding:7px 14px;border-radius:999px;
background:rgba(212,178,111,.2);color:var(--gold-d);font:700 .86rem var(--ui);letter-spacing:.02em}
.ccp-cd{margin:14px 0 0;font:500 .9rem var(--ui);color:var(--mut);font-variant-numeric:tabular-nums}
.ccp-cd b{color:var(--forest);font-weight:700}
.ccp-cd[hidden]{display:none}
.ccp-form{margin:20px 0 0;display:flex;flex-direction:column;gap:10px}
.ccp-form[hidden]{display:none}
.ccp-names{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ccp-form input[type=email],.ccp-names input{width:100%;min-width:0;padding:14px 16px;border:1px solid var(--linel);border-radius:var(--r);
background:#fff;font:500 16px var(--ui);color:var(--ink)}
.ccp-form input[type=email]:focus,.ccp-names input:focus{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold)}
.ccp-form .btn{width:100%}
.ccp-note{margin:12px 0 0;font:500 .92rem/1.5 var(--ui);color:var(--mut)}
.ccp-note:empty{display:none}
.ccp-note.bad{color:#a8322c}
.ccp-note.good{color:var(--forest);font-weight:600}
.ccp-card:focus{outline:none}
/* the tab, bottom left, after a dismiss */
.ccp-tab{position:fixed;left:18px;bottom:18px;z-index:118;display:flex;align-items:center;gap:10px;
padding:12px 16px 12px 14px;border:0;border-radius:999px;cursor:pointer;font:600 .9rem var(--ui);
color:var(--ivory);background:var(--forest);box-shadow:0 12px 32px rgba(19,30,24,.35);
transform:translateY(20px);opacity:0;transition:transform .42s cubic-bezier(.2,.8,.25,1),opacity .3s ease,background .15s}
.ccp-tab.on{transform:none;opacity:1}
.ccp-tab:hover{background:var(--forest2)}
.ccp-tab:focus-within{outline:2px solid var(--gold-l);outline-offset:3px}
.ccp-tab .ccp-dot{width:9px;height:11px;flex:none;background:var(--gold-l);
border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;box-shadow:0 0 9px rgba(212,178,111,.45);
animation:ccpDripDot 2.9s cubic-bezier(.55,.06,.9,.5) infinite}
@keyframes ccpDripDot{
0%,55%{transform:translateY(-1px) scaleY(.9);opacity:1}
74%{transform:translateY(3px) scaleY(1.15);opacity:1}
90%{transform:translateY(7px) scaleY(.7);opacity:.15}
91%{transform:translateY(-4px) scale(.5);opacity:0}
100%{transform:translateY(-1px) scaleY(.9);opacity:1}}
@media (max-width:560px){
.ccp-scrim{align-items:flex-end;padding:0}
.ccp-card{max-width:none;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:34px 22px 26px}
.ccp-num{font-size:3.1rem}
.ccp-tab{left:12px;right:12px;bottom:12px;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
.ccp-scrim,.ccp-card,.ccp-tab{transition:none}
.ccp-tab{transform:none}
.ccp-tab .ccp-dot,.ccp-line,.ccp-drop{animation:none!important;opacity:0}
.ccp-badge{animation:none}
.ccp-scrim.on .ccp-card,.ccp-scrim.out .ccp-card{animation:none}
.ccp-scrim.on .ccp-card{opacity:1;clip-path:none}
}
/* ── EDITS PART 3 (2026-10-20) ─────────────────────────────────────────────
the new bag renders are full scenes, not cut-outs, so they sit in a frame */
.dbag.scene{align-self:center}
.dbag.scene .pic,.dbag.scene img{display:block;width:100%;height:auto;border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(0,0,0,.35)}
@media(min-width:901px){.dbag.scene{max-width:520px;justify-self:end}}
.phero .dsub{margin:10px 0 0;font:600 15px var(--ui);letter-spacing:.02em;color:var(--gold-l)}
.pn .pfrom{display:block;font:600 11px var(--ui);letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.fpx .pfrom{display:block;font:600 10px var(--ui);letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.doses .dl{font:600 11px var(--ui);letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-right:4px}
p.formula{font:500 17px/1.6 var(--ui);max-width:68ch;margin:6px 0 0}
p.formula b{font-weight:700}
h2.fits{font-size:clamp(24px,2.6vw,34px);max-width:30ch}
.icard .ic-d{display:block;margin-top:8px;font:400 14.5px/1.55 var(--ui);opacity:.82}
.bcard.nolink,.bx.nolink{cursor:default}
.bp.ask,.bx-p.ask{font-size:12px;letter-spacing:.04em;font-weight:600;opacity:.8}
h3.bxgroup{margin:34px 0 12px;font:600 13px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d)}
.boostband h3.bxgroup:first-of-type{margin-top:22px}
p.bxnote{margin:-4px 0 14px;max-width:64ch;color:var(--mut)}
.bp-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font:600 13.5px var(--ui)}
.bp-links a{color:var(--gold-l);text-decoration:none}
.bp-links a:hover{text-decoration:underline}
p.supports-h{margin-top:26px}
p.supports{margin:6px 0 0;font:500 15px/1.6 var(--ui)}
p.tagline{margin-top:16px;color:var(--gold-l)}
p.mdname{font:600 13px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-l);margin:18px 0 10px}
.towns.wide{margin-top:22px}
p.elig{margin:14px 0 0;color:var(--mut);font-size:14px}
.fees{margin-top:22px;max-width:66ch}
.fees p{margin:0 0 8px}
.prose p.effective{margin-bottom:22px}
.prose p.addr{line-height:1.7}
.faq p.townline{font-weight:600}