:root{
    --navy:#121244;
    --navy-deep:#0a0a2a;
    --navy-mid:#1c1c5c;
    --gold:#e9bc00;
    --gold-dark:#c7a200;
    --white:#ffffff;
    --cream:#f6f5f0;
    --ink:#121244;
    --muted:#5c5f7d;
    --sage:#b8c7b2;
    --sage-deep:#6f7d69;
    --sage-line:#dbe3d7;
    --max:1240px;
    --gap:clamp(1.5rem, 4vw, 4rem);
  }

  *{box-sizing:border-box;}

  /* ---------- SKIP LINK ---------- */
  /* Visually hidden until keyboard-focused, then pinned top-left above everything
     (including the sticky header) so it's visible without disturbing normal layout. */
  .skip-link{
    position:absolute;top:-100px;left:0;z-index:1000;
    background:var(--navy);color:var(--white);
    padding:.85rem 1.5rem;font-weight:700;font-size:.9rem;
    border-radius:0 0 10px 0;
    transition:top .15s ease;
  }
  .skip-link:focus{top:0;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Archivo', sans-serif;
    color:var(--ink);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
  }
  /* height:auto keeps each image's proportions now that <img> tags carry intrinsic width/height attributes
     (which only reserve space); any rule that sets an explicit height still takes precedence. */
  img{max-width:100%;height:auto;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{margin:0;padding:0;list-style:none;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem);}

  h1,h2,h3{
    font-weight:800;
    line-height:1.05;
    margin:0;
    letter-spacing:-0.01em;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
  }
  .eyebrow::before{
    content:"";
    width:0;height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:9px solid var(--gold);
  }
  .eyebrow.on-dark{color:var(--gold);}
  .eyebrow.on-light{color:var(--navy);}
  .eyebrow.on-sage::before{border-bottom-color:var(--sage-deep);}
  /* #5f6b5a (existing Pilates sage-grey): 5.62:1 on white, 5.17:1 on #f4f6f2; --sage-deep was 4.36/4.01, below WCAG AA.
     The decorative triangle above keeps --sage-deep. */
  .eyebrow.on-sage{color:#5f6b5a;}

  .btn{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.95rem 2rem;
    border-radius:999px;
    font-weight:700;
    font-size:.85rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    border:2px solid transparent;
    cursor:pointer;
    transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-gold{background:var(--gold);color:var(--navy);}
  .btn-gold:hover{background:var(--gold-dark);}
  .btn-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55);}
  .btn-outline:hover{border-color:var(--white);}
  /* .btn-outline is white-on-transparent, for dark hero backgrounds only.
     .btn-outline-navy is the equivalent secondary/outline style for light (white/cream) backgrounds
     — used for "Learn More" and "Meet Our Founders"-style secondary CTAs on content sections. */
  .btn-outline-navy{background:transparent;color:var(--navy);border-color:rgba(18,18,68,.3);}
  .btn-outline-navy:hover{background:var(--navy);color:var(--white);border-color:var(--navy);}
  .btn-navy{background:var(--navy);color:var(--white);}
  .btn-navy:hover{background:var(--navy-mid);}
  /* #5f6b5a (existing Pilates sage-grey) gives 5.62:1 with white text; --sage-deep was 4.36:1, below WCAG AA */
  .btn-sage{background:#5f6b5a;color:var(--white);}
  .btn-sage:hover{background:#3d4a38;}

  /* ---------- HEADER ---------- */
  header{
    position:sticky;top:0;z-index:100;
    background:rgba(18,18,68,0.88);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:2px solid transparent;
    border-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%) 1;
  }
  .nav-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:.85rem clamp(1.25rem,4vw,3rem);
  }
  .logo-mark img{height:56px;width:auto;object-fit:contain;}  /* contain: at <=320px the flex row squeezes the logo; keep true proportions */
  @media (max-width:480px){.logo-mark img{height:40px;}}
  nav.primary{display:flex;align-items:center;gap:clamp(1rem,2vw,2.1rem);}
  nav.primary a{
    color:var(--white);
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    opacity:.88;
    position:relative;
    padding:.3rem 0;
  }
  nav.primary a:hover{opacity:1;}
  nav.primary a.pilates-link{color:var(--sage);font-weight:700;}
  .nav-cta{display:flex;align-items:center;gap:1.6rem;}
  .menu-toggle{display:none;background:none;border:0;color:var(--white);font-size:1.6rem;line-height:1;cursor:pointer;padding:0;}
  nav.primary a.nav-book{display:none;}

  @media (max-width:900px){
    .nav-row{position:relative;}
    nav.primary{
      display:none;
      position:absolute;
      top:100%;
      left:0;
      right:0;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      background:var(--navy-deep);
      border-bottom:1px solid rgba(255,255,255,.08);
      box-shadow:0 24px 40px -20px rgba(0,0,0,.5);
    }
    nav.primary.is-open{display:flex;}
    nav.primary a{
      padding:1rem clamp(1.25rem,4vw,3rem);
      border-top:1px solid rgba(255,255,255,.08);
      opacity:1;
    }
    nav.primary a:hover{color:var(--gold);}
    nav.primary a.nav-book{
      display:inline-flex;
      justify-content:center;
      margin:1rem clamp(1.25rem,4vw,3rem) 1.25rem;
    }
    .menu-toggle{display:block;}
  }

  /* ---------- HERO ---------- */
  /* Image path below is relative to this file (assets/), not to index.html. */
  .hero{
    position:relative;
    min-height:92vh;
    display:flex;
    align-items:flex-end;
    background:linear-gradient(180deg, rgba(10,10,42,.92) 0%, rgba(10,10,42,.55) 25%, rgba(10,10,42,.94) 100%),
      url('images/physio-homepage-hero.webp') center/cover no-repeat;
    color:var(--white);
    clip-path:polygon(0 0,100% 0,100% 92%,0 100%);
    padding-bottom:clamp(4rem,9vw,7rem);
  }
  .hero-inner{max-width:820px;}
  .hero .eyebrow{margin-bottom:1.25rem;}
  .hero h1{
    font-size:clamp(2.5rem,5.6vw,4.4rem);
    text-transform:uppercase;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--gold);
  }
  .hero p.lede{
    margin:1.5rem 0 2.25rem;
    font-size:clamp(1.05rem,1.6vw,1.25rem);
    max-width:560px;
    color:rgba(255,255,255,.86);
    font-weight:500;
  }
  .hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;}
  /* Mobile: anchor the hero content to the top instead of the bottom of the 92vh box. The sticky header sits in normal
     flow above the hero, so the hero's top edge is the nav's bottom edge: the eyebrow always starts 56px below the nav,
     independent of viewport height (and of iOS Safari's address bar resizing vh). Image, overlay, crop and box size
     are unchanged; desktop/tablet (>640px) keep bottom alignment. */
  @media (max-width:640px){
    .hero{align-items:flex-start;padding-top:56px;}
  }

  /* ---------- CREDIBILITY STRIP ---------- */
  .credibility{
    background:var(--navy-deep);
    color:var(--white);
    padding:1.5rem 0;
    margin-top:-1px;
  }
  .credibility .wrap{
    display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;justify-content:center;text-align:center;
  }
  .credibility p{
    margin:0;
    font-size:.95rem;
    color:rgba(255,255,255,.82);
    font-weight:500;
  }
  .credibility strong{color:var(--gold);font-weight:800;}

  /* Homepage Reformer discovery card (replaces the earlier sage .pilates-banner pill). Whole card is one link to
     /reformer-pilates/. Dark green Reformer palette; decorative arches and binoculars icon are aria-hidden.
     The icon "glance" uses transform only and stops under prefers-reduced-motion. */
  .pilates-banner-wrap{
    display:flex;justify-content:center;
    padding:clamp(1.75rem,4vw,2.5rem) clamp(1.25rem,4vw,3rem);
    background:var(--white);
  }
  .discover-card{
    position:relative;isolation:isolate;overflow:hidden;
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.1rem 1.5rem;
    width:100%;max-width:760px;padding:1.4rem 1.75rem;border-radius:20px;
    background:linear-gradient(135deg,#3d4a38 0%,#2c3628 100%);color:var(--white);text-decoration:none;
    box-shadow:0 14px 30px -16px rgba(44,54,40,.55);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .discover-card:hover{transform:translateY(-3px);box-shadow:0 20px 38px -18px rgba(44,54,40,.6);}
  .discover-card:focus-visible{outline:3px solid #2c3628;outline-offset:4px;}
  .discover-arches{position:absolute;right:-6px;bottom:-2px;width:150px;height:84px;color:#dbe3d7;opacity:.1;z-index:-1;pointer-events:none;}
  .discover-icon{
    width:56px;height:56px;border-radius:50%;flex-shrink:0;
    background:rgba(219,227,215,.14);box-shadow:inset 0 0 0 1px rgba(219,227,215,.22);
    display:flex;align-items:center;justify-content:center;color:#dbe3d7;
  }
  .discover-icon svg{width:30px;height:30px;animation:discover-glance 6s ease-in-out infinite;transform-origin:50% 60%;}
  @keyframes discover-glance{
    0%,58%,100%{transform:translate(0,0) rotate(0);}
    64%{transform:translate(-2px,0) rotate(-7deg);}
    74%{transform:translate(2px,0) rotate(7deg);}
    82%{transform:translate(0,0) rotate(0);}
  }
  .discover-body{display:flex;flex-direction:column;gap:.2rem;min-width:0;text-align:left;}
  .discover-label{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#b8c7b2;}
  .discover-title{font-size:clamp(1.1rem,2.2vw,1.3rem);font-weight:800;line-height:1.2;color:var(--white);}
  .discover-text{font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.82);}
  .discover-action{
    display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
    background:#dbe3d7;color:#2c3628;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    padding:.75rem 1.15rem;border-radius:999px;transition:background .2s ease;
  }
  .discover-action .arrow{display:inline-block;transition:transform .2s ease;}
  .discover-card:hover .discover-action,.discover-card:focus-visible .discover-action{background:var(--white);}
  .discover-card:hover .discover-action .arrow,.discover-card:focus-visible .discover-action .arrow{transform:translateX(3px);}
  @media (max-width:640px){
    .discover-card{grid-template-columns:auto 1fr;padding:1.15rem 1.2rem;gap:.85rem 1rem;}
    .discover-icon{width:48px;height:48px;}
    .discover-icon svg{width:26px;height:26px;}
    .discover-action{grid-column:1 / -1;justify-content:center;}
  }
  @media (prefers-reduced-motion:reduce){
    .discover-icon svg{animation:none;}
    .discover-card,.discover-card:hover{transition:none;transform:none;}
    .discover-action .arrow{transition:none;}
  }

  /* ---------- SECTION SPACING ---------- */
  section{padding:clamp(4rem,8vw,7rem) 0;}
  .section-head{max-width:640px;margin-bottom:clamp(2.5rem,5vw,3.5rem);}
  .section-head h2{font-size:clamp(2rem,3.6vw,2.9rem);margin-top:.85rem;text-wrap:balance;}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

  /* ---------- SERVICES ---------- */
  .services{background:var(--cream);}
  .service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
  }
  @media (max-width:920px){.service-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:640px){.service-grid{grid-template-columns:1fr;}}

  .service-card{
    background:var(--white);
    border-radius:18px;
    padding:2rem 1.85rem;
    border:1px solid #e9e7dd;
    display:flex;
    flex-direction:column;
    gap:1rem;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .service-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px -22px rgba(18,18,68,.35);
  }
  .service-card-photo{
    margin:-2rem -1.85rem 0;
    aspect-ratio:4/3;
    overflow:hidden;
    border-radius:18px 18px 0 0;
  }
  .service-card-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .service-card .tri{
    width:0;height:0;
    border-left:11px solid transparent;
    border-right:11px solid transparent;
    border-bottom:18px solid var(--gold);
  }
  .service-card h3{font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em;}
  .service-card p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.55;flex-grow:1;}
  .service-card .book-link,
  .service-block .book-link{
    font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--navy);
    display:inline-flex;align-items:center;gap:.4rem;
  }
  .service-card .book-link::after,
  .service-block .book-link::after{content:"→";transition:transform .18s ease;}
  .service-card:hover .book-link::after,
  .service-block:hover .book-link::after{transform:translateX(4px);}
  /* Homepage cards now use longer descriptive labels that can wrap to two lines: keep the arrow
     directly after the last word (inline) and the label centred beside the Book chip. */
  .service-card .book-link{display:block;align-self:center;line-height:15.5px;}  /* 2 lines (31px) fit within the Book chip's height, so the row keeps its original height */
  /* non-breaking space joins the arrow to the last word so it never wraps onto a line alone;
     relative 'left' keeps the same 4px hover nudge on an inline pseudo-element */
  .service-card .book-link::after{content:"\00a0\2192";position:relative;left:0;transition:left .18s ease;}
  .service-card:hover .book-link::after{transform:none;left:4px;}
  /* .book-chip: compact solid-gold CTA for the primary "Book" action on service
     cards/blocks, paired with the plain .book-link "Learn More" text link beside it
     — gives Book more visual weight without reverting to a full-size .btn pill. */
  .book-chip{
    display:inline-flex;align-items:center;
    background:var(--gold);color:var(--navy);
    font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    padding:.55rem 1.25rem;
    border-radius:999px;
    transition:background .18s ease, transform .18s ease;
  }
  .book-chip:hover{background:var(--gold-dark);transform:translateY(-2px);}
  .service-card.pilates-card{border:2px solid var(--sage-line);background:var(--white);position:relative;}
  .pilates-card-logo-inline{
    background:#3d4a38;border-radius:8px;
    padding:.4rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .pilates-card-logo-inline img{height:24px;width:auto;display:block;}
  .pilates-card-logo{
    position:absolute;top:1.5rem;right:1.5rem;
    background:#3d4a38;border-radius:8px;
    padding:.4rem;display:flex;align-items:center;justify-content:center;
  }
  .pilates-card-logo img{height:32px;width:auto;display:block;}
  .service-card.pilates-card:hover{box-shadow:0 20px 40px -22px rgba(61,74,56,.4);}
  .service-card.pilates-card .tri{border-bottom-color:var(--sage-deep);}
  .service-card.pilates-card h3{color:#2c3628;}
  .service-card.pilates-card p{color:#5f6b5a;}
  .service-card.pilates-card .book-link{color:#3d4a38;}

  /* ---------- MISSION ---------- */
  .mission{background:var(--white);}
  .mission .grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(2rem,5vw,4.5rem);
    align-items:center;
  }
  @media (max-width:880px){.mission .grid{grid-template-columns:1fr;}}
  .mission-photo{
    position:relative;
    border-radius:22px;
    overflow:hidden;
    clip-path:polygon(0 4%,100% 0,100% 96%,0 100%);
  }
  .mission-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;}
  .mission-copy p{
    color:var(--muted);
    font-size:1.02rem;
    line-height:1.7;
    margin:0 0 1.15rem;
  }
  .pull-quote{
    border-left:4px solid var(--gold);
    padding-left:1.25rem;
    margin:1.75rem 0;
    font-size:1.25rem;
    font-weight:600;
    color:var(--navy);
    line-height:1.4;
  }
  .founders-line{
    display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2rem;margin-top:1.75rem;
  }
  .founders-line .founder{display:flex;flex-direction:column;gap:.2rem;text-decoration:none;}
  .founders-line .founder-name{font-size:.9rem;font-weight:700;color:var(--navy);transition:color .2s ease;}
  .founders-line .founder-role{font-size:.78rem;font-weight:600;color:var(--muted);}
  .founders-line .founder:hover .founder-name{color:var(--gold-dark);}

  /* ---------- GALLERY ---------- */
  .gallery{background:var(--navy);color:var(--white);}
  .gallery .section-head .eyebrow{color:var(--gold);}
  .gallery .section-head h2{color:var(--white);}
  .gallery .section-head p{color:rgba(255,255,255,.7);margin-top:.75rem;}
  .gallery-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    grid-template-rows:repeat(2,220px);
    gap:1rem;
  }
  .gallery-grid > div:nth-child(1){grid-row:1 / 3;}
  .gallery-grid img{width:100%;height:100%;object-fit:cover;border-radius:14px;}
  @media (max-width:820px){
    .gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:220px 160px 160px;gap:.85rem;}
    .gallery-grid > div:nth-child(1){grid-row:auto;grid-column:1 / 3;}
  }

  /* ---------- TESTIMONIAL ---------- */
  .testimonial{
    background:var(--cream);
    text-align:center;
  }
  .testimonial blockquote{
    max-width:780px;margin:0 auto;
    font-size:clamp(1.4rem,3vw,2.1rem);
    font-weight:700;
    line-height:1.35;
    color:var(--navy);
  }
  .testimonial blockquote::before{content:"“";color:var(--gold);}
  .testimonial blockquote::after{content:"”";color:var(--gold);}
  .testimonial cite{
    display:block;margin-top:1.5rem;
    font-style:normal;font-size:.85rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  }

  /* ---------- PILATES TEASER ---------- */
  .pilates-teaser{
    background:linear-gradient(135deg, var(--sage) 0%, #cbd7c6 100%);
    color:var(--sage-deep);
  }
  .pilates-teaser .grid{
    display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center;
  }
  @media (max-width:880px){.pilates-teaser .grid{grid-template-columns:1fr;text-align:center;}}
  .pilates-teaser .logo-card{
    background:#3d4a38;
    border-radius:20px;
    padding:2rem;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 30px 60px -30px rgba(90,105,85,.5);
  }
  .pilates-teaser .logo-card img{max-width:260px;}
  /* Only matters below ~360px wide, where the 260px logo tile no longer fits the single column (was 24px of sideways scroll at 320px) */
  @media (max-width:880px){.pilates-teaser .grid{grid-template-columns:minmax(0,1fr);}}
  .pilates-teaser .logo-card{min-width:0;}
  .pilates-teaser .logo-card img{min-width:0;max-width:min(260px,100%);}
  .pilates-teaser h2{color:#42513d;font-size:clamp(1.9rem,3.4vw,2.6rem);}
  .pilates-teaser p{color:#4c5c47;font-size:1.05rem;line-height:1.65;max-width:520px;}
  .pilates-teaser .eyebrow{color:#42513d;}
  .pilates-teaser .eyebrow::before{border-bottom-color:#42513d;}

  /* ---------- FINAL CTA ---------- */
  .final-cta{
    background:var(--navy);
    color:var(--white);
    text-align:center;
    position:relative;
    clip-path:polygon(0 8%,100% 0,100% 100%,0 100%);
  }
  .final-cta h2{font-size:clamp(2.1rem,4.4vw,3.4rem);text-transform:uppercase;}
  .final-cta p{color:rgba(255,255,255,.75);max-width:520px;margin:1.1rem auto 2.25rem;font-size:1.05rem;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--navy-deep);color:rgba(255,255,255,.75);padding:clamp(3rem,6vw,5rem) 0 2rem;}
  .footer-grid{
    display:grid;
    grid-template-columns:1.1fr .8fr .8fr 1fr 1fr;
    gap:2.5rem;
    padding-bottom:2.5rem;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  @media (max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:520px){.footer-grid{grid-template-columns:1fr 1fr;gap:2rem 1.25rem;}}
  .footer-grid img{height:40px;width:auto;margin-bottom:1rem;}
  .footer-grid p{font-size:.88rem;line-height:1.6;max-width:280px;}

  /* ---------- TRUST STRIP (above footer, physio pages only) ---------- */
  .trust-strip{background:var(--cream);padding:2.25rem 0;text-align:center;}
  .trust-strip p{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 1.25rem;}
  .trust-strip .trust-logos{display:flex;align-items:center;justify-content:center;gap:3.5rem;flex-wrap:wrap;}
  .trust-strip .trust-logos a{display:inline-flex;opacity:.9;transition:opacity .18s ease;}
  .trust-strip .trust-logos a:hover{opacity:1;}
  .trust-strip .trust-logos img{height:130px;width:auto;object-fit:contain;}  /* contain: the single-row strip squeezes logos at <=360px; keep true proportions */
  @media (max-width:520px){
    .trust-strip .trust-logos{gap:1.1rem;flex-wrap:nowrap;}
    .trust-strip .trust-logos img{height:46px;width:auto;}
  }
  /* <h2> (was <h4>, which skipped heading levels); styles pin the previous <h4> rendering exactly */
  .footer-col h2{
    color:var(--white);font-size:.75rem;font-weight:700;line-height:normal;letter-spacing:.12em;text-transform:uppercase;
    margin:0 0 1.1rem;
  }
  .footer-col ul li{margin-bottom:.65rem;font-size:.88rem;}
  .footer-col ul li a:hover{color:var(--gold);}
  .footer-bottom{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
    padding-top:1.75rem;font-size:.78rem;color:rgba(255,255,255,.5);
  }
  .socials{display:flex;gap:1.1rem;}
  .socials a{
    display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.75);
    transition:color .18s ease;
  }
  .socials a svg{width:19px;height:19px;display:block;}
  .socials a:hover{color:var(--gold);}
  .footer-bottom a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);}
  .footer-bottom a:hover{color:var(--gold);text-decoration-color:var(--gold);}

  /* ---------- PAGE HERO (interior pages) ---------- */
  /* --hero-img/--hero-img-mobile are set inline per-page but resolved as url()s here, so any
     relative path must be written relative to THIS file's location (assets/), not the HTML
     page that sets the variable — e.g. 'images/foo.jpg', or '../assets/images/foo.jpg' from
     a page one level down. Getting this wrong fails silently (blank hero, no console error). */
  .page-hero{
    position:relative;
    min-height:46vh;
    display:flex;
    align-items:flex-end;
    background:linear-gradient(180deg, rgba(10,10,42,.6) 0%, rgba(10,10,42,.75) 100%), var(--hero-img) center var(--hero-pos, center)/cover no-repeat;
    color:var(--white);
    clip-path:polygon(0 0,100% 0,100% 92%,0 100%);
    padding-bottom:clamp(2.5rem,6vw,4rem);
  }
  .page-hero h1{
    font-size:clamp(2.1rem,4.6vw,3.4rem);
    text-transform:uppercase;
    margin-top:1rem;
  }
  /* Below 360px, long single words such as PHYSIOTHERAPY were wider than the screen (17px sideways scroll at 320px) */
  @media (max-width:359px){.page-hero h1{font-size:1.85rem;}}
  .page-hero p.lede{
    margin:1.1rem 0 0;
    font-size:1.05rem;
    max-width:560px;
    color:rgba(255,255,255,.85);
    font-weight:500;
  }
  .about-hero{min-height:36vh;--hero-pos:65%;}
  @media (min-width:901px){
    .about-hero{min-height:60vh;--hero-pos:35%;}
  }
  .team-hero{--hero-pos:45%;}
  @media (min-width:901px){
    .team-hero{min-height:88vh;--hero-pos:50%;--hero-img:url('images/team-founders-group-desktop.jpg');align-items:flex-start;padding-top:clamp(8rem,23vh,12.5rem);}
  }
  .breadcrumb{
    font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    color:rgba(255,255,255,.6);
  }
  .breadcrumb a{color:rgba(255,255,255,.85);}
  .breadcrumb a:hover{color:var(--gold);}

  /* ---------- CONTENT SECTION ---------- */
  .content-section{padding:clamp(3.5rem,7vw,6rem) 0;}
  .content-section.alt{background:var(--cream);}
  .content-narrow{max-width:760px;}
  .content-narrow p{color:var(--muted);font-size:1.03rem;line-height:1.75;margin:0 0 1.25rem;}
  .content-narrow h2{margin:2rem 0 .75rem;font-size:clamp(1.25rem,2vw,1.5rem);}
  .content-narrow h3{margin:1.5rem 0 .5rem;font-size:1.05rem;}
  .content-narrow ul{list-style:disc;margin:0 0 1.25rem;padding-left:1.25rem;color:var(--muted);}
  .content-narrow li{margin-bottom:.5rem;line-height:1.65;}
  .content-narrow p a,.content-narrow li a{color:var(--navy);text-decoration:underline;text-decoration-color:rgba(18,18,68,.25);}
  .content-narrow p a:hover,.content-narrow li a:hover{color:var(--gold);text-decoration-color:var(--gold);}
  .content-narrow img{width:100%;border-radius:18px;margin:.5rem 0 1.75rem;display:block;}

  /* ---------- BLOG ---------- */
  .blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:900px;margin:0 auto;}
  @media (max-width:640px){.blog-grid{grid-template-columns:1fr;}}
  .blog-grid .team-photo{aspect-ratio:16/10;}
  .blog-date{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}

  /* ---------- TEAM ---------- */
  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
  @media (max-width:920px){.team-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto;}}
  .team-card{background:var(--cream);border-radius:20px;overflow:hidden;border:1px solid #e9e7dd;transition:transform .2s ease, box-shadow .2s ease;}
  /* .team-link-card: whole-card link variant of .team-card, used to cross-link team.html
     to the physiotherapy/performance sub-team pages (and vice versa). */
  .team-link-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:820px;margin:2.5rem auto 0;}
  @media (max-width:640px){.team-link-grid{grid-template-columns:1fr;}}
  .team-link-card{display:block;text-decoration:none;color:inherit;}
  .team-link-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -22px rgba(18,18,68,.35);}
  .team-link-card .team-info p{margin-top:.6rem;}
  .team-photo{aspect-ratio:4/5;overflow:hidden;}
  .team-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;}
  .team-info{padding:1.75rem;}
  .team-info .role{
    font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark);
  }
  .team-info .role2{
    font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
    display:block;margin-top:.15rem;
  }
  .team-info h3,.team-info h2.team-name{font-size:1.4rem;margin-top:.6rem;text-transform:uppercase;}
  .team-info p{color:var(--muted);font-size:.92rem;line-height:1.65;margin-top:.9rem;}
  .team-bio-full{margin-top:4rem;display:flex;flex-direction:column;gap:3.5rem;}
  .team-bio-row{display:grid;grid-template-columns:.55fr 1fr;gap:clamp(1.75rem,4vw,3rem);align-items:start;}
  @media (max-width:800px){.team-bio-row{grid-template-columns:1fr;}}
  .team-bio-row .team-photo{border-radius:18px;clip-path:polygon(0 4%,100% 0,100% 96%,0 100%);}
  .team-bio-row .team-info{padding:0;background:none;}

  /* ---------- SERVICES DETAIL ---------- */
  .service-detail{
    display:grid;grid-template-columns:1fr;gap:2.5rem;
  }
  .service-block{
    display:grid;grid-template-columns:.4fr 1fr;gap:clamp(1.5rem,4vw,3rem);
    align-items:start;
    padding:2.25rem 0;
    border-top:1px solid #e9e7dd;
  }
  .service-block:first-child{border-top:none;}
  @media (max-width:760px){.service-block{grid-template-columns:1fr;gap:1rem;}}
  /* .service-block.has-photo: photo+text variant (services.html) — keeps the plain
     numbered-block layout above as the default for pages that don't have a photo yet. */
  .service-block.has-photo{grid-template-columns:.55fr 1fr;align-items:center;gap:clamp(1.75rem,4vw,3rem);}
  /* Real bug, fixed here: `.service-block.has-photo` (two classes) is more specific than
     the `.service-block` mobile rule above (one class), so it was never actually collapsing
     to a single column below 760px on any page that uses it — the photo column stayed
     .55fr wide next to constrained text, rendering as a small thumbnail beside squeezed
     copy. Explicitly overriding grid-template-columns here (not just gap, as before) fixes
     it site-wide. Source order already puts .service-photo before the text on every usage,
     so this naturally stacks image-then-text — no HTML changes needed. */
  @media (max-width:760px){.service-block.has-photo{grid-template-columns:1fr;gap:1.25rem;}}
  .service-block .service-photo{aspect-ratio:4/3;overflow:hidden;border-radius:18px;}
  .service-block .service-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .service-block .num{
    font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark);
    display:flex;align-items:center;gap:.6rem;
  }
  .service-block.has-photo .num{margin-bottom:.6rem;}
  .service-block .num .tri{
    width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:15px solid var(--gold);
  }
  .service-block h3{font-size:1.5rem;text-transform:uppercase;margin-bottom:.75rem;}
  .service-block p{color:var(--muted);font-size:1rem;line-height:1.7;margin:0 0 1rem;}
  .service-block.pilates-block .num .tri{border-bottom-color:var(--sage-deep);}
  .service-block.pilates-block .num{color:var(--sage-deep);}

  /* ---------- FEATURE BLOCK (alternating image+text, physiotherapy page) ---------- */
  /* Deliberately a new, separate component rather than reusing .service-block.has-photo:
     that shared class has no mobile override for its grid-template-columns, so — because
     `.service-block.has-photo` (2 classes) is more specific than the `.service-block`
     mobile media-query rule (1 class) — it never actually collapses to one column on
     mobile on ANY page that uses it (personal-training, elite-performance, youth-performance,
     soft-tissue, services.html included). That's a pre-existing site-wide bug, out of scope
     to fix here since it would change unrelated pages' rendering — flagged separately for a
     dedicated fix. This component is built correctly from scratch: mobile-first single
     column (image, then text, matching source order) with two-column + alternating image
     side only added back in at the .service-block breakpoint (760px, matching the rest of
     the site's breakpoint family). */
  .feature-block{display:grid;grid-template-columns:1fr;gap:1.75rem;align-items:center;}
  .feature-block .feature-media{border-radius:20px;overflow:hidden;aspect-ratio:4/3;}
  .feature-block .feature-media img{width:100%;height:100%;object-fit:cover;display:block;}
  .feature-block .feature-text p{color:var(--muted);font-size:1.03rem;line-height:1.75;margin:0 0 1.1rem;}
  .feature-block .feature-text p:last-child{margin-bottom:0;}
  @media (min-width:761px){
    .feature-block{grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.5rem);}
    .feature-block.reverse .feature-media{order:2;}
    .feature-block.reverse .feature-text{order:1;}
  }

  /* ---------- CONDITION GRID (physiotherapy page) ---------- */
  .condition-grid{
    display:grid;grid-template-columns:1fr;gap:.85rem;
    max-width:820px;margin:1.75rem 0;
  }
  @media (min-width:641px){.condition-grid{grid-template-columns:1fr 1fr;gap:1rem;}}
  .condition-tile{
    display:flex;align-items:center;gap:1rem;
    background:var(--cream);border:1px solid #e9e7dd;border-radius:12px;
    padding:.9rem 1.25rem;
  }
  .condition-tile .accent{width:5px;align-self:stretch;border-radius:4px;background:var(--gold);flex-shrink:0;}
  .condition-tile span{font-weight:600;color:var(--navy);font-size:.95rem;line-height:1.4;}

  /* ---------- PROCESS CARDS (what to expect, physiotherapy page) ---------- */
  .process-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;}
  @media (min-width:641px){.process-grid{grid-template-columns:1fr 1fr;gap:1.5rem;}}
  .process-card{
    background:var(--white);border:1px solid #e9e7dd;border-radius:18px;
    padding:1.75rem;display:flex;flex-direction:column;gap:.85rem;
  }
  .process-card .step-num{
    font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark);
    display:flex;align-items:center;gap:.6rem;
  }
  .process-card .step-num .tri{
    width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:15px solid var(--gold);
  }
  .process-card .ic{
    width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--gold);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .process-card .ic svg{width:21px;height:21px;}
  .process-card h3{font-size:1.15rem;text-transform:uppercase;margin:0;}
  .process-card p{color:var(--muted);font-size:.94rem;line-height:1.65;margin:0;}

  /* ---------- BENEFIT GRID (why choose Ascension, physiotherapy page) ---------- */
  .benefit-grid{display:grid;grid-template-columns:1fr;gap:1rem;}
  @media (min-width:481px){.benefit-grid{grid-template-columns:1fr 1fr;}}
  @media (min-width:921px){.benefit-grid{grid-template-columns:repeat(4,1fr);gap:1.25rem;}}
  .benefit-tile{
    background:var(--white);border:1px solid #e9e7dd;border-radius:14px;
    padding:1.5rem 1.25rem;display:flex;flex-direction:column;gap:.85rem;
  }
  .benefit-tile .ic{
    width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--gold);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .benefit-tile .ic svg{width:17px;height:17px;}
  .benefit-tile span{font-weight:600;color:var(--navy);font-size:.92rem;line-height:1.45;}

  /* ---------- COMPACT SECTION / REVIEW BADGE ON LIGHT (physiotherapy page) ---------- */
  .content-section.compact{padding:clamp(2rem,5vw,3rem) 0;}
  /* .review-badge is styled white-on-transparent for dark hero backgrounds by default —
     this is the light-background equivalent, same convention as .btn-outline-navy. */
  .review-badge.on-light{background:var(--cream);border-color:#e9e7dd;}
  .review-badge.on-light:hover{background:#efece1;border-color:#ddd9c9;}
  .review-badge.on-light span.label{color:var(--navy);}

  /* .physio-cta: wraps the two in-content buttons on the physiotherapy page. .btn is inline-level,
     so inside the left-aligned .wrap/.feature-text it sat flush left on mobile. The wrapper is a
     plain block (no visual change) until 640px, then centres its button. */
  /* .cta-center-mobile: the same behaviour as .physio-cta, as a generic wrapper for other pages (performance-team.html) */
  @media (max-width:640px){
    .cta-center-mobile{display:flex;justify-content:center;flex-wrap:wrap;}
    .cta-center-mobile .btn{justify-content:center;text-align:center;max-width:100%;}
  }
  @media (max-width:640px){
    .physio-cta{display:flex;justify-content:center;}
    .physio-cta .btn{justify-content:center;text-align:center;max-width:100%;}
  }

  /* ---------- SPORTS MASSAGE PAGE (soft-tissue-therapy-sports-massage/) ---------- */
  /* Builds on the physiotherapy page components above (.feature-block, .condition-grid,
     .process-grid, .benefit-grid, .faq-list). Everything here is either a new class or
     scoped to a context the physiotherapy page doesn't use, so that page is unaffected. */
  .massage-hero{--hero-pos:45%;}
  .massage-hero h1{max-width:900px;text-wrap:balance;}

  /* CTA button group (not .cta-row, which the Pilates final CTA already uses): wraps rather than overflowing, centred on mobile and in .final-cta */
  .cta-group{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.75rem;}
  .cta-group .btn{justify-content:center;text-align:center;}
  .final-cta .cta-group{justify-content:center;margin-top:0;}
  @media (max-width:640px){.cta-group{justify-content:center;}}

  /* Inline links inside feature text and FAQ answers (global a{} reset hides them otherwise) */
  .feature-block .feature-text p a,.faq-item p a{color:var(--navy);text-decoration:underline;text-decoration-color:rgba(18,18,68,.25);}
  .feature-block .feature-text p a:hover,.faq-item p a:hover{color:var(--gold-dark);text-decoration-color:var(--gold);}

  /* Short list inside .feature-text, gold triangle markers matching .eyebrow */
  .tick-list{display:grid;gap:.6rem;margin:0 0 1.25rem;}
  .tick-list li{position:relative;padding-left:1.5rem;color:var(--navy);font-weight:600;font-size:.97rem;line-height:1.45;}
  .tick-list li::before{
    content:"";position:absolute;left:0;top:.3em;width:0;height:0;
    border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:9px solid var(--gold);
  }

  /* Background contrast when these grids sit on the opposite section tone to the physio page */
  .content-section.alt .condition-tile{background:var(--white);}
  .content-section:not(.alt) .process-card,
  .content-section:not(.alt) .benefit-tile{background:var(--cream);}
  .section-head p.section-intro{color:var(--muted);font-size:1.03rem;line-height:1.7;margin:1rem 0 0;}

  /* Four compact steps in one row on desktop, 2x2 on tablet, stacked on mobile */
  @media (min-width:921px){
    .process-grid.cols-4{grid-template-columns:repeat(4,1fr);gap:1.25rem;}
    .process-grid.cols-4 .process-card{padding:1.5rem;}
  }

  /* Technique cards: photo on top (mobile + desktop), photo beside text on tablet */
  .technique-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;}
  .technique-card{
    background:var(--white);border:1px solid #e9e7dd;border-radius:18px;overflow:hidden;
    display:flex;flex-direction:column;
  }
  .technique-media{aspect-ratio:3/2;overflow:hidden;}
  .technique-media img{width:100%;height:100%;object-fit:cover;display:block;}
  .technique-body{padding:1.5rem 1.6rem 1.75rem;display:flex;flex-direction:column;gap:.75rem;}
  .technique-body .step-num{
    font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark);
    display:flex;align-items:center;gap:.6rem;
  }
  .technique-body .step-num .tri{
    width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:15px solid var(--gold);
  }
  .technique-body h3{font-size:1.15rem;text-transform:uppercase;line-height:1.2;text-wrap:balance;}
  .technique-body p{color:var(--muted);font-size:.94rem;line-height:1.65;margin:0;}
  @media (min-width:641px) and (max-width:920px){
    .technique-card{display:grid;grid-template-columns:.85fr 1fr;}
    .technique-media{position:relative;aspect-ratio:auto;min-height:220px;}
    .technique-media img{position:absolute;inset:0;}
  }
  @media (min-width:921px){.technique-grid{grid-template-columns:repeat(3,1fr);}}

  /* Practitioner section reuses .team-bio-row; centre the shorter text beside the portrait */
  .team-bio-row.practitioner-row{align-items:center;}
  @media (min-width:521px) and (max-width:800px){.team-bio-row.practitioner-row .team-photo{max-width:420px;}}

  /* .feature-block.stack-tablet: stays single column until 921px, so tablets don't get a
     small image beside a long text column (physiotherapy page keeps the base behaviour) */
  @media (min-width:761px) and (max-width:920px){
    .feature-block.stack-tablet{grid-template-columns:1fr;}
    .feature-block.stack-tablet .feature-media,.feature-block.stack-tablet .feature-text{order:0;}
    .feature-block.stack-tablet .feature-media{aspect-ratio:16/9;}
  }

  /* Two genuine Google reviews beneath the practitioner section */
  .review-pair-title{font-size:1.15rem;text-transform:uppercase;margin:clamp(3rem,6vw,4rem) 0 1.25rem;}
  .review-pair{display:grid;grid-template-columns:1fr;gap:1.25rem;}
  @media (min-width:761px){.review-pair{grid-template-columns:1fr 1fr;}}
  .review-pair .review-card{flex:none;}
  .review-pair-link{margin-top:1.5rem;}
  @media (max-width:640px){.review-pair-link{text-align:center;}}

  /* ---------- PERFORMANCE SERVICE PAGES (personal training, S&C, youth) ---------- */
  /* Reuse the physiotherapy/sports massage components above; only these additions are new. */
  .service-hero h1{max-width:900px;text-wrap:balance;}
  /* Coach section: square crop so the two-person performance team photo isn't cut at the sides */
  .team-bio-row.coach-row .team-photo{aspect-ratio:1/1;}
  /* Inline links inside team bios (global a{} reset hides them otherwise) */
  .team-info p a{color:var(--navy);text-decoration:underline;text-decoration-color:rgba(18,18,68,.25);}
  .team-info p a:hover{color:var(--gold-dark);text-decoration-color:var(--gold);}
  /* Benefit tiles: icon beside text on small phones instead of stacked, so eight tiles don't
     make a very long single column (physiotherapy/sports massage keep the stacked tile) */
  @media (max-width:480px){
    .benefit-grid.inline-mobile{gap:.75rem;}
    .benefit-grid.inline-mobile .benefit-tile{flex-direction:row;align-items:center;padding:1rem 1.1rem;}
  }

  /* ---------- CONTACT ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);}
  @media (max-width:880px){.contact-grid{grid-template-columns:1fr;}}
  .contact-info-block{display:flex;flex-direction:column;gap:1.75rem;}
  .contact-item{display:flex;gap:1rem;align-items:flex-start;}
  .contact-item .ic{
    width:42px;height:42px;border-radius:50%;background:var(--navy);color:var(--gold);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem;font-weight:800;
  }
  .contact-item .ic svg{width:20px;height:20px;}
  /* <h3> (was <h4>); weight and line-height pinned to the previous <h4> rendering */
  .contact-item h3{margin:0 0 .3rem;font-size:.95rem;font-weight:700;line-height:normal;text-transform:uppercase;letter-spacing:.04em;}
  .contact-item p, .contact-item a{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6;}
  .contact-item a:hover{color:var(--navy);}

  form.contact-form{display:flex;flex-direction:column;gap:1.1rem;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
  @media (max-width:520px){.form-row{grid-template-columns:1fr;}}
  .contact-form label{
    font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);
    display:block;margin-bottom:.4rem;
  }
  .contact-form input, .contact-form textarea{
    width:100%;padding:.85rem 1rem;border-radius:10px;border:1.5px solid #ddd9c9;
    font-family:'Archivo',sans-serif;font-size:.95rem;color:var(--ink);background:var(--white);
  }
  .contact-form input:focus, .contact-form textarea:focus{outline:2px solid var(--gold);border-color:var(--gold);}
  .contact-form textarea{min-height:140px;resize:vertical;}
  .contact-form .btn{align-self:flex-start;margin-top:.5rem;border:none;}

  .map-embed{
    border-radius:18px;overflow:hidden;margin-top:2.5rem;border:1px solid #e9e7dd;
  }
  .map-embed iframe{width:100%;height:340px;border:0;display:block;}

  /* ---------- THANK YOU PAGE ---------- */
  /* Scoped overrides so this section centres reliably rather than inheriting the left-aligned
     defaults from .content-narrow/.contact-item (flex children default to align-items:flex-start,
     text defaults to left) — everything here shares one centre line at every breakpoint. */
  .thank-you-content{max-width:600px;margin:0 auto;text-align:center;}
  .thank-you-content .eyebrow{justify-content:center;}
  .thank-you-content p{color:var(--muted);font-size:1.05rem;line-height:1.75;margin:1.25rem auto;max-width:520px;}
  .thank-you-content h2{margin:2.25rem 0 .75rem;font-size:clamp(1.25rem,2vw,1.5rem);}
  .thank-you-content .contact-item{display:inline-flex;text-align:left;margin:.5rem 0 2.25rem;}
  .thank-you-content .btn{margin-top:.5rem;}

  /* ---------- FAQ ACCORDION ---------- */
  /* Native <details>/<summary> rather than a JS-built accordion — the project has no
     established accordion pattern, and this keeps the full Q&A content in the rendered
     HTML with no JavaScript, while remaining fully keyboard-operable by default. */
  .faq-list{display:flex;flex-direction:column;gap:1rem;max-width:760px;}
  .faq-item{background:var(--white);border:1px solid #e9e7dd;border-radius:14px;padding:0 1.5rem;}
  .faq-item summary{
    cursor:pointer;list-style:none;
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:1.25rem 0;font-weight:700;color:var(--navy);font-size:1rem;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--gold-dark);flex-shrink:0;}
  .faq-item[open] summary::after{content:"–";}
  .faq-item summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}
  .faq-item p{color:var(--muted);font-size:.95rem;line-height:1.7;margin:0 0 1.25rem;}

  /* ============ REFORMER PILATES THEME ============ */
  .pilates-body{background:var(--white);}

  header.pilates-header{
    position:sticky;top:0;z-index:100;
    background:rgba(61,74,56,0.72);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:2px solid transparent;
    border-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%) 1;
  }
  .pilates-header .logo-mark img{height:92px;width:auto;object-fit:contain;}
  /* The Pilates logo is a near-square mark, so at the same rendered height it occupies far less
     horizontal width than the physio wordmark (~91px vs ~161px). .nav-row is a 3-item flex row
     (logo / nav / cta) with justify-content:space-between, so that width difference pulls the nav
     links noticeably left/close to the logo compared to the physio header. Reserve the same
     horizontal footprint as the physio logo so nav position matches between the two themes,
     without changing the Pilates logo's own size (kept large per earlier explicit "prefer
     oversizing" feedback — see PROJECT_MEMORY.md). */
  .pilates-header .logo-mark{padding-right:70px;}
  @media (max-width:480px){
    .pilates-header .logo-mark img{height:64px;}
    .pilates-header .logo-mark{padding-right:52px;}
  }
  .pilates-header nav.primary a{color:var(--white);opacity:.9;}
  .pilates-header nav.primary a:hover{opacity:1;}
  .pilates-header nav.primary a.physio-link{color:#dbe3d7;font-weight:700;opacity:1;}
  /* Desktop nav contrast (WCAG AA in every scroll position). Worst case is white page content behind the glass:
     85% #3d4a38 over white = #5a6556. White links at their 90% opacity: 5.33:1; the pale sage (--sage-line)
     cross-link at full opacity: 4.65:1; the white focus outline: 6.11:1. Darker content behind the glass only
     raises these. Scoped to >=901px so the mobile header bar and cream dropdown are unchanged. */
  @media (min-width:901px){
    header.pilates-header{background:rgba(61,74,56,0.85);}
    .pilates-header a:focus-visible{outline:2px solid var(--white);outline-offset:4px;}
  }
  .pilates-header .btn-gold{background:var(--white);color:#3d4a38;}
  .pilates-header .btn-gold:hover{background:#f0f2ee;}
  .pilates-header nav.primary a.nav-book{background:#3d4a38;color:var(--white);}
  .pilates-header .menu-toggle{color:var(--white);}

  @media (max-width:900px){
    .pilates-header nav.primary{
      background:var(--cream);
      border-bottom:1px solid rgba(66,81,61,.15);
      box-shadow:0 24px 40px -20px rgba(66,81,61,.35);
    }
    .pilates-header nav.primary a{
      color:#3d4a38;
      border-top:1px solid rgba(66,81,61,.12);
      opacity:1;
    }
    .pilates-header nav.primary a.physio-link{color:var(--navy);}
    .pilates-header nav.primary a:hover{color:var(--sage-deep);}
  }

  /* --hero-img/--hero-img-mobile: see path-resolution note on .page-hero above. */
  .pilates-hero{
    position:relative;
    min-height:78vh;
    display:flex;align-items:flex-end;
    background:linear-gradient(180deg, rgba(66,81,61,.72) 0%, rgba(66,81,61,.32) 20%, rgba(66,81,61,.5) 45%, rgba(35,44,32,.82) 100%), var(--hero-img) center/cover no-repeat;
    color:var(--white);
    clip-path:polygon(0 0,100% 0,100% 92%,0 100%);
    padding-bottom:clamp(3.5rem,8vw,6rem);
  }
  @media (max-width:820px){
    .pilates-hero{
      min-height:85vh;
      background-image:linear-gradient(180deg, rgba(66,81,61,.72) 0%, rgba(66,81,61,.32) 20%, rgba(66,81,61,.5) 45%, rgba(35,44,32,.82) 100%), var(--hero-img-mobile, var(--hero-img));
      background-position:center;
    }
  }
  .pilates-hero .press-badge{
    display:flex;width:fit-content;align-items:center;gap:.7rem;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
    border-radius:999px;padding:.5rem 1.1rem;margin-top:1.25rem;
    font-size:.78rem;font-weight:600;
    cursor:pointer;transition:background .18s ease,border-color .18s ease;
  }
  .pilates-hero .press-badge:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5);}
  .pilates-hero .press-badge img{height:30px;width:auto;flex-shrink:0;}
  .pilates-hero h1{font-size:clamp(2.3rem,5vw,3.8rem);text-transform:uppercase;}
  .pilates-hero p.lede{margin:1.4rem 0 2rem;font-size:clamp(1rem,1.5vw,1.2rem);max-width:560px;color:#ffffff;font-weight:500;}
  .pilates-hero .hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;}
  .pilates-hero .btn-outline{border-color:rgba(255,255,255,.9);}
  .pilates-hero .btn-outline:hover{background:rgba(255,255,255,.12);}
  .btn-pilates-primary{background:var(--white);color:#3d4a38;}
  .btn-pilates-primary:hover{background:#f0f2ee;}

  .pilates-section{padding:clamp(3.5rem,7vw,6rem) 0;}
  .pilates-section.tinted{background:#f4f6f2;}
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.5rem;}
  @media (max-width:880px){.why-grid{grid-template-columns:1fr;}}
  .why-card{background:var(--white);border:1px solid var(--sage-line);border-radius:18px;padding:2rem;}
  .why-card .tri-sage{width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:18px solid var(--sage-deep);margin-bottom:1rem;}
  .why-card h3{font-size:1.1rem;text-transform:uppercase;color:#3d4a38;margin-bottom:.6rem;}
  .why-card p{color:#5c6957;font-size:.94rem;line-height:1.6;margin:0;}

  .pilates-gallery{display:grid;grid-template-columns:1.1fr 1fr;gap:1.5rem;align-items:center;}
  @media (max-width:880px){.pilates-gallery{grid-template-columns:1fr;}}
  .pilates-gallery img{border-radius:18px;width:100%;object-fit:cover;}
  .pilates-gallery .copy p{color:#5c6957;font-size:1.02rem;line-height:1.75;margin:0 0 1.25rem;}
  /* Education/first-class sections: image on the right on desktop (DOM order kept image-first
     so mobile still shows image then text), portrait crop so tall phone photos don't dominate */
  @media (min-width:881px){.pilates-gallery.reverse img{order:2;}}
  .pilates-gallery img.portrait{aspect-ratio:4/5;max-height:620px;}
  .why-grid.two{grid-template-columns:repeat(2,1fr);}
  @media (max-width:880px){.why-grid.two{grid-template-columns:1fr;}}
  /* New education grids only: tighter cards on tablet/mobile so six benefit cards don't make a very long column */
  @media (max-width:880px){
    .why-grid.compact{gap:1rem;margin-top:1.75rem;}
    .why-grid.compact .why-card{padding:1.35rem 1.5rem;}
    .why-grid.compact .tri-sage{border-left-width:8px;border-right-width:8px;border-bottom-width:13px;margin-bottom:.7rem;}
  }
  .pilates-intro{color:#5c6957;font-size:1.02rem;line-height:1.75;max-width:760px;margin:1rem 0 0;}
  .pilates-note{background:var(--white);border:1px solid var(--sage-line);border-left:5px solid var(--sage-deep);border-radius:14px;padding:1.5rem 1.75rem;margin-top:2.5rem;max-width:860px;}
  .pilates-note h3{font-size:1rem;text-transform:uppercase;color:#3d4a38;margin-bottom:.6rem;}
  .pilates-note p{color:#5c6957;font-size:.95rem;line-height:1.7;margin:0;}
  .pilates-gallery .copy p a,.pilates-body .faq-item p a,.pilates-sources a{color:#3d4a38;text-decoration:underline;text-decoration-color:rgba(61,74,56,.35);}
  .pilates-gallery .copy p a:hover,.pilates-body .faq-item p a:hover,.pilates-sources a:hover{color:var(--sage-deep);text-decoration-color:var(--sage-deep);}
  /* Sage versions of the shared .faq-item accordion (base styling is navy/gold) */
  .pilates-body .faq-list{margin-top:2rem;}
  .pilates-body .faq-item{border-color:var(--sage-line);}
  .pilates-body .faq-item summary{color:#2c3628;}
  .pilates-body .faq-item summary::after{color:var(--sage-deep);}
  .pilates-body .faq-item summary:focus-visible{outline-color:var(--sage-deep);}
  .pilates-body .faq-item p{color:#5c6957;}
  /* Compact sources list above the press strip */
  .pilates-sources{padding:2.25rem 0 2.5rem;border-top:1px solid var(--sage-line);}
  .pilates-sources h2{font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:#3d4a38;}
  .pilates-sources p{color:#5f6b5a;font-size:.85rem;margin:.5rem 0 .9rem;}
  .pilates-sources ul{list-style:disc;padding-left:1.25rem;display:grid;gap:.45rem;}
  .pilates-sources li{color:#5c6957;font-size:.88rem;line-height:1.55;}
  .ext-note{font-size:.8em;}
  /* Reformer Burners card: dark green "hot" variant of .why-card with a flame icon, tag and faint flame watermark (decorative, aria-hidden) */
  .why-card.burners-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#3d4a38 0%,#2c3628 100%);border-color:#2c3628;}
  .burners-card > :not(.flame-bg){position:relative;}
  .burners-card h3{color:var(--white);}
  .burners-card p{color:rgba(255,255,255,.82);}
  .burners-top{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;}
  .burners-card .flame-icon{width:48px;height:48px;border-radius:50%;background:rgba(184,199,178,.22);color:var(--sage);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .burners-card .flame-icon svg{width:30px;height:30px;transform-origin:50% 90%;animation:flame-flicker 2.4s ease-in-out infinite;}
  .burn-tag{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#2c3628;background:var(--sage);border-radius:999px;padding:.35rem .75rem;}
  .burners-card .flame-bg{position:absolute;right:-18px;bottom:-22px;width:150px;height:150px;color:var(--sage);opacity:.2;pointer-events:none;}
  .burners-card .flame-bg.small{right:112px;bottom:-14px;width:70px;height:70px;opacity:.12;}
  @media (max-width:520px){.burners-card .flame-bg.small{right:92px;}}
  @keyframes flame-flicker{0%,100%{transform:scale(1) rotate(0);}30%{transform:scale(1.06,1.1) rotate(-2deg);}60%{transform:scale(.97,1.03) rotate(2deg);}}
  @media (prefers-reduced-motion:reduce){.burners-card .flame-icon svg{animation:none;}}
  .pilates-small{color:#5f6b5a;font-size:.88rem;line-height:1.6;margin:1.25rem 0 0;}
  .pilates-cta{margin-top:1.5rem;}
  @media (max-width:640px){.pilates-cta{text-align:center;}}

  /* New customer offer banner, shared by all Reformer pages (index, book, contact, thank-you) */
  .pilates-offer{padding:clamp(1.75rem,4vw,2.75rem) 0;}
  .pilates-offer-box{
    background:linear-gradient(135deg,#3d4a38 0%,#2c3628 100%);color:var(--white);
    border-radius:20px;padding:clamp(1.5rem,3.5vw,2.25rem) clamp(1.5rem,4vw,2.75rem);
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem 2.25rem;
    position:relative;overflow:hidden;
  }
  .pilates-offer-box > :not(.offer-arches){position:relative;}
  /* Tablet: button drops under the copy, aligned with it rather than under the badge */
  @media (max-width:1000px){
    .pilates-offer-box{grid-template-columns:auto 1fr;}
    .pilates-offer-box > .btn{grid-column:2;justify-self:start;}
  }
  .pilates-offer .offer-title{font-size:clamp(1.9rem,4vw,2.8rem);text-transform:uppercase;margin:.6rem 0 .5rem;color:var(--white);}
  .pilates-offer p{color:rgba(255,255,255,.82);font-size:.98rem;line-height:1.6;margin:0;max-width:560px;}
  .pilates-offer .btn{flex-shrink:0;}
  .pilates-offer p a{color:var(--white);text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);}
  .pilates-offer p a:hover{text-decoration-color:var(--white);}
  /* Decorative extras (all aria-hidden): studio-arch outlines, a voucher-style price badge with a gentle pulse, and a tag icon in the eyebrow */
  .offer-arches{position:absolute;right:-4px;bottom:-2px;width:280px;height:140px;color:var(--white);opacity:.09;pointer-events:none;}
  .offer-badge{
    width:116px;height:116px;border-radius:50%;flex-shrink:0;
    background:var(--sage);color:#2c3628;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    box-shadow:0 0 0 6px rgba(184,199,178,.2);
  }
  .offer-badge::before{content:"";position:absolute;inset:7px;border:1.5px dashed rgba(44,54,40,.45);border-radius:50%;}
  .offer-badge-price{font-size:2.25rem;font-weight:900;line-height:1;letter-spacing:-.02em;}
  .offer-badge-label{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:.35rem;}
  /* Pulse ring: a disc behind the badge scaled 128px -> 156px while fading (the same 6px -> 20px spread as the
     previous box-shadow pulse) using only transform/opacity, so it runs on the compositor. isolation on the box
     keeps the z-index:-1 disc above the box background. */
  .pilates-offer-box{isolation:isolate;}
  .offer-badge::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:rgba(184,199,178,.4);z-index:-1;pointer-events:none;animation:offer-pulse 2.8s ease-out infinite;}
  @keyframes offer-pulse{0%{transform:scale(1);opacity:1;}70%{transform:scale(1.21875);opacity:0;}100%{transform:scale(1.21875);opacity:0;}}
  @media (prefers-reduced-motion:reduce){.offer-badge::after{animation:none;display:none;}}
  .offer-eyebrow::before{display:none;}
  .offer-tag{width:15px;height:15px;flex-shrink:0;}
  /* The offer and the section after it would otherwise stack two full paddings */
  .pilates-offer + .pilates-section,.pilates-offer + .content-section{padding-top:clamp(1.25rem,3vw,2.25rem);}
  @media (max-width:640px){
    .pilates-offer-box{grid-template-columns:1fr;justify-items:center;text-align:center;}
    .pilates-offer-box > .btn{grid-column:1;justify-self:center;}
    .pilates-offer .eyebrow{justify-content:center;}
    .pilates-offer p{margin:0 auto;}
  }

  /* Booking page: short notes above the Glofox widget */
  .pilates-book-notes{display:grid;gap:.6rem;margin:0 0 1.5rem;padding:1.25rem 1.5rem;background:#f4f6f2;border:1px solid var(--sage-line);border-radius:14px;}
  .pilates-book-notes li{color:#5c6957;font-size:.92rem;line-height:1.55;padding-left:1.1rem;position:relative;}
  .pilates-book-notes li::before{content:"";position:absolute;left:0;top:.45em;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--sage-deep);}
  .pilates-book-notes strong{color:#2c3628;}

  .press-strip{background:#eef1ec;padding:2.25rem 0;text-align:center;}
  .press-strip img{height:56px;width:auto;margin:0 auto;opacity:.85;}
  .press-strip p{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#5f6b5a;margin-bottom:1rem;}

  .pilates-final-cta{
    background:linear-gradient(135deg,#3d4a38 0%, #2c3628 100%);
    color:var(--white);text-align:center;
    clip-path:polygon(0 8%,100% 0,100% 100%,0 100%);
  }
  .pilates-final-cta h2{font-size:clamp(2rem,4.2vw,3.2rem);text-transform:uppercase;}
  .pilates-final-cta p{color:rgba(255,255,255,.75);max-width:520px;margin:1.1rem auto 2.25rem;}
  .pilates-final-cta .cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}

  footer.pilates-footer{background:#2c3628;color:rgba(255,255,255,.75);padding:clamp(3rem,6vw,5rem) 0 2rem;}
  footer.pilates-footer .footer-grid{border-bottom:1px solid rgba(255,255,255,.12);}
  footer.pilates-footer .footer-col ul li a:hover{color:var(--white);}
  footer.pilates-footer .footer-bottom{color:rgba(255,255,255,.56);}  /* .5 gave 4.41:1 on #2c3628; .56 gives 5.15:1 (WCAG AA) */
  footer.pilates-footer .socials a:hover{color:var(--white);}
  footer.pilates-footer .footer-bottom a:hover{color:var(--white);}

  .eyebrow.on-pilates-dark{color:#ffffff;}
  .eyebrow.on-pilates-dark::before{border-bottom-color:#ffffff;}

  .pilates-body .breadcrumb a:hover{color:var(--sage);}
  .pilates-body .contact-item .ic{background:#3d4a38;color:var(--white);}
  .pilates-body .contact-item a:hover{color:var(--sage-deep);}
  .pilates-body .contact-form input:focus,
  .pilates-body .contact-form textarea:focus{outline:2px solid var(--sage-deep);border-color:var(--sage-deep);}

  /* ---------- REVIEW TRUST BADGE ---------- */
  .review-badge{
    display:inline-flex;align-items:center;gap:.6rem;
    margin-top:1.5rem;padding:.55rem 1.1rem;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    cursor:pointer;transition:background .18s ease,border-color .18s ease;
  }
  .review-badge:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);}
  .review-badge svg{width:16px;height:16px;flex-shrink:0;}
  .review-badge .stars{color:var(--gold);font-size:.85rem;letter-spacing:1px;}
  .review-badge span.label{font-size:.82rem;color:rgba(255,255,255,.85);font-weight:500;}

  /* ---------- REVIEWS CAROUSEL ---------- */
  .reviews-carousel{background:var(--cream);overflow:hidden;}
  .reviews-track{
    display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:.5rem;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .reviews-track::-webkit-scrollbar{display:none;}
  .review-card{
    scroll-snap-align:start;flex:0 0 min(360px,85vw);
    background:var(--white);border:1px solid #e9e7dd;border-radius:18px;
    padding:1.75rem;display:flex;flex-direction:column;gap:.9rem;
  }
  .review-card .stars{color:var(--gold);font-size:.95rem;letter-spacing:2px;}
  .review-card p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.6;flex-grow:1;}
  .review-card .reviewer{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;}
  .review-card .reviewer strong{color:var(--navy);font-weight:700;}
  .review-card .reviewer span{color:var(--muted);}
  .reviews-nav{display:flex;gap:.75rem;margin-top:1.75rem;}
  .reviews-nav button{
    width:42px;height:42px;border-radius:50%;border:1.5px solid var(--navy);
    background:var(--white);color:var(--navy);cursor:pointer;font-size:1rem;
    display:flex;align-items:center;justify-content:center;transition:background .18s ease,color .18s ease;
  }
  .reviews-nav button:hover{background:var(--navy);color:var(--white);}

  /* ---------- PILATES STUDIO GALLERY CAROUSEL ---------- */
  .gallery-track{
    display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:.5rem;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .gallery-track::-webkit-scrollbar{display:none;}
  .gallery-track img{
    scroll-snap-align:start;flex:0 0 min(300px,78vw);
    height:380px;width:min(300px,78vw);object-fit:cover;border-radius:18px;
  }
  .pilates-gallery-carousel .reviews-nav button{border-color:#3d4a38;color:#3d4a38;}
  .pilates-gallery-carousel .reviews-nav button:hover{background:#3d4a38;color:var(--white);}

  /* ---------- PILATES REVIEWS CAROUSEL ---------- */
  .pilates-reviews{background:#f4f6f2;}
  .pilates-reviews .review-card{border-color:var(--sage-line);}
  .pilates-reviews .review-card .stars{color:var(--sage-deep);}
  .pilates-reviews .review-card .reviewer strong{color:#2c3628;}
  .pilates-reviews .review-card .reviewer span{color:#5f6b5a;}
  .pilates-reviews .reviews-nav button{border-color:#3d4a38;color:#3d4a38;}
  .pilates-reviews .reviews-nav button:hover{background:#3d4a38;color:var(--white);}
  .pilates-reviews .review-card p{color:#5f6b5a;}
  .pilates-review-badge .stars{color:#ffffff;}

  /* ---------- BOOKING WIDGET RESPONSIVE HEIGHT ---------- */
  .booking-iframe{width:100%;display:block;}
  @media (max-width:640px){
    .booking-iframe{height:900px !important;}
  }