:root{
  --blue-900:#053A58;
  --blue-800:#054B73;
  --blue-700:#076BA3;
  --blue-600:#0B8ED1;
  --blue-500:#2CA3E0;
  --blue-100:#D6EEFA;
  --blue-50:#EFF8FD;
  --off-white:#F6F6F6;
  --white:#FFFFFF;
  --ink:#0B1F2A;
  --gray:#5C6B73;

  /* Radius scale: sm for small UI (badges/tags/inputs), md for cards, full for pill buttons */
  --radius-sm:8px;
  --radius:18px;
  --radius-md:18px;
  --radius-full:999px;

  /* Spacing scale */
  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:40px;
  --space-xl:64px;
  --space-2xl:112px;

  /* Shadow scale — replaces the previous ad-hoc, one-off shadow values used per component */
  --shadow-sm:0 8px 20px -12px rgba(11,31,42,0.15);
  --shadow-md:0 16px 40px -24px rgba(11,31,42,0.18);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,0.35);

  /* Focus ring, used by the :focus-visible rules below */
  --focus-ring:0 0 0 3px var(--blue-100), 0 0 0 1.5px var(--blue-600);
}

/* AUD-014 (2026-09-07 audit): documenting the breakpoint scale actually in
   use sitewide, rather than changing any of it -- media queries can't
   reference CSS custom properties in their condition, so this can't be a
   --breakpoint-* variable the way colors/spacing/shadows are above; it's a
   documented convention instead. New responsive CSS should reuse one of
   these six values rather than introducing a seventh:
     600px  - phone / small mobile
     640px  - mobile (hero, most stacked-column layouts)
     720px  - large mobile / mobile nav breakpoint
     900px  - tablet
     960px  - tablet / small laptop (also mobile-panel dropdown breakpoint)
     1240px - contained max-width layouts
   (960px also pairs with a max-height:920px query for short viewports --
   that's a height condition alongside it, not a 7th width breakpoint.)
   Consolidating the existing six values into a smaller set is a separate,
   higher-risk change (each one affects live layouts) and isn't done here. */
*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}

/* Keyboard focus states — shown only for keyboard/AT navigation, not mouse clicks.
   box-shadow (not outline) so the ring follows each element's own border-radius
   (pill buttons stay pill-shaped, cards stay square) instead of forcing one shape. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--off-white);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Bebas Neue',sans-serif;
  line-height:1.15;
  letter-spacing:-0.02em;
}
.script{
  font-family:'Kaushan Script',cursive;
  font-weight:400;
  letter-spacing:0;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
section{padding:112px 0;}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue-700);
  background:var(--blue-100);
  padding:14px 22px;
  border-radius:20px;
  line-height:1.6;
  margin-bottom:20px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 34px;
  border-radius:999px;
  font-weight:700;
  font-size:13.5px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  cursor:pointer;
  border:2px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
/* 2026-09-10: a longer CTA label ("Apply for the Performance Program", 33
   chars, uppercased) overflowed the viewport at 375/390px -- the same
   nowrap-pill-button pattern already documented as a recurring site bug.
   Rather than keep shortening labels every time this happens, let long
   button text wrap on narrow phones instead of pushing past the edge. */
@media (max-width:420px){
  .btn{white-space:normal;text-align:center;line-height:1.3;}
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:var(--blue-600);
  color:var(--white);
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{background:var(--blue-700);}
.btn-outline{
  background:transparent;
  border-color:rgba(11,31,42,0.15);
  color:var(--ink);
}
.btn-outline:hover{border-color:var(--blue-600);color:var(--blue-700);}
.btn-light{
  background:var(--white);
  color:var(--blue-700);
}
.btn-light:hover{background:var(--blue-50);}
.btn-block{width:100%;}

/* ---------- NAV ---------- */
#siteHeader{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:rgba(246,246,246,0.85);
  backdrop-filter:blur(10px);
  transition:box-shadow .25s ease, background .25s ease;
}
#siteHeader.scrolled{
  background:rgba(246,246,246,0.97);
  box-shadow:0 8px 30px -15px rgba(11,31,42,0.25);
}
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px;
  max-width:1180px;
  margin:0 auto;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;flex-shrink:0;white-space:nowrap;}
.brand img{height:34px;width:auto;}
.nav-links{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.nav-links a{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.02em;color:var(--ink);opacity:0.8;transition:opacity .2s, color .2s;white-space:nowrap;}
.nav-links a:hover{opacity:1;color:var(--blue-700);}
.nav-cta{display:flex;align-items:center;gap:12px;flex-shrink:0;}
/* 2026-09-26: compact header buttons + breathing room between brand and links */
.nav-cta .btn{padding:11px 22px;font-size:12.5px;}
nav{gap:28px;}
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.menu-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;}

/* ---------- NAV: Services dropdown ---------- */
.nav-dropdown{position:relative;}
.nav-dropdown-trigger{
  display:flex;align-items:center;gap:4px;
  background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.02em;
  color:var(--ink);opacity:0.8;transition:opacity .2s, color .2s;
}
.nav-dropdown-trigger:hover,
.nav-dropdown.open .nav-dropdown-trigger{opacity:1;color:var(--blue-700);}
.nav-dropdown-trigger svg{transition:transform .2s ease;flex-shrink:0;}
.nav-dropdown.open .nav-dropdown-trigger svg{transform:rotate(180deg);}
.nav-dropdown-menu{
  position:absolute;
  top:calc(100% + 16px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:var(--white);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  padding:8px;
  min-width:190px;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:150;
}
.nav-dropdown-menu::before{
  content:"";
  position:absolute;
  top:-16px;left:0;right:0;height:16px;
}
.nav-dropdown.open .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.nav-dropdown-menu a{
  display:block;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:13.5px;
  text-transform:none;
  letter-spacing:normal;
  color:var(--ink);
  opacity:1;
  white-space:nowrap;
}
.nav-dropdown-menu a:hover{background:var(--blue-50);color:var(--blue-700);}

/* ---------- HERO (photo-led, full-bleed) ---------- */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:88vh;
  min-height:88dvh; /* AUD-049: dvh accounts for mobile browser chrome showing/hiding; vh above is the fallback for browsers without dvh support */
  background:var(--off-white);
  overflow:hidden;
}
.hero-text{
  display:flex;
  align-items:center;
  padding:100px 0 110px;
  position:relative;
  z-index:2;
}
.hero-text-inner{
  /* No max-width here: width:100% of the hero-text column plus the padding
     formula below already keeps the readable text ~550px wide at any
     viewport (padding-left grows in lockstep with the column, cancelling
     out). A hardcoded max-width used to fight that math and choke the
     content area down to a sliver on wide desktop monitors. */
  width:100%;
  padding:0 40px 0 max(24px, calc((100vw - 1180px) / 2));
}
.hero h1{
  font-size:clamp(38px,4.6vw,58px);
  font-weight:800;
  margin-bottom:22px;
}
.hero h1 .script{
  font-size:1.15em;
  color:var(--blue-600);
  display:inline-block;
}
.hero p.lead{
  font-size:18px;
  color:var(--gray);
  max-width:520px;
  margin-bottom:36px;
}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:44px;}
.credential-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chip{
  font-size:12.5px;
  font-weight:600;
  color:var(--blue-700);
  background:var(--white);
  border:1px solid var(--blue-100);
  padding:8px 14px;
  border-radius:var(--radius-sm);
}
.hero-photo{
  position:relative;
  min-height:420px;
}
.hero-photo-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 15%;
}
.hero-photo-fade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, var(--off-white) 0%, rgba(246,246,246,0) 20%, rgba(11,31,42,0.08) 100%);
  pointer-events:none;
}

/* ---------- SECTION HEADS ---------- */
.section-head{max-width:640px;margin:0 auto 56px;text-align:center;}
.section-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;margin-bottom:14px;}
.section-head p{color:var(--gray);font-size:16.5px;}
/* Long, multi-sentence intro copy (e.g. consultation.html's "Why a
   Consultation Comes First") reads harder centered once lines get short on
   narrow screens -- left-align just that copy below the section-head's own
   max-width, while headings/short blurbs elsewhere stay centered. */
@media (max-width:640px){
  .section-head--copy-left p{text-align:left;}
}

/* ---------- ABOUT ---------- */
.about{background:var(--white);}
.about-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:64px;
  align-items:center;
}
.about-photo{
  background:linear-gradient(160deg,var(--blue-50),var(--blue-100));
  border-radius:var(--radius);
  padding:40px;
  text-align:center;
  position:relative;
}
.about-photo .avatar-ring{
  width:220px;height:220px;
  border-radius:50%;
  margin:0 auto 24px;
  background:linear-gradient(160deg,var(--blue-600),var(--blue-800));
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.about-photo .avatar-ring img{height:90px;filter:brightness(0) invert(1);}
.about-photo .avatar-ring img.real-photo{height:100%;width:100%;object-fit:cover;object-position:center top;filter:none;}
.about-photo .avatar-name{font-family:'Bebas Neue',sans-serif;font-weight:700;font-size:19px;}
.about-photo .avatar-role{color:var(--gray);font-size:14px;margin-top:4px;}
.about-copy h2{font-size:clamp(26px,3vw,34px);font-weight:800;margin-bottom:18px;}
.about-copy p{color:var(--gray);margin-bottom:16px;font-size:16px;}
.cred-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 20px;
  margin-top:24px;
}
.cred-list li{
  font-size:14.5px;
  font-weight:600;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.cred-list li::before{
  content:"✓";
  color:var(--blue-600);
  font-weight:800;
  flex-shrink:0;
}

/* ---------- ABOUT PAGE (standalone about.html) ---------- */
.about-page-hero{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:56px;
  align-items:center;
  padding:56px 0 64px;
}
.about-page-photo{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:2/3;
  min-width:0;
}
.about-page-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.about-page-copy{min-width:0;}
.about-page-copy .eyebrow{margin-bottom:16px;}
.about-page-copy h1{font-size:clamp(32px,4vw,48px);font-weight:800;margin-bottom:14px;}
.about-page-copy .role{color:var(--blue-700);font-weight:700;font-size:16px;margin-bottom:20px;}
.about-page-copy .lead{color:var(--gray);font-size:18px;margin-bottom:28px;}
@media (max-width:900px){
  .about-page-hero{grid-template-columns:minmax(0,1fr);gap:32px;padding:32px 0 40px;}
  .about-page-photo{aspect-ratio:4/3;max-height:420px;}
}

/* ---------- ABOUT PAGE: trust strip (stat row directly under the hero) ---------- */
.trust-band{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:48px;
  padding:36px 0;
  border-top:1px solid rgba(11,31,42,0.08);
  border-bottom:1px solid rgba(11,31,42,0.08);
}
.trust-band-item{text-align:center;}
.trust-band-item b{
  display:block;
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(26px,3vw,34px);
  color:var(--blue-700);
  margin-bottom:4px;
}
.trust-band-item span{
  font-size:12.5px;
  color:var(--gray);
  letter-spacing:0.03em;
  text-transform:uppercase;
}
.trust-orgs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  padding:28px 0 0;
}
@media (max-width:720px){
  .trust-band{gap:28px 36px;padding:28px 0;}
}

/* ---------- ABOUT PAGE: qualifications grid -- single-column checklist inside a card ---------- */
.cred-list--single{grid-template-columns:1fr;}

/* ---------- ABOUT PAGE: 5-step coaching process ---------- */
.steps-5{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:28px;
}
@media (max-width:900px){
  .steps-5{grid-template-columns:1fr 1fr;row-gap:36px;}
}
@media (max-width:560px){
  .steps-5{grid-template-columns:1fr;}
}

/* ---------- SERVICES ---------- */
.services{background:var(--off-white);}
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.service-card{
  background:var(--white);
  border-radius:var(--radius);
  padding:38px 32px;
  box-shadow:var(--shadow-md);
  transition:transform .25s ease, box-shadow .25s ease;
  border:1px solid rgba(11,31,42,0.05);
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.service-icon{
  width:56px;height:56px;
  border-radius:16px;
  background:var(--blue-600);
  display:flex;align-items:center;justify-content:center;
  color:var(--white);
  font-size:24px;
  margin-bottom:22px;
}
.service-card h3{font-size:19.5px;font-weight:700;margin-bottom:12px;}
.service-card p{color:var(--gray);font-size:15px;margin-bottom:18px;}
.service-card a.link{font-weight:700;font-size:14px;color:var(--blue-700);}
.service-card a.link:hover{text-decoration:underline;}

/* ---------- PROCESS TIMELINE ---------- */
.process-timeline{
  position:relative;
  max-width:1120px;
  margin:0 auto;
  counter-reset:process-step;
  display:flex;
  align-items:flex-start;
  gap:6px;
}
.process-step{
  position:relative;
  counter-increment:process-step;
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  opacity:0;
  animation:processStepIn .6s ease forwards;
}
.process-step:nth-child(1){animation-delay:.05s;}
.process-step:nth-child(2){animation-delay:.2s;}
.process-step:nth-child(3){animation-delay:.35s;}
.process-step:nth-child(4){animation-delay:.5s;}
.process-step:nth-child(5){animation-delay:.65s;}
@keyframes processStepIn{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  .process-step{animation:none;opacity:1;}
}
.process-step:not(:last-child)::after{
  content:'';
  position:absolute;
  top:32px;
  left:calc(50% + 40px);
  width:calc(100% - 80px);
  height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--blue-600),var(--blue-100));
  z-index:1;
}
.process-marker{
  position:relative;
  width:64px;height:64px;
  border-radius:50%;
  background:var(--blue-600);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  border:4px solid var(--off-white);
  box-shadow:var(--shadow-sm);
  z-index:2;
  flex-shrink:0;
  transition:transform .25s ease, box-shadow .25s ease;
}
.process-step:hover .process-marker{
  transform:scale(1.08);
  box-shadow:0 0 0 6px var(--blue-50), var(--shadow-md);
}
.process-card{
  position:relative;
  background:var(--white);
  border-radius:var(--radius);
  padding:26px 22px 24px;
  margin-top:20px;
  width:100%;
  box-shadow:var(--shadow-md);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.process-step:hover .process-card{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}
.process-card::before{
  content:counter(process-step,decimal-leading-zero);
  position:absolute;
  top:-10px;right:8px;
  font-family:'Bebas Neue',sans-serif;
  font-size:64px;
  line-height:1;
  color:var(--blue-50);
  z-index:0;
  pointer-events:none;
}
.process-step-num,
.process-card h3,
.process-card p{position:relative;z-index:1;}
.process-step-num{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--blue-700); /* AUD-021: blue-600 on white/off-white was ~3.6:1, fails WCAG AA at this size */
  margin-bottom:6px;
}
.process-card h3{font-size:19px;font-weight:700;margin-bottom:8px;}
.process-card p{color:var(--gray);font-size:14.5px;margin:0;}
@media (max-width:860px){
  .process-timeline{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    max-width:520px;
  }
  .process-step{
    flex-direction:row;
    align-items:flex-start;
    text-align:left;
    margin-bottom:34px;
  }
  .process-step:last-child{margin-bottom:0;}
  .process-step:not(:last-child)::after{
    top:64px;
    left:32px;
    width:3px;
    height:calc(100% + 34px - 64px);
    background:linear-gradient(180deg,var(--blue-600),var(--blue-100));
  }
  .process-marker{margin-right:18px;}
  .process-card{margin-top:0;text-align:left;}
  .process-card::before{top:-6px;right:10px;font-size:52px;}
  .process-step:hover .process-card{transform:none;}
}

/* ---------- HOW IT WORKS ---------- */
.how{background:var(--white);}
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
  position:relative;
}
.step{text-align:center;position:relative;padding:0 12px;}
.step-num{
  width:52px;height:52px;
  border-radius:50%;
  background:var(--blue-50);
  color:var(--blue-700);
  font-family:'Bebas Neue',sans-serif;
  font-weight:700;
  font-size:20px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
  border:2px solid var(--blue-100);
}
/* AUD-022 (2026-09-07 audit): was h4, skipping past h3 under this section's h2. */
.step h3{font-size:18px;font-weight:700;margin-bottom:10px;}
.step p{color:var(--gray);font-size:14.5px;}

/* ---------- EDITORIAL BREAK (full-bleed statement + stats) ---------- */
.editorial-break{
  background:var(--ink);
  color:var(--white);
  padding:130px 0;
  text-align:center;
}
.editorial-break .eyebrow{
  background:rgba(255,255,255,0.1);
  color:var(--blue-100);
}
.editorial-break h2{
  font-size:clamp(28px,4vw,44px);
  font-weight:800;
  max-width:780px;
  margin:0 auto 60px;
  line-height:1.25;
}
.editorial-stats{
  display:flex;
  justify-content:center;
  gap:80px;
  flex-wrap:wrap;
}
.editorial-stat b{
  display:block;
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(32px,4vw,48px);
  font-weight:700;
  color:var(--blue-500);
  margin-bottom:8px;
}
.editorial-stat span{
  font-size:13.5px;
  color:rgba(255,255,255,0.7);
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* ---------- PROGRAMS / PRICING ---------- */
.programs{
  background:linear-gradient(180deg,var(--blue-800),var(--blue-900));
  color:var(--white);
  position:relative;
}
.programs .section-head p{color:rgba(255,255,255,0.75);}
.programs .section-head h2{color:var(--white);}
.programs .section-head a{color:#fff;}
.price-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.price-card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius);
  padding:32px 26px;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.price-card.featured{
  background:var(--white);
  color:var(--ink);
  border-color:transparent;
  box-shadow:var(--shadow-lg);
  transform:translateY(-10px);
}
.price-card.featured .price-badge{
  background:var(--blue-600);color:var(--white);
}
.price-card.featured p{color:var(--gray);}
.price-badge{
  align-self:flex-start;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:rgba(255,255,255,0.14);
  padding:5px 12px;
  border-radius:var(--radius-sm);
  margin-bottom:18px;
}
/* AUD-022 (2026-09-07 audit): programs.html uses this component with h2
   titles (its cards sit directly under the page's one h1, no h2 section
   head above them -- h3 there would skip a level), while every other page
   using .price-card has an h2 section head above it, so h3 is correct
   there. Same visual style either way. */
.price-card h2,.price-card h3{font-size:19px;font-weight:700;margin-bottom:8px;}
.price-card .price{font-family:'Bebas Neue',sans-serif;font-size:30px;font-weight:700;margin-bottom:14px;}
.price-card .price span{font-size:13px;font-weight:500;opacity:0.7;}
.price-aed-note{font-size:12.5px;color:var(--gray);margin-top:-8px;margin-bottom:14px;}
.price-card p{font-size:14px;opacity:0.8;margin-bottom:22px;flex-grow:1;}
.price-cta-group{display:flex;flex-direction:column;gap:10px;}

/* ---------- FLAGSHIP CARD ACCENT ----------
   The "X of 10 spots" capacity pill and a top-border marker, used on the homepage's
   Performance Program card and on performance-coaching.html itself, so it reads as
   a different kind of offer at a glance, not just in copy. */
.card-flagship{border-top:3px solid var(--blue-600);}
.capacity-note-blue{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.03em;
  color:var(--blue-700);
  background:var(--blue-50);
  border:1px solid var(--blue-100);
  padding:9px 18px;
  border-radius:20px;
  margin-bottom:16px;
}
.capacity-dot-blue{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue-600);
  flex-shrink:0;
  box-shadow:0 0 0 3px rgba(11,142,209,0.2);
}

/* ---------- VIP / FLAGSHIP TIER (The Performance Program only) ---------- */
.vip-hero{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
}
.vip-hero > *{min-width:0;}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
@media (max-width:960px){
  .vip-hero{grid-template-columns:minmax(0,1fr);gap:32px;}
}

/* Neutral split-hero photo (used sitewide, e.g. Specialized Coaching Plans, The Performance Program) */
.split-hero-photo{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 30px 70px -24px rgba(0,0,0,0.5);
  aspect-ratio:3/4;
  min-width:0;
}
.split-hero-photo img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:960px){
  .split-hero-photo{aspect-ratio:4/3;order:-1;}
}

/* ---------- Program / plan card image (Training Programs catalog) ---------- */
.program-card-img{
  margin:-32px -26px 20px;
  height:150px;
  border-radius:var(--radius) var(--radius) 0 0;
  overflow:hidden;
}
.program-card-img img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- THE PILLARS (Performance Program — What's Included) ----------
   Sits inside a `.programs` section (the same dark blue treatment used for
   every other pricing/feature section sitewide), so only the tab widget
   itself needs its own rules here -- background and text color come from
   `.programs`. An interactive tab-reveal: five numbered dots, one detail
   panel shown at a time (JS in script.js). Markup degrades gracefully
   without JS -- panel 0 is marked active/visible in the HTML itself. */
.pillars-tabs{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-bottom:40px;
  flex-wrap:wrap;
}
.pillars-tab{
  width:56px;
  height:56px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.8);
  font-family:'Bebas Neue',sans-serif;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.pillars-tab:hover{border-color:rgba(255,255,255,0.45);}
.pillars-tab.active{background:var(--blue-500);border-color:var(--blue-500);color:#fff;}
.pillars-tab:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px;}
.pillars-panel{max-width:560px;margin:0 auto;text-align:center;}
.pillars-panel svg{color:var(--blue-500);margin-bottom:18px;}
.pillars-panel h3{color:#fff;font-size:24px;font-weight:700;margin:0 0 12px;}
.pillars-panel p{color:rgba(255,255,255,0.72);font-size:15px;line-height:1.65;margin:0;}
@media (max-width:600px){
  .pillars-tab{width:48px;height:48px;font-size:17px;}
  .pillars-panel h3{font-size:20px;}
}

/* ---------- PERSUASION SPLIT (comfort-zone / who it's for) ---------- */
.persuade-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.persuade-grid > *{min-width:0;}
.persuade-copy h2{font-size:clamp(26px,3.2vw,36px);font-weight:800;margin-bottom:18px;}
.persuade-copy p{color:var(--gray);font-size:16.5px;margin-bottom:24px;}
.check-list li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:15.5px;font-weight:600;
  padding:14px 0;
  border-bottom:1px solid rgba(11,31,42,0.08);
}
.check-list li:last-child{border-bottom:none;}
.check-list li::before{
  content:"✓";
  flex-shrink:0;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--blue-50);
  color:var(--blue-600);
  font-weight:800;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
}
@media (max-width:900px){
  .persuade-grid{grid-template-columns:minmax(0,1fr);gap:28px;}
}

/* ---------- TESTIMONIALS (featured + supporting) ---------- */
.testimonials{background:var(--off-white);}
.testimonial-layout{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:26px;
  align-items:stretch;
}
.quote-featured{
  background:var(--white);
  border-radius:var(--radius);
  padding:52px 48px;
  border:1px solid rgba(11,31,42,0.06);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.quote-featured .stars{font-size:17px;margin-bottom:22px;}
.quote-featured p.quote{
  font-size:24px;
  line-height:1.5;
  font-weight:500;
  font-style:normal;
  color:var(--ink);
  margin-bottom:30px;
}
.quote-side{display:flex;flex-direction:column;gap:20px;}
.quote-card{
  background:var(--white);
  border-radius:var(--radius);
  padding:26px 26px;
  border:1px solid rgba(11,31,42,0.06);
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.stars{color:var(--blue-600);font-size:14px;margin-bottom:14px;letter-spacing:2px;}
.quote-card p.quote{font-size:14.5px;color:var(--ink);margin-bottom:16px;font-style:italic;}
.quote-person{display:flex;align-items:center;gap:12px;}
.quote-avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--blue-100);color:var(--blue-700);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
  font-family:'Bebas Neue',sans-serif;
  flex-shrink:0;
}
.quote-featured .quote-avatar{width:52px;height:52px;font-size:16px;}
.quote-name{font-weight:700;font-size:14px;}
.quote-role{color:var(--gray);font-size:12.5px;}
.placeholder-note{
  text-align:center;
  font-size:12.5px;
  color:var(--gray);
  margin-top:28px;
  opacity:0.75;
}
.stories-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-bottom:28px;
}
.stories-grid .quote-card{
  height:100%;
}
.stories-grid p.quote{
  flex:1;
}

/* ---------- BLOG ---------- */
.blog{background:var(--white);}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.blog-card{
  background:var(--off-white);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(11,31,42,0.06);
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex;
  flex-direction:column;
}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.blog-card-img{
  height:170px;
  background:linear-gradient(160deg,var(--blue-600),var(--blue-800));
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.85);
  font-size:36px;
  overflow:hidden;
}
.blog-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.blog-card-body{padding:26px 26px 28px;flex-grow:1;display:flex;flex-direction:column;}
.blog-tag{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--blue-700);
  margin-bottom:10px;
}
/* AUD-022 (2026-09-07 audit): blog/index.html uses this component with h2
   titles (its cards sit directly under the page's one h1, no h2 section
   head above them), while index.html's "Training & Recovery, Explained"
   blog-preview cards sit under an h2 there, so h3 is correct in that
   context. Same visual style either way -- see .price-card for the same
   pattern. */
.blog-card h2,.blog-card h3{font-size:18px;font-weight:700;margin-bottom:10px;line-height:1.3;}
.blog-card p{color:var(--gray);font-size:14.5px;margin-bottom:18px;flex-grow:1;}
.blog-meta{font-size:12.5px;color:var(--gray);display:flex;align-items:center;gap:8px;margin-top:auto;}
.blog-read-link{font-weight:700;font-size:14px;color:var(--blue-700);margin-top:16px;display:inline-block;}
.blog-read-link:hover{text-decoration:underline;}
.blog-hub-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px;flex-wrap:wrap;gap:20px;}

/* ---------- FAQ ---------- */
.faq{background:var(--white);}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{
  background:var(--off-white);
  border:1px solid rgba(11,31,42,0.08);
  border-radius:14px;
  padding:6px 24px;
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:18px 0;
  font-weight:700;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  font-size:22px;
  font-weight:400;
  color:var(--blue-600);
  flex-shrink:0;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{color:var(--gray);font-size:15px;padding-bottom:20px;}

/* ---------- FINAL CTA ---------- */
.final-cta{
  background:linear-gradient(135deg,var(--blue-600),var(--blue-800));
  color:var(--white);
  text-align:center;
  border-radius:32px;
  margin:0 24px;
  padding:70px 24px;
}
.final-cta-inner{max-width:640px;margin:0 auto;}
.final-cta h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;margin-bottom:16px;}
.final-cta p{opacity:0.85;margin-bottom:32px;font-size:16.5px;}
.final-cta-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:rgba(255,255,255,0.7);padding:70px 0 30px;margin-top:100px;}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.footer-brand img{height:30px;}
.footer-brand span{font-family:'Bebas Neue',sans-serif;font-weight:800;font-size:18px;color:var(--white);}
/* AUD-022 (2026-09-07 audit): was h5 -- on most pages the last main-content heading before the footer is h2/h3, so h5 skipped one or more levels. h2 keeps things sequential on every page (h1/h2/h3 all step down to h2 cleanly) while keeping the exact same visual treatment. */
.footer-col h2{color:var(--white);font-size:14px;font-weight:700;margin-bottom:16px;letter-spacing:0.04em;text-transform:uppercase;}
.footer-col ul li{margin-bottom:10px;font-size:14px;}
.footer-col ul li a:hover{color:var(--white);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:26px;font-size:13px;flex-wrap:wrap;gap:12px;
}
.social-row{display:flex;gap:14px;}
.social-row a{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
.social-row a:hover{background:var(--blue-600);color:var(--white);}

/* ---------- REVEAL ANIMATION ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ---------- GOAL QUIZ MODAL ---------- */
.quiz-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(5,20,28,0.72);
  backdrop-filter:blur(6px);
  z-index:200;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.quiz-overlay.open{display:flex;}
.quiz-card{
  background:var(--white);
  border-radius:24px;
  padding:56px 48px 64px;
  max-width:540px;
  width:100%;
  max-height:88vh;
  max-height:88dvh; /* AUD-049: dvh fallback -- see .hero */
  overflow-y:auto;
  position:relative;
  box-shadow:0 60px 120px -30px rgba(5,20,28,0.55), 0 0 0 1px rgba(11,31,42,0.04);
  border:1px solid rgba(11,31,42,0.06);
}
.quiz-progress-bar{
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:rgba(11,31,42,0.07);
  border-radius:24px 24px 0 0;
  overflow:hidden;
}
.quiz-progress-fill{
  height:100%;
  width:33%;
  background:linear-gradient(90deg, var(--blue-700), var(--blue-500));
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.quiz-close{
  position:absolute;
  top:20px;
  right:20px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--off-white);
  border:none;
  border-radius:50%;
  font-size:19px;
  line-height:1;
  cursor:pointer;
  color:var(--gray);
  transition:background .2s ease, color .2s ease;
}
.quiz-close:hover{color:var(--ink);background:var(--blue-50);}
.quiz-progress{
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--blue-700); /* AUD-021: blue-600 on the white quiz card was ~3.6:1, fails WCAG AA at this size */
  margin-bottom:16px;
}
.quiz-step h3{font-size:25px;font-weight:700;margin-bottom:28px;line-height:1.32;letter-spacing:-0.01em;}
.quiz-options{display:flex;flex-direction:column;gap:12px;margin-bottom:8px;}
.quiz-option{
  text-align:left;
  background:var(--off-white);
  border:1.5px solid transparent;
  border-radius:14px;
  padding:17px 20px;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.quiz-option:hover{border-color:var(--blue-600);background:var(--blue-50);transform:translateX(3px);box-shadow:0 10px 24px -14px rgba(11,142,209,0.45);}
.quiz-back{
  margin-top:18px;
  background:none;
  border:none;
  color:var(--gray);
  font-size:12.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  cursor:pointer;
}
.quiz-back:hover{color:var(--blue-700);}
.quiz-result p{color:var(--gray);font-size:16px;line-height:1.65;margin-bottom:30px;}
.quiz-result-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.quiz-logo{
  position:absolute;
  bottom:22px;
  right:26px;
  height:18px;
  width:auto;
  opacity:0.45;
  pointer-events:none;
}

/* Quiz teaser callout (shown before Programs section) */
.quiz-callout{
  background:var(--blue-50);
  border:1px solid var(--blue-100);
  border-radius:var(--radius);
  padding:36px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  text-align:left;
}
.quiz-callout h3{font-size:19px;font-weight:700;margin-bottom:6px;}
.quiz-callout p{color:var(--gray);font-size:14.5px;margin:0;max-width:460px;}
.quiz-callout .btn{flex-shrink:0;}

@media (max-width:720px){
  .quiz-card{padding:44px 26px 56px;border-radius:20px;}
  .quiz-step h3{font-size:21px;}
  .quiz-logo{height:15px;bottom:16px;right:20px;}
  .quiz-callout{padding:28px 26px;text-align:center;justify-content:center;}
  .quiz-callout p{max-width:100%;}
}

/* ---------- FEEDBACK FORM (leave-feedback.html) ---------- */
.feedback-form-wrap{
  max-width:640px;
  margin:0 auto;
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  border:1px solid rgba(11,31,42,0.05);
  padding:44px;
}
.form-group{margin-bottom:22px;}
.form-group label{
  display:block;
  font-weight:700;
  font-size:14px;
  margin-bottom:8px;
}
.form-hint{font-size:12.5px;color:var(--gray);margin-top:6px;}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea{
  width:100%;
  font-family:inherit;
  /* 16px, not 15px: iOS Safari auto-zooms the page on focus for any input
     under 16px -- keeping it at/above that threshold avoids the jolt. */
  font-size:16px;
  color:var(--ink);
  background:var(--off-white);
  border:1.5px solid rgba(11,31,42,0.1);
  border-radius:var(--radius-sm);
  padding:13px 16px;
}
.form-group textarea{resize:vertical;min-height:130px;line-height:1.55;}
.form-group input::placeholder,
.form-group textarea::placeholder{color:rgba(92,107,115,0.6);}

/* Honeypot spam-trap field — hidden from real visitors, bots tend to fill it in */
.form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Star rating — five radio inputs, visually reversed with row-reverse so
   ":checked ~ label" (which selects *later* DOM siblings) lights up the
   correct stars up to the one clicked. */
.star-rating{
  display:flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
  gap:6px;
}
.star-rating input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}
.star-rating label{
  font-size:32px;
  line-height:1;
  color:rgba(11,31,42,0.15);
  cursor:pointer;
  transition:color .15s ease;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label{
  color:#F5A623;
}
.star-rating input:focus-visible + label{
  box-shadow:var(--focus-ring);
  border-radius:6px;
}

.form-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13.5px;
  color:var(--gray);
  line-height:1.5;
}
.form-consent input[type="checkbox"]{
  margin-top:3px;
  width:16px;
  height:16px;
  accent-color:var(--blue-600);
  flex-shrink:0;
}

.form-status{
  border-radius:var(--radius-sm);
  padding:20px 22px;
  font-size:15px;
  line-height:1.6;
}
.form-status.success{background:var(--blue-50);border:1px solid var(--blue-100);color:var(--ink);}
.form-status.error{background:#FDECEC;border:1px solid #F5C6C6;color:#8A2222;}

@media (max-width:600px){
  .feedback-form-wrap{padding:30px 24px;}
  .star-rating label{font-size:28px;}
}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{
  font-size:13.5px;
  color:var(--gray);
  padding:130px 0 0;
}
.breadcrumb a{color:var(--blue-700);font-weight:600;}
.breadcrumb a:hover{text-decoration:underline;}

/* ---------- ARTICLE (blog post pages) ---------- */
.article-header{padding:36px 0 40px;}
.article-header .eyebrow{margin-bottom:18px;}
.article-header h1{font-size:clamp(30px,4.2vw,46px);font-weight:800;margin-bottom:20px;}
.article-meta{display:flex;align-items:center;gap:14px;color:var(--gray);font-size:14.5px;flex-wrap:wrap;}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gray);}
.article-hero-img{
  height:320px;
  border-radius:var(--radius);
  background:linear-gradient(160deg,var(--blue-600),var(--blue-800));
  margin-bottom:8px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.85);
  font-size:54px;
  overflow:hidden;
}
.article-hero-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.article-body{background:var(--white);padding:60px 0 40px;}
.article-body-inner{max-width:760px;margin:0 auto;}
.article-body-inner h2{font-size:26px;font-weight:800;margin:40px 0 16px;}
.article-body-inner h3{font-size:20px;font-weight:700;margin:28px 0 12px;}
.article-body-inner p{color:var(--ink);opacity:0.92;font-size:16.5px;margin-bottom:18px;}
.article-body-inner ul,.article-body-inner ol{margin:0 0 20px 22px;list-style:disc;}
.article-body-inner ol{list-style:decimal;}
.article-body-inner li{margin-bottom:10px;font-size:16.5px;color:var(--ink);opacity:0.92;}
.article-body-inner blockquote{
  border-left:4px solid var(--blue-600);
  padding:4px 0 4px 22px;
  margin:28px 0;
  font-style:italic;
  color:var(--blue-800);
  font-size:18px;
}
.article-author-box{
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:var(--blue-50);
  border-radius:var(--radius);
  padding:24px;
  margin-top:48px;
}
.article-author-box .avatar{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  background:var(--blue-600);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:'Bebas Neue',sans-serif;
}
/* AUD-022 (2026-09-07 audit): was h4 -- this author-bio box always
   follows the article's "Sources" h2 as a sibling section, not a nested
   subsection, so h4 skipped two levels. h2 keeps it sequential; same
   visual style. */
.article-author-box h2{font-size:15px;font-weight:700;margin-bottom:4px;}
.article-author-box p{font-size:14px;color:var(--gray);margin:0;}
.article-cta{
  background:var(--blue-50);
  border-radius:var(--radius);
  padding:32px;
  text-align:center;
  margin-top:40px;
}
.article-cta h3{font-size:20px;margin-bottom:10px;}
.article-cta p{color:var(--gray);margin-bottom:20px;}
.related-posts{background:var(--off-white);padding:60px 0 100px;}
.related-posts h2{font-size:24px;font-weight:800;margin-bottom:28px;text-align:center;}

/* ---------- RESPONSIVE ---------- */
/* Hero content (long headline + lead text) can run taller than short laptop
   viewports (e.g. 1280x720, 1366x768) at the default vertical rhythm, pushing
   the CTA buttons below the fold. Trim the hero's vertical spacing when height
   is tight, without touching the stacked mobile layout below (max-width:960px). */
@media (min-width:961px) and (max-height:920px){
  .hero-text{padding:32px 0 32px;}
  .hero h1{margin-bottom:14px;}
  .hero p.lead{margin-bottom:20px;}
}
@media (max-width:960px){
  .hero{grid-template-columns:1fr;min-height:0;}
  .hero-photo{order:-1;height:340px;min-height:0;}
  .hero-text{padding:120px 0 50px;}
  .hero-text-inner{padding:0 24px;max-width:100%;}
  .hero-photo-fade{background:linear-gradient(0deg, var(--off-white) 0%, rgba(246,246,246,0) 22%);}
  .about-grid{grid-template-columns:1fr;}
  /* card-grid/price-grid/blog-grid skip the 2-col tablet step on purpose — with 3
     items (services, homepage pricing) a 2-col row always strands one card alone;
     going straight to 1 column here reads cleanly at every item count. */
  .card-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;gap:44px;}
  .price-grid{grid-template-columns:1fr;}
  .testimonial-layout{grid-template-columns:1fr;}
  .quote-featured{padding:38px 32px;}
  .quote-featured p.quote{font-size:20px;}
  .stories-grid{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:1240px){
  .nav-links,.nav-cta .btn-outline{display:none;}
  .menu-toggle{display:flex;}
}
/* Below this, the brand + "Book a Consultation" button + hamburger no longer
   fit on one line (the button can't shrink or wrap), which was pushing the
   hamburger off-screen and out of reach on phones. The button is still
   reachable via the mobile menu itself, so hide the header copy here. */
@media (max-width:600px){
  .nav-cta{display:none;}
}
@media (max-width:720px){
  section{padding:70px 0;}
  /* .card-grid/.price-grid/.blog-grid already collapse to 1 column at the
     960px breakpoint above -- no need to repeat that here. */
  .price-card.featured{transform:none;}
  .price-cta-group .btn{white-space:normal;text-align:center;}
  .footer-grid{grid-template-columns:1fr;}
  .final-cta{margin:0 12px;padding:50px 20px;}
  .editorial-break{padding:80px 0;}
  .editorial-stats{gap:36px 48px;}
}

/* mobile nav panel -- a sibling of #siteHeader in the DOM (not nested
   inside it), since #siteHeader has backdrop-filter and any ancestor with
   backdrop-filter/transform/filter/perspective becomes the containing
   block for a position:fixed descendant instead of the viewport. That
   used to make this panel's fixed positioning behave unpredictably and
   needed a JS workaround just to keep it full-screen; being a sibling now,
   its position:fixed is relative to the viewport as expected. z-index is
   above #siteHeader's (100) so the open menu always renders above the
   header rather than the reverse. */
.mobile-panel{
  display:none;
  position:fixed;top:64px;left:0;right:0;
  height:calc(100vh - 64px);
  height:calc(100dvh - 64px); /* AUD-049: dvh fallback -- see .hero */
  background:var(--off-white);
  z-index:101;
  padding:30px 24px;
  overflow-y:auto;
}
.mobile-panel.open{display:block;}
.mobile-panel a{display:block;font-size:20px;font-weight:700;margin-bottom:22px;}
.mobile-panel .btn{margin-top:10px;}

/* ---------- TRAINING PROGRAMS — COMING SOON (2026-09-01) ---------- */
.coming-soon-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--white);
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.28);
  padding:8px 18px;
  border-radius:20px;
  margin-bottom:18px;
}
.coming-soon-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#F5A623;
  flex-shrink:0;
  margin-right:1px;
  box-shadow:0 0 0 3px rgba(245,166,35,0.25);
  display:inline-block;
}
.price-card.coming-soon{opacity:0.94;}
.price-badge-soon{
  align-self:flex-start;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:rgba(255,255,255,0.14);
  color:var(--white);
  padding:5px 12px;
  border-radius:var(--radius-sm);
  margin-bottom:14px;
}
.price-card.featured .price-badge-soon{background:var(--blue-50);color:var(--blue-700);}
.btn-disabled,
.btn-disabled:hover{
  background:rgba(11,31,42,0.08);
  color:var(--gray);
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* ---------- WHATSAPP FLOATING BUTTON (2026-09-02) ---------- */
.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  z-index:999;
  transition:transform 0.15s ease;
}
.whatsapp-float:hover{
  transform:scale(1.08);
}
@media (max-width:600px){
  .whatsapp-float{
    right:16px;
    bottom:16px;
    width:50px;
    height:50px;
  }
}

/* ---------- CONSULTATION PAGE — INLINE CAL.COM EMBED (2026-09-02) ---------- */
.cal-embed-wrap{
  background:var(--white);
  border:1px solid rgba(11,31,42,0.1);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  margin:0 auto;
  max-width:820px;
}

/* ===== Payment-gated booking (Consultation / Performance Program) ===== */
.rp-gate-card{
  background:var(--white);
  border:1px solid rgba(11,31,42,0.1);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  margin:0 auto;
  max-width:560px;
  padding:32px 28px;
}

/* AUD-028 follow-up (2026-09-10): light commitment-readiness screening on
   start-performance-program.html -- a soft notice, not a hard gate, shown
   when the answer to the commitment question isn't a clean "yes". */
.readiness-notice{
  background:var(--blue-50);
  border:1px solid var(--blue-100);
  border-radius:var(--radius);
  max-width:560px;
  margin:0 auto 22px;
  padding:22px 24px;
}
.readiness-notice p{
  font-size:14px;
  color:var(--ink);
  line-height:1.6;
  margin-bottom:16px;
}
.readiness-notice p strong{color:var(--blue-700);}

/* ===== Performance Program redesign (2026-09-10) ===== */

/* "This May Not Be for You If..." list -- muted counterpart to .check-list,
   same row rhythm but a neutral dash marker instead of a checkmark, so it
   doesn't read as another set of positives. */
.x-list{list-style:none;padding:0;margin:0;}
.x-list li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:15px;color:var(--gray);
  padding:12px 0;
  border-bottom:1px solid rgba(11,31,42,0.08);
}
.x-list li:last-child{border-bottom:none;}
.x-list li::before{
  content:"–";
  flex-shrink:0;
  width:26px;height:26px;
  border-radius:50%;
  background:rgba(92,107,115,0.1);
  color:var(--gray);
  font-weight:800;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
}
.x-list a{color:var(--blue-700);font-weight:600;}

/* Performance Program vs Specialized Coaching comparison -- two cards
   side by side on desktop, stacked on mobile. Deliberately not a literal
   <table>: a wide comparison table is one of the classic mobile-overflow
   traps, and this reuses the same card/list language as the rest of the
   page instead of introducing a new visual pattern. */
.compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:stretch;
  max-width:920px;
  margin:0 auto;
}
.compare-grid > *{min-width:0;}
.compare-card{
  background:var(--white);
  border:1px solid rgba(11,31,42,0.08);
  border-radius:var(--radius);
  padding:32px 28px;
  display:flex;
  flex-direction:column;
}
.compare-card--featured{
  border-color:var(--blue-600);
  box-shadow:var(--shadow-lg);
  transform:translateY(-6px);
}
.compare-card-head{margin-bottom:18px;}
.compare-card-head h3{font-size:19px;font-weight:700;margin-bottom:8px;}
.compare-tag{
  display:inline-block;
  font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  background:var(--off-white);color:var(--gray);
  padding:5px 12px;border-radius:var(--radius-sm);
}
.compare-tag--featured{background:var(--blue-50);color:var(--blue-700);}
.compare-list{list-style:none;padding:0;margin:0 0 22px;flex-grow:1;}
.compare-list li{
  font-size:14.5px;color:var(--gray);
  padding:10px 0 10px 24px;
  position:relative;
  border-bottom:1px solid rgba(11,31,42,0.06);
}
.compare-list li:last-child{border-bottom:none;}
.compare-list li::before{
  content:"✓";
  position:absolute;left:0;top:10px;
  color:var(--blue-600);font-weight:800;font-size:13px;
}
.compare-price{font-family:'Bebas Neue',sans-serif;font-size:26px;font-weight:700;margin-bottom:16px;}
.compare-price span{font-size:12.5px;font-weight:500;color:var(--gray);font-family:'Inter',sans-serif;}
@media (max-width:820px){
  .compare-grid{grid-template-columns:minmax(0,1fr);gap:20px;}
  .compare-card--featured{transform:none;}
}

/* Application page (apply-performance-program.html) -- short multi-step
   form reusing the existing .quiz-progress-bar / .form-group / .rp-gate-card
   components rather than introducing new ones. */
.apply-step-label{
  font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--blue-700);margin-bottom:18px;
}
.form-group textarea{width:100%;}
.apply-nav{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:8px;
}
.apply-nav .btn-outline{margin-right:auto;}
@media (max-width:520px){
  .apply-nav{flex-direction:column-reverse;}
  .apply-nav .btn-outline{margin-right:0;}
}