/* Thrivemind Botanicals — concept 1, "The Apothecary".
   Design system built on their ORNATE GREEN WORDMARK, the mark that appears on
   the Instagram grid, the flyers and every bath salt label.

   Every colour here was sampled from their own artwork, never picked by eye:
     #4C704F  the core of the wordmark green
     #1E3327  the scalp oil bottle label
     #C9E9DE  the watercolour ground of the bath salt labels
     #C8A153  the gold tree emblem on the oil bottle
     #8D2D5D  the "Shop Now" button on their lip balm flyer
   The -txt variants are the same hues darkened until they clear 4.5:1 on cream,
   because their gold and their aqua are both unreadable as text as they stand. */

:root{
  --cream:#F6F2E8;
  --paper:#FFFDF8;
  --ink:#1E3327;
  --ink-soft:#4A5B50;
  --green:#4C704F;          /* brand, 5.62:1 on white — safe as text AND as a button */
  --green-deep:#3A5A3D;     /* 7.75:1 — headings */
  --green-pale:#DCE8DB;
  --aqua:#C9E9DE;           /* decorative only, 1.30:1 */
  --aqua-deep:#7FBFAF;
  --gold:#C8A153;           /* decorative + on ink; needs DARK text when used as a fill */
  --gold-txt:#7A5A2E;       /* 6.31:1 on white — the gold when it has to be read */
  --berry:#8D2D5D;          /* 7.88:1 */
  --rose:#CE8688;
  --line:rgba(30,51,39,.14);
  --accent:#4C704F;         /* the hero quiz bundle reads this */
  --r:16px;
  --shadow:0 18px 50px -24px rgba(30,51,39,.42);
  --wrapw:1200px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* width/height attributes on an <img> map to a presentational height hint, which
   silently kills aspect-ratio unless the author CSS also sets height */
img{max-width:100%; display:block; height:auto}
a{color:var(--green-deep)}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; line-height:1.12; margin:0 0 .5em; letter-spacing:-.01em}
h2{font-size:clamp(30px,4.4vw,48px); color:var(--green-deep)}
h3{font-size:clamp(21px,2.4vw,27px); color:var(--green-deep)}
h4{font-size:18px; color:var(--green-deep)}
p{margin:0 0 1em}
.wrap{width:min(100% - 40px,var(--wrapw)); margin-inline:auto}
/* anchor links have to clear the sticky header on their own, because the only
   other scroll offset lives in Lenis and Lenis is desktop only */
section[id]{scroll-margin-top:92px}
[hidden]{display:none !important}

.eyebrow{
  font-family:'Karla',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.16em; 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 26px; border:0; border-radius:999px;
  font-family:'Karla',sans-serif; font-size:15.5px; font-weight:700; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; transition:transform .25s, box-shadow .25s, background .25s;
}
.btn-pri{background:var(--green); color:#fff; box-shadow:0 12px 28px -14px rgba(76,112,79,.85)}
.btn-pri:hover{background:#3F5F42; transform:translateY(-2px)}
.btn-gho{background:transparent; color:var(--green-deep); box-shadow:inset 0 0 0 1.5px rgba(76,112,79,.45)}
.btn-gho:hover{background:rgba(76,112,79,.08); transform:translateY(-2px)}
.btn-sm{min-height:44px; padding:10px 20px; font-size:14.5px}
/* a disabled primary must go flat neutral, never a faded brand fill, or the
   label stops being readable */
.btn[disabled]{background:#616D65; color:#fff; box-shadow:none; transform:none; cursor:not-allowed}

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

/* ---------- header ---------- */
.hd{position:sticky; top:0; z-index:60; background:rgba(246,242,232,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.hd-in{display:flex; align-items:center; gap:20px; min-height:76px}
.brand{display:flex; align-items:center; margin-right:auto; padding:6px 0; min-height:44px}
.brand img{height:50px; width:auto}
.nav{display:flex; gap:26px}
.nav a{font-size:15px; font-weight:600; color:var(--ink-soft); text-decoration:none; padding:12px 2px; transition:color .2s}
.nav a:hover{color:var(--green)}
.burger{display:none; width:46px; height:46px; border:0; border-radius:12px; background:rgba(76,112,79,.1); cursor:pointer; position:relative}
.burger span,.burger::before,.burger::after{content:''; position:absolute; left:13px; width:20px; height:2px; background:var(--green-deep); 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:76px 0 84px; background:linear-gradient(168deg,#FDFBF4 0%,#EFF6EE 42%,var(--aqua) 100%)}
/* names deliberately kept in the decorative list the quiz bundle skips
   (tex/veil/glow), so a background layer can never be mistaken for the hero visual */
.hero-tex{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(760px 420px at 12% 8%, rgba(255,255,255,.85), transparent 62%),
    radial-gradient(600px 380px at 88% 92%, rgba(200,161,83,.16), transparent 66%)}
.hero-veil{position:absolute; right:-160px; top:-120px; width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle, rgba(127,191,175,.30), transparent 66%); filter:blur(10px); 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); color:var(--green-deep); margin-bottom:18px}
.hh .em{color:var(--berry); font-style:italic}
[data-cascade] span{display:inline-block; opacity:0; transform:translateY(18px) rotate(1.2deg); filter:blur(7px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s}
[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:600; color:var(--green-deep); background:rgba(255,255,255,.72); border:1px solid rgba(76,112,79,.22); padding:8px 14px; border-radius:999px}
/* the slot the hero quiz takes over. Once the hero stacks it is dead space, so
   it goes away entirely rather than sitting above the panel. */
.hero-fig{position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--shadow); background:#fff}
.hero-fig img{width:100%}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,8vw,104px) 0}
.sec-paper{background:var(--paper)}
.sec-ink{background:var(--ink); color:#E9EFE9}
.sec-ink h2,.sec-ink h3{color:#fff}
.sec-ink .lede{color:#C6D3C8}
.sec-aqua{background:linear-gradient(180deg,#F2F9F5,var(--aqua))}
.head{max-width:64ch; margin-bottom:44px}
[data-rev]{opacity:0; transform:translateY(22px); filter:blur(9px); transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1), filter .85s}
[data-rev].in{opacity:1; transform:none; filter:none}

/* ---------- the range ---------- */
.range{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,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(--green-pale)}
.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; font-size:23px}
.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:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-txt); background:rgba(200,161,83,.16); padding:6px 11px; border-radius:999px}

/* ---------- blends ---------- */
.blends{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.blend{background:#fff; border:1px solid var(--line); border-left:4px solid var(--green); border-radius:12px; padding:24px}
.blend h3{font-size:22px; margin-bottom:6px}
.blend .notes{font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--gold-txt); margin-bottom:10px}
.blend p{margin:0; font-size:15.5px; color:var(--ink-soft)}

/* ---------- split ---------- */
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(32px,5vw,64px); 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(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.sec-ink .ticks svg{stroke:var(--gold)}

/* ---------- the gap (what is missing today) ---------- */
.gap-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px}
.gapc{background:rgba(255,255,255,.06); border:1px solid rgba(200,161,83,.28); border-radius:14px; padding:26px}
.gapc .n{font-family:'Cormorant Garamond',serif; font-size:44px; color:var(--gold); line-height:1; margin-bottom:10px}
.gapc h3{font-size:20px; margin-bottom:8px}
.gapc p{margin:0; font-size:15px; color:#C6D3C8}

/* ---------- faq ---------- */
.faq{max-width:820px; margin-inline:auto; display:grid; gap:12px}
.qa{background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.qa summary{list-style:none; cursor:pointer; padding:20px 54px 20px 22px; font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:600; color:var(--green-deep); 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(--green); border-bottom:2px solid var(--green); 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(--ink-soft)}

/* ---------- contact + liquid glass form ---------- */
.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}
.clist a{color:var(--aqua)}

.form{
  position:relative; border-radius:22px; overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 46%,rgba(200,161,83,.08));
  backdrop-filter:blur(30px) saturate(165%); -webkit-backdrop-filter:blur(30px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 30px 70px -34px rgba(0,0,0,.65);
}
.form::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 260px at 8% -6%, rgba(255,255,255,.30), transparent 60%)}
.form::after{content:''; position:absolute; inset:0; border-radius:22px; padding:1px; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(200,161,83,.75));
  -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:#24402F}
}
/* their own mark sits on top of the thing that asks for a customer's details */
.form-lg{display:flex; justify-content:center; padding:20px 20px 4px; background:linear-gradient(180deg,rgba(200,161,83,.16),transparent)}
.form-lg img{height:92px; width:auto}
.form-b{position:relative; padding:16px 26px 28px}
.form-b h3{color:#fff; font-size:26px; margin-bottom:6px}
.form-b>p{color:#C6D3C8; 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,.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:#DCE6DC; font-size:14.5px}

/* floating labels + 56px targets, per the SDT Revolut form reference */
.fld{position:relative; margin-bottom:12px}
.fld input,.fld select{
  width:100%; min-height:56px; padding:22px 16px 8px; border-radius:12px;
  border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.10); color:#fff;
  font-family:'Karla',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(255,255,255,.16)}
.fld label{position:absolute; left:16px; top:18px; font-size:16px; color:#B9C7BC; 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(--gold)}
.fld .car{position:absolute; right:18px; top:24px; width:9px; height:9px; border-right:2px solid #B9C7BC; border-bottom:2px solid #B9C7BC; 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:#A8B8AC; line-height:1.5}

/* ---------- footer ---------- */
.ft{background:var(--ink); color:#B9C7BC; 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:#B9C7BC}
.ft h4{color:#fff; font-size:15px; font-family:'Karla',sans-serif; font-weight:700; 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:#B9C7BC; 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}
/* the attribution takes this site's own footer font and muted colour, with the
   name in this site's accent — themed per site, never a fixed Scalus chip */
/* inline-block plus real padding, or the attribution renders as a 34px tap
   target and every tap audit flags it */
.by{color:#B9C7BC; text-decoration:none; font-size:13.5px; display:inline-block; padding:11px 0; min-height:44px}
.by b{color:var(--gold); font-weight:700}
.disc{margin:24px 0 0; font-size:12px; line-height:1.65; color:#8A9A8E}

/* ---------- pinned mobile action bar ---------- */
.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(--paper); 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(30,51,39,.5)}
  .mnav a{display:block; padding:15px 4px; min-height:52px; font-size:17px; font-weight:600; color:var(--green-deep); text-decoration:none; border-bottom:1px solid var(--line)}
  .mnav a:last-child{border-bottom:0}
  .hero-in{grid-template-columns:1fr; gap:34px}
  /* the quiz only takes the right hand visual's slot while that visual is on
     the right, which stops being true the moment the hero stacks */
  .hero-fig{display:none}
  .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 img{height:42px}
  /* the form panel is the stronger call to action on a phone, and these were
     pushing it about 140px down the screen */
  .hcta{display:none}
  .sec{padding:56px 0}
  .head{margin-bottom:32px}
  .range,.blends,.gap-grid{grid-template-columns:1fr}
  /* a flex basis becomes a HEIGHT the moment the row flips to a column */
  .split>*,.range>*,.blends>*,.gap-grid>*{flex:0 0 auto}
  .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(30,51,39,.86); 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{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}
}