/* ============================================
   BODYKULT — Tokens
============================================ */
:root{
  --cream-50:  #FBF9F4;
  --cream-100: #F2ECDF;
  --cream-200: #E9E1CE;
  --navy:      #35435B;
  --navy-700:  #283245;
  --navy-mute: #5C6A81;
  --taupe:     #AEA193;
  --brown:     #6A584C;
  --mist:      #CFD0CC;

  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  --max: 1180px;
  --pad: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body{
  margin:0;
  background: var(--cream-50);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

.grain{
  pointer-events: none;
  position: fixed; inset:0; z-index: 999;
  opacity: .025; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================
   Typography
============================================ */
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .4em;
  color: var(--navy);
  letter-spacing: -.01em;
}
h2{ font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 600; }
h3{ font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; }
h4{ font-size: 1.15rem; font-weight: 600; }
p{ margin: 0 0 1em; }

.eyebrow{
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brown);
  margin: 0 0 .9em;
}
.eyebrow-light{ color: var(--cream-100); }

.section-head{
  max-width: 640px;
  margin: 0 auto 3.2rem;
  text-align: center;
}
.section-head h2{ margin-bottom: .5rem; }
.section-sub{ color: var(--navy-mute); font-size: 1.05rem; margin:0; }
.section-sub a{ color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }
.section-sub a:hover{ color: var(--navy); }

.pull-quote{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--brown);
  border-left: 2px solid var(--taupe);
  padding-left: 1.1rem;
  margin-top: 1.6rem;
}

/* ============================================
   Buttons
============================================ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .95em 1.9em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .35s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn-sm{ padding: .7em 1.4em; font-size: .85rem; }

.btn-primary{ background: var(--navy); color: var(--cream-50); }
.btn-primary:hover{ background: var(--navy-700); }

.btn-primary-light{ background: var(--cream-50); color: var(--navy); }
.btn-primary-light:hover{ background: #fff; }

.btn-ghost{ background: transparent; color: var(--cream-50); border-color: rgba(251,249,244,.55); }
.btn-ghost:hover{ background: rgba(251,249,244,.12); border-color: var(--cream-50); }
.btn-ghost-dark{ background: transparent; color: var(--navy); border-color: rgba(53,67,91,.35); }
.btn-ghost-dark:hover{ background: rgba(53,67,91,.06); border-color: var(--navy); }

/* ============================================
   Nav
============================================ */
.nav{
  position: sticky; top:0; z-index: 500;
  background: rgba(251,249,244,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(53,67,91,.08);
}
.nav-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--pad);
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav-brand{
  display:flex; flex-direction:column; align-items:flex-start; gap:.3rem;
  flex-shrink:0;
}
.nav-brand-row{ display:flex; align-items:center; gap:.6rem; }
.nav-mark{ width: 24px; height: auto; }
.nav-word{ width: 118px; height: auto; }
.nav-location{
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--taupe);
}

.nav-links{
  display:flex; gap: clamp(1.1rem, 2.2vw, 2.1rem);
  margin: 0 auto;
}
.nav-links a{
  font-size: .92rem; font-weight: 500;
  color: var(--navy-mute);
  transition: color .2s var(--ease);
  position: relative;
}
.nav-links a:hover{ color: var(--navy); }
.nav-links a.nav-link-active{ color: var(--navy); font-weight: 600; }
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background: var(--brown); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-links a.nav-link-active::after{ transform: scaleX(1); }
.nav-links a:hover::after{ transform: scaleX(1); }

.nav-actions{ display:flex; align-items:center; gap: 1.1rem; flex-shrink:0; }
.nav-ig{ color: var(--navy); opacity:.75; transition: opacity .2s; }
.nav-ig:hover{ opacity: 1; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; min-width:34px; flex-shrink:0;
  background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{ display:block; height:2px; background:var(--navy); border-radius:2px; transition: transform .3s var(--ease), opacity .3s; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ============================================
   Hero
============================================ */
.hero{
  position: relative;
  height: 100svh;
  min-height: 560px;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color: var(--cream-50);
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter: saturate(1.05) brightness(1.02);
}
.hero-photo{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter: saturate(1.05) brightness(.92);
  animation: heroPhotoZoom 22s ease-in-out infinite alternate;
}
@keyframes heroPhotoZoom{
  from{ transform: scale(1); }
  to{ transform: scale(1.06); }
}
.training-hero{ min-height: 620px; }
.training-hero-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.training-hero-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  color: var(--cream-50);
  line-height: 1.1;
  margin: .5rem 0 .6rem;
  letter-spacing: -.01em;
}
.training-hero-sub{
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--cream-100);
  max-width: 34em;
  margin: 0 auto 1.8rem;
}
.training-cta{
  display:flex;
  gap: .9rem;
  justify-content:center;
  flex-wrap: wrap;
}
.training-coaching-row{
  max-width: var(--max);
  margin: 3.5rem auto 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.training-coaching-row img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio: 4/3;
  border-radius: 0;
}
.instructor-strip{ grid-template-columns: repeat(3, 1fr); }
.instructor-strip img{ aspect-ratio: 4/5; }

.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(40,50,69,.28) 0%, rgba(40,50,69,.06) 32%, rgba(40,50,69,.55) 100%);
}
.hero-content{
  position:relative; z-index:2;
  max-width: var(--max);
  width:100%;
  margin: 0 auto;
  padding: 0 var(--pad) 6.5rem;
  animation: heroContentRise 1.1s var(--ease) .2s both;
}
@keyframes heroContentRise{
  from{ opacity:0; transform: translateY(20px); }
  to{ opacity:1; transform:none; }
}
.hero-content-bottom{
  display:flex;
  justify-content:center;
  padding-bottom: 4.5rem;
}
.hero-actions{ display:flex; gap: .9rem; flex-wrap: wrap; }
.hero-actions-center{ justify-content:center; }

/* ============================================
   Sections general
============================================ */
.section{
  padding: 6rem var(--pad);
  max-width: var(--max);
  margin: 0 auto;
}
.about{ background: var(--cream-100); max-width:none; }
.instructor{ background: var(--cream-50); max-width:none; }
.about .about-grid{ max-width: var(--max); margin:0 auto; }
.overview-copy{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.overview-copy h2{
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}
.overview-copy .eyebrow{ text-align:center; }
.overview-copy .pull-quote{
  text-align: left;
  margin-top: 1.6rem;
}
.method{ background: var(--cream-50); max-width:none; }
.method > *:not(.method-photo-wrap){ max-width: var(--max); margin-left:auto; margin-right:auto; }
.pricing{ background: var(--cream-100); max-width:none; }
.pricing > *{ max-width: var(--max); margin-left:auto; margin-right:auto; }
.book{ background: var(--cream-50); max-width:none; }
.book > *{ max-width: var(--max); margin-left:auto; margin-right:auto; }
.instagram{ background: var(--navy); max-width:none; }
.certification-note{
  background: var(--cream-100);
  max-width: none;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.certification-copy{
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.certification-copy .eyebrow{ text-align: center; }
.certification-copy p{
  color: var(--navy-mute);
  font-size: .92rem;
  line-height: 1.6;
}
.instagram > *{ max-width: var(--max); margin-left:auto; margin-right:auto; }
.instagram .eyebrow{ color: var(--taupe); }
.instagram h2{ color: var(--cream-50); }
.instagram .section-sub{ color: var(--cream-100); }
.testimonials{ background: var(--cream-50); max-width:none; }
.testimonials > *{ max-width: var(--max); margin-left:auto; margin-right:auto; }

/* ============================================
   About
============================================ */
.about-grid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items:center;
}
.about-media{ position:relative; }
.about-media img{
  width:100%; aspect-ratio: 4/5; object-fit:cover;
  border-radius: 0;
}

.about-copy h2{ max-width: 11em; }
.about-copy p{ color: var(--navy-mute); }

/* ============================================
   Studio gallery
============================================ */
.studio-gallery{ background: var(--cream-50); max-width:none; }
.studio-gallery > *{ max-width: var(--max); margin-left:auto; margin-right:auto; }
.studio-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
}
.studio-grid img{
  width:100%; height:100%; object-fit:cover; border-radius: 0;
  aspect-ratio: 1/1;
}
.studio-grid-wide{
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1/1 !important;
}

/* ============================================
   Santa Teresa Vibes
============================================ */
.vibes{ background: var(--cream-100); max-width:none; }
.vibes > .section-head-row{ max-width: var(--max); margin-left:auto; margin-right:auto; }
.vibes-scroll{
  max-width: var(--max);
  margin: 0 auto;
  display:flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad);
  padding-bottom: .5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--taupe) transparent;
}
.vibes-scroll::-webkit-scrollbar{ height: 6px; }
.vibes-scroll::-webkit-scrollbar-track{ background: transparent; }
.vibes-scroll::-webkit-scrollbar-thumb{ background: var(--taupe); border-radius: 999px; }
.vibes-scroll img{
  flex: 0 0 clamp(240px, 26vw, 340px);
  min-width: 0;
  aspect-ratio: 4/5;
  object-fit: cover;
  scroll-snap-align: start;
}

/* ============================================
   Method / Pillars
============================================ */
.pillars{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 4rem;
}
.pillar{ border-top: 1px solid var(--mist); padding-top: 1.6rem; }
.pillar-index{
  display:block;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--taupe);
  font-size: 1rem;
  margin-bottom: .6rem;
}
.pillar p{ color: var(--navy-mute); margin:0; }

.method-photo{ max-width: var(--max); margin: 0 auto; }
.method-photo img{
  width:100%; max-height: 480px; object-fit:cover; border-radius:0;
}

/* ============================================
   Our Movement
============================================ */
.movement{ background: var(--cream-50); max-width:none; }
.movement-header{
  max-width: var(--max);
  margin: 0 auto;
}
.movement-header .section-head{
  max-width: none;
  margin: 0 0 1rem;
  text-align: left;
}
.movement-header .section-head .eyebrow{ text-align: left; }
.movement-intro{
  color: var(--navy-mute);
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0 0 2.5rem;
}

.movement-scroll-wrap{
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
}

.movement-scroll{
  display:flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad);
  padding-bottom: .5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--taupe) transparent;
}
.movement-scroll::-webkit-scrollbar{ height: 6px; }
.movement-scroll::-webkit-scrollbar-track{ background: transparent; }
.movement-scroll::-webkit-scrollbar-thumb{ background: var(--taupe); border-radius: 999px; }

.movement-tile{
  flex: 0 0 clamp(220px, 22vw, 280px);
  scroll-snap-align: start;
  background: var(--mist);
  border-radius: 14px;
  padding: 1rem 1rem 1.4rem;
}
.movement-media{ position: relative; }
.movement-media img{
  width:100%;
  aspect-ratio: 4/3;
  object-fit:cover;
  display:block;
  margin-bottom: 1.1rem;
  border-radius: 0;
}
.movement-index{
  display:block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brown);
  margin-bottom: .6rem;
}
.movement-tile h3{ margin-bottom: .6rem; font-size: 1.15rem; }
.movement-tile p{ color: var(--navy-mute); font-size: .92rem; }
.movement-tile p:last-child{ margin-bottom:0; }

/* Overlay arrows — centered on the image band, not the header */
.movement-arrow-overlay{
  position:absolute;
  top: clamp(96px, 8.5vw, 121px);
  transform: translateY(-50%);
  z-index: 3;
  width: 52px; height: 52px;
  border-radius: 999px;
  border: none;
  background: rgba(53,67,91,.72);
  color: var(--cream-50);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.movement-arrow-overlay:hover{ background: var(--navy); }
.movement-arrow-overlay:disabled{ opacity:.4; cursor:default; }
.movement-arrow-prev{ left: 12px; }
.movement-arrow-next{ right: 12px; }

/* ============================================
   Pricing
============================================ */
.intro-banner{
  background: var(--navy);
  color: var(--cream-50);
  border-radius: 10px;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  display:flex; align-items:center; justify-content:space-between;
  gap: 2rem; flex-wrap:wrap;
  margin-bottom: 3.5rem;
}
.intro-banner h3{ color: var(--cream-50); margin-bottom:.3rem; }
.intro-banner p{ color: var(--cream-100); margin:0; max-width: 34em; }
.intro-price{ display:flex; align-items:center; gap: 1.4rem; }
.intro-price .price{ font-family: var(--font-display); font-size: 2.2rem; margin:0; }

.pricing-group-title{
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: var(--font-body);
  font-weight:600;
  color: var(--brown);
  margin: 0 0 1.4rem;
}
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 3.5rem;
}
.pricing-grid-3{ grid-template-columns: repeat(3, 1fr); }
.pricing-grid-5{ grid-template-columns: repeat(5, 1fr); }

.price-card{
  background: var(--cream-50);
  border: 1px solid rgba(53,67,91,.1);
  border-radius: 10px;
  padding: 1.8rem 1.6rem;
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.price-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 34px -22px rgba(53,67,91,.35); }
.price-card h4{ margin-bottom:.2rem; }
.price-note{ color: var(--navy-mute); font-size:.85rem; margin-bottom: 1rem; }
.price-card .price{
  font-family: var(--font-display);
  font-size: 2rem;
  margin: 0 0 .2rem;
}
.price-card .price span{ font-family: var(--font-body); font-size: .95rem; font-weight:500; color: var(--navy-mute); }
.price-valid{ color: var(--brown); font-size: .85rem; margin:0; font-weight:500; }

.price-card-featured{
  background: var(--navy); color: var(--cream-50);
  border-color: var(--navy);
}
.price-card-featured h4, .price-card-featured .price{ color: var(--cream-50); }
.price-card-featured .price-note{ color: var(--taupe); }
.price-badge{
  position:absolute; top:-11px; left: 1.6rem;
  background: var(--brown); color: var(--cream-50);
  font-size: .7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding: .35em .8em; border-radius: 999px;
}
.price-features{
  list-style:none; margin: 1.2rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.55rem;
}
.price-features li{
  font-size: .88rem; line-height:1.4;
  padding-left: 1.3rem; position:relative;
  color: inherit; opacity:.92;
}
.price-features li::before{
  content:''; position:absolute; left:0; top:.42em;
  width:7px; height:7px;
  background: var(--brown);
  clip-path: polygon(20% 0%, 100% 0%, 78% 45%, 100% 100%, 20% 100%, 0% 55%);
}
.price-card-featured .price-features li::before{ background: var(--cream-100); }

.policy{
  border-top: 1px solid var(--mist);
  padding-top: 1.4rem;
}
.policy summary{
  cursor:pointer; font-weight:600; font-size: .95rem;
  color: var(--navy);
  list-style: none;
  display:flex; align-items:center; gap:.6rem;
}
.policy summary::before{
  content:'+'; font-family: var(--font-display); font-size:1.2rem; color: var(--brown);
  transition: transform .25s var(--ease);
}
.policy[open] summary::before{ transform: rotate(45deg); }
.policy ul{ margin: 1.1rem 0 0; padding-left: 1.2rem; color: var(--navy-mute); font-size: .92rem; display:grid; gap:.4rem; }

/* ============================================
   Booking embed
============================================ */
.booking-embed{
  background: var(--cream-100);
  border-radius: 10px;
  overflow:hidden;
  border: 1px solid rgba(53,67,91,.1);
}
.booking-embed iframe{
  width:100%; height: 780px; border:0; display:block;
}
.booking-placeholder{
  text-align:center;
  padding: 5rem 2rem;
}
.booking-placeholder-mark{ width: 34px; margin: 0 auto 1.2rem; opacity:.55; }
.booking-placeholder h3{ margin-bottom:.4rem; }
.booking-placeholder p{ color: var(--navy-mute); margin-bottom: 1.6rem; }
.booking-fallback{
  text-align:center; margin: 1.2rem 0 0;
  color: var(--navy-mute); font-size: .9rem;
}
.booking-fallback a{ color: var(--brown); font-weight:600; }

/* ============================================
   Instagram
============================================ */
.ig-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.ig-tile{
  position:relative; aspect-ratio: 1/1; overflow:hidden; border-radius: 0;
  background: var(--navy-700);
}
.ig-tile img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.ig-tile:hover img{ transform: scale(1.08); }
.ig-tile-cta{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  color: var(--cream-50); background: var(--navy-700);
  border: 1px solid rgba(251,249,244,.18);
  font-size: .85rem; font-weight:600;
}

/* ============================================
   Testimonials
============================================ */
.section-head-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  text-align:left;
  max-width:none;
  margin-bottom: 2.2rem;
}
.section-head-row h2{ margin:0; }
.testimonial-nav{ display:flex; gap:.6rem; flex-shrink:0; }
.testimonial-arrow{
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid rgba(53,67,91,.2);
  background: var(--cream-50);
  color: var(--navy);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.testimonial-arrow:hover{ background: var(--navy); color: var(--cream-50); border-color: var(--navy); }
.testimonial-arrow:disabled{ opacity:.35; cursor:default; }
.testimonial-arrow:disabled:hover{ background: var(--cream-50); color: var(--navy); border-color: rgba(53,67,91,.2); }

.testimonial-scroll{
  display:flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad);
  padding-bottom: .5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--taupe) transparent;
}
.testimonial-scroll::-webkit-scrollbar{ height: 6px; }
.testimonial-scroll::-webkit-scrollbar-track{ background: transparent; }
.testimonial-scroll::-webkit-scrollbar-thumb{ background: var(--taupe); border-radius: 999px; }

.testimonial-empty{
  text-align:center;
  color: var(--navy-mute);
  border: 1px dashed var(--mist);
  border-radius: 10px;
  padding: 3rem 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
}
.testimonial-card{
  background: var(--cream-100);
  border-radius: 10px;
  padding: 1.8rem;
  flex: 0 0 320px;
  scroll-snap-align: start;
}
.testimonial-card p{ font-family: var(--font-display); font-style:italic; color: var(--navy); margin-bottom:.8rem; }
.testimonial-card cite{ font-style:normal; font-size:.85rem; color: var(--brown); font-weight:600; }

/* ============================================
   Stay Updated / signup
============================================ */
.signup{
  background: var(--navy);
  max-width:none;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.signup-inner{
  max-width: 640px;
  margin: 0 auto;
  text-align:center;
}
.signup h2{ color: var(--cream-50); }
.signup-sub{
  color: var(--cream-100);
  margin-bottom: 2rem;
}
.signup-form{
  display:flex;
  gap: .8rem;
  max-width: 440px;
  margin: 0 auto;
}
.signup-form[hidden]{ display:none; }
.signup-form input{
  flex: 1;
  min-width: 0;
  padding: .95em 1.2em;
  border-radius: 999px;
  border: 1px solid rgba(251,249,244,.3);
  background: rgba(251,249,244,.08);
  color: var(--cream-50);
  font-family: var(--font-body);
  font-size: .95rem;
}
.signup-form input::placeholder{ color: rgba(251,249,244,.55); }
.signup-form input:focus{
  outline: none;
  border-color: var(--cream-50);
  background: rgba(251,249,244,.14);
}
.signup-thanks{
  margin: 1.2rem 0 0;
  color: var(--cream-50);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
}
.signup-embed{
  max-width: 440px;
  margin: 0 auto;
  min-height: 60px;
}

/* ============================================
   Footer
============================================ */
.footer{
  background: var(--navy);
  color: var(--cream-100);
  padding: 4.5rem var(--pad) 0;
}
.footer-top{
  max-width: var(--max); margin:0 auto;
  display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(251,249,244,.14);
}
.footer-mark{ width: 30px; height:auto; margin-bottom: .8rem; }
.footer-word{ width: 150px; height:auto; margin-bottom: .8rem; }
.footer-brand p{ font-family: var(--font-display); font-style:italic; color: var(--taupe); margin:0; }
.footer-col h5{
  font-size: .78rem; text-transform:uppercase; letter-spacing:.12em;
  color: var(--taupe); margin: 0 0 .9rem; font-weight:600;
}
.footer-col p{ margin:0; color: var(--cream-100); font-size: .92rem; }
.footer-col a:not(.btn){ font-size: .92rem; color: var(--cream-100); display:block; margin-bottom: .5rem; }
.footer-col a:not(.btn):last-child{ margin-bottom:0; }
.footer-col a:hover{ color: var(--cream-50); text-decoration: underline; }
.footer-col a.btn{ color: var(--navy); font-size: .85rem; }
.footer-col a.btn:hover{ color: var(--navy); text-decoration: none; }

.footer-bottom{
  max-width: var(--max); margin:0 auto;
  padding: 1.6rem 0;
  font-size: .8rem; color: rgba(251,249,244,.55);
  text-align:center;
}

/* ============================================
   Reveal-on-scroll
============================================ */
[data-reveal]{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* Elements that need their own hover transition (not just the reveal
   fade) get a combined rule here so hover isn't silently overridden by
   the generic [data-reveal] transition above. */
.price-card[data-reveal]{
  transition: opacity .7s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}

/* ============================================
   Responsive
============================================ */
@media (max-width: 900px){
  .studio-grid{ grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .studio-grid-wide{ grid-column: span 2; grid-row: span 1; aspect-ratio: 16/10 !important; }
  .studio-grid-uniform{ grid-template-rows: repeat(4, 1fr); }
  .training-coaching-row{ grid-template-columns: 1fr; }
  .instructor-strip{ grid-template-columns: 1fr 1fr; }
  .instructor-strip img:last-child{ grid-column: span 2; }
  .movement-tile{ flex-basis: 74vw; }
  .movement-arrow-overlay{ top: 34vw; width:44px; height:44px; }
  .vibes-scroll img{ flex-basis: 70vw; }
  .nav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background: var(--cream-50);
    flex-direction:column; gap:0;
    border-bottom: 1px solid rgba(53,67,91,.1);
    box-shadow: 0 16px 30px -20px rgba(53,67,91,.3);
  }
  .nav-links a{ padding: 1rem var(--pad); border-top: 1px solid rgba(53,67,91,.06); color: var(--navy); }
  .nav-links.nav-links-open{ display:flex; }
  .nav-toggle{ display:flex; }
  .nav-brand{ flex-shrink:0; }
  .nav-ig{ display:none; }
  .nav-actions{ gap: .7rem; }
  .about-grid{ grid-template-columns: 1fr; }
  .pillars{ grid-template-columns: 1fr; gap: 2rem; }
  .pricing-grid{ grid-template-columns: repeat(2, 1fr); }
  .pricing-grid-3{ grid-template-columns: 1fr; }
  .pricing-grid-5{ grid-template-columns: repeat(2, 1fr); }
  .ig-grid{ grid-template-columns: repeat(2, 1fr); }
  .testimonial-card{ flex-basis: 82vw; }
  .section-head-row{ flex-wrap:wrap; gap: 1rem; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
  .booking-embed iframe{ height: 640px; }
}

@media (max-width: 560px){
  .pricing-grid{ grid-template-columns: 1fr; }
  .pricing-grid-5{ grid-template-columns: 1fr; }
  .intro-banner{ flex-direction:column; align-items:flex-start; }
  .hero-content{ padding-bottom: 4.5rem; }
  .footer-top{ grid-template-columns: 1fr; }
  .signup-form{ flex-direction:column; }
}

@media (max-width: 400px){
  .nav-word{ width: 96px; }
  .nav-location{ font-size: .6rem; letter-spacing: .07em; }
  .btn-sm{ padding: .6em 1.1em; font-size: .8rem; }
}