/* Thrivemind Botanicals — concept 2, "The Ritual".
   This direction backs the FAIRY identity: the two winged silhouettes that sit
   either side of every bath salt label, and the fairy roundel on the lip balm
   lids. Their own caption is the licence for it — "there's a fairy kissed blend
   waiting for you".

   Ground is the watercolour aqua from the labels with the gold veining
   interpreted as CSS rather than lifted as a bitmap, so none of their body copy
   travels with it.

   Colours sampled from their artwork:
     #C9E9DE aqua ground   #B28D70 gold veining   #8D2D5D flyer berry
     #4C704F wordmark green   #CE8688 flyer rose
   Text variants are the same hues darkened until they clear 4.5:1. */

:root{
  --aqua:#C9E9DE;
  --aqua-lt:#EAF7F2;
  --aqua-dp:#8FC9BA;
  --shell:#FBF7F2;
  --ink:#22403A;              /* 12.4:1 on the aqua ground */
  --ink-soft:#4E6B63;
  --berry:#8D2D5D;            /* 7.88:1 on white — their own button colour */
  --berry-dp:#71234A;
  --berry-lt:#F3E3EC;
  --rose:#CE8688;             /* decorative only, 2.84:1 */
  --green:#4C704F;
  --gold:#B28D70;             /* the veining; decorative, 3.03:1 */
  --gold-txt:#7A5A2E;         /* 6.31:1 — the gold when it carries text */
  --violet:#9B6FC4;
  --line:rgba(34,64,58,.15);
  --accent:#8D2D5D;           /* the hero quiz bundle reads this */
  --r:20px;
  --shadow:0 22px 60px -30px rgba(34,64,58,.45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--shell); color:var(--ink);
  font-family:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.68; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--berry)}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif; font-weight:600; line-height:1.14; margin:0 0 .5em; letter-spacing:-.015em}
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:12px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; color:var(--gold-txt); margin:0 0 12px}
.lede{font-size:clamp(17px,1.5vw,19.5px); color:var(--ink-soft); max-width:62ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:14px 27px; border:0; border-radius:999px;
  font-family:'Mulish',sans-serif; font-size:15.5px; font-weight:800;
  text-decoration:none; cursor:pointer; transition:transform .25s, box-shadow .25s, background .25s}
.btn-pri{background:var(--berry); color:#fff; box-shadow:0 14px 32px -16px rgba(141,45,93,.9)}
.btn-pri:hover{background:var(--berry-dp); transform:translateY(-2px)}
.btn-gho{background:rgba(255,255,255,.6); color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(34,64,58,.24)}
.btn-gho:hover{background:#fff; transform:translateY(-2px)}
.btn-sm{min-height:44px; padding:10px 20px; font-size:14.5px}
.btn[disabled]{background:#69655F; color:#fff; 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(--berry),var(--gold),var(--aqua-dp)); z-index:80}

/* ---------- header ---------- */
.hd{position:sticky; top:0; z-index:60; background:rgba(251,247,242,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.hd-in{display:flex; align-items:center; gap:20px; min-height:78px}
.brand{display:flex; align-items:center; margin-right:auto; padding:6px 0; min-height:44px}
.brand img{height:52px; width:auto}
.nav{display:flex; gap:26px}
.nav a{font-size:15px; font-weight:700; color:var(--ink-soft); text-decoration:none; padding:12px 2px; transition:color .2s}
.nav a:hover{color:var(--berry)}
.burger{display:none; width:46px; height:46px; border:0; border-radius:14px; background:rgba(141,45,93,.1); cursor:pointer; position:relative}
.burger span,.burger::before,.burger::after{content:''; position:absolute; left:13px; width:20px; height:2px; background:var(--berry); 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:74px 0 86px;
  background:linear-gradient(172deg,var(--aqua-lt) 0%,var(--aqua) 55%,#D8EDE4 100%)}
/* the gold veining of their labels, drawn rather than lifted. named with the
   tokens the quiz bundle treats as decorative so it can never be mistaken for
   the hero visual */
.hero-tex{position:absolute; inset:0; pointer-events:none; opacity:.5; filter:blur(1.4px);
  background:
    linear-gradient(102deg,transparent 26%,rgba(178,141,112,.30) 27.4%,rgba(178,141,112,.16) 28.2%,transparent 29.6%),
    linear-gradient(96deg,transparent 60%,rgba(178,141,112,.22) 61.4%,rgba(178,141,112,.10) 62.1%,transparent 63.4%),
    linear-gradient(112deg,transparent 43%,rgba(178,141,112,.17) 44.2%,transparent 45.6%),
    radial-gradient(700px 400px at 20% 12%, rgba(255,255,255,.75), transparent 62%)}
.hero-glow{position:absolute; left:-140px; bottom:-180px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(206,134,136,.28), transparent 65%); filter:blur(8px); pointer-events:none}
/* The fairy silhouettes from their own bath salt labels, where they flank the
   wordmark at the edges. Kept to the BOTTOM corners and explicitly behind the
   content: at left:-30px/top:70px the violet one painted straight across the
   headline, and both are dark, so the collision was barely legible as one. */
.hero-shape{position:absolute; z-index:0; pointer-events:none}
.hero-shape.a{left:-90px; bottom:-30px; width:250px; opacity:.42}
.hero-shape.b{right:-34px; bottom:-16px; width:236px; opacity:.7}
.hero-in{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:54px; align-items:center}
.hh{font-size:clamp(40px,6.4vw,76px); margin-bottom:18px}
.hh .em{color:var(--berry); font-style:italic}
[data-cascade] span{display:inline-block; opacity:0; transform:translateY(20px) scale(.97); 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(--ink-soft); max-width:52ch}
.hcta{display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 22px}
.hchips{list-style:none; display:flex; flex-wrap:wrap; gap:9px; padding:0; margin:0}
.hchips li{font-size:13.5px; font-weight:700; color:var(--ink); background:rgba(255,255,255,.72); border:1px solid rgba(34,64,58,.16); padding:8px 14px; border-radius:999px}
.hero-fig{position:relative; border-radius:24px; overflow:hidden; box-shadow:var(--shadow); background:#fff}
.hero-fig img{width:100%}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,8vw,104px) 0; position:relative}
.sec-shell{background:var(--shell)}
.sec-aqua{background:linear-gradient(180deg,#F3FAF7,var(--aqua))}
.sec-ink{background:var(--ink); color:#DCE9E5}
.sec-ink h2,.sec-ink h3{color:#fff}
.sec-ink .lede{color:#B7CCC6}
.sec-berry{background:linear-gradient(180deg,var(--berry-lt),#FBF7F2)}
.head{max-width:64ch; margin-bottom:44px}
[data-rev]{opacity:0; transform:translateY(24px); filter:blur(10px); 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 ritual picker ---------- */
.ritual{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4vw,52px); align-items:start}
.moods{display:grid; gap:12px}
.mood{display:flex; align-items:center; gap:14px; width:100%; text-align:left; min-height:64px;
  border:1.5px solid rgba(34,64,58,.16); border-radius:16px; background:#fff; padding:14px 18px;
  font-family:'Mulish',sans-serif; font-size:16px; font-weight:700; color:var(--ink);
  cursor:pointer; transition:border-color .22s, transform .22s, box-shadow .22s}
.mood:hover{transform:translateX(3px); border-color:var(--berry)}
.mood[aria-pressed="true"]{border-color:var(--berry); box-shadow:0 0 0 3px rgba(141,45,93,.13); background:#FFF9FC}
.mood .dot{flex:0 0 auto; width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.mood small{display:block; font-weight:500; font-size:13.5px; color:var(--ink-soft); margin-top:2px}
.result{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow); min-height:340px}
.result .notes{font-size:12.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-txt); margin-bottom:8px}
.result h3{font-size:clamp(24px,3vw,32px); margin-bottom:10px}
.result .rimg{border-radius:14px; overflow:hidden; margin:18px 0 0; border:1px solid var(--line)}
.result .rnote{font-size:13px; color:var(--ink-soft); margin:12px 0 0}

/* ---------- range ---------- */
.range{display:grid; grid-template-columns:repeat(auto-fit,minmax(266px,1fr)); gap:24px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.card-img{aspect-ratio:16/10; overflow:hidden; background:var(--aqua-lt)}
.card-img img{width:100%; height:100%; object-fit:cover}
.card-b{padding:22px 22px 26px; display:flex; flex-direction:column; gap:8px; flex:1}
.card-b h3{margin:0}
.card-b p{margin:0; font-size:15.5px; color:var(--ink-soft)}
.tagrow{display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:14px}
.tag{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--berry); background:var(--berry-lt); padding:6px 11px; border-radius:999px}

/* ---------- split ---------- */
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(32px,5vw,60px); align-items:center}
.split img{border-radius:var(--r); box-shadow:var(--shadow)}
.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(--berry); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.sec-ink .ticks svg{stroke:var(--aqua-dp)}

/* ---------- the gap ---------- */
.gap-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px}
.gapc{background:rgba(255,255,255,.07); border:1px solid rgba(143,201,186,.3); border-radius:16px; padding:26px}
.gapc .n{font-family:'Fraunces',serif; font-size:44px; color:var(--aqua-dp); line-height:1; margin-bottom:10px}
.gapc h3{font-size:20px; margin-bottom:8px}
.gapc p{margin:0; font-size:15px; color:#B7CCC6}

/* ---------- 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(--aqua-dp); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; margin-top:2px}

.form{position:relative; border-radius:24px; overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.18),rgba(255,255,255,.05) 46%,rgba(178,141,112,.10));
  backdrop-filter:blur(30px) saturate(165%); -webkit-backdrop-filter:blur(30px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.44), 0 30px 70px -34px rgba(0,0,0,.6)}
.form::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 260px at 8% -6%, rgba(255,255,255,.32), transparent 60%)}
.form::after{content:''; position:absolute; inset:0; border-radius:24px; padding:1px; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(178,141,112,.85));
  -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:#2C4F47}
}
.form-lg{display:flex; justify-content:center; padding:20px 20px 4px; background:linear-gradient(180deg,rgba(178,141,112,.2),transparent)}
.form-lg img{height:92px; width:auto}
.form-b{position:relative; padding:16px 26px 28px}
.form-b h3{color:#fff; margin-bottom:6px}
.form-b>p{color:#B7CCC6; font-size:15px; margin-bottom:18px}
.form-ok{display:none}
.form-ok[data-on]{display:block; background:rgba(143,201,186,.16); border:1px solid rgba(143,201,186,.5); border-radius:12px; padding:18px 20px; margin-bottom:18px}
.form-ok h3{font-size:21px; margin-bottom:4px}
.form-ok p{margin:0; color:#DCE9E5; 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:13px;
  border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.10); color:#fff;
  font-family:'Mulish',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(--aqua-dp); background:rgba(255,255,255,.17)}
.fld label{position:absolute; left:16px; top:18px; font-size:16px; color:#A9C0BA; 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:.06em; text-transform:uppercase; color:var(--aqua)}
.fld .car{position:absolute; right:18px; top:24px; width:9px; height:9px; border-right:2px solid #A9C0BA; border-bottom:2px solid #A9C0BA; 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:#9BB2AB; line-height:1.5}

/* ---------- footer ---------- */
.ft{background:var(--ink); color:#B7CCC6; 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(255,255,255,.1)}
.flogo{height:64px; width:auto; margin-bottom:16px}
.ft p{font-size:15px; color:#B7CCC6}
.ft h4{color:#fff; font-family:'Mulish',sans-serif; font-size:15px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin-bottom:14px}
.ft ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.ft ul a{color:#B7CCC6; text-decoration:none; font-size:15px; display:inline-block; padding:10px 0; min-height:44px; transition:color .2s}
.ft ul a:hover{color:var(--aqua)}
.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:#B7CCC6; text-decoration:none; font-size:13.5px; display:inline-block; padding:11px 0; min-height:44px}
.by b{color:var(--aqua); font-weight:800}
.disc{margin:24px 0 0; font-size:12px; line-height:1.65; color:#89A29B}

.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(--shell); 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(34,64,58,.5)}
  .mnav a{display:block; padding:15px 4px; min-height:52px; font-size:17px; font-weight:700; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
  .mnav a:last-child{border-bottom:0}
  .hero-in{grid-template-columns:1fr; gap:34px}
  .hero-fig{display:none}
  .hero-shape.a{width:132px; left:-42px; bottom:6px; opacity:.34}
  .hero-shape.b{width:140px; right:-40px; bottom:-6px; opacity:.42}
  .ritual{grid-template-columns:1fr}
  .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:50px 0 62px}
  .brand img{height:44px}
  .hcta{display:none}
  .sec{padding:56px 0}
  .head{margin-bottom:32px}
  .range,.gap-grid{grid-template-columns:1fr}
  /* a flex basis becomes a HEIGHT the moment a row flips to a column */
  .split>*,.range>*,.gap-grid>*,.moods>*{flex:0 0 auto}
  .result{min-height:0}
  .ft-in{grid-template-columns:1fr; gap:30px}
  .ft-bar{flex-direction:column; align-items:flex-start; gap:10px}
  .form-lg img{height:74px}
  .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(34,64,58,.88); 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:15px}
  .pinbar .btn-gho{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
  .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}
}