/* PILATES | BARRE — Bakersfield */
:root{
  --white:#ffffff;
  --cream:#f2efe8;
  --beige:#ede3d6;
  --ink:#111111;
  --grey:#5a5a5a;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',system-ui,sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* type roles */
.display{
  font-family:'Archivo Black',sans-serif;
  text-transform:uppercase;
  line-height:.9;
  letter-spacing:-.01em;
  font-size:clamp(3.2rem,11vw,9.5rem);
}
.wordmark{
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.55em;
  text-indent:.55em; /* re-center */
}
.script{
  font-family:'Pinyon Script',cursive;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
}
.serif{font-family:'TeX Gyre Termes','Times New Roman',Times,serif}
.label{
  font-family:'TeX Gyre Termes','Times New Roman',Times,serif;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:clamp(1.2rem,1.6vw,1.6rem);
}

/* nav */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,3rem);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #eee;
}
.nav .brand{font-size:.95rem}
.nav ul{display:flex;gap:clamp(.9rem,2.5vw,2rem);list-style:none}
.nav ul a{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:500;
  padding:.35rem 0;border-bottom:2px solid transparent;
}
.nav ul a:hover,.nav ul a.active{border-bottom-color:var(--ink)}
.nav .menu-toggle{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer}
@media(max-width:860px){
  .nav ul{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:var(--white);padding:1rem 1.5rem 1.5rem;
    border-bottom:1px solid #eee;gap:1rem;
  }
  .nav ul.open{display:flex}
  .nav .menu-toggle{display:block}
}

/* layout helpers */
.section{padding:clamp(2.5rem,6vw,5rem) clamp(1rem,5vw,4rem)}
.section.tight{padding-top:clamp(1.75rem,3.5vw,2.5rem)}
.beige{background:var(--beige)}
.cream{background:var(--cream)}
.full-bleed{padding:0}
.center{text-align:center}
.measure{max-width:34ch}

/* home */
.hero-title{
  padding:clamp(2.5rem,6vw,4.5rem) 1rem;
  text-align:center;
  font-size:clamp(2.4rem,7vw,5.5rem);
  letter-spacing:.3em;
  white-space:nowrap;
}
.hero-title .bar{font-weight:300;padding:0 .35em}
.grid-3{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.8rem,3vw,2.5rem);
  padding:0 clamp(1rem,5vw,4rem) clamp(3rem,6vw,5rem);
}
.grid-3 img{width:100%;aspect-ratio:412/498;object-fit:cover;display:block}
@media(max-width:640px){.grid-3{grid-template-columns:1fr}}
.band{
  padding:clamp(3rem,7vw,5.5rem) clamp(1rem,3vw,3rem);
}
.band h2{
  text-align:center;
  margin:0 auto clamp(2rem,4vw,3rem);
  max-width:100%;
  white-space:nowrap;
  font-size:min(5.6vw,6rem);
}
@media(max-width:1366px){
  .band h2{white-space:normal;font-size:clamp(2rem,6.5vw,4.5rem)}
}
.band .pillars{
  display:flex;justify-content:space-between;gap:1rem;
  max-width:100%;margin:0;padding-left:clamp(1.5rem,4vw,4rem);padding-right:clamp(1.5rem,4vw,4rem);flex-wrap:wrap;
}
@media(max-width:560px){.band .pillars{flex-direction:column;align-items:center;gap:1.2rem}}

/* about / party story */
.story{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
  max-width:100%;margin:0;padding-left:clamp(1.5rem,4vw,4rem);padding-right:clamp(1.5rem,4vw,4rem);
}
@media(max-width:760px){.story{grid-template-columns:1fr}}
.story h1{margin:clamp(1rem,3vw,2rem) 0}
.story .lede{
  font-family:'TeX Gyre Termes','Times New Roman',Times,serif;
  font-size:clamp(1.25rem,2.4vw,1.8rem);
  line-height:1.35;
  text-align:right;
}
@media(max-width:760px){.story .lede{text-align:left}}
.collage{display:grid;gap:1.2rem}
.cols-3{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  max-width:100%;margin:0;padding:0 clamp(1.5rem,4vw,4rem);
}
@media(max-width:760px){.cols-3{grid-template-columns:1fr}}
.cols-3 h3{
  font-size:clamp(1.3rem,1.9vw,1.9rem);
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  letter-spacing:.02em;margin:1rem 0 .5rem;
}
.cols-3 p{font-family:'TeX Gyre Termes','Times New Roman',Times,serif;font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.45;color:#1c1c1c}

/* classes */
.class-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2.5vw,2rem);
  max-width:100%;margin:0;padding-left:clamp(1.5rem,4vw,4rem);padding-right:clamp(1.5rem,4vw,4rem);
}
@media(max-width:900px){.class-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.class-grid{grid-template-columns:1fr}}
.class-card{text-align:center}
.class-card h3{
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:clamp(1.4rem,2vw,2rem);text-align:center;letter-spacing:.02em;
  height:2.6em;margin:0 0 .6rem;
  display:flex;align-items:flex-end;justify-content:center;line-height:1.05;
}
.class-card p{font-size:.95rem;color:var(--grey);margin-bottom:.9rem}
.class-card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}

.widget-slot{
  border:1.5px dashed #b9a98f;
  background:rgba(255,255,255,.55);
  border-radius:6px;
  padding:3.5rem 1.5rem;
  text-align:center;
  color:#8a7a5f;
  max-width:1200px;margin:0 auto;
  font-size:.9rem;letter-spacing:.06em;
}

/* pricing */
.pricing h2{margin-bottom:.5rem}
.pricing .kicker{
  font-size:.95rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:2rem;
}
.price-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.5vw,1.8rem);
  max-width:100%;
}
@media(max-width:900px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.price-grid{grid-template-columns:1fr}}
.price-card{
  background:var(--white);
  display:flex;flex-direction:column;
  min-height:220px;
}
.price-card header{
  padding:1rem 1.2rem;border-bottom:1px solid var(--beige);
  font-family:'Archivo Black',sans-serif;font-size:1.05rem;text-transform:uppercase;
}
.price-card ul{
  list-style:disc;padding:1.1rem 1.4rem 1.1rem 2.4rem;
  font-size:.98rem;color:var(--grey);line-height:1.7;flex:1;
}
.price-card .spacer{flex:1}
.price-card .price{
  padding:1.1rem 1.4rem;border-top:1px solid var(--beige);
  font-family:'Archivo Black',sans-serif;font-size:1.4rem;
}

/* split sections */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,4rem);align-items:center;
  max-width:100%;margin:0;padding-left:clamp(1.5rem,4vw,4rem);padding-right:clamp(1.5rem,4vw,4rem);
}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.split .script-kicker{
  font-family:'Pinyon Script',cursive;font-size:clamp(1.6rem,3vw,2.2rem);
  display:block;margin-bottom:-.4rem;
}

/* contact form (static fallback) */
.contact-card{
  background:var(--white);border-radius:14px;padding:1.6rem;
  box-shadow:0 6px 30px rgba(0,0,0,.06);
}
.contact-card label{display:block;font-size:.72rem;margin:.9rem 0 .3rem;letter-spacing:.05em}
.contact-card input,.contact-card textarea{
  width:100%;padding:.6rem .7rem;border:1px solid #ddd;border-radius:6px;
  font-family:inherit;font-size:.85rem;
}
.contact-card button{
  margin-top:1.2rem;width:100%;padding:.8rem;
  background:var(--ink);color:var(--white);border:0;border-radius:999px;
  font-family:inherit;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;
}
.contact-card button:hover{background:#333}

/* party */
.pkg-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,3vw,2.5rem);max-width:100%;
}
@media(max-width:760px){.pkg-grid{grid-template-columns:1fr}}
.pkg-grid h3{
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:.9rem;letter-spacing:.05em;margin:1rem 0 .5rem;
}
.pkg-grid p{font-size:1.05rem;line-height:1.6;color:var(--grey)}

/* training page */
.insta{
  padding:clamp(3.5rem,8vw,6rem) clamp(1.5rem,3vw,2.5rem);
}
.insta .script{font-size:clamp(2.4rem,4.5vw,3.6rem)}
.insta h2{margin-top:-.3rem}
.insta .apps{margin-top:clamp(2.5rem,6vw,4rem);text-align:right}
.badge{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--ink);color:var(--white);
  padding:.9rem 1.7rem;border-radius:10px;margin-left:.7rem;margin-top:.7rem;
  font-size:1.05rem;letter-spacing:.04em;
}
.badge small{display:block;font-size:.8rem;opacity:.75;letter-spacing:.06em}
.photo-hero{position:relative}
.photo-hero img{max-height:78vh;object-fit:cover}
.photo-hero .overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;padding:clamp(1.5rem,6vw,5rem);gap:.4rem;
}
.photo-hero .overlay .script{font-size:clamp(2.2rem,5.5vw,4rem);text-align:center}
.photo-hero .overlay .sub{text-align:center;font-size:clamp(.95rem,2vw,1.3rem);font-weight:300}

/* footer */
.footer-block{background:var(--beige);padding:clamp(2.5rem,6vw,5rem) clamp(1rem,5vw,4rem)}
.footer-inner{
  display:grid;grid-template-columns:48% 8% 44%;gap:0;
  max-width:100%;margin:0;padding-left:clamp(1.5rem,4vw,4rem);padding-right:clamp(1.5rem,4vw,4rem);align-items:start;
}
.footer-inner > img{grid-column:1}
.footer-contact{grid-column:3}
.footer-inner > img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
@media(max-width:700px){.footer-inner{grid-template-columns:1fr}}
.footer-contact{
  text-align:center;
  font-family:'TeX Gyre Termes','Times New Roman',Times,serif;
  font-size:clamp(1.9rem,2.6vw,2.6rem);
  line-height:1.6;color:#1c1c1c;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:clamp(3rem,7vw,5rem) clamp(2rem,5vw,4rem);
}
.footer-contact p{margin:0 0 1.6rem}
.footer-contact a{color:#1c1c1c;text-decoration:none}
.footer-brand{
  margin-top:clamp(2rem,5vw,4rem);
  font-family:'Visby','Visby Round','Poppins','Century Gothic',sans-serif;font-weight:400;
  letter-spacing:.1em;font-size:clamp(1.7rem,2.5vw,2.7rem);
  white-space:nowrap;
}
.footer-brand .bar{color:#8ab84a}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* one-page: offset anchors so the sticky nav doesn't cover headings */
section[id],span#top{scroll-margin-top:80px}

/* ============================================================
   RESPONSIVE REFINEMENTS — tablet + mobile
   ============================================================ */

/* ---- Tablet landscape / small laptop (max 1024px) ---- */
@media(max-width:1024px){
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .class-grid{grid-template-columns:repeat(3,1fr)}
}

/* ---- Tablet portrait (max 900px) ---- */
@media(max-width:900px){
  .cols-3{grid-template-columns:repeat(3,1fr);gap:1.2rem}
  .pkg-grid{grid-template-columns:repeat(3,1fr);gap:1.2rem}
  .grid-3{grid-template-columns:repeat(3,1fr);gap:1rem}
  .cols-3 p,.pkg-grid p{font-size:.95rem}
  /* two-column story/split get tighter but stay side-by-side */
  .story,.split{gap:clamp(1rem,3vw,2rem)}
  .story .lede{font-size:clamp(1.1rem,2.6vw,1.5rem)}
}

/* ---- Narrow tablet / large phone landscape (max 760px) ---- */
@media(max-width:760px){
  .cols-3,.pkg-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .grid-3{grid-template-columns:repeat(3,1fr);gap:.7rem}
  .class-grid{grid-template-columns:repeat(2,1fr)}
  /* stacked story: images no longer offset to one side */
  .story img{max-width:100% !important;margin-left:0 !important}
  .story .lede{text-align:left;margin-top:1.2rem}
  .split img{max-width:100%}
  .insta .apps{text-align:left}
  .badge{margin-left:0;margin-right:.6rem}
}

/* ---- Phones (max 560px) ---- */
@media(max-width:560px){
  .cols-3,.pkg-grid{grid-template-columns:1fr;gap:1.8rem}
  .grid-3{grid-template-columns:1fr;gap:1rem}
  .class-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
  .section{padding-left:1.1rem;padding-right:1.1rem}
  .hero-title{letter-spacing:.3em;text-indent:.3em}
  .nav .brand{letter-spacing:.3em;text-indent:.3em;font-size:.8rem}
  .price-card{min-height:0}
  .footer-contact{line-height:1.9}
  /* full-bleed photos shouldn't eat the whole screen on a phone */
  .full-bleed img{max-height:60vh;object-fit:cover}
}

/* ---- Small phones (max 400px) ---- */
@media(max-width:400px){
  .class-grid{grid-template-columns:1fr}
  .hero-title{letter-spacing:.18em;text-indent:.18em}
  .nav .brand{letter-spacing:.2em;text-indent:.2em;font-size:.72rem}
  .display{font-size:clamp(1.9rem,8vw,2.4rem)}
}

/* ---- Touch targets & tap comfort ---- */
@media(hover:none){
  .nav ul a{padding:.6rem 0}
  .contact-card button{padding:.95rem}
}

/* prevent any accidental horizontal scroll on phones */
html{overflow-x:hidden}
body{max-width:100%;overflow-x:clip}

/* ============================================================
   CONTACT — geometry measured from Classes.png (1366px wide):
     left pad 2.6% | card 49.2% | gutter 6.9% | photo 38.6%
     heading cap 9.8% of section | photo aspect 0.743
   ============================================================ */
#contact.section{padding:0}
.contact-wrap{
  display:grid;
  grid-template-columns:44% 8% 48%;
  align-items:start;
  max-width:100%;margin:0;
  padding:clamp(1.5rem,4vw,3.4rem) clamp(1.5rem,4vw,4rem) clamp(1.5rem,3vw,2.5rem);
}
.contact-left{
  grid-column:1;
  padding-left:2.6%;
  padding-right:0;
}
.contact-title{
  font-family:'Archivo Black',sans-serif;
  text-transform:uppercase;
  line-height:.85;
  letter-spacing:-.035em;
  /* cap height 77px on a 1366px page => ~7.8vw font-size */
  font-size:clamp(2.6rem,7.8vw,6.4rem);
  margin:0 0 .35em;
}
.contact-wrap > img{
  grid-column:3;
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  margin-top:.6rem;
}
/* Walla slot matches the form card: full column width, tall */
.contact-slot{
  background:#fff;
  border-radius:12px;
  border:1.5px dashed #c9bba4;
  padding:clamp(4rem,11vw,8.5rem) 1.5rem;
  max-width:none;width:100%;
  box-shadow:0 4px 22px rgba(0,0,0,.05);
}
@media(max-width:860px){
  .contact-wrap{
    grid-template-columns:1fr;
    padding:clamp(2rem,6vw,3rem) 1.25rem;
    gap:1.75rem;
  }
  .contact-left{grid-column:1;padding-left:0}
  .contact-wrap > img{grid-column:1;max-height:420px;object-fit:cover;margin-top:0}
  .contact-slot{padding:clamp(3rem,9vw,5rem) 1.25rem}
}

/* ============================================================
   RECOVERY SUITE — measured from Classes.png:
     photo 2.6%..41.1% | gutter | heading starts 47.5%
   ============================================================ */
#recovery .split{
  grid-template-columns:41.1% 6.4% 52.5%;
  align-items:center;
  max-width:100%;
  gap:0;
  padding-left:clamp(1.5rem,4vw,4rem);padding-right:clamp(1.5rem,4vw,4rem);
}
#recovery .split > img{
  grid-column:1;
  margin-left:2.6%;
  width:100%;
  height:auto;
}
#recovery .split > div{grid-column:3}
#recovery .script-kicker{font-size:clamp(1.4rem,2.6vw,2.1rem)}
#recovery .display{font-size:clamp(2.6rem,6.5vw,5.5rem);line-height:.92}
@media(max-width:760px){
  #recovery .split{grid-template-columns:1fr;gap:1.5rem}
  #recovery .split > img{grid-column:1;margin-left:0}
  #recovery .split > div{grid-column:1}
}

/* Instagram feed (Behold widget) container */
.insta-feed{
  max-width:2100px;
  margin:1.5rem auto 0;
  width:100%;
  min-height:0;
}
.insta-feed behold-widget{
  display:block;
  width:100%;
}


/* ============================================================
   ABOUT — new design (hero image + story + founder + team)
   ============================================================ */

/* shared kicker */
.story-text .kicker,.founder-copy .kicker{
  display:block;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.9rem;
  font-weight:700;
  margin-bottom:1.1rem;
}

/* --- Our Story: text left / studio photo right --- */
.story-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
}
.story-text{
  padding:clamp(2.5rem,6vw,5.5rem) clamp(1.75rem,5vw,5rem);
  display:flex;flex-direction:column;justify-content:flex-start;
}
.story-text .kicker{color:#3a2e1f}
.story-head{
  font-family:'TeX Gyre Termes','Times New Roman',Times,serif;
  font-weight:500;text-transform:none;letter-spacing:0;
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.08;margin:0 0 1.5rem;color:#1c1c1c;
}
.story-text p{
  font-family:'TeX Gyre Termes','Times New Roman',Times,serif;
  font-size:clamp(1.5rem,2.7vw,2.4rem);
  line-height:1.5;margin:0 0 1.4rem;max-width:34ch;color:#1c1c1c;
}
.story-text p:last-child{margin-bottom:0}
.story-tagline{
  font-family:'TeX Gyre Termes','Times New Roman',Times,serif;
  font-weight:700;
  font-size:clamp(1.9rem,2.8vw,2.6rem) !important;
  margin-top:1.8rem !important;
  color:#1c1c1c;
}
.story-block > img{width:100%;height:100%;object-fit:cover;display:block}

/* Our Story specifics: smaller heading, wider text, smaller photo */
#about.section,#classes.section,#schedule.section,#pricing.section,#parties.section,.section.beige{padding-left:0;padding-right:0}
.section.cream.tight{padding-left:0;padding-right:0}
#about .story-block{grid-template-columns:1.4fr 1fr;align-items:start;gap:clamp(2rem,4vw,4rem);max-width:100%;margin:0;padding:0 clamp(1.5rem,4vw,4rem) 0 clamp(1.5rem,4vw,4rem)}
#about .story-block .display{font-size:clamp(2.4rem,6vw,5rem)}
#about .story-text{padding:0}
#about .story-text p{max-width:none;text-align:justify;font-size:clamp(1.4rem,2.3vw,2.2rem);line-height:1.5;margin-bottom:clamp(2rem,4vw,3rem)}
#about .story-block > img{width:100%;object-fit:cover;display:block}

/* --- Meet the Founder: photo left / TAN copy box right --- */
.founder{
  display:grid;grid-template-columns:0.9fr 1.1fr;align-items:stretch;
}
.founder > img{width:100%;height:100%;min-height:100%;object-fit:cover;object-position:center 30%;display:block}
.founder-copy{
  background:var(--beige);            /* site beige */
  color:#2b2116;
  padding:clamp(2rem,5vw,4.5rem) clamp(1.75rem,4vw,4rem);
  display:flex;flex-direction:column;justify-content:center;
}
.founder-copy .kicker{color:#5a4a35}
.founder-name{
  font-family:'TeX Gyre Termes','Times New Roman',Times,serif;
  font-weight:500;text-transform:none;letter-spacing:0;
  font-size:clamp(2.1rem,4vw,3.2rem);line-height:1.05;
  margin:0 0 .6rem;color:#241c12;
}
.founder-role{
  font-weight:700;font-size:clamp(.85rem,1.4vw,1rem);
  margin:0 0 1.5rem;color:#3a2e1f;
}
.founder-copy p{
  font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.68;
  margin:0 0 1.1rem;max-width:62ch;
}
.founder-copy p:last-child{margin-bottom:0}
.founder-standout{
  font-weight:700;
  font-style:italic;
  font-size:clamp(1rem,1.5vw,1.15rem) !important;
  margin:1.4rem 0 !important;
  color:#241c12;
}

/* --- Team: photo left / closing tagline right --- */
.team-block{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  background:#f4f2ee;
}
.team-block > img{width:100%;height:100%;object-fit:cover;display:block}
.team-copy{
  padding:clamp(2.5rem,6vw,5rem) clamp(1.75rem,5vw,5rem);
  display:flex;flex-direction:column;justify-content:center;
}
.team-head{
  font-family:'TeX Gyre Termes','Times New Roman',Times,serif;
  font-weight:500;text-transform:none;letter-spacing:0;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.25;
  margin:0 0 1.5rem;color:#1c1c1c;
}
.team-rule{display:block;width:60px;height:1.5px;background:#8a7a5f;margin-bottom:1.5rem}
.team-copy p{font-size:clamp(1.02rem,1.35vw,1.18rem);color:#444;margin:0 0 2rem}
.team-cta{
  align-self:flex-start;
  background:#1c1c1c;color:#fff;text-decoration:none;
  text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700;
  padding:1rem 2.25rem;border-radius:2px;transition:background .2s;
}
.team-cta:hover{background:#000}

@media(max-width:760px){
  .story-block,.founder,.team-block{grid-template-columns:1fr}
  .story-block > img,.founder > img,.team-block > img{aspect-ratio:4/3;height:auto}
  /* keep photo above text on mobile for story & team; founder photo already first */
  .story-block > img{order:-1}
}

/* ============================================================
   REBUILD ADDITIONS — new mockup sections
   ============================================================ */

/* Our Story / neon blocks share .story-block; add reverse variant */
.story-block.reverse{grid-template-columns:1fr 1.4fr;align-items:start;gap:clamp(2rem,4vw,4rem);max-width:100%;margin:0;padding:0 clamp(1.5rem,4vw,4rem) 0 clamp(1.5rem,4vw,4rem)}
.story-block.reverse > img{order:-1;width:100%;object-fit:cover;display:block}
.story-block.reverse .story-text p{max-width:none;text-align:left;font-size:clamp(1.4rem,2.3vw,2.2rem);line-height:1.5;margin-bottom:clamp(2rem,4vw,3rem)}

/* Classes: heading + intro paragraph row */
.section-head{
  max-width:100%;margin:0 0 clamp(1.5rem,3vw,2.5rem);padding:0 clamp(1.5rem,4vw,4rem);
  display:block;
}
.section-head .display{margin-bottom:clamp(1rem,2vw,1.5rem)}
.section-intro{
  font-family:'TeX Gyre Termes','Times New Roman',Times,serif;font-size:clamp(1.3rem,1.7vw,1.6rem);line-height:1.4;color:#1c1c1c;max-width:52ch;
}
/* class cards: title above photo, no description */
.class-card img{aspect-ratio:3/4;object-fit:cover;width:100%}

/* Party intro */
.party-intro{max-width:100%;margin:0;padding:0 clamp(1.5rem,4vw,4rem)}
.party-lede{font-family:'TeX Gyre Termes','Times New Roman',Times,serif;font-weight:700;font-size:clamp(1.7rem,2.4vw,2.3rem);margin:0 0 1.5rem;color:#1c1c1c}
.party-intro p{font-family:'TeX Gyre Termes','Times New Roman',Times,serif;font-size:clamp(1.7rem,2.3vw,2.2rem);line-height:1.45;max-width:34ch;color:#1c1c1c}

/* Party packages: two cards + concierge note */
.party-packages{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
}
.party-packages .pkg img{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:1rem}
.party-packages .pkg h3{
  font-family:'TeX Gyre Termes','Times New Roman',Times,serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(1.2rem,1.6vw,1.5rem);margin-bottom:.7rem;
}
.party-packages .pkg p{font-family:'TeX Gyre Termes','Times New Roman',Times,serif;font-size:clamp(1.2rem,1.5vw,1.45rem);line-height:1.4;color:#1c1c1c}
.pkg-note{align-self:center}
.pkg-note p{font-family:'TeX Gyre Termes','Times New Roman',Times,serif;font-size:clamp(1.3rem,1.7vw,1.6rem);line-height:1.5;color:#1c1c1c;text-align:center}
.pkg-note strong{font-weight:700}

/* Ready to celebrate block */
.celebrate{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);
  align-items:center;max-width:100%;margin:0;padding-left:clamp(1.5rem,4vw,4rem);padding-right:clamp(1.5rem,4vw,4rem);
}
.celebrate > img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.celebrate-copy .kicker{
  display:block;font-family:'TeX Gyre Termes','Times New Roman',Times,serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.15;margin-bottom:1.5rem;color:#1c1c1c;
}
.celebrate-copy p{font-family:'TeX Gyre Termes','Times New Roman',Times,serif;font-size:clamp(1.4rem,1.8vw,1.75rem);line-height:1.55;color:#1c1c1c;margin:0 0 2rem;max-width:38ch;text-align:left}
.cta{
  display:inline-block;background:#1c1c1c;color:#fff;text-decoration:none;
  text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;font-weight:700;
  padding:1.1rem 2.5rem;transition:background .2s;
}
.cta:hover{background:#000}

@media(max-width:860px){
  .section-head{grid-template-columns:1fr;gap:1rem}
  .story-block.reverse > img{order:-1}
}
@media(max-width:760px){
  .party-packages{grid-template-columns:1fr}
  .celebrate{grid-template-columns:1fr}
  .celebrate > img{aspect-ratio:4/3}
}

/* footer privacy policy link */
.footer-legal{margin-top:1.4rem !important;font-size:.95rem}
.footer-legal a{color:#1c1c1c;text-decoration:underline;letter-spacing:.03em}
.footer-legal a:hover{opacity:.6}

/* privacy link overlaid on the training photo, bottom-right */
.training-photo{position:relative}
.training-photo .training-privacy{
  position:absolute;right:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vw,2rem);
  color:#1c1c1c;text-decoration:underline;
  font-family:'Archivo',sans-serif;font-weight:500;letter-spacing:.04em;
  font-size:clamp(.8rem,1.1vw,1rem);
}
.training-photo .training-privacy:hover{opacity:.6}

/* ============================================================
   MOBILE / TABLET RESPONSIVE FIXES (added)
   ============================================================ */
@media(max-width:760px){
  /* Story blocks: stack photo on top, text below, full width */
  #about .story-block,
  .story-block.reverse{
    grid-template-columns:1fr !important;
    padding:0 clamp(1.25rem,5vw,2rem) !important;
    gap:1.5rem !important;
  }
  #about .story-block > img,
  .story-block.reverse > img{
    order:-1;
    height:auto !important;        /* override JS-set pixel height */
    aspect-ratio:4/3;
    width:100%;
  }
  #about .story-text p,
  .story-block.reverse .story-text p{
    text-align:left;
    font-size:clamp(1.05rem,4.5vw,1.25rem);
    max-width:none;
    padding-left:0;margin-left:0;
  }
  .story-block.reverse .story-text,
  #about .story-text{padding:0 !important;margin:0 !important}
  #about .story-block .display,
  .story-block.reverse .display{font-size:clamp(2.2rem,11vw,3.2rem) !important}
  .story-tagline{font-size:clamp(1.2rem,5vw,1.5rem) !important}

  /* Hero wordmark: allow wrap / shrink so it doesn't clip */
  .hero-title{
    white-space:normal !important;
    letter-spacing:.15em !important;
    font-size:clamp(1.5rem,7vw,2.4rem) !important;
  }

  /* Our Way: single column, comfortable text */
  .cols-3{grid-template-columns:1fr !important;gap:2rem !important;padding:0 clamp(1.25rem,5vw,2rem) !important}
  .cols-3 p{font-size:clamp(1.05rem,4.5vw,1.2rem)}

  /* Classes: 2 across on phone */
  .class-grid{grid-template-columns:repeat(2,1fr) !important;padding:0 clamp(1.25rem,5vw,2rem)}

  /* Recovery + Contact: stack */
  #recovery .split{grid-template-columns:1fr !important;padding:0 clamp(1.25rem,5vw,2rem) !important;gap:1.5rem}
  #recovery .split > img{grid-column:1 !important;margin-left:0 !important}
  #recovery .split > div{grid-column:1 !important}
  .contact-wrap{grid-template-columns:1fr !important;padding:clamp(2rem,6vw,3rem) clamp(1.25rem,5vw,2rem) !important;gap:1.5rem}
  .contact-wrap > img{grid-column:1 !important}
  .contact-left{grid-column:1 !important}

  /* Footer / address block: stack, reset the desktop right-shift */
  .footer-inner{grid-template-columns:1fr !important}
  .footer-contact{
    grid-column:1 !important;
    transform:none !important;
    padding:clamp(2rem,7vw,3rem) clamp(1.25rem,5vw,2rem) !important;
    font-size:clamp(1.15rem,5vw,1.4rem) !important;
    align-items:center !important;
  }
  .footer-inner > img{grid-column:1 !important}

  /* Party packages: stack */
  .party-packages{grid-template-columns:1fr !important}
  .celebrate{grid-template-columns:1fr !important;padding:0 clamp(1.25rem,5vw,2rem)}

  /* Section headings scale down on phone */
  .display{font-size:clamp(2.2rem,11vw,3.4rem) !important}
  .section-head .display,
  #schedule .display,#pricing .display,
  .party-intro .display,.insta .display,
  .section.cream.tight .display{font-size:clamp(2.2rem,11vw,3.4rem) !important}
  .band h2{font-size:clamp(1.6rem,8vw,2.6rem) !important;transform:none !important}

  /* nav: keep hamburger menu (already handled at 860px) */
}

/* very small phones */
@media(max-width:430px){
  .class-grid{grid-template-columns:1fr !important}
  .band .pillars{flex-direction:column;gap:.8rem;text-align:center}
}

/* tablet: hero wordmark shouldn't clip up to ~1024px */
@media(max-width:1024px){
  .hero-title{white-space:normal;letter-spacing:.2em;font-size:clamp(1.8rem,5vw,3rem)}
}

/* studio band heading: allow wrap on phone so it doesn't clip */
@media(max-width:760px){
  .band h2{white-space:normal !important}
}

/* prevent accessibility widget from adding an extra scrollbar */
.elfsight-app-7ee8fb9a-c07f-4c73-b5a3-0e17cc7a58dc{
  position:fixed !important;
  bottom:0;right:0;
  width:auto;height:auto;
  z-index:99999;
}