:root{
    --navy:      #222D3F;
    --navy-2:    #2A3548;
    --olive:     #998651;
    --olive-dim: #7C6D41;
    --beige:     #EEE5CD;
    --dusky:     #9CA6B5;
    --black:     #000000;
    --line:      rgba(238,229,205,0.14);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  body{
    background:var(--navy);
    color:var(--beige);
    font-family:'Montserrat', sans-serif;
    line-height:1.6;
    overflow-x:hidden;
  }

  h1,h2,h3,.display{
    font-family:'Reem Kufi', sans-serif;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.01em;
    line-height:0.95;
  }

  .eyebrow{
    font-family:'Montserrat', sans-serif;
    font-weight:600;
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--olive);
    display:flex;
    align-items:center;
    gap:0.6rem;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:2px;
    background:var(--olive);
    display:inline-block;
  }

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

  /* The hidden attribute only works through the browser's own
     [hidden]{display:none}, which ANY author display rule outranks.
     .interest-redirect sets display:grid, so its hidden attribute did nothing
     and an empty panel with an empty gold button sat on the contact page
     permanently. This makes the attribute mean what it says, everywhere. */
  [hidden]{ display:none !important; }

  :focus-visible{
    outline:3px solid var(--olive);
    outline-offset:3px;
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 clamp(1.25rem, 4vw, 3rem);
  }

  /* ---------- NAV ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    background:rgba(28,27,25,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.1rem clamp(1.25rem, 4vw, 3rem);
    max-width:1180px;
    margin:0 auto;
  }
  .logo{
    display:flex;
    align-items:center;
    color:var(--beige);
  }
  .nav-links a[aria-current="page"]{ color:var(--beige); }

  /* ---------- SUBPAGE HEADER ---------- */
  .subpage-hero{ padding-top:9rem; }
  .subpage-hero .eyebrow{ justify-content:flex-start; }

  /* ---------- EXPLORE CARDS (home) ---------- */
  .explore-card{
    text-decoration:none;
  }
  .explore-card .btn{ margin-top:auto; }

  /* ---------- ATHLETE TRUST STRIP (home) ---------- */
  .athlete-strip{
    display:flex;
    flex-wrap:wrap;
    gap:1.6rem 2.4rem;
    padding:2.2rem 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .athlete-strip-item{
    display:flex;
    align-items:center;
    gap:0.9rem;
  }
  .athlete-avatar{
    width:44px;
    height:44px;
    border-radius:50%;
    flex-shrink:0;
    overflow:hidden;
    background:
      linear-gradient(160deg, rgba(153,134,81,0.35), rgba(156,166,181,0.2)),
      repeating-linear-gradient(135deg, #2c2a26, #2c2a26 6px, #262420 6px, #262420 12px);
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Reem Kufi', sans-serif;
    font-size:0.85rem;
    color:var(--olive);
  }
  .athlete-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .athlete-strip-item h3{
    font-family:'Montserrat', sans-serif;
    text-transform:none;
    font-weight:700;
    font-size:0.98rem;
    color:var(--beige);
    margin-bottom:0.1rem;
  }
  .athlete-strip-item p{ color:var(--dusky); font-size:0.8rem; }

  /* ---------- STAR RATING ---------- */
  .star-row{
    display:flex;
    justify-content:center;
    gap:0.3rem;
    margin-bottom:0.7rem;
  }
  .star-row svg{ width:20px; height:20px; fill:var(--olive); }

  .review-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:1.2rem;
    margin-top:2.6rem;
    text-align:left;
  }
  .review-card{
    background:var(--navy-2);
    border:1px solid var(--line);
    border-radius:4px;
    padding:1.5rem 1.4rem;
  }
  .review-card p{
    font-size:0.92rem;
    color:var(--beige);
    line-height:1.6;
  }
  .review-card p::before{ content:"\201C"; }
  .review-card p::after{ content:"\201D"; }
  .review-name{
    margin-top:1rem;
    font-size:0.8rem;
    color:var(--olive);
    font-weight:600;
  }

  /* ---------- COMMUNITY (home) ---------- */
  .community-quote{
    margin-top:2.6rem;
    max-width:680px;
    border-left:3px solid var(--olive);
    padding-left:1.6rem;
  }
  .community-quote p{
    font-family:'Reem Kufi', sans-serif;
    text-transform:uppercase;
    font-size:clamp(1.25rem, 2.6vw, 1.75rem);
    line-height:1.2;
    color:var(--beige);
  }
  .community-quote cite{
    display:block;
    margin-top:0.9rem;
    font-style:normal;
    font-size:0.85rem;
    font-weight:600;
    color:var(--olive);
  }
  /* The brand Primary lockup, 2066x320. Height-driven so the aspect ratio
     is never forced — setting both dimensions squashes the wordmark. */
  .logo-lockup{
    height:22px;
    width:auto;
    flex-shrink:0;
    display:block;
  }
  .footer-lockup{ height:26px; }
  .nav-links{
    display:flex;
    gap:1.5rem;
    font-size:0.88rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    font-weight:600;
  }
  .nav-links a{
    position:relative;
    padding:0.3rem 0;
    color:var(--dusky);
    transition:color 0.2s ease;
    white-space:nowrap;
  }
  .nav-links a::after{
    content:"";
    position:absolute; left:0; bottom:0;
    width:0; height:2px;
    background:var(--olive);
    transition:width 0.25s ease;
  }
  .nav-links a:hover, .nav-links a:focus-visible{ color:var(--beige); }
  .nav-links a:hover::after, .nav-links a:focus-visible::after{ width:100%; }

  .nav-cta{
    background:var(--olive);
    color:var(--beige) !important;
    padding:0.65rem 1.3rem;
    font-size:0.82rem;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    border-radius:2px;
    white-space:nowrap;
    flex-shrink:0;
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .nav-cta:hover{ background:var(--olive-dim); transform:translateY(-1px); }


  .nav-toggle{ display:none; }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    padding-top:9rem;
    overflow:hidden;
  }
  .hero-photo-bg{
    position:absolute;
    inset:0;
    background-image:url('../images/hero-bg.webp');
    background-size:cover;
    background-position:center 60%;
    z-index:0;
  }
  .hero-photo-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(100deg, var(--navy) 0%, rgba(28,27,25,0.94) 32%, rgba(28,27,25,0.55) 60%, rgba(28,27,25,0.25) 100%),
      linear-gradient(0deg, var(--navy) 0%, transparent 18%);
  }
  .hero-grid{ position:relative; z-index:1; width:100%; }
  /* 700px, not 640: at the top of the h1 clamp "performance gym." measures
     ~665px, and .hero's overflow:hidden clipped the overhang rather than
     showing it. Widened the copy column instead of shrinking the type. */
  .hero-grid > div{ max-width:700px; }
  .hero h1{
    /* 2rem floor, not 2.8rem: "PERFORMANCE" is the longest word in the
       headline and overflowed the 280px content box on a 320px screen,
       where .hero's overflow:hidden clipped it rather than scrolling. */
    font-size:clamp(2rem, 6.4vw, 5.2rem);
    margin:1rem 0 1.4rem;
  }
  .hero h1 .line2{ color:var(--olive); }
  .hero p.lede{
    max-width:480px;
    /* --beige, not --dusky: over the hero photo scrim dusky measures 3.42:1,
       below the 4.5:1 AA floor. Beige measures 6.7:1. */
    color:var(--beige);
    font-size:1.08rem;
    margin-bottom:2.1rem;
  }
  .hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; }
  .hero-cta-note{
    margin-top:0.9rem;
    font-size:0.85rem;
    color:var(--dusky);
  }

  .hero-rating{
    display:flex;
    align-items:center;
    gap:0.6rem;
    margin-top:1.3rem;
    font-size:0.85rem;
    color:var(--dusky);
  }
  .hero-rating strong{ color:var(--beige); font-weight:700; }
  .hero-rating-stars{ display:flex; gap:2px; flex-shrink:0; }
  .hero-rating-stars svg{ width:13px; height:13px; fill:var(--olive); }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.95rem 1.8rem;
    font-weight:700;
    font-size:0.9rem;
    letter-spacing:0.03em;
    text-transform:uppercase;
    border-radius:2px;
    border:2px solid transparent;
    cursor:pointer;
    transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  }
  .btn-primary{ background:var(--olive); color:var(--navy); }
  .btn-primary:hover{ background:var(--olive-dim); transform:translateY(-2px); }
  .btn-ghost{ border-color:var(--line); color:var(--beige); background:transparent; }
  .btn-ghost:hover{ border-color:var(--beige); transform:translateY(-2px); }

  .hero-stats{
    display:flex;
    gap:2.4rem;
    margin-top:3.2rem;
    padding-top:2rem;
    border-top:1px solid var(--line);
  }
  .stat-num{
    font-family:'Reem Kufi', sans-serif;
    font-size:2.1rem;
    color:var(--olive);
  }
  .stat-label{
    font-size:0.76rem;
    color:var(--dusky);
    letter-spacing:0.05em;
    text-transform:uppercase;
    margin-top:0.2rem;
  }
  /* Like .hero-stats but grid rather than flex, because it carries five items
     rather than three and has to wrap cleanly instead of squeezing. */
  .stat-strip{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
    gap:2rem 1.6rem;
    margin-top:2.6rem;
    padding-top:2rem;
    border-top:1px solid var(--line);
  }
  .sauna-photos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.2rem;
    margin-top:3rem;
  }

  /* ---------- SECTION shared ---------- */
  section{ padding:clamp(4rem, 9vw, 7.5rem) 0; }
  /* Section heading scale lives on the element, not on .section-head. Half the
     h2s on the site aren't wrapped in one, and they were falling back to the
     browser default — 24px against 32px for their neighbours on the same page.
     Context-specific sizes (.pass-form-card h2, .plate-tier) still override. */
  h2{
    font-size:clamp(2rem, 4.4vw, 3.1rem);
    margin-top:0.8rem;
  }
  .section-head{
    max-width:640px;
    margin-bottom:3.4rem;
  }
  /* Eligibility sits below the offer, smaller — it's a condition, not a
     selling point, and shouldn't compete with what the seven days contain. */
  .section-head .eligibility-note{
    font-size:0.85rem;
    color:var(--dusky);
    margin-top:0.7rem;
  }
  .section-head p{
    color:var(--dusky);
    margin-top:1rem;
    font-size:1.02rem;
  }

  /* ---------- ABOUT ---------- */
  .about{ background:var(--navy-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3.5rem;
    align-items:start;
  }
  .about-pillars{ display:grid; gap:1.6rem; }
  .pillar{
    display:flex;
    gap:1.1rem;
    padding-bottom:1.6rem;
    border-bottom:1px solid var(--line);
  }
  .pillar:last-child{ border-bottom:none; padding-bottom:0; }
  .pillar-mark{
    font-family:'Montserrat', sans-serif;
    color:var(--olive);
    font-weight:700;
    font-size:0.95rem;
    padding-top:0.15rem;
    /* The marks vary from "9" to "24/7", so without a floor the body text
       beside them starts at a different x in every pillar — a 27px ragged
       left edge down the column. */
    min-width:2.6rem;
    flex-shrink:0;
  }
  .pillar h3{
    font-family:'Montserrat', sans-serif;
    text-transform:none;
    font-weight:700;
    font-size:1.08rem;
    margin-bottom:0.35rem;
  }
  .pillar p{ color:var(--dusky); font-size:0.95rem; }


  .facility-gallery{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.2rem;
    margin-top:3rem;
  }
  .gallery-photo{
    aspect-ratio:4/3;
    overflow:hidden;
    border-radius:4px;
    border:1px solid var(--line);
  }
  .gallery-photo img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.4s ease;
  }
  .gallery-photo:hover img{ transform:scale(1.05); }

  /* ---------- PRICING (barbell plate concept) ---------- */
  .pricing-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    gap:1.2rem;
    /* stretch, not end: the cards used to be filled out by .plate-list's
       flex-grow, so bottom-aligning them looked deliberate. With the feature
       lists moved into the comparison table the cards have unequal content
       and align:end left them visibly ragged. */
    align-items:stretch;
  }
  .plate-card{
    background:var(--navy-2);
    border:1px solid var(--line);
    border-radius:4px;
    padding:1.8rem 1.4rem 1.7rem;
    position:relative;
    display:flex;
    flex-direction:column;
    transition:transform 0.25s ease, border-color 0.25s ease;
  }
  .plate-card:hover{ transform:translateY(-6px); border-color:rgba(153,134,81,0.5); }
  .plate-card.featured{
    background:linear-gradient(180deg, rgba(153,134,81,0.16), var(--navy-2) 40%);
    border-color:var(--olive);
  }
  /* The disc used to hold a bare plate number (0, 17, 23) and the real price
     sat in a .plate-price line underneath, so every card printed its price
     twice. The disc now IS the price, which is why it grew from 64px — it has
     to hold "$16.95" plus its unit rather than two digits. */
  .plate-disc{
    width:108px; height:108px;
    border-radius:50%;
    border:6px solid var(--dusky);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.1rem;
    margin-bottom:1.4rem;
    flex-shrink:0;
  }
  .plate-amount{
    font-family:'Reem Kufi', sans-serif;
    font-size:1.3rem;
    line-height:1;
    letter-spacing:0.01em;
  }
  .plate-unit{
    font-family:'Montserrat', sans-serif;
    font-size:0.62rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--dusky);
  }
  .plate-card.featured .plate-amount{ color:var(--olive); }
  .plate-card.featured .plate-disc{ border-color:var(--olive); color:var(--olive); }
  .plate-card:not(.featured) .plate-disc{ color:var(--dusky); }
  .plate-tier{ font-size:1.4rem; margin-bottom:0.3rem; }
  .plate-price{
    font-family:'Reem Kufi', sans-serif;
    font-size:2rem;
    color:var(--beige);
    margin:0.5rem 0 0.1rem;
  }
  .plate-price span{ font-family:'Montserrat'; font-size:0.95rem; color:var(--dusky); text-transform:none; }
  .plate-prepay{ color:var(--dusky); font-size:0.78rem; margin-bottom:1rem; }
  .plate-prepay strong{ color:var(--beige); font-weight:600; }
  .plate-desc{ color:var(--dusky); font-size:0.9rem; margin-bottom:1.6rem; }
  .plate-list{ list-style:none; display:grid; gap:0.7rem; margin-bottom:2rem; flex-grow:1; }
  .plate-list li{ font-size:0.9rem; display:flex; gap:0.6rem; }
  .plate-list li::before{ content:"—"; color:var(--olive); flex-shrink:0; }
  .plate-eligibility{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.8rem; }
  /* Takes over the job .plate-list's flex-grow used to do — pins the CTA and
     its note to the bottom so buttons line up across cards of unequal height. */
  .plate-card > .btn{
    margin-top:auto;
    /* nowrap keeps every CTA one line high, so a label a couple of characters
       longer than its neighbours can't knock the row out of alignment. Keep
       card CTAs under about 20 characters. */
    white-space:nowrap;
  }
  /* Reserve two lines so a one-line note doesn't sit a whole line higher than
     its neighbours and drag its CTA out of alignment with the rest of the row. */
  /* ---- CONTACT: MAP + INTEREST ROUTING ---- */
  .map-embed{
    margin-top:2.4rem;
    border:1px solid var(--line);
    border-radius:4px;
    overflow:hidden;
    aspect-ratio:16/9;
  }
  .map-embed iframe{ width:100%; height:100%; border:0; display:block; }
  @media (max-width:640px){ .map-embed{ aspect-ratio:4/3; } }

  .interest-redirect{
    border:1px solid var(--olive);
    border-radius:4px;
    padding:1.2rem 1.3rem;
    background:rgba(153,134,81,0.08);
    display:grid;
    gap:1rem;
  }
  .interest-redirect-text{ color:var(--beige); font-size:0.92rem; line-height:1.55; }

  /* ---- EQUIPMENT DIRECTORY (gym page) ---- */
  .equip-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:2.4rem 2rem;
  }
  .equip-col h3{
    font-family:'Montserrat', sans-serif;
    text-transform:uppercase;
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:0.16em;
    color:var(--olive);
    margin-bottom:1rem;
  }
  .equip-col ul{ list-style:none; display:grid; gap:0.6rem; }
  .equip-col li{
    font-size:0.92rem;
    color:var(--beige);
    display:flex;
    gap:0.6rem;
    line-height:1.45;
  }
  .equip-col li::before{ content:"—"; color:var(--olive); flex-shrink:0; }

  .label-optional{ color:var(--dusky); font-weight:400; text-transform:none; letter-spacing:0; }
  .plate-cta-note{
    color:var(--dusky); font-size:0.76rem; text-align:center;
    margin-top:0.7rem; min-height:3.2em;
  }

  /* ---- ANNUAL / FLEXI TOGGLE ---- */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  /* Both terms ship in the DOM; the inactive one is hidden here rather than
     swapped in JS, so annual pricing still renders if the script never runs. */
  .pricing-wrap[data-term="annual"] .term-flexi{ display:none; }
  .pricing-wrap[data-term="flexi"]  .term-annual{ display:none; }

  .term-toggle{
    display:inline-flex;
    margin-top:2.4rem;
    border:1px solid var(--line);
    border-radius:999px;
    padding:0.25rem;
    background:var(--navy-2);
  }
  .term-btn{
    font-family:'Montserrat', sans-serif;
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--dusky);
    background:none;
    border:0;
    border-radius:999px;
    padding:0.55rem 1.5rem;
    cursor:pointer;
    transition:background 0.15s, color 0.15s;
  }
  .term-btn:hover{ color:var(--beige); }
  .term-btn.is-on{ background:var(--olive); color:var(--navy); }
  .term-btn:focus-visible{ outline:2px solid var(--olive); outline-offset:2px; }
  .term-note{ color:var(--dusky); font-size:0.85rem; margin-top:0.9rem; }
  .pricing-wrap .pricing-grid{ margin-top:2.2rem; }

  /* ---------- INCLUDED WITH EVERY MEMBERSHIP ---------- */
  /* These four had no rules at all, so the block sat hard against the pricing
     cards with no gap, no rule and an unstyled bullet list. */
  .included-strip{
    margin-top:4rem;
    padding-top:2.6rem;
    border-top:1px solid var(--line);
  }
  .included-list{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:0.75rem 2rem;
    margin-top:1.6rem;
  }
  .included-list li{
    font-size:0.92rem;
    display:flex;
    gap:0.6rem;
  }
  .included-list li::before{
    content:"—";
    color:var(--olive);
    flex-shrink:0;
  }
  .included-note{
    color:var(--dusky);
    font-size:0.85rem;
    margin-top:1.2rem;
    max-width:640px;
  }
  .plate-free{ border-style:dashed; }


  /* ---------- FAQ ---------- */
  .faq-list{ display:grid; gap:1.6rem; max-width:720px; margin-top:2.2rem; }
  .faq-item{ padding-bottom:1.6rem; border-bottom:1px solid var(--line); }
  .faq-item:last-child{ border-bottom:none; padding-bottom:0; }
  .faq-item h3{
    font-family:'Montserrat', sans-serif;
    text-transform:none;
    font-weight:700;
    font-size:1.02rem;
    color:var(--beige);
    margin-bottom:0.5rem;
  }
  .faq-item p{ color:var(--dusky); font-size:0.92rem; }
  .plate-badge{
    position:absolute; top:-13px; right:1.8rem;
    background:var(--olive); color:var(--beige);
    font-size:0.68rem; font-weight:700; letter-spacing:0.06em;
    text-transform:uppercase;
    padding:0.35rem 0.75rem;
    border-radius:2px;
  }

  /* ---------- TRAINERS ---------- */
  .trainers-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:1.6rem;
  }
  .action-strip{
    display:grid;
    /* Equal columns. Was 1.4fr 1fr, which combined with the shared 3/2
       aspect-ratio made one photo taller as well as wider — it read as a
       mistake rather than a deliberate asymmetry. */
    grid-template-columns:1fr 1fr;
    gap:1.2rem;
    margin-bottom:3rem;
  }
  .action-photo{
    aspect-ratio:3/2;
    overflow:hidden;
    border-radius:4px;
    border:1px solid var(--line);
  }
  .action-photo img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }

  /* ---------- FREE PASS ---------- */
  .pass-hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.6rem 3.5rem;
    align-items:start;
  }
  .pass-hero-copy{ grid-column:1; grid-row:1; }
  .pass-hero-copy h2{ font-size:clamp(2rem, 4.4vw, 3.1rem); margin-top:0.8rem; }
  .pass-hero-copy .pass-lede{ color:var(--dusky); margin-top:1rem; font-size:1.02rem; max-width:46ch; }
  .pass-hero-grid > .pass-checklist{ grid-column:1; grid-row:2; margin-top:1rem; }
  .pass-hero-grid > .pass-hero-photo{ grid-column:1; grid-row:3; margin-top:1.6rem; }
  .pass-hero-photo img{
    width:100%;
    border-radius:4px;
    aspect-ratio:3/2;
    object-fit:cover;
  }
  .pass-form-card{
    grid-column:2;
    grid-row:1 / span 2;
    background:var(--navy-2);
    border:1px solid var(--olive);
    border-radius:4px;
    padding:2rem 1.8rem;
    scroll-margin-top:6rem;
  }
  .pass-form-card h2{ font-size:1.6rem; margin-bottom:0.5rem; }
  .pass-form-card > p{ color:var(--dusky); font-size:0.92rem; margin-bottom:1.4rem; }
  .pass-form-note{ color:var(--dusky); font-size:0.8rem; margin-top:0.9rem; text-align:center; }
  .pass-steps-band{
    margin-top:4rem;
    padding-top:3rem;
    border-top:1px solid var(--line);
  }

  .pass-grid{
    display:grid;
    grid-template-columns:0.8fr 1.6fr;
    gap:3rem;
    align-items:start;
  }
  .pass-checklist{
    list-style:none;
    display:grid;
    gap:1rem;
  }
  .pass-checklist li{
    display:flex;
    gap:0.7rem;
    align-items:flex-start;
    color:var(--beige);
    font-size:0.98rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--line);
  }
  .pass-checklist li:last-child{ border-bottom:none; padding-bottom:0; }
  .pass-checklist li::before{
    content:"✓";
    color:var(--olive);
    font-weight:700;
    flex-shrink:0;
  }
  .process-steps{
    display:flex;
    /* stretch, not flex-start: the three cards carry different amounts of
       copy, and ragged-bottom boxes read as a mistake rather than a rhythm. */
    align-items:stretch;
    gap:1rem;
  }
  .process-step{
    flex:1;
    background:var(--navy-2);
    border:1px solid var(--line);
    border-radius:4px;
    padding:1.8rem 1.5rem;
  }
  .process-num{
    width:38px; height:38px;
    border-radius:50%;
    background:var(--olive);
    color:var(--navy);
    font-family:'Reem Kufi', sans-serif;
    font-size:1.15rem;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:1rem;
  }
  .process-step h3{
    font-family:'Montserrat'; text-transform:none; font-weight:700;
    font-size:1.05rem; margin-bottom:0.5rem; color:var(--beige);
  }
  .process-step p{ color:var(--dusky); font-size:0.9rem; }
  .process-arrow{
    color:var(--olive);
    font-size:1.4rem;
    padding-top:2.4rem;
    flex-shrink:0;
    /* the cards stretch; the arrow between them should not */
    align-self:flex-start;
  }

  .trainer-card{
    background:var(--navy-2);
    border:1px solid var(--line);
    border-radius:4px;
    overflow:hidden;
    transition:transform 0.25s ease;
  }
  .trainer-card:hover{ transform:translateY(-5px); }
  .trainer-photo{
    position:relative;
    aspect-ratio:4/5;
    background:
      linear-gradient(160deg, rgba(153,134,81,0.35), rgba(156,166,181,0.2)),
      repeating-linear-gradient(135deg, #2c2a26, #2c2a26 10px, #262420 10px, #262420 20px);
    display:flex;
    align-items:flex-end;
    padding:1rem;
    font-family:'Reem Kufi', sans-serif;
    font-size:2.6rem;
    color:rgba(245,242,234,0.25);
    overflow:hidden;
  }
  .trainer-photo img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:saturate(0.85) contrast(1.05);
  }
  .trainer-photo::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(34,45,63,0.1) 0%, rgba(34,45,63,0.6) 100%);
    mix-blend-mode:multiply;
    pointer-events:none;
  }
  .trainer-photo:not(:has(img))::after{ display:none; }
  .trainer-body{ padding:1.4rem 1.5rem 1.7rem; }
  .trainer-body h3{ font-family:'Montserrat'; text-transform:none; font-weight:700; font-size:1.15rem; margin-bottom:0.3rem; }
  .trainer-role{ color:var(--olive); font-size:0.82rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; margin-bottom:0.6rem; }
  .trainer-line{ color:var(--dusky); font-size:0.88rem; line-height:1.5; }
  .trainer-credential{ color:var(--dusky); font-size:0.78rem; margin-bottom:0.6rem; }
  /* Replaces the "I help people…" quote. A reader picking a trainer needs to
     know who each one suits, not what all five have in common. */
  .trainer-bestfor{ color:var(--beige); font-size:0.88rem; line-height:1.5; }
  .trainer-bestfor b{ color:var(--olive); font-weight:600; }
  .trainer-tags{ display:flex; flex-wrap:wrap; gap:0.5rem; }
  .tag{
    font-family:'Montserrat', sans-serif;
    font-size:0.68rem;
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:var(--dusky);
    border:1px solid var(--line);
    padding:0.3rem 0.6rem;
    border-radius:2px;
  }

  /* ---------- CONTACT ---------- */
  .contact{ background:var(--navy-2); border-top:1px solid var(--line); }
  .contact-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:3.5rem;
  }
  .contact-info{ display:grid; gap:1.6rem; align-content:start; }
  .info-row{ display:flex; gap:1rem; }
  .info-mark{ color:var(--olive); font-family:'Montserrat', sans-serif; font-weight:700; }
  .info-row h3{ font-family:'Montserrat'; text-transform:none; font-weight:700; font-size:1rem; margin-bottom:0.25rem; }
  .info-row p, .info-row a{ color:var(--dusky); font-size:0.94rem; }
  .info-row a:hover{ color:var(--beige); }

  form{ display:grid; gap:1.1rem; }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
  label{
    font-size:0.76rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--dusky);
    margin-bottom:0.45rem;
    display:block;
    font-weight:600;
  }
  input, textarea, select{
    width:100%;
    background:var(--navy);
    border:1px solid var(--line);
    color:var(--beige);
    padding:0.85rem 1rem;
    border-radius:2px;
    font-family:'Montserrat';
    /* Keep at 1rem (16px) — iOS Safari zooms the viewport on focus below 16px. */
    font-size:1rem;
    transition:border-color 0.2s ease;
  }
  input:focus, textarea:focus, select:focus{ border-color:var(--olive); outline:none; }
  textarea{ resize:vertical; min-height:110px; }
  .form-status{ font-size:0.88rem; color:var(--olive); min-height:1.2rem; }

  .form-success{
    background:var(--navy-2);
    border:1px solid var(--olive);
    border-radius:4px;
    padding:2rem 1.8rem;
    display:grid;
    gap:0.9rem;
    justify-items:start;
  }
  /* Inside the pass/consult card the panel replaces the form in place, so it
     must not repeat the card's chrome — otherwise it reads as a box inside a
     box, with Calendly's own white card making a third. On the contact page
     the form has no card around it, so .form-success keeps its own box there. */
  .pass-form-card .form-success{
    background:none;
    border:0;
    border-radius:0;
    padding:0;
  }
  .form-success h3{
    font-size:1.7rem;
    color:var(--olive);
  }
  .form-success p{ color:var(--dusky); font-size:0.95rem; }
  .form-success .success-note{ font-size:0.82rem; }
  .form-success .success-note a{ color:var(--olive); font-weight:600; }

  /* Calendly's inline widget needs an explicit height — it scrolls internally
     rather than growing. Taller on narrow screens because the picker stacks. */
  /* width:100%, never min-width — the form card is ~295px wide inside a 375px
     phone, so Calendly's recommended 320px floor overflows the page. The
     widget adapts below 320 and scrolls internally either way. */
  .calendly-embed{
    /* 100% here: Calendly's own stylesheet otherwise settles the box at 300px,
       narrower than the card it sits in. The mobile rule below switches to
       auto so its negative margins can actually widen the box — a percentage
       width resolves against the parent's content box and would ignore them. */
    width:100%;
    height:700px;
    margin:1.2rem 0 0.4rem;
    border-radius:6px;
    overflow:hidden;
  }
  @media (max-width:640px){
    /* Only the card's own padding is left now that the success panel no longer
       adds a second box, so this pulls out one level, not two — half the card
       padding, keeping a little air off the border while still giving the date
       picker width. calc rather than auto: Calendly's own stylesheet settles an
       auto box at 300px, which the negative margins then shift off-centre
       instead of widening. The calc cancels the margins exactly, so it stays
       symmetrical. */
    .calendly-embed{ width:calc(100% + 1.8rem); height:940px; margin-inline:-0.9rem; }
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding:4rem 0 3rem;
    border-top:1px solid var(--line);
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.6fr repeat(3, 1fr);
    gap:3rem 2.5rem;
    align-items:start;
  }
  .footer-brand{ max-width:360px; }
  .footer-logo{
    display:flex;
    align-items:center;
    gap:0.6rem;
    color:var(--beige);
  }
  .footer-tagline{
    margin-top:1.1rem;
    color:var(--beige);
    font-size:0.95rem;
  }
  .footer-address{
    margin-top:0.9rem;
    font-style:normal;
    color:var(--dusky);
    font-size:0.85rem;
    line-height:1.75;
  }
  .footer-address a{ color:var(--dusky); }
  .footer-address a:hover{ color:var(--beige); }
  .footer-social{
    display:flex;
    gap:0.7rem;
    margin-top:1.5rem;
  }
  .footer-social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border:1px solid var(--line);
    border-radius:50%;
    color:var(--dusky);
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .footer-social a:hover{ color:var(--olive); border-color:var(--olive); }
  .footer-social svg{ width:16px; height:16px; fill:currentColor; display:block; }
  .footer-legal{
    margin-top:1.6rem;
    color:var(--dusky);
    font-size:0.8rem;
  }
  .footer-col h3{
    font-family:'Reem Kufi', sans-serif;
    text-transform:uppercase;
    font-size:0.95rem;
    letter-spacing:0.03em;
    color:var(--beige);
    margin-bottom:1rem;
  }
  .footer-col a{
    display:block;
    color:var(--dusky);
    font-size:0.9rem;
    padding:0.34rem 0;
  }
  .footer-col a:hover{ color:var(--beige); }


  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 1120px){
    .nav-links{
      position:fixed;
      top:64px; left:0; right:0;
      background:var(--navy);
      flex-direction:column;
      gap:0;
      border-bottom:1px solid var(--line);
      max-height:0;
      overflow:hidden;
      transition:max-height 0.3s ease;
    }
    .nav-links.open{ max-height:80vh; overflow-y:auto; }
    .nav-links a{ padding:1rem clamp(1.25rem, 4vw, 3rem); width:100%; }
    .nav-links a::after{ display:none; }
    .nav-toggle{
      display:block;
      background:none; border:none; color:var(--beige);
      font-size:1.5rem; cursor:pointer;
    }
    .nav-cta{ padding:0.5rem 0.9rem; font-size:0.72rem; margin-left:auto; margin-right:0.9rem; }
    .hero-grid{ grid-template-columns:1fr; }
    .hero-plates{ display:none; }
    .hero-stats{ gap:1.6rem; flex-wrap:wrap; }
    .about-grid, .contact-grid{ grid-template-columns:1fr; gap:2.4rem; }
    .facility-gallery{ grid-template-columns:1fr; }
    /* Stacked, the five pillars push the facility photos ~2 screens down, and
       five full-width photos then push the copy down just as far. On mobile,
       lead the section with the gallery as a horizontal swipe strip instead. */
    #about{ display:flex; flex-direction:column; }
    #about .facility-gallery{
      order:-1;
      margin-top:0;
      margin-bottom:2.6rem;
      display:flex;
      gap:0.9rem;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    #about .facility-gallery::-webkit-scrollbar{ display:none; }
    #about .gallery-photo{
      flex:0 0 78%;
      scroll-snap-align:center;
    }
    .action-strip{ grid-template-columns:1fr; }
    .pass-grid{ grid-template-columns:1fr; gap:2rem; }
    .pass-hero-grid{ grid-template-columns:1fr; gap:2rem; }
    .pass-hero-grid > *, .pass-hero-grid > .pass-checklist{ grid-column:auto; grid-row:auto; }
    .process-steps{ flex-direction:column; }
    .process-arrow{ display:none; }
    .pricing-grid, .trainers-grid{ grid-template-columns:1fr; }
    .form-row{ grid-template-columns:1fr; }
    /* Brand block takes its own row; the three link columns sit beneath it.
       It keeps its 360px cap — a full-width address block reads worse. */
    .footer-grid{ grid-template-columns:repeat(3, 1fr); gap:2.4rem 2rem; }
    .footer-brand{ grid-column:1 / -1; }
    .hero-photo-bg::after{
      background:
        linear-gradient(180deg, rgba(28,27,25,0.55) 0%, rgba(28,27,25,0.88) 55%, var(--navy) 100%),
        linear-gradient(0deg, var(--navy) 0%, transparent 12%);
    }
  }

  @media (max-width: 620px){
    .footer-grid{ grid-template-columns:1fr 1fr; }
    /* Roomier tap targets where the footer is thumbed rather than clicked. */
    .footer-col a{ padding:0.6rem 0; }
  }

  /* Only genuinely narrow screens drop to one column — at 375px two columns
     keep the footer about a third shorter. */
  @media (max-width: 359px){
    .footer-grid{ grid-template-columns:1fr; }
  }

  /* .nav-cta-long: the "7-Day " span is dropped on the narrowest screens so
     the pill reads "Free Pass" rather than wrapping or squeezing the logo. */
  @media (max-width: 520px){
    .nav-cta-long{ display:none; }
  }