/* ==========================================================================
   MUVE — Studio for Movement
   Mobile-first. Palette locked per brand decision D10.
   ========================================================================== */

:root{
  /* --- Brand palette: "Royal Purple, Ivory & Bronze" (D19 — supersedes D18)
         Primary brand = deep royal purple (dark surfaces + headlines).
         Bronze is a 2-stop metallic gradient used for accents (emphasis, numbers,
         prices, button fills) via --bronze-grad.
         Legacy token names (pine, marigold, terracotta) are kept (remapped) so
         every existing rule stays wired without a churny rename. --- */
  --purple:#220B4D;       /* primary brand — dark surfaces + display headings */
  --purple-deep:#160734;  /* deepest ground (footer) */
  --bronze:#885736;       /* metallic bronze — mid */
  --bronze-dark:#4A2E1D;  /* metallic bronze — dark */
  --bronze-hi:#B68562;    /* champagne bronze — highlight */
  --bronze-grad:linear-gradient(90deg,#442414 0%,#9B5E2C 20%,#D7A675 45%,#B87842 65%,#6A3B1A 85%,#442414 100%); /* metallic sheen */
  --ivory:#F6F0EC;        /* warm ivory ground */

  --bone:var(--ivory);    /* paper / page ground */
  --brass:var(--bronze);  /* metallic */
  --stone:#CAB6AE;        /* warm stone — light neutral */

  /* --- Legacy names mapped to the new system (keeps all rules wired) --- */
  --pine:var(--purple);
  --pine-deep:var(--purple-deep);
  --marigold:var(--bronze);   /* accent fills = bronze (gradient applied where it reads best) */
  --sage:#ECE4DB;             /* airy warm tint */
  --field:var(--bone);
  --wood:var(--bronze);
  --charcoal:var(--purple);   /* dark surfaces = royal purple */
  --terracotta:var(--bronze); /* emphasis colour = bronze (gradient on display accents) */

  /* --- Derived working tints --- */
  --field-2:#EFE7E0;
  --field-3:#E7DCD2;
  --wood-pale:#EFE6DC;   /* warm wash */
  --wood-soft:#C4B8A6;   /* stone */
  --wood-deep:#4A2E1D;   /* bronze-dark */
  --char-soft:#54485B;   /* muted purple-grey sub-text */
  --char-mute:#6E6478;   /* muted purple-grey */
  --terra-deep:#2A1810;  /* deep bronze (placeholder gradients) */
  --terra-pale:#EAE0D4;  /* warm pale */
  --ink:#0E0907;         /* charcoal near-black (body text) */
  --white:#FBFAF7;

  /* --- Type — athletic display + rounded body + marker accent --- */
  /* Type — TT Hoves Pro stand-in: Hanken Grotesk (geometric grotesk, one family
     across display + body, matching Lavanya's single-typeface spec). Swap the
     family name here for 'TT Hoves Pro' once the licensed webfonts are added. */
  --display:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif; /* headlines / numbers */
  --serif:var(--display);          /* legacy alias: former "serif" headings use the display face */
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* --- Space --- */
  --gut:1.5rem;
  --sec-y:5rem;
  --r-sm:10px;
  --r:18px;
  --r-lg:28px;
  --r-xl:40px;

  /* --- Motion --- */
  --e:cubic-bezier(.22,1,.36,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--sans);
  background:var(--field);
  color:var(--ink);
  font-size:16px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--marigold);color:var(--ink)}

/* Film grain */
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:820px}
.sec{padding-block:var(--sec-y)}
.sec__head{max-width:640px;margin-inline:auto;text-align:center;margin-bottom:2.75rem}
.sec__head--left{margin-inline:0;text-align:left}

/* ---------- Type ---------- */
.eyebrow{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--char-mute);font-weight:500;margin-bottom:1rem;
}
.h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,7vw,3.4rem);line-height:1.08;
  letter-spacing:-.02em;color:var(--ink);
}
.h2 em{font-style:italic;color:var(--terracotta);font-variation-settings:'SOFT' 40}
.sec__sub{margin-top:1.1rem;color:var(--char-soft);font-size:1.02rem;max-width:46ch;margin-inline:auto}
.sec__sub--left{margin-inline:0}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.85rem 1.5rem;border:none;border-radius:100px;
  background:var(--charcoal);color:var(--field);
  font-size:.9rem;font-weight:500;letter-spacing:.01em;cursor:pointer;
  overflow:hidden;transition:transform .4s var(--e),box-shadow .4s var(--e),color .35s var(--e);
  -webkit-tap-highlight-color:transparent;
}
.btn::before{
  content:'';position:absolute;inset:0;background:var(--marigold);
  transform:translateY(101%);transition:transform .45s var(--e);z-index:0;
}
.btn>*{position:relative;z-index:1}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--ink)}   /* label darkens over marigold fill */
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(30,58,50,.4)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:1.05rem 2rem;font-size:.95rem}
.btn--sm{padding:.6rem 1.1rem;font-size:.82rem}
.btn--full{width:100%}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(30,58,50,.28)}
.btn--ghost:hover{color:var(--ink)}
.btn__s{
  width:0;height:0;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;
  transition:width .2s,height .2s;
}
.btn.is-load .btn__s{width:15px;height:15px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .45s var(--e-soft),box-shadow .45s var(--e-soft),transform .45s var(--e);
}
.nav.is-stuck{background:rgba(244,241,234,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(30,58,50,.08)}
.nav.is-hid{transform:translateY(-100%)}
.nav__inner{
  max-width:1240px;margin-inline:auto;padding:1rem var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.nav__logo{display:flex;align-items:center;color:var(--pine)}
/* Real MUVE vector lockup (assets/img/muve-lockup.svg), themed via currentColor
   through a CSS mask so one file works on light nav (pine) and dark footer (bone). */
.brand{
  display:block;background-color:currentColor;
  -webkit-mask:url("../img/muve-lockup.svg") center/contain no-repeat;
          mask:url("../img/muve-lockup.svg") center/contain no-repeat;
}
.brand--nav{width:97px;height:27px}
.brand--foot{width:111px;height:31px;color:var(--bone)}
.nav__links{display:none}
.nav__cta{display:none}
.nav__burger{
  width:44px;height:44px;background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.nav__burger span{
  display:block;width:22px;height:1.6px;background:var(--ink);border-radius:2px;
  transition:transform .35s var(--e),opacity .25s;
}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.8px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.8px) rotate(-45deg)}

/* ---------- Drawer ---------- */
.drawer{
  position:fixed;inset:0;z-index:99;background:var(--charcoal);color:var(--field);
  display:flex;flex-direction:column;justify-content:center;gap:2rem;
  padding:5rem var(--gut) 3rem;
  clip-path:circle(0% at calc(100% - 44px) 40px);
  transition:clip-path .7s var(--e);
}
.drawer[hidden]{display:none}
.drawer.is-open{clip-path:circle(150% at calc(100% - 44px) 40px)}
.drawer__close{
  position:absolute;top:1.1rem;right:1.3rem;font-size:2.2rem;line-height:1;
  background:none;border:none;color:var(--field);cursor:pointer;opacity:.7;
}
.drawer__links{display:flex;flex-direction:column;gap:.15rem}
.drawer__links a{
  font-family:var(--serif);font-size:2.25rem;line-height:1.3;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:.85rem;opacity:0;transform:translateY(14px);
  transition:color .3s;
}
.drawer.is-open .drawer__links a{animation:dIn .55s var(--e) forwards}
.drawer.is-open .drawer__links a:nth-child(1){animation-delay:.14s}
.drawer.is-open .drawer__links a:nth-child(2){animation-delay:.2s}
.drawer.is-open .drawer__links a:nth-child(3){animation-delay:.26s}
.drawer.is-open .drawer__links a:nth-child(4){animation-delay:.32s}
.drawer.is-open .drawer__links a:nth-child(5){animation-delay:.38s}
@keyframes dIn{to{opacity:1;transform:translateY(0)}}
.drawer__links a:hover{color:var(--marigold)}
.drawer__links em{font-family:var(--sans);font-style:normal;font-size:.72rem;color:var(--brass);letter-spacing:.14em}
.drawer__cta{align-self:flex-start;background:var(--marigold);color:var(--ink)}
.drawer__foot{font-size:.82rem;color:rgba(242,240,236,.55);letter-spacing:.04em}

/* ---------- Hero (split: copy left · image right) ---------- */
.hero{position:relative;background:var(--field);overflow:hidden;padding-top:6.5rem}
.hero__inner{position:relative;z-index:2}
.hero__content{position:relative;z-index:2}
.hero__title{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(2.7rem,10.5vw,3.9rem);line-height:.98;letter-spacing:-.025em;
  color:var(--purple);
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.03em;white-space:nowrap}
.hero__title .line>span{display:block;transform:translateY(105%);animation:up 1.05s var(--e) forwards}
.hero__title .line:nth-child(2)>span{animation-delay:.10s}
.hero__title .line:nth-child(3)>span{animation-delay:.18s}
@keyframes up{to{transform:translateY(0)}}
.hero__rule{display:block;width:60px;height:3px;background:var(--bronze-grad);border-radius:2px;margin:1.5rem 0}
.hero__tag{
  font-family:var(--sans);font-weight:800;letter-spacing:0;
  font-size:clamp(1.05rem,4.6vw,1.35rem);color:var(--purple);margin-bottom:1.7rem;
}
.hero__tag em{font-style:normal;color:var(--bronze)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:0}
.btn__arw{display:inline-block;transition:transform .4s var(--e)}
.btn:hover .btn__arw,.btn:focus-visible .btn__arw{transform:translateX(3px)}
.hero__media{
  position:relative;margin:2.2rem var(--gut) 0;aspect-ratio:5/4;overflow:hidden;
  border-radius:var(--r-lg);
}
.hero__media .ph--hero{width:100%;height:100%;aspect-ratio:auto;background-position:center}

/* Placeholder art (swap for real photography) */
.ph{width:100%;aspect-ratio:4/5;background:var(--wood-soft);position:relative;overflow:hidden}
.ph::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 30% 15%,rgba(252,251,248,.6),transparent 55%),
             linear-gradient(150deg,var(--wood-soft),var(--wood-deep) 65%,var(--terra-deep));
}
.ph--hero{aspect-ratio:4/3}
.ph--a{aspect-ratio:3/4}
.ph--b::after{background:linear-gradient(150deg,var(--wood-pale),var(--wood) 70%)}
.ph--c::after{background:linear-gradient(150deg,var(--char-soft),var(--charcoal) 70%)}
.ph--d{aspect-ratio:16/10}
.ph--d::after{background:linear-gradient(150deg,var(--terra-pale),var(--terracotta) 80%)}

/* Real photography wired into the placeholder slots (overrides the gradient art) */
.ph--hero{background:var(--pine) url("../img/hero.png") center 28%/cover no-repeat}
.ph--a{background:var(--pine) url("../img/space-1.jpg") center/cover no-repeat}
.ph--b{background:var(--pine) url("../img/space-2.jpg") center 30%/cover no-repeat}
.ph--c{background:var(--pine) url("../img/space-3.jpg") center/cover no-repeat}
.ph--d{background:var(--pine) url("../img/space-4.jpg") center/cover no-repeat}
.ph--hero::after,.ph--a::after,.ph--b::after,.ph--c::after,.ph--d::after{content:none}

/* ---------- Marquee ---------- */
.marquee{
  border-block:1px solid rgba(36,31,27,.1);padding:1rem 0;overflow:hidden;
  background:var(--field-2);
}
.marquee__track{display:flex;gap:1.6rem;white-space:nowrap;width:max-content;animation:scroll 34s linear infinite}
.marquee__track span{font-family:var(--serif);font-size:1.4rem;font-style:italic;color:var(--char-soft)}
.marquee__track i{color:var(--wood);font-style:normal}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Intro ---------- */
.intro__grid{display:grid;gap:2rem}
.intro__body p{color:var(--char-soft);margin-bottom:1rem}
.ticks{list-style:none;margin-top:1.6rem;display:grid;gap:.7rem}
.ticks li{display:flex;align-items:baseline;gap:.7rem;font-size:.95rem;font-weight:500}
.ticks span{flex:0 0 auto;align-self:flex-start;width:15px;height:2px;margin-top:.6em;background:var(--marigold);border-radius:2px}

/* ---------- Stats ---------- */
.stats{padding-block:2rem}
.stats__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem;
  border-block:1px solid rgba(36,31,27,.1);padding-block:2.5rem}
.stat{text-align:center}
.stat__n{display:block;font-family:var(--serif);font-size:3rem;line-height:1;color:var(--terracotta)}
.stat__l{display:block;font-size:.78rem;color:var(--char-mute);margin-top:.4rem;letter-spacing:.02em}

/* ---------- Practices ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2rem}
.chip{
  padding:.5rem 1.05rem;border-radius:100px;border:1px solid rgba(36,31,27,.18);
  background:transparent;font-size:.82rem;cursor:pointer;transition:all .3s var(--e);
}
.chip:hover{border-color:var(--ink)}
.chip.is-on{background:var(--ink);color:var(--field);border-color:var(--ink)}
.cards{display:grid;gap:1rem}
.card{
  position:relative;background:var(--white);border-radius:var(--r-lg);
  padding:1.6rem 1.4rem 1.4rem;border:1px solid rgba(36,31,27,.07);
  transition:transform .5s var(--e),box-shadow .5s var(--e),border-color .4s;
  overflow:hidden;
}
.card::before{
  content:'';position:absolute;inset:0;background:linear-gradient(160deg,var(--wood-pale),transparent 55%);
  opacity:0;transition:opacity .5s var(--e);
}
.card>*{position:relative}
.card:hover,.card:focus-visible{transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(36,31,27,.35);border-color:transparent;outline:none}
.card:hover::before,.card:focus-visible::before{opacity:1}
.card.is-out{display:none}
.card__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.9rem}
.card__verb{font-family:var(--serif);font-style:italic;color:var(--terracotta);font-size:1.05rem}
.card__idx{font-size:.7rem;color:var(--char-mute);letter-spacing:.1em}
.card h3{font-family:var(--serif);font-size:1.5rem;font-weight:500;letter-spacing:-.015em;margin-bottom:.45rem}
.card p{font-size:.92rem;color:var(--char-soft);margin-bottom:1.1rem}
.card footer{display:flex;flex-direction:column;gap:.5rem;padding-top:.9rem;border-top:1px solid rgba(36,31,27,.09)}
.tag{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--char-mute)}
.card__note{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--ink)}
.card__arrow{
  position:absolute;top:1.3rem;right:1.3rem;opacity:0;transform:translate(-6px,6px);
  transition:all .45s var(--e);color:var(--terracotta);font-size:1.1rem;
}
.card:hover .card__arrow{opacity:1;transform:translate(0,0)}

/* ---------- Pull quote ---------- */
.pull{background:var(--charcoal);color:var(--field);padding-block:4.5rem;text-align:center}
.pull__q{font-family:var(--serif);font-size:clamp(2rem,9vw,4.2rem);line-height:1.06;letter-spacing:-.03em}
.pull__q .gt{color:var(--marigold);font-style:italic;padding-inline:.15em}
.pull__c{margin-top:1.2rem;font-size:1rem;color:rgba(242,240,236,.62);font-style:italic;font-family:var(--serif)}

/* ---------- Formats ---------- */
.toggle{display:inline-flex;padding:4px;background:var(--field-2);border-radius:100px;margin-inline:auto;
  margin-bottom:2.2rem;position:relative;left:50%;transform:translateX(-50%)}
.toggle__btn{
  padding:.55rem 1.1rem;border:none;background:transparent;border-radius:100px;
  font-size:.82rem;cursor:pointer;transition:all .35s var(--e);white-space:nowrap;
}
.toggle__btn span{color:var(--terracotta);font-weight:600}
.toggle__btn.is-on{background:var(--white);box-shadow:0 2px 8px -3px rgba(36,31,27,.2)}
.tiers{display:grid;gap:1rem}
.tier{
  background:var(--white);border-radius:var(--r-lg);padding:1.8rem 1.5rem;
  border:1px solid rgba(36,31,27,.08);position:relative;
  transition:transform .5s var(--e),box-shadow .5s var(--e);
}
.tier:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(36,31,27,.3)}
.tier--feat{background:var(--charcoal);color:var(--field);border-color:transparent}
.tier--feat .tier__tag,.tier--feat .tier__desc{color:rgba(242,240,236,.66)}
.tier--feat .tier__was{color:rgba(242,240,236,.45)}
.tier--feat ul li{color:rgba(242,240,236,.8);border-color:rgba(242,240,236,.14)}
.tier--feat .tier__price{color:var(--marigold)}
.tier__flag{
  position:absolute;top:-11px;left:1.5rem;background:var(--marigold);color:var(--ink);
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .7rem;border-radius:100px;
}
.tier h3{font-family:var(--serif);font-size:1.55rem;font-weight:500;letter-spacing:-.015em}
.tier__tag{font-size:.78rem;color:var(--char-mute);margin-bottom:1rem;letter-spacing:.04em}
.tier__price{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--terracotta);display:flex;align-items:baseline;gap:.1rem}
.tier__price .cur{font-size:1.3rem}
.tier__price .per{font-size:.85rem;font-family:var(--sans);color:var(--char-mute);margin-left:.2rem}
.tier--feat .tier__price .per{color:rgba(242,240,236,.5)}
.tier__was{font-size:.8rem;color:var(--char-mute);text-decoration:line-through;margin-top:.2rem;min-height:1.2em}
.tier__desc{font-size:.9rem;color:var(--char-soft);margin:.9rem 0 1.1rem}
.tier ul{list-style:none;margin-bottom:1.4rem}
.tier ul li{font-size:.86rem;color:var(--char-soft);padding:.5rem 0;border-bottom:1px solid rgba(36,31,27,.08)}
.formats__note{text-align:center;margin-top:1.6rem;font-size:.85rem;color:var(--char-mute)}

/* ---------- Gallery ---------- */
.gal{display:grid;gap:.8rem;margin-top:2rem}
.gal__i{border-radius:var(--r);overflow:hidden;position:relative}
.gal__i .ph{transition:transform 1.1s var(--e)}
.gal__i:hover .ph{transform:scale(1.05)}
.gal__i figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1rem .9rem;
  background:linear-gradient(transparent,rgba(36,31,27,.8));color:var(--field);
  font-size:.8rem;letter-spacing:.02em;
}

/* ---------- Teachers ---------- */
.res{display:grid;gap:1rem}
.res__i{
  display:flex;gap:1.1rem;background:var(--white);border-radius:var(--r-lg);
  padding:1.5rem 1.3rem;border:1px solid rgba(36,31,27,.07);
  transition:transform .5s var(--e),box-shadow .5s var(--e);
}
.res__i:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(36,31,27,.3)}
.res__av{
  flex:0 0 54px;height:54px;border-radius:50%;background:var(--wood-pale);
  display:grid;place-items:center;font-family:var(--serif);font-size:1.05rem;color:var(--wood-deep);
}
.res__av--open{background:transparent;border:1.5px dashed rgba(36,31,27,.28);color:var(--char-mute);font-size:1.5rem}
.res__i h3{font-family:var(--serif);font-size:1.3rem;font-weight:500}
.res__p{font-size:.78rem;color:var(--terracotta);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem}
.res__d{font-size:.88rem;color:var(--char-soft)}
.res__d a{color:var(--terracotta);font-weight:500}
.res__i--open{background:transparent;border-style:dashed}

/* ---------- Trial / Form ---------- */
.trial{background:var(--field-2)}
.trial__grid{display:grid;gap:2.5rem}
.trial__copy p{color:var(--char-soft)}
.trial__pts{list-style:none;margin-top:1.4rem;display:grid;gap:.6rem}
.trial__pts li{display:flex;align-items:baseline;gap:.7rem;font-size:.92rem;font-weight:500;color:var(--ink)}
.trial__pts span{flex:0 0 auto;align-self:flex-start;width:15px;height:2px;margin-top:.6em;background:var(--marigold);border-radius:2px}
.form{background:var(--white);border-radius:var(--r-lg);padding:1.6rem 1.3rem;border:1px solid rgba(36,31,27,.07)}
.form__row{margin-bottom:1.05rem}
.form__row label{display:block;font-size:.82rem;font-weight:500;margin-bottom:.4rem;letter-spacing:.01em}
.form__row label em{color:var(--char-mute);font-style:normal;font-weight:400}
.form__row input,.form__row select,.form__row textarea{
  width:100%;padding:.8rem .95rem;border:1px solid rgba(36,31,27,.16);
  border-radius:var(--r-sm);background:var(--field);font-size:.92rem;
  transition:border-color .3s,box-shadow .3s;resize:vertical;
}
.form__row input:focus,.form__row select:focus,.form__row textarea:focus{
  outline:none;border-color:var(--pine);box-shadow:0 0 0 3px rgba(30,58,50,.15);
}
.form__row.is-err input,.form__row.is-err select{border-color:#C0392B}
.err{display:block;font-size:.74rem;color:#C0392B;margin-top:.3rem;min-height:1em}
.hp{position:absolute!important;left:-9999px!important}
.form__msg{margin-top:.9rem;font-size:.88rem;text-align:center;min-height:1.2em}
.form__msg.ok{color:#2E7D52}
.form__msg.bad{color:#C0392B}
.form__fine{margin-top:.7rem;font-size:.74rem;color:var(--char-mute);text-align:center}

/* ---------- FAQ ---------- */
.acc__i{border-bottom:1px solid rgba(36,31,27,.12)}
.acc__i summary{
  list-style:none;cursor:pointer;padding:1.2rem 2.2rem 1.2rem 0;position:relative;
  font-size:1.02rem;font-weight:500;transition:color .3s;
}
.acc__i summary::-webkit-details-marker{display:none}
.acc__i summary:hover{color:var(--terracotta)}
.acc__x{position:absolute;right:.2rem;top:50%;width:13px;height:13px;transform:translateY(-50%)}
.acc__x::before,.acc__x::after{
  content:'';position:absolute;background:var(--terracotta);border-radius:2px;
  transition:transform .4s var(--e);
}
.acc__x::before{left:0;top:5.7px;width:13px;height:1.6px}
.acc__x::after{left:5.7px;top:0;width:1.6px;height:13px}
.acc__i[open] .acc__x::after{transform:rotate(90deg)}
.acc__b{padding-bottom:1.3rem}
.acc__b p{color:var(--char-soft);font-size:.94rem;max-width:62ch}
.acc__i[open] .acc__b{animation:accIn .45s var(--e)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Closing ---------- */
.closing{text-align:center;padding-block:5.5rem;background:var(--field-2)}
.closing__l{font-size:1rem;color:var(--char-mute);margin-bottom:.6rem}
.closing__b{font-family:var(--serif);font-size:clamp(3rem,16vw,8rem);line-height:1;letter-spacing:-.04em;margin-bottom:1.8rem}
.closing__b em{font-style:italic;color:var(--terracotta)}

/* ---------- Footer ---------- */
.foot{background:var(--pine-deep);color:var(--field);padding-block:3.5rem 1.5rem}
.foot__grid{display:grid;gap:2rem}
.foot__word{color:var(--field);font-size:2rem}
.foot__brand p{font-size:.85rem;color:rgba(242,240,236,.55);margin-top:.5rem;line-height:1.7}
.foot__col h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wood);margin-bottom:.8rem;font-weight:500}
.foot__col a{display:block;font-size:.88rem;color:rgba(242,240,236,.72);padding:.28rem 0;transition:color .3s,transform .3s var(--e)}
.foot__col a:hover{color:var(--wood);transform:translateX(3px)}
.foot__base{
  display:flex;flex-direction:column;gap:.5rem;margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid rgba(242,240,236,.13);font-size:.78rem;color:rgba(242,240,236,.45);
}
.foot__tag{font-family:var(--serif);font-style:italic;color:var(--wood)}

/* ---------- Floating CTA (mobile) ---------- */
.fab{
  position:fixed;left:var(--gut);right:var(--gut);bottom:1rem;z-index:90;
  background:var(--marigold);color:var(--ink);text-align:center;
  padding:.95rem;border-radius:100px;font-size:.9rem;font-weight:600;
  box-shadow:0 12px 30px -12px rgba(30,58,50,.5);
  transform:translateY(140%);transition:transform .55s var(--e);
}
.fab.is-on{transform:translateY(0)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .85s var(--e),transform .85s var(--e)}
.reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (min-width:600px){
  :root{--gut:2rem;--sec-y:6rem}
  .cards{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .res{grid-template-columns:repeat(2,1fr)}
  .stats__grid{grid-template-columns:repeat(4,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal__i--wide{grid-column:span 2}
  .foot__grid{grid-template-columns:repeat(2,1fr)}
  .foot__base{flex-direction:row;justify-content:space-between}
  .hero__sub{font-size:1.15rem}
}

@media (min-width:900px){
  :root{--gut:2.5rem;--sec-y:8rem}
  .nav__links{display:flex;gap:2rem}
  .nav__links a{font-size:.88rem;position:relative;padding:.3rem 0}
  .nav__links a::after{
    content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
    background:var(--terracotta);transform:scaleX(0);transform-origin:right;
    transition:transform .45s var(--e);
  }
  .nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
  .nav__cta{display:inline-flex}
  .nav__burger{display:none}
  .fab{display:none}

  .hero{padding-top:0;display:flex;align-items:center}
  .hero__content{max-width:50%;padding-block:7rem 3rem;position:relative;z-index:2}
  .hero__title{font-size:clamp(3rem,4.9vw,4.9rem)}
  /* Full-bleed image (edge to edge) behind the copy */
  .hero__media{
    position:absolute;inset:0;width:100%;margin:0;aspect-ratio:auto;border-radius:0;
    -webkit-mask-image:none;mask-image:none;
  }
  /* Ivory scrim: washes the left third so the purple headline reads, plus a
     soft top wash so the dark nav links stay legible over the photo. */
  .hero::before{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(180deg,rgba(246,240,236,.94) 0%,rgba(246,240,236,.5) 8%,rgba(246,240,236,0) 20%),
      linear-gradient(90deg,var(--field) 0%,rgba(246,240,236,.96) 30%,rgba(246,240,236,.62) 50%,rgba(246,240,236,0) 69%);
  }

  .intro__grid{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
  .cards{grid-template-columns:repeat(3,1fr);gap:1.2rem}
  .tiers{grid-template-columns:repeat(4,1fr)}
  .res{grid-template-columns:repeat(3,1fr)}
  .gal{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,auto)}
  .gal__i--tall{grid-row:span 2}
  .gal__i--wide{grid-column:span 2}
  .trial__grid{grid-template-columns:1fr 1.05fr;gap:4rem;align-items:start}
  .foot__grid{grid-template-columns:1.4fr repeat(3,1fr);gap:3rem}
  .sec__head{margin-bottom:3.5rem}
  .form{padding:2.2rem 2rem}
}

@media (min-width:1200px){
  .hero__title{font-size:6.4rem}
  .cards{gap:1.5rem}
}

/* ==========================================================================
   Coaching-studio repositioning — component additions
   ========================================================================== */

/* Hero lead line (the "enough gyms" statement under the tagline) */
.hero__lead{
  font-family:var(--serif);font-size:clamp(1.2rem,3.6vw,1.55rem);line-height:1.28;
  color:var(--ink);margin-bottom:1rem;max-width:22ch;
}
.hero__lead em{font-style:italic;color:var(--terracotta)}

/* Training — now FIVE disciplines. Flex 2-up (not grid) so the odd 5th card
   centres on the last row instead of sitting as a left-aligned orphan. */
.training .cards{display:flex;flex-wrap:wrap;justify-content:center}
.training .card{flex:0 1 100%}
@media (min-width:600px){.training .card{flex:0 1 calc(50% - .5rem)}}
@media (min-width:900px){
  .training .cards{gap:1.4rem}
  .training .card{flex:0 1 calc(50% - .7rem)}
}

/* Difference — plain cards (no footer), numbered */
.card--plain{padding-bottom:1.6rem}
.card--plain p{margin-bottom:0}

/* Formats — a two-card comparison instead of the four-tier grid */
.formats--pair .tiers{grid-template-columns:1fr}
@media (min-width:600px){.formats--pair .tiers{grid-template-columns:repeat(2,1fr);max-width:720px;margin-inline:auto}}
@media (min-width:900px){.formats--pair .tiers{grid-template-columns:repeat(2,1fr)}}
.cap{font-family:var(--serif);font-size:2.9rem;line-height:1;color:var(--terracotta);display:flex;align-items:baseline;gap:.4rem}
.cap small{font-size:.8rem;font-family:var(--sans);color:var(--char-mute);letter-spacing:.04em;text-transform:uppercase}
.tier--feat .cap{color:var(--marigold)}
.tier--feat .cap small{color:rgba(242,240,236,.5)}

/* Membership — single highlighted seat */
.member{
  max-width:640px;margin-inline:auto;background:var(--charcoal);color:var(--field);
  border-radius:var(--r-xl);padding:2.6rem 1.8rem;text-align:center;position:relative;overflow:hidden;
}
.member__flag{
  display:inline-block;background:var(--marigold);color:var(--ink);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.32rem .8rem;border-radius:100px;margin-bottom:1.4rem;
}
.member__price{
  font-family:var(--serif);font-size:clamp(3.2rem,13vw,4.8rem);line-height:1;color:var(--marigold);
  display:flex;justify-content:center;align-items:baseline;gap:.1rem;
}
.member__price .cur{font-size:.42em}
.member__price .per{font-size:.26em;font-family:var(--sans);color:rgba(242,240,236,.55);margin-left:.25rem}
.member__was{margin-top:.55rem;font-size:.98rem;color:rgba(242,240,236,.5)}
.member__was s{text-decoration:line-through}
.member__desc{margin:1.5rem auto 1.8rem;max-width:46ch;color:rgba(242,240,236,.78);font-size:1rem}
.member__desc strong{color:var(--field);font-weight:500}
.member .btn{background:var(--marigold);color:var(--ink)}
.member .btn::before{background:var(--field)}
.member .btn:hover,.member .btn:focus-visible{color:var(--ink)}

/* Closing — headline + supporting line instead of the single word */
.closing__h{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,6vw,3.2rem);line-height:1.1;
  letter-spacing:-.02em;max-width:15ch;margin:0 auto .9rem;
}
.closing__h em{font-style:italic;color:var(--terracotta)}
.closing__sub{max-width:52ch;margin:0 auto 2rem;color:var(--char-soft);font-size:1.02rem}

/* ==========================================================================
   Type recut — Fugaz One (display) · Nunito (body) · Permanent Marker (accent)
   ========================================================================== */
/* Onest is a text-weight sans — headlines need bold weight + tight tracking */
.h2,.hero__title,.closing__h,.closing__b,.pull__q,.tier__price,.member__price,
.stat__n,.stat__n--sm,.cap,.card h3,.tier h3,.res__i h3{letter-spacing:-.02em;font-weight:700}
.hero__title,.pull__q,.closing__b{font-weight:800;letter-spacing:-.035em}
.hero__title{line-height:1.0}
body{font-weight:400}

/* Emphasis words: display face in bronze (Fugaz One has no italic, so no slant) */
.h2 em,.hero__title em,.hero__lead em,.closing__h em,.closing__b em,
.card__verb,.foot__tag{
  font-style:normal;color:var(--terracotta);font-variation-settings:normal;
}
.marquee__track span{font-style:normal}

/* Lead sentence + small descriptive accents in the readable body face */
.hero__lead{font-family:var(--sans);font-weight:600;letter-spacing:0}
.card__note,.pull__c,.tier__tag{font-family:var(--sans);font-style:italic}

/* ==========================================================================
   Royal Purple + Bronze-gradient accents (D19)
   ========================================================================== */
/* Display headlines carry the royal purple (always on light surfaces here) */
.hero__title,.h2,.closing__h{color:var(--purple)}

/* Metallic bronze-gradient text for display-scale accents */
.hero__title em,.h2 em,.closing__h em,.closing__b em,.pull__q .gt,
.stat__n,.stat__n--sm,.cap,.member__price,.tier__price{
  background-image:var(--bronze-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Small inline accents stay solid bronze (gradient clip reads muddy at text size) */
.hero__lead em,.card__verb,.foot__tag,.card__idx{color:var(--bronze);-webkit-text-fill-color:currentColor}

/* Buttons: purple base, bronze-gradient fill on hover, ivory label throughout.
   Fill sits BEHIND the label (z-index:-1 within an isolated context) so bare-text
   labels stay visible on hover instead of being covered by the sliding fill. */
.btn{isolation:isolate}
.btn::before{background:var(--bronze-grad);z-index:-1}
.btn:hover,.btn:focus-visible,
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--field)}
.btn:hover{box-shadow:0 12px 28px -12px rgba(34,11,77,.45)}

/* Member card CTA + floating CTA: bronze-gradient fill, ivory label */
.member .btn,.fab{background:var(--bronze-grad);color:var(--field)}
.member .btn::before{background:var(--field)}
.member .btn:hover,.member .btn:focus-visible{color:var(--purple)}

/* Badges + selection in bronze */
.tier__flag,.member__flag{background:var(--bronze-grad);color:var(--field)}
::selection{background:var(--bronze);color:var(--field)}

/* Nav glass tint follows the ivory ground */
.nav.is-stuck{background:rgba(246,240,236,.86)}

/* ==========================================================================
   D20 — Feedback pass (Lavanya)
   · Bronze used sparingly — kept as the single "impact" moment (hero MUVE word
     + the membership price). Repeated section accents move to royal purple so
     the page reads cleaner and the bronze actually lands when it appears.
   · Marquee restyled into a royal-purple ticker: ivory uppercase text with a
     bronze highlight on every third statement.
   · Nav: larger lockup, and the link cluster nudged right toward the CTA.
   ========================================================================== */

/* --- Bronze, sparingly -------------------------------------------------- */
/* Section-heading accent words: solid royal purple (drop the bronze gradient) */
.h2 em,.closing__h em{
  background:none;background-image:none;color:var(--purple);
  -webkit-text-fill-color:currentColor;
}
/* Big display numbers + format caps: royal purple, not bronze */
.stat__n,.stat__n--sm,.cap{
  background:none;background-image:none;color:var(--purple);
  -webkit-text-fill-color:currentColor;
}
.tier--feat .cap{color:var(--marigold)} /* keep legible on the dark feature card */
/* Small inline labels that were bronze on ivory → quieter tones */
.hero__lead em{color:var(--purple);-webkit-text-fill-color:currentColor}
.card__verb{color:var(--char-soft)}
.card__idx{color:var(--char-mute)}
/* The two survivors stay bronze: .hero__title em (MUVE) + .member__price */

/* --- Marquee: royal-purple ticker -------------------------------------- */
.marquee{background:var(--purple);border-block:none;padding:1.05rem 0}
.marquee__track{gap:2.1rem}
.marquee__track span{
  font-family:var(--serif);font-weight:700;font-style:normal;
  font-size:.98rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ivory);
}
.marquee__track i{color:rgba(246,240,236,.32);font-style:normal}
.marquee__track span.hl{color:var(--bronze-hi)} /* bronze every third statement */

/* --- Nav: bigger lockup, link cluster shifted right -------------------- */
.brand--nav{width:132px;height:37px}
@media (min-width:900px){
  .nav__links{margin-left:auto;margin-right:2.75rem}
}

/* ==========================================================================
   D21 — Logo/wordmark scale, hero wordmark, contrast, CTA pattern, above-fold
   ========================================================================== */

/* --- Nav lockup rebuilt from separate word + mark so the wordmark can be
       sized independently. Wordmark cap-height = 90% of the mark height. --- */
.nav__logo{display:flex;align-items:center;gap:.5rem;color:var(--pine)}
.brand--mark{
  width:37px;height:40px;              /* 40 × 181/197 ≈ 37 */
  -webkit-mask-image:url("../img/muve-mark.svg");mask-image:url("../img/muve-mark.svg");
}
.brand--word{
  width:150px;height:36px;             /* 36 = 90% of 40; 36 × 474/114 ≈ 150 */
  -webkit-mask-image:url("../img/muve-word.svg");mask-image:url("../img/muve-word.svg");
}

/* --- Footer lockup: much bigger --- */
.brand--foot{width:230px;height:64px}  /* 230 × 198/707 ≈ 64 */

/* --- Specialized (feature) card: list items had too little contrast on the
       dark purple ground (a later low-specificity rule was winning). --- */
.tier--feat ul li{color:rgba(246,240,236,.92);border-color:rgba(246,240,236,.18)}

/* --- CTA (closing) section: tiled logo-mark pattern, rotated + low opacity - */
.closing{position:relative;overflow:hidden}
.closing::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../img/mark-tile.svg") center/300px 300px repeat;
  opacity:.13;
  /* soft edge vignette only — keeps the motif clearly visible everywhere,
     just eases the very top/bottom so it blends into the neighbouring bands */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.closing .wrap{position:relative;z-index:1}

/* ==========================================================================
   D22 — Feedback pass (Lavanya): split hero + ATF feature strip, Five Pillars
   section, seamless offerings ticker, frozen nav.
   (Supersedes the interim full-bleed hero.)
   ========================================================================== */

/* --- Nav: frozen (never hides). Normal case (reverted from all-caps). --- */
.nav{transform:none!important}

/* --- Above-the-fold band locked to one viewport (desktop): hero grows to
       fill, feature strip + ticker sit beneath, all within 100svh. --- */
@media (min-width:900px){
  .fold{display:flex;flex-direction:column;min-height:100svh}
  .fold .hero{flex:1 1 auto;min-height:0}
  .fold .hfeat,.fold .marquee{flex:0 0 auto}
  .fold .hfeat__grid{padding-block:1.5rem}
}

/* --- Hero feature strip (part of the above-the-fold band) --------------- */
.hfeat{background:var(--field);border-top:1px solid rgba(136,87,54,.16)}
.hfeat__grid{display:grid;gap:1.6rem;padding-block:2rem}
.hfeat__i{display:grid;grid-template-columns:auto 1fr;gap:.35rem .95rem;align-items:center}
.hfeat__ic{
  width:50px;height:50px;border-radius:50%;background:var(--sage);
  display:grid;place-items:center;color:var(--purple);
}
.hfeat__ic svg{width:25px;height:25px}
.hfeat__h{
  font-family:var(--sans);font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;font-size:.82rem;line-height:1.22;color:var(--purple);
}
.hfeat__p{grid-column:1/-1;font-size:.85rem;line-height:1.5;color:var(--char-soft);max-width:30ch}
.hfeat__i--cta{display:block}
.hfeat__i--cta .hfeat__p{margin-top:.35rem}
.hfeat__link{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;
  font-family:var(--sans);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;font-size:.78rem;color:var(--bronze);
}
.hfeat__link span{transition:transform .4s var(--e)}
.hfeat__link:hover span{transform:translateX(3px)}
@media (min-width:768px){
  .hfeat__grid{grid-template-columns:repeat(4,1fr);gap:0}
  .hfeat__i{padding-inline:1.7rem}
  .hfeat__i+.hfeat__i{border-left:1px solid rgba(136,87,54,.20)}
  .hfeat__i:first-child{padding-left:0}
  .hfeat__i:last-child{padding-right:0}
}

/* --- Five Pillars section ---------------------------------------------- */
.ico{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.eyebrow--rule{display:inline-flex;align-items:center;gap:.6rem;color:var(--bronze)}
.eyebrow--rule::after{content:'';width:26px;height:1px;background:currentColor;opacity:.7}
.pillars__h{letter-spacing:-.02em}
.pillars__row{
  list-style:none;display:flex;gap:1.1rem;margin-top:2.6rem;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:.4rem;
}
.pil{flex:0 0 64%;scroll-snap-align:center;text-align:center}
.pil__disc{position:relative;width:min(190px,74%);margin:0 auto 1.1rem;aspect-ratio:1}
.pil__ph{width:100%;height:100%;border-radius:50%;background:var(--wood-soft) center/cover no-repeat}
.pil__ic{
  position:absolute;top:0;left:50%;transform:translate(30%,-30%);
  width:38px;height:38px;border-radius:50%;background:var(--purple);color:var(--white);
  display:grid;place-items:center;box-shadow:0 8px 18px -8px rgba(34,11,77,.6);
}
.pil__ic .ico{width:18px;height:18px;stroke-width:1.9}
.pil__name{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.92rem;color:var(--purple)}
.pil__rule{display:block;width:22px;height:2px;background:var(--bronze-grad);border-radius:2px;margin:.55rem auto .7rem}
.pil__tag{font-size:.9rem;line-height:1.36;color:var(--char-soft)}
@media (min-width:768px){
  .pillars__row{overflow:visible;gap:1rem}
  .pil{flex:1 1 0}
  .pil__disc{width:min(200px,100%)}
}

/* Journey sub-row: connected pillar-to-verb path */
.journey{margin-top:3rem;text-align:center}
.journey__lead{color:var(--bronze);margin-bottom:0}
.journey__steps{
  list-style:none;display:flex;align-items:flex-start;gap:.3rem;margin-top:1.4rem;
  position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.journey__steps::before{content:'';position:absolute;top:22px;left:7%;right:7%;height:1px;background:var(--bronze);opacity:.38;z-index:0}
.jn{
  flex:1 0 auto;min-width:100px;display:flex;flex-direction:column;align-items:center;
  text-align:center;position:relative;z-index:1;padding-inline:.3rem;
}
.jn__ic{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(136,87,54,.5);
  background:var(--field);display:grid;place-items:center;color:var(--ink);margin-bottom:.7rem;
}
.jn__ic .ico{width:20px;height:20px}
.jn__h{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.76rem;color:var(--purple)}
.jn__p{font-size:.75rem;color:var(--char-mute);margin-top:.15rem}
.jn__sep{flex:0 0 auto;align-self:flex-start;margin-top:11px;color:var(--bronze);opacity:.55;font-size:1.2rem;position:relative;z-index:1}
@media (min-width:768px){
  .jn{flex:1 1 0;min-width:0}
  .journey__steps{overflow:visible;gap:.5rem}
}

/* ==========================================================================
   D23 — Feedback pass (Lavanya):
   1 · Bebas Neue reserved for the big questions + section headers.
   2 · The CTA's tiled logo-mark motif echoed, elegantly, into more bands.
   3 · Philosophy-band numbers scaled way up so the section reads full.
   ========================================================================== */

/* --- 1 · Bebas Neue — big questions & headers only --------------------- */
:root{--head:'Bebas Neue','Hanken Grotesk',sans-serif}

/* Only the display-scale headers switch face — body, cards, eyebrows and
   numbers stay in Hanken Grotesk so Bebas stays an impact moment, not noise. */
.hero__title,.h2,.pull__q,.closing__h{
  font-family:var(--head);
  font-weight:400;          /* Bebas ships one weight — neutralises the 800 rules */
  letter-spacing:.01em;     /* condensed caps breathe better with a hair of tracking */
}
/* Bebas is all-caps + condensed → tighten the leading and let it grow a touch
   so each header holds the same confident footprint as the old grotesk. */
.hero__title{font-size:clamp(3.2rem,12.5vw,4.8rem);line-height:.9}
.h2{font-size:clamp(2.5rem,8vw,4.1rem);line-height:.94}
.pull__q{font-size:clamp(2.7rem,11vw,5.2rem);line-height:.92}
.closing__h{font-size:clamp(2.5rem,7vw,3.9rem);line-height:.96;max-width:20ch}
@media (min-width:900px){
  .hero__title{font-size:clamp(3.8rem,5.6vw,5.8rem)}
}
@media (min-width:1200px){
  .hero__title{font-size:6.6rem}
}

/* --- 2 · Brand-mark motif echoed into the dark accent bands ------------- */
/* Same tiled mark as the closing CTA, recut light for the purple grounds and
   held to a whisper so it reads as texture, never busy. */
.pull,.member{position:relative;overflow:hidden}
.pull::before,.member::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../img/mark-tile-light.svg") center/300px 300px repeat;
  opacity:.16;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
}
.pull .wrap{position:relative;z-index:1}
.member>*{position:relative;z-index:1}

/* Formats band — same mark motif, but faded RADIALLY rather than top/bottom.
   Light ivory ground → the purple tile (as on the closing CTA). The radial mask
   dissolves the pattern away from the centre so the header + the two cards sit on
   clean ivory and the marks frame the section (an inward fade). To flip it to an
   outward centre-glow instead, swap the mask stops for `#000 0%, transparent 70%`. */
.formats{position:relative;overflow:hidden}
.formats::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../img/mark-tile.svg") center/300px 300px repeat;
  opacity:.36;
  -webkit-mask-image:radial-gradient(125% 95% at 50% 42%,transparent 0%,transparent 38%,#000 88%);
          mask-image:radial-gradient(125% 95% at 50% 42%,transparent 0%,transparent 38%,#000 88%);
}
.formats .wrap{position:relative;z-index:1}

/* Pillars band — NOT a full tile. Two oversized single MUVE marks (the mark SVG
   painted via mask) bleed off opposite corners as editorial watermarks, playing
   against the five circular discs instead of carpeting behind them. */
.pillars{position:relative;overflow:hidden}
.pillars::before,.pillars::after{
  content:'';position:absolute;pointer-events:none;z-index:0;
  background:var(--purple);
  -webkit-mask:url("../img/muve-mark.svg") center/contain no-repeat;
          mask:url("../img/muve-mark.svg") center/contain no-repeat;
}
.pillars::before{   /* large, top-right, bleeding off */
  top:-7%;right:-8%;width:min(46vw,520px);aspect-ratio:181/197;
  opacity:.06;transform:rotate(-10deg);
}
.pillars::after{    /* smaller counterweight, bottom-left */
  bottom:-5%;left:-7%;width:min(30vw,320px);aspect-ratio:181/197;
  opacity:.045;transform:rotate(13deg);
}
.pillars .wrap{position:relative;z-index:1}

/* --- 3 · Philosophy numbers: far bigger, so the band feels full -------- */
.stats{padding-block:3rem}
.stats__grid{
  gap:2.4rem 1rem;padding-block:3.6rem;
  border-color:rgba(136,87,54,.22);   /* warm bronze hairline instead of grey */
}
.stat__n,.stat__n--sm{
  font-size:clamp(4.2rem,15vw,7.4rem);
  line-height:.84;letter-spacing:-.04em;font-weight:800;
}
/* Bronze rule beneath each number — the same accent as .hero__rule / .pil__rule */
.stat__n::after{
  content:'';display:block;width:44px;height:3px;margin:.7rem auto .1rem;
  background:var(--bronze-grad);border-radius:2px;
}
.stat__l{
  font-size:.82rem;margin-top:.8rem;line-height:1.35;
  max-width:15ch;margin-inline:auto;
}
@media (min-width:900px){
  .stat__n,.stat__n--sm{font-size:clamp(5rem,7.2vw,8.4rem)}
}

/* ==========================================================================
   D24 — Mobile hero goes FULL-BLEED (matching desktop), replacing the boxed
   image-below-the-copy. Copy anchors over a rising ivory scrim; the crop is
   biased right so the athlete's face stays in frame (the wide photo puts the
   subject in its right third, so a centred crop decapitated him).
   Scoped < 900px so the desktop hero is untouched.
   ========================================================================== */
@media (max-width:899px){
  .hero{min-height:90svh;padding-top:0;display:flex;align-items:flex-end}
  /* copy sits at the bottom, lifted clear of the edge; nav floats over the top */
  .hero__inner{padding:0 var(--gut) 2.8rem}
  /* image bleeds edge-to-edge behind the copy (was a rounded box in flow) */
  .hero__media{
    position:absolute;inset:0;width:100%;height:100%;margin:0;
    aspect-ratio:auto;border-radius:0;
  }
  /* favour the right third so the head/face stays in the narrow crop */
  .hero__media .ph--hero,.ph--hero{background-position:80% 50%}
  /* first line sits over the athlete's dark torso → flip it to white so it reads;
     the lower lines stay purple over the ivory scrim below. */
  .hero__title .line:first-child{color:#fff}
  /* ivory scrim: light top wash so the nav reads over bright sky · clear middle
     so the athlete shows · rising to solid ivory behind the copy at the bottom */
  .hero::before{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(246,240,236,.5) 0%,
      rgba(246,240,236,0) 18%,
      rgba(246,240,236,0) 42%,
      rgba(246,240,236,.55) 56%,
      rgba(246,240,236,.92) 74%,
      var(--field) 90%);
  }
}