/* =========================================================
   Soul Tribe — A Spiritual Healing Circle
   Palette drawn from the mark: forest, gold, cream.
   ========================================================= */

/* ---------- self-hosted type (Fraunces + Karla, latin) ---------- */
@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("../assets/fonts/fraunces-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces";font-style:italic;font-weight:300 600;font-display:swap;
  src:url("../assets/fonts/fraunces-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Karla";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("../assets/fonts/karla-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Karla";font-style:italic;font-weight:300 500;font-display:swap;
  src:url("../assets/fonts/karla-italic.woff2") format("woff2");
}

:root{
  --ink:#0A1F14;
  --green-deep:#0E2B18;
  --green:#164A2B;
  --green-mid:#2E7D46;
  --green-soft:#4E8F63;
  --gold:#C9A227;
  --gold-lt:#E8C766;
  --gold-dp:#8F6E12;
  --cream:#FBF5E9;
  --cream-2:#F2E8D5;
  --cream-3:#E3D6BC;

  --bg:var(--cream);
  --fg:var(--green-deep);

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Karla","Helvetica Neue",Arial,sans-serif;

  --shell:min(1240px,92vw);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --r:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.68;font-weight:400;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--green-deep)}

.skip{position:absolute;left:-999px;top:0;z-index:999;background:var(--gold);color:var(--green-deep);padding:.7rem 1.1rem;border-radius:0 0 10px 0}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------- shared type ---------- */
.h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.06;
  letter-spacing:-.015em;margin:.35em 0 .5em;
  font-variation-settings:"SOFT" 0,"WONK" 1;
}
.h2 em{font-style:italic;color:var(--green-mid);display:block}
.lead{font-size:clamp(1.02rem,1.1vw + .8rem,1.22rem);line-height:1.75;max-width:60ch;color:#26402F}
.lead--tight{max-width:52ch}
.eyebrow{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.24em;
  font-size:.72rem;font-weight:600;color:var(--gold-dp);
  display:flex;align-items:center;gap:.85rem;margin:0;
}
.rule{display:block;width:clamp(28px,4vw,54px);height:1px;background:linear-gradient(90deg,transparent,var(--gold));}
.link{color:var(--gold-dp);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(201,162,39,.4);padding-bottom:2px}
.link:hover{border-color:var(--gold)}

/* ---------- buttons ---------- */
.btn{
  --bg-btn:var(--gold);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:1.02em 2.1em;border:0;border-radius:999px;cursor:pointer;
  text-decoration:none;font-weight:600;font-size:.86rem;
  letter-spacing:.13em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;will-change:transform;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),color .4s ease;
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 160% at 50% 130%,var(--gold-lt),var(--gold) 55%,var(--gold-dp));
  transform:translateY(0);transition:transform .5s var(--ease-out);
}
.btn--gold{color:var(--green-deep);box-shadow:0 12px 30px -16px rgba(143,110,18,.9)}
.btn--ghost{color:var(--green-deep);border:1px solid rgba(22,74,43,.32)}
.btn--ghost::before{background:var(--green-deep);transform:translateY(101%);border-radius:999px}
/* Hover only where a real pointer exists. On a touchscreen :hover sticks after
   a tap, which left the ghost button filled green with its label unreadable. */
@media (hover:hover){
  .btn--gold:hover{box-shadow:0 18px 40px -16px rgba(143,110,18,.85)}
  .btn--gold:hover::before{transform:translateY(-8%) scale(1.08)}
  .btn--ghost:hover,
  .hero__actions .btn--ghost:hover{color:var(--cream)}
  .btn--ghost:hover::before{transform:translateY(0)}
}
/* a brief press state stands in for hover on touch */
.btn:active{transform:scale(.985)}
.btn--full{width:100%}

/* ---------- veil / preloader ---------- */
.veil{
  position:fixed;inset:0;z-index:200;background:var(--green-deep);
  display:grid;place-items:center;transition:opacity .8s ease,visibility .8s;
}
.veil.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.veil__inner{display:grid;justify-items:center;gap:1.1rem}
.veil__mark{width:96px;height:96px;stroke:var(--gold);stroke-width:1.4;fill:none}
.veil__ring{stroke-dasharray:327;stroke-dashoffset:327;animation:draw 1.5s var(--ease-out) forwards}
.veil__petal{stroke:var(--green-soft);stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1.3s .18s var(--ease-out) forwards}
.veil__petal--core{stroke:var(--gold-lt);animation-delay:.34s}
.veil__moon{stroke:var(--gold-lt);stroke-dasharray:80;stroke-dashoffset:80;animation:draw 1s .5s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.veil__word{
  font-family:var(--serif);color:var(--cream);letter-spacing:.34em;
  text-transform:uppercase;font-size:.82rem;opacity:0;
  animation:fadeUp .9s .6s var(--ease-out) forwards;padding-left:.34em;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- cursor ---------- */
.cursor{position:fixed;top:0;left:0;z-index:180;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.is-on{opacity:1}
.cursor__dot,.cursor__halo{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:6px;height:6px;background:var(--gold)}
.cursor__halo{
  width:38px;height:38px;border:1px solid rgba(201,162,39,.55);
  transition:width .35s var(--ease-out),height .35s var(--ease-out),background .35s,border-color .35s;
}
.cursor.is-near .cursor__halo{width:70px;height:70px;background:rgba(201,162,39,.12);border-color:rgba(201,162,39,.8)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem max(4vw,1.1rem);
  transition:background .5s var(--ease),backdrop-filter .5s,box-shadow .5s,padding .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(251,245,233,.86);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(22,74,43,.1),0 18px 40px -34px rgba(10,31,20,.6);
  padding-top:.6rem;padding-bottom:.6rem;
}
.nav__brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.nav__brand img{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(201,162,39,.5),0 8px 22px -14px rgba(10,31,20,.9);transition:transform .6s var(--ease-out)}
.nav__brand:hover img{transform:rotate(-6deg) scale(1.05)}
.nav__brandText{display:grid;line-height:1.12}
.nav__brandText strong{font-family:var(--serif);font-weight:500;font-size:1.06rem;letter-spacing:.06em;text-transform:uppercase}
.nav__brandText em{font-style:normal;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dp)}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem)}
.nav__links a{
  text-decoration:none;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;position:relative;padding:.35rem 0;
}
.nav__links a:not(.nav__cta)::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.nav__links a:not(.nav__cta):hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{
  background:var(--green-deep);color:var(--cream);border-radius:999px;
  padding:.68rem 1.35rem !important;transition:background .4s,color .4s,transform .4s var(--ease-out);
}
.nav__cta:hover{background:var(--gold);color:var(--green-deep)}
.is-locked .nav{background:transparent;box-shadow:none;backdrop-filter:none;color:var(--cream)}
.is-locked .nav .nav__brandText strong{color:var(--cream)}
.is-locked .burger span{background:var(--cream)}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--green-deep);transition:transform .4s var(--ease-out),opacity .3s}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.sheet{
  position:fixed;inset:0;z-index:110;background:var(--green-deep);color:var(--cream);
  display:grid;align-content:center;gap:2rem;padding:6rem max(6vw,1.5rem) 3rem;
  clip-path:circle(0% at 92% 5%);transition:clip-path .8s var(--ease-out);
}
.sheet.is-open{clip-path:circle(150% at 92% 5%)}
.sheet__nav{display:grid;gap:.2rem}
.sheet__nav a{
  text-decoration:none;font-family:var(--serif);font-size:clamp(1.9rem,8vw,2.9rem);
  display:flex;align-items:baseline;gap:1rem;padding:.35rem 0;
  border-bottom:1px solid rgba(232,199,102,.16);transition:color .35s,padding-left .45s var(--ease-out);
}
.sheet__nav a:hover{color:var(--gold-lt);padding-left:.6rem}
.sheet__nav i{font-style:normal;font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;color:var(--gold)}
.sheet__note{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,245,233,.55);margin:0}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  padding:clamp(7rem,14vh,10rem) max(4vw,1.1rem) clamp(4rem,10vh,7rem);
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(232,199,102,.28),transparent 58%),
    radial-gradient(90% 70% at 6% 92%,rgba(46,125,70,.2),transparent 60%),
    var(--cream);
  overflow:hidden;isolation:isolate;
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9}
.hero__glow{
  position:absolute;z-index:0;width:min(680px,80vw);aspect-ratio:1;right:-8%;top:-14%;
  background:radial-gradient(circle,rgba(201,162,39,.34),transparent 62%);
  filter:blur(12px);animation:breathe 12s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.12);opacity:1}}
.hero__inner{position:relative;z-index:2;width:var(--shell);margin-inline:auto;max-width:1000px}
.hero__title{
  font-family:var(--serif);font-weight:300;margin:0 0 1.6rem;
  font-size:clamp(2.6rem,7.4vw,6.1rem);line-height:.98;letter-spacing:-.028em;
  font-variation-settings:"SOFT" 0,"WONK" 1;
}
.hero__title .line{display:block;overflow:hidden}
.hero__title .w{display:inline-block;transform:translateY(105%);opacity:0}
.is-ready .hero__title .w{animation:riseIn 1.15s var(--ease-out) forwards}
@keyframes riseIn{to{transform:none;opacity:1}}
.hero__title .gold{color:var(--gold-dp)}
.hero__title .italic{font-style:italic;color:var(--green-mid)}
.hero__sub{font-size:clamp(1.05rem,1.3vw + .8rem,1.34rem);max-width:44ch;color:#28442f;margin:0 0 2.4rem;line-height:1.66}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem}
.hero__portrait{
  display:none;position:absolute;z-index:2;margin:0;
  /* align the frame to the content shell rather than the viewport edge, so it
     stays beside the copy on wide screens instead of drifting off to the right */
  right:max(4vw,calc((100vw - var(--shell)) / 2));bottom:clamp(2.5rem,8vh,5rem);
  /* aspect-ratio tracks the photograph (931/1689 = .551) so the arch crops
     ~9% of its width instead of the 38% the old 360/1054 frame cut away */
  height:min(76vh,780px);aspect-ratio:1/2;
  animation:drift 11s ease-in-out infinite;
}
.hero__portrait::before{
  content:"";position:absolute;inset:-6% -16%;border-radius:inherit;
  background:radial-gradient(60% 50% at 50% 40%,rgba(201,162,39,.32),transparent 70%);
  filter:blur(6px);
}
/* The photograph meets the gold edge directly - no mat. An offset second outline
   (the idiom used on the rectangular photos) cannot work here: on a 171px arch
   radius the two curves diverge and read as a misalignment, not decoration. */
.hero__portrait{
  padding:0;
  border:1px solid rgba(201,162,39,.72);
  border-radius:999px 999px 26px 26px;
  background:none;
  box-shadow:0 46px 84px -46px rgba(10,31,20,.8);
  overflow:hidden;
}
.hero__portrait img{
  position:relative;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  /* 999px clamps to half the box width, so the photo's crown matches the border's
     inner curve on its own; only the square-ish bottom needs the 1px adjustment */
  border-radius:999px 999px 25px 25px;
  border:0;box-shadow:none;
}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (min-width:1200px){.hero__portrait{display:block}}

.hero__scroll{
  position:absolute;left:max(4vw,1.1rem);bottom:2rem;z-index:2;
  display:flex;align-items:center;gap:.8rem;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dp);
}
.hero__scrollLine{display:block;width:64px;height:1px;background:rgba(143,110,18,.3);position:relative;overflow:hidden}
.hero__scrollLine::after{content:"";position:absolute;inset:0;background:var(--gold);transform:translateX(-100%);animation:sweep 2.6s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- marquee ---------- */
.marquee{background:var(--green-deep);color:var(--cream);overflow:hidden;padding:.95rem 0;border-block:1px solid rgba(201,162,39,.28)}
.marquee__track{display:flex;gap:2.2rem;width:max-content;animation:slide 34s linear infinite;align-items:center}
.marquee__track span{font-family:var(--serif);font-style:italic;font-size:1.05rem;letter-spacing:.04em;white-space:nowrap}
.marquee__track b{color:var(--gold);font-size:.7rem}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ---------- available-now band ---------- */
/* The Selar products previously appeared 83% down the page. This puts a route to
   them directly under the hero without adding a second full offers block. */
.promo{
  width:var(--shell);margin:clamp(2.4rem,5vh,3.6rem) auto 0;
  padding:clamp(1rem,2.4vh,1.4rem) 0;
  border-top:1px solid rgba(22,74,43,.14);
  border-bottom:1px solid rgba(22,74,43,.14);
  display:grid;gap:.9rem;
}
.promo__items{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.6vw,2.2rem)}
.promo__item{
  display:grid;grid-template-columns:auto 1fr;
  column-gap:clamp(.85rem,1.8vw,1.15rem);align-items:center;
  text-decoration:none;color:inherit;
}
.promo__cover{display:block;width:min(84px,20vw)}
.promo__cover img{
  width:100%;height:auto;display:block;border-radius:3px;
  filter:drop-shadow(0 10px 16px rgba(10,31,20,.26));
  transition:transform .5s var(--ease-out);
}
.promo__item:hover .promo__cover img{transform:translateY(-3px)}
.promo__info{display:grid;gap:.18rem;align-content:center}
.promo__info b{
  font-family:var(--serif);font-weight:500;font-size:1.02rem;
  color:var(--green-deep);line-height:1.2;
}
.promo__info i{
  font-family:var(--serif);font-style:italic;font-size:.9rem;
  color:#3B5A44;line-height:1.25;
}
.promo__price{
  font-family:var(--serif);font-size:1.05rem;color:var(--gold-dp);
  line-height:1;margin-top:.25rem;
}
.promo__price span{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:#4A6553;
}
.promo__go{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--green-deep);margin-top:.3rem;
}
.promo__go b{font-weight:400;display:inline-block;transition:transform .45s var(--ease-out)}
.promo__item:hover .promo__go b{transform:translateX(4px)}

/* ---------- bridge ---------- */
.bridge{
  width:var(--shell);margin:clamp(5rem,12vh,9rem) auto;
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4.25rem);align-items:center;
}

/* mark and photograph sit side by side, so the column's height is driven by the
   photo alone rather than by both stacked - which is what left 255px of dead
   space beside the copy. Reads as three bands: mark, photograph, words. */
.bridge__art{
  display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(1rem,2vw,1.9rem);align-items:center;
}
.vesica{width:100%;height:auto;stroke-width:1;fill:none}
.vesica__c{stroke:rgba(46,125,70,.55);stroke-dasharray:704;stroke-dashoffset:704;transition:stroke-dashoffset 2.2s var(--ease-out)}
.vesica__c--b{transition-delay:.25s;stroke:rgba(201,162,39,.7)}
.vesica__c--halo{stroke:rgba(143,110,18,.25);stroke-dasharray:1006;stroke-dashoffset:1006;transition-delay:.1s}
.vesica__seed{fill:rgba(46,125,70,.12);stroke:var(--green-mid);stroke-dasharray:520;stroke-dashoffset:520;transition:stroke-dashoffset 2s .5s var(--ease-out),fill 1.4s .9s ease}
.vesica__spark{fill:var(--gold);opacity:0;transition:opacity .9s 1.2s ease}
.is-seen .vesica__c,.is-seen .vesica__seed{stroke-dashoffset:0}
.is-seen .vesica__spark{opacity:1;animation:twinkle 4s 1.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.35}}
.bridge__list{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:1.15rem}
.bridge__list li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;padding-top:1.15rem;border-top:1px solid rgba(22,74,43,.14)}
.bridge__list span{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;color:var(--gold-dp);padding-top:.35rem}
.bridge__list p{margin:0;color:#2A452F}

/* photograph tucked under the vesica in the sticky art column */
.bridge__photo{
  margin:0;position:relative;max-width:100%;
  border:1px solid rgba(201,162,39,.6);border-radius:var(--r);overflow:hidden;
  box-shadow:0 38px 70px -46px rgba(10,31,20,.75);
}
.bridge__photo img{
  width:100%;height:auto;border:0;border-radius:calc(var(--r) - 1px);box-shadow:none;
}

/* photograph closing the Begin intro column */
/* same clean arch as the hero: the photograph meets the gold edge. An offset
   second outline cannot work on an arch - the two curves have different centres
   and visibly diverge over the crown. */
/* the form is much shorter than the intro column, which left ~820px of dead
   space beside it. The photograph now spans both columns and centres beneath. */
.begin__photo{
  grid-column:1/-1;justify-self:center;
  margin:clamp(2.4rem,5vh,3.6rem) 0 0;position:relative;max-width:340px;
  border:1px solid rgba(201,162,39,.72);
  border-radius:999px 999px var(--r) var(--r);
  overflow:hidden;
  box-shadow:0 42px 78px -48px rgba(10,31,20,.8);
}
.begin__photo img{
  display:block;width:100%;height:auto;
  /* 999px clamps to half the box width on both, so the crowns stay concentric */
  border-radius:999px 999px calc(var(--r) - 1px) calc(var(--r) - 1px);
  border:0;box-shadow:none;
}

/* ---------- founder ---------- */
.founder{width:var(--shell);margin:clamp(5rem,12vh,9rem) auto}
.founder__inner{
  display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;
  gap:clamp(2rem,6vw,5rem);
  /* portrait centred on the text block's midline, not pinned to its top */
  align-items:center;
}
/* A round portrait. The gold ring is part of the photograph itself, so there is
   no CSS border here - adding one would draw a second ring. The image was cropped
   to the ring's outer edge with the page cream outside it, so clipping to a
   circle lands just clear of the gold. */
.founder__photo{
  margin:0;position:relative;max-width:400px;width:100%;justify-self:center;
  aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:0 38px 70px -44px rgba(10,31,20,.55);
}
.founder__photo img{
  display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;
}
.founder__body{margin-top:1.4rem}
.founder__body p{margin:0 0 1rem;color:#2A452F;max-width:60ch;line-height:1.75}
.founder__body p:last-child{margin-bottom:0}

/* ---------- services ---------- */
.services{
  background:
    radial-gradient(80% 60% at 100% 0%,rgba(46,125,70,.35),transparent 60%),
    var(--green-deep);
  color:var(--cream);padding:clamp(4.5rem,11vh,8rem) 0;position:relative;overflow:hidden;
}
.services::before{
  content:"";position:absolute;inset:auto -10% -40% -10%;height:60%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(201,162,39,.16),transparent 70%);
}
.services__head,.services__body{width:var(--shell);margin-inline:auto;position:relative;z-index:2}
.services .eyebrow{color:var(--gold-lt)}
.services .rule{background:linear-gradient(90deg,transparent,var(--gold-lt))}
.services .h2 em{color:var(--gold-lt)}
.services__body{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);margin-top:2.6rem;align-items:start}
.svc__index{list-style:none;margin:0;padding:0;position:relative}
.svc__tab{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:baseline;gap:1.1rem;padding:1.05rem .4rem;
  border-bottom:1px solid rgba(232,199,102,.16);color:rgba(251,245,233,.62);
  transition:color .45s var(--ease),padding-left .55s var(--ease-out);
}
.svc__tab i{font-style:normal;font-size:.68rem;letter-spacing:.2em;color:var(--gold);opacity:.7}
.svc__tab span{font-family:var(--serif);font-size:clamp(1.15rem,2.1vw,1.72rem);line-height:1.16;font-weight:400}
.svc__tab:hover{color:var(--cream);padding-left:.9rem}
.svc__tab.is-active{color:var(--cream);padding-left:.9rem}
.svc__tab.is-active i{opacity:1}
.svc__tab.is-active span{font-style:italic;color:var(--gold-lt)}
.svc__marker{
  position:absolute;left:-14px;top:0;width:2px;background:var(--gold);border-radius:2px;
  transition:transform .6s var(--ease-out),height .6s var(--ease-out);
  box-shadow:0 0 14px rgba(201,162,39,.8);
}
.svc__stage{
  position:relative;min-height:340px;
  /* claim horizontal gestures so a right-swipe moves between services instead of
     triggering the browser's back-navigation. pinch-zoom stays available. */
  touch-action:pan-y pinch-zoom;
  overscroll-behavior-x:contain;
}
.svc__panel{
  background:linear-gradient(160deg,rgba(251,245,233,.075),rgba(251,245,233,.02));
  border:1px solid rgba(232,199,102,.2);border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.6rem);backdrop-filter:blur(6px);
}
.svc__panel[hidden]{display:none}
.svc__panel.is-in{animation:panelIn .7s var(--ease-out) both}
@keyframes panelIn{from{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:none}}
.svc__glyph{width:74px;height:74px;margin-bottom:1.3rem}
.svc__glyph svg{width:100%;height:100%}
.svc__glyph .dr{stroke:var(--gold-lt);stroke-width:1.2;fill:none;stroke-dasharray:300;stroke-dashoffset:300;animation:draw 1.6s .1s var(--ease-out) forwards}
.svc__glyph .fl{fill:var(--gold);opacity:0;animation:fadeUp .8s .7s ease forwards}
.svc__glyph .fl2{fill:rgba(232,199,102,.35);stroke:var(--gold-lt);stroke-width:1;opacity:0;animation:fadeUp .8s .6s ease forwards}
.svc__panel h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3vw,2.15rem);margin:0 0 .6rem;letter-spacing:-.01em}
.svc__panel p{margin:0;color:rgba(251,245,233,.8);max-width:52ch}
/* two columns sized to their content, so four tags read as a block rather than
   wrapping 3 + 1 with an orphan underneath */
.svc__tags{
  list-style:none;display:grid;grid-template-columns:repeat(2,max-content);
  gap:.5rem .75rem;justify-content:start;margin:1.6rem 0 0;padding:0;
}
.svc__tags li{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(232,199,102,.35);border-radius:999px;padding:.42rem .85rem;color:var(--gold-lt);
}

/* two columns on a phone: 01 02 / 03 04. The pills need tighter tracking and
   padding to survive a ~150px column without wrapping - measured against the
   longest tag on the page, "Subconscious wounds". */
@media (max-width:1000px){
  .svc__tags{
    display:grid;grid-template-columns:1fr 1fr;gap:.45rem;
    align-items:stretch;
  }
  .svc__tags li{
    font-size:.6rem;letter-spacing:.06em;padding:.44rem .5rem;
    display:flex;align-items:center;justify-content:center;text-align:center;
  }
}
/* narrow phones: trim tracking and padding so the longest tags still hold one
   line. Below this the type would have to go under ~9px, so they are allowed to
   wrap - stretch keeps both pills in a row the same height when they do. */
@media (max-width:400px){
  .svc__tags li{letter-spacing:.03em;padding:.44rem .34rem;font-size:.57rem}
}

/* Desktop: the glyph sat above the heading, pushing the card's first line ~95px
   below the tab list's first row. Pairing them on one line lifts the heading to
   the top of the card and shortens the card into the bargain. */
@media (min-width:1001px){
  .svc__panel{
    display:grid;grid-template-columns:auto 1fr;
    column-gap:1.15rem;align-items:center;
  }
  .svc__glyph{grid-area:1/1;width:58px;height:58px;margin:0}
  .svc__panel h3{grid-area:1/2}
  .svc__panel p{grid-area:2/1/2/3;margin-top:1.15rem}
  .svc__tags{grid-area:3/1/3/3}
}

/* ---------- lunar ---------- */
.lunar{width:var(--shell);margin:clamp(5rem,12vh,9rem) auto}
.lunar__head{max-width:56ch}
.lunar__body{
  margin-top:3rem;display:grid;grid-template-columns:minmax(280px,420px) 1fr;
  gap:clamp(2rem,6vw,5rem);align-items:center;
}
.lunar__dial{display:grid;gap:1.4rem;justify-items:center}
.dial__ring{position:relative;width:min(420px,80vw);aspect-ratio:1}
.dial__svg{position:absolute;inset:0;width:100%;height:100%}
.dial__orbit{stroke:rgba(22,74,43,.16);stroke-width:1;fill:none}
.dial__orbit--in{stroke:rgba(201,162,39,.22);stroke-dasharray:3 7}
.dial__ring .tick{stroke:rgba(143,110,18,.35);stroke-width:1}
.dial__moon{
  position:absolute;inset:0;display:grid;place-items:center;
  filter:drop-shadow(0 18px 40px rgba(10,31,20,.28));
}
.dial__moon svg{width:44%;height:44%;overflow:visible}
.moon__dark{fill:#12261B}
.moon__edge{fill:none;stroke:rgba(201,162,39,.55);stroke-width:1}
#moonShape{transition:d .7s var(--ease-out)}
.dial__nodes{position:absolute;inset:0}
.dial__node{
  position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  border:1px solid rgba(143,110,18,.35);background:var(--cream);cursor:pointer;
  display:grid;place-items:center;transition:transform .5s var(--ease-out),background .4s,border-color .4s,box-shadow .4s;
}
.dial__node::after{content:"";width:7px;height:7px;border-radius:50%;background:rgba(143,110,18,.5);transition:background .4s,transform .4s}
.dial__node:hover{transform:scale(1.12);border-color:var(--gold)}
.dial__node.is-active{background:var(--green-deep);border-color:var(--gold);box-shadow:0 0 0 5px rgba(201,162,39,.14);transform:scale(1.1)}
.dial__node.is-active::after{background:var(--gold-lt);transform:scale(1.25)}
.dial__controls{display:flex;align-items:center;gap:1.2rem}
.dial__arrow{
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(22,74,43,.2);
  background:transparent;cursor:pointer;transition:background .4s,color .4s,transform .4s var(--ease-out);
}
.dial__arrow:hover{background:var(--green-deep);color:var(--cream);transform:translateY(-2px)}
.dial__hint{margin:0;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dp)}
.lunar__panel{position:relative;padding-left:clamp(0px,2vw,1.6rem);border-left:1px solid rgba(22,74,43,.14)}
.lunar__phase{margin:0;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dp)}
.lunar__title{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(1.8rem,4vw,2.9rem);margin:.35rem 0 .8rem;line-height:1.08}
.lunar__copy{margin:0 0 1.4rem;max-width:48ch;color:#2A452F;font-size:1.06rem}
.lunar__ritual{margin:0;font-size:.86rem;color:#3B5A44;border-top:1px dashed rgba(143,110,18,.4);padding-top:1rem}
.lunar__ritual span{display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dp);margin-bottom:.35rem}
.is-swapping .lunar__phase,.is-swapping .lunar__title,.is-swapping .lunar__copy,.is-swapping .lunar__ritual{animation:none;opacity:0;transform:translateY(8px)}
.lunar__panel p,.lunar__panel h3{transition:opacity .45s var(--ease),transform .45s var(--ease)}

/* capped and centred: at full shell width each card was 309px holding ~130px of
   text, so every card sat two-thirds empty */
.seasons{
  list-style:none;margin:clamp(3rem,7vh,5rem) auto 0;padding:0;
  max-width:900px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(22,74,43,.14);border:1px solid rgba(22,74,43,.14);
  border-radius:var(--r);overflow:hidden;
}
/* icon beside the title rather than stacked above it, so each card reads as one
   unit and the whole strip gets shorter */
.seasons li{
  background:var(--cream);padding:1.35rem 1.25rem;
  display:grid;grid-template-columns:auto 1fr;
  column-gap:.6rem;row-gap:.2rem;align-content:center;
  transition:background .5s var(--ease),transform .5s var(--ease-out);
}
.seasons li i{grid-area:1/1;align-self:center}
.seasons li b{grid-area:1/2}
.seasons li span{grid-area:2/2}
.seasons li:hover{background:var(--cream-2)}
.seasons i{font-style:normal;color:var(--gold-dp);font-size:1.2rem}
.seasons b{font-family:var(--serif);font-weight:500;font-size:1.08rem}
.seasons span{font-size:.82rem;color:#4A6553}

.gather{
  margin-top:clamp(3rem,8vh,5.5rem);
  /* the photograph is landscape (970x543), so it takes the wider share here -
     the old .72fr column was sized for a tall portrait */
  display:grid;grid-template-columns:1fr .92fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
/* same clean frame as the hero and The Path: the photograph meets the gold edge,
   no offset second outline. overflow:hidden also clips the hover zoom. */
.gather__photo{
  margin:0;position:relative;max-width:520px;justify-self:center;
  border:1px solid rgba(201,162,39,.6);border-radius:var(--r);overflow:hidden;
  box-shadow:0 40px 70px -48px rgba(10,31,20,.8);
}
.gather__photo img{
  position:relative;width:100%;height:auto;display:block;
  border-radius:calc(var(--r) - 1px);
  transition:transform .8s var(--ease-out);
}
.gather__photo:hover img{transform:scale(1.015)}
.gather__text h3{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;margin:.5rem 0 .8rem;color:var(--green-mid);
}
.gather__text .btn{margin-top:1.6rem}

/* ---------- womb ---------- */
.womb{
  overflow:hidden;
  background:linear-gradient(180deg,var(--cream),var(--cream-2));
  padding:clamp(4.5rem,11vh,8rem) 0;border-block:1px solid rgba(143,110,18,.18);
}
.womb__inner{width:var(--shell);margin-inline:auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.womb__art{position:relative;margin:0;justify-self:center;max-width:360px;width:100%}
.wombArt{position:absolute;top:-7%;left:50%;translate:-50% 0;width:124%;aspect-ratio:1;height:auto;fill:none;pointer-events:none}
.womb__art img{
  position:relative;width:100%;height:auto;object-fit:cover;
  border-radius:999px 999px 20px 20px;border:1px solid rgba(201,162,39,.5);
  box-shadow:0 44px 80px -50px rgba(10,31,20,.85);
}
.wombArt__pulse{stroke:rgba(143,110,18,.35);stroke-width:1;transform-origin:130px 130px;animation:pulseRing 6s ease-out infinite}
.wombArt__pulse--2{animation-delay:1.6s;stroke:rgba(46,125,70,.3)}
@keyframes pulseRing{0%{transform:scale(.82);opacity:0}30%{opacity:.9}100%{transform:scale(1.22);opacity:0}}
.womb__text .btn{margin-top:1.8rem}

/* ---------- herbal ---------- */
.herbal{width:var(--shell);margin:clamp(5rem,12vh,9rem) auto}
.herbal__head{max-width:58ch}
.herbal__grid{margin-top:2.8rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.herb{
  position:relative;padding:2rem 1.7rem 2.1rem;border-radius:var(--r);
  background:var(--cream);border:1px solid rgba(22,74,43,.14);
  transform-style:preserve-3d;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s;
  overflow:hidden;
}
.herb::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,0%),rgba(201,162,39,.16),transparent 70%);
  opacity:0;transition:opacity .5s ease;
}
.herb:hover{border-color:rgba(201,162,39,.6);box-shadow:0 30px 60px -40px rgba(10,31,20,.55)}
.herb:hover::after{opacity:1}
.herb__icon{width:56px;height:56px;margin-bottom:1.1rem}
.herb__icon .dr{stroke:var(--green-mid);stroke-width:1.3;fill:none;stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset 1.4s var(--ease-out)}
.herb__icon .fl{fill:var(--gold)}
.reveal.is-seen .herb__icon .dr,.herb.is-seen .herb__icon .dr{stroke-dashoffset:0}
.herb h3{font-family:var(--serif);font-weight:500;font-size:1.32rem;margin:0 0 .5rem}
.herb p{margin:0;color:#3B5A44;font-size:.95rem}
.herb--note{background:var(--green-deep);color:var(--cream);border-color:transparent;display:grid;align-content:center;gap:.7rem}
.herb--note h3{color:var(--gold-lt)}
.herb--note p{color:rgba(251,245,233,.76)}
.herb--note .link{color:var(--gold-lt);border-color:rgba(232,199,102,.4);justify-self:start}

/* ---------- verse ---------- */
.verse{
  background:var(--green-deep);color:var(--cream);text-align:center;
  padding:clamp(4.5rem,12vh,8rem) max(6vw,1.2rem);position:relative;overflow:hidden;
}
.verse::before,.verse::after{
  content:"";position:absolute;width:420px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.18),transparent 65%);
}
.verse::before{top:-30%;left:-8%}
.verse::after{bottom:-40%;right:-6%}
/* the stage is sized to the LONGEST verse so the block never jumps as they
   rotate; centring means a shorter verse sits in the middle of that space
   instead of leaving all the slack underneath it */
.verse__stage{
  position:relative;min-height:clamp(150px,22vh,190px);
  width:min(880px,100%);margin-inline:auto;
  display:grid;align-items:center;
}
.verse__item{
  grid-area:1/1;margin:0;opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease),transform .8s var(--ease-out);pointer-events:none;
}
.verse__item.is-active{opacity:1;transform:none}
.verse__item p{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.4rem,3.6vw,2.5rem);line-height:1.28;margin:0;letter-spacing:-.01em;
}
.verse__dots{display:flex;gap:.6rem;justify-content:center;margin-top:2.4rem;position:relative;z-index:2}
.verse__dot{width:34px;height:3px;border:0;padding:0;border-radius:3px;background:rgba(251,245,233,.24);cursor:pointer;transition:background .4s,transform .4s}
.verse__dot.is-active{background:var(--gold)}
.verse__dot:hover{transform:scaleY(1.6)}

/* ---------- begin ---------- */
.begin{width:var(--shell);margin:clamp(5rem,12vh,9rem) auto}
.begin__grid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(2rem,6vw,4.5rem);align-items:start}
.steps{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;gap:1.3rem}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;align-items:baseline}
.steps span{grid-row:span 2;font-family:var(--serif);font-size:1.6rem;color:var(--gold);line-height:1;min-width:2.1rem}
.steps b{font-family:var(--serif);font-weight:500;font-size:1.16rem}
.steps p{margin:0;color:#3B5A44;font-size:.95rem}
.form{
  background:linear-gradient(165deg,var(--cream-2),var(--cream));
  border:1px solid rgba(143,110,18,.28);border-radius:calc(var(--r) + 6px);
  padding:clamp(1.5rem,3.4vw,2.4rem);display:grid;gap:1.1rem;
  box-shadow:0 40px 80px -60px rgba(10,31,20,.7);
}
.field{position:relative}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(22,74,43,.28);
  padding:1.5rem 0 .55rem;font-family:var(--sans);font-size:1rem;color:var(--green-deep);
  border-radius:0;transition:border-color .4s;
}
.field select{appearance:none;cursor:pointer}
.field--select::after{content:"";position:absolute;right:2px;bottom:1.1rem;width:8px;height:8px;border-right:1px solid var(--gold-dp);border-bottom:1px solid var(--gold-dp);transform:rotate(45deg);pointer-events:none}
.field textarea{resize:vertical;min-height:96px}
.field label{
  position:absolute;left:0;top:1.45rem;pointer-events:none;color:#5C7565;
  font-size:.98rem;transition:transform .4s var(--ease-out),color .4s,font-size .4s var(--ease-out);transform-origin:left top;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--gold)}
/* The floated label turns uppercase with .14em tracking, which widens it past
   the field BEFORE the .74 scale shrinks it - so it wrapped to two lines and the
   second line landed on the typed text. Laying it out on one line and letting the
   transform do the shrinking keeps it clear of the control. */
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label,
.field--select label{
  transform:translateY(-1.3rem) scale(.74);color:var(--gold-dp);
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.field.is-invalid input,.field.is-invalid textarea{border-bottom-color:#A6402F}
.honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.btn.is-busy{cursor:progress;opacity:.75}
.btn.is-busy::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(251,245,233,.45),transparent);
  animation:shimmer 1.1s linear infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.form.is-sent .field,.form.is-sent .btn,.form.is-sent .form__note{display:none}
.form__sent[hidden]{display:none}
.form__sent{
  display:grid;justify-items:center;text-align:center;gap:.6rem;padding:1.4rem .5rem 1rem;
  animation:panelIn .7s var(--ease-out) both;outline:none;
}
.form__sent svg{width:58px;height:58px;stroke:var(--gold-dp);stroke-width:1.4;fill:none;stroke-linecap:round}
.form__sent svg circle{stroke-dasharray:170;stroke-dashoffset:170;animation:draw 1s .1s var(--ease-out) forwards}
.form__sent svg path{stroke-dasharray:46;stroke-dashoffset:46;animation:draw .6s .6s var(--ease-out) forwards;stroke:var(--green-mid)}
.form__sent h3{font-family:var(--serif);font-weight:400;font-style:italic;font-size:1.7rem;margin:.4rem 0 0}
.form__sent p{margin:0;color:#3B5A44;max-width:34ch}
.form__note{margin:0;font-size:.78rem;color:#5C7565;text-align:center}
.form__note.is-good{color:var(--green-mid);font-weight:600}
.form__note.is-bad{color:#A6402F}

/* reach details */
.reach{list-style:none;margin:2.6rem 0 0;padding:1.6rem 0 0;display:grid;gap:1.1rem;border-top:1px solid rgba(22,74,43,.14)}
.reach li{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.reach span{
  flex:0 0 clamp(96px,9vw,124px);font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-dp);
}
.reach a{
  text-decoration:none;color:var(--green-deep);font-size:1.02rem;
  display:inline-flex;align-items:center;gap:.45rem;position:relative;padding-bottom:2px;
}
.reach a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out);
}
.reach a:hover::after{transform:scaleX(1);transform-origin:left}
.reach svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;flex:none}
.reach__wa,.reach__social{font-size:.92rem;color:#3B5A44}
.reach__social i{font-style:normal}
.reach__wa:hover,.reach__social:hover{color:var(--gold-dp)}

/* selar offers */
.offers{margin-top:clamp(3rem,8vh,5rem)}
.offers__grid{margin-top:1.4rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
/* the two books pair on the first row; the session, which carries no cover,
   runs the full width beneath them */
.offer--wide{grid-column:1/-1}
.offer{
  position:relative;display:grid;align-content:start;gap:.55rem;text-decoration:none;
  padding:1.9rem 1.7rem;border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:var(--green-deep);color:var(--cream);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
.offer::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(120% 130% at 12% 110%,rgba(201,162,39,.42),transparent 62%);
  transition:opacity .6s var(--ease);
}
.offer:hover{transform:translateY(-4px);box-shadow:0 36px 60px -40px rgba(10,31,20,.85)}
.offer:hover::before{opacity:1}
.offer__tag{
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(232,199,102,.4);border-radius:999px;padding:.3rem .7rem;justify-self:start;
}
.offer h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.4vw,1.75rem);margin:.5rem 0 0}
.offer p{margin:0;color:rgba(251,245,233,.76);font-size:.95rem;max-width:38ch}
/* the book card carries its cover alongside the copy */
.offer--book{grid-template-columns:auto 1fr;column-gap:clamp(1rem,2.4vw,1.5rem);align-items:start}
/* a % width here is circular inside an `auto` grid track and silently collapses
   to the minimum, so size the cover against the viewport instead */
.offer__cover{display:block;width:min(136px,30vw)}
.offer__cover img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.45));
  transition:transform .6s var(--ease-out);
}
.offer--book:hover .offer__cover img{transform:translateY(-4px) rotate(-1.2deg)}
.offer__body{display:grid;align-content:start;gap:.55rem}
.offer__sub{
  font-family:var(--serif);font-style:italic;font-size:1.02rem;
  color:rgba(251,245,233,.82);line-height:1.24;margin-top:-.25rem;
}
.offer__price{
  font-family:var(--serif);font-size:1.32rem;color:var(--gold-lt);
  margin-top:.35rem;line-height:1;
}
/* The session card spans the full row, but a single 38ch column left two thirds
   of it empty. Two columns use the width without stretching the line to ~90
   characters, which would be well past a comfortable measure. */
@media (min-width:621px){
  .offer--wide{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    column-gap:clamp(2rem,5vw,4.5rem);
  }
  .offer--wide > .offer__tag,
  .offer--wide > h3,
  .offer--wide > .offer__price,
  .offer--wide > .offer__go{grid-column:1}
  .offer--wide > p{
    grid-column:2;grid-row:1 / span 4;
    max-width:none;align-self:center;font-size:1rem;line-height:1.7;
  }
}

.offer__go{
  margin-top:.8rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-lt);display:inline-flex;align-items:center;gap:.5rem;
}
.offer__go b{transition:transform .5s var(--ease-out)}
.offer:hover .offer__go b{transform:translateX(5px)}

/* ---------- footer ---------- */
.foot{background:var(--green-deep);color:var(--cream);padding:clamp(3.5rem,9vh,6rem) 0 2rem;margin-top:0}
.foot__top,.foot__base{width:var(--shell);margin-inline:auto}
.foot__top{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.foot__brand img{width:104px;height:104px;border-radius:50%;box-shadow:0 0 0 1px rgba(201,162,39,.4)}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem}
.foot__cols h4{font-family:var(--sans);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem;font-weight:600}
.foot__cols a{display:block;text-decoration:none;color:rgba(251,245,233,.78);padding:.28rem 0;font-size:.94rem;transition:color .35s,transform .4s var(--ease-out)}
.foot__cols a:hover{color:var(--gold-lt);transform:translateX(4px)}
.foot__small{font-size:.76rem;color:rgba(251,245,233,.5);margin:.6rem 0 0;line-height:1.6}
.foot__base{
  margin-top:clamp(2.5rem,6vh,4rem);padding-top:1.4rem;border-top:1px solid rgba(232,199,102,.18);
  display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;align-items:baseline;
}
.foot__base p{margin:0;font-size:.8rem;color:rgba(251,245,233,.6)}
.foot__base .foot__small{max-width:52ch;margin:0;text-align:right}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.is-seen{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .herbal__grid{grid-template-columns:repeat(2,1fr)}
  .nav__links{display:none}
  .burger{display:block}
  .bridge,.womb__inner,.begin__grid,.founder__inner{grid-template-columns:1fr}
  .founder__photo{position:static;max-width:min(280px,78vw);justify-self:start}
  /* markup order is copy-then-imagery (the logical reading order); on a phone
     the imagery is lifted above it visually */
  .bridge__art{order:-1;max-width:none;margin-inline:0;grid-template-columns:.85fr 1.15fr;
               gap:clamp(.9rem,3.5vw,1.6rem)}
  .bridge__photo{box-shadow:0 30px 60px -42px rgba(10,31,20,.7)}
  /* close the gap above the pair */
  .bridge{margin-top:clamp(2.2rem,6vh,3.4rem)}
  .begin__photo{max-width:min(340px,100%)}
  .womb__art{max-width:330px;margin-inline:auto}
  .gather{grid-template-columns:1fr}
  .gather__photo{max-width:100%;justify-self:stretch}
  .services__body{grid-template-columns:1fr}
  /* Nine doorways on a phone: the vertical list ran 579px and put the panel a
     full screen below the first tab. Instead the titles become a horizontal
     strip of pills with the panel directly beneath - tap, and the content is
     right there. The strip bleeds to the screen edges so pills can run off. */
  .services__body{gap:1.1rem}
  .svc__index{
    display:flex;gap:.5rem;
    padding:4px 0 8px;
    margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .svc__index::-webkit-scrollbar{display:none}
  .svc__index li{flex:0 0 auto;scroll-snap-align:center}
  .svc__marker{display:none}
  .svc__tab{
    width:auto;padding:.58rem 1rem;white-space:nowrap;
    border:1px solid rgba(232,199,102,.32);border-radius:999px;
    gap:.45rem;align-items:center;
    transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
  }
  .svc__tab i{display:none}
  .svc__tab span{font-size:.92rem;line-height:1.2}
  .svc__tab:hover{padding-left:1rem}
  .svc__tab.is-active{
    padding-left:1rem;
    background:rgba(232,199,102,.14);border-color:var(--gold-lt);
  }
  .svc__tab.is-active span{font-style:normal;color:var(--gold-lt)}
  .svc__stage{min-height:0}
  .lunar__body{grid-template-columns:1fr;justify-items:center}
  .lunar__panel{border-left:0;border-top:1px solid rgba(22,74,43,.14);padding:1.6rem 0 0;text-align:center}
  .lunar__copy{margin-inline:auto}
  .seasons{grid-template-columns:repeat(2,1fr)}
  .foot__top{grid-template-columns:1fr}
  .offers__grid{grid-template-columns:1fr}
  .foot__base{flex-direction:column}
  .foot__base .foot__small{text-align:left}

  /* hero portrait becomes a full-bleed background behind the headline */
  .hero__portrait{
    display:block;position:absolute;inset:0;z-index:0;margin:0;
    width:auto;height:auto;aspect-ratio:auto;animation:none;
    /* strip the desktop arch mount - here the photo is a full-bleed background */
    padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  }
  .hero__portrait::before,.hero__portrait::after{display:none}
  /* high-key wash: the filter lifts the photo's blacks into a pale range so
     the picture stays legible as a picture, instead of being buried in cream */
  .hero__portrait img{
    width:100%;height:100%;object-fit:cover;object-position:50% 0%;
    border:0;border-radius:0;box-shadow:none;
    filter:contrast(.30) brightness(1.55) saturate(.70);
    /* anchored at the top edge, so the raised hands stay in frame while the
       tiled floor is pushed out of the bottom */
    transform:scale(1.32);transform-origin:50% 0%;
  }
  /* only a whisper of cream, strongest at the very bottom into the marquee */
  .hero::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(251,245,233,.14) 0%,
      rgba(251,245,233,.08) 38%,
      rgba(251,245,233,.04) 62%,
      rgba(251,245,233,.12) 88%,
      rgba(251,245,233,.34) 100%);
  }
  /* keep the ribbons and the type above the wash */
  .hero__canvas{z-index:2;opacity:.55}
  .hero__inner{z-index:3}
  /* deepened hero palette - each of these is measured >=4.5:1 (>=3:1 for the
     display size) against the darkest pixel of the photo behind it */
  .hero__title{color:#0E2B18}
  .hero__title .gold{color:#4F3C09}
  .hero__title .italic{color:#17492A}
  .hero__sub{color:#0E2B18;margin-bottom:1.35rem}
  .hero__actions{justify-content:center}
  /* the marquee directly below already signals "keep going", so the scroll cue
     is redundant on a phone - and it competes with the full-width buttons */
  .hero__scroll{display:none}
  .hero__actions .btn--ghost{color:#0E2B18;border-color:rgba(14,43,24,.45)}
}
@media (max-width:1000px){
  /* 101px of padding above and below on a phone left the type marooned in the
     green. Tighten the frame so the block wraps the words. */
  .verse{padding:clamp(2.4rem,6vh,3.4rem) max(6vw,1.2rem)}
  .verse__stage{min-height:0}
  .verse__dots{margin-top:1.4rem}
}

@media (max-width:620px){
  /* beside the copy the cover left only 171px for text - stack it instead */
  .offer--book{grid-template-columns:1fr;row-gap:1rem}
  .offer__cover{width:118px}
  .promo__items{grid-template-columns:1fr;gap:1.1rem}
  .promo__cover{width:min(92px,24vw)}
}

@media (max-width:620px){
  /* six stacked cards ran 2031px - 2.4 screens. A swipeable deck instead, with
     no auto-scroll: the seasons strip above already drifts on its own, and two
     moving carousels in a row would compete. This one waits for the reader. */
  .herbal__grid{
    display:flex;grid-template-columns:none;
    gap:.85rem;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    /* bleed to the screen edges so cards can sit flush while scrolling */
    margin-inline:calc(50% - 50vw);
    padding-inline:calc(50vw - 50% + 1px);
    padding-block:4px;
  }
  .herbal__grid::-webkit-scrollbar{display:none}
  .herb{
    flex:0 0 76%;scroll-snap-align:center;
    padding:1.5rem 1.35rem 1.6rem;
  }
  .herbal__grid:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  .hero{min-height:92svh}
  /* hero buttons hug their labels instead of stretching the full column */
  .hero__actions .btn{width:auto;padding-inline:1.55em}
  /* a horizontal snapping strip instead of four stacked cards: one row rather
     than a 605px column. Cards are sized so the next one peeks in at the edge. */
  .seasons{
    /* flex, not grid: grid tracks shrink to fit the container, so the strip
       never overflows and never scrolls. flex-basis forces the overflow. */
    display:flex;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .seasons::-webkit-scrollbar{display:none}
  .seasons li{flex:0 0 58%;scroll-snap-align:start;padding:1.15rem 1.05rem}
  .seasons i{font-size:1.05rem}
  .seasons b{font-size:1rem}
  .seasons:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  /* four stacked sections ran 1282px - 1.5 screens. Two columns with tighter
     link rhythm brings the whole footer under one screen with nothing removed. */
  .foot__cols{grid-template-columns:1fr 1fr;gap:1.3rem 1rem}
  /* .16rem padding fit the footer in 829px but shrank the links to 29px with no
     gap between them. .30rem keeps the original 33px tap height for 41px more. */
  .foot__cols a{padding:.30rem 0;font-size:.88rem}
  .foot__cols h4{margin-bottom:.6rem}
  .reach span{flex-basis:100%}
  .dial__node{width:30px;height:30px;margin:-15px 0 0 -15px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .hero__title .w{transform:none;opacity:1}
  .reveal{opacity:1;transform:none}
  .vesica__c,.vesica__seed,.svc__glyph .dr,.herb__icon .dr{stroke-dashoffset:0}
  .hero__portrait{animation:none}
  .svc__glyph .fl,.svc__glyph .fl2,.vesica__spark,.veil__word{opacity:1}
  .marquee__track{animation:none}
}