/* Soluma home: black + gold, cream sections match the product photography */
:root{
  --bg:#000;--s1:#131209;--s2:#1F1F1F;--s3:#272727;--line:#313131;
  --gold:#C9A24A;--gold-2:#E9CB82;--gold-3:#8C6A22;
  --cream:#EEE4D5;--cream-2:#E4D7C3;--ink:#17140E;--ink-2:#5C5446;
  --text:#F6F0E6;--muted:#A69E90;--dim:#6F685C;
  --ease:cubic-bezier(0.32,0.72,0,1);
  --font:"Manrope",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.sl{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.sl :where(img){display:block;max-width:100%;height:auto}
.sl :where(a){color:inherit;text-decoration:none}
.sl :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sl :where(h1,h2,h3){font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.sl :where(p){text-wrap:pretty}
.sl :focus-visible{outline:2px solid var(--gold-2);outline-offset:4px;border-radius:8px}
.skip{position:fixed;left:16px;top:-64px;z-index:200;background:var(--gold);color:var(--ink);padding:8px 12px;border-radius:8px;font-weight:600;transition:top .4s var(--ease)}
.skip:focus{top:16px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sec{padding:128px 0;position:relative}
.center{text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:24px}
.eyebrow.center{display:flex;justify-content:center}
.eyebrow .star{font-size:14px}
.h2{font-size:48px;line-height:1.05;margin-bottom:24px}
.gold-t{background:linear-gradient(90deg,var(--gold-2),var(--gold) 60%,var(--gold-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);max-width:560px;margin:0 auto}

/* wordmark: the O carries the four point star from the jar */
.wm{font-weight:500;letter-spacing:.28em;font-size:18px;line-height:28px;color:var(--gold-2);display:inline-flex;align-items:center}
.wm-o{position:relative;display:inline-block}
.wm-o::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;font-size:.42em;letter-spacing:0;color:var(--gold-2)}
.wm.big{font-size:30px;line-height:36px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:9999px;font-size:16px;line-height:24px;font-weight:600;border:1px solid transparent;transition:transform .6s var(--ease),background .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease);white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 8px 32px rgba(201,162,74,.24)}
.btn-gold:hover{background:var(--gold-2);transform:translateY(-2px);box-shadow:0 16px 48px rgba(201,162,74,.36)}
.btn-line{border-color:rgba(233,203,130,.32);color:var(--gold-2)}
.btn-line:hover{border-color:var(--gold-2);background:rgba(201,162,74,.08);transform:translateY(-2px)}
.btn-sm{padding:8px 16px;font-size:14px;line-height:20px}
.btn-full{width:100%}
.btn i{font-size:20px}

/* reveal */
.rv{opacity:0;transform:translateY(64px);filter:blur(12px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none}*{animation:none!important;transition:none!important}}

/* nav: floating island */
.nav{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:32px;padding:8px 8px 8px 24px;border-radius:9999px;background:rgba(19,18,9,.6);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:1px solid rgba(233,203,130,.14);width:max-content;max-width:calc(100% - 32px);transition:background .6s var(--ease),top .6s var(--ease)}
.nav.scrolled{background:rgba(0,0,0,.82)}
.nav-links{display:flex;gap:24px}
.nav-links a{font-size:14px;line-height:20px;color:var(--muted);transition:color .4s var(--ease)}
.nav-links a:hover,.nav-links a.on{color:var(--text)}
.burger{display:none;width:40px;height:40px;border-radius:9999px;background:var(--s3);position:relative}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--text);border-radius:2px;transition:transform .7s var(--ease),top .7s var(--ease)}
.burger span:first-child{top:15px}.burger span:last-child{top:23px}
.burger[aria-expanded=true] span:first-child{top:19px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:19px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.86);backdrop-filter:blur(64px);-webkit-backdrop-filter:blur(64px);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .7s var(--ease)}
.menu.open{opacity:1;pointer-events:auto}
.menu nav{display:flex;flex-direction:column;align-items:center;gap:24px}
.menu a{font-size:30px;line-height:36px;font-weight:600;opacity:0;transform:translateY(48px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.menu a.btn{font-size:16px;line-height:24px;margin-top:16px}
.menu.open a{opacity:1;transform:none}
.menu.open a:nth-child(2){transition-delay:.05s}.menu.open a:nth-child(3){transition-delay:.1s}.menu.open a:nth-child(4){transition-delay:.15s}.menu.open a:nth-child(5){transition-delay:.2s}.menu.open a:nth-child(6){transition-delay:.25s}

/* hero */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;position:relative;padding:128px 0 96px;overflow:hidden;background:var(--bg)}
.hero::before{content:"";position:absolute;width:720px;height:720px;right:-120px;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,rgba(201,162,74,.18),transparent 64%);pointer-events:none}
.hero-in{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;width:100%;position:relative}
.h-hero{font-size:72px;line-height:1;letter-spacing:-.035em;margin-bottom:24px;max-width:680px;background:linear-gradient(90deg,#fff,#9B9B9B);-webkit-background-clip:text;background-clip:text;color:transparent}
.h-hero .gold-t{display:inline-block}
.lead{font-size:18px;line-height:28px;color:var(--muted);max-width:560px;margin-bottom:32px}
.price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.price b{font-size:36px;line-height:40px;font-weight:600;color:var(--text)}
.price s{color:var(--dim);font-size:18px}
.price span{font-size:14px;line-height:20px;color:var(--muted)}
.price .save{color:var(--ink);background:var(--gold-2);border-radius:9999px;padding:2px 12px;font-weight:600}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.trust{list-style:none;display:flex;gap:24px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.trust li{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;color:var(--muted)}
.trust i{color:var(--gold);font-size:20px}
.hero-art{position:relative;aspect-ratio:1/1.1;display:grid;place-items:center;transform-style:preserve-3d}
.arch{position:relative;width:76%;aspect-ratio:3/4;border-radius:9999px 9999px 24px 24px;overflow:hidden;box-shadow:0 48px 128px rgba(0,0,0,.6),0 0 0 1px rgba(233,203,130,.2);transform:translate3d(var(--mx,0),var(--my,0),0);transition:transform 1.2s var(--ease)}
.arch img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.orbit{position:absolute;inset:0;pointer-events:none;z-index:2}
.o-ring{position:absolute;inset:2%;border-radius:50%;border:1px dashed rgba(233,203,130,.28);animation:spin 80s linear infinite}
.o-ring-2{inset:12%;border-style:solid;border-color:rgba(233,203,130,.1);animation-duration:120s;animation-direction:reverse}
.herb{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 16px;border-radius:16px;background:rgba(19,18,9,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(233,203,130,.2);font-size:12px;line-height:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);animation:float 7s var(--ease) infinite alternate;transform:translate3d(calc(var(--mx,0) * -1.6),calc(var(--my,0) * -1.6),0)}
.herb b{font-size:24px;line-height:32px;letter-spacing:0;color:var(--gold-2);font-weight:500;text-transform:none}
.hb1{top:8%;left:0}.hb2{top:22%;right:-2%;animation-delay:-2s}.hb3{bottom:22%;left:-4%;animation-delay:-4s}.hb4{bottom:6%;right:6%;animation-delay:-6s}
.hero-tag{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:9999px;background:var(--s1);border:1px solid var(--line);font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:#7FD18B;box-shadow:0 0 0 4px rgba(127,209,139,.16);animation:pulse 2s ease-in-out infinite}
.scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;line-height:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.scroll-hint span{width:1px;height:40px;background:linear-gradient(var(--gold),transparent);animation:drip 2.4s var(--ease) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{from{margin-top:-8px}to{margin-top:8px}}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(127,209,139,0)}}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ticker */
.ticker{background:var(--gold);color:var(--ink);overflow:hidden;padding:16px 0;position:relative;z-index:2}
.ticker-in{display:flex;gap:24px;width:max-content;animation:tick 48s linear infinite;align-items:center}
.ticker span{font-size:14px;line-height:20px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.ticker i{font-style:normal;font-size:14px}
@keyframes tick{to{transform:translateX(-50%)}}

/* macro pinned story */
.macro{height:320vh;position:relative;background:#000}
.macro-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.macro-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.15 - var(--mp,0) * .15));transform-origin:58% 52%;will-change:transform}
.macro-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 46%,rgba(0,0,0,.05) 80%)}
.macro-lines{position:absolute;left:max(24px,calc((100vw - 1200px)/2 + 24px));top:50%;transform:translateY(-50%);width:min(520px,calc(100% - 48px))}
.m-line{position:absolute;left:0;top:50%;transform:translateY(-40%);opacity:0;filter:blur(12px);font-size:72px;line-height:1;font-weight:600;letter-spacing:-.035em;transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);width:100%}
.m-line.on{opacity:1;transform:translateY(-50%);filter:none}
.m-line .eyebrow{display:flex;margin-bottom:16px}
.m-line small{display:block;font-size:18px;line-height:28px;font-weight:400;letter-spacing:0;color:var(--muted);margin-top:24px;max-width:440px}
.macro-bar{position:absolute;left:max(24px,calc((100vw - 1200px)/2 + 24px));bottom:48px;width:160px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.macro-bar span{display:block;height:100%;width:calc(var(--mp,0) * 100%);background:var(--gold)}

/* philosophy: cream */
.philo{background:var(--cream);color:var(--ink)}
.philo .eyebrow{color:var(--gold-3)}
.philo .gold-t{background:none;color:var(--gold-3)}
.philo-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:96px;align-items:center}
.philo-img{border-radius:24px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 32px 96px rgba(60,40,10,.18)}
.philo-img img{width:100%;height:100%;object-fit:cover}
.philo-copy p:not(.eyebrow){color:var(--ink-2);font-size:18px;line-height:28px;margin-bottom:16px;max-width:520px}
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:48px;margin-top:40px;padding-top:32px;border-top:1px solid rgba(23,20,14,.14)}
.stats div{display:flex;flex-direction:column-reverse}
.stats dd{font-size:48px;line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.stats dt{font-size:12px;line-height:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-top:8px}

/* problem vs soluma */
.vs{background:var(--bg)}
.vs .h2{max-width:720px;margin:0 auto 64px}
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vs-col{border-radius:24px;padding:40px;border:1px solid var(--line)}
.vs-col.bad{background:var(--s1)}
.vs-col.good{background:linear-gradient(var(--s1),var(--s1)) padding-box,linear-gradient(140deg,var(--gold-2),rgba(201,162,74,.1) 50%,var(--gold-3)) border-box;border:1px solid transparent}
.vs-col h3{display:flex;align-items:center;gap:12px;font-size:24px;line-height:32px;margin-bottom:24px}
.vs-col.bad h3 i{color:#D9776B}.vs-col.good h3 i{color:var(--gold-2)}
.vs-col ul{list-style:none;display:grid;gap:24px}
.vs-col li{font-size:14px;line-height:20px;color:var(--muted);padding-top:24px;border-top:1px solid var(--line)}
.vs-col li b{display:block;font-size:16px;line-height:24px;color:var(--text);font-weight:600;margin-bottom:4px}
.vs-col.bad li b{color:#CFC8BC}

/* tagline reveal */
.tagline{padding:160px 24px;background:var(--bg);display:flex;justify-content:center}
.tag-text{max-width:900px;font-size:60px;line-height:1.05;font-weight:600;letter-spacing:-.03em;text-align:center;text-wrap:balance}
.tag-text .w{color:rgba(246,240,230,.22);transition:color .8s var(--ease)}
.tag-text .w.lit{color:var(--text)}
.tag-text .w.lit.g{color:var(--gold-2)}

/* rewards bento */
.rewards{background:var(--s1)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:64px}
.card{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:32px;min-height:256px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transition:border-color .7s var(--ease),transform .7s var(--ease)}
.card::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,74,.16),transparent 64%);left:var(--cx,50%);top:var(--cy,0%);transform:translate(-50%,-50%);opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.card:hover{border-color:rgba(233,203,130,.4);transform:translateY(-4px)}
.card:hover::before{opacity:1}
.card.big{grid-column:span 2}
.card .num{position:absolute;top:24px;right:32px;font-size:14px;line-height:20px;color:var(--dim);font-variant-numeric:tabular-nums}
.card i{font-size:32px;color:var(--gold-2);margin-bottom:auto;padding-bottom:40px}
.card h3{font-size:24px;line-height:32px;margin-bottom:8px}
.card p{font-size:14px;line-height:20px;color:var(--muted);max-width:360px}

/* botanicals */
.botan{background:var(--bg)}
.botan-in{display:grid;grid-template-columns:1.3fr .7fr;gap:32px;margin-top:64px}
.botan-stage{position:relative;border-radius:32px;background:var(--s1);border:1px solid var(--line);min-height:480px;padding:48px;display:flex;align-items:flex-end;overflow:hidden}
.b-glyph{position:absolute;right:24px;top:24px;font-size:240px;line-height:1;color:rgba(201,162,74,.14);font-weight:500;transition:opacity .6s var(--ease),transform .9s var(--ease)}
.b-glyph.swap,.b-info.swap{opacity:0;transform:translateY(24px)}
.b-info{position:relative;max-width:440px;transition:opacity .6s var(--ease),transform .9s var(--ease)}
.b-origin{font-size:12px;line-height:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.b-info h3{font-size:48px;line-height:1;margin-bottom:16px}
.b-info p{color:var(--muted);font-size:18px;line-height:28px}
.b-info .b-tags{margin-top:24px;font-size:14px;line-height:20px;color:var(--gold-2)}
.botan-list{display:flex;flex-direction:column;gap:8px}
.b-item{display:grid;grid-template-columns:40px 1fr auto;align-items:center;text-align:left;padding:24px;border-radius:16px;border:1px solid var(--line);font-size:20px;line-height:28px;font-weight:600;color:var(--muted);transition:all .6s var(--ease);flex:1}
.b-item span{font-size:12px;line-height:16px;color:var(--dim);font-variant-numeric:tabular-nums}
.b-item small{font-size:18px;line-height:28px;font-weight:500;color:var(--dim)}
.b-item:hover{border-color:rgba(233,203,130,.32);color:var(--text)}
.b-item.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.b-item.on span,.b-item.on small{color:var(--ink)}
.supporting{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:32px;padding:24px 32px;border-radius:9999px;border:1px solid var(--line)}
.supporting p{font-size:12px;line-height:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.supporting ul{list-style:none;display:flex;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:14px;line-height:20px}
.supporting li::before{content:"✦ ";color:var(--gold-3)}

/* ritual: morning cream, night black */
.ritual{padding:128px 0;transition:background 1.2s var(--ease),color 1.2s var(--ease)}
.ritual[data-mode=morning]{background:var(--cream);color:var(--ink)}
.ritual[data-mode=night]{background:#0A0906;color:var(--text)}
.ritual[data-mode=morning] .eyebrow{color:var(--gold-3)}
.ritual[data-mode=morning] .gold-t{background:none;color:var(--gold-3)}
.ritual-in{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}
.switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:9999px;margin:8px 0 40px;border:1px solid currentColor;border-color:rgba(127,112,90,.32)}
.switch button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 24px;border-radius:9999px;font-size:14px;line-height:20px;font-weight:600;transition:color .7s var(--ease)}
.switch button.on{color:var(--ink)}
.switch-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:9999px;background:var(--gold);transition:transform .7s var(--ease)}
.ritual[data-mode=night] .switch-pill{transform:translateX(100%)}
.steps{list-style:none;counter-reset:s;display:grid;gap:4px}
.steps li{counter-increment:s;display:flex;gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(127,112,90,.24);font-size:18px;line-height:28px;animation:stepin .8s var(--ease) both}
.steps li::before{content:"0" counter(s);font-size:12px;line-height:16px;color:var(--gold);font-variant-numeric:tabular-nums;width:24px}
.steps li:nth-child(2){animation-delay:.06s}.steps li:nth-child(3){animation-delay:.12s}.steps li:nth-child(4){animation-delay:.18s}.steps li:nth-child(5){animation-delay:.24s}
@keyframes stepin{from{opacity:0;transform:translateX(-24px)}}
.ritual-img{border-radius:24px;overflow:hidden;aspect-ratio:3/4;transition:filter 1.2s var(--ease)}
.ritual-img img{width:100%;height:100%;object-fit:cover}
.ritual[data-mode=night] .ritual-img{filter:brightness(.62) saturate(.8) hue-rotate(-8deg)}

/* journey */
.journey{background:var(--bg)}
.journey .h2{margin-bottom:16px}
.jr{display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:center;max-width:960px;margin:64px auto 0;padding:48px;border-radius:32px;background:var(--s1);border:1px solid var(--line)}
.jr-ring{position:relative;width:240px;height:240px}
.jr-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.jr-ring circle{fill:none;stroke:var(--s3);stroke-width:4}
.jr-ring .jr-arc{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p) * 100);transition:stroke-dashoffset 1s var(--ease)}
.jr-day{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.jr-day small{font-size:12px;line-height:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.jr-day b{font-size:72px;line-height:1;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.jr-copy h3{font-size:30px;line-height:36px;margin-bottom:12px}
.jr-copy p{color:var(--muted);min-height:72px;margin-bottom:32px}
.jr-copy input{width:100%;appearance:none;-webkit-appearance:none;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--gold) var(--fill,0%),var(--s3) var(--fill,0%));outline-offset:8px}
.jr-copy input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--gold-2);border:4px solid var(--bg);box-shadow:0 0 0 1px var(--gold);cursor:grab}
.jr-copy input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--gold-2);border:4px solid var(--bg);box-shadow:0 0 0 1px var(--gold);cursor:grab}
.jr-ticks{display:flex;justify-content:space-between;margin-top:16px;font-size:12px;line-height:16px;color:var(--dim)}
.promise{list-style:none;display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:48px}
.promise li{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.promise i{color:var(--gold);font-size:20px}

/* founder */
.founder{background:var(--s1)}
.founder-in{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}
.ba{position:relative;aspect-ratio:1/1;border-radius:24px;overflow:hidden;border:1px solid var(--line);user-select:none}
.ba img{width:100%;height:100%;object-fit:cover}
.ba-after{position:absolute;inset:0}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba-before img{object-position:50% 30%}
.ba-lbl{position:absolute;top:16px;padding:4px 12px;border-radius:9999px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);font-size:12px;line-height:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2)}
.ba-lbl.l{left:16px}.ba-lbl.r{right:16px}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:var(--gold-2);transform:translateX(-1px);pointer-events:none}
.ba-handle i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;font-size:24px;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.founder-copy>p:not(.eyebrow){color:var(--muted);font-size:18px;line-height:28px;margin-bottom:24px}
blockquote{font-size:20px;line-height:28px;font-weight:500;padding:24px 0 24px 24px;margin-bottom:32px;border:1px solid transparent;border-left-color:var(--gold);color:var(--text)}
blockquote cite{display:block;margin-top:16px;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.made{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.made div{padding:16px;border-radius:16px;border:1px solid var(--line);font-weight:600;font-size:16px;line-height:24px}
.made span{display:block;font-size:12px;line-height:16px;color:var(--gold);font-weight:500;margin-bottom:4px}
.made small{display:block;font-weight:400;font-size:14px;line-height:20px;color:var(--muted);margin-top:4px}

/* lookbook */
.look{background:#000;padding:128px 0 0;overflow:hidden}
.look-head{margin-bottom:64px}
.look-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1440px;margin:0 auto;padding:0 16px;height:min(160vh,1500px);overflow:hidden;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.look-col{display:flex;flex-direction:column;gap:16px;transform:translate3d(0,var(--ly,0px),0);will-change:transform}
.look-col:nth-child(2){margin-top:-160px}
.look-col figure{border-radius:24px;overflow:hidden;aspect-ratio:3/4;background:var(--s1)}
.look-col img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.look-col figure:hover img{transform:scale(1.06)}

/* shop */
.shop{background:var(--bg)}
.shop-in{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
.gallery{position:sticky;top:96px}
.g-main{border-radius:24px;overflow:hidden;aspect-ratio:3/4;background:var(--cream)}
.g-main img{width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease),transform 1.2s var(--ease)}
.g-main img.fade{opacity:0;transform:scale(1.04)}
.g-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px}
.g-thumbs button{border-radius:16px;overflow:hidden;aspect-ratio:1/1;border:1px solid var(--line);opacity:.5;transition:opacity .5s var(--ease),border-color .5s var(--ease)}
.g-thumbs button img{width:100%;height:100%;object-fit:cover}
.g-thumbs button:hover{opacity:.85}
.g-thumbs button.on{opacity:1;border-color:var(--gold)}
.buy{padding-top:16px}
.buy .h2{margin-bottom:8px}
.buy-sub{color:var(--muted);margin-bottom:24px}
.price.big b{font-size:48px;line-height:1}
.incl{list-style:none;display:grid;gap:12px;margin:32px 0;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.incl li{display:flex;gap:12px;align-items:flex-start;color:#D8D0C2}
.incl i{color:var(--gold);font-size:20px;margin-top:2px}
.suits{font-size:14px;line-height:20px;color:var(--muted);margin-bottom:32px}
.suits span{display:block;font-size:12px;line-height:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.buy .btn+.btn{margin-top:12px}
.secure{display:flex;gap:8px;align-items:flex-start;margin-top:24px;font-size:12px;line-height:16px;color:var(--dim)}
.secure i{font-size:16px;color:var(--muted)}

/* faq */
.faq{background:var(--s1)}
.faq-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:96px;align-items:start}
.faq-in>div:first-child{position:sticky;top:120px}
.faq-help{color:var(--muted);margin-bottom:24px}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:18px;line-height:28px;font-weight:600;transition:color .4s var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:24px;line-height:32px;font-weight:400;color:var(--gold);transition:transform .6s var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa summary:hover{color:var(--gold-2)}
.qa details p{color:var(--muted);padding:0 48px 24px 0;animation:open .6s var(--ease)}
.qa details a{color:var(--gold-2);text-decoration:underline}
@keyframes open{from{opacity:0;transform:translateY(-8px)}}

/* final */
.final{position:relative;min-height:100vh;display:grid;align-items:center;overflow:hidden;background:var(--cream)}
.final-img{position:absolute;top:0;right:0;width:50%;height:100%;object-fit:cover;object-position:40% 50%}
.final-copy{position:relative;max-width:1200px;width:100%;margin:0 auto;padding:96px 24px;color:var(--ink)}
.final-copy>*,.final-copy .h-final{max-width:40%}
.final-copy .eyebrow{color:var(--gold-3)}
.h-final{font-size:72px;line-height:1;letter-spacing:-.035em;margin-bottom:32px;max-width:680px}

/* footer */
.foot{background:#000;padding:80px 0 32px;border-top:1px solid var(--line)}
.foot-in{display:grid;grid-template-columns:1.2fr 1fr auto;gap:48px;align-items:start}
.foot-in p{color:var(--muted);font-size:14px;line-height:20px;max-width:320px;margin-top:16px}
.foot nav{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.foot nav a{font-size:14px;line-height:20px;color:var(--muted);transition:color .4s var(--ease)}
.foot nav a:hover{color:var(--gold-2)}
.foot-contact a{display:flex;align-items:center;gap:8px;color:var(--gold-2);font-weight:600}
.foot .copy{margin-top:64px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;line-height:16px;color:var(--dim)}

/* sticky mobile buy */
.sticky-buy{display:none}

/* hide the floating cart widget from the old theme on this page */
.sl #moderncart-floating-cart,.sl #moderncart-slide-out-modal,.sl .moderncart-plugin,.sl .moderncart-modal,.sl #ast-scroll-top,.sl .ast-scroll-top-icon{display:none!important}
.sl .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:1024px){
  .nav-links{display:none}
  .nav{gap:16px}
  .hero-in,.philo-in,.ritual-in,.founder-in,.shop-in,.faq-in{grid-template-columns:1fr;gap:64px}
  .hero-art{max-width:520px;margin:0 auto;width:100%}
  .bento{grid-template-columns:1fr 1fr}
  .botan-in{grid-template-columns:1fr}
  .botan-list{flex-direction:row;flex-wrap:wrap}
  .b-item{flex:1 1 40%}
  .gallery,.faq-in>div:first-child{position:static}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:800px){
  .sec{padding:96px 0}
  .wrap{padding:0 16px}
  .nav{top:16px;padding:8px 8px 8px 16px}
  .nav-cta{display:none}
  .burger{display:block}
  .hero{padding:112px 0 80px;min-height:auto}
  .hero-in{padding:0 16px;gap:48px}
  .h-hero{font-size:48px}
  .lead{font-size:16px;line-height:24px}
  .h2{font-size:36px;line-height:40px}
  .hero-cta .btn{flex:1 1 100%}
  .trust{gap:16px}
  .herb{padding:8px 12px}.herb b{font-size:18px;line-height:28px}
  .scroll-hint{display:none}
  .macro{height:260vh}
  .macro-shade{background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.1) 100%)}
  .macro-lines{top:auto;bottom:96px;transform:none;height:280px}
  .m-line{font-size:48px;top:auto;bottom:0;transform:translateY(16px)}
  .m-line.on{transform:none}
  .m-line small{font-size:16px;line-height:24px}
  .stats{gap:24px}
  .stats dd{font-size:36px}
  .vs-grid{grid-template-columns:1fr}
  .vs-col{padding:24px}
  .tagline{padding:96px 16px}
  .tag-text{font-size:36px;line-height:40px}
  .bento{grid-template-columns:1fr}
  .card.big{grid-column:auto}
  .card{min-height:200px;padding:24px}
  .botan-stage{min-height:400px;padding:32px 24px}
  .b-glyph{font-size:160px}
  .b-info h3{font-size:36px}
  .b-item{padding:16px;font-size:16px;line-height:24px;grid-template-columns:32px 1fr auto}
  .supporting{border-radius:24px;padding:24px}
  .ritual{padding:96px 0}
  .jr{grid-template-columns:1fr;justify-items:center;padding:32px 24px;gap:32px;text-align:center}
  .jr-ring{width:192px;height:192px}
  .jr-copy{width:100%}
  .promise{gap:16px 24px}
  .made{grid-template-columns:1fr}
  .look{padding-top:96px}
  .look-grid{grid-template-columns:1fr 1fr;gap:8px;padding:0 8px;height:140vh}
  .look-col{gap:8px}
  .look-col:nth-child(3){display:none}
  .look-col figure{border-radius:16px}
  .g-thumbs{grid-template-columns:repeat(6,1fr);gap:4px}
  .g-thumbs button{border-radius:8px}
  .price.big b{font-size:36px}
  .h-final{font-size:48px}
  .final{min-height:auto;display:flex;flex-direction:column}
  .final-img{position:relative;width:100%;height:auto;aspect-ratio:4/5;order:2}
  .final-copy{padding:80px 16px 48px}
  .final-copy>*,.final-copy .h-final{max-width:none}
  .foot-in{grid-template-columns:1fr}
  .foot{padding-bottom:112px}
  .sticky-buy{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 24px;border-radius:9999px;background:rgba(19,18,9,.86);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(233,203,130,.2);transform:translateY(160%);transition:transform .8s var(--ease)}
  .sticky-buy.show{transform:none}
  .sticky-buy b{display:block;font-size:18px;line-height:28px}
  .sticky-buy span{display:block;font-size:12px;line-height:16px;color:var(--muted)}
}
