/* ==========================================================================
   Grounded Choice Hypnotherapy — v3
   "The Spiral, painted" · dusk / sky / coral / deep · Gloock + DM Sans
   Alternating grounds. One animated artwork. GSAP motion in motion.js.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  --c-paper: #ffffff;
  --c-ink:   #242422;
  --c-dusk:  #46627a;
  --c-deep:  #1d2c38;
  --c-sky:   #8ecae6;
  --c-coral: #e07a5f;
  --c-tint:  #f7f5f2;
  --c-muted: #657079;

  /* base.css remap */
  --ink:        #ffffff;
  --ink-2:      #f7f5f2;
  --ink-3:      #ffffff;
  --surface:    #f7f5f2;
  --surface-2:  #f7f5f2;
  --text:       #242422;
  --muted:      #657079;
  --ink-text:   #242422;
  --ink-mute:   #657079;
  --accent:     #e07a5f;
  --accent-lit: #242422;
  --accent-2:   #1d2c38;
  --line:       rgba(36,36,34,.15);
  --line-d:     rgba(36,36,34,.09);

  --font-display: "Gloock", Georgia, "Times New Roman", serif;
  --font-body:    "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --wrap-max: 1440px;
  --pad:      clamp(1.25rem, 4.5vw, 4.5rem);
  --hdr-h:    80px;
  --radius:   2px;
  --ease:     cubic-bezier(.16,1,.3,1);
}

html{ background:var(--c-paper); scroll-behavior:auto; scroll-padding-top:calc(var(--hdr-h) + 24px); }
body{
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; }
::selection{ background:var(--c-deep); color:#ffffff; }

:focus-visible{ outline:2px solid var(--c-deep); outline-offset:4px; border-radius:2px; }
.hero :focus-visible,
.contact :focus-visible,
.hdr :focus-visible,
.foot :focus-visible{ outline-color:#ffffff; }
.how :focus-visible,
.fees :focus-visible,
.young :focus-visible{ outline-color:var(--c-ink); }
.hdr .mega :focus-visible{ outline-color:var(--c-deep); }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------------------------------------------------------------- grain */
.grain{
  position:fixed; inset:0; z-index:9000;
  pointer-events:none;
  opacity:.035;
  background-image:url("assets/grain.svg");
  background-size:180px 180px;
}

/* ---------------------------------------------------------------- skip */
.skip{
  position:absolute; left:1rem; top:-6rem; z-index:10000;
  padding:.8rem 1.1rem;
  background:var(--c-deep); color:#ffffff;
  font-size:.82rem; font-weight:700;
  text-decoration:underline; text-underline-offset:.2em;
  transition:top .2s var(--ease);
}
.skip:focus{ top:1rem; }

/* ---------------------------------------------------------------- preloader */
.pre{ background:var(--c-dusk); }
.pre__mark{ width:86px; height:86px; display:grid; place-items:center; }
.pre__mark svg{ width:78px; height:78px; display:block; }
.pre__draw{
  fill:none; stroke:#ffffff; stroke-width:6;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:predraw 1.7s var(--ease) .1s forwards;
}
@keyframes predraw{ to{ stroke-dashoffset:0; } }
.pre__meta{ color:rgba(255,255,255,.78); letter-spacing:.18em; }
.pre__pct{ color:var(--c-sky); }
.pre__bar{ background:rgba(255,255,255,.22); }
.pre__bar i{ background:var(--c-coral); }

/* ---------------------------------------------------------------- header */
.hdr{
  background:var(--c-dusk);
  border-bottom:1px solid rgba(255,255,255,.16);
}
@media (min-width:1024px){
  .hdr{
    background:var(--c-dusk);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .nav__foot{ display:none; }
}
.hdr__in{ min-height:var(--hdr-h); gap:1rem; }

.brand{ display:inline-flex; align-items:center; gap:.72rem; flex-shrink:0; }
.brand img{
  width:44px; height:44px;
  border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.55);
}
.brand__mark{ width:44px; height:44px; color:#ffffff; flex:none; }
.brand__word{
  display:grid; gap:.2rem;
  font-family:var(--font-display); font-size:1.3rem;
  font-weight:400; line-height:1; letter-spacing:-.01em;
  color:#ffffff;
}
.brand__word span{
  font-family:var(--font-body);
  font-size:.52rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.76);
}

.nav__list{ gap:.1rem; }
.nav__link{
  padding:.6rem .72rem;
  font-size:.9rem; font-weight:500;
  color:#ffffff;
  border-radius:999px;
}
.nav__link:hover{ background:var(--c-coral); color:var(--c-ink); }
.nav__chev{ width:8px; opacity:.65; }
.nav__item.is-open > .nav__link{ background:var(--c-coral); color:var(--c-ink); }
.nav__item.is-open .nav__chev{ opacity:1; }
.hdr__cta{ margin-left:.3rem; padding:.7rem 1.1rem; font-size:.82rem; }

/* ---------------------------------------------------------------- mega */
.mega{
  background:#ffffff;
  border:1px solid var(--line);
  border-top:4px solid var(--c-coral);
  border-radius:3px;
  box-shadow:0 34px 70px -30px rgba(16,24,32,.55);
  padding:1.5rem;
}
.mega__h{
  display:flex; align-items:center; gap:.5rem;
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:.6rem; font-weight:700; letter-spacing:.18em;
  border-bottom:1px solid var(--line);
  padding-bottom:.6rem;
}
.mega__h::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--c-coral); flex:0 0 auto;
}
.mega a{ color:var(--c-ink); font-size:.9rem; }
.mega a:hover{ color:var(--c-ink); background:var(--c-coral); }
.mega__foot{
  margin-top:1.2rem; padding-top:.9rem;
  border-top:1px solid var(--line);
  font-size:.82rem; line-height:1.5; color:var(--c-muted);
}
.mega__foot a{
  display:inline; padding:0; font-size:inherit;
  color:var(--c-ink); background:none;
  text-decoration:underline;
  text-decoration-color:var(--c-coral);
  text-decoration-thickness:2px;
  text-underline-offset:.18em;
}
.mega__foot a:hover{ background:none; color:var(--c-ink); }

/* ---------------------------------------------------------------- type */
.label{
  display:flex; align-items:center; gap:.65rem;
  font-size:.7rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--c-muted);
}
.label::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--c-coral); flex:0 0 auto;
}
.h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.7rem,5.4vw,5rem);
  line-height:.98; letter-spacing:-.025em;
  color:var(--c-ink);
  text-wrap:balance;
}
.lead{
  font-size:1.08rem; line-height:1.65;
  color:var(--c-muted); max-width:44ch;
  text-wrap:pretty;
}
.sec{ padding-block:clamp(4.5rem,8.5vw,8.5rem); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.95rem; font-weight:700;
  color:inherit;
  border-bottom:2px solid var(--c-coral);
  padding-bottom:.28rem;
  transition:gap .25s var(--ease), color .2s;
}
.link-arrow svg{ width:16px; height:16px; flex:0 0 auto; }
.link-arrow:hover{ gap:.8rem; }
.link-arrow--light{ color:#ffffff; }
.young .link-arrow{ border-bottom-color:var(--c-ink); }

/* ---------------------------------------------------------------- buttons */
.btn{
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:700;
  white-space:normal;
  min-width:0;
}
.btn--coral{
  background:var(--c-coral);
  border:1px solid var(--c-coral);
  color:var(--c-ink);
}
.btn--coral:hover{ filter:brightness(1.05); color:var(--c-ink); }
.btn--big{ padding:1.05rem 1.65rem; font-size:1rem; }
.btn--outline{
  border:2px solid var(--c-ink);
  color:var(--c-ink);
}
.btn--outline:hover{ background:var(--c-ink); border-color:var(--c-ink); color:#ffffff; }
.btn--ghost{
  border:1px solid rgba(255,255,255,.45);
  color:#ffffff;
}
.btn--ghost:hover{ background:#ffffff; border-color:#ffffff; color:var(--c-deep); }
.btn:focus-visible{ outline-offset:3px; }

/* ================================================================ 01 HERO */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--c-dusk);
  color:#ffffff;
  min-height:calc(100vh - var(--hdr-h) - 1px);
  min-height:calc(100dvh - var(--hdr-h) - 1px);
  display:flex; align-items:center;
  padding-block:clamp(2.5rem,5vw,4rem);
}
.hero__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
}
.hero__veil{
  position:absolute; inset:0;
  background:rgba(70,98,122,.82);
}
.hero__grid{
  position:relative; z-index:2;
  display:block;
  width:100%;
}
.hero__copy{
  position:relative; z-index:2;
  max-width:min(70%, 960px);
}

.hero__eyebrow{
  display:flex; align-items:center; gap:.65rem;
  font-size:.72rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
.hero__eyebrow .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--c-coral); flex:0 0 auto;
}
.hero__h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--h1-size, clamp(3.2rem, 8.6vw, 8.6rem));
  line-height:.9; letter-spacing:-.03em;
  margin:1.5rem 0 1.7rem;
}
.hero__h1 .line{ overflow:hidden; padding-block:.08em; }
@media (min-width:1024px){
  /* the fitter may run before the display font loads; this floor keeps the
     headline at its designed scale and still fits the 70% copy column */
  .hero__h1{ font-size:max(var(--h1-size, 0px), clamp(3.2rem, 8.6vw, 8.6rem)); }
}

.hero__h1 .line > span{ display:inline-block; white-space:nowrap; vertical-align:top; }
.hero__accent{ position:relative; display:inline-block; }
.hero__accent::after{
  content:"";
  position:absolute; left:-1%; right:-1%;
  bottom:-.015em; height:.075em;
  background:var(--c-coral);
  border-radius:60% 40% 55% 45% / 65% 50% 60% 40%;
  transform:rotate(-1.2deg);
}
.hero__lead{
  font-size:clamp(1.08rem,1.5vw,1.26rem);
  line-height:1.6;
  color:rgba(255,255,255,.9);
  max-width:44ch;
  text-wrap:pretty;
}
.hero__actions{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:1.4rem; margin-top:2rem;
}
.hero__trust{
  display:flex; flex-wrap:wrap;
  gap:.5rem 1.7rem;
  margin-top:2.1rem;
  font-size:.84rem;
  color:rgba(255,255,255,.8);
}
.hero__trust li{ position:relative; padding-left:.9rem; }
.hero__trust li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:5px; height:5px; border-radius:50%;
  background:var(--c-coral);
}
.hero__art{
  position:absolute;
  right:-4vw; top:50%;
  translate:0 -50%;
  width:clamp(360px, 38vw, 620px);
  max-width:none;
  z-index:1;
}

/* ---------------------------------------------------------------- spiral */
.spiral-svg{ display:block; width:100%; height:auto; overflow:visible; }
.spiral-turn{ transform-origin:360px 360px; }
.s-tail, .s-main, .s-core{
  fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.s-tail{ stroke-width:22; }
.s-main{ stroke-width:30; }
.s-core{ stroke-width:20; }
.hero .s-tail{ stroke:var(--c-sky); }
.hero .s-main{ stroke:#ffffff; }
.hero .s-core{ stroke:var(--c-coral); }
.s-dot{ fill:var(--c-coral); }

/* ================================================================ 02 TICKER */
.ticker{
  background:var(--c-coral);
  color:var(--c-ink);
  overflow:hidden;
  padding-block:clamp(.85rem,1.5vw,1.15rem);
}
.ticker__row{
  display:flex; width:max-content;
  animation:tickerMove 42s linear infinite;
}
.ticker__track{
  display:flex; align-items:center;
  gap:clamp(1.3rem,2.4vw,2.4rem);
  padding-right:clamp(1.3rem,2.4vw,2.4rem);
}
.ticker__track span{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,2vw,1.6rem);
  line-height:1; white-space:nowrap;
}
.ticker__track i{
  width:8px; height:8px; border-radius:50%;
  background:var(--c-ink); opacity:.5; flex:0 0 auto;
}
@keyframes tickerMove{ to{ transform:translateX(-50%); } }
.ticker:hover .ticker__row{ animation-play-state:paused; }

/* ================================================================ 03 WHO */
.who{ background:var(--c-paper); }
.who__head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.55fr);
  gap:1.2rem clamp(2rem,5vw,5rem);
  align-items:end;
  margin-bottom:clamp(2.8rem,5vw,4.5rem);
}
.who__head .label{ grid-column:1 / -1; }
.who__head .h2{ margin:.8rem 0 0; }
.who__head .lead{ margin:0 0 .35rem; }

.concerns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2.5rem,5vw,5rem);
}
.concern{
  display:grid;
  grid-template-columns:3.2rem minmax(0,1fr);
  gap:1rem;
  padding:clamp(1.7rem,3vw,2.4rem) 0;
  border-top:1px solid var(--line);
}
.concern__num{
  font-family:var(--font-display);
  font-size:1rem; line-height:1.2;
  color:var(--c-muted);
  padding-top:.2rem;
}
.concern h3{
  font-family:var(--font-display);
  font-size:clamp(1.45rem,2.2vw,2.05rem);
  font-weight:400; line-height:1.05;
  letter-spacing:-.01em; margin-bottom:.55rem;
}
.concern p{
  font-size:1.02rem; line-height:1.6;
  color:var(--c-muted); max-width:38ch;
  text-wrap:pretty;
}
.tags{
  display:flex; flex-wrap:wrap;
  gap:.4rem .9rem; margin-top:1rem;
}
.tags li{
  position:relative; padding-left:.8rem;
  font-size:.92rem; line-height:1.5;
}
.tags li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:4px; height:4px; border-radius:50%;
  background:var(--c-coral);
}
.who__note{
  border-top:4px solid var(--c-coral);
  padding:clamp(1.7rem,3vw,2.4rem) 0 0;
  display:flex; flex-direction:column;
  justify-content:flex-start;
}
.who__note .label{ margin-bottom:1rem; }
.who__note .label::before{ background:var(--c-coral); }
.who__note-text{
  font-family:var(--font-display);
  font-size:clamp(1.2rem,1.7vw,1.5rem);
  line-height:1.3; letter-spacing:-.01em;
  max-width:42ch; margin-bottom:1.4rem;
}

/* ================================================================ 04 HOW */
.how{ background:var(--c-sky); color:var(--c-ink); }
.how .label{ color:rgba(36,36,34,.72); }
.how .label::before{ background:var(--c-deep); }
.how__grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.how__left{ position:relative; }
.how__media{
  position:sticky;
  top:calc(var(--hdr-h) + 2rem);
}
.how__spiral{ max-width:500px; }
.how .s-main{ stroke:var(--c-deep); }
.how .s-tail{ stroke:#ffffff; }
.how .s-core{ stroke:var(--c-coral); }

.how__ripple{
  position:absolute;
  right:0; bottom:-2.2rem;
  width:clamp(190px,22vw,240px);
  margin:0;
  border:6px solid var(--c-paper);
  background:var(--c-paper);
  overflow:hidden;
}
.how__ripple img{
  width:100%; height:148px;
  object-fit:cover;
}
.how__ripple figcaption{
  font-size:.58rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-muted);
  padding:.5rem .1rem .15rem;
  background:var(--c-paper);
}
.how__head .h2{ margin:1rem 0 1.4rem; }
.how__head .lead{ color:rgba(36,36,34,.74); }
.steps{ margin-top:clamp(2.5rem,4vw,3.5rem); }
.step{
  display:grid;
  grid-template-columns:3.8rem minmax(0,1fr);
  gap:1.2rem;
  padding:clamp(1.5rem,2.6vw,2rem) 0;
  border-top:1.5px solid rgba(36,36,34,.22);
}
.step:last-child{ border-bottom:1.5px solid rgba(36,36,34,.22); }
.step__num{
  font-family:var(--font-display);
  font-size:1.7rem; line-height:1;
  color:var(--c-deep);
}
.step h3{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,2vw,1.8rem);
  font-weight:400; line-height:1.08;
  margin-bottom:.4rem;
}
.step p{
  font-size:1rem; line-height:1.6;
  max-width:44ch; text-wrap:pretty;
}
.split{
  display:grid; grid-template-columns:1fr 1fr;
  margin-top:1.15rem;
}
.split__half{ padding:.9rem 1rem; }
.split__half--ink{ background:var(--c-deep); color:#ffffff; }
.split__half--coral{ background:var(--c-coral); color:var(--c-ink); }
.split__half span{
  display:block;
  font-family:var(--font-display);
  font-size:1.2rem; line-height:1;
}
.split__half small{
  display:block; margin-top:.3rem;
  font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  line-height:1.4; opacity:.85;
}
.how__note{
  display:flex; gap:1.4rem; align-items:flex-start;
  margin-top:2.6rem; padding-top:1.7rem;
  border-top:4px solid var(--c-coral);
}
.how__note-num{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,4vw,3.4rem);
  line-height:.8; letter-spacing:-.03em;
  white-space:nowrap;
}
.how__note-text{
  font-size:.95rem; line-height:1.6;
  color:rgba(36,36,34,.72); max-width:34ch;
}
.how__note-text strong{ color:var(--c-ink); }

/* ================================================================ 05 ABOUT */
.about{ background:var(--c-paper); }
.about__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.about__copy .h2{ margin:1rem 0 1.6rem; }
.about__copy p{
  font-size:1.05rem; line-height:1.7;
  max-width:58ch; margin-bottom:1.1rem;
  text-wrap:pretty;
}
.about__sig{
  margin-top:2rem;
  font-family:var(--font-display);
  font-size:1.5rem; line-height:1.2;
}
.about__sig span{
  display:block; margin-top:.4rem;
  font-family:var(--font-body);
  font-size:.64rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--c-muted);
}
.about__media{
  position:relative;
  padding-bottom:3.2rem;
}
.about__portrait{
  position:relative;
  z-index:1;
  width:82%;
  margin:0 0 0 auto;
}
.about__portrait::before{
  content:"";
  position:absolute;
  inset:22px -22px -22px 22px;
  background:var(--c-coral);
  z-index:-1;
}
.about__portrait img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:50% 24%;
}
.about__portrait figcaption{
  margin-top:.7rem;
  font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-muted);
}
.about__plant{
  position:absolute;
  left:0; bottom:0;
  z-index:2;
  width:40%;
  margin:0;
  padding:6px 6px 0;
  background:var(--c-paper);
}
.about__plant img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
}
.about__plant figcaption{
  font-size:.55rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--c-muted);
  padding:.45rem 0 .5rem;
}

.quals{
  display:grid;
  grid-template-columns:minmax(0,.3fr) minmax(0,1.7fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
  margin-top:clamp(3rem,6vw,5rem);
  padding-top:2rem;
  border-top:1px solid var(--line);
}
.quals__list{ columns:2; column-gap:clamp(2rem,4vw,4rem); }
.quals__list li{
  position:relative;
  break-inside:avoid;
  padding:.58rem 0 .58rem 1rem;
  border-bottom:1px solid var(--line);
  font-size:.94rem; line-height:1.5;
}
.quals__list li::before{
  content:""; position:absolute; left:0; top:1.02rem;
  width:6px; height:6px; border-radius:50%;
  background:var(--c-coral);
}

/* ================================================================ 06 CHILDREN */
.young{ background:var(--c-coral); color:var(--c-ink); }
.young .label{ color:rgba(36,36,34,.72); }
.young .label::before{ background:var(--c-deep); }
.young__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:center;
}
.young__copy .h2{ margin:1rem 0 1.4rem; }
.young__copy p{
  font-size:1.05rem; line-height:1.7;
  max-width:48ch; margin-bottom:1rem;
  text-wrap:pretty;
}
.young__figure{ position:relative; }
.young__big{
  font-family:var(--font-display);
  font-size:clamp(8rem,16vw,16rem);
  line-height:.7; letter-spacing:-.05em;
  color:var(--c-deep);
}
.young__facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 2rem;
  margin-top:clamp(1.5rem,3vw,2.5rem);
}
.young__facts li{
  padding:.9rem 0;
  border-top:2px solid rgba(36,36,34,.45);
}
.young__facts span{
  display:block;
  font-size:.6rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(36,36,34,.72);
  margin-bottom:.25rem;
}
.young__facts strong{
  display:block;
  font-size:.98rem; font-weight:700;
  line-height:1.35;
}

/* ================================================================ 07 PROOF */
.proof{ background:var(--c-paper); }
.proof__head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.55fr);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:end;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.proof__head .h2{ margin:1rem 0 1.2rem; }
.proof__rating{ text-align:right; }
.proof__num{
  font-family:var(--font-display);
  font-size:clamp(6rem,13vw,11rem);
  line-height:.75; letter-spacing:-.04em;
  color:var(--c-dusk);
}
.proof__sub{
  font-size:.92rem; color:var(--c-muted);
  margin:.7rem 0 .9rem;
}
.proof__rating .link-arrow{ font-size:.9rem; }

.quote{ margin:0; }
.quote--lead{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:2rem; align-items:end;
  padding-top:2rem;
  border-top:2px solid var(--c-ink);
}
.quote--lead blockquote p{
  font-family:var(--font-display);
  font-size:clamp(1.35rem,2.2vw,1.9rem);
  line-height:1.34; letter-spacing:-.012em;
  max-width:48ch; text-wrap:pretty;
}
.quote--lead blockquote::before{
  content:"“";
  display:block;
  font-family:var(--font-display);
  font-size:5rem; line-height:.4;
  color:var(--c-coral);
  margin-bottom:1.1rem;
}
.quote figcaption{
  font-size:.7rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
}
.quote figcaption span{
  display:block; margin-top:.2rem;
  font-weight:400; letter-spacing:.04em;
  text-transform:none;
  color:var(--c-muted);
}
.quote--lead figcaption{ white-space:nowrap; text-align:right; }

.quotes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:3rem; padding-top:2rem;
  border-top:1px solid var(--line);
}
.quotes .quote{ display:flex; flex-direction:column; height:100%; }
.quotes blockquote p{
  font-size:.98rem; line-height:1.65;
  margin-bottom:1.2rem; text-wrap:pretty;
}
.quotes figcaption{ margin-top:auto; align-self:flex-start; }

/* ================================================================ 08 FEES */
.fees{ background:var(--c-sky); color:var(--c-ink); }
.fees .label{ color:rgba(36,36,34,.72); }
.fees .label::before{ background:var(--c-deep); }
.fees__grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.fees__head .h2{ margin:1rem 0 1.4rem; }
.fees__head .lead{ color:rgba(36,36,34,.78); }
.fees__note{
  margin-top:1.6rem;
  font-size:.95rem; line-height:1.6;
  color:rgba(36,36,34,.7);
  max-width:38ch;
}
.fees__card{
  background:var(--c-paper);
  border-top:6px solid var(--c-coral);
  padding:clamp(1.4rem,3vw,2.4rem);
  box-shadow:0 40px 80px -50px rgba(29,44,56,.4);
}
.fee{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1.4rem; align-items:center;
  padding:1.2rem 0;
  border-top:1px solid var(--line);
}
.fee:first-child{ border-top:0; padding-top:.2rem; }
.fee h3{
  font-family:var(--font-display);
  font-size:1.4rem; font-weight:400; line-height:1.2;
}
.fee p{ font-size:.85rem; color:var(--c-muted); margin-top:.2rem; }
.fee .fee__p{
  margin:0; white-space:nowrap;
  font-family:var(--font-display);
  font-size:2.3rem; line-height:1;
  color:var(--c-ink);
}
.fees__cta{
  width:100%;
  justify-content:center;
  margin-top:1.6rem;
}
.fees__tel{
  font-size:.82rem; color:var(--c-muted);
  margin-top:1.2rem; text-align:center;
}
.fees__tel a{
  color:var(--c-ink);
  text-decoration:underline;
  text-decoration-color:var(--c-coral);
  text-decoration-thickness:2px;
  text-underline-offset:.18em;
}

/* ================================================================ 09 FAQ */
.faq{ background:var(--c-paper); }
.faq__grid{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.faq__intro .h2{ margin:1rem 0 1.2rem; }
.faq__intro .lead{ margin-bottom:1.9rem; }
.faq__list{ border-top:6px solid var(--c-coral); }
.faq__item{ border-top:1px solid var(--line); }
.faq__item:first-child{ border-top:0; }
.faq__item summary{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1.2rem; padding:1.15rem 0;
  cursor:pointer; list-style:none;
  font-family:var(--font-display);
  font-size:clamp(1.2rem,1.8vw,1.5rem);
  line-height:1.25;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+";
  flex:0 0 auto;
  font-family:var(--font-body);
  font-size:1.35rem; font-weight:400; line-height:1;
  color:var(--c-deep);
}
.faq__item[open] summary::after{ content:"–"; }
.faq__a{ padding:0 0 1.3rem; max-width:60ch; }
.faq__a p{
  font-size:.97rem; line-height:1.65;
  color:var(--c-muted); text-wrap:pretty;
}

/* ================================================================ 10 CONTACT */
.contact{ background:var(--c-deep); color:#ffffff; }
.contact .label{ color:var(--c-sky); }
.contact .label::before{ background:var(--c-coral); }
.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.contact__h2{
  color:#ffffff;
  font-size:clamp(3rem,6.5vw,6rem);
  margin:1rem 0 1.3rem;
}
.coral{ color:var(--c-coral); }
.contact__lead{ color:rgba(255,255,255,.84); max-width:40ch; }
.contact__actions{
  display:flex; flex-wrap:wrap;
  gap:1rem; margin-top:2.2rem;
}
.contact__details{
  border-left:1px solid rgba(255,255,255,.22);
  padding-left:clamp(1.5rem,3vw,2.5rem);
}
.contact__details > div{
  display:grid;
  grid-template-columns:6rem minmax(0,1fr);
  gap:1rem;
  padding:1.1rem 0;
  border-top:1px solid rgba(255,255,255,.18);
}
.contact__details > div:first-child{ border-top:0; padding-top:0; }
.cd__h{
  font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--c-sky); padding-top:.25rem;
}
.contact__details address,
.contact__details p{
  font-size:1rem; line-height:1.6;
  color:rgba(255,255,255,.9);
}
.contact__details a{
  color:#ffffff;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(255,255,255,.35);
  text-underline-offset:.2em;
  overflow-wrap:anywhere;
}
.contact__details a:hover{ text-decoration-color:#ffffff; }
.cd__link{
  display:inline-block; margin-top:.5rem;
  font-size:.85rem;
  text-decoration-color:var(--c-coral)!important;
}
.contact__details > div.cd--wide{
  grid-template-columns:minmax(0,1fr);
  gap:.35rem;
}
.contact__details .email{ font-size:.9rem; }
.email{ overflow-wrap:anywhere; }
.cd__body{ min-width:0; }

/* ================================================================ FOOTER */
.foot{
  background:var(--c-ink);
  color:#ffffff;
  border-top:1px solid rgba(255,255,255,.14);
}
.foot__top{ border-bottom-color:rgba(255,255,255,.14); }
.brand__spiral{ width:40px; height:40px; flex:0 0 auto; color:var(--c-coral); }
.foot__brand .brand__word{ color:#ffffff; font-size:1.4rem; }
.foot__brand .brand__word span{ color:rgba(255,255,255,.66); }
.foot__line{
  margin:1.3rem 0;
  font-size:.92rem; line-height:1.6;
  color:rgba(255,255,255,.72);
  max-width:38ch;
}
.foot__contact{ font-size:.92rem; line-height:1.85; color:rgba(255,255,255,.85); }
.foot__contact a{
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.3);
  text-underline-offset:.2em;
}
.foot__contact a:hover{ text-decoration-color:#ffffff; }
.foot__nav{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.foot__h{ color:rgba(255,255,255,.55); font-size:.6rem; letter-spacing:.18em; }
.foot__nav a{ color:rgba(255,255,255,.82); font-size:.9rem; }
.foot__nav a:hover{ color:#ffffff; }
.foot__bottom{
  color:rgba(255,255,255,.58);
  font-size:.66rem;
  letter-spacing:.04em;
  gap:1rem;
}

/* ================================================================ RESPONSIVE */
@media (max-width:1180px) and (min-width:1024px){
  .nav__link{ padding:.55rem .5rem; font-size:.84rem; }
  .brand__word{ font-size:1.12rem; }
  .hdr__cta{ padding:.65rem .85rem; font-size:.77rem; }
}

@media (max-width:1023px){
  :root{ --hdr-h:68px; }

  .hdr__cta{ display:none; }
  .burger{ border-color:rgba(255,255,255,.35); }
  .burger span{ background:#ffffff; }

  .nav{ background:var(--c-deep); }
  .nav__head{ border-bottom-color:rgba(255,255,255,.2); }
  .nav__headlabel{ color:var(--c-sky); }
  .nav__close{ border-color:rgba(255,255,255,.3); color:#ffffff; }
  .nav__item{ border-bottom-color:rgba(255,255,255,.16); }
  .nav__link{ color:#ffffff; border-radius:0; }
  .nav__link:hover{ background:rgba(255,255,255,.08); color:#ffffff; }
  .nav__item.is-open > .nav__link{ background:none; color:var(--c-sky); }
  .nav__foot a{ color:rgba(255,255,255,.82); }
  .mega{
    background:none; border:0; border-radius:0;
    box-shadow:none; padding:0;
  }
  .mega__h{ color:var(--c-sky); border-bottom-color:rgba(255,255,255,.2); }
  .mega__h::before{ background:var(--c-coral); }
  .mega a{ color:rgba(255,255,255,.88); }
  .mega a:hover{ background:none; color:#ffffff; }
  .mega__foot{ color:rgba(255,255,255,.7); border-top-color:rgba(255,255,255,.2); }
  .mega__foot a{ color:#ffffff; }

  .hero{ min-height:calc(100vh - var(--hdr-h) - 1px); min-height:calc(100dvh - var(--hdr-h) - 1px); }
  .hero__h1{ font-size:var(--h1-size, clamp(3.2rem, 9vw, 5.6rem)); }
  .hero__copy{ max-width:none; }
  .hero__art{
    position:relative;
    right:auto; top:auto; translate:none;
    width:min(90%,420px);
    margin:2.2rem 0 0 auto;
  }

  .who__head{ grid-template-columns:minmax(0,1fr); gap:1rem; }
  .who__head .h2{ margin-bottom:.6rem; }
  .who__head .lead{ max-width:52ch; }

  .how__grid{ grid-template-columns:minmax(0,1fr); gap:2rem; }
  .how__media{ position:static; }
  .how__spiral{ max-width:380px; }
  .how__ripple{ position:relative; right:auto; bottom:auto; margin:-2.5rem 0 0 auto; }
  .how__head .lead{ max-width:48ch; }

  .about__grid{ grid-template-columns:minmax(0,1fr); gap:2.5rem; }
  .about__media{ max-width:480px; padding-bottom:2.5rem; }
  .quals{ grid-template-columns:minmax(0,1fr); gap:1.2rem; }

  .young__grid{ grid-template-columns:minmax(0,1fr); gap:2rem; align-items:start; }
  .young__big{ font-size:clamp(7rem,22vw,11rem); }

  .proof__head{ grid-template-columns:minmax(0,1fr); gap:1.5rem; }
  .proof__rating{ text-align:left; }
  .proof__num{ font-size:clamp(5.5rem,18vw,8rem); }
  .quotes{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .quote--lead{ grid-template-columns:minmax(0,1fr); gap:1.2rem; }
  .quote--lead figcaption{ text-align:left; }

  .fees__grid{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .faq__grid{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }

  .contact__grid{ grid-template-columns:minmax(0,1fr); gap:2rem; }
  .contact__details{
    border-left:0; padding-left:0;
    border-top:1px solid rgba(255,255,255,.22);
    padding-top:1.2rem;
  }

  .foot__nav{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

@media (max-width:760px){
  .concerns{ grid-template-columns:minmax(0,1fr); }
  .who__note{ border-top-width:4px; }
  .quotes{ grid-template-columns:minmax(0,1fr); }
  .quals__list{ columns:1; }
  .split{ grid-template-columns:1fr; }
  .split__half + .split__half{ border-top:2px solid var(--c-deep); }
  .how__ripple{ width:68%; }
  .step{ grid-template-columns:3rem minmax(0,1fr); gap:1rem; }
  .step__num{ font-size:1.5rem; }
  .hero__accent::after{ height:.07em; }
}

@media (max-width:600px){
  .foot__nav{ grid-template-columns:minmax(0,1fr); }
  .contact__details > div{ grid-template-columns:minmax(0,1fr); gap:.35rem; }
  .cd__h{ padding-top:0; }
  .contact__details .email{ font-size:.85rem; }
  .email__domain{ display:block; }
  .young__facts{ grid-template-columns:minmax(0,1fr); }
  .about__media{ padding-bottom:2rem; }
  .about__plant{ width:45%; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .about__portrait{ width:100%; }
  .about__portrait::before{ inset:14px -14px -14px 14px; }
}

@media (max-width:480px){
  .fee .fee__p{ font-size:2rem; }
  .quote--lead blockquote::before{ font-size:4rem; }
}

/* reduced motion: the ticker and the CSS draw stop; GSAP never runs */
@media (prefers-reduced-motion: reduce){
  .ticker__row{ animation:none; }
  .pre__draw{ animation:none; stroke-dashoffset:0; }
  .hero__bg{ transform:none!important; }
}


/* ==========================================================================
   Smooth state changes (2026-11-02) — sticky header reveal, buttons, links,
   rows and every hover state. Transform/opacity/colour only.
   ========================================================================== */
.hdr{
  transition: transform .55s cubic-bezier(.16,1,.3,1),
              background-color .4s cubic-bezier(.16,1,.3,1),
              box-shadow .4s cubic-bezier(.16,1,.3,1),
              border-color .4s cubic-bezier(.16,1,.3,1);
}
a, button, summary, input, textarea, select,
.btn, .link-arrow, .nav__link, .foot__nav a,
[class*="__link"], [class*="__cta"]{
  transition: color .32s cubic-bezier(.16,1,.3,1),
              background-color .32s cubic-bezier(.16,1,.3,1),
              border-color .32s cubic-bezier(.16,1,.3,1),
              box-shadow .32s cubic-bezier(.16,1,.3,1),
              opacity .32s cubic-bezier(.16,1,.3,1),
              text-decoration-color .32s cubic-bezier(.16,1,.3,1),
              gap .35s cubic-bezier(.16,1,.3,1);
}
.btn, .link-arrow, .hdr__cta{
  transition: color .32s cubic-bezier(.16,1,.3,1),
              background-color .32s cubic-bezier(.16,1,.3,1),
              border-color .32s cubic-bezier(.16,1,.3,1),
              box-shadow .32s cubic-bezier(.16,1,.3,1),
              opacity .32s cubic-bezier(.16,1,.3,1),
              transform .45s cubic-bezier(.16,1,.3,1),
              filter .3s cubic-bezier(.16,1,.3,1);
}
.link-arrow svg, .nav__chev{
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .3s;
}
[class*="row"], [class*="item"], [class*="card"], [class*="fee"],
[class*="word"], [class*="step"], [class*="quote"], [class*="cluster"]{
  transition: color .32s cubic-bezier(.16,1,.3,1),
              background-color .32s cubic-bezier(.16,1,.3,1),
              border-color .32s cubic-bezier(.16,1,.3,1),
              box-shadow .32s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce){
  .hdr, a, button, summary, input, textarea, select, .btn, .link-arrow,
  .nav__link, .foot__nav a, [class*="row"], [class*="item"], [class*="card"],
  [class*="fee"], [class*="word"], [class*="step"], [class*="quote"], [class*="cluster"]{
    transition-duration: .01ms;
  }
}

.btn{ transition: color .32s cubic-bezier(.16,1,.3,1), background-color .32s cubic-bezier(.16,1,.3,1), border-color .32s cubic-bezier(.16,1,.3,1), box-shadow .32s cubic-bezier(.16,1,.3,1), opacity .32s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1), filter .3s cubic-bezier(.16,1,.3,1); }