/* ===================================================================
   VITALIS — Clinic of Functional Medicine & Longevity
   Design language inspired by instituteofhealth.com
   =================================================================== */

:root{
  --bg:        #e7e4df;   /* warm greige light */
  --bg-2:      #efece7;
  --paper:     #f4f2ee;
  --ink:       #16161a;   /* near-black */
  --ink-2:     #2a2a2e;
  --ink-soft:  #6a6862;
  --line:      rgba(20,20,20,.14);
  --dark:      #121211;
  --dark-2:    #1a1a18;
  --on-dark:   #f2efe9;
  --on-dark-soft: rgba(242,239,233,.55);

  --red-0:#2a060a;
  --red-1:#5e0d14;
  --red-2:#8e1622;
  --red-3:#b4242f;

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;

  --pad: clamp(20px, 5vw, 90px);
  --maxw: 1680px;
  --ease: cubic-bezier(.6,.01,.05,.99);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  font-weight:400;
  line-height:1.5;
  max-width:100%;
  overflow-x:clip;            /* clip (not hidden) — no scroll container, safe for ScrollTrigger/Lenis */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
img,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--red-2); color:#fff; }

.kicker{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:flex-start; justify-content:space-between;
  gap:2.5rem; min-width:230px;
  padding:1.05rem 1.3rem 1.15rem;
  border-radius:14px;
  font-size:.92rem; font-weight:500; letter-spacing:.01em;
  position:relative; overflow:hidden;
  transition:transform .5s var(--ease);
}
.btn i{ font-style:normal; align-self:flex-end; transition:transform .45s var(--ease); }
.btn:hover i{ transform:translate(4px,4px); }
.btn--dark{ background:var(--dark); color:var(--on-dark); }
.btn--dark::after{
  content:""; position:absolute; inset:0; background:var(--red-2);
  transform:translateY(101%); transition:transform .5s var(--ease); z-index:0;
}
.btn--dark:hover::after{ transform:translateY(0); }
.btn--dark span,.btn--dark i{ position:relative; z-index:1; }
.btn--lg{ min-width:300px; font-size:1rem; padding:1.3rem 1.5rem 1.45rem; }

/* ===================================================================
   LOADER
   =================================================================== */
.loader{
  position:fixed; inset:0; z-index:2000; background:var(--dark);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s ease, visibility .7s ease;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ width:min(70vw,420px); text-align:center; color:var(--on-dark); }
.loader__mark{ font-family:var(--serif); font-size:3rem; display:block; margin-bottom:1.6rem; }
.loader__bar{ height:1px; background:rgba(255,255,255,.18); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0; background:var(--on-dark); }
.loader__count{
  display:block; margin-top:1rem; font-size:.72rem; letter-spacing:.2em;
  color:var(--on-dark-soft);
}

/* ===================================================================
   NAV
   =================================================================== */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem var(--pad);
  color:var(--on-dark);
  transition:color .4s ease, padding .4s ease, background .4s ease;
}
.nav::before{
  content:""; position:absolute; inset:0; background:var(--bg);
  opacity:0; transform:translateY(-100%);
  transition:transform .5s var(--ease), opacity .5s var(--ease);
  z-index:-1; border-bottom:1px solid var(--line);
}
.nav.is-solid{ color:var(--ink); padding-top:1.05rem; padding-bottom:1.05rem; }
.nav.is-solid::before{ opacity:1; transform:translateY(0); }
.nav.is-hidden{ transform:translateY(-110%); transition:transform .5s var(--ease); }

.nav__logo{ display:flex; align-items:center; gap:.6rem; }
.nav__logo-mark{
  font-family:var(--serif); font-size:1.5rem; line-height:1;
  border:1px solid currentColor; width:34px; height:34px;
  display:grid; place-items:center; border-radius:50%;
}
.nav__logo-word{ font-family:var(--serif); font-size:1.35rem; letter-spacing:.14em; }

.nav__links{ display:flex; gap:2rem; font-size:.9rem; font-weight:500; }
.nav__links a{ position:relative; padding-bottom:2px; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__sep{ margin-left:1rem; padding-left:2rem; }
.nav__sep::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:14px; background:currentColor; opacity:.4;
}

.nav__cta{
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid currentColor; border-radius:11px;
  padding:.7rem 1.1rem; font-size:.88rem; font-weight:500;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.nav__cta-arrow{ opacity:.8; }
.nav__cta:hover{ background:currentColor; }
.nav.is-solid .nav__cta:hover{ color:var(--bg); }
.nav:not(.is-solid) .nav__cta:hover{ color:var(--dark); }

.nav__burger{ display:none; flex-direction:column; gap:6px; }
.nav__burger i{ width:26px; height:1.5px; background:currentColor; display:block; }

/* ===================================================================
   HERO
   =================================================================== */
.hero{ position:relative; height:100svh; min-height:640px; overflow:hidden; color:var(--on-dark); background:#15171a; }
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero__videos{ position:absolute; inset:0; }
.hero__media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1s ease;
}
.hero__media.is-active{ opacity:1; }
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 18% 90%, rgba(0,0,0,.6), transparent 55%),
    linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.08) 40%, rgba(0,0,0,.25));
}
.hero__grain,.story__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hero__inner{
  position:relative; height:100%; max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad) clamp(34px,5vh,60px);
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:1fr auto;
  align-items:end;
}
.hero__headline{ grid-column:1; grid-row:2; max-width:880px; }
.hero h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.3rem, 5.2vw, 4.7rem); line-height:1.0; letter-spacing:-.01em;
}
.hero h1 span{ display:block; overflow:hidden; }
.hero h1 span > b,
.reveal-lines span{ display:block; }
.hero__sub{
  margin-top:1.3rem; max-width:34rem; font-size:clamp(.95rem,1.1vw,1.08rem);
  color:rgba(242,239,233,.82); font-weight:300;
}

.hero__stats{
  grid-column:2; grid-row:1; align-self:start;
  margin-top:clamp(110px,16vh,180px);
  width:clamp(240px,24vw,330px);
  display:flex; flex-direction:column;
}
.stat{
  border-top:1px solid rgba(242,239,233,.28);
  padding:1.1rem 0 1.4rem; position:relative;
  opacity:0; transform:translateY(14px);
}
.stat__label{ font-size:.78rem; letter-spacing:.04em; color:rgba(242,239,233,.62); display:block; }
.stat__value{ font-family:var(--serif); font-weight:500; font-size:clamp(2.4rem,3.4vw,3.6rem); line-height:1.05; }
.stat__dots{ position:absolute; right:0; bottom:1.5rem; letter-spacing:.15em; opacity:.5; }

.hero__learn{
  grid-column:2; grid-row:2; justify-self:end; align-self:end;
  display:flex; flex-direction:column; gap:1.6rem;
  background:rgba(20,20,20,.28); backdrop-filter:blur(6px);
  border:1px solid rgba(242,239,233,.22);
  border-radius:14px; padding:1rem 1.2rem 1.1rem; min-width:210px;
  transition:background .4s var(--ease);
}
.hero__learn:hover{ background:rgba(20,20,20,.5); }
.hero__learn i{ font-style:normal; align-self:flex-end; }

.hero__scroll{
  position:absolute; left:var(--pad); bottom:clamp(34px,5vh,60px);
  display:flex; align-items:center; gap:.7rem; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(242,239,233,.6);
}
.hero__scroll i{ width:34px; height:1px; background:currentColor; position:relative; overflow:hidden; }
.hero__scroll i::after{
  content:""; position:absolute; inset:0; background:var(--on-dark);
  animation:scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }

/* ===================================================================
   SERVICES (horizontal pinned rail)
   =================================================================== */
.services{ background:var(--bg); padding-top:clamp(90px,12vh,160px); overflow-x:clip; }
.services__head{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:flex; flex-direction:column; gap:2.2rem; align-items:flex-start;
}
.intro-title{
  font-family:var(--sans); font-weight:400;
  font-size:clamp(2rem,4.6vw,4.1rem); line-height:1.04; letter-spacing:-.02em;
  max-width:16ch;
}

.rail{ position:relative; }
.rail__sticky{
  height:100svh; min-height:600px; position:relative;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:clamp(80px,11vh,120px);
  overflow:hidden;
  gap:clamp(10px,1.6vh,18px);
}
.rail__tag{
  position:absolute; top:clamp(14px,4vh,32px); left:50%; transform:translateX(-50%);
  background:#fff; border-radius:10px; padding:.8rem 1.4rem;
  display:flex; gap:3rem; align-items:center; font-size:.85rem;
  box-shadow:0 18px 50px -28px rgba(0,0,0,.4); z-index:5; white-space:nowrap;
}
.rail__tag span{ color:var(--ink-soft); }
.rail__tag b{ font-weight:500; }

.rail__tabs{
  display:flex; gap:clamp(6px,.7vw,10px); padding:0 var(--pad);
  overflow-x:auto; scrollbar-width:none; flex-shrink:0;
}
.rail__tabs::-webkit-scrollbar{ display:none; }
.rail__tab{
  flex:0 0 auto; padding:.48rem 1rem; border-radius:40px;
  border:1.5px solid var(--line); font-size:.82rem; font-weight:500;
  color:var(--ink-soft); background:transparent; white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.rail__tab:hover:not(.is-active){ border-color:rgba(20,20,20,.3); color:var(--ink); }
.rail__tab.is-active{ background:var(--ink); color:var(--on-dark); border-color:var(--ink); }

.rail__track{
  display:flex; gap:clamp(14px,1.6vw,26px); padding:0 var(--pad);
  will-change:transform;
}
.card{
  flex:0 0 clamp(240px,24vw,340px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
  opacity:.38; filter:saturate(.7);
}
.card.is-active{ opacity:1; filter:saturate(1.05); transform:translateY(-14px) scale(1.02); }
.card__media{
  aspect-ratio:3/2.85; border-radius:14px;
  background:linear-gradient(150deg, var(--g1,#3a4a44), var(--g2,#1d2522));
  position:relative; overflow:hidden;
}
.card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card__media::after{
  content:""; position:absolute; inset:0; opacity:.28; mix-blend-mode:overlay; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.card__title{ margin-top:1rem; font-size:1.05rem; font-weight:500; color:var(--ink); }
.card:not(.is-active) .card__title{ color:var(--ink-soft); }

.rail__overview{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(64px,10vh,104px);
  width:min(86vw,360px); background:#fff; border-radius:14px;
  padding:1.4rem 1.5rem 1.2rem; z-index:6;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.45);
}
.rail__overview-kicker{ font-size:.72rem; letter-spacing:.12em; color:var(--ink-soft); text-transform:uppercase; }
.rail__overview p{ margin:.6rem 0 1rem; font-size:.95rem; line-height:1.45; }
.rail__overview-link{ font-size:.88rem; font-weight:500; }

.rail__nav{
  position:absolute; bottom:clamp(28px,6vh,52px); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:1.4rem; z-index:6;
}
.rail__nav button{
  width:38px; height:38px; border-radius:9px; background:rgba(0,0,0,.06);
  display:grid; place-items:center; font-size:1.1rem; color:var(--ink);
  transition:background .3s ease;
}
.rail__nav button:hover{ background:rgba(0,0,0,.12); }
.rail__nav-word{ font-size:.85rem; color:var(--ink-soft); }

/* ===================================================================
   PROGRAM
   =================================================================== */
.program{
  background:var(--bg-2); padding:clamp(90px,14vh,170px) var(--pad);
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,120px);
  align-items:center;
}
.program__title{
  font-family:var(--sans); font-weight:400;
  font-size:clamp(1.7rem,3vw,3rem); line-height:1.08; letter-spacing:-.02em;
}
.program__body{ margin:1.6rem 0 2.4rem; max-width:38ch; color:var(--ink-2); }
.program__media{ position:relative; }
.program__stage{
  aspect-ratio:16/11; border-radius:16px; background:#15171a;
  position:relative; overflow:hidden;
}
.program__stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ===================================================================
   STORY (red particle, pinned, stepped)
   =================================================================== */
.story{ position:relative; background:var(--red-0); color:#fff; }
.story__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.story__sticky{
  position:relative; height:100svh; min-height:600px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 var(--pad);
}
.story__num{
  position:absolute; top:22%; left:50%; transform:translateX(-50%);
  width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.6);
  display:grid; place-items:center; font-size:.78rem;
}
.story__steps{ position:relative; width:min(900px,90vw); }
.story__step{
  position:absolute; inset:0; margin:auto; height:max-content;
  font-family:var(--sans); font-weight:300;
  font-size:clamp(1.6rem,3.6vw,3.2rem); line-height:1.2; letter-spacing:-.01em;
  opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.story__step.is-active{ opacity:1; transform:translateY(0); position:relative; }

/* ===================================================================
   STATEMENT
   =================================================================== */
.statement{
  background:var(--bg); padding:clamp(90px,16vh,200px) var(--pad);
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,5vw,90px);
  align-items:start; border-top:1px solid var(--line);
}
.statement__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2rem,4.4vw,4rem); line-height:1.02; letter-spacing:-.01em;
}
.statement__body{ padding-left:clamp(0px,3vw,40px); border-left:1px solid var(--line); }
.statement__body p{ font-size:clamp(1.05rem,1.4vw,1.4rem); line-height:1.5; color:var(--ink-2); }

/* ===================================================================
   VOICES
   =================================================================== */
.voices{ background:var(--bg-2); padding:clamp(70px,10vh,130px) 0; }
.voices__title{
  max-width:var(--maxw); margin:0 auto clamp(40px,6vh,80px); padding:0 var(--pad);
  font-family:var(--sans); font-weight:400; text-align:center;
  font-size:clamp(1.6rem,3.2vw,3rem); line-height:1.1; letter-spacing:-.02em;
}
.voices__row{
  display:flex; gap:clamp(14px,1.4vw,22px); padding:0 var(--pad);
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.voices__row::-webkit-scrollbar{ display:none; }
.voice{ flex:0 0 clamp(260px,26vw,360px); scroll-snap-align:start; }
.voice__media{
  aspect-ratio:1/1.15; border-radius:14px;
  background:linear-gradient(150deg, var(--g1), var(--g2));
  position:relative; overflow:hidden; display:grid; place-items:center;
}
.voice__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.voice__media::after{
  content:""; position:absolute; inset:0; opacity:.4; mix-blend-mode:overlay; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.voice__play{
  width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.7);
  display:grid; place-items:center; color:#fff; font-size:.8rem; position:relative; z-index:1;
  backdrop-filter:blur(2px); transition:transform .4s var(--ease), background .4s var(--ease);
}
.voice:hover .voice__play{ transform:scale(1.1); background:rgba(255,255,255,.14); }
.voice blockquote{
  margin:1.1rem 0 .9rem; font-size:.98rem; line-height:1.5; color:var(--ink-2);
}
.voice figcaption{ display:flex; flex-direction:column; gap:.15rem; }
.voice figcaption b{ font-weight:500; }
.voice figcaption span{ font-size:.82rem; color:var(--ink-soft); }

/* ===================================================================
   FAQ
   =================================================================== */
.faq{
  background:var(--bg); padding:clamp(80px,12vh,150px) var(--pad);
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(30px,5vw,80px);
  align-items:start; border-top:1px solid var(--line);
}
.faq__title{ font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3.2vw,3rem); margin-top:.8rem; line-height:1.02; }
.faq__list{ display:flex; flex-direction:column; }
.qa{ border-top:1px solid var(--line); }
.qa:last-child{ border-bottom:1px solid var(--line); }
.qa__q{
  width:100%; text-align:left; display:flex; justify-content:space-between; gap:2rem;
  align-items:center; padding:1.5rem 0; font-size:clamp(1.05rem,1.5vw,1.3rem); font-weight:400;
}
.qa__q i{ font-style:normal; font-size:1.4rem; transition:transform .4s var(--ease); flex:0 0 auto; }
.qa.is-open .qa__q i{ transform:rotate(45deg); }
.qa__a{ overflow:hidden; height:0; transition:height .45s var(--ease); }
.qa__a p{ padding-bottom:1.6rem; max-width:60ch; color:var(--ink-2); }

/* ===================================================================
   BOOK CTA
   =================================================================== */
.book{
  background:var(--bg-2); text-align:center;
  padding:clamp(90px,16vh,180px) var(--pad);
  display:flex; flex-direction:column; align-items:center; gap:1.6rem;
  border-top:1px solid var(--line);
}
.book__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.2rem,5vw,4.6rem); line-height:1; letter-spacing:-.01em; max-width:18ch;
}
.book__contacts{ display:flex; gap:2.5rem; flex-wrap:wrap; justify-content:center; margin-top:1rem; font-size:1.05rem; }
.book__contacts a{ position:relative; }
.book__contacts a::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.book__contacts a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ===================================================================
   FOOTER
   =================================================================== */
.footer{ background:var(--dark); color:var(--on-dark); padding:clamp(60px,9vh,110px) var(--pad) 0; position:relative; overflow:hidden; }
.footer__top{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:clamp(30px,4vw,60px);
  padding-bottom:clamp(40px,6vh,70px);
}
.footer__logo{ font-family:var(--serif); font-size:2rem; letter-spacing:.14em; }
.footer__col{ display:flex; flex-direction:column; gap:.7rem; }
.footer__col-h{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-soft); margin-bottom:.5rem; }
.footer__col a, .footer__contact a{ width:max-content; position:relative; }
.footer__col a::after, .footer__contact a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.footer__col a:hover::after, .footer__contact a:hover::after{ transform:scaleX(1); transform-origin:left; }
.footer__socials{ display:flex; gap:.6rem; align-self:start; }
.footer__socials a{
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08);
  display:grid; place-items:center; font-size:.78rem; letter-spacing:.04em;
  transition:background .3s ease;
}
.footer__socials a:hover{ background:rgba(255,255,255,.2); }

.footer__contact{
  max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; gap:.5rem;
  padding-bottom:clamp(40px,6vh,70px);
}
.footer__contact p{ color:var(--on-dark-soft); }
.footer__legal{
  max-width:var(--maxw); margin:0 auto; padding:1.4rem 0;
  border-top:1px solid rgba(255,255,255,.12); font-size:.78rem; color:var(--on-dark-soft);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:.4rem;
}
.footer__legal a{ color:var(--on-dark); transition:opacity .3s; }
.footer__legal a:hover{ opacity:.7; }
.footer__wordmark{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(4rem,21vw,21rem); line-height:.8; letter-spacing:.02em;
  color:rgba(255,255,255,.05); text-align:center; user-select:none;
  margin-bottom:-.12em; white-space:nowrap;
}

/* ===================================================================
   REVEAL ANIMATIONS (base states; GSAP handles the rest)
   =================================================================== */
.fade-up{ opacity:0; transform:translateY(26px); }
.reveal-lines span > b{ display:inline-block; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:1100px){
  .program, .statement, .faq{ grid-template-columns:1fr; }
  .statement__body{ border-left:none; padding-left:0; }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .hero__inner{ grid-template-columns:1fr; grid-template-rows:auto auto; align-content:end; gap:2rem; padding-bottom:90px; }
  .hero__headline{ grid-row:1; }
  .hero__stats{ grid-column:1; grid-row:2; margin-top:0; width:100%; }
  .hero__learn{ display:none; }
  .program__media{ flex-direction:column-reverse; }
  .program__thumbs{ flex-direction:row; }
  .footer__top{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .reveal-lines span{ overflow:visible; }
}