/* Thrivemind Botanicals — concept 3, "The Menopause Edit".
   This direction backs the THIRD mark: the gold tree and the "ThriveMind" name
   that appear on the scalp revitalizing massage oil bottle. That label is a
   different colour, a different name treatment and a different symbol to the
   ornate green wordmark on the bath salt jars, so this concept asks what the
   brand looks like if the bottle wins instead of the labels.

   Sampled from that bottle and their flyers:
     #16281F deep label green   #C8A153 the gold of the tree
     #4C704F wordmark green     #8D2D5D flyer berry
   Gold as a FILL always carries dark text (ink on gold is 5.57:1); gold as TEXT
   only ever sits on the dark ground, where it is 5.57:1 the other way round. */

:root{
  --ink:#16281F;
  --ink-2:#1E3327;
  --ink-3:#26402F;
  --cream:#F4EFE3;
  --cream-2:#FBF8F1;
  --mute:#B3C2B6;
  --mute-2:#8FA394;
  --gold:#C8A153;
  --gold-lt:#E0C48A;
  --gold-txt:#7A5A2E;      /* the gold when it has to be read on a light ground */
  --green:#4C704F;
  --berry:#8D2D5D;
  --line:rgba(200,161,83,.24);
  --line-lt:rgba(22,40,31,.14);
  --accent:#C8A153;        /* the hero quiz bundle reads this */
  --r:16px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--gold)}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif; font-weight:500; line-height:1.14; margin:0 0 .5em; letter-spacing:-.012em; color:var(--cream-2)}
h2{font-size:clamp(30px,4.5vw,50px)}
h3{font-size:clamp(20px,2.3vw,26px)}
h4{font-size:17px}
p{margin:0 0 1em}
.wrap{width:min(100% - 40px,1180px); margin-inline:auto}
section[id]{scroll-margin-top:92px}
[hidden]{display:none !important}

.eyebrow{font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 13px}
.lede{font-size:clamp(17px,1.5vw,19.5px); color:var(--mute); max-width:62ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:14px 28px; border:0; border-radius:6px;
  font-family:'Jost',sans-serif; font-size:15px; font-weight:600; letter-spacing:.05em;
  text-decoration:none; cursor:pointer; transition:transform .25s, box-shadow .25s, background .25s, color .25s}
/* gold fill, dark label — white on this gold is only 2.42:1 */
.btn-pri{background:var(--gold); color:#14251C; box-shadow:0 14px 32px -18px rgba(200,161,83,.9)}
.btn-pri:hover{background:var(--gold-lt); transform:translateY(-2px)}
.btn-gho{background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px rgba(244,239,227,.34)}
.btn-gho:hover{background:rgba(244,239,227,.09); transform:translateY(-2px)}
.btn-sm{min-height:44px; padding:10px 20px; font-size:14px}
.btn[disabled]{background:#5C6A5F; color:#E6EAE4; box-shadow:none; transform:none; cursor:not-allowed}

.prog{position:fixed; inset:0 auto auto 0; height:3px; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-lt)); z-index:80}

/* ---------- header ---------- */
.hd{position:sticky; top:0; z-index:60; background:rgba(22,40,31,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.hd-in{display:flex; align-items:center; gap:20px; min-height:80px}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto; text-decoration:none; padding:6px 0; min-height:44px}
.brand .mark{height:44px; width:auto}
.brand .word{height:46px; width:auto}
.nav{display:flex; gap:28px}
.nav a{font-size:14.5px; font-weight:500; letter-spacing:.05em; color:var(--mute); text-decoration:none; padding:12px 2px; transition:color .2s}
.nav a:hover{color:var(--gold)}
.burger{display:none; width:46px; height:46px; border:0; border-radius:8px; background:rgba(200,161,83,.14); cursor:pointer; position:relative}
.burger span,.burger::before,.burger::after{content:''; position:absolute; left:13px; width:20px; height:2px; background:var(--gold); border-radius:2px; transition:.25s}
.burger span{top:22px}
.burger::before{top:16px}
.burger::after{top:28px}
.mnav{display:none}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:78px 0 90px;
  background:linear-gradient(166deg,#1B3125 0%,var(--ink) 48%,#101E17 100%)}
.hero-tex{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 420px at 78% 4%, rgba(200,161,83,.16), transparent 62%),
    radial-gradient(620px 460px at 6% 96%, rgba(76,112,79,.28), transparent 66%)}
.hero-glow{position:absolute; right:8%; top:-90px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,161,83,.18), transparent 68%); filter:blur(14px); pointer-events:none}
.hero-in{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center}
.hh{font-size:clamp(40px,6.2vw,74px); margin-bottom:18px}
.hh .em{color:var(--gold); font-style:italic}
[data-cascade] span{display:inline-block; opacity:0; transform:translateY(18px); filter:blur(8px); transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1), filter .75s}
[data-cascade].in span{opacity:1; transform:none; filter:none}
.hsub{font-size:clamp(17px,1.6vw,20px); color:var(--mute); max-width:52ch}
.hcta{display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 22px}
.hchips{list-style:none; display:flex; flex-wrap:wrap; gap:9px; padding:0; margin:0}
.hchips li{font-size:13px; font-weight:500; letter-spacing:.05em; color:var(--gold-lt); border:1px solid var(--line); padding:8px 15px; border-radius:999px}
.hero-fig{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#0F1C15}
.hero-fig img{width:100%}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,8vw,106px) 0}
.sec-2{background:var(--ink-2)}
.sec-3{background:var(--ink-3)}
.sec-cream{background:var(--cream); color:#22301F}
.sec-cream h2,.sec-cream h3,.sec-cream h4{color:#16281F}
.sec-cream .lede{color:#4A5B4C}
.sec-cream .eyebrow{color:var(--gold-txt)}
.head{max-width:64ch; margin-bottom:46px}
[data-rev]{opacity:0; transform:translateY(22px); filter:blur(9px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s}
[data-rev].in{opacity:1; transform:none; filter:none}

/* ---------- the edit (routing panels) ---------- */
.edit{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:22px}
.ed{border:1px solid var(--line); border-radius:var(--r); padding:30px 26px; background:rgba(244,239,227,.04); display:flex; flex-direction:column; gap:10px; transition:border-color .3s, transform .3s}
.ed:hover{border-color:var(--gold); transform:translateY(-4px)}
.ed .num{font-family:'Playfair Display',serif; font-size:15px; color:var(--gold); letter-spacing:.2em}
.ed h3{margin:0}
.ed p{margin:0; color:var(--mute); font-size:15.5px}

/* ---------- ritual box builder ---------- */
.builder{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,52px); align-items:start}
.picks{display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:14px}
.pick{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left;
  min-height:96px; padding:18px 20px; border-radius:12px; cursor:pointer;
  border:1.5px solid rgba(244,239,227,.2); background:rgba(244,239,227,.04);
  font-family:'Jost',sans-serif; color:var(--cream); transition:border-color .22s, background .22s, transform .22s}
.pick:hover{border-color:var(--gold); transform:translateY(-2px)}
.pick[aria-pressed="true"]{border-color:var(--gold); background:rgba(200,161,83,.14)}
.pick b{font-size:16.5px; font-weight:600}
.pick small{font-size:13.5px; color:var(--mute); font-weight:400; line-height:1.5}
.pick .chk{position:absolute; right:16px; top:16px; width:22px; height:22px; border-radius:50%; border:1.5px solid rgba(244,239,227,.35); transition:.2s}
.pick[aria-pressed="true"] .chk{background:var(--gold); border-color:var(--gold)}
.pick[aria-pressed="true"] .chk::after{content:''; position:absolute; left:6px; top:9px; width:9px; height:5px; border-left:2px solid #14251C; border-bottom:2px solid #14251C; transform:rotate(-45deg)}

.box{border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,3vw,32px); background:rgba(244,239,227,.05); position:sticky; top:104px}
.box h3{margin-bottom:4px}
/* the box sits on its own 5% cream tint over --ink-3, which lifts the ground
   to #304938. The base gold only reaches 4.06:1 there, so this panel uses the
   lighter gold (5.82:1) and the lighter mute (5.29:1). */
.box .cnt{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:14px}
.box ul{list-style:none; padding:0; margin:0 0 16px; display:grid; gap:9px; min-height:96px}
.box li{display:flex; gap:10px; align-items:flex-start; font-size:15.5px; color:var(--cream)}
.box li svg{flex:0 0 auto; width:18px; height:18px; margin-top:4px; fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.box .empty{color:var(--mute); font-size:15px; font-style:italic}
.box .note{font-size:12.5px; color:var(--mute); margin:14px 0 0; line-height:1.55}

/* ---------- split ---------- */
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(32px,5vw,62px); align-items:center}
.split img{border-radius:14px; border:1px solid var(--line-lt)}
.ticks{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px}
.ticks li{display:flex; gap:12px; align-items:flex-start; font-size:16px}
.ticks svg{flex:0 0 auto; width:21px; height:21px; margin-top:3px; fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.sec-cream .ticks svg{stroke:var(--green)}

/* ---------- the two labels ---------- */
.marks{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px}
.mk{border:1px solid var(--line-lt); border-radius:var(--r); overflow:hidden; background:#fff}
.mk .mk-i{aspect-ratio:4/3; background:#EFEAE0; display:flex; align-items:center; justify-content:center; overflow:hidden}
.mk .mk-i img{max-height:100%; width:auto; object-fit:contain}
.mk .mk-b{padding:22px}
.mk h3{margin-bottom:6px}
.mk p{margin:0; font-size:15.5px; color:#4A5B4C}

/* ---------- faq ---------- */
.faq{max-width:820px; margin-inline:auto; display:grid; gap:12px}
.qa{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:rgba(244,239,227,.04)}
.qa summary{list-style:none; cursor:pointer; padding:20px 54px 20px 22px; font-family:'Playfair Display',serif; font-size:20px; color:var(--cream-2); position:relative; min-height:56px; display:flex; align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:''; position:absolute; right:22px; top:50%; width:11px; height:11px; margin-top:-7px; border-right:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(45deg); transition:transform .25s}
.qa[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.qa p{margin:0; padding:0 22px 22px; font-size:16px; color:var(--mute)}

/* ---------- contact + liquid glass ---------- */
.contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:clamp(32px,5vw,56px); align-items:start}
.clist{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:16px}
.clist li{display:flex; gap:13px; align-items:flex-start}
.clist svg{flex:0 0 auto; width:22px; height:22px; fill:none; stroke:var(--gold); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; margin-top:2px}

.form{position:relative; border-radius:18px; overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 46%,rgba(200,161,83,.10));
  backdrop-filter:blur(30px) saturate(165%); -webkit-backdrop-filter:blur(30px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 30px 70px -34px rgba(0,0,0,.75)}
.form::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 260px at 8% -6%, rgba(255,255,255,.24), transparent 60%)}
.form::after{content:''; position:absolute; inset:0; border-radius:18px; padding:1px; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(200,161,83,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .form{background:#23392C}
}
.form-lg{display:flex; align-items:center; justify-content:center; gap:12px; padding:20px 20px 6px; background:linear-gradient(180deg,rgba(200,161,83,.2),transparent)}
.form-lg .mark{height:52px; width:auto}
.form-lg .word{height:64px; width:auto}
.form-b{position:relative; padding:14px 26px 28px}
.form-b h3{margin-bottom:6px}
.form-b>p{color:var(--mute); font-size:15px; margin-bottom:18px}
.form-ok{display:none}
.form-ok[data-on]{display:block; background:rgba(200,161,83,.14); border:1px solid rgba(200,161,83,.55); border-radius:10px; padding:18px 20px; margin-bottom:18px}
.form-ok h3{font-size:20px; margin-bottom:4px}
.form-ok p{margin:0; color:#DCE4D8; font-size:14.5px}

.fld{position:relative; margin-bottom:12px}
.fld input,.fld select{width:100%; min-height:56px; padding:22px 16px 8px; border-radius:9px;
  border:1px solid rgba(244,239,227,.26); background:rgba(244,239,227,.08); color:var(--cream-2);
  font-family:'Jost',sans-serif; font-size:16px; appearance:none; transition:border-color .2s, background .2s}
.fld select{padding-right:42px}
.fld input:focus,.fld select:focus{outline:none; border-color:var(--gold); background:rgba(244,239,227,.14)}
.fld label{position:absolute; left:16px; top:18px; font-size:16px; color:var(--mute-2); pointer-events:none; transition:.18s ease}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label,
.fld select:focus~label,.fld select.has~label{top:8px; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold)}
.fld .car{position:absolute; right:18px; top:24px; width:9px; height:9px; border-right:2px solid var(--mute-2); border-bottom:2px solid var(--mute-2); transform:rotate(45deg); pointer-events:none}
.form-b .btn{width:100%; margin-top:6px}
.form-note{margin:14px 0 0; font-size:12.5px; color:var(--mute-2); line-height:1.55}

/* ---------- footer ---------- */
.ft{background:#101E17; color:var(--mute); padding:64px 0 30px}
.ft-in{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; padding-bottom:34px; border-bottom:1px solid rgba(200,161,83,.18)}
.flogo{height:62px; width:auto; margin-bottom:16px}
.ft p{font-size:15px; color:var(--mute)}
.ft h4{color:var(--cream-2); font-family:'Jost',sans-serif; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px}
.ft ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.ft ul a{color:var(--mute); text-decoration:none; font-size:15px; display:inline-block; padding:10px 0; min-height:44px; transition:color .2s}
.ft ul a:hover{color:var(--gold)}
.ft-bar{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; padding-top:24px; font-size:13.5px}
.ft-bar p{margin:0; font-size:13.5px}
/* inline-block plus real padding, or the attribution is a 34px tap target */
.by{color:var(--mute); text-decoration:none; font-size:13.5px; display:inline-block; padding:11px 0; min-height:44px}
.by b{color:var(--gold); font-weight:600}
.disc{margin:24px 0 0; font-size:12px; line-height:1.65; color:var(--mute-2)}

.pinbar{display:none}

/* ================= mobile ================= */
@media (max-width:1000px){
  .hd-in{min-height:68px}
  .nav{display:none}
  .burger{display:block}
  .hd-cta{display:none}
  .mnav{display:block; position:fixed; left:0; right:0; top:68px; z-index:55;
    background:var(--ink-2); border-bottom:1px solid var(--line);
    transform:translateY(-130%); transition:transform .3s cubic-bezier(.2,.7,.2,1); padding:10px 20px 20px}
  .mnav.open{transform:none; box-shadow:0 24px 44px -28px rgba(0,0,0,.7)}
  .mnav a{display:block; padding:15px 4px; min-height:52px; font-size:17px; font-weight:500; color:var(--cream); text-decoration:none; border-bottom:1px solid rgba(200,161,83,.16)}
  .mnav a:last-child{border-bottom:0}
  .hero-in{grid-template-columns:1fr; gap:34px}
  .hero-fig{display:none}
  .builder{grid-template-columns:1fr}
  .box{position:static}
  .contact{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16.5px}
  section[id]{scroll-margin-top:84px}
  .hero{padding:52px 0 64px}
  .brand .mark{height:36px}
  .brand .word{height:38px}
  .hcta{display:none}
  .sec{padding:56px 0}
  .head{margin-bottom:32px}
  .edit,.picks,.marks{grid-template-columns:1fr}
  /* a flex basis becomes a HEIGHT the moment a row flips to a column */
  .split>*,.edit>*,.picks>*,.marks>*{flex:0 0 auto}
  .box ul{min-height:0}
  .ft-in{grid-template-columns:1fr; gap:30px}
  .ft-bar{flex-direction:column; align-items:flex-start; gap:10px}
  .form-lg .mark{height:44px}
  .form-lg .word{height:54px}
  .form-b{padding:14px 20px 24px}
  .pinbar{display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:70;
    padding:11px 14px calc(11px + env(safe-area-inset-bottom));
    background:rgba(16,30,23,.9); backdrop-filter:blur(16px);
    transform:translateY(115%); transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .pinbar.on{transform:none}
  .pinbar .btn{flex:1 1 0; min-height:50px; padding:12px 14px; font-size:14.5px}
  .ft{padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  [data-rev],[data-cascade] span{opacity:1; transform:none; filter:none}
}