/* ============================================================
   PILATES BY OSI BODY FIT — v3.0 "Astra Maven edition"
   Fonts: Instrument Serif (display) · Montserrat (body)
          Mrs Saint Delafield (script — free stand-in for
          Showit's commercial "Blessed Signature")
   Palette: Osi brand (sage/oak/brass/cream) replacing
            Astra Maven red (#D3030A / #9C190D)
   ============================================================ */

:root{
  /* base */
  --white:#FCFBF8;
  --cream:#F8F3ED;          /* astra cream */
  --paper:#F7F4EF;
  --ecru:#ECE7DF;           /* astra ecru band */
  --ink:#33302A;
  --ink-soft:#5A554C;
  --black:#211E1A;
  /* accents — osi hex codes in place of astra red */
  --sage:#7E9A73;           /* primary sage (was #5F7350) */
  --sage-deep:#66805C;      /* darker sage for hovers (was #3C4C33) */
  --sage-mid:#8CA07E;
  --sage-light:#AEBF9F;
  --brass:#C6A25A;
  --brass-light:#E0C888;
  --oak:#D9C39C;
  --blush:#D2A9B7;
  /* type */
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Montserrat',-apple-system,sans-serif;
  --script:'Mrs Saint Delafield',cursive;
  /* geometry */
  --gutter:clamp(1.25rem,4.5vw,4.5rem);
  --maxw:1240px;
  --r-lg:28px; --r-md:16px; --r-sm:10px;
  --sh-soft:0 10px 30px rgba(33,30,26,.08);
  --sh-lift:0 18px 44px rgba(33,30,26,.14);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-weight:500;
  color:var(--ink);
  background:var(--cream);
  line-height:1.4;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

::selection{background:var(--sage);color:var(--cream)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(4rem,9vw,7.5rem) 0}
.section-sm{padding:clamp(2.5rem,5vw,4rem) 0}

/* ---------- type scale (3-5 sizes, big steps) ---------- */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;line-height:.95;letter-spacing:-.01em}
h1{font-size:clamp(2.8rem,6vw,5rem)}
h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
h3{font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.05}
p{line-height:1.55;color:var(--ink-soft)}
.lede{font-size:clamp(1.02rem,1.4vw,1.18rem);max-width:56ch}
.serif-i{font-family:var(--serif);font-style:italic}
.script{font-family:'Lato',var(--sans);font-weight:600;line-height:1.2}

/* kicker — astra-style spaced caps */
.kicker{
  font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;color:var(--sage);
  display:block;margin-bottom:1.1rem;
}
.kicker.on-dark{color:var(--brass-light)}

/* script overline like astra's "introducing / the experience" */
.script-kick{
  font-family:'Lato',var(--sans);font-size:.74rem;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--brass);display:block;margin-bottom:.9rem;transform:none;
}

/* circled italic word — astra's ellipse around "with" */
.circled{position:relative;display:inline-block;font-style:italic;padding:0 .18em}
.circled svg{
  position:absolute;inset:-22% -12%;width:124%;height:144%;
  fill:none;stroke:currentColor;stroke-width:2.4;opacity:.9;
  pointer-events:none;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  background:var(--sage);color:var(--cream);
  padding:1.05em 2.3em;border-radius:100px;border:0;cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--sh-lift);background:var(--sage-deep)}
.btn::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s ease;
}
.btn:hover::after{left:130%}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-cream:hover{background:var(--white)}
.btn-ghost{
  background:transparent;color:var(--ink);
  border:1.5px solid var(--ink);box-shadow:none;
}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-brass{background:var(--brass);color:var(--black)}
.btn-brass:hover{background:var(--brass-light)}
.txt-link{
  font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  border-bottom:1.5px solid var(--brass);padding-bottom:.35em;color:var(--ink);
  transition:color .3s;
}
.txt-link:hover{color:var(--sage)}

/* ============================================================
   NAV — astra split layout, cream bar, centered wordmark
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--cream);
  transition:box-shadow .3s ease;
}
.nav.scrolled{box-shadow:0 4px 24px rgba(33,30,26,.08)}
.nav-inner{
  max-width:1400px;margin:0 auto;padding:0 clamp(1rem,3vw,2.5rem);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:76px;gap:clamp(2.2rem,4.5vw,5rem);
}
.nav-side{display:flex;gap:clamp(.7rem,1.5vw,1.5rem);align-items:center}
.nav-side.left{justify-content:flex-end}
.nav-side.right{justify-content:flex-start}
.nav-side a{
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);position:relative;padding:.4em 0;white-space:nowrap;
}
.nav-side a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:var(--sage);transition:width .3s ease;
}
.nav-side a:hover::after,.nav-side a[aria-current]::after{width:100%}
.nav-side .nav-cta{
  border:1.5px solid var(--sage);color:var(--sage);
  border-radius:100px;padding:.7em 1.4em;
  transition:background .3s,color .3s;
}
.nav-side .nav-cta:hover{background:var(--sage);color:var(--cream)}
.nav-side .nav-cta::after{display:none}
/* brand lockup — matches the official logo: spaced sans PILATES,
   brass rule, script "By OsiBodyFit" hanging off its right end */
.brand{text-align:center;line-height:1;display:inline-block}
.brand .brand-main{
  font-family:var(--sans);font-weight:500;font-size:1.68rem;
  letter-spacing:.3em;color:var(--ink);display:block;margin-right:-.3em;
}
.brand .brand-sub{
  display:flex;align-items:center;justify-content:center;gap:.5em;margin-top:.26rem;
}
.brand .brand-sub::before,.brand .brand-sub::after{
  content:"";width:1.7em;height:1px;background:var(--brass);flex:none;
}
.brand .brand-sub .script-tag{
  font-family:'Lato',var(--sans);font-size:.6rem;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--brass);
  white-space:nowrap;transform:none;
}
@media(max-width:1160px){
  .brand .brand-main{font-size:1.5rem}
  .brand .brand-sub .script-tag{font-size:.56rem}
}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;justify-self:end}
.burger span{display:block;width:26px;height:2px;background:var(--ink);margin:6px 0;transition:.3s}

@media(max-width:1160px){
  .nav-inner{grid-template-columns:auto 1fr auto}
  .brand{text-align:left;order:-1}
  .nav-side{display:none}
  .burger{display:block}
  .nav.open .nav-side{
    display:flex;flex-direction:column;position:absolute;top:76px;left:0;right:0;
    background:var(--cream);padding:1.5rem var(--gutter) 2rem;gap:1.15rem;
    box-shadow:0 24px 40px rgba(33,30,26,.12);align-items:flex-start;
  }
  .nav.open .nav-side.right{top:calc(76px + 220px);padding-top:0;box-shadow:0 24px 40px rgba(33,30,26,.12)}
  .nav.open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav.open .burger span:nth-child(2){opacity:0}
  .nav.open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* ============================================================
   HERO — astra maven masthead: full-bleed photo backdrop,
   oversized serif wordmark across the model
   ============================================================ */
.hero{
  position:relative;min-height:calc(100svh - 76px);margin-top:76px;
  background:#F7D9BC url("../img/hero-bg.jpg") center/cover no-repeat;
  overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
}
.hero::before{ /* subtle warm vignette for text contrast on nude bg */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(154,127,92,.10) 0%,rgba(154,127,92,0) 30%,rgba(154,127,92,.08) 100%);
}
.hero-headline{
  position:absolute;top:clamp(4rem,10vh,7rem);left:var(--gutter);z-index:3;
  color:var(--cream);max-width:min(46vw,520px);
}
.hero-headline .hl-1{
  font-family:var(--serif);font-size:clamp(1.9rem,3.6vw,3.3rem);
  line-height:1.08;display:block;
}
.hero-headline .hl-2{
  font-family:var(--serif);font-size:clamp(1.9rem,3.6vw,3.3rem);
  text-transform:uppercase;letter-spacing:.02em;display:block;margin-top:.15em;
}
.hero-badge{
  position:absolute;top:clamp(4.4rem,11vh,7.6rem);right:var(--gutter);z-index:3;
  text-align:right;color:var(--cream);font-size:.7rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;line-height:2;opacity:.92;
}
.hero-wordmark{
  position:relative;z-index:2;width:100%;text-align:center;
  color:var(--cream);user-select:none;
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:clamp(3.5rem,10vh,6rem);
}
.hero-wordmark .hw-main{
  font-family:var(--serif);font-size:clamp(4.5rem,17vw,16rem);line-height:.84;
  letter-spacing:.02em;white-space:nowrap;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-background-clip:text;background-clip:text;
  background-image:
    linear-gradient(100deg,transparent 0 41%,rgba(233,196,116,.96) 46%,#F2D389 50%,rgba(233,196,116,.96) 54%,transparent 59% 100%),
    linear-gradient(100deg,#2A2722 0%,#443A2A 24%,#8A713F 42%,#C9A251 50%,#8A713F 58%,#443A2A 76%,#2A2722 100%);
  background-size:280% 100%,100% 100%;
  background-position:150% 0,0 0;
  animation:glassReveal 1s ease .15s both,glassSheen 5.2s linear 1.15s infinite;
}
@keyframes glassReveal{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes glassSheen{from{background-position:150% 0,0 0}to{background-position:-50% 0,0 0}}
@media(prefers-reduced-motion:reduce){.hero-wordmark .hw-main{animation:none;clip-path:none;opacity:1;background-position:0 0,0 0}}
.hero-wordmark .hw-script{
  font-family:var(--script);color:var(--brass-light);
  font-size:clamp(2rem,7vw,6rem);line-height:.9;white-space:nowrap;
  margin-top:-.06em;
}
.hero-cta{
  position:absolute;bottom:clamp(2.2rem,6vh,3.6rem);right:var(--gutter);z-index:3;
  text-align:right;color:var(--cream);max-width:300px;
}
.hero-cta .cta-kick{
  font-size:.72rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  line-height:1.9;display:block;margin-bottom:1.2rem;
}
.hero-proof{
  position:absolute;bottom:clamp(2.2rem,6vh,3.6rem);left:var(--gutter);z-index:3;
  color:var(--cream);font-size:.78rem;letter-spacing:.06em;line-height:1.9;opacity:.95;
}
.hero-proof .stars{color:var(--brass-light);letter-spacing:.15em}
@media(max-width:760px){
  .hero{min-height:calc(92svh - 76px)}
  .hero-headline{max-width:80vw}
  .hero-badge{display:none}
  .hero-wordmark{margin-bottom:9rem}
  .hero-wordmark .hw-main{font-size:18vw;line-height:.85}
  .hero-wordmark .hw-script{font-size:8vw}
  .hero-cta{right:auto;left:var(--gutter);text-align:left;bottom:2.2rem}
  .hero-proof{display:none}
}

/* ============================================================
   MARQUEE — astra "what they're saying •" strip
   ============================================================ */
.marquee{
  overflow:hidden;background:var(--sage);color:var(--cream);
  padding:.95rem 0;white-space:nowrap;
}
.marquee.ecru{background:var(--ecru);color:var(--ink)}
.marquee-track{
  display:flex;width:max-content;flex-wrap:nowrap;
  animation:marq 45s linear infinite;will-change:transform;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{
  display:flex;align-items:center;flex-shrink:0;white-space:nowrap;
}
.marquee-group span{
  font-family:var(--serif);font-size:1.15rem;letter-spacing:.16em;
  text-transform:uppercase;padding:0 1.4rem;
}
.marquee-group .dot{color:var(--brass-light);padding:0}
.marquee.ecru .marquee-group .dot{color:var(--brass)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- press band ---------- */
.press{background:var(--ecru);padding-top:clamp(3.2rem,6vw,5rem);padding-bottom:clamp(3.2rem,6vw,5rem)}
.press .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-evenly;gap:clamp(2.4rem,5vw,4.5rem);row-gap:2.4rem}
.press-note{width:100%;text-align:center;font-size:.85rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2rem}
.press-logo{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.8rem);color:var(--ink);opacity:.85;transition:opacity .3s}
.press-logo:hover{opacity:1}
.press-logo.sans{font-family:var(--sans);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,2rem)}
.press-badge{display:flex;flex-direction:column;align-items:center;gap:.3rem;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.press-badge b{font-family:var(--serif);font-size:1.6rem;letter-spacing:.05em;color:var(--ink)}
.press-badge .stars{color:var(--brass);letter-spacing:.14em;font-size:1.05rem}

/* ============================================================
   BOOK / FREE CLASS FORM — kept from v2 (pill multi-select)
   ============================================================ */
.book{background:linear-gradient(rgba(247,244,239,.72),rgba(247,244,239,.72)),url("../img/reformer-oak.jpg") center/cover no-repeat}
.book-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
@media(max-width:900px){.book-grid{grid-template-columns:1fr}}
.book-copy .script-kick{margin-bottom:.2rem}
.form-card{
  background:var(--white);border-radius:var(--r-lg);padding:clamp(1.8rem,3.5vw,3rem);
  border:1px solid rgba(232,131,58,.45);position:relative;
  box-shadow:0 0 0 1px rgba(232,131,58,.28), 0 0 30px 3px rgba(232,131,58,.32), var(--sh-soft);
  animation:formGlow 3.4s ease-in-out infinite;
}
@keyframes formGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(232,131,58,.28), 0 0 26px 2px rgba(232,131,58,.30), var(--sh-soft)}
  50%{box-shadow:0 0 0 1px rgba(232,131,58,.55), 0 0 52px 10px rgba(232,131,58,.55), 0 0 90px 20px rgba(232,131,58,.20), var(--sh-lift)}
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.form-card input[type=text],.form-card input[type=tel],.form-card input[type=email]{
  width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--ecru);border-radius:var(--r-sm);
  padding:.95em 1.1em;outline:none;transition:border-color .3s;
}
.form-card input:focus{border-color:var(--sage)}
.pill-label{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:1.2rem 0 .8rem;display:block}
.pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.4rem}
.pill{
  font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--ecru);border-radius:100px;
  padding:.6em 1.25em;cursor:pointer;transition:all .25s ease;user-select:none;
}
.pill:hover{border-color:var(--sage-mid)}
.pill.on{
  background:linear-gradient(120deg,var(--sage),var(--sage-deep));
  color:var(--cream);border-color:var(--sage);
  transform:scale(1.04);box-shadow:0 6px 18px rgba(95,115,80,.35);
}
.form-note{font-size:.78rem;color:var(--ink-soft);margin-top:.9rem;text-align:center}
.form-card .btn{width:100%;justify-content:center}

/* ============================================================
   EDITORIAL INTRO — astra "the experience"
   ============================================================ */
.editorial{background:var(--cream);text-align:center}
.editorial .big-serif{
  font-family:var(--serif);font-size:clamp(1.7rem,3.3vw,2.9rem);line-height:1.18;
  max-width:22ch;margin:0 auto 1.4rem;color:var(--ink);
}
.editorial .big-serif em{font-style:italic;color:var(--sage)}
.photo-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,2rem);
  max-width:920px;margin:clamp(2.5rem,5vw,4rem) auto 0;
}
.photo-pair img{
  border-radius:var(--r-lg);width:100%;height:clamp(260px,38vw,460px);object-fit:cover;
  border:6px solid var(--white);outline:2px solid var(--oak);
  box-shadow:var(--sh-soft);
}
.photo-pair img:first-child{transform:rotate(-2.2deg)}
.photo-pair img:last-child{transform:rotate(2.2deg) translateY(1.4rem)}
@media(max-width:640px){.photo-pair{grid-template-columns:1fr}.photo-pair img:last-child{transform:rotate(2.2deg)}}

/* three-up: image · video · image (video cropped/framed like the photos) */
.photo-pair.three{grid-template-columns:1fr 1fr 1fr;max-width:1080px}
.photo-pair.three .pair-video{
  border-radius:var(--r-lg);width:100%;height:clamp(260px,38vw,460px);overflow:hidden;
  border:6px solid var(--white);outline:2px solid var(--oak);box-shadow:var(--sh-lift);
  background:var(--sage-deep);transform:translateY(-.6rem);
}
.photo-pair.three .pair-video video{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){
  .photo-pair.three{grid-template-columns:1fr;max-width:460px}
  .photo-pair.three .pair-video{transform:none}
}

/* ---------- video showcase — "step inside the studio" ---------- */
.videoshow{background:var(--cream);text-align:center}
.video-frame{
  position:relative;margin:clamp(2.2rem,4vw,3.4rem) auto 0;max-width:1000px;
  border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:var(--sage-deep);
  border:8px solid var(--white);outline:2px solid var(--oak);box-shadow:var(--sh-lift);
}
.video-frame video{width:100%;height:100%;object-fit:cover;display:block}
.video-frame::after{ /* soft gradient so the caption reads */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(33,30,26,0) 55%,rgba(33,30,26,.42) 100%);
}
.video-frame .v-cap{
  position:absolute;left:0;right:0;bottom:clamp(1rem,2.4vw,1.8rem);z-index:2;
  color:var(--cream);font-size:.72rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;text-align:center;
}

/* ---------- how it works ---------- */
.steps{background:var(--ecru)}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.5vw,2rem);margin-top:clamp(2rem,4vw,3.5rem)}
@media(max-width:960px){.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.steps-grid{grid-template-columns:1fr}}
.step{background:var(--cream);border-radius:var(--r-md);padding:1.9rem 1.6rem;position:relative;transition:transform .35s ease,box-shadow .35s ease}
.step:hover{transform:translateY(-6px);box-shadow:var(--sh-lift)}
.step .num{font-family:var(--serif);font-size:2.6rem;color:var(--brass);line-height:1;display:block;margin-bottom:.9rem}
.step h3{margin-bottom:.6rem}
.step p{font-size:.92rem}

/* ============================================================
   METHOD — astra "About My Method" italic-list style
   ============================================================ */
.method{background:var(--cream)}
.method-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
@media(max-width:900px){.method-grid{grid-template-columns:1fr}}
.method-img{position:relative}
.method-img img{
  border-radius:220px 220px var(--r-lg) var(--r-lg);
  width:100%;height:clamp(380px,46vw,560px);object-fit:cover;
  border:8px solid var(--white);outline:2px solid var(--sage-mid);
  box-shadow:var(--sh-lift);
}
.method-img .float-script{
  position:absolute;bottom:-2.2rem;right:0;font-family:'Lato',var(--sans);
  font-size:.78rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--sage-deep);transform:none;z-index:2;
}
.method-item{padding:1.5rem 0;border-bottom:1px solid var(--ecru)}
.method-item:first-of-type{border-top:1px solid var(--ecru);margin-top:1.8rem}
.method-item h3{font-style:italic;color:var(--sage);margin-bottom:.45rem}
.method-item p{font-size:.95rem}

/* ============================================================
   SERVICES — astra "more ways I can help" cards
   ============================================================ */
.services{background:var(--paper)}
.services-head{text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem)}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}
.svc-card{
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--ecru);box-shadow:var(--sh-soft);
  display:flex;flex-direction:column;
  transition:transform .35s ease,box-shadow .35s ease;
}
.svc-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lift)}
.svc-card .svc-img{height:250px;overflow:hidden}
.svc-card .svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.svc-card:hover .svc-img img{transform:scale(1.06)}
.svc-body{padding:1.8rem 1.7rem 2rem;display:flex;flex-direction:column;flex:1}
.svc-body .svc-kick{font-size:.66rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);margin-bottom:.7rem}
.svc-body h3{margin-bottom:.7rem}
.svc-body p{font-size:.92rem;flex:1}
.svc-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.1rem 0 1.3rem}
.svc-tags span{font-size:.68rem;font-weight:600;letter-spacing:.08em;background:var(--ecru);border-radius:100px;padding:.4em 1em;color:var(--ink-soft)}

/* ============================================================
   OSI INTRO — astra "oh hey, I'm Astra"
   ============================================================ */
.osi-intro{background:#7E9A73;color:var(--cream);overflow:hidden}
.osi-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
@media(max-width:900px){.osi-grid{grid-template-columns:1fr}}
.osi-grid img{
  border-radius:var(--r-lg);width:100%;height:clamp(380px,44vw,540px);object-fit:cover;
  border:6px solid rgba(252,251,248,.15);box-shadow:0 24px 60px rgba(0,0,0,.35);
  transform:rotate(-1.5deg);
}
.osi-copy .script-kick{color:var(--brass-light)}
.osi-copy h2{color:var(--cream);margin-bottom:1.2rem}
.osi-copy h2 em{font-style:italic;color:var(--brass-light)}
.osi-copy p{color:rgba(252,251,248,.82);margin-bottom:1rem}
.osi-copy .btn{margin-top:1rem}

/* ---------- stats ---------- */
.stats{background:var(--ecru)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
@media(max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
.stat .val{font-family:var(--serif);font-size:clamp(2.6rem,5vw,4rem);color:var(--sage);line-height:1}
.stat .lbl{font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-top:.6rem;display:block}

/* ---------- testimonial ---------- */
.testi{background:var(--cream);text-align:center}
.testi blockquote{
  font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.25;
  max-width:26ch;margin:1.6rem auto;color:var(--ink);
}
.testi blockquote em{font-style:italic;color:var(--sage)}
.testi .attrib{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:1.6rem}
.testi .attrib .avatar{
  width:52px;height:52px;border-radius:50%;background:var(--sage);color:var(--cream);
  font-family:var(--serif);font-size:1.4rem;display:flex;align-items:center;justify-content:center;
}
.testi .attrib .who{text-align:left;font-size:.85rem;line-height:1.4}
.testi .attrib .who b{display:block;font-weight:700}
.testi .stars{color:var(--brass);font-size:1.1rem;letter-spacing:.2em}

/* ---------- gallery ---------- */
.gallery{background:var(--paper)}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.4rem);margin-top:clamp(2rem,4vw,3.2rem)}
@media(max-width:760px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
.gal-grid img{
  width:100%;height:clamp(200px,24vw,320px);object-fit:cover;border-radius:var(--r-md);
  border:4px solid var(--white);outline:1.5px solid var(--oak);
  transition:transform .4s ease,box-shadow .4s ease;
}
.gal-grid img:hover{transform:scale(1.03) rotate(-.6deg);box-shadow:var(--sh-lift)}
.gal-grid img:nth-child(even){transform:translateY(1.1rem)}
.gal-grid img:nth-child(even):hover{transform:translateY(1.1rem) scale(1.03) rotate(.6deg)}

/* ============================================================
   PRICING
   ============================================================ */
.pricing{background:var(--cream)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.3rem,2.6vw,2.2rem);margin-top:clamp(2.4rem,5vw,4rem);align-items:stretch}
@media(max-width:940px){.price-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}}
.price-card{
  background:var(--white);border-radius:var(--r-lg);padding:2.4rem 2rem;
  border:1.5px solid var(--ecru);display:flex;flex-direction:column;
  transition:transform .35s ease,box-shadow .35s ease;position:relative;
}
.price-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lift)}
.price-card.featured{
  background:#7E9A73;color:var(--cream);border-color:#7E9A73;
  transform:scale(1.03);
}
.price-card.featured:hover{transform:scale(1.03) translateY(-8px)}
.price-card.featured p,.price-card.featured li{color:rgba(252,251,248,.85)}
.price-card .tier{font-size:.68rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);margin-bottom:.8rem}
.price-card h3{font-size:1.6rem;margin-bottom:.4rem}
.price-card .amount{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;margin:.8rem 0 .3rem}
.price-card .amount small{font-size:1.1rem;font-family:var(--sans);font-weight:600;color:inherit;opacity:.7}
.price-card .per{font-size:.82rem;opacity:.75;margin-bottom:1.4rem}
.price-card ul{margin:0 0 1.8rem;flex:1}
.price-card li{font-size:.9rem;padding:.5em 0;border-bottom:1px dashed var(--ecru);line-height:1.45;color:var(--ink-soft)}
.price-card.featured li{border-bottom-color:rgba(252,251,248,.18)}
.price-card li::before{content:"✓  ";color:var(--brass)}
.badge-loved{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--brass);color:var(--black);font-size:.64rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;border-radius:100px;padding:.55em 1.4em;white-space:nowrap;
}
.price-foot{text-align:center;font-size:.8rem;color:var(--ink-soft);margin-top:2rem}

/* ============================================================
   CTA BAND — astra editorial close
   ============================================================ */
.cta-band{
  background:#7E9A73;
  color:var(--cream);text-align:center;position:relative;overflow:hidden;
}
.cta-band::before,.cta-band::after{
  content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;pointer-events:none;
}
.cta-band::before{width:420px;height:420px;background:var(--brass);top:-160px;left:-120px}
.cta-band::after{width:380px;height:380px;background:var(--sage-mid);bottom:-140px;right:-100px}
.cta-band .script-kick{color:var(--brass-light)}
.cta-band h2{color:var(--cream);max-width:18ch;margin:0 auto 1.2rem}
.cta-band h2 em{font-style:italic;color:var(--brass-light)}
.cta-band p{color:rgba(252,251,248,.8);max-width:44ch;margin:0 auto 2rem}
.cta-band .btn{background:var(--cream);color:var(--ink);position:relative;z-index:1}
.cta-band .btn:hover{background:var(--white)}

/* ---------- FAQ ---------- */
.faq{background:var(--paper)}
.faq-list{max-width:800px;margin:clamp(2rem,4vw,3rem) auto 0}
.faq-item{border-bottom:1px solid var(--ecru)}
.faq-q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.4rem);color:var(--ink);
  padding:1.4rem .2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq-q .plus{font-family:var(--sans);font-size:1.3rem;color:var(--sage);transition:transform .35s ease;flex-shrink:0}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s ease}
.faq-a p{padding:0 .2rem 1.4rem;font-size:.95rem;max-width:62ch}
.faq-a a{color:var(--sage);border-bottom:1px solid var(--sage-mid)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--black);color:rgba(252,251,248,.75);padding:clamp(3.5rem,7vw,5.5rem) 0 2rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,3.5rem)}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.footer-grid{grid-template-columns:1fr}}
.footer .f-brand .brand-main{font-family:var(--sans);font-weight:500;font-size:1.7rem;letter-spacing:.42em;color:var(--cream);display:block;margin-right:-.42em}
.footer .f-brand .brand-sub{display:flex;align-items:center;gap:.5em;margin:.35rem 0 1rem;max-width:260px}
.footer .f-brand .brand-sub::before{content:"";flex:1;height:1px;background:var(--brass)}
.footer .f-brand .brand-sub .script-tag{font-family:'Lato',var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-light);white-space:nowrap;transform:none}
.footer .f-brand p{font-size:.85rem;color:rgba(252,251,248,.6);max-width:30ch}
.footer h4{font-size:.7rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-light);margin-bottom:1.1rem}
.footer li{padding:.32em 0;font-size:.9rem}
.footer a:hover{color:var(--cream)}
.f-social{display:flex;gap:.7rem;margin-top:1.2rem}
.f-social a{
  width:38px;height:38px;border:1px solid rgba(252,251,248,.3);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;
  transition:background .3s,border-color .3s;
}
.f-social a:hover{background:var(--sage);border-color:var(--sage)}
.f-bottom{
  border-top:1px solid rgba(252,251,248,.12);margin-top:3rem;padding-top:1.6rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
  font-size:.75rem;color:rgba(252,251,248,.45);
}

/* ============================================================
   SUBPAGE HERO — editorial cream header
   ============================================================ */
.page-hero{
  margin-top:76px;
  background:linear-gradient(rgba(236,231,223,.88),rgba(236,231,223,.88)),url("../img/studio-real.jpg") center/cover no-repeat;
  padding:clamp(4rem,9vw,7rem) 0 clamp(3rem,7vw,5.5rem);
  text-align:center;position:relative;overflow:hidden;
}
.page-hero .crumb{font-size:.68rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:1.6rem}
.page-hero .crumb a:hover{color:var(--sage)}
.page-hero h1 em{font-style:italic;color:var(--sage)}
.page-hero .lede{margin:1.4rem auto 2rem;text-align:center}
.page-hero .script-kick{transform:rotate(-2deg)}

/* two-col content blocks on subpages */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split img{
  border-radius:var(--r-lg);width:100%;height:clamp(320px,40vw,500px);object-fit:cover;
  border:6px solid var(--white);outline:2px solid var(--oak);box-shadow:var(--sh-soft);
}
.split .body p{margin-bottom:1rem}

/* feature trio (◈ ❋ ♡ cards) */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.6vw,2.2rem);margin-top:clamp(2.2rem,4.5vw,3.6rem)}
@media(max-width:860px){.trio{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}}
.trio-card{
  background:var(--white);border-radius:var(--r-md);padding:2rem 1.7rem;
  border:1.5px solid var(--ecru);transition:transform .35s ease,box-shadow .35s ease;
}
.trio-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lift)}
.trio-card .glyph{
  width:46px;height:46px;border-radius:50%;background:var(--ecru);color:var(--sage);
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:1.1rem;
}
.trio-card h3{margin-bottom:.6rem}
.trio-card p{font-size:.92rem}

/* schedule / class rows (group classes) */
.class-row{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:1.4rem;align-items:center;
  background:var(--white);border:1.5px solid var(--ecru);border-radius:var(--r-md);
  padding:1.3rem 1.7rem;margin-bottom:1rem;transition:transform .3s ease,box-shadow .3s ease;
}
.class-row:hover{transform:translateX(6px);box-shadow:var(--sh-soft)}
@media(max-width:640px){.class-row{grid-template-columns:1fr;gap:.5rem;text-align:left}}
.class-row .lvl{font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;background:var(--ecru);border-radius:100px;padding:.5em 1.1em;color:var(--sage-deep);white-space:nowrap}
.class-row h3{font-size:1.3rem}
.class-row .dur{font-size:.82rem;color:var(--ink-soft);white-space:nowrap}

/* info cards (location) */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2rem}
@media(max-width:700px){.info-grid{grid-template-columns:1fr}}
.info-card{background:var(--white);border:1.5px solid var(--ecru);border-radius:var(--r-md);padding:1.8rem 1.6rem}
.info-card h3{font-style:italic;color:var(--sage);margin-bottom:.7rem;font-size:1.25rem}
.info-card p{font-size:.94rem}

/* ============================================================
   EFFECTS LAYER
   ============================================================ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.65,.3,1),transform .8s cubic-bezier(.2,.65,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.12s}.reveal-d2{transition-delay:.24s}.reveal-d3{transition-delay:.36s}

.progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--sage),var(--brass));
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   WordPress/Divi clone neutralizer — harmless on Netlify
   (these selectors only exist when hotlinked into the Divi site)
   ============================================================ */
#main-header,#top-header,#et-top-navigation,#main-footer,#footer-bottom,#et-secondary-nav,.et_slide_in_menu_container{display:none!important}
#sidebar,.et_pb_widget_area,#et-boc .et_pb_widget_area,.widget{display:none!important}
.et_pb_post .entry-title,.single .entry-title,.page .entry-title,.et_post_meta_wrapper,#breadcrumbs,.nav-single{display:none!important}
#page-container,#et-main-area,#main-content,#content-area{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
#main-content .container,.et_menu_container{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
#left-area{width:100%!important;max-width:none!important;padding:0!important;margin:0!important;float:none!important}
.et_right_sidebar #left-area,.et_left_sidebar #left-area{width:100%!important;float:none!important}
body.et_right_sidebar #main-content .container:before,body.et_left_sidebar #main-content .container:before{display:none!important}
article.et_pb_post,.page .entry-content,.et_pb_post{margin:0!important;padding:0!important;box-shadow:none!important}
/* Divi overrides my inherited heading colors + re-adds list bullets — neutralize both */
.footer h1,.footer h2,.footer h3,.footer h4,section h1,section h2,section h3,section h4,.price-card h3,.osi-copy h2,.cta-band h2{color:inherit}
#left-area h1,#left-area h2,#left-area h3,#left-area h4,#left-area h5,#left-area h6,.et_pb_text h1,.et_pb_text h2,.et_pb_text h3,.et_pb_text h4{color:inherit!important}
#left-area ul,#left-area ol,#left-area li,.entry-content ul,.entry-content li{list-style:none!important;margin:0;padding:0}
.price-card li,.footer li{padding:.5em 0}
.price-card.featured h3,.price-card.featured .tier,.price-card.featured .amount,.price-card.featured .per{color:var(--cream)!important}
.price-card.featured .tier{color:var(--brass)!important}
/* Divi wraps content in #content-area>#left-area>article>h1.main_title+.entry-content,
   and wpautop adds empty <p>. Hide the title, flatten wrappers, drop empty paragraphs. */
h1.main_title,.main_title,.et_pb_title_container,.et_post_meta_wrapper{display:none!important;height:0!important;margin:0!important;padding:0!important}
#main-content,#main-content .container,#content-area,#left-area,article.et_pb_post,article.page,.et_pb_post,.entry-content{
  background:transparent!important;padding:0!important;margin:0!important;border:0!important;box-shadow:none!important;width:100%!important;max-width:none!important;float:none!important}
.entry-content>p:empty,.entry-content>p:first-child:not(:has(*)):empty{display:none!important;margin:0!important;height:0!important}
.entry-content>p{margin:0}
.entry-content>br{display:none}
/* wpautop (WordPress) wraps bare <img>/<video> in <p>, corrupting grids/flex rows.
   display:contents makes those wrapper paragraphs layout-transparent so the media
   participates in the grid directly. Harmless on Netlify (no such <p> exist). */
.entry-content p:has(> img),.entry-content p:has(> video),.entry-content p:has(> .pair-video),.entry-content p:has(> a > img),.entry-content p:has(> source){display:contents!important}
.entry-content p:empty{display:none!important}
/* ---- wpautop artifact neutralizer (applies only on the WordPress clone) ----
   WordPress' wpautop wraps loose inline elements (spans, links, images, the
   <a> cards) in <p> and injects stray tags. These rules make every such
   artifact <p> layout-transparent so grids/flex rows see the real children. */
.entry-content .svc-grid>p,.entry-content .gal-grid>p,.entry-content .steps-grid>p,
.entry-content .stats-grid>p,.entry-content .price-grid>p,.entry-content .trio>p,
.entry-content .info-grid>p,.entry-content .footer-grid>p,.entry-content .marquee-track>p,
.entry-content .pills>p,.entry-content .svc-tags>p,.entry-content .f-social>p,
.entry-content .split>p,.entry-content .method-grid>p,.entry-content .osi-grid>p,
.entry-content .book-grid>p,.entry-content .photo-pair>p,.entry-content .faq-list>p,
.entry-content .attrib>p,.entry-content .services-head>p,.entry-content .price-card>p,
.entry-content .svc-body>p:has(>.svc-kick),.entry-content .svc-body>p:has(>.txt-link),
.entry-content .wrap>p:has(>.script-kick),.entry-content .wrap>p:has(>.kicker),
.entry-content .wrap>p:has(>.stars),.entry-content .wrap>p:has(>.press-note){display:contents!important}
.entry-content p:has(> .script-kick:only-child),.entry-content p:has(> .kicker:only-child),
.entry-content p:has(> .svc-kick:only-child),.entry-content p:has(> .txt-link:only-child),
.entry-content p:has(> .tier:only-child),.entry-content p:has(> .badge-loved:only-child),
.entry-content p:has(> .press-note:only-child),.entry-content p:has(> .press-logo),
.entry-content p:has(> .pill-label:only-child),.entry-content p:has(> .stars:only-child),
.entry-content p:has(> .crumb:only-child),.entry-content p:has(> .cta-kick:only-child),
.entry-content p:has(> .float-script:only-child){display:contents!important}
/* svc-card as block (wpautop-safe) with a stretched click target */
.svc-card{position:relative}
.svc-stretch{position:absolute;inset:0;z-index:2;border-radius:inherit;font-size:0}
.svc-card .svc-body,.svc-card .svc-img{position:relative;z-index:1}
/* Divi adds a blue left-border + padding on blockquotes — remove it on the clone */
.entry-content blockquote,.testi blockquote{border:0!important;padding-left:0!important;background:transparent!important}
/* Divi's base CSS adds padding-bottom:1em to every <p> (and padding to headings/li),
   which the Netlify build does not have. Zero it so paragraph spacing matches 1:1. */
.entry-content p{padding:0}
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{padding:0}
.entry-content li{padding-top:0;padding-bottom:0}
.entry-content blockquote{padding-top:0;padding-bottom:0}

/* ---- hero on nude (#F7D9BC): dark-on-light text, matching the logo lockup ---- */
.hero-badge,.hero-proof,.hero-cta .cta-kick{color:var(--ink)}
.hero-proof{opacity:.85}
.hero-proof .stars{color:var(--brass)}
.hero-wordmark{color:var(--ink)}
.hero-wordmark .hw-main{text-shadow:none}
.hero-wordmark .hw-script{color:var(--brass)}
.hero .btn-cream{background:var(--sage);color:var(--cream)}
.hero .btn-cream:hover{background:var(--sage-deep)}

/* ---- mouse-chasing light on the hero ---- */
.hero{--mx:50%;--my:38%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx) var(--my),
    rgba(255,255,255,.9) 0%, rgba(255,224,180,.5) 34%, rgba(255,224,180,0) 68%);
  mix-blend-mode:overlay;
  opacity:0;transition:opacity .5s ease;
}
.hero.lit::after{opacity:1}
@media (prefers-reduced-motion: reduce){.hero::after{display:none}}

/* press band: real magazine logos */
.press-img{height:46px;width:auto;display:block;opacity:.94}
.press-img.allure{height:40px}
.press-logo:hover .press-img{opacity:1}
.press-badge-img{height:104px;width:auto;display:block}
@media(max-width:760px){.press-img{height:34px}.press-img.allure{height:30px}.press-badge-img{height:74px}}

/* cta-band mouse-chasing light (replaces the second static blob) */
.cta-band{--mx:50%;--my:45%}
.cta-band::after{
  inset:0;width:auto;height:auto;top:0;left:0;right:0;bottom:0;border-radius:0;filter:none;
  background:radial-gradient(520px circle at var(--mx) var(--my),
    rgba(255,255,255,.7) 0%, rgba(255,241,210,.35) 36%, rgba(255,241,210,0) 68%);
  mix-blend-mode:overlay;opacity:0;transition:opacity .5s ease;
}
.cta-band.lit::after{opacity:1}
@media (prefers-reduced-motion: reduce){.cta-band::after{display:none}}

/* optical vertical centering: put PILATES caps + menu links on the bar's centerline,
   letting the script line tuck below (desktop split-nav only) */
@media(min-width:1161px){
  .brand{transform:translateY(9px)}
}

.class-row>p{display:contents!important}