/* ========================================================
   IM Pilates — Global Styles
   --------------------------------------------------------
   1) Variables
   2) Reset + Base
   3) Utilities
   4) Header + Navigation
   4b) Mobile / Drawer Menu
   5) Buttons
   6) Global Layout
   7) Heroes
   8) Sections
   9) Pre-Footer & Footer
   10) Responsive
   11) Overrides (keep at very bottom)
======================================================== */

/* ========================================================
   1) Variables
======================================================== */

:root{
  --container: 1100px;
  --header-h: 80px;
  --progress-h: 4px;
  --scroll-pad: calc(var(--header-h) + var(--progress-h));

  /* Typography */
  --font-body: 'Helvetica Neue', Arial, sans-serif;
  --font-head: 'Poppins', sans-serif;

  /* Palette */
  --brand: #0284c7;
  --brand-dark: #0369a1;
  --ink: #111;
  --text: #333;
  --muted: #6b7a90;
  --line: #e5e7eb;
  --card-line: #e9eef5;
  --bg-soft: #f8fafc;

  /* Radius + shadows (consistent cards) */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --shadow-sm: 0 6px 18px rgba(0,0,0,.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,.10);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.14);

  /* Prefooter */
  --pf-navy: #0b1630;
  --pf-text: #e9eef9;
  --pf-accent: #9fc2ff;
  --pf-accent-2: #cbe0ff;
}

/* ========================================================
   2) Reset + Base
======================================================== */

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

html, body{ max-width:100%; overflow-x:hidden; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--scroll-pad);
}

body{
  font-family: var(--font-body);
  line-height:1.6;
  color:var(--text);
  background:#fff;
}

img, video{ max-width:100%; height:auto; display:block; }

/* ========================================================
   3) Utilities
======================================================== */

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

.text-center{ text-align:center; }

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  border:0;
  padding:0;
  clip:rect(0 0 0 0);
  overflow:hidden;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:8px;
  top:-100px;
  z-index:3000;
  background:var(--brand);
  color:#fff;
  padding:.6rem .9rem;
  border-radius:.6rem;
  text-decoration:none;
  font-weight:600;
}
.skip-link:focus{
  top:8px;
  box-shadow:0 0 0 3px rgba(2,132,199,.25);
}

/* Scroll progress bar */
.progress{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--progress-h);
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand),#22c55e);
  z-index:2000;
  pointer-events:none;
}

/* Fullscreen helper */
.fullscreen{
  min-height:calc(100vh - var(--header-h) - var(--progress-h));
  display:flex;
  align-items:center;
}
@supports (height:100svh){
  .fullscreen{ min-height:calc(100svh - var(--header-h) - var(--progress-h)); }
}

/* Fade-in on scroll */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s,transform .5s;
}
.reveal.active{ opacity:1; transform:none; }

/* ========================================================
   4) Header + Navigation
======================================================== */

.site-header{
  position:fixed;
  inset-inline:0;
  top:0;
  background:#fff;
  z-index:1000;
  box-shadow:0 3px 7px rgba(0,0,0,.09);
}

.nav-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:14px 30px;
}

/* Brand */
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
  text-decoration:none;
}
.brand-name{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.4rem;
  color:var(--ink);
  letter-spacing:.5px;
  white-space:nowrap;
}
.brand-tagline{
  font-family:var(--font-head);
  font-weight:500;
  font-size:.90rem;
  color:var(--brand);
  letter-spacing:1px;
  text-transform:uppercase;
  margin-top:2px;
}

.header-right{
  display:flex;
  align-items:center;
  gap:20px;
}

/* WP menu reset */
.site-nav ul,
.header-menu,
.header-menu ul{
  list-style:none;
  margin:0;
  padding:0;
}

.header-menu{
  display:flex;
  align-items:center;
  gap:0;
}
.header-menu>li+li{ margin-left:20px; }

.main-nav a,
.header-menu a{
  position:relative;
  padding:6px 0;
  text-decoration:none;
  font-family:var(--font-head);
  font-weight:500;
  font-size:1.05rem;
  color:var(--text);
  transition:color .3s ease;
}

.header-menu a:hover,
.main-nav a:hover{ color:var(--brand); }

.header-menu a::after,
.main-nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:var(--brand);
  transition:width .3s ease;
}

.header-menu a:hover::after,
.main-nav a:hover::after,
.header-menu .current-menu-item > a::after{ width:100%; }

.header-menu .current-menu-item > a{ color:var(--brand); }

/* Don’t falsely highlight homepage hash-links as current */
.header-menu li.current-menu-item > a[href*="#"],
.header-menu li.current-menu-ancestor > a[href*="#"]{
  color:var(--text);
}
.header-menu li.current-menu-item > a[href*="#"]::after,
.header-menu li.current-menu-ancestor > a[href*="#"]::after{
  width:0;
}

/* CTA menu item ("menu-cta" class in WP menus) */
.header-menu .menu-cta > a{
  padding:10px 18px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  box-shadow:0 6px 14px rgba(2,132,199,.18);
  transition:background .3s, transform .2s;
}
.header-menu .menu-cta > a:hover{
  background:var(--brand-dark);
  transform:translateY(-2px);
}

/* ========================================================
   4b) Mobile / Drawer Menu
======================================================== */

.menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  cursor:pointer;
}
.menu-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(2,132,199,.25);
}

.menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:1200;
  backdrop-filter:saturate(120%) blur(2px);
}

.mobile-menu{
  position:fixed;
  left:0;
  right:0;
  top:calc(var(--header-h) + var(--progress-h));
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  z-index:1300;
  transform:translateY(-8px);
  opacity:0;
  pointer-events:none;
  transition:transform .2s ease,opacity .2s ease;
  padding:14px 18px 18px;
}

.mobile-menu.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.mobile-menu .header-menu{
  display:grid;
  gap:8px;
}
.mobile-menu .header-menu a{
  display:block;
  padding:10px 8px;
  border-radius:var(--r-sm);
}
.mobile-menu .header-menu a:hover{
  background:#f3f4f6;
  color:var(--brand);
}
.mobile-menu .header-menu .menu-cta > a{ text-align:center; }

body.no-scroll{ overflow:hidden; }

/* ========================================================
   5) Buttons
======================================================== */

.btn{
  display:inline-block;
  border:none;
  cursor:pointer;
  text-decoration:none;
  transition:background .3s,transform .2s;
}

.btn-primary{
  background:var(--brand);
  color:#fff;
  padding:10px 20px;
  border-radius:999px;
  font-weight:500;
}
.btn-primary:hover{
  background:var(--brand-dark);
  transform:translateY(-2px);
}

/* ========================================================
   6) Global Layout (fixed header offsets + page basics)
======================================================== */

/* Push non-hero pages below the fixed header */
#main > :first-child:not(.hero):not(.page-hero):not(.about-hero){
  margin-top: calc(var(--header-h) + var(--progress-h));
}

/* Booking page: keep iframe under fixed header */
.booking-embed-page{ margin:0; padding:0; }
.booking-embed-wrapper{
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
  margin-top: calc(var(--header-h) + var(--progress-h));
}
.booking-embed-iframe{
  width:100%;
  min-height:100vh;
  border:0;
  display:block;
}

/* Simple page header (generic pages) */
.page-header{ margin:calc(var(--header-h) + 20px) 0 12px; }
.page-title{
  margin:0 0 6px;
  font-family:var(--font-head);
  font-weight:700;
}
.page-tagline{
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
  margin:0 0 18px;
}

/* ========================================================
   7) Heroes (Home + Page hero + About hero gradient)
======================================================== */

/* Home hero */
.hero{
  position:relative;
  height:auto;
  min-height:calc(100vh - var(--progress-h));
  padding-top:calc(var(--header-h) + var(--progress-h));
  padding-bottom:36px;

  background:url('splash.png') no-repeat center center/cover;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}

/* iOS-safe viewport units */
@supports (height:100svh){
  .hero{ min-height:calc(100svh - var(--progress-h)); }
}
@supports (height:100dvh){
  .hero{ min-height:calc(100dvh - var(--progress-h)); }
}

.hero .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.6));
}

.hero-logo{
  max-width:420px;
  margin:0 auto;
  display:block;
}

.hero-content{
  opacity:0;
  transform:translateY(15px);
  animation:fadeUp .6s ease forwards .4s;
}
.hero-content img,
.hero-content h2,
.hero-content p,
.hero-content a{
  opacity:0;
  transform:translateY(15px);
  animation:fadeUp .6s ease forwards;
}
.hero-content img{ animation-delay:.5s; }
.hero-content h2{ animation-delay:.7s; }
.hero-content p{ animation-delay:.9s; }
.hero-content a{ animation-delay:1.1s; }

@keyframes fadeUp{ to{ opacity:1; transform:none; } }

.hero-content h2{
  font-size:3rem;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:20px;
}
.hero-content p{
  font-size:1.3rem;
  max-width:700px;
  margin:0 auto 30px;
  color:#e6e6e6;
  line-height:1.6;
}

/* Page hero (About/Classes templates etc.) */
.page-hero,
.about-hero{
  position:relative;
  overflow:hidden;
  padding: calc(var(--header-h) + 30px) 0 36px;
  background: var(--bg-soft);
  border-bottom:1px solid var(--line);
}

body.admin-bar .page-hero{
  padding-top:calc((var(--header-h) + 30px) - 32px);
}
body.admin-bar .about-hero{
  padding-top:calc((var(--header-h) + 40px) - 32px);
}

@media (max-width:782px){
  body.admin-bar .page-hero{
    padding-top:calc((var(--header-h) + 30px) - 46px);
  }
  body.admin-bar .about-hero{
    padding-top:calc((var(--header-h) + 40px) - 46px);
  }
}

/* Optional bg image behind hero text */
.page-hero-bg-image,
.about-hero-bg-image{
  position:absolute;
  inset:0;
  z-index:0;
}
.page-hero-bg-image img,
.about-hero-bg-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(0.7);
}

.page-hero .container,
.about-hero .container{
  position:relative;
  z-index:2;
}

/* Split hero layout (title + image) */
.page-hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(0, 1.4fr);
  gap:40px;
  align-items:center;
}
.page-hero-media{ text-align:right; }
.page-hero-image{
  max-width:320px;
  width:100%;
  height:auto;
  margin-inline:auto;
  display:block;
  filter: drop-shadow(0 12px 30px rgba(15, 23, 42, 0.18));
}

/* About hero grid */
.about-hero{
  padding: calc(var(--header-h) + 40px) 0 72px;
}
.about-hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr);
  gap:56px;
  align-items:center;
}
.about-hero-media{ text-align:right; }
.about-hero-logo{
  max-width:320px;
  width:100%;
  height:auto;
  margin-inline:auto;
  display:block;
  filter: drop-shadow(0 12px 30px rgba(15, 23, 42, 0.18));
}

/* Animated diagonal gradient (About + Classes) */
.about-hero--gradient .about-hero-bg,
.page-hero--gradient .page-hero-bg{
  position:absolute;
  top:0; bottom:0; left:-50%; right:-50%;
  z-index:1;
  opacity:0.6;
  background-image: linear-gradient(
    -60deg,
    var(--im-about-hero-grad1, #0b1630) 50%,
    var(--im-about-hero-grad2, #0284c7) 50%
  );
  animation: im-about-hero-slide 9s ease-in-out infinite alternate;
}
.about-hero--gradient .about-hero-bg2,
.page-hero--gradient .page-hero-bg2{
  animation-direction: alternate-reverse;
  animation-duration: 11s;
  background-image: linear-gradient(
    -60deg,
    var(--im-about-hero-grad2, #0284c7) 50%,
    var(--im-about-hero-grad3, #38bdf8) 50%
  );
}
.about-hero--gradient .about-hero-bg3,
.page-hero--gradient .page-hero-bg3{
  animation-duration: 12s;
  background-image: linear-gradient(
    -60deg,
    var(--im-about-hero-grad3, #38bdf8) 50%,
    var(--im-about-hero-grad1, #0b1630) 50%
  );
}

@keyframes im-about-hero-slide{
  0%{ transform:translateX(-25%); }
  100%{ transform:translateX(25%); }
}

/* About hero typography */
.about-hero-title{
  font-family: var(--font-head);
  font-weight:800;
  font-size:2.6rem;
  line-height:1.15;
  margin:0 0 16px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  position:relative;
}
.about-hero-title::after{
  content:'';
  display:block;
  width:60px;
  height:4px;
  background:var(--brand);
  border-radius:2px;
  margin-top:12px;
}
.about-hero-sub{
  font-size:1.05rem;
  max-width:480px;
  color:#64748b;
}

/* Use Customizer-driven title colour when set */
.about-hero-title,
.page-hero-title,
.page-title{
  color: var(--im-about-hero-title-color) !important;
}

/* Classes page hero typography (match About hero) */
.page-template-page-classes .page-hero .page-title{
  font-family: var(--font-head);
  font-weight:800;
  font-size:2.6rem;
  line-height:1.15;
  margin:0 0 16px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  position:relative;
}
.page-template-page-classes .page-hero .page-title::after{
  content:'';
  display:block;
  width:60px;
  height:4px;
  background:var(--brand);
  border-radius:2px;
  margin-top:12px;
}
.page-template-page-classes .page-hero-sub.page-tagline{
  font-size:1.05rem;
  max-width:480px;
  color:#64748b;
}

/* Hide hero image/logo on smaller screens */
@media (max-width:906px){
  .about-hero-media,
  .page-hero-media{ display:none; }

  .about-hero-grid,
  .page-hero-grid{ grid-template-columns:1fr; }
}

/* ========================================================
   8) Sections
======================================================== */

/* Shared section heading sizes (Pricing/Memberships/Schedule/Contact) */
.pricing h3,
.memberships-header h3,
.schedule h3,
.contact h3{
  font-family: var(--font-head);
  font-weight:800;
  font-size:2.4rem;
  line-height:1.15;
}

/* Shared intro sizing */
.pricing-intro,
.memberships-intro,
.schedule-intro,
.contact p{
  font-size:1.1rem;
  color:#555;
}

/* ---------- About (home) ---------- */

.about{
  padding:120px 20px;
  background:var(--bg-soft);
  min-height:100vh;
  display:flex;
  align-items:center;
}

.about-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:40px;
  align-items:center;
}

.about-content h3{
  font-family:var(--font-head);
  font-size:2.6rem;
  font-weight:700;
  margin-bottom:20px;
  color:var(--ink);
  position:relative;
}
.about-content h3::after{
  content:'';
  display:block;
  width:60px;
  height:3px;
  background:var(--brand);
  margin-top:10px;
}

.about-content p{
  font-size:1.2rem;
  color:#555;
  line-height:1.8;
  margin-bottom:20px;
}

.about-image img{
  width:100%;
  border-radius:var(--r-md);
  box-shadow: var(--shadow-sm);
}

/* About template intro card */
.about-intro{
  background:var(--bg-soft);
  border-radius:var(--r-lg);
  padding:48px 40px;
  margin:28px 0 60px;
  box-shadow:0 6px 20px rgba(16,24,40,.06);
}

.section-title{
  font-family:var(--font-head);
  font-weight:800;
  font-size:2.4rem;
  line-height:1.15;
  margin:0 0 16px;
  color:var(--ink);
  position:relative;
}
.section-title::after{
  content:'';
  display:block;
  width:60px;
  height:4px;
  background:var(--brand);
  border-radius:2px;
  margin-top:12px;
}

.about-intro-copy p{
  font-size:1.05rem;
  color:#475569;
  line-height:1.9;
  margin:0 0 16px;
}

.about-intro-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
  box-shadow:0 12px 28px rgba(16,24,40,.12);
}

.about-intro-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:56px;
  align-items:center;
}
.about-intro.no-image .about-intro-grid{ grid-template-columns:1fr; }

.about-intro-copy > *{ margin:0; }
.about-intro-copy > * + *{ margin-top:22px; }

/* ---------- Pricing ---------- */

.pricing{
  padding:100px 20px;
  background:linear-gradient(to bottom right,#d8e9f1,#dbf1e3) no-repeat;
  background-size:cover;
}

.pricing h3{ text-align:center; margin-bottom:15px; }
.pricing-intro{ text-align:center; margin-bottom:50px; }

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:40px;
}

.pricing-card{
  background:#fff;
  border-radius:var(--r-lg);
  padding:40px;
  box-shadow: var(--shadow-md);
  border:1px solid var(--card-line);
  display:flex;
  flex-direction:column;
  gap:20px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.pricing-card:hover{
  transform:translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.pricing-card h4{
  font-size:1.8rem;
  font-weight:700;
  color:var(--brand);
  margin-bottom:10px;
  border-bottom:2px solid var(--brand);
  display:inline-block;
  padding-bottom:6px;
}

.pricing-section h5{
  font-size:1.2rem;
  color:var(--ink);
  margin:15px 0 10px;
}

.price-item{
  display:grid;
  grid-template-columns:2fr minmax(60px,auto) minmax(80px,auto);
  gap:40px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px dashed rgba(2,132,199,.35);
}
.price-item:last-child{ border-bottom:0; }

.price-item span{ font-size:1rem; color:#444; }
.price-item strong{
  font-size:1.2rem;
  color:var(--brand);
  text-align:right;
}
.price-item small{
  font-size:.85rem;
  color:#888;
  text-align:right;
}

.pricing-section + .pricing-section{
  margin-top:12px;
  padding-top:8px;
  border-top:1px solid rgba(2,132,199,.12);
}

.pricing-card .btn-primary{
  margin-top:auto;
  align-self:center;
  padding:12px 30px;
}

/* ---------- Membership Options ---------- */

.memberships{
  padding:100px 20px;
  background: linear-gradient(to bottom right, #eef6fb, #f2fbf5);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.memberships-header{
  text-align:center;
  max-width:760px;
  margin:0 auto 40px;
}

.memberships-header h3{
  text-align:center;
  margin-bottom:15px;
  color: var(--ink);
}

.memberships-intro{
  text-align:center;
  margin:0;
  color:#555;
}

.memberships-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:32px;
}

.membership-card{
  background:#fff;
  border-radius:var(--r-lg);
  padding:36px;
  border:1px solid var(--card-line);
  box-shadow: var(--shadow-md);
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.membership-card:hover{
  transform:translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.membership-card h4{
  margin:0 0 4px;
  font-size:1.35rem;
  font-weight:700;
  color:var(--ink);
}

.membership-price{
  margin:0;
  font-size:1.8rem;
  font-weight:800;
  line-height:1.1;
}
.membership-price .amount{ color:var(--brand); }
.membership-price .per{
  font-size:1rem;
  font-weight:700;
  color:#64748b;
}

.membership-sub{
  margin:0 0 6px;
  font-weight:700;
  color:#334155;
}

.membership-features{
  list-style:none;
  padding:0;
  margin:0;
}
.membership-features li{
  position:relative;
  padding-left:18px;
  margin:10px 0;
  color:#334155;
}
.membership-features li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:var(--brand);
  font-weight:900;
}

.memberships-footer{
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid var(--line);
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
.memberships-footer h4{
  margin:0 0 10px;
  color:var(--ink);
  font-size:1.1rem;
  font-family:var(--font-head);
  font-weight:700;
}
.memberships-footer p{
  margin:0;
  color:#555;
  line-height:1.8;
}

/* ---------- Classes (CPT grid + legacy) ---------- */

.class-grid,
.im-classes-grid{
  display:grid;
  gap:24px;
}

.class-grid{
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}

.im-classes-grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.im-classes-grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.im-classes-grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.im-classes-grid{ margin-bottom:48px; }

.class-card,
.im-class-card{
  background:#fff;
  border-radius:var(--r-md);
  padding:24px;
  box-shadow: var(--shadow-sm);
  border:1px solid var(--card-line);
}

.class-card.highlight{ border:2px solid rgba(2,132,199,.25); }

.im-class-title,
.class-card h2{
  font-size:1.3rem;
  margin-bottom:8px;
  color:var(--brand);
}

.im-class-subtitle{
  margin-left:6px;
  font-weight:600;
  font-size:14px;
  color:#1f5dbe;
}

.im-class-content p{ margin:0 0 10px; }

.im-class-cta .btn{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:var(--r-sm);
  border:1px solid #dbe5f3;
  text-decoration:none;
}

/* ---------- Schedule ---------- */

.schedule{
  padding:100px 20px;
  background:#f9fafb;
  min-height:100vh;
  display:flex;
  align-items:center;
}

.schedule h3{
  text-align:center;
  margin-bottom:14px;
  color:var(--ink);
}

.schedule-intro{
  text-align:center;
  margin-bottom:28px;
}

/* ---------- Contact ---------- */

.contact{
  padding:80px 20px;
  background:#f9fafb;
  text-align:center;
  min-height:100vh;
  display:flex;
  align-items:center;
}

.contact h3{
  margin-bottom:20px;
  color:var(--ink);
}

.contact p{ margin-bottom:40px; }

.contact-form{
  display:grid;
  gap:20px;
  max-width:700px;
  margin:0 auto;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:15px;
  border-radius:8px;
  border:1px solid #ddd;
  font-size:1rem;
}
.contact-form textarea{
  resize:vertical;
  min-height:120px;
}

/* ========================================================
   9) Pre-Footer & Footer
======================================================== */

.prefooter{
  background:var(--pf-navy);
  color:var(--pf-text);
  padding:48px 0;
}

.prefooter-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:28px;
  align-items:start;
}

.prefooter .pf-col{ grid-column:span 4; }

.prefooter .pf-heading{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--pf-accent);
  margin-bottom:10px;
}

.prefooter .pf-address{
  font-style:normal;
  line-height:1.7;
  color:var(--pf-text);
}

.pf-col-left .pf-heading-contact{ margin-top:3em; }

.prefooter .pf-social{
  display:flex;
  gap:14px;
  align-items:center;
}

.prefooter .pf-ig{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  color:var(--pf-accent);
  text-decoration:none;
}
.prefooter .pf-ig:hover,
.prefooter .pf-ig:focus-visible{
  color:var(--pf-accent-2);
  outline:none;
}

.prefooter .pf-app-btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  border:2px solid var(--pf-accent);
  color:var(--pf-accent);
  transition:transform .08s,background-color .2s,color .2s,box-shadow .2s;
}
.prefooter .pf-app-btn:hover,
.prefooter .pf-app-btn:focus-visible{
  background:var(--pf-accent);
  color:var(--pf-navy);
  transform:translateY(-1px);
  outline:none;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

.prefooter .pf-app-badge img{
  height:44px;
  width:auto;
  display:block;
}

.pf-app-block{ margin-top:3rem; }

.prefooter .pf-contact-link,
.prefooter .pf-contact-link:visited{
  color:#ffffff;
  text-decoration:none;
  transition: color 0.2s ease;
}
.prefooter .pf-contact-link:hover,
.prefooter .pf-contact-link:focus{
  color:#9fc2ff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Footer links list */
.prefooter .pf-links-list{
  list-style:none;
  margin:0;
  padding:0;
}
.prefooter .pf-links-list li + li{ margin-top:.4rem; }

.prefooter .pf-links-list a,
.prefooter .pf-links-list a:visited{
  color:#ffffff;
  text-decoration:none;
  transition: color 0.2s ease;
}
.prefooter .pf-links-list a:hover,
.prefooter .pf-links-list a:focus{
  color:#9fc2ff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Site footer */
.site-footer{
  background:#0b1630;
  color:#9ca3af;
  padding:30px 20px;
  text-align:center;
}
.site-footer p{ font-size:.9rem; }

/* ========================================================
   10) Responsive
======================================================== */

/* Header/nav breakpoints */
@media (max-width:1024px){
  .main-nav{ display:none; }
  .menu-toggle{ display:inline-flex; }

  .site-header{ padding:8px 16px; }

  .nav-container{
    justify-content:space-between;
    gap:12px;
  }

  .brand-name{ font-size:1.35rem; }
  .brand-tagline{ font-size:.85rem; letter-spacing:.8px; }

  .header-right .btn-primary{ display:none; }

  .pricing-grid{ grid-template-columns:1fr; }
  .pricing-card{
    width:calc(100% - 32px);
    margin:0 auto 24px;
    padding:24px;
  }

  .price-item{
    grid-template-columns:1fr auto;
    column-gap:12px;
    row-gap:6px;
    align-items:center;
    overflow-wrap:anywhere;
    padding:10px 0;
    border-bottom:1px dashed var(--line);
  }
  .price-item strong{ font-size:1.05rem; white-space:nowrap; }
  .price-item small{
    grid-column:1 / -1;
    text-align:left;
    font-size:.8rem;
    color:#777;
    margin-top:-2px;
  }

  .im-class-card,
  .class-card{
    width:calc(100% - 32px);
    margin:0 auto 24px;
  }
}

@media (min-width:1025px){
  .menu-toggle{ display:none; }
  #mobileMenu,
  #menuBackdrop{ display:none !important; }

  /* Keep hero below fixed header */
  .hero{
    height:auto;
    min-height:100vh;
    padding-top:var(--header-h);
  }
}

/* About (home) stack */
@media (max-width:900px){
  .about-container{
    grid-template-columns:1fr;
    gap:24px;
    align-items:start;
  }
}

/* Classes grid on smaller viewports */
@media (max-width:1024px){
  .im-classes-grid.cols-3,
  .im-classes-grid.cols-4{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:640px){
  .im-classes-grid[class*="cols-"]{ grid-template-columns:1fr; }
}

/* Memberships stack */
@media (max-width:900px){
  .memberships-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .memberships{ padding:80px 20px; }
  .membership-card{ padding:26px; }
  .memberships-header h3{ font-size:2.1rem; }
}

/* Shorter displays */
@media (min-width:1025px) and (max-height:820px){
  .hero-content h2{ font-size:2.4rem; }
  .hero-content p{ font-size:1.05rem; }
  .header-right .btn-primary{ display:none; }
}
@media (max-height:820px){
  .hero{ background-position:center 35%; }
}

/* Prefooter grid stack */
@media (max-width:900px){
  .prefooter .pf-col{ grid-column:span 6; }
}
@media (max-width:640px){
  .prefooter .pf-col{ grid-column:1 / -1; }
}

/* About intro grid stack */
@media (max-width:1024px){
  .about-intro-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
}

/* Mobile menu: keep items aligned & handle sub-menus cleanly */
.mobile-menu .header-menu,
.mobile-menu .header-menu ul{
  display:grid;
  gap:8px;
}

.mobile-menu .header-menu a::after{ display:none; } /* remove underline animation in drawer */

.mobile-menu .header-menu .sub-menu{
  margin:0;
  padding:0;
}

/* Slight indent for child items (optional; set to 0 if you want totally flat) */
.mobile-menu .header-menu .sub-menu a{
  padding-left:24px;
}

/* Make CTA look consistent */
.mobile-menu .header-menu .menu-cta > a{
  width:100%;
  text-align:center;
}

/* ========================================================
   11) Overrides (keep at very bottom)
======================================================== */

/* Mobile header: hamburger inline with brand (reduces white space) */
@media (max-width:780px){

  /* Shrink the assumed header height (improves scroll padding + layout) */
  :root{ --header-h: 64px; }

  .nav-container{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    padding:12px 16px;
  }

  /* Hide desktop right area (menu + CTA) on small screens */
  .header-right{ display:none !important; }

  /* Hamburger on the left */
  .menu-toggle{
    display:inline-flex;
    order:-1;
    margin:0;
    flex:0 0 auto;
    align-self:center;
  }

  /* Brand left-aligned, compact */
  .brand-text{
    margin:0;
    align-items:flex-start;
    text-align:left;
  }

  .brand-name{
    white-space:normal;
    font-size:1.2rem;
  }

  .brand-tagline{
    font-size:.8rem;
    letter-spacing:.8px;
  }

  /* Keep your hero mobile sizing */
  .hero-logo{ max-width:260px; margin:10px auto 20px; }
  .hero-content h2{ font-size:2.2rem; line-height:1.25; }
  .hero-content p{ font-size:1.05rem; }
}

/* Classes page: add breathing room between hero and class cards */
.page-template-page-classes .content-section,
.content-section--classes{
  margin-top: 0 !important;
  padding-top: clamp(20px, 4vw, 48px);
}

/* ========================================================
   Page content typography (fix lists + spacing on legal pages)
======================================================== */

.page-content p{
  margin:0 0 16px;
}

.page-content h2,
.page-content h3,
.page-content h4{
  margin:28px 0 12px;
}

.page-content ul,
.page-content ol{
  margin:0 0 16px;
  padding-left:1.25rem;              /* restores indent */
}

.page-content li + li{
  margin-top:8px;                    /* restores list item spacing */
}

/* Optional: nested lists look nicer */
.page-content ul ul,
.page-content ol ol,
.page-content ul ol,
.page-content ol ul{
  margin-top:10px;
}