/* Inter and Space Grotesk, self-hosted.

   These used to come from fonts.googleapis.com, which meant two DNS lookups
   and two TLS handshakes to a third party before any text could render in the
   brand face. The files are the same ones Google serves, vendored under
   /assets/fonts/ where they are cached permanently.

   Both families are licensed under the SIL Open Font License 1.1:
     Inter          - https://github.com/rsms/inter
     Space Grotesk  - https://github.com/floriankarsten/space-grotesk

   Only the subsets a page needs are downloaded, which is what unicode-range
   below is for. latin-ext is kept because it carries the macrons (a e i o u
   with overbars) that New Zealand English needs. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400-latin-ext-v1.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400-latin-v1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-500-latin-ext-v1.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-500-latin-v1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600-latin-ext-v1.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600-latin-v1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-500-latin-ext-v1.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-500-latin-v1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-600-latin-ext-v1.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-600-latin-v1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-700-latin-ext-v1.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-700-latin-v1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Everest Personal Training - core styles */
:root {
  /* --- Brand palette (from the development brief) --- */
  --black: #111111;       /* Everest Black: primary text, dark sections */
  --white: #FFFFFF;       /* Everest White: main background */
  /* Teals sampled from the Everest Personal Training logo (Aug 2026), which
     runs deeper and bluer than the original brief's palette: hue ~187 rather
     than ~178. Deep Teal is the logo colour itself. Accent is that same hue
     lifted to 40% lightness — the logo teal is too dark to read on black, and
     the site leans heavily on dark sections. Accent clears 6.3:1 on #111111,
     comfortably past WCAG AA. */
  --teal-deep: #06606C;   /* Deep Teal: logo colour, buttons, links on light */
  --teal-accent: #14A4B8; /* Accent Teal: interactive states on dark */
  --mist: #E6F3F6;        /* Mist: soft backgrounds, cards */
  --slate: #5F666B;       /* Slate Grey: secondary text */
  --cloud: #F3F5F6;       /* Cloud Grey: section separation */

  /* --- Supporting tints (brand extension) ---
     Functional shades the headline palette omits, kept strictly in-family.
     Used for legible text/borders on dark and teal surfaces (the brief has
     no light-on-dark text colour, and Slate is too dark to read on black). */
  --black-deep: #0a0a0a;  /* footer, one step under Black */
  --teal-darkest: #003C48;/* logo shadow teal; text on accent-teal fills */
  --mist-line: #93C9D4;   /* hairline borders / labels on dark */
  --ink-on-dark: #cfd4d6; /* secondary/body text on dark sections */
  --teal-on-dark: #BDE0E8;/* captions/labels on teal-dark sections */
  --grey-muted: #7d8488;  /* footer text */

  /* --- Layout & type --- */
  --radius: 14px;
  --radius-pill: 30px;
  --maxw: 1140px;
  --hero-h: 92vh;         /* shared hero height so every page matches exactly */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 500; margin: 0; line-height: 1.12; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 64px 0; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; padding: 13px 24px;
  border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer;
  transition: transform .14s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease, opacity .12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn-accent { background: var(--teal-accent); color: var(--teal-darkest); }
.btn-accent:hover { background: #13ada8; box-shadow: 0 8px 20px rgba(20,164,184,.4); }
.btn-deep { background: var(--teal-deep); color: #fff; }
.btn-deep:hover { background: #0a6f6d; box-shadow: 0 8px 20px rgba(6,96,108,.32); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); }
.btn-outline { background: transparent; color: var(--teal-deep); border-color: var(--teal-deep); }
.btn-outline:hover { background: var(--teal-deep); color: #fff; }

/* header - floating glassy pill */
.site-header {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 50;
  width: calc(100% - 48px); max-width: 1092px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 9px 9px 22px;
  /* Dark glass rather than light. The logo's internal detail (mountain
     crevices, barbell ring centres) is dark negative space, not real
     transparency, so it can only sit backing-free on a dark ground. */
  background-color: rgba(14,16,16,.62);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(0,0,0,.34);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(14,16,16,.95); }
}
/* The wordmark uses the same face and tracking as the menu beside it. It used to
   fall through to the body font, so the two read as different typefaces. */
.logo { display: flex; align-items: center; gap: 9px; font-family: var(--display);
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.site-header .logo { color: #fff; }
/* No backing plate — the logo sits directly on the dark glass, which is why
   the header had to go dark. Do not put this on a light surface without a
   light-background variant of the logo. */
.logo-mark { width: 34px; height: 34px; object-fit: contain; display: block; }
.site-footer .logo-mark { width: 36px; height: 36px; }
.legacy-logo-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--teal-deep);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; }
/* Nav uses the display face in caps to match the hero headline. Slightly
   tighter gap and a touch of tracking, since caps read wider than sentence
   case and the seven items have to stay on one line. */
.nav { display: flex; gap: 17px; font-family: var(--display); font-size: 13px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; }
/* Light nav on the dark pill. Accent teal rather than deep teal for the
   active and hover state, since deep teal has too little contrast on dark. */
.nav a { color: var(--ink-on-dark); transition: color .12s ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--teal-accent); }
.nav-toggle { color: #fff; }

/* ---- nav submenu ---- */
.nav-group { position: relative; display: flex; align-items: center; }
/* Buttons do not pick up the nav's casing and tracking reliably, so both are
   set explicitly here to match the sibling links. */
.nav-trigger { display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; cursor: inherit;
  font: inherit; text-transform: uppercase; letter-spacing: inherit;
  color: var(--ink-on-dark); transition: color .12s ease; }
.nav-trigger i { font-size: 14px; transition: transform .18s ease; }
.nav-group.is-open .nav-trigger i { transform: rotate(180deg); }
.nav-trigger:hover, .nav-group.is-open .nav-trigger,
.nav-group.is-current .nav-trigger { color: var(--teal-accent); }
.nav-sub { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 290px; background: rgba(14,16,16,.97);
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.13); border-radius: 16px; padding: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 60; }
.nav-group.is-open .nav-sub { opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0); }
/* bridges the gap between trigger and panel so the pointer can travel down
   without the menu closing under it */
.nav-group.is-open::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.nav-sub a { display: block; padding: 11px 13px; border-radius: 10px;
  text-transform: none; letter-spacing: 0; font-weight: 500;
  transition: background-color .14s ease; }
.nav-sub a:hover, .nav-sub a:focus-visible { background: rgba(20,164,184,.13); }
.nav-sub .ns-label { display: block; font-family: var(--display); font-size: 14px;
  color: #fff; letter-spacing: .02em; }
.nav-sub a[aria-current="page"] .ns-label { color: var(--teal-accent); }
.nav-sub .ns-desc { display: block; font-family: var(--font); font-size: 12px;
  font-weight: 400; color: var(--grey-muted); margin-top: 3px; line-height: 1.45; }

/* Seven top-level items, the logo and the CTA share one pill. Between the
   mobile breakpoint and full width there is not quite room, so tighten
   rather than let the nav wrap or push the button out. */
@media (min-width: 921px) and (max-width: 1180px) {
  .nav { gap: 12px; font-size: 12px; letter-spacing: .03em; }
  .header-call { padding: 9px 16px; font-size: 12.5px; }
  .site-header { padding-left: 16px; }
}
/* the group name is a real button on desktop and a plain label on mobile */
.nav-group-label { display: none; }
/* In the mobile dropdown the submenu is always expanded — a menu inside a
   menu is needless friction on a phone. The group name still shows, as a
   heading, so the links underneath keep their context. */
@media (max-width: 920px) {
  .nav-group { display: block; }
  .nav-trigger { display: none; }
  .nav-group-label { display: block; padding: 14px 22px 6px; font-family: var(--display);
    font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--teal-accent); }
  .nav-sub { position: static; transform: none; opacity: 1; visibility: visible;
    pointer-events: auto; min-width: 0; background: none; border: 0; padding: 0;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-sub a { padding: 10px 22px 10px 32px; border-radius: 0; }
  .nav-sub .ns-desc { display: none; }
}
.nav-cta { display: none; }
.header-cta { display: flex; align-items: center; gap: 12px; }
.header-call { padding: 10px 20px; font-family: var(--display); font-size: 13px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 0 4px 16px rgba(20,164,184,.45); }
.header-call:hover { box-shadow: 0 7px 20px rgba(20,164,184,.6); transform: translateY(-1px);
  background: var(--teal-deep); color: #fff; }
.nav-toggle { display: none; background: none; border: 0; font-size: 24px; color: var(--black); }

/* hero */
.hero { position: relative; background: var(--black); color: #fff; overflow: hidden; }
.hero .wrap { padding-top: 158px; padding-bottom: 128px; position: relative; z-index: 2; }
.hero-ring { position: absolute; border: 1.5px solid rgba(20,164,184,.18); border-radius: 50%; z-index: 1; }
.hero-ring.r1 { width: 460px; height: 460px; right: -80px; top: -80px; }
.hero-ring.r2 { width: 260px; height: 260px; right: 60px; top: 90px; border-color: rgba(20,164,184,.28); }
.eyebrow { display: inline-block; font-size: 12px; letter-spacing: 1px; color: var(--teal-accent);
  border: 1px solid rgba(20,164,184,.5); padding: 5px 13px; border-radius: 22px; margin-bottom: 20px; }
.hero h1 { font-size: clamp(34px, 5vw, 52px); max-width: 640px; }
.hero h1 .accent { color: var(--teal-accent); }
.hero p { font-size: 17px; color: var(--ink-on-dark); max-width: 540px; margin: 18px 0 28px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-video { position: relative; z-index: 2; margin-top: 36px; height: 160px; border-radius: var(--radius);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; }
.play { width: 52px; height: 52px; border-radius: 50%; background: var(--teal-accent);
  display: flex; align-items: center; justify-content: center; color: var(--teal-darkest); font-size: 22px; }
.hero-video span { color: var(--ink-on-dark); font-size: 14px; }

/* trust strip */
.trust { background: var(--cloud); }
.trust .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; padding-top: 16px; padding-bottom: 16px; }
.trust .label { font-size: 12px; letter-spacing: .5px; color: var(--slate); }
.trust ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; color: var(--grey-muted); font-size: 13px; }
.trust li { display: flex; align-items: center; gap: 6px; }
@media (max-width: 560px) {
  .trust .wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  .trust ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; width: 100%; }
}

/* pathways */
.section-head h2 { font-size: 24px; }
.section-head p { color: var(--slate); margin: 6px 0 0; font-size: 15px; }
.pathways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.pathway { border-radius: 16px; padding: 20px; background: var(--mist);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.pathway:hover, .pathway:focus-visible {
  transform: translateY(-4px); box-shadow: 0 14px 30px rgba(17,17,17,.10);
  background-color: #d6efec; outline: none; }
.pathway:hover .pathway-icon { background: var(--teal-darkest); }
.pathway.is-feature { background: var(--teal-accent); }
.pathway.is-feature:hover, .pathway.is-feature:focus-visible { background-color: var(--teal-deep); }
.pathway.is-feature:hover h3, .pathway.is-feature:hover p { color: #fff; }
.pathway.is-feature:hover .pathway-icon { background: var(--teal-darkest); color: var(--teal-accent); }
.pathway.is-feature p, .pathway.is-feature h3 { color: var(--teal-darkest); }
.pathway-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--teal-deep);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; }
.pathway.is-youth .pathway-icon { background: var(--teal-deep); color: #fff; }
.pathway.is-feature .pathway-icon { background: var(--teal-darkest); color: var(--teal-accent); }
.pathway h3 { font-size: 15px; margin: 12px 0 3px; }
.pathway p { font-size: 13px; color: var(--slate); margin: 0; }

/* featured programs - stacking cards on page scroll */
.deck { margin-top: 8px; }
.deck-card {
  position: sticky; border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 260px; margin-bottom: 24px;
  box-shadow: 0 -12px 34px rgba(0,0,0,.14);
}
.deck-card:nth-child(1) { top: 90px; }
.deck-card:nth-child(2) { top: 112px; }
.deck-card:nth-child(3) { top: 134px; }
.deck-card:nth-child(4) { top: 156px; }
.deck-card .label { font-size: 12px; letter-spacing: 1px; opacity: .85; }
.deck-card h3 { font-size: 26px; margin: 12px 0 8px; }
.deck-card .desc { font-size: 14px; line-height: 1.55; max-width: 380px; margin: 0; }
.deck-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.price { font-size: 28px; font-weight: 500; }
.price small { font-size: 13px; font-weight: 400; opacity: .7; }
.theme-dark { background: var(--black); color: #fff; }
.theme-dark .label { color: var(--teal-accent); }
.theme-teal { background: var(--teal-deep); color: #fff; }
.theme-teal .label { color: var(--mist-line); }
.theme-accent { background: var(--teal-accent); color: var(--teal-darkest); }
.theme-mist { background: var(--mist); color: var(--teal-darkest); border: 1px solid var(--mist-line); }

/* impact */
.impact { background: var(--black); color: #fff; }
.impact .eyebrow-2 { font-size: 12px; letter-spacing: 1px; color: var(--teal-accent); margin: 0 0 22px; }
.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.metric .num { font-size: 34px; font-weight: 500; color: var(--teal-accent); }
.metric .cap { font-size: 12.5px; color: var(--teal-on-dark); }

/* organisations */
.orgs { background: var(--mist); }
.orgs .wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.orgs-copy { flex: 1; min-width: 260px; }
.orgs-copy .eyebrow-2 { font-size: 12px; letter-spacing: 1px; color: var(--teal-deep); font-weight: 500; }
.orgs-copy h2 { font-size: 24px; margin: 10px 0; }
.orgs-copy p { color: var(--slate); font-size: 15px; margin: 0; }
.orgs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 260px; flex: 1; }
.org-pill { background: #fff; border-radius: 14px; padding: 24px 22px; font-size: 15px; font-weight: 500; color: var(--slate); }
.org-pill i { color: var(--teal-deep); font-size: 30px; display: block; margin-bottom: 12px; }

/* final cta */
.final { background: var(--black); color: #fff; text-align: center; }
.final h2 { font-size: 28px; }
.final p { color: var(--ink-on-dark); font-size: 15px; margin: 10px 0 22px; }

/* footer */
.site-footer { background: var(--black-deep); color: var(--grey-muted); font-size: 14px; }
/* Crawlable link list written into the footer placeholder by tools/generate.js.
   layout.js replaces the whole element on load, so this is only ever seen by a
   crawler that does not run JS - and, for a moment, by a visitor on a slow
   connection. Styled to match the footer so that moment is not jarring. */
.pre-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; max-width: 1092px; margin: 0 auto; padding: 48px 24px; background: var(--black-deep); font-size: 14px; }
.pre-nav a { color: var(--ink-on-dark); text-decoration: none; }
#site-footer:has(.pre-nav) { background: var(--black-deep); }
.site-footer a { color: var(--ink-on-dark); }
.site-footer a:hover { color: #fff; }
.footer-top { display: grid; grid-template-columns: 1.3fr 2fr; gap: 40px;
  padding-top: 56px; padding-bottom: 40px; }
.footer-brand .logo { color: #fff; margin-bottom: 14px; }
.footer-brand p { color: var(--grey-muted); font-size: 14px; max-width: 320px; margin: 0 0 18px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 19px;
  background: rgba(255,255,255,.06); color: var(--ink-on-dark); }
.footer-social a:hover { background: var(--teal-deep); color: #fff; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h3 { font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--teal-accent); margin: 0 0 4px; font-weight: 500; }
.footer-col a, .footer-col .footer-meta { font-size: 14px; }
.footer-meta { color: var(--ink-on-dark); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 20px; padding-bottom: 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; }
.footer-legal { display: flex; gap: 18px; }
.footer-note { padding-bottom: 28px; display: flex; justify-content: space-between;
  align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.footer-note p { font-size: 12px; color: var(--grey-muted); margin: 0; max-width: 640px; line-height: 1.6; }
.footer-credit { font-size: 12px; color: var(--grey-muted); text-align: right; }
.footer-credit a { color: var(--teal-accent); transition: color .12s ease; }
.footer-credit a:hover { color: #E46A2C; }
@media (max-width: 560px) { .footer-credit { text-align: left; } }

/* responsive */
@media (max-width: 920px) {
  /* matches the dark header pill — a light dropdown would leave the light
     nav links invisible */
  .nav { position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; gap: 0;
    background: rgba(14,16,16,.94); backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255,255,255,.13); border-radius: 18px; overflow: hidden;
    box-shadow: 0 12px 34px rgba(0,0,0,.4); padding: 6px 0; display: none; }
  .site-header.nav-open .nav { display: flex; }
  .nav a { padding: 12px 22px; font-size: 15px; }
  .nav-cta { display: block; margin: 10px 22px 12px; padding: 13px 18px; text-align: center;
    background: var(--teal-accent); color: var(--teal-darkest);
    font-family: var(--display); font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    border-radius: var(--radius-pill); }
  .header-call { display: none; }
  .nav-toggle { display: block; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .pathways { grid-template-columns: 1fr 1fr; }
  .impact-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pathways { grid-template-columns: 1fr; }
  .orgs-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* sticky mobile cta - removed */
.sticky-cta { display: none; }

/* respect reduced motion: drop the stacking pin */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .deck-card { position: static; box-shadow: none; border: 1px solid rgba(0,0,0,.1); }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============================================================
   Shared page components (inner pages)
   ============================================================ */

/* page hero (compact, for inner pages) */
.page-hero { background: var(--black); color: #fff; position: relative; overflow: hidden; }
.page-hero .wrap { padding-top: 150px; padding-bottom: 120px; position: relative; z-index: 2; }
.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(30px, 4.5vw, 44px); max-width: 720px; }
.page-hero p { color: var(--ink-on-dark); font-size: 17px; max-width: 600px; margin: 16px 0 0; }
.page-hero .hero-ring { z-index: 1; }

/* breadcrumb - sits in the hero as the eyebrow pill */
.crumbs { display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
  margin: 0 0 18px; padding: 6px 14px; border-radius: 22px;
  border: 1px solid rgba(20,164,184,.5); background: transparent; color: var(--ink-on-dark); }
.crumbs a { color: var(--teal-accent); }
.crumbs a:hover { color: #fff; }
.crumbs span { color: var(--ink-on-dark); }

/* generic prose */
.prose { max-width: 760px; }
.prose h2 { font-size: 24px; margin: 36px 0 12px; }
.prose h3 { font-size: 18px; margin: 28px 0 8px; }
.prose p, .prose li { font-size: 16px; color: #2c2f31; line-height: 1.75; }
.prose ul { padding-left: 20px; }
.prose li { margin: 6px 0; }
.prose .lede { font-size: 19px; color: var(--slate); line-height: 1.7; }

/* section intros */
.intro { max-width: 680px; margin-bottom: 28px; }
.intro h2 { font-size: 26px; }
.intro p { color: var(--slate); font-size: 16px; margin: 8px 0 0; }
.bg-cloud { background: var(--cloud); }
.bg-mist { background: var(--mist); }
.bg-dark { background: var(--black); color: #fff; }
.bg-dark h2 { color: #fff; }
.bg-dark p { color: var(--ink-on-dark); }

/* feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.feature { background: #fff; border: 1px solid rgba(0,0,0,.04); border-radius: 18px; padding: 28px;
  box-shadow: 0 12px 30px rgba(17,17,17,.05); }
.bg-cloud .feature, .bg-mist .feature { background: #fff; }
.feature-icon { width: 54px; height: 54px; border-radius: 15px;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal-accent));
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px;
  box-shadow: 0 10px 22px rgba(6,96,108,.28); }
.feature h3 { font-size: 18px; margin: 18px 0 7px; }
.feature p { font-size: 14.5px; color: var(--slate); margin: 0; line-height: 1.6; }

/* program catalogue grid */
.catalogue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.prog-card { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 16px; padding: 22px;
  display: flex; flex-direction: column; }
.prog-card.is-best { border: 2px solid var(--teal-accent); }
.prog-badge { align-self: flex-start; background: var(--teal-accent); color: var(--teal-darkest);
  font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 16px; margin-bottom: 10px; }
.prog-card .label { font-size: 12px; color: var(--slate); letter-spacing: .5px; }
.prog-card h3 { font-size: 19px; margin: 6px 0 8px; }
.prog-card .desc { font-size: 14px; color: var(--slate); line-height: 1.6; margin: 0 0 16px; flex: 1; }
.prog-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tag { font-size: 12px; background: var(--cloud); color: var(--slate); padding: 4px 9px; border-radius: 14px; }
.prog-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prog-foot .price { font-size: 24px; }
.prog-foot .price small { font-size: 12px; color: var(--slate); font-weight: 400; }

/* filter bar */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.filters select { font-family: inherit; font-size: 14px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18); background: #fff; color: var(--black); cursor: pointer; }
.filters select:focus { outline: 2px solid var(--teal-accent); outline-offset: 1px; }

/* comparison table */
.compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare th, .compare td { text-align: left; padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.1); }
.compare thead th { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--slate); }
.compare td:first-child { color: var(--slate); }
.compare .yes { color: var(--teal-deep); }
.compare .col-feature { background: var(--mist); }

/* quiz */
.quiz { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 18px; padding: 28px; max-width: 720px; }
.quiz-step { margin-bottom: 22px; }
.quiz-step > p { font-weight: 500; margin: 0 0 12px; font-size: 15px; }
.quiz-options { display: flex; flex-wrap: wrap; gap: 10px; }
.quiz-opt { font-size: 14px; padding: 10px 16px; border-radius: 24px; border: 1px solid rgba(0,0,0,.18);
  background: #fff; cursor: pointer; transition: all .12s ease; }
.quiz-opt:hover { border-color: var(--teal-deep); }
.quiz-opt.selected { background: var(--teal-deep); color: #fff; border-color: var(--teal-deep); }
.quiz-result { margin-top: 8px; padding: 20px; border-radius: 14px; background: var(--mist); display: none; }
.quiz-result.show { display: block; }
.quiz-result h3 { font-size: 18px; margin: 0 0 6px; }
.quiz-result p { font-size: 14px; color: var(--slate); margin: 0 0 14px; }

/* team grid */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.coach { border: 1px solid rgba(0,0,0,.05); border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: 0 12px 30px rgba(17,17,17,.05); }
.coach-photo { aspect-ratio: 4/5; object-fit: cover; width: 100%;
  background: linear-gradient(160deg, var(--teal-deep), var(--teal-darkest));
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 46px; letter-spacing: 1px; }
.coach-body { padding: 22px; }
.coach-body h3 { font-family: var(--display); }
.coach-body h3 { font-size: 17px; margin: 0 0 2px; }
.coach-role { font-size: 13px; color: var(--teal-deep); margin: 0 0 10px; }
.coach-body p { font-size: 13.5px; color: var(--slate); margin: 0 0 6px; line-height: 1.6; }
.coach-quals { font-size: 12px; color: var(--slate); display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* contact form */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font-family: inherit; font-size: 15px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18); background: #fff; color: var(--black); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--teal-accent); outline-offset: 1px; border-color: transparent; }
.form-field textarea { min-height: 120px; resize: vertical; }
.contact-form { background: #fff; border: 1px solid rgba(0,0,0,.05); border-radius: 18px;
  padding: 30px; box-shadow: 0 12px 30px rgba(17,17,17,.05); }
.contact-aside { background: var(--teal-darkest); color: #fff; border-radius: 18px; padding: 30px; align-self: start; }
.contact-aside h3 { font-family: var(--display); font-size: 19px; font-weight: 600; margin: 0 0 18px; }
.contact-aside p { font-size: 14px; color: var(--teal-on-dark); margin: 0 0 10px; }
.contact-aside a { color: var(--teal-accent); }
.contact-methods { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.contact-method { display: flex; gap: 13px; align-items: flex-start; }
.contact-method i { color: var(--teal-accent); font-size: 22px; flex: 0 0 auto; margin-top: 2px; }
.contact-method span { font-family: var(--font); font-size: 14px; color: #fff; line-height: 1.55; }
.contact-method .sub { color: var(--teal-on-dark); }

/* stat band */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-band .metric .num { color: var(--teal-accent); }

/* cta band */
.cta-band { text-align: center; }
.cta-band h2 { font-size: 28px; }
.cta-band p { color: var(--ink-on-dark); margin: 10px auto 22px; max-width: 540px; }

/* case studies */
.case { border: 1px solid rgba(0,0,0,.1); border-radius: 16px; padding: 22px; background: #fff; margin-bottom: 14px; }
.case summary { cursor: pointer; font-weight: 500; font-size: 16px; list-style: none; display: flex;
  justify-content: space-between; align-items: center; }
.case summary::-webkit-details-marker { display: none; }
.case[open] summary { margin-bottom: 14px; }
.case .case-meta { font-size: 13px; color: var(--teal-deep); margin-top: 4px; }

/* evidence hierarchy (impact page) */
.evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.evidence-tier { display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 18px 20px; }
.evidence-tier .rank { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--mist); color: var(--teal-deep); border: 2px solid var(--teal-accent);
  display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 14px; }
.evidence-tier h3 { font-size: 16px; margin: 5px 0 5px; }
.evidence-tier p { font-size: 14px; color: var(--slate); margin: 0; line-height: 1.55; }
.evidence-callout { display: flex; gap: 14px; align-items: flex-start;
  background: var(--mist); border: 1px solid var(--mist-line); border-radius: 14px; padding: 20px; margin-top: 16px; }
.evidence-callout i { color: var(--teal-deep); font-size: 24px; flex: 0 0 auto; }
.evidence-callout p { margin: 0; font-size: 14.5px; color: var(--teal-darkest); line-height: 1.6; }
@media (max-width: 720px) { .evidence-grid { grid-template-columns: 1fr; } }

/* image split (image + text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media { border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 24px 50px rgba(17,17,17,.16); }
.split-media.tall { aspect-ratio: 3/4; }
.split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-body .eyebrow-2 { font-size: 12px; letter-spacing: 1px; color: var(--teal-deep); font-weight: 500; }
.split-body h2 { font-size: 28px; margin: 8px 0 0; }
.split-body p { color: var(--slate); font-size: 16px; line-height: 1.75; margin: 14px 0 0; }
.check-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: #2c2f31; line-height: 1.5; }
.check-list li i { color: var(--teal-deep); font-size: 20px; flex: 0 0 auto; margin-top: 1px; }

.split.text-sticky { align-items: start; }
.split.text-sticky .split-body { position: sticky; top: 104px; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 26px; }
  .split.reverse .split-media { order: 0; }
  .split.text-sticky .split-body { position: static; }
}

/* full-width image band with gradient overlay + parallax */
.img-band { position: relative; padding: 104px 0; color: #fff; background-size: cover;
  background-position: center; background-repeat: no-repeat; }
.img-band h2 { color: #fff; font-size: 30px; }
.img-band p { color: var(--ink-on-dark); max-width: 560px; margin: 12px 0 24px; }
.img-band .eyebrow { margin-bottom: 14px; }
@media (min-width: 821px) { .img-band.parallax { background-attachment: fixed; } }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* steps (how it works) — connected journey */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.step { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 18px; padding: 26px;
  box-shadow: 0 12px 30px rgba(17,17,17,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.step:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(17,17,17,.10); border-color: var(--teal-accent); }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px;
  border-radius: 50%; background: linear-gradient(135deg, var(--teal-deep), var(--teal-accent));
  color: #fff; font-weight: 600; font-size: 20px; box-shadow: 0 10px 22px rgba(6,96,108,.32); }
/* connecting line threads the number nodes on desktop (sits behind the cards) */
@media (min-width: 921px) {
  .steps::before { content: ''; position: absolute; z-index: 0; top: 53px; left: 12%; right: 12%;
    height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--teal-accent), rgba(20,164,184,.28)); }
  .steps .step { position: relative; z-index: 1; }
}
.step h3 { font-size: 16px; margin: 16px 0 6px; }
.step p { font-size: 14px; color: var(--slate); margin: 0; line-height: 1.6; }

/* tabs */
.tab-btns { display: inline-flex; gap: 6px; background: var(--cloud); padding: 6px;
  border-radius: var(--radius-pill); margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit;
  font-size: 14px; font-weight: 500; padding: 10px 18px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--slate); cursor: pointer; transition: all .15s ease; }
.tab-btn:hover { color: var(--teal-deep); }
.tab-btn.is-active { background: var(--teal-deep); color: #fff; }
.tab-panel { max-width: 720px; }
.tab-panel h3 { font-size: 20px; margin: 0 0 8px; }
.tab-panel p { font-size: 16px; color: var(--slate); line-height: 1.7; margin: 0; }

/* testimonials */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.testimonial { position: relative; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.05);
  border-left: 3px solid var(--teal-accent); border-radius: 16px;
  padding: 28px 26px; margin: 0; box-shadow: 0 12px 30px rgba(17,17,17,.05);
  transition: transform .18s ease, box-shadow .18s ease; }
.testimonial:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17,17,17,.12); }
.testimonial::before { content: '\201C'; position: absolute; right: 16px; bottom: -42px;
  font-family: Georgia, 'Times New Roman', serif; font-size: 150px; line-height: 1;
  color: rgba(6,96,108,.06); pointer-events: none; }
.testimonial > i { position: relative; z-index: 1; color: var(--teal-accent); font-size: 30px; }
.testimonial blockquote { position: relative; z-index: 1; margin: 12px 0 16px; font-size: 16px; line-height: 1.65; color: #2c2f31; }
.testimonial figcaption { font-size: 13px; color: var(--teal-deep); font-weight: 500; }

/* faq */
.faq-item { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 12px;
  padding: 4px 20px; margin-bottom: 10px; }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; padding: 16px 0; font-size: 16px; font-weight: 500; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { color: var(--teal-deep); font-size: 20px; transition: transform .2s ease; flex: 0 0 auto; }
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-item p { margin: 0 0 16px; font-size: 15px; color: var(--slate); line-height: 1.7; }

@media (max-width: 920px) { .steps { grid-template-columns: 1fr 1fr; } .testimonials { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* card hover effects (service pages) */
.feature, .prog-card, .coach, .evidence-tier {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.feature:hover, .prog-card:hover, .coach:hover, .evidence-tier:hover {
  transform: translateY(-4px); box-shadow: 0 16px 34px rgba(17,17,17,.10); }
.feature:hover, .coach:hover, .evidence-tier:hover { border-color: var(--teal-accent); }

/* story steps (about page) — stack as you scroll */
.story { position: relative; max-width: 780px; margin-top: 8px; display: flex; flex-direction: column; gap: 18px; }
.story-item { position: sticky; padding: 30px 32px 30px 96px; background: #fff;
  border: 1px solid rgba(0,0,0,.05); border-radius: 18px; box-shadow: 0 -12px 44px rgba(17,17,17,.12); }
.story-item:nth-child(1) { top: 120px; }
.story-item:nth-child(2) { top: 138px; }
.story-item:nth-child(3) { top: 156px; }
.story-item:nth-child(4) { top: 174px; }
.story-item:nth-child(5) { top: 192px; }
.story-num { position: absolute; left: 28px; top: 30px; width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal-accent)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; z-index: 1;
  box-shadow: 0 10px 22px rgba(6,96,108,.3); }
.story-item h3 { font-family: var(--display); font-size: 21px; font-weight: 600; margin: 0 0 8px; }
.story-item p { font-size: 16px; color: #2c2f31; line-height: 1.7; margin: 0; }
@media (max-width: 720px) {
  .story-item { position: static; padding-left: 86px; box-shadow: 0 12px 30px rgba(17,17,17,.06); }
}
@media (prefers-reduced-motion: reduce) {
  .story-item { position: static; box-shadow: 0 12px 30px rgba(17,17,17,.06); }
}

/* founder expertise chips */
.founder-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.founder-tags span { font-family: var(--font); font-size: 12.5px; color: var(--teal-darkest);
  background: #fff; border: 1px solid var(--mist-line); border-radius: 14px; padding: 6px 13px; }

/* founder section */
.founder { display: grid; grid-template-columns: 340px 1fr; gap: 44px; align-items: center; }
/* square, matching the headshot. At 4/5 a square source lost ten percent
   off each side to the cover crop, which clipped his elbows. */
.founder-photo { aspect-ratio: 1/1; border-radius: 20px; overflow: hidden; background: var(--mist);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--teal-deep); border: 1px solid var(--mist-line); }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-photo .ph-icon { font-size: 64px; }
.founder-photo .ph-label { font-size: 12px; color: var(--slate); margin-top: 8px; }
.founder-body .eyebrow-2 { font-size: 12px; letter-spacing: 1px; color: var(--teal-deep); font-weight: 500; }
.founder-body h2 { font-size: 28px; margin: 8px 0 4px; }
.founder-role { color: var(--slate); font-size: 15px; margin: 0 0 16px; }
.founder-body p { font-size: 16px; color: #2c2f31; line-height: 1.75; margin: 0 0 14px; }
.founder-quote { border-left: 3px solid var(--teal-accent); padding: 4px 0 4px 18px; margin: 18px 0 0;
  font-size: 18px; color: var(--teal-darkest); line-height: 1.6; }

@media (max-width: 920px) {
  .feature-grid, .catalogue, .team-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .founder { grid-template-columns: 1fr; gap: 28px; }
  .founder-photo { max-width: 320px; }
}
@media (max-width: 560px) {
  .feature-grid, .catalogue, .team-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEPAGE REDESIGN v2 — full-bleed, image-led, cinematic
   Refs: Exos (authority + scale), SpaceX / Boring Co (restraint),
   The Body Coach (accessibility), Lift Club (character).
   Principle: every major block is full width; imagery carries the
   brand, copy provides proof and direction. Content sits on a wide
   rail; backgrounds and images bleed edge to edge.
   ============================================================ */

/* display type: heavier, tighter, more presence than Inter body */
h1, h2, h3, .display { font-family: var(--display); letter-spacing: -0.01em; }

/* wide content rail inside full-bleed sections */
.rail { max-width: 1280px; margin: 0 auto; padding: 0 40px; width: 100%; }
@media (max-width: 700px) { .rail { padding: 0 22px; } }

/* ascent-line brand device — the route to the summit.
   The line reads as a climb up Everest: base camp bottom-left, four camps
   (the .node markers) where the route levels off, then the final summit push.
   A climber dot repeatedly ascends the route, drawing the climbed portion
   behind it, as a figure for a client's progress toward their own summit.

   NOTE: the route geometry lives in TWO places — the `d` attribute on
   .trail / .trail-climb in each page's SVG, and the `offset-path` below that
   the climber follows. If you change the shape, update BOTH or the dot will
   drift off the line. */
.ascent { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.ascent svg { position: absolute; left: -2%; bottom: 0; width: 104%; height: 100%; }

/* the full route, drawn once on load and then left as a faint guide */
.ascent .trail { fill: none; stroke: var(--teal-accent); stroke-width: 2; opacity: .26;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: ascend 1.6s ease forwards; }

/* the climbed portion, redrawn on each ascent */
.ascent .trail-climb { fill: none; stroke: var(--teal-accent); stroke-width: 2.5; opacity: 0;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: climbTrail 7s ease-in-out 1.6s infinite; }

/* camp markers along the route */
.ascent .node { fill: var(--teal-accent); opacity: 0; animation: nodeIn .5s ease forwards; }

/* the summit, which lifts as the climber arrives */
.ascent .summit { fill: var(--teal-accent); opacity: 0;
  animation: nodeIn .5s ease 1.4s forwards, summitReached 7s ease-in-out 1.6s infinite; }

/* the climber — keyframe percentages match .trail-climb so the dot stays
   at the head of the drawn line */
/* This path must stay byte-identical to the two <path d> values in the page
   markup. It is the same route scaled to 94% on x so the summit clears the
   right edge with room for the CTA to sit over the end of it. */
.ascent .climber { offset-path: path("M0,748 L141,706 L282,716 L427,612 L568,626 L714,512 L850,528 L986,392 L1080,414 L1170,256 L1212,274 L1240,176");
  offset-rotate: 0deg; offset-distance: 0%; opacity: 0;
  animation: climb 7s ease-in-out 1.6s infinite; }
/* the kettlebell itself. Drawn centred on 0,0 so the motion path positions it
   by its middle. .climber-scale is counter-scaled by js/layout.js — the SVG is
   stretched (preserveAspectRatio="none") so the route always spans the hero,
   and without that correction the kettlebell squashes badly on narrow screens. */
/* The kettlebell turns on a vertical axis as it climbs — a horizontal spin,
   as if you were walking around it. Done as an animated scaleX rather than a
   CSS 3D rotateY: 3D transforms inside SVG are unreliable across browsers,
   and squashing to near-zero width and back out reads as the same rotation
   while working everywhere. transform-box keeps the pivot on the shape. */
.ascent .climber-spin { transform-box: fill-box; transform-origin: 50% 50%;
  animation: kbSpin 5.5s ease-in-out infinite; }
@keyframes kbSpin {
  0%   { transform: scaleX(1); }
  25%  { transform: scaleX(.06); }
  50%  { transform: scaleX(-1); }
  75%  { transform: scaleX(.06); }
  100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .ascent .climber-spin { animation: none; } }
.ascent .kb-body { fill: var(--teal-accent); }
.ascent .kb-handle { fill: none; stroke: var(--teal-accent); stroke-width: 3;
  stroke-linecap: round; }
.ascent .climber-halo { fill: var(--teal-accent); opacity: .2; }

@keyframes ascend { to { stroke-dashoffset: 0; } }
@keyframes nodeIn { to { opacity: 1; } }

@keyframes climb {
  0%   { offset-distance: 0%;   opacity: 0; }
  5%   { offset-distance: 4%;   opacity: 1; }
  70%  { offset-distance: 100%; opacity: 1; }
  88%  { offset-distance: 100%; opacity: 1; }
  97%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes climbTrail {
  0%   { stroke-dashoffset: 100; opacity: .85; }
  5%   { stroke-dashoffset: 96;  opacity: .85; }
  70%  { stroke-dashoffset: 0;   opacity: .85; }
  88%  { stroke-dashoffset: 0;   opacity: .85; }
  97%  { stroke-dashoffset: 0;   opacity: 0; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}
@keyframes summitReached {
  0%, 64%  { opacity: .45; }
  72%      { opacity: 1; }
  88%      { opacity: 1; }
  100%     { opacity: .45; }
}

/* Static, completed state: the route drawn and the climber resting on the summit. */
@media (prefers-reduced-motion: reduce) {
  .ascent .trail { animation: none; stroke-dashoffset: 0; }
  .ascent .trail-climb { animation: none; stroke-dashoffset: 0; opacity: .85; }
  .ascent .node, .ascent .summit { animation: none; opacity: 1; }
  .ascent .climber { animation: none; offset-distance: 100%; opacity: 1; }
}

/* --- 1. Cinematic full-screen hero --- */
/* Content sits at the top of the hero, not the bottom. The ascent line enters
   at 93% height on the left and climbs to 22% on the right, so bottom-aligned
   copy sat directly on top of it. Holding the text in the upper band leaves
   the whole lower-left sweep to the line. */
.cine-hero { position: relative; min-height: var(--hero-h); display: flex; align-items: flex-start;
  color: #fff; background: #0a0a0a; overflow: hidden; }
/* No photograph. The stock image was the only one left in a hero and it made
   this page the odd one out — every subhero is already flat black. A teal
   wash off the left and a soft floor keep it from reading as an empty box. */
.cine-hero .cine-bg { position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(80% 70% at 8% 22%, rgba(6,96,108,.42), transparent 68%),
    linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(0,0,0,.55) 100%);
  background-color: #0a0a0a; }
.cine-hero .rail { position: relative; z-index: 2; padding-top: 150px; padding-bottom: 8vh; }
.cine-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font);
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--teal-accent);
  margin-bottom: 22px; }
.cine-eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--teal-accent); }
/* Trimmed from 116px/15ch. At the old size the headline alone ran three lines
   deep and pushed the copy beneath it across the line's midpoint, which sits
   at 64% height where the text column reaches. */
.cine-hero .climb-title { font-size: clamp(40px, 7vw, 96px); line-height: .94; font-weight: 700;
  letter-spacing: -0.02em; text-transform: uppercase; max-width: 13ch; }

/* Hero title emerges a word at a time out of the background image: each word
   starts deep in the scene, small and out of focus, then travels forward
   through the image plane to rest at full size and sharpness.
   Delays are staggered across the kettlebell's ascent, so the headline builds
   while the climb is underway. If you change the climb timing, the route, or
   the number of words in the headline, these need to move with it — there must
   be one delay per word, or any extra word fires at 0s and appears first.
   The visible h1 is aria-hidden; the real heading for assistive tech and search
   engines is the .visually-hidden h1 at the top of the page, so nothing is
   hidden from them while this plays. */
.cine-hero .climb-title { perspective: 820px; perspective-origin: 24% 55%; }
.cine-hero .climb-title span { display: inline-block; opacity: 0;
  transform: translateZ(-560px);
  animation: wordEmerge .85s cubic-bezier(.17,.78,.3,1) forwards;
  will-change: transform, opacity, filter; }
.cine-hero .climb-title span:nth-child(1) { animation-delay: 1.2s; }
.cine-hero .climb-title span:nth-child(2) { animation-delay: 1.75s; }
.cine-hero .climb-title span:nth-child(3) { animation-delay: 2.3s; }
.cine-hero .climb-title span:nth-child(4) { animation-delay: 2.85s; }
.cine-hero .climb-title span:nth-child(5) { animation-delay: 3.4s; }
.cine-hero .climb-title span:nth-child(6) { animation-delay: 3.95s; }
.cine-hero .climb-title span:nth-child(7) { animation-delay: 4.5s; }
@keyframes wordEmerge {
  0%   { opacity: 0; transform: translateZ(-560px); filter: blur(11px); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: translateZ(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cine-hero .climb-title { perspective: none; }
  .cine-hero .climb-title span { animation: none; opacity: 1; transform: none; filter: none; }
}
.cine-hero .sub { font-family: var(--font); font-size: clamp(16px, 1.8vw, 21px);
  color: #e4e8ea; max-width: 620px; margin: 24px 0 34px; line-height: 1.5; }
.cine-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cine-actions .btn { padding: 15px 30px; font-size: 15.5px; }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
  color: rgba(255,255,255,.6); font-size: 22px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,7px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* --- 2. Statement band (dark, minimal, high restraint) --- */
/* ---- cursor glow trail (see js/layout.js) ----
   Sits above the page but below nothing that matters: pointer-events are off
   throughout, so it can never intercept a click. Fixed positioning keeps it
   aligned to the viewport rather than the document, so it does not drift on
   scroll. */
.cursor-trail { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
.cursor-trail span { position: absolute; top: 0; left: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(20,164,184,.85), rgba(20,164,184,0) 70%);
  filter: blur(5px); will-change: transform; }

/* ---- kettlebell cursor ----
   Brand cursor for the default pointer only. Interactive and text elements
   deliberately keep their standard cursors: a link that does not show a hand,
   or a field that does not show a caret, costs usability for the sake of a
   flourish. Every rule falls back to the native cursor if the image fails.
   Suppressed on touch and coarse pointers, where it is never seen anyway. */
@media (hover: hover) and (pointer: fine) {
  body { cursor: url('/assets/img/cursor-kettlebell-v4.png') 16 22, auto; }
  a, button, summary, label, select, [role="button"], .fopt, .quiz-opt, .nav-toggle {
    cursor: url('/assets/img/cursor-kettlebell-v4.png') 16 22, pointer; }
  input, textarea { cursor: text; }
  input[type="range"], input[type="checkbox"], input[type="radio"] { cursor: pointer; }
}

/* ---- atmospheric glow ----
   Slow-drifting teal light pools that give flat dark bands depth. Applied
   via .has-glow so it can be dropped onto any dark section. The host needs
   position:relative and overflow:hidden, and its content needs a z-index
   above 0 so the glow stays behind. Purely decorative. */
/* The glow is deliberately larger than its section (inset: -12%), so the host MUST
   clip it. A host that did not - the shortened mission and vision band on the
   homepage - let the glow spill 45px past each edge of a phone, and the whole page
   could be dragged sideways. Setting these here makes clipping the default rather
   than something each new section has to remember. */
.has-glow { position: relative; overflow: hidden; }
.has-glow::before { content: ''; position: absolute; inset: -12%; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 22% 26%, rgba(20,164,184,.17), transparent 70%),
    radial-gradient(34% 27% at 79% 60%, rgba(6,96,108,.15), transparent 70%),
    radial-gradient(28% 24% at 46% 92%, rgba(20,164,184,.10), transparent 70%);
  filter: blur(12px);
  animation: atmosDrift 38s ease-in-out infinite alternate; }
@keyframes atmosDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -3%, 0) scale(1.09); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .has-glow::before { animation: none; } }

.statement { position: relative; background: var(--black); color: #fff; overflow: hidden;
  padding: clamp(80px, 14vh, 150px) 0; }
.statement .rail { position: relative; z-index: 2; }
.statement h2 { font-size: clamp(28px, 4.6vw, 60px); line-height: 1.04; font-weight: 600;
  text-transform: uppercase; max-width: 20ch; }
.statement h2 .muted { color: #4a5560; }
.statement h2 .lit { color: var(--teal-accent); }
.statement .say { font-family: var(--font); text-transform: none; font-size: clamp(16px, 1.7vw, 19px);
  color: var(--ink-on-dark); max-width: 620px; margin: 26px 0 0; line-height: 1.6; font-weight: 400; }

/* --- 3. Division campaign panels (full-bleed, alternating, scroll-stacked) ---
   Each panel pins to the top and the next slides up and over it, giving a
   full-screen "deck" that stacks as you scroll. Opaque backgrounds cover the
   pinned panel beneath; the top shadow sells the slide-over. */
.division { position: sticky; top: 0; display: grid; grid-template-columns: 1.05fr 1fr;
  min-height: 100vh; box-shadow: 0 -26px 60px rgba(0,0,0,.5); }
.division .media { position: relative; min-height: 56vh; background-size: cover; background-position: center; }
/* The panels used to carry their photo as a background-image on an
   aria-hidden div, which cannot take alt text. Real <img> elements carry it
   instead; these rules reproduce the old cover behaviour exactly. The
   ::after gradient still paints on top, being later in the box order. */
.division .media img { position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover; object-position: center; }
.division .media::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,16,17,.12), rgba(4,14,15,.42)); }
/* A single accent line and a small logo chip on every division panel, photo
   or graphic alike, so the five images read as one system rather than each
   being edited on its own. */
.division .media::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; z-index: 2;
  background: linear-gradient(90deg, var(--teal-accent), transparent 85%); }
.division .brand-mark { position: absolute; z-index: 2; left: 20px; bottom: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(8, 20, 20, .55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; }
.division .brand-mark img { width: 22px; height: 22px; opacity: .92; }
.division .body { display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 8vh, 104px) clamp(32px, 6vw, 96px); color: #fff; background: var(--black); }
.division .idx { font-family: var(--font); font-size: 13px; letter-spacing: 3px; color: var(--teal-accent);
  text-transform: uppercase; margin-bottom: 20px; }
.division h2 { font-size: clamp(30px, 4vw, 54px); line-height: 1.02; font-weight: 700;
  text-transform: uppercase; }
.division .tag { display: block; background: none; border-radius: 0; padding: 0;
  font-family: var(--font); font-size: clamp(16px, 1.6vw, 20px); color: #dfe4e6;
  margin: 16px 0 26px; max-width: 42ch; line-height: 1.5; }
.division .go { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-family: var(--font); font-weight: 600; font-size: 15px; color: #fff;
  padding-bottom: 5px; border-bottom: 2px solid var(--teal-accent); transition: gap .16s ease, color .16s ease; }
.division .go:hover { gap: 16px; color: var(--teal-accent); }
.division:nth-child(even) .media { order: 2; }        /* alternate image side */
.division.theme-teal .body { background: var(--teal-darkest); }
.division.theme-empower .body { background: var(--emp-dark); }
.division.theme-empower .idx { color: var(--emp-hot); }
.division.theme-empower .go { border-bottom-color: var(--emp-hot); }
.division.theme-empower .go:hover { color: var(--emp-hot); }

/* --- 4. Impact band (full-bleed, big numbers over imagery) --- */
.impact-band { position: relative; color: #fff; overflow: hidden;
  padding: clamp(80px, 13vh, 140px) 0; background: var(--black); }
.impact-band .impact-bg { position: absolute; inset: 0; z-index: 0;
  /* Gradient only. This used to sit over a stock photo that was 86-90%
     covered anyway; the section takes its depth from the gradient and the
     .has-glow animation on the section itself. */
  background-image: linear-gradient(180deg, rgba(10,10,10,.86), rgba(4,52,44,.9));
  background-size: cover; background-position: center; }
.impact-band .rail { position: relative; z-index: 2; }
.impact-band .ib-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 52px; }
.impact-band .ib-head h2 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; text-transform: uppercase;
  max-width: 16ch; line-height: 1.02; }
.impact-band .ib-head p { font-family: var(--font); color: var(--ink-on-dark); font-size: 15px; max-width: 34ch; margin: 0; }
/* three across, two rows — six metrics in a four-column grid would leave a
   ragged pair on the second row */
.impact-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 20px; }
.impact-stats .metric { border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px; }
.impact-stats .num { font-family: var(--display); font-size: clamp(44px, 6vw, 80px); font-weight: 700;
  line-height: 1; color: #fff; letter-spacing: -0.02em; }
.impact-stats .cap { font-family: var(--font); font-size: 14px; color: var(--teal-on-dark);
  text-transform: uppercase; letter-spacing: 1px; margin-top: 12px; }
.impact-note { font-family: var(--font); font-size: 12px; color: var(--grey-muted); margin-top: 34px; }
@media (max-width: 820px) { .impact-stats { grid-template-columns: 1fr 1fr; gap: 30px 20px; } }
@media (max-width: 460px) { .impact-stats { grid-template-columns: 1fr; } }

/* --- 5. Product sales (clean, direct, image-led cards) --- */
/* ---- testimonials marquee ---- */
.says { position: relative; overflow: hidden; background: var(--black);
  padding: clamp(44px, 6vh, 68px) 0; }
.says .wrap, .says .logo-marquee { position: relative; z-index: 2; }
.says-head { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.says .lw-label { text-align: left; margin: 0; color: var(--teal-on-dark); }
.says-rating { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font);
  font-size: 14px; color: var(--ink-on-dark); border: 1px solid rgba(255,255,255,.16);
  padding: 8px 15px; border-radius: 22px; transition: border-color .16s ease; }
.says-rating:hover { border-color: var(--teal-accent); }
.says-rating .stars { color: var(--teal-accent); letter-spacing: 2px; }
.says-rating strong { color: #fff; font-weight: 600; }
.says-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
/* Cards run smaller than the body copy elsewhere: a marquee of quotes is
   scanned in passing, not read line by line, and more cards visible at once
   makes the volume of reviews the point rather than any single one. */
.say-card { flex: 0 0 auto; width: min(300px, 74vw); margin: 0 14px 0 0;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 17px 18px; white-space: normal; }
.say-stars { color: var(--teal-accent); font-size: 12px; letter-spacing: 2px; }
.say-card blockquote { margin: 8px 0 11px; font-family: var(--font); font-size: 13.5px;
  line-height: 1.6; color: var(--ink-on-dark); }
.say-card figcaption { font-family: var(--font); font-size: 12px; color: var(--grey-muted); }
.say-card figcaption span { color: var(--slate); }
@media (max-width: 560px) { .says-head { flex-direction: column; align-items: flex-start; } }

/* ---- GET SOME ----
   The wordmark is an alpha mask, so the teal comes from the brand variable
   and changes with it. The reveal is a left-to-right clip wipe, which reads
   as the stroke being painted rather than a shape fading in — the point of
   using brush lettering at all. */
.getsome { position: relative; overflow: hidden; background: var(--black);
  padding: clamp(56px, 9vh, 104px) 0; }
/* carries .reveal only to borrow the IntersectionObserver — the default fade
   would fight the wipe, so it is cancelled here */
.getsome.reveal { opacity: 1; transform: none; transition: none; }
.getsome-inner { position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: 20px; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.getsome-mark { display: block; width: min(560px, 82%); aspect-ratio: 900 / 327;
  background-color: var(--teal-accent);
  -webkit-mask: url('/assets/img/get-some.png') center / contain no-repeat;
          mask: url('/assets/img/get-some.png') center / contain no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(.22,.75,.28,1), background-color .3s ease;
  filter: drop-shadow(0 0 30px rgba(20,164,184,.34)); }
.getsome.is-visible .getsome-mark { clip-path: inset(0 0 0 0); }
.getsome-inner:hover .getsome-mark { background-color: #fff; }
.getsome-cta { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: 13px; color: var(--teal-on-dark);
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease .75s, transform .5s ease .75s, color .2s ease; }
.getsome.is-visible .getsome-cta { opacity: 1; transform: none; }
.getsome-inner:hover .getsome-cta { color: #fff; }
@supports not ((-webkit-mask: url('#')) or (mask: url('#'))) {
  .getsome-mark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .getsome-mark { clip-path: none; transition: none; }
  .getsome-cta { opacity: 1; transform: none; transition: none; }
}

.products { background: var(--cloud); padding: clamp(72px, 11vh, 120px) 0; }
.products .p-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.products .p-head h2 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; text-transform: uppercase;
  line-height: 1.02; max-width: 18ch; }
.products .p-head p { font-family: var(--font); color: var(--slate); font-size: 15px; max-width: 34ch; margin: 6px 0 0; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.product { display: flex; flex-direction: column; background: #fff; border-radius: 18px;
  overflow: hidden; border: 1px solid rgba(17,17,17,.07);
  box-shadow: 0 18px 40px rgba(17,17,17,.07);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.product:hover { transform: translateY(-6px); border-color: rgba(6,96,108,.34);
  box-shadow: 0 26px 54px rgba(6,96,108,.18); }
.product .pic { position: relative; aspect-ratio: 5/4; background-size: cover; background-position: center; }
/* Branded card panel used instead of stock photography.
   The Everest logo has a transparent outer background, but its internal
   detail (mountain crevices, barbell ring centres) is dark negative space
   rather than true transparency. This panel must therefore stay on a DARK
   background — do not move it onto a light surface without a
   light-background variant of the logo. */
.product .pic-brand { position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--black-deep) 0%, var(--teal-darkest) 100%); }
/* same drifting light pools as the dark bands, scaled down to card size, so
   the panels breathe instead of sitting as flat blocks behind the logo */
.product .pic-brand::before { content: ''; position: absolute; inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(42% 34% at 26% 24%, rgba(20,164,184,.30), transparent 70%),
    radial-gradient(38% 30% at 76% 72%, rgba(20,164,184,.18), transparent 70%);
  filter: blur(14px);
  animation: atmosDrift 30s ease-in-out infinite alternate; }
.product:hover .pic-brand::before { animation-duration: 16s; }
.pic-logo { position: relative; z-index: 1; width: 62%; max-width: 190px; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .product .pic-brand::before { animation: none; } }
/* catalogue groups: weekly plans, one-off services and proposal work never
   share a grid, so pricing cannot be read across different billing models */
.cat-group + .cat-group { margin-top: 52px; }
.cat-head { margin-bottom: 20px; }
.cat-head h3 { font-size: 22px; font-weight: 600; margin: 0; }
.cat-head p { font-family: var(--font); font-size: 14px; color: var(--slate); margin: 5px 0 0; }
.product .pic .plabel { position: absolute; left: 14px; top: 14px; font-family: var(--font);
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
  background: rgba(10,10,10,.72); color: #fff; padding: 6px 11px; border-radius: 20px; backdrop-filter: blur(4px); }
.product .pbody { display: flex; flex-direction: column; flex: 1; padding: 24px 22px 22px; }
/* Program names in the display face, uppercase, to match the nav and hero. */
.product h3 { font-family: var(--display); font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
  line-height: 1.15; margin: 0 0 10px; }
.product .pdesc { font-family: var(--font); font-size: 14px; color: var(--slate); line-height: 1.55; margin: 0 0 16px; }
.product .pmeta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.product .pmeta span { font-family: var(--font); font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--teal-darkest);
  background: var(--mist); border: 1px solid var(--mist-line);
  padding: 4px 10px; border-radius: 14px; }
/* price and CTA separated from the meta by a hairline, so the commercial
   decision reads as its own block rather than more body copy */
.product .pfoot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(17,17,17,.09);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product .pprice { font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.product .pprice small { font-family: var(--font); font-size: 12px; font-weight: 400; color: var(--slate); }
.product .pprice.tbd { font-size: 16px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--teal-deep); }
.product .btn { padding: 11px 18px; font-size: 13.5px; }
@media (max-width: 1040px) { .product-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }
/* programs catalogue: 3 across (id outranks the base grid, so scope each step) */
#catalogue { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { #catalogue { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #catalogue { grid-template-columns: 1fr; } }

/* --- 6. Full-bleed closer --- */
.closer { position: relative; color: #fff; overflow: hidden; text-align: center;
  min-height: 66vh; display: flex; align-items: center; }
.closer .closer-bg { position: absolute; inset: 0; z-index: 0;
  /* Opaque, not translucent: the stock photo that used to sit under this
     gradient is gone, and .closer sets no background of its own, so a
     see-through gradient would leave white behind white text. */
  background-image: linear-gradient(180deg, #0a0a0a, #04342c);
  background-size: cover; background-position: center 30%; }
.closer .rail { position: relative; z-index: 2; }
.closer h2 { font-size: clamp(32px, 5.4vw, 68px); font-weight: 700; text-transform: uppercase;
  line-height: 1.0; max-width: 18ch; margin: 0 auto; }
.closer p { font-family: var(--font); color: #e4e8ea; font-size: clamp(16px, 1.6vw, 19px);
  max-width: 560px; margin: 22px auto 32px; line-height: 1.55; }
.closer .cine-actions { justify-content: center; }

/* full-bleed responsive: stack division panels vertically (no scroll-pin) */
@media (max-width: 860px) {
  .division { position: static; grid-template-columns: 1fr; min-height: 0; box-shadow: none; }
  /* 58vh, not 46: the panel photos are portrait (0.8), and at 46vh a phone
     cut 10% off the top and bottom of every one of them. */
  .division .media { min-height: 58vh; order: 0 !important; }
  .division:nth-child(even) .media { order: 0; }
  .division .body { padding: 52px 26px; }
}

/* reduced motion: no scroll-pinning, panels simply flow */
@media (prefers-reduced-motion: reduce) {
  .division { position: static; min-height: 0; box-shadow: none; }
}

/* --- Inner-page cinematic subhero (full-bleed image, matches home hero size) --- */
/* Same reasoning as .cine-hero: top-aligned so the copy clears the ascent
   line, which runs low on the left where the text column sits. */
.subhero { position: relative; min-height: var(--hero-h); display: flex; align-items: flex-start;
  color: #fff; background: #0a0a0a; overflow: hidden; }
.subhero .rail { position: relative; z-index: 2; padding-top: 150px; padding-bottom: 8vh; }
.subhero .crumbs { color: var(--ink-on-dark); }
/* Identical type scale, measure and rhythm to .cine-hero — every hero on the
   site now sets its headline, standfirst and buttons on the same grid, so
   moving between pages does not shift the furniture. */
.subhero h1, .subhero .subhero-title { font-size: clamp(40px, 7vw, 96px); font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: .94; max-width: 13ch; }
.subhero .sub { font-family: var(--font); font-size: clamp(16px, 1.7vw, 20px); color: #e4e8ea;
  max-width: 560px; margin: 20px 0 28px; line-height: 1.5; }
.subhero .cine-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* "Best value" highlight on product cards (used in the programs catalogue) */
.product.is-best { outline: 2px solid var(--teal-accent); outline-offset: -2px; }
.product .pbadge { position: absolute; right: 14px; top: 14px; font-family: var(--font);
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
  background: var(--teal-accent); color: var(--teal-darkest); padding: 6px 11px; border-radius: 20px; }

/* --- Program finder: interactive step wizard (dark, colourful) --- */
.finder-band { position: relative; background: var(--black); color: #fff; overflow: hidden;
  padding: clamp(64px, 10vh, 112px) 0; }
.finder-band .rail { position: relative; z-index: 2; }
.finder-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font);
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--teal-accent); margin-bottom: 14px; }
.finder-head h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 700; text-transform: uppercase; line-height: 1.02; }
.finder { max-width: 900px; margin-top: 34px; }
.finder-progress { height: 6px; background: rgba(255,255,255,.1); border-radius: 5px; overflow: hidden; }
.finder-bar { display: block; height: 100%; width: 25%; border-radius: 5px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal-accent));
  box-shadow: 0 0 18px rgba(20,164,184,.6); transition: width .45s cubic-bezier(.4,0,.2,1); }
.finder-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font); font-size: 13px; color: var(--ink-on-dark); margin: 14px 0 30px; }
.finder-back { background: none; border: 0; color: var(--ink-on-dark); font-family: var(--font);
  font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 0;
  transition: color .14s ease; }
.finder-back:hover { color: #fff; }
.finder-back[hidden], .finder-stage[hidden] { display: none; }
.fstep { display: none; }
.fstep.is-active { display: block; animation: fstepIn .45s cubic-bezier(.2,.7,.3,1); }
@keyframes fstepIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.fq { font-family: var(--display); font-size: clamp(22px, 3vw, 34px); font-weight: 600;
  letter-spacing: -.01em; margin: 0 0 24px; }
.foptions { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; }
.fopt { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; text-align: left;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: #fff;
  border-radius: 16px; padding: 22px 20px; cursor: pointer; font-family: var(--font); font-size: 15px; font-weight: 500;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.fopt i { font-size: 28px; color: var(--teal-accent); transition: transform .16s ease, color .16s ease; }
.fopt:hover { transform: translateY(-5px); background: rgba(20,164,184,.12);
  border-color: var(--teal-accent); box-shadow: 0 16px 34px rgba(0,0,0,.35); }
.fopt:hover i { transform: scale(1.16); }
.fopt.selected { background: var(--teal-accent); border-color: var(--teal-accent); color: var(--teal-darkest);
  box-shadow: 0 16px 34px rgba(20,164,184,.4); }
.fopt.selected i { color: var(--teal-darkest); }

/* finder result reveal */
.finder-result { display: none; }
.finder-result.show { display: block; animation: resultIn .5s cubic-bezier(.2,.7,.3,1); }
@keyframes resultIn { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
.result-head { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font);
  text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; color: var(--teal-accent); margin-bottom: 16px; }
.result-head i { font-size: 18px; }
.result-card { display: grid; grid-template-columns: 260px 1fr; background: #fff; color: var(--black);
  border-radius: 20px; overflow: hidden; box-shadow: 0 34px 74px rgba(0,0,0,.45); }
.result-media { background-image: url('/assets/img/everest365-app-phone-v1.jpg'); background-size: cover;
  background-position: center; min-height: 230px; }
.result-body { padding: 30px; }
.result-body h3 { font-family: var(--display); font-size: 26px; font-weight: 700; margin: 0 0 8px; }
.result-body > p { font-family: var(--font); color: var(--slate); font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.result-why { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
.result-why li { display: flex; align-items: center; gap: 10px; font-family: var(--font); font-size: 14px; color: #2c2f31; }
.result-why li i { color: var(--teal-deep); font-size: 18px; flex: 0 0 auto; }
.result-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* The price, next to the recommendation rather than a click away. */
.result-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 18px; }
.rp-amount { font-family: var(--display); font-size: 30px; font-weight: 700; color: var(--black); line-height: 1; }
.rp-amount.rp-tbd { font-size: 20px; color: var(--slate); }
.rp-term { font-family: var(--font); font-size: 14px; color: var(--slate); }

/* Proof directly under the price, because that is where the doubt is. Shown
   only when a real review genuinely matches what the finder was told. */
.result-proof { margin: 18px 0 0; padding: 18px 20px; background: #fff; color: var(--black);
  border: 1px solid var(--mist-line); border-left: 3px solid var(--teal-accent); border-radius: 12px; }
.result-proof[hidden] { display: none; }
.rp-stars { color: var(--teal-deep); font-size: 14px; letter-spacing: 2px; }
.result-proof blockquote { margin: 8px 0 10px; font-family: var(--font); font-size: 15px;
  line-height: 1.65; color: #2c2f31; }
.result-proof figcaption { font-family: var(--font); font-size: 13px; color: var(--slate);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.result-proof figcaption span { color: var(--slate); }
.rp-rating { margin-left: auto; color: var(--teal-deep); text-decoration: none; font-weight: 600; }
.rp-rating:hover, .rp-rating:focus-visible { text-decoration: underline; }
@media (max-width: 640px) {
  .rp-rating { margin-left: 0; flex-basis: 100%; }
}
.finder-restart { background: none; border: 0; color: var(--slate); font-family: var(--font); font-size: 14px;
  cursor: pointer; text-decoration: underline; padding: 0; }
.finder-restart:hover { color: var(--teal-deep); }
@media (max-width: 640px) { .result-card { grid-template-columns: 1fr; } .result-media { min-height: 170px; } }
@media (prefers-reduced-motion: reduce) {
  .fstep.is-active, .finder-result.show { animation: none; }
  .finder-bar { transition: none; }
}

/* --- App showcase (coaching page) --- */
.app-band { background: var(--cloud); }
.app-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px);
  align-items: center; }
.app-copy .eyebrow-3 { color: var(--teal-deep); }
.app-copy h2 { font-size: clamp(26px, 3.2vw, 38px); }
.app-copy p { color: var(--slate); font-size: 16px; line-height: 1.7; margin: 14px 0 0; max-width: 52ch; }
.app-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.app-points li { display: flex; align-items: center; gap: 11px; font-family: var(--font);
  font-size: 15.5px; color: var(--black); }
.app-points li i { color: var(--teal-deep); font-size: 20px; flex: 0 0 auto; }
.app-figure { margin: 0; }
.app-figure img { display: block; width: 100%; height: auto; max-width: 560px;
  margin: 0 auto; border-radius: var(--radius); }
@media (max-width: 860px) {
  .app-showcase { grid-template-columns: 1fr; }
  .app-figure { order: -1; }
  .app-figure img { max-width: 420px; }
}

/* --- Support tiers (comparison rebuilt as premium cards on dark) --- */
.tiers { position: relative; background: var(--black); color: #fff; overflow: hidden;
  padding: clamp(64px, 10vh, 112px) 0; }
.tiers .rail { position: relative; z-index: 2; }
.tiers .t-head { max-width: 660px; margin-bottom: 46px; }
.eyebrow-3 { display: inline-block; font-family: var(--font); font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 12px; }
.tiers .eyebrow-3 { color: var(--teal-accent); }
.tiers .t-head h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 700; text-transform: uppercase; line-height: 1.02; }
.tiers .t-head p { font-family: var(--font); color: var(--ink-on-dark); font-size: 16px; margin: 14px 0 0; line-height: 1.6; }
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.tier { position: relative; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px; padding: 34px 28px; transition: transform .18s ease, border-color .18s ease; }
.tier:hover { transform: translateY(-6px); border-color: rgba(20,164,184,.6); }
.tier.is-popular { border-color: var(--teal-accent); background: rgba(20,164,184,.09);
  box-shadow: 0 30px 70px rgba(20,164,184,.18); }
.tier-badge { position: absolute; top: -13px; left: 28px; font-family: var(--font); font-size: 12px;
  letter-spacing: 1px; text-transform: uppercase; font-weight: 600; background: var(--teal-accent);
  color: var(--teal-darkest); padding: 6px 14px; border-radius: 20px; }
.tier h3 { font-family: var(--display); font-size: 22px; font-weight: 700; text-transform: uppercase; margin: 0 0 6px; }
.tier .tier-sub { font-family: var(--font); font-size: 14px; color: var(--ink-on-dark); margin: 0 0 24px; line-height: 1.5; }
.tier-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 13px; }
.tier-list li { display: flex; align-items: center; gap: 11px; font-family: var(--font); font-size: 14.5px; }
.tier-list li i { font-size: 19px; flex: 0 0 auto; }
.tier-list li.on { color: #fff; }
.tier-list li.on i { color: var(--teal-accent); }
.tier-list li.off { color: #6d757b; }
.tier-list li.off i { color: #474e54; }
.tier-list li.partial { color: var(--ink-on-dark); }
.tier-list li.partial i { color: var(--teal-accent); }
.tier-list li .pill { margin-left: auto; font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--teal-accent); border: 1px solid rgba(20,164,184,.5); border-radius: 12px; padding: 2px 8px; }
.tier .btn { width: 100%; justify-content: center; }
.tier-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin: 0 auto; }
@media (max-width: 900px) { .tier-grid, .tier-grid.cols-2 { grid-template-columns: 1fr; max-width: 460px; } }

/* --- FAQ: editorial two-column --- */
.faq-split { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: start; }
.faq-aside { position: sticky; top: 104px; }
.faq-aside .eyebrow-3 { color: var(--teal-deep); }
.faq-aside h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; text-transform: uppercase; line-height: 1.04; }
.faq-aside p { font-family: var(--font); color: var(--slate); font-size: 15px; margin: 14px 0 22px; line-height: 1.6; }
.faq-list { min-width: 0; }
.bg-mist .faq-item { border-color: rgba(6,96,108,.16); }
.faq-item[open] { border-color: var(--teal-accent); box-shadow: 0 12px 30px rgba(17,17,17,.07); }
@media (max-width: 820px) { .faq-split { grid-template-columns: 1fr; gap: 26px; } .faq-aside { position: static; } }

/* ============================================================
   Section motion & interactions (reusable across pages)
   ============================================================ */
/* staggered scroll-reveal: container .r-stagger, children .reveal */
.r-stagger > .reveal:nth-child(2) { transition-delay: .07s; }
.r-stagger > .reveal:nth-child(3) { transition-delay: .14s; }
.r-stagger > .reveal:nth-child(4) { transition-delay: .21s; }
.r-stagger > .reveal:nth-child(5) { transition-delay: .28s; }
.r-stagger > .reveal:nth-child(6) { transition-delay: .35s; }
/* extended to 12 for the EMPOWER curriculum grid — without these the last six
   cards all landed together on the same frame */
.r-stagger > .reveal:nth-child(7) { transition-delay: .42s; }
.r-stagger > .reveal:nth-child(8) { transition-delay: .49s; }
.r-stagger > .reveal:nth-child(9) { transition-delay: .56s; }
.r-stagger > .reveal:nth-child(10) { transition-delay: .63s; }
.r-stagger > .reveal:nth-child(11) { transition-delay: .70s; }
.r-stagger > .reveal:nth-child(12) { transition-delay: .77s; }

/* feature card: growing top accent bar + animated icon tile */
.feature { position: relative; overflow: hidden; }
.feature::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal-accent));
  transform: scaleX(0); transform-origin: left; transition: transform .28s ease; }
.feature:hover::before { transform: scaleX(1); }
.feature-icon { transition: transform .2s ease, box-shadow .2s ease; }
.feature:hover .feature-icon { transform: rotate(-6deg) scale(1.08); box-shadow: 0 14px 28px rgba(6,96,108,.42); }

/* steps: giant ghost number watermark + glowing node on hover */
.step { position: relative; overflow: hidden; }
.step::after { content: attr(data-n); position: absolute; right: 12px; bottom: -18px;
  font-family: var(--display); font-weight: 700; font-size: 96px; line-height: 1;
  color: rgba(6,96,108,.06); pointer-events: none; }
.step-num { transition: transform .2s ease, box-shadow .2s ease; }
.step:hover .step-num { transform: scale(1.12);
  box-shadow: 0 0 0 6px rgba(20,164,184,.16), 0 8px 22px rgba(6,96,108,.4); }

/* testimonial quote-mark flourish on hover */
.testimonial > i { transition: transform .2s ease; }
.testimonial:hover > i { transform: scale(1.18) rotate(-6deg); }

@media (prefers-reduced-motion: reduce) {
  .r-stagger > .reveal { transition-delay: 0s !important; }
}

/* --- Assurance band (trust device, e.g. safeguarding) --- */
.assurance { position: relative; background: var(--teal-darkest); color: #fff; overflow: hidden;
  padding: clamp(60px, 9vh, 104px) 0; }
.assurance .rail { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.assurance .a-head .eyebrow-3 { color: var(--teal-accent); }
.assurance .a-head h2 { font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; text-transform: uppercase; line-height: 1.04; }
.assurance .a-head p { font-family: var(--font); color: var(--teal-on-dark); font-size: 15px; margin: 14px 0 0; line-height: 1.6; }
.assurance-list { display: grid; gap: 14px; }
.assurance-item { display: flex; gap: 15px; align-items: flex-start; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); border-radius: 15px; padding: 20px 22px;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease; }
.assurance-item:hover { transform: translateX(5px); border-color: var(--teal-accent); background: rgba(20,164,184,.1); }
.assurance-item > i { color: var(--teal-accent); font-size: 26px; flex: 0 0 auto; margin-top: 2px; }
.assurance-item h3 { font-family: var(--display); font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.assurance-item p { margin: 0; color: var(--ink-on-dark); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 820px) { .assurance .rail { grid-template-columns: 1fr; gap: 30px; } }

/* --- Trust logo wall — scrolling marquee (placeholder wordmarks) --- */
.logo-wall { padding: 48px 0; background: #fff; overflow: hidden;
  border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); }
.logo-wall.on-cloud { background: var(--cloud); }
.logo-wall .lw-label { text-align: center; font-family: var(--display); font-weight: 700;
  text-transform: uppercase; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--slate); margin: 0 0 34px; }
.logo-marquee { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.logo-track { display: flex; width: max-content; animation: logo-marquee 40s linear infinite; }
.logo-wall:hover .logo-track { animation-play-state: paused; }
@keyframes logo-marquee { to { transform: translateX(-50%); } }
/* Uppercase display face at full strength, matching the nav and program
   names. The old treatment sat at 62% opacity in slate, which read as
   tentative — these are real partners and should look it. Icons are boxed
   in brand teal so they carry weight instead of floating as thin outlines.
   Replace the icons with real partner logos once permission is confirmed. */
.logo-item { display: inline-flex; align-items: center; gap: 14px; margin-right: 64px;
  white-space: nowrap; color: var(--black); opacity: 1;
  font-family: var(--display); font-weight: 700; font-size: 25px;
  text-transform: uppercase; letter-spacing: .02em; }
.logo-item i { font-size: 22px; color: #fff; background: var(--teal-deep);
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.logo-item img { width: auto; height: 46px; max-width: 190px; object-fit: contain; flex: 0 0 auto; }
/* static, grouped variant of the logo wall — used where the relationship type
   has to be stated rather than blurred into one scrolling row */
.org-group + .org-group { margin-top: 36px; }
.org-group .lw-label { text-align: left; margin-bottom: 18px; }
.org-list { display: flex; flex-wrap: wrap; gap: 20px 46px; }
.org-list .logo-item { margin-right: 0; font-size: 21px; }
.org-list .logo-item i { font-size: 28px; }
.lw-note { font-family: var(--font); font-size: 14px; color: var(--slate); margin-left: 7px; }
@media (max-width: 600px) { .org-list { gap: 16px 28px; } .org-list .logo-item { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }
@media (max-width: 600px) { .logo-item { font-size: 22px; margin-right: 48px; } .logo-item i { font-size: 28px; } }

/* --- Hero star rating (made-up placeholder trust signal) --- */
/* Actions and rating both sit hard right, stacked, clear of the ascent line
   and kettlebell which climb through the left and centre of the hero. */
/* Subheroes carry the same climbing ascent line, so their buttons move right
   too. Declared after .subhero .cine-actions so this wins on those pages. */
.cine-hero .cine-actions,
.subhero .cine-actions { float: right; clear: both; justify-content: flex-end; }
.hero-rating { display: inline-flex; align-items: center; gap: 11px; margin-top: 18px;
  color: var(--ink-on-dark); font-family: var(--font); font-size: 14px;
  float: right; clear: both; background: rgba(10,10,10,.55); padding: 9px 16px;
  border-radius: 22px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12); }
/* the rail must contain its floated children or the hero collapses */
.cine-hero .rail::after,
.subhero .rail::after { content: ''; display: block; clear: both; }
@media (max-width: 760px) {
  .cine-hero .cine-actions,
  .subhero .cine-actions { float: none; justify-content: flex-start; }
  .hero-rating { float: none; }
}
/* now a link to the Google profile, so the claim is checkable */
.hero-rating { transition: border-color .15s ease; }
.hero-rating:hover { border-color: rgba(20,164,184,.55); }
.hero-rating .stars { color: var(--teal-accent); letter-spacing: 2px; font-size: 15px; }
.hero-rating strong { color: #fff; font-weight: 600; }

/* --- Sticky intro + stacking outcome cards (two-column deck) --- */
.iw-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.iw-intro { position: sticky; top: 120px; }
.iw-intro .eyebrow-2 { font-size: 12px; letter-spacing: 1px; color: var(--teal-deep); font-weight: 500; }
.iw-intro h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; text-transform: uppercase; line-height: 1.04; margin: 12px 0 0; }
.iw-intro p { font-family: var(--font); color: var(--slate); font-size: 16px; line-height: 1.7; margin: 16px 0 0; }
.iw-cards { display: flex; flex-direction: column; gap: 18px; }
.iw-card { position: sticky; background: #fff; border: 1px solid rgba(0,0,0,.05); border-radius: 18px;
  padding: 26px 28px; display: flex; gap: 20px; align-items: flex-start;
  box-shadow: 0 -12px 44px rgba(17,17,17,.12); }
.iw-card:nth-child(1) { top: 120px; }
.iw-card:nth-child(2) { top: 138px; }
.iw-card:nth-child(3) { top: 156px; }
.iw-card:nth-child(4) { top: 174px; }
.iw-card:nth-child(5) { top: 192px; }
.iw-card:nth-child(6) { top: 210px; }
.iw-icon { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 15px;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal-accent)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  box-shadow: 0 10px 22px rgba(6,96,108,.28); }
.iw-card h3 { font-family: var(--display); font-size: 19px; font-weight: 600; margin: 0 0 6px; }
.iw-card p { font-family: var(--font); font-size: 14.5px; color: var(--slate); margin: 0; line-height: 1.6; }
@media (max-width: 860px) {
  .iw-grid { grid-template-columns: 1fr; gap: 28px; }
  .iw-intro { position: static; }
  .iw-card { position: static; box-shadow: 0 12px 30px rgba(17,17,17,.06); }
}
@media (prefers-reduced-motion: reduce) {
  .iw-card { position: static; box-shadow: 0 12px 30px rgba(17,17,17,.06); }
}

/* --- Full-bleed photo mosaic (visual-impact band) --- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 8px; }
.gallery .g { position: relative; background-size: cover; background-position: center; overflow: hidden; }
.gallery .g.wide { grid-column: span 2; }
.gallery .g.tall { grid-row: span 2; }
.gallery .g-cap { display: flex; align-items: flex-end; padding: 26px; color: #fff; }
.gallery .g-cap span { font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 30px); line-height: 1.02; letter-spacing: -0.01em; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .gallery .g.wide { grid-column: span 2; } }

/* 5-step process variant (e.g. organisational engagement model) */
.steps.cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 920px) { .steps.cols-5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps.cols-5 { grid-template-columns: 1fr; } }

/* assurance band: 2-column checklist variant (e.g. governance/capability) */
.assurance.wide .rail { grid-template-columns: 1fr 1.55fr; }
.assurance-list.cols-2 { grid-template-columns: 1fr 1fr; }
.assurance .a-head .btn { margin-top: 22px; }
@media (max-width: 820px) { .assurance-list.cols-2 { grid-template-columns: 1fr; } }

/* --- Info/format cards (image-topped, no price) --- */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fcard { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(17,17,17,.07); transition: transform .18s ease, box-shadow .18s ease; }
.fcard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(17,17,17,.13); }
.fcard .fpic { position: relative; aspect-ratio: 3/2; background-size: cover; background-position: center; }
.fcard .fchip { position: absolute; left: 14px; top: 14px; background: var(--teal-accent); color: var(--teal-darkest);
  font-family: var(--font); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
  padding: 6px 12px; border-radius: 20px; }
.fcard .fbody { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.fcard h3 { font-family: var(--display); font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.fcard p { font-family: var(--font); font-size: 14px; color: var(--slate); margin: 0 0 16px; line-height: 1.55; flex: 1; }
.fcard .go-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--font); font-weight: 600; font-size: 14px; color: var(--teal-deep); transition: gap .16s ease; }
.fcard .go-link:hover { gap: 12px; }
@media (max-width: 900px) { .fgrid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }


/* ============================================================
   Blog (posts + archive cards)
   ============================================================ */
/* archive/related card meta */
.fcard .fmeta { font-family: var(--font); font-size: 12px; letter-spacing: .3px; text-transform: uppercase;
  color: var(--teal-deep); margin: 0 0 8px; font-weight: 600; }

/* post header */
.post-hero { position: relative; background: #0a0a0a; color: #fff; overflow: hidden;
  padding: 150px 0 clamp(44px, 7vh, 72px); }
.post-hero .post-hero-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, var(--teal-darkest), #0a0a0a);
  background-size: cover; background-position: center; }
.post-hero .rail { position: relative; z-index: 2; }
.post-hero .crumbs { color: var(--ink-on-dark); }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.post-tag { font-family: var(--font); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
  color: var(--teal-darkest); background: var(--teal-accent); padding: 5px 12px; border-radius: 20px; }
.post-tag:hover { background: #fff; }
.post-hero h1 { font-size: clamp(30px, 4.6vw, 54px); font-weight: 700; line-height: 1.05; max-width: 20ch; }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font);
  font-size: 14px; color: var(--ink-on-dark); margin: 18px 0 0; }
.post-meta i { color: var(--teal-accent); font-size: 17px; }
.post-meta .dot { color: var(--grey-muted); margin: 0 4px; }

/* post body */
.post-wrap { max-width: 820px; }
.post-body { max-width: 760px; margin: 0 auto; }
.post-summary { background: var(--mist); border: 1px solid var(--mist-line); border-radius: 16px;
  padding: 22px 24px; margin: 0 0 32px; }
.post-summary-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font);
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: var(--teal-deep); margin-bottom: 8px; }
.post-summary p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--teal-darkest); }
.post-body h2 { font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; margin: 40px 0 12px; }
.post-body h3 { font-family: var(--display); font-size: 20px; font-weight: 600; margin: 30px 0 8px; }
.post-body p, .post-body li { font-size: 17px; line-height: 1.75; color: #2c2f31; }
.post-body ul, .post-body ol { padding-left: 22px; margin: 14px 0; }
.post-body li { margin: 8px 0; }
.post-body a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover { color: var(--teal-accent); }
.post-body strong { color: var(--black); }
.post-body img { border-radius: 14px; margin: 24px 0; }

/* post FAQ / CTA / related */
.post-faq { max-width: 760px; margin: 48px auto 0; }
.post-faq h2, .post-related h2, .post-cta h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; }
.post-faq h2 { font-size: clamp(22px, 3vw, 32px); margin: 0 0 18px; }
.post-cta { max-width: 760px; margin: 48px auto 0; background: var(--black); color: #fff;
  border-radius: 20px; padding: clamp(32px, 5vw, 48px); }
.post-cta h2 { font-size: clamp(22px, 3vw, 32px); margin: 0 0 10px; }
.post-cta p { font-family: var(--font); color: var(--ink-on-dark); font-size: 16px; margin: 0 0 22px; max-width: 46ch; }
.post-related { margin-top: 64px; }
.post-related h2 { font-size: clamp(22px, 3vw, 32px); margin: 0 0 24px; }

/* ============================================================
   EMPOWER page — Everest structure + EMPOWER (pink/blue) energy.
   Everest black/white/teal stay structural; EMPOWER pink/blue are
   accents only. Tokens are page-scoped in spirit (only used by .emp-*).
   ============================================================ */
:root {
/* Sampled from the EMPOWER x Busy Bumbles badge (Aug 2026) so the page and
   the co-brand mark are the same colours: pink #F00060, blue #0CA8F0,
   navy #001848, yellow #FCCC00.

   Note the blue sits at hue ~199 and the new Everest accent teal at ~187 —
   close enough that side by side they read as a mistake rather than two
   brands. Handled by scoping: inside EMPOWER content the shared teal token
   is remapped to EMPOWER blue (see .empower-scope), so only the site header
   stays Everest teal. */
  --emp-pink: #F00060; --emp-hot: #FF3D82; --emp-deep-pink: #99003D;
  --emp-blue: #0CA8F0; --emp-sky: #46C8FF; --emp-deep-blue: #00305C;
  --emp-navy: #001848; --emp-soft-pink: #FF8FB8; --emp-light-blue: #7ADCFF;
  --emp-yellow: #FCCC00;  /* badge yellow: highlights and youth energy */
  --emp-wing: linear-gradient(135deg, #F00060, #0CA8F0);
  --emp-youth: linear-gradient(135deg, #FF3D82, #46C8FF);
  --emp-dark: linear-gradient(160deg, #000616, #00305C);
}

/* Inside EMPOWER content, shared components adopt EMPOWER blue instead of
   Everest teal. Applied to <main> only, so the header and footer stay
   Everest — the sub-brand owns the page, not the chrome. */
.empower-scope { --teal-accent: var(--emp-blue); --teal-deep: var(--emp-deep-blue);
  --teal-darkest: var(--emp-navy); --teal-on-dark: var(--emp-light-blue);
  --mist-line: #BFE4F7; --mist: #EAF6FE; }

/* EMPOWER wings replace the kettlebell inside the sub-brand's own page.
   Same rules as the kettlebell: interactive elements keep their native
   affordance as the fallback, and it is skipped on touch. */
@media (hover: hover) and (pointer: fine) {
  .empower-scope { cursor: url('/assets/img/cursor-empower-wings.png') 16 16, auto; }
  .empower-scope a, .empower-scope button, .empower-scope summary,
  .empower-scope label, .empower-scope select, .empower-scope [role="button"] {
    cursor: url('/assets/img/cursor-empower-wings.png') 16 16, pointer; }
  .empower-scope input, .empower-scope textarea { cursor: text; }
  .empower-scope input[type="checkbox"], .empower-scope input[type="radio"] { cursor: pointer; }
}
/* the site-wide glow trail follows EMPOWER's pink rather than Everest teal */
.empower-scope-active .cursor-trail span {
  background: radial-gradient(circle, rgba(240,0,96,.85), rgba(240,0,96,0) 70%); }

/* highlight phrase + pink/blue button */
.emp-hi { background: var(--emp-wing); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-emp { background: var(--emp-pink); color: #fff; box-shadow: 0 10px 26px rgba(231,48,142,.4); }
.btn-emp:hover { background: var(--emp-hot); color: #fff; transform: translateY(-1px); }
.emp-eyebrow { display: inline-block; font-family: var(--font); font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--emp-hot); margin-bottom: 10px; }

/* accent overrides for reused Everest cards on EMPOWER sections */
.emp-grid .feature-icon { background: var(--emp-wing); box-shadow: 0 10px 22px rgba(231,48,142,.26); }
.emp-grid .feature::before { background: var(--emp-wing); }
/* the session steps now use the purpose-built .emp-journey track further down,
   so the .emp-steps overrides on the shared .steps component are gone */

/* --- EMPOWER hero (2-column: copy left, logo right) --- */
.emp-hero { position: relative; min-height: var(--hero-h); display: flex; align-items: center;
  color: #fff; overflow: hidden; background: var(--emp-dark); }
.emp-hero .wing-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.emp-hero .wing-glow::before, .emp-hero .wing-glow::after { content: ''; position: absolute; width: 52vw; height: 52vw;
  max-width: 720px; max-height: 720px; border-radius: 50%; filter: blur(100px); opacity: .32; top: -6%; }
.emp-hero .wing-glow::before { left: -6%; background: var(--emp-pink); }
.emp-hero .wing-glow::after { right: -6%; background: var(--emp-blue); }
.emp-hero .rail { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 48px; align-items: center; padding-top: 140px; padding-bottom: 64px; }
.emp-hero .crumbs { display: flex; width: fit-content; margin-bottom: 24px;
  border-color: rgba(231,48,142,.55); color: var(--ink-on-dark); }
.emp-hero .crumbs a { color: var(--emp-hot); }
.emp-hero .crumbs a:hover { color: #fff; }
.emp-hero h1 { font-size: clamp(30px, 4.4vw, 54px); font-weight: 700; line-height: 1.06; max-width: 18ch;
  margin: 0; text-transform: uppercase; letter-spacing: -0.01em; }
.emp-hero .sub { font-family: var(--font); font-size: clamp(16px, 1.7vw, 19px); color: #dbe4f0;
  max-width: 560px; margin: 20px 0 30px; line-height: 1.6; }
.emp-hero-logo { display: flex; justify-content: center; }
/* Desktop only; the 860px block below drops it to min(300px, 72vw) for
   phones. The logo was capped at 440px inside a column roughly 547px wide, so
   it was leaving its own space empty. The column also takes the larger share
   of the grid now - the headline is set to 18ch and still fits the narrower
   side comfortably. */
.emp-hero .emp-logo { width: min(580px, 100%); height: auto; display: block; }
@media (max-width: 860px) {
  .emp-hero { text-align: center; }
  .emp-hero .rail { grid-template-columns: 1fr; gap: 24px; padding-top: 120px; }
  .emp-hero .cine-actions { justify-content: center; }
  .emp-hero .crumbs, .emp-hero h1, .emp-hero .sub { margin-left: auto; margin-right: auto; }
  .emp-hero-logo { order: -1; }
  .emp-hero .emp-logo { width: min(300px, 72vw); }
}

/* --- EMPOWER dark statement / vision bands --- */
.emp-band { position: relative; background: var(--emp-dark); color: #fff; overflow: hidden;
  padding: clamp(64px, 11vh, 128px) 0; }
.emp-band .rail { position: relative; z-index: 2; }
.emp-band h2 { font-size: clamp(26px, 4vw, 50px); font-weight: 700; text-transform: uppercase; line-height: 1.05; max-width: 20ch; }
.emp-band p { font-family: var(--font); color: #cdd8e6; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.65; max-width: 640px; margin: 18px 0 0; }
.emp-keyline { border-left: 3px solid var(--emp-hot); padding-left: 20px; margin-top: 26px; max-width: 620px; }
.emp-keyline p { color: #fff; font-family: var(--font); font-size: 17px; margin: 0; }

/* --- What children learn: curriculum cards --- */
.emp-topics-band { background: linear-gradient(180deg, rgba(250,156,203,.10), rgba(79,221,254,.10)); }
.emp-learn { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  list-style: none; padding: 0; margin: 0; }
/* Each card carries its own hue on --c, set by the nth-child cycle below, so
   the icon chip, the corner blob and the hover ring all shift together and
   the twelve cards read as a set rather than twelve unrelated colours. */
/* min-height holds the card's proportions now that the description has moved
   into the hover panel and no longer contributes to the flow */
.emp-learn-card { --c: var(--emp-pink); position: relative; overflow: hidden;
  min-height: 196px;
  background: #fff; border: 1px solid var(--mist-line); border-radius: 22px;
  padding: 24px 20px 22px; transition: transform .22s ease, box-shadow .22s ease,
  border-color .22s ease; }
/* soft blob of the card's hue, tucked into the top-right corner */
.emp-learn-card::before { content: ''; position: absolute; top: -46px; right: -46px;
  width: 118px; height: 118px; border-radius: 50%; background: var(--c);
  opacity: .11; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .22s ease; }
.emp-learn-card:hover { transform: translateY(-6px); border-color: transparent;
  box-shadow: 0 18px 38px rgba(0,24,72,.15); }
.emp-learn-card:hover::before { transform: scale(1.45); opacity: .17; }
.emp-learn-icon { position: relative; z-index: 1; display: inline-flex;
  align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 17px; background: var(--c); color: #fff; font-size: 25px;
  box-shadow: 0 9px 20px color-mix(in srgb, var(--c) 38%, transparent);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
/* the small tilt-and-grow on hover is the one piece of pure play in this
   section — it rewards a child poking at the card without costing the
   parent-facing legibility of the label underneath */
.emp-learn-card:hover .emp-learn-icon { transform: rotate(-8deg) scale(1.1); }
.emp-learn-card h3 { position: relative; z-index: 1; font-family: var(--display);
  font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--emp-navy);
  margin: 16px 0 0; }
.emp-learn-card p { position: relative; z-index: 1; font-family: var(--font);
  font-size: 13.5px; line-height: 1.5; color: var(--slate); margin: 7px 0 0; }
.emp-learn-card:nth-child(4n+2) { --c: var(--emp-blue); }
.emp-learn-card:nth-child(4n+3) { --c: var(--emp-yellow); }
.emp-learn-card:nth-child(4n+4) { --c: var(--emp-deep-blue); }
.emp-learn-card:nth-child(4n+3) .emp-learn-icon { color: var(--emp-navy); }
@media (max-width: 1000px) { .emp-learn { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .emp-learn { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 460px) { .emp-learn-card { padding: 20px 16px 18px; }
  .emp-learn-card h3 { font-size: 15.5px; } }

/* --- Outcomes: tall cards with a ghosted numeral --- */
.emp-outcomes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.emp-outcome { --c: var(--emp-pink); position: relative; overflow: hidden;
  min-height: 268px;
  background: #fff; border: 1px solid var(--mist-line); border-radius: 26px;
  padding: 34px 32px 32px; transition: transform .22s ease, box-shadow .22s ease,
  border-color .22s ease; }
/* full-bleed colour bar along the top edge, so the four cards scan as a
   sequence when the eye runs down the grid */
.emp-outcome::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: var(--c); }
/* the outsize numeral sits behind the copy at low opacity — it gives the card
   depth and a sense of progression without adding another element to read */
.emp-outcome::after { content: attr(data-n); position: absolute; right: 18px; bottom: -22px;
  font-family: var(--display); font-weight: 700; font-size: 150px; line-height: 1;
  color: var(--c); opacity: .07; pointer-events: none; }
.emp-outcome:hover { transform: translateY(-6px); border-color: transparent;
  box-shadow: 0 22px 46px rgba(0,24,72,.16); }
.emp-outcome-icon { position: relative; z-index: 1; display: inline-flex;
  align-items: center; justify-content: center; width: 62px; height: 62px;
  border-radius: 20px; background: var(--c); color: #fff; font-size: 30px;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--c) 36%, transparent);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.emp-outcome:hover .emp-outcome-icon { transform: rotate(-8deg) scale(1.08); }
.emp-outcome h3 { position: relative; z-index: 1; font-family: var(--display);
  font-weight: 700; font-size: clamp(19px, 2.1vw, 24px); text-transform: uppercase;
  letter-spacing: -.01em; line-height: 1.1; color: var(--emp-navy); margin: 20px 0 0; }
.emp-outcome p { position: relative; z-index: 1; font-family: var(--font);
  font-size: 15.5px; line-height: 1.65; color: var(--slate); margin: 12px 0 0; max-width: 44ch; }
.emp-outcome:nth-child(2) { --c: var(--emp-blue); }
.emp-outcome:nth-child(3) { --c: var(--emp-yellow); }
.emp-outcome:nth-child(3) .emp-outcome-icon { color: var(--emp-navy); }
.emp-outcome:nth-child(4) { --c: var(--emp-deep-blue); }
@media (max-width: 820px) { .emp-outcomes { grid-template-columns: 1fr; }
  .emp-outcome { padding: 28px 24px 26px; } }

/* --- Hover reveal shared by the curriculum and outcome cards ---
   The description lifts up over the face of the card. Every panel shares one
   EMPOWER gradient — pink through deep blue into navy — with that card's own
   hue blooming through the lower right, so the sixteen panels read as one
   brand rather than sixteen separate colour swatches.

   The shared gradient is what keeps the white copy legible. A solid fill in
   each card's colour would have put white on #FCCC00 at roughly 1.6:1 for
   the yellow cards; blended at 45% over a navy base the same yellow measures
   about 5.6:1. The 26% and 45% figures below are the ceiling those sums
   allow — raising them starts failing AA again.

   The panel is always in the DOM and only visually hidden, so screen readers
   still reach the copy when it is not on screen. */
.emp-learn-back, .emp-outcome-back {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit;
  display: flex; flex-direction: column; justify-content: center;
  color: #fff; pointer-events: none;
  background:
    radial-gradient(120% 95% at 14% 8%, rgba(255,255,255,.26), transparent 58%),
    radial-gradient(88% 68% at 84% 88%,
      color-mix(in srgb, var(--c) 45%, transparent), transparent 72%),
    linear-gradient(148deg, var(--emp-pink) 0%, var(--emp-deep-pink) 26%,
      var(--emp-deep-blue) 66%, var(--emp-navy) 100%);
  opacity: 0; transform: translateY(14px);
  transition: opacity .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.emp-learn-back { padding: 22px 20px; }
.emp-outcome-back { padding: 32px; }
.emp-learn-back > *, .emp-outcome-back > * { position: relative; z-index: 1; }
/* the title repeats inside the panel so the card still says what it is once
   its face is covered; aria-hidden because the real heading is underneath */
.emp-back-title { display: block; font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; opacity: .78; }
.emp-learn-back .emp-back-title { font-size: 12px; margin-bottom: 9px; }
.emp-outcome-back .emp-back-title { font-size: 13px; margin-bottom: 12px; }
.emp-learn-back p { font-family: var(--font); font-size: 14px; line-height: 1.5;
  color: #fff; margin: 0; }
.emp-outcome-back p { font-family: var(--font); font-size: 16px; line-height: 1.62;
  color: #fff; margin: 0; max-width: 40ch; }
.emp-learn-card:hover .emp-learn-back, .emp-learn-card:focus-visible .emp-learn-back,
.emp-outcome:hover .emp-outcome-back, .emp-outcome:focus-visible .emp-outcome-back {
  opacity: 1; transform: none; }
/* the cards are not links, so they need an explicit tab stop or the reveal
   would be unreachable without a mouse */
.emp-learn-card:focus-visible, .emp-outcome:focus-visible {
  outline: 3px solid var(--emp-deep-blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .emp-learn-back, .emp-outcome-back { transform: none; transition: opacity .15s linear; } }
@media (hover: none) {
  /* Touch devices have no hover to give. Rather than lock the copy behind a
     gesture that does not exist, the panel unwinds back into the card. */
  .emp-learn-back, .emp-outcome-back { position: static; display: block; opacity: 1;
    transform: none; background: none; padding: 0; pointer-events: auto; }
  .emp-back-title { display: none; }
  .emp-learn-back p { color: var(--slate); font-size: 13.5px; margin-top: 7px; }
  .emp-outcome-back p { color: var(--slate); font-size: 15.5px; margin-top: 12px; max-width: 44ch; }
}

/* --- How sessions work: a five-stop journey --- */
.emp-journey { position: relative; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 20px; margin-top: 8px; }
/* the dashed rule threads behind the five markers so the block reads as one
   journey rather than five separate tiles */
.emp-journey::before { content: ''; position: absolute; left: 10%; right: 10%; top: 33px;
  height: 3px; z-index: 0; background-image: linear-gradient(90deg,
    var(--mist-line) 0 62%, transparent 62% 100%);
  background-size: 16px 3px; background-repeat: repeat-x; }
.emp-stop { position: relative; z-index: 1; text-align: center; }
.emp-stop-dot { --c: var(--emp-pink); display: inline-flex; align-items: center;
  justify-content: center; width: 66px; height: 66px; border-radius: 50%;
  background: var(--c); color: #fff; font-family: var(--display); font-weight: 700;
  font-size: 25px; border: 5px solid var(--cloud);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--c) 40%, transparent);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.emp-stop:hover .emp-stop-dot { transform: translateY(-5px) scale(1.07); }
.emp-stop h3 { font-family: var(--display); font-weight: 700; font-size: 16px;
  line-height: 1.2; color: var(--emp-navy); margin: 18px 0 0; }
.emp-stop p { font-family: var(--font); font-size: 13.5px; line-height: 1.55;
  color: var(--slate); margin: 8px 0 0; }
.emp-stop:nth-child(2) .emp-stop-dot { --c: var(--emp-blue); }
.emp-stop:nth-child(3) .emp-stop-dot { --c: var(--emp-yellow); color: var(--emp-navy); }
.emp-stop:nth-child(4) .emp-stop-dot { --c: var(--emp-deep-blue); }
.emp-stop:nth-child(5) .emp-stop-dot { --c: var(--emp-hot); }
@media (max-width: 900px) {
  .emp-journey { grid-template-columns: 1fr; gap: 26px; text-align: left; }
  /* on narrow screens the thread runs vertically down the left of the markers */
  .emp-journey::before { left: 32px; right: auto; top: 8%; bottom: 8%; width: 3px; height: auto;
    background-image: linear-gradient(180deg, var(--mist-line) 0 62%, transparent 62% 100%);
    background-size: 3px 16px; background-repeat: repeat-y; }
  .emp-stop { display: grid; grid-template-columns: 66px 1fr; gap: 20px;
    align-items: start; text-align: left; }
  .emp-stop-dot { grid-row: span 3; }
  .emp-stop h3 { margin-top: 12px; }
}

/* --- Busy Bumbles partnership --- */
.emp-partner { background: var(--cloud); }
.emp-partner .rail { display: grid; grid-template-columns: 340px 1fr; gap: 52px; align-items: center; }
/* the badge floats on a soft pink/blue halo drawn from its own colours,
   which lifts it off the flat section without a hard container */
.emp-partner .badge-wrap { text-align: center; position: relative; }
.emp-partner .badge-wrap::before { content: ''; position: absolute; inset: 4% 8%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 30%, rgba(240,0,96,.22), transparent 62%),
              radial-gradient(circle at 70% 68%, rgba(12,168,240,.26), transparent 62%);
  filter: blur(26px); }
.emp-partner .badge-wrap img { position: relative; width: min(320px, 84%); height: auto;
  transition: transform .5s cubic-bezier(.22,.75,.28,1); }
.emp-partner .badge-wrap img:hover { transform: rotate(-4deg) scale(1.04); }
.emp-partner .emp-eyebrow { color: var(--emp-pink); }
.emp-partner h2 { font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.emp-partner p { font-family: var(--font); color: var(--slate); font-size: 16px; line-height: 1.7; margin: 16px 0 0; max-width: 52ch; }
/* who-they-are line, set apart from the partnership narrative that follows */
.emp-partner-who { border-left: 3px solid var(--emp-yellow); padding-left: 16px;
  color: var(--emp-navy) !important; font-size: 16.5px !important; }
.emp-partner-who strong { color: var(--emp-navy); font-weight: 700; }
/* Outbound link to the partner's own site. Written as descriptive link text
   rather than "click here" so it makes sense read on its own, which is how
   screen-reader users often navigate a page. */
.emp-partner-link { font-family: var(--font); font-size: 16px; color: var(--slate);
  margin: 18px 0 0; line-height: 1.6; }
.emp-partner-link a { display: inline-flex; align-items: center; gap: 7px;
  font-weight: 500; color: var(--emp-pink);
  border-bottom: 1px solid rgba(231,48,142,.4); transition: border-color .15s ease, color .15s ease; }
.emp-partner-link a:hover { color: var(--emp-hot); border-bottom-color: var(--emp-hot); }
.emp-partner-link a i { font-size: 16px; }

.emp-slogan { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2.2vw, 26px); margin-top: 22px;
  background: var(--emp-wing); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 760px) { .emp-partner .rail { grid-template-columns: 1fr; text-align: center; } .emp-partner p { margin-inline: auto; } }

/* --- Pilot data cards (Performance-style, pink/blue numbers) --- */
.emp-data { position: relative; background: var(--black); color: #fff; overflow: hidden; padding: clamp(64px, 10vh, 120px) 0; }
.emp-data .rail { position: relative; z-index: 2; }
.emp-data .dh h2 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; text-transform: uppercase; line-height: 1.03; max-width: 18ch; }
.emp-data .dh p { font-family: var(--font); color: var(--ink-on-dark); font-size: 16px; margin: 14px 0 44px; max-width: 60ch; line-height: 1.65; }
.emp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.emp-stat { border-top: 2px solid rgba(255,255,255,.16); padding-top: 22px; }
.emp-stat .num { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4vw, 50px); line-height: 1.02;
  background: var(--emp-youth); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Text-valued stats (a date range, a partner name) need their own size. At
   the numeric 50px they wrapped mid-value and read as two disconnected
   fragments rather than one figure. Each part is held together with
   non-breaking spaces so a date can never split across "21" and "Oct". */
.emp-stat.is-text .num { font-size: clamp(21px, 2.3vw, 30px); line-height: 1.15;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.emp-stat.is-text .num .rng { opacity: .65; font-weight: 500; }
.emp-stat .cap { font-family: var(--font); font-size: 14px; color: var(--ink-on-dark); margin-top: 12px; line-height: 1.45; }
.emp-measured { margin-top: 34px; padding: 22px 24px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.emp-measured strong { color: var(--emp-hot); }
.emp-measured p { font-family: var(--font); font-size: 14.5px; color: var(--ink-on-dark); margin: 0; line-height: 1.6; }
.emp-note { font-family: var(--font); font-size: 12px; color: var(--grey-muted); margin-top: 30px; }
@media (max-width: 820px) { .emp-stats { grid-template-columns: 1fr 1fr; gap: 28px 22px; } }
@media (max-width: 460px) { .emp-stats { grid-template-columns: 1fr; } }

/* --- Measured/tracking list --- */
.emp-track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; margin-top: 8px; }
.emp-track li { display: flex; align-items: center; gap: 11px; font-family: var(--font); font-size: 15.5px; color: var(--charcoal, #111827); }
.emp-track li i { color: var(--emp-blue); font-size: 19px; flex: 0 0 auto; }
@media (max-width: 620px) { .emp-track { grid-template-columns: 1fr; } }

/* --- "Are you ready to be EMPOWERED?" ---
   The one moment on the page that talks to the child rather than the adult,
   so it earns the playful treatment: kit drifting past in the badge colours,
   an oversized headline and a gradient-filled word. Everything above stays
   measured, because parents and schools are who decide. */
.emp-ready { position: relative; overflow: hidden; text-align: center;
  background: var(--emp-dark); color: #fff; padding: clamp(64px, 11vh, 120px) 0; }
.emp-ready .rail { position: relative; z-index: 2; }
.emp-ready h2 { font-size: clamp(30px, 5.6vw, 66px); font-weight: 700;
  text-transform: uppercase; line-height: 1.02; margin: 0; letter-spacing: -.01em; }
.emp-ready-word { background: var(--emp-youth); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.emp-ready p { font-family: var(--font); font-size: clamp(16px, 2vw, 20px);
  color: #dbe9f5; margin: 18px auto 30px; max-width: 40ch; }
.emp-ready-cta { font-size: 16px; padding: 16px 34px; }
/* Floating kit, drawn from the sprite at the top of the page and kept behind
   the copy and out of the accessibility tree. Positions hug the edges so
   nothing drifts across the headline. */
.emp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.emp-floaters { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.emp-float { position: absolute; display: block;
  animation: empDrift 11s ease-in-out infinite alternate; }
.emp-float svg { width: 100%; height: 100%; display: block; }
/* rocking as well as rising — a straight vertical drift reads mechanical on
   objects with an obvious upright, which a bottle or kettlebell has */
@keyframes empDrift {
  from { transform: translate3d(0, 0, 0) rotate(-9deg); }
  to   { transform: translate3d(14px, -30px, 0) rotate(9deg); }
}
.emp-float.f1 { width: 78px; height: 78px; left: 4%; top: 15%;
  animation-duration: 12s; animation-delay: -1s; }
.emp-float.f2 { width: 60px; height: 60px; right: 6%; top: 12%;
  animation-duration: 9s; animation-delay: -4s; }
.emp-float.f3 { width: 66px; height: 66px; left: 11%; bottom: 11%;
  animation-duration: 14s; animation-delay: -7s; }
.emp-float.f4 { width: 84px; height: 84px; right: 8%; bottom: 13%;
  animation-duration: 10.5s; animation-delay: -2.5s; }
.emp-float.f5 { width: 46px; height: 46px; left: 29%; top: 7%;
  animation-duration: 13s; animation-delay: -5s; }
.emp-float.f6 { width: 50px; height: 50px; right: 27%; bottom: 7%;
  animation-duration: 11.5s; animation-delay: -8.5s; }
/* each piece takes a body colour and an accent, both from the EMPOWER set */
.emp-ready .emp-float { opacity: .62; }
.emp-ready .emp-float svg { filter: drop-shadow(0 8px 18px rgba(0,0,0,.28)); }
.emp-ready .f1 { color: var(--emp-hot); --eq-acc: var(--emp-yellow); }
.emp-ready .f2 { color: var(--emp-sky); --eq-acc: var(--emp-navy); }
.emp-ready .f3 { color: var(--emp-yellow); --eq-acc: var(--emp-deep-pink); }
.emp-ready .f4 { color: var(--emp-blue); --eq-acc: var(--emp-light-blue); }
.emp-ready .f5 { color: var(--emp-soft-pink); --eq-acc: var(--emp-deep-blue); }
.emp-ready .f6 { color: var(--emp-light-blue); --eq-acc: var(--emp-pink); }
/* on the bright band the coloured kit would fight the gradient, so it goes
   white with a navy accent instead */
.emp-ready.is-top .emp-float { opacity: .52; color: #fff; --eq-acc: rgba(0,24,72,.4); }
.emp-ready.is-top .emp-float svg { filter: drop-shadow(0 6px 14px rgba(0,24,72,.2)); }
@media (prefers-reduced-motion: reduce) { .emp-float { animation: none; } }
@media (max-width: 1000px) { .emp-float.f5, .emp-float.f6 { display: none; } }
@media (max-width: 700px) {
  .emp-float.f2, .emp-float.f3 { display: none; }
  .emp-float.f1 { width: 54px; height: 54px; left: 2%; top: 8%; }
  .emp-float.f4 { width: 58px; height: 58px; right: 2%; bottom: 8%; }
}

/* The same call to action runs twice on this page, near the top and again
   before the form. Running the top one bright and the lower one dark keeps
   the repetition reading as a deliberate bookend rather than a duplication
   bug — and stops it butting a second dark band against the dark hero. */
.emp-ready.is-top { background: var(--emp-youth); color: var(--emp-navy);
  padding: clamp(48px, 8vh, 84px) 0; }
.emp-ready.is-top .emp-ready-word { background: none; color: #fff;
  -webkit-text-fill-color: #fff; text-shadow: 0 3px 14px rgba(0,24,72,.28); }
.emp-ready.is-top p { color: rgba(0,24,72,.82); }
/* white pill on the bright band — the dark button would sit heavy on it */
.emp-ready.is-top .emp-ready-cta { background: #fff; color: var(--emp-deep-pink);
  border-color: #fff; }
.emp-ready.is-top .emp-ready-cta:hover { background: var(--emp-navy); color: #fff;
  border-color: var(--emp-navy); }

/* Gradient-filled highlight word for headings on light sections. Deliberately
   runs pink to deep blue rather than pink to sky: the sky end of the wing
   gradient measures 2.7:1 on white, which fails AA even at heading sizes. */
.emp-pop { background: linear-gradient(100deg, var(--emp-pink), var(--emp-deep-blue));
  color: var(--emp-pink); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .emp-pop { -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent; }
}

/* --- EMPOWER enquiry form --- */
.emp-form-band { background: var(--cloud); }
.emp-form { background: #fff; border: 1px solid rgba(0,0,0,.05); border-radius: 20px;
  padding: clamp(28px, 4vw, 44px); box-shadow: 0 16px 40px rgba(17,17,17,.06); max-width: 760px; margin: 0 auto; }
.emp-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.emp-form fieldset { border: 0; padding: 0; margin: 0; }
.emp-form legend { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.emp-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.emp-radios label { font-family: var(--font); font-size: 13.5px; border: 1px solid rgba(0,0,0,.18); border-radius: 20px;
  padding: 7px 14px; cursor: pointer; transition: all .14s ease; }
.emp-radios input { position: absolute; opacity: 0; pointer-events: none; }
.emp-radios input:checked + span { }
.emp-radios label:has(input:checked) { background: var(--emp-pink); border-color: var(--emp-pink); color: #fff; }
.emp-form .form-note { font-size: 13px; color: var(--slate); margin-top: 14px; }
@media (max-width: 560px) { .emp-form .form-row { grid-template-columns: 1fr; } }

/* ============================================================
   Mission & vision (About) + the preventative case (Impact)
   ============================================================ */
/* Uppercase in the stylesheet, not the markup: assistive tech reads the
   source text, and some screen readers spell out all-caps words. */
.h-caps { text-transform: uppercase; letter-spacing: -.005em; }
.story.is-caps .story-item h3 { text-transform: uppercase; letter-spacing: .01em; }

.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
.mv-card { position: relative; overflow: hidden; border-radius: 22px; padding: 34px 34px 32px;
  background: #fff; border: 1px solid var(--mist-line); }
/* the two statements are the load-bearing sentences on the page, so they get
   a colour edge and display type rather than sitting in body copy */
.mv-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: var(--teal-deep); }
.mv-card.mv-vision::before { background: var(--teal-accent); }
.mv-label { display: inline-block; font-family: var(--font); font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 14px; }
.mv-vision .mv-label { color: var(--teal-accent); }
.mv-statement { font-family: var(--display); font-weight: 600;
  font-size: clamp(19px, 2.1vw, 25px); line-height: 1.32; color: var(--teal-darkest);
  margin: 0; }
.mv-sub { font-family: var(--font); font-size: 15px; line-height: 1.7; color: var(--slate);
  margin: 16px 0 0; }
/* the two audiences read this page for different reasons and neither should
   feel like the afterthought, so they are stated side by side */
.mv-reads { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.mv-read { border-left: 3px solid var(--mist-line); padding: 2px 0 2px 20px; }
.mv-read h3 { font-family: var(--display); font-size: 17px; font-weight: 700;
  text-transform: uppercase; color: var(--teal-darkest); margin: 0 0 8px; }
.mv-read p { font-family: var(--font); font-size: 15px; line-height: 1.7; color: var(--slate); margin: 0; }
@media (max-width: 820px) { .mv-grid, .mv-reads { grid-template-columns: 1fr; } }

/* --- The preventative case (Impact) --- */
.case-band { position: relative; overflow: hidden; background: var(--black); color: #fff;
  padding: clamp(64px, 10vh, 116px) 0; }
.case-band::before { content: ''; position: absolute; width: 60vw; height: 60vw; right: -18%; top: -28%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(20,164,184,.20), transparent 66%); }
.case-band .wrap { position: relative; z-index: 2; }
/* .intro caps at 680px, which is tight for a lede this long on a dark band */
.case-band .intro { max-width: 880px; }
/* .eyebrow-2 was only ever styled inside five specific containers, so the
   class did nothing in an .intro — scoped here rather than given a base rule,
   which would have shifted spacing on pages already using it */
.intro .eyebrow-2 { display: inline-block; font-family: var(--font); font-size: 12px;
  letter-spacing: 1px; font-weight: 500; color: var(--teal-deep); margin-bottom: 10px; }
.case-band h2 { color: #fff; font-size: clamp(26px, 3.6vw, 44px); font-weight: 700;
  text-transform: uppercase; line-height: 1.05; max-width: 20ch; }
.case-band .intro p { color: var(--ink-on-dark); }
.case-lede { font-family: var(--font); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.7;
  color: var(--ink-on-dark); max-width: 66ch; margin: 18px 0 0; }
.case-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 40px; }
.case-col { border-top: 2px solid rgba(255,255,255,.16); padding-top: 22px; }
.case-col h3 { font-family: var(--display); font-size: 17px; font-weight: 700;
  text-transform: uppercase; color: #fff; margin: 0 0 12px; }
.case-col p { font-family: var(--font); font-size: 15.5px; line-height: 1.68;
  color: var(--ink-on-dark); margin: 0 0 12px; }
.case-col p:last-child { margin-bottom: 0; }
/* the limits of the pilot are stated in the accent colour rather than buried,
   because saying it first is what makes the rest of the page credible */
.case-limit { margin-top: 34px; padding: 24px 26px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.case-limit h3 { font-family: var(--display); font-size: 16px; font-weight: 700;
  text-transform: uppercase; color: var(--teal-on-dark); margin: 0 0 10px; }
.case-limit p { font-family: var(--font); font-size: 15px; line-height: 1.65;
  color: var(--ink-on-dark); margin: 0; }
.case-source { font-family: var(--font); font-size: 12.5px; color: var(--grey-muted);
  margin-top: 26px; }
@media (max-width: 820px) { .case-split { grid-template-columns: 1fr; } }
/* --- Mission & vision, dark variant (homepage) --- */
.mv-dark { background: var(--black); color: #fff; }
.mv-dark .intro h2 { color: #fff; }
.mv-dark .mv-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.mv-dark .mv-statement { color: #fff; }
.mv-dark .mv-label { color: var(--teal-on-dark); }
.mv-dark .mv-vision .mv-label { color: var(--teal-accent); }
.mv-foot { font-family: var(--font); font-size: 15px; color: var(--ink-on-dark); margin: 24px 0 0; }
.mv-foot a { color: var(--teal-accent); border-bottom: 1px solid rgba(20,164,184,.45); }
.mv-foot a:hover { color: #fff; border-bottom-color: #fff; }

/* --- Summit call to action ---
   Planted where the ascent line ends. The eye tracks the climber up the route
   and lands on the summit marker, so that is where the ask goes.

   Position is derived, not guessed. The svg is inset left:-2% at width:104%
   with preserveAspectRatio="none", so viewBox x=1240/1400 maps to
   -2% + 0.885714 * 104% = 90.11% across the hero, and cy=176/800 maps to 22%
   down. Offsetting the right edge by -30px from that puts the summit exactly
   30px inside the pill at any viewport width, so the kettlebell climbs and
   disappears into the button rather than stopping beside it.

   Two coordinates moved to make this work. The route was scaled to 94% on x:
   the summit used to sit at 96%, leaving no room for a button to extend past
   it, so it could only ever sit alongside the end of the line. And the summit
   dropped from y=120 to y=176 — at 15% of a 92svh hero on a 1366x768 laptop
   the pill landed at 66px, underneath the fixed header. 22% clears it on
   every viewport height without breaking the alignment.

   It is a sibling of .ascent, never a child: that div is aria-hidden, and a
   focusable link inside it would be reachable by keyboard while invisible to
   a screen reader. */
.summit-cta { position: absolute; z-index: 3; top: 22%; right: calc(9.886% - 30px);
  transform: translateY(-50%); display: block; text-decoration: none;
  animation: summitCtaIn .6s cubic-bezier(.2,.8,.3,1) 2.4s both; }
.summit-cta-pill { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--black); background: var(--teal-accent);
  border-radius: 999px; padding: 13px 22px; white-space: nowrap;
  transition: transform .18s ease, background-color .18s ease;
  /* the ring pulses on the same 7s cycle as the climb, so it flares at the
     moment the kettlebell tops out and the eye is already there */
  animation: summitPulse 7s ease-in-out 1.6s infinite; }
/* The caption hangs off the pill rather than sitting in flow. The block is
   centred on the summit with translateY(-50%), and that has to centre the
   PILL — if the caption added to the block height the pill would ride up by
   half the caption and the line would miss it. */
.summit-cta-sub { position: absolute; top: calc(100% + 7px); right: 0;
  font-family: var(--font); font-size: 12.5px; letter-spacing: .02em;
  white-space: nowrap; color: var(--ink-on-dark); }
.summit-cta:hover .summit-cta-pill { transform: translateY(-2px); background: #fff; }
.summit-cta:focus-visible { outline: 3px solid var(--teal-accent); outline-offset: 4px;
  border-radius: 8px; }
@keyframes summitCtaIn {
  from { opacity: 0; transform: translateY(calc(-50% + 12px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}
@keyframes summitPulse {
  0%, 62%  { box-shadow: 0 0 0 0 rgba(20,164,184,0); }
  72%      { box-shadow: 0 0 0 10px rgba(20,164,184,.28); }
  86%      { box-shadow: 0 0 0 18px rgba(20,164,184,0); }
  100%     { box-shadow: 0 0 0 0 rgba(20,164,184,0); }
}
@media (prefers-reduced-motion: reduce) {
  .summit-cta { animation: none; opacity: 1; }
  .summit-cta-pill { animation: none; }
}
/* Narrow screens keep it, but stripped back. The hero is bottom-aligned so the
   upper area is empty; a compact pill sits there cleanly as long as it loses
   the caption and stays clear of both the fixed header and the headline. */
/* top stays at 22% at every width — it is tied to the summit's y and moving
   it would break the alignment this whole block exists to hold. Only the
   horizontal inset changes, because the pill is shorter here and 30px would
   push the summit past its flat middle into the rounded cap. */
@media (max-width: 900px) {
  .summit-cta { right: calc(9.886% - 20px); }
  .summit-cta-sub { display: none; }
  .summit-cta-pill { font-size: 13px; padding: 11px 17px; gap: 7px; letter-spacing: .05em; }
}
@media (max-width: 560px) {
  .summit-cta { right: calc(9.886% - 17px); }
  .summit-cta-pill { font-size: 12px; padding: 10px 15px; }
}
/* Under ~380px the hero headline runs long enough to reach the pill, and a
   collision looks worse than an absence. The hero's own buttons still cover
   the same conversion path. */
@media (max-width: 380px) { .summit-cta { display: none; } }
/* ============================================================
   Mobile polish
   ============================================================ */
/* 92vh is measured against the LARGEST viewport on iOS Safari and Android
   Chrome - the one with the toolbar retracted. With the toolbar showing, a
   92vh hero is taller than the screen, so the bottom-aligned hero copy and
   buttons start below the fold on first paint. svh measures the small
   viewport instead, which is the one the visitor actually has. On desktop
   svh and vh are identical, so this is safe everywhere. */
@supports (height: 1svh) { :root { --hero-h: 92svh; } }

/* 150px of top padding exists to clear the fixed header. The header is
   shorter on a phone and the space was reading as dead air above the
   headline. */
@media (max-width: 760px) {
  .cine-hero .rail, .subhero .rail { padding-top: 112px; padding-bottom: 6vh; }
  .page-hero .wrap { padding-top: 112px; padding-bottom: 76px; }
}
@media (max-width: 560px) {
  .section { padding: 48px 0; }
  /* card padding scaled with the viewport - 34px inner padding on a 375px
     screen left barely 250px of usable line length */
  .mv-card { padding: 24px 22px 22px; }
  .mv-read { padding-left: 16px; }
  .case-col { padding-top: 18px; }
  .case-limit { padding: 20px 18px; }
  .emp-outcome { padding: 24px 20px 22px; }
}
/* two curriculum cards across stops working once the column is narrower than
   the longest label - "Breathing & calming down" was wrapping to four lines */
@media (max-width: 400px) {
  .emp-learn { grid-template-columns: 1fr; }
  .emp-learn-card { min-height: 0; }
}
/* ============================================================
   Contact: conversion furniture
   ============================================================ */
/* Answering "what happens if I press send" before the form rather than after
   it. Not knowing is one of the biggest reasons a short form goes unfilled. */
.next-band { background: var(--cloud); padding-top: 48px; padding-bottom: 48px; }
.next-steps { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: none; }
.next-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.ns-num { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; font-family: var(--display);
  font-weight: 700; font-size: 17px; color: #fff;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal-accent));
  box-shadow: 0 10px 22px rgba(6,96,108,.28); }
.next-steps h3 { font-family: var(--display); font-size: 17px; font-weight: 700;
  color: var(--teal-darkest); margin: 8px 0 6px; }
.next-steps p { font-family: var(--font); font-size: 14.5px; line-height: 1.6;
  color: var(--slate); margin: 0; }
@media (max-width: 860px) { .next-steps { grid-template-columns: 1fr; gap: 20px; } }

.form-field .opt { font-weight: 400; font-size: 12px; color: var(--slate);
  text-transform: none; letter-spacing: 0; margin-left: 6px; }
.form-privacy { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0;
  font-family: var(--font); font-size: 12.5px; line-height: 1.55; color: var(--slate); }
.form-privacy i { color: var(--teal-deep); font-size: 15px; flex: 0 0 auto; margin-top: 1px; }

/* the rating leads the sidebar: proof sits next to the ask, not in a section
   of its own further down the page where it does no work */
.contact-rating { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-family: var(--font); font-size: 14px; color: var(--teal-darkest);
  background: #fff; border: 1px solid var(--mist-line); border-radius: 22px;
  padding: 9px 16px; transition: border-color .15s ease; }
.contact-rating:hover { border-color: var(--teal-accent); }
.contact-rating .stars { color: var(--teal-deep); letter-spacing: 2px; font-size: 14px; }
.contact-rating strong { font-weight: 600; }

.contact-alt { margin-top: 28px; padding: 22px 22px 24px; border-radius: 16px;
  background: var(--mist); border: 1px solid var(--mist-line); }
.contact-alt h3 { font-family: var(--display); font-size: 17px; font-weight: 700;
  color: var(--teal-darkest); margin: 0 0 8px; }
.contact-alt p { font-family: var(--font); font-size: 14.5px; line-height: 1.6;
  color: var(--slate); margin: 0 0 16px; }
/* --- Coaching: price snapshot --- */
.price-snap { background: var(--mist); }
.psnap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.psnap { display: flex; flex-direction: column; background: #fff; border-radius: 20px;
  border: 1px solid var(--mist-line); padding: 26px 24px 24px; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.psnap:hover { transform: translateY(-5px); border-color: transparent;
  box-shadow: 0 18px 38px rgba(6,96,108,.16); }
.psnap-name { font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--teal-deep); }
.psnap-price { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 4vw, 46px);
  line-height: 1; color: var(--teal-darkest); margin: 12px 0 14px; }
.psnap-price small { font-family: var(--font); font-size: 15px; font-weight: 500;
  color: var(--slate); margin-left: 4px; }
.psnap-desc { font-family: var(--font); font-size: 14.5px; line-height: 1.6; color: var(--slate); }
.psnap-foot { font-family: var(--font); font-size: 15px; color: var(--slate); margin: 22px 0 0; }
.psnap-foot a { color: var(--teal-deep); border-bottom: 1px solid rgba(6,96,108,.35); }
.psnap-foot a:hover { color: var(--teal-accent); border-bottom-color: var(--teal-accent); }
@media (max-width: 900px) { .psnap-grid { grid-template-columns: 1fr; max-width: 460px; } }
/* --- Personal Training: the three-rung ladder --- */
.rung-band { background: var(--mist); }
.rung-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.rung { position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--mist-line); border-radius: 22px; padding: 30px 28px 28px; }
/* the middle rung is the one most people should take, so it is lifted rather
   than left to compete on equal footing with the two either side */
.rung.is-best { border-color: var(--teal-accent); box-shadow: 0 20px 44px rgba(6,96,108,.16);
  transform: translateY(-8px); }
.rung-flag { position: absolute; top: -13px; left: 28px; font-family: var(--font);
  font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  color: #fff; background: var(--teal-deep); border-radius: 999px; padding: 6px 14px; }
.rung-step { font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: 2px; color: var(--mist-line); }
.rung h3 { font-family: var(--display); font-weight: 700; font-size: 22px;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--teal-darkest); margin: 10px 0 6px; }
.rung-for { font-family: var(--font); font-size: 14px; color: var(--slate); margin: 0 0 18px;
  min-height: 2.8em; }
.rung-price { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 3.6vw, 44px);
  line-height: 1; color: var(--teal-deep); margin: 0 0 20px; }
.rung-price small { font-family: var(--font); font-size: 15px; font-weight: 500;
  color: var(--slate); margin-left: 4px; }
.rung-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.rung-list li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font);
  font-size: 14.5px; line-height: 1.5; color: #2c2f31; }
.rung-list li i { color: var(--teal-deep); font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
/* margin-top:auto pins every button to the bottom edge whatever the list length */
.rung-cta { margin-top: auto; justify-content: center; }
.rung-foot { font-family: var(--font); font-size: 15px; color: var(--slate); margin: 26px 0 0; }
.rung-foot a { color: var(--teal-deep); border-bottom: 1px solid rgba(6,96,108,.35); }
.rung-foot a:hover { color: var(--teal-accent); border-bottom-color: var(--teal-accent); }
@media (max-width: 940px) {
  .rung-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; gap: 26px; }
  .rung.is-best { transform: none; }
}
/* --- Everest Elite: the two arms --- */
.arms-band { background: var(--cloud); }
.arms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.arm { position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--mist-line); border-radius: 24px;
  padding: 34px 32px 32px; transition: transform .2s ease, box-shadow .2s ease; }
/* full-bleed colour edge, teal for sport and the darker brand teal for the
   executive arm, so the two read as siblings rather than tiers */
.arm::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: var(--teal-accent); }
.arm.is-exec::before { background: var(--teal-darkest); }
.arm:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(6,96,108,.16); }
.arm-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 18px; font-size: 28px; color: #fff;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal-accent));
  box-shadow: 0 12px 26px rgba(6,96,108,.28); }
.arm.is-exec .arm-icon { background: linear-gradient(135deg, var(--teal-darkest), var(--teal-deep)); }
.arm-kicker { display: block; font-family: var(--font); font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--teal-deep); margin: 20px 0 2px; }
.arm h3 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.4vw, 42px);
  text-transform: uppercase; letter-spacing: -.02em; line-height: 1; color: var(--teal-darkest);
  margin: 0 0 12px; }
.arm-lede { font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--slate);
  margin: 0 0 22px; min-height: 3.2em; }
.arm-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 11px; }
.arm-list li { display: flex; align-items: flex-start; gap: 11px; font-family: var(--font);
  font-size: 15px; line-height: 1.5; color: #2c2f31; }
.arm-list li i { color: var(--teal-deep); font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
.arm-cta { margin-top: auto; justify-content: center; }
/* the Executive / Organisations distinction, stated rather than left to a
   sales call to untangle */
.arms-foot { display: flex; align-items: flex-start; gap: 10px; margin: 26px 0 0;
  font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--slate); }
.arms-foot i { color: var(--teal-deep); font-size: 19px; flex: 0 0 auto; margin-top: 1px; }
.arms-foot strong { color: var(--teal-darkest); font-weight: 600; }
.arms-foot a { color: var(--teal-deep); border-bottom: 1px solid rgba(6,96,108,.35); }
.arms-foot a:hover { color: var(--teal-accent); border-bottom-color: var(--teal-accent); }
@media (max-width: 900px) {
  .arms-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .arm { padding: 28px 24px 26px; }
  .arm-lede { min-height: 0; }
}
/* --- Catalogue grouped by business unit --- */
.cat-unit { margin-bottom: 56px; }
.cat-unit:last-child { margin-bottom: 0; }
.unit-head { border-top: 2px solid var(--teal-deep); padding-top: 18px; margin-bottom: 26px; }
.unit-head h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px);
  text-transform: uppercase; letter-spacing: -.01em; color: var(--teal-darkest); margin: 0; }
.unit-head p { font-family: var(--font); font-size: 15px; color: var(--slate); margin: 8px 0 0; }
.unit-head a { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-deep);
  border-bottom: 1px solid rgba(6,96,108,.35); margin-left: 4px; white-space: nowrap; }
.unit-head a:hover { color: var(--teal-accent); border-bottom-color: var(--teal-accent); }
.unit-head a i { font-size: 15px; }
/* charge-type headings sit a level down inside a unit, so they step back */
.cat-unit .cat-head h4 { font-family: var(--display); font-weight: 700; font-size: 16px;
  text-transform: uppercase; letter-spacing: 1px; color: var(--teal-deep); margin: 0; }
.cat-unit .cat-head p { font-size: 14px; }
/* --- Ambassador partnerships (About) --- */
.amb-band { background: var(--cloud); }
.amb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.amb-card { background: #fff; border: 1px solid var(--mist-line); border-radius: 20px;
  padding: 28px 26px 26px; transition: transform .2s ease, box-shadow .2s ease; }
.amb-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(6,96,108,.14); }
.amb-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px; font-size: 25px; color: #fff;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal-accent));
  box-shadow: 0 10px 22px rgba(6,96,108,.26); }
.amb-card h3 { font-family: var(--display); font-weight: 700; font-size: 22px;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--teal-darkest); margin: 18px 0 4px; }
.amb-what { font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--teal-deep); margin: 0 0 12px; }
.amb-card p { font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--slate); margin: 0; }
/* the code is the reason anyone reads this block, so it gets its own plate */
.amb-code { margin-top: 18px !important; padding: 12px 16px; border-radius: 12px;
  background: var(--mist); border: 1px dashed var(--mist-line);
  font-size: 14.5px !important; color: var(--teal-darkest) !important; }
.amb-code strong { font-family: var(--display); font-weight: 700; letter-spacing: 1px;
  color: var(--teal-deep); }
.amb-note { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0 0;
  font-family: var(--font); font-size: 13.5px; line-height: 1.6; color: var(--slate); }
.amb-note i { color: var(--teal-deep); font-size: 17px; flex: 0 0 auto; margin-top: 1px; }
@media (max-width: 760px) { .amb-grid { grid-template-columns: 1fr; } }
/* --- Blog: infographic-friendly image handling ---
   Posters and diagrams crop from the top rather than the centre, so the card
   thumbnail shows the branded header and title instead of a meaningless band
   of body text sliced out of the middle. */
.fcard .fpic.is-poster { background-position: top center; background-color: #fff; }
/* the featured image, shown full and readable in the article body */
.post-figure { margin: 0 0 34px; }
.post-figure img { display: block; width: 100%; height: auto; border-radius: 16px;
  border: 1px solid var(--mist-line); box-shadow: 0 18px 44px rgba(17,17,17,.10); }
/* ============================================================
   Hero glow, everywhere
   ============================================================ */
/* The homepage hero got a teal wash when its photograph came out. Every other
   hero was left flat black, so moving between pages felt like moving between
   two sites. Same treatment now, with the wash entering from the left where
   the ascent line starts, so it lifts the beginning of the climb. */
.subhero .cine-bg, .post-hero .post-hero-bg:not([style]) {
  background-image:
    radial-gradient(80% 70% at 8% 22%, rgba(6,96,108,.42), transparent 68%),
    linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(0,0,0,.55) 100%);
  background-color: #0a0a0a; }
/* EMPOWER keeps its own pink and blue wings; overriding it here would flatten
   the one page that is deliberately a different colour. */
.empower-scope .emp-hero .wing-glow { }

/* ============================================================
   Organisations: a more corporate register
   ============================================================
   Same typefaces, same palette, same components. What changes is the setting:
   tighter tracking, a slightly smaller heading scale, more line-height and a
   hairline rule under each section opener. Institutional buyers read pages
   like documents, and a document is set tighter and calmer than a landing
   page. It stays recognisably the same brand because nothing but the metrics
   move. */
.org-scope .intro h2,
.org-scope .split-body h2,
.org-scope .assurance h2,
.org-scope .faq-aside h2 {
  font-size: clamp(24px, 2.9vw, 36px);
  letter-spacing: -0.015em;
  line-height: 1.12;
}
.org-scope .intro { max-width: 720px; }
.org-scope .intro h2 { position: relative; padding-bottom: 16px; }
/* the hairline is the whole trick: it reads as a document rule, not decoration */
.org-scope .intro h2::after { content: ''; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 2px; background: var(--teal-deep); }
.org-scope .eyebrow-2 { font-size: 12px; letter-spacing: 2.4px; font-weight: 600;
  color: var(--teal-deep); }
.org-scope p { line-height: 1.78; }
.org-scope .split-body p, .org-scope .intro p { max-width: 62ch; }
.org-scope .check-list li { font-size: 15.5px; line-height: 1.6; }
.org-scope .subhero h1, .org-scope .subhero .subhero-title { letter-spacing: -0.025em; }
.org-scope .subhero .sub { color: #dfe6e8; }
/* numbers are the argument on this page, so they are set with more authority */
.org-scope .stat-band .num, .org-scope .assurance .num {
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
/* ============================================================
   Mobile: overflow, hero collision, and card stacking
   ============================================================ */

/* The header sized itself with width: calc(100% - 48px) while position:fixed.
   For a fixed element that 100% is the initial containing block, which grows
   when the document overflows horizontally - so the header widened the page,
   which widened the header, and so on. On a 375px phone it settled at 403px
   and left the whole site scrolling sideways.

   100vw is the viewport and cannot be dragged wider by content, so the cap
   holds. On desktop it also includes the scrollbar, which is why the 48px
   gutter is subtracted from it rather than from 100%. */
/* Position as well as width has to come from the viewport. margin: 0 auto
   centres inside the initial containing block, and that block stays inflated
   once anything has overflowed - which left the header at a 47px gutter on
   one side and 1px on the other. Deriving left from 100vw pins it regardless:
   it collapses to the 24px gutter on a phone and to a true centre once the
   viewport is wider than the 1092px cap. */
.site-header {
  width: min(1092px, calc(100vw - 48px));
  max-width: none;
  left: max(24px, calc((100vw - 1092px) / 2));
  right: auto;
  margin: 0;
}

/* Belt and braces for the same class of bug elsewhere. overflow-x: clip is
   deliberate rather than hidden: hidden creates a scroll container and would
   break the sticky story cards on About, clip does not. */
html, body { overflow-x: clip; }

/* The trail is created behind a (hover: hover) and (pointer: fine) check in
   layout.js, but that is evaluated once at load and a device can report
   otherwise later. Hiding it on coarse pointers costs nothing and closes the
   gap; it is decorative and there is no cursor to trail on a phone. */
@media (pointer: coarse) { .cursor-trail { display: none; } }

/* The summit marker sits at 90% across and 22% down. On a phone that is
   exactly where the eyebrow and headline are, so the pill landed on top of
   "HUMAN PERFORMANCE & CAPABILITY". The hero already carries two buttons at
   this width, so the flourish goes rather than the copy. */
@media (max-width: 700px) { .summit-cta { display: none; } }

/* Card stacking on mobile. It was switched off under 720px; the effect is
   the best thing on that page and it works on a phone provided the offsets
   are tightened - the mobile header is shorter, and five cards each stepping
   18px would consume most of a small screen. 10px steps from 78px instead. */
@media (max-width: 720px) {
  .story-item { position: sticky; box-shadow: 0 -10px 34px rgba(17,17,17,.14); }
  .story-item:nth-child(1) { top: 78px; }
  .story-item:nth-child(2) { top: 88px; }
  .story-item:nth-child(3) { top: 98px; }
  .story-item:nth-child(4) { top: 108px; }
  .story-item:nth-child(5) { top: 118px; }
}
/* Reduced motion still gets the flat, non-pinned version. */
@media (prefers-reduced-motion: reduce) {
  .story-item { position: static; box-shadow: 0 12px 30px rgba(17,17,17,.06); }
}
/* ============================================================
   Touch target sizes
   ============================================================
   Audited across all 13 pages at 375px. Layout came back clean everywhere -
   no sideways scroll, nothing overflowing unclipped, header gutters even.
   What did come back was tap targets: the footer links measured 21 to 22px
   tall and the menu button 30px.

   WCAG 2.2 sets 24x24 CSS pixels as the minimum at AA. The platform
   guidelines ask for more like 44px on anything you tap often. The footer is
   on every page and the menu button is the entire navigation on a phone, so
   both are worth the space. */

/* The menu button is the whole nav on mobile and was the smallest control on
   the page. Sized to 44px, which is the iOS and Android guideline, with the
   icon still visually 24px. */
.nav-toggle { width: 44px; height: 44px; display: none; align-items: center;
  justify-content: center; padding: 0; }
@media (max-width: 920px) { .nav-toggle { display: inline-flex; } }

@media (max-width: 920px) {
  /* Padding rather than a taller line-height, so the text keeps its rhythm
     and only the hit area grows. The column gap drops to compensate, leaving
     the visual spacing close to where it was. */
  .footer-col { gap: 2px; }
  .footer-col a { padding: 9px 0; }
  .footer-legal { gap: 8px; row-gap: 0; flex-wrap: wrap; }
  .footer-legal a { padding: 10px 10px 10px 0; }
  /* the inline "go" links on the division panels, 31px before */
  .division .go { padding: 7px 0; }
}
/* The breadcrumb links were the last targets under the 24px minimum, at 21px.
   Padding only, and vertical only, so the crumb trail keeps its position and
   the separators stay put. */
@media (max-width: 920px) { .crumbs a { padding: 4px 0; } }
/* The Organisations panels swap to simplified square variants on mobile. The
   desktop art is 1600 wide and renders at 327 on a phone - a scale of 0.20
   that turned its 25px labels into 5px. The mobile files are drawn on an 800
   canvas so the scale is 0.41, carry less (weekdays only, no sub-labels) and
   set everything larger. Nothing in them renders below 11px.

   The tile goes square to match, which is what gives the pathway the height
   to stack vertically. Breakpoint matches the <source> media in the markup;
   change one and change the other. */
@media (max-width: 820px) { .org-scope .split-media { aspect-ratio: 1/1; } }

/* ===== Homepage mission/vision, short form =====
   One line of vision and one sentence of mission. The two-card version still
   lives on /about/, which is why the .mv-card rules above stay. */
.mv-short { padding: clamp(56px, 9vh, 88px) 0; }
.mv-short .wrap { max-width: 920px; position: relative; z-index: 1; }
.mv-short .eyebrow { margin-bottom: 18px; }
.mv-short-line { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.22; letter-spacing: -.01em; color: #fff; margin: 0; }
.mv-short-sub { font-family: var(--font); font-size: 16px; line-height: 1.7; color: var(--ink-on-dark);
  margin: 18px 0 0; max-width: 62ch; }
.mv-short-sub a { color: var(--teal-accent); border-bottom: 1px solid rgba(20,164,184,.45); white-space: nowrap; }
.mv-short-sub a:hover { color: #fff; border-bottom-color: #fff; }

/* ===== What's happening at Everest (homepage community wall) =====
   Cards are rendered from data/whats-happening.json by js/whats-happening.js.
   The grid's count class picks the layout, so adding an item never needs a
   CSS change: n1 is one wide card, n2 puts the featured card beside its
   partner, n3 (three or more) lets the featured card span two rows with the
   rest stacked beside it and flowing below.
   Text colours were checked against their backgrounds at 4.5:1 or better,
   which is why the status tag sets black on teal rather than the darkest teal
   the buttons use. */
.wh { background: #fff; padding: clamp(72px, 11vh, 120px) 0; }
.wh-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 16px 48px; margin-bottom: clamp(28px, 4vh, 44px); }
.wh-head h2 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; line-height: 1.05;
  color: var(--black); margin: 0; max-width: 18ch; }
.wh-head p { font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--slate);
  max-width: 40ch; margin: 0; }

.wh-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 861px) {
  .wh-grid--n2, .wh-grid--n3 { grid-template-columns: 1.35fr 1fr; }
  .wh-grid--n3 .wh-card.is-featured { grid-row: span 2; }
}

.wh-card { position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px; background: var(--black); color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease, border-color .35s ease; }
.wh-card[hidden] { display: none; }
/* the brand edge: teal for Everest, the EMPOWER wing for EMPOWER */
.wh-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 2;
  background: var(--teal-accent); }
.wh-theme-empower::before { background: var(--emp-wing); }
@media (hover: hover) {
  .wh-card:hover { transform: translateY(-4px); border-color: rgba(20,164,184,.45);
    box-shadow: 0 24px 48px -20px rgba(6,96,108,.5); }
}

.wh-body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1;
  padding: clamp(24px, 3vw, 38px); }

/* featured image: the badge sits on a soft teal glow */
.wh-visual { position: relative; display: grid; place-items: center;
  padding: clamp(28px, 3vw, 38px) clamp(24px, 3vw, 38px) 0; }
.wh-visual::before { content: ''; position: absolute; top: 50%; left: 50%; width: 78%; aspect-ratio: 1;
  transform: translate(-50%, -42%); border-radius: 50%;
  background: radial-gradient(circle, rgba(20,164,184,.34), rgba(20,164,184,0) 68%); }
.wh-visual img { position: relative; display: block; width: clamp(140px, 40vw, 200px); height: auto;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.45)); }
@media (min-width: 1100px) {
  .wh-card.is-featured:has(.wh-visual) { display: grid; grid-template-columns: 1fr minmax(200px, 36%); }
  .wh-card.is-featured .wh-visual { order: 2; align-self: center; padding: 38px 38px 38px 0; }
  .wh-card.is-featured .wh-visual img { width: 100%; max-width: 240px; }
}

/* performance: a stepped ascent drawn in when the wall comes into view */
.wh-ascent { display: block; width: min(220px, 60%); height: auto; overflow: visible;
  margin: clamp(26px, 3vw, 36px) 0 0 clamp(24px, 3vw, 38px); }
.wh-ascent-line { fill: none; stroke: var(--teal-accent); stroke-width: 2.5; stroke-linejoin: round;
  stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s cubic-bezier(.3,.7,.2,1) .3s; }
.wh-wall.reveal:not(.is-visible) .wh-ascent-line { stroke-dashoffset: 1; }
.wh-ascent-summit { fill: var(--teal-accent); }

.wh-flag { align-self: flex-start; font-family: var(--font); font-size: 12px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--teal-accent);
  border: 1px solid rgba(20,164,184,.55); padding: 5px 12px; border-radius: var(--radius-pill); margin: 0 0 16px; }
.wh-theme-empower .wh-flag { color: var(--emp-hot); border-color: rgba(255,61,130,.55); }
.wh-cat { font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--teal-on-dark); margin: 0 0 10px; }
.wh-title { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.08; letter-spacing: -.005em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.wh-card.is-featured .wh-title { font-size: clamp(28px, 3vw, 42px); }

.wh-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; }
.wh-tags li { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font);
  font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill); }
.wh-status { background: var(--teal-accent); color: var(--black); }
.wh-status.is-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; animation: whPulse 1.8s ease-in-out infinite; }
.wh-status.is-done { background: rgba(255,255,255,.14); color: #fff; }
.wh-date { color: #fff; border: 1px solid rgba(255,255,255,.28); }
@keyframes whPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.wh-desc { font-family: var(--font); font-size: 15px; line-height: 1.65; color: var(--ink-on-dark);
  margin: 0 0 22px; max-width: 58ch; }
.wh-meta { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 0 0 26px; padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,.12); }
.wh-meta dt { font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--grey-muted); margin: 0 0 4px; }
.wh-meta dd { font-family: var(--font); font-size: 14px; line-height: 1.4; color: #fff; margin: 0; }

.wh-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-size: 15px; font-weight: 600; text-decoration: none;
  color: var(--black); background: var(--teal-accent); padding: 13px 22px; border-radius: var(--radius-pill);
  transition: background-color .2s ease, color .2s ease; }
.wh-cta i { transition: transform .2s ease; }
.wh-cta:hover { background: #fff; color: var(--black); }
.wh-cta:hover i { transform: translateX(3px); }
.wh-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* upcoming: for initiatives still in development. Light, dashed and outlined
   so it reads as future work rather than something already running. */
.wh-theme-upcoming { background: var(--cloud); color: var(--black); border: 1.5px dashed var(--mist-line); }
.wh-theme-upcoming::before { display: none; }
.wh-theme-upcoming .wh-flag, .wh-theme-upcoming .wh-cat { color: var(--teal-deep); }
.wh-theme-upcoming .wh-flag { border-color: rgba(6,96,108,.5); }
.wh-theme-upcoming .wh-title { color: var(--black); }
.wh-theme-upcoming .wh-status { background: transparent; color: var(--teal-deep); border: 1px solid var(--teal-deep); }
.wh-theme-upcoming .wh-date { color: var(--slate); border-color: rgba(17,17,17,.22); }
.wh-theme-upcoming .wh-desc { color: var(--slate); }
.wh-theme-upcoming .wh-meta { border-top-color: rgba(17,17,17,.1); }
.wh-theme-upcoming .wh-meta dt { color: var(--slate); }
.wh-theme-upcoming .wh-meta dd { color: var(--black); }
.wh-theme-upcoming .wh-cta { background: transparent; color: var(--teal-deep); border: 1px solid var(--teal-deep); }
.wh-theme-upcoming .wh-cta:hover { background: var(--teal-deep); color: #fff; }
.wh-theme-upcoming .wh-cta:focus-visible { outline-color: var(--teal-deep); }

@media (max-width: 860px) {
  .wh-head { align-items: flex-start; }
  .wh-meta { gap: 12px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .wh-card, .wh-cta, .wh-cta i, .wh-ascent-line { transition: none; }
  .wh-card:hover { transform: none; }
  .wh-cta:hover i { transform: none; }
  .wh-status.is-live::before { animation: none; }
}

/* Phones. The wall is two tall cards here, so trim what doesn't carry meaning
   (a smaller badge and ascent, tighter padding) and let the CTA take the full
   card width. The CTA labels are long enough to wrap at 375px; a full-width
   button that wraps reads as intentional, where a two-line pill does not. */
@media (max-width: 560px) {
  .wh-body { padding: 22px 20px 24px; }
  .wh-visual { padding: 22px 20px 0; place-items: start; }
  .wh-visual::before { left: 76px; width: 170px; }
  .wh-visual img { width: 112px; }
  .wh-ascent { width: 150px; margin: 22px 0 0 20px; }
  .wh-title, .wh-card.is-featured .wh-title { font-size: 26px; margin-bottom: 14px; }
  .wh-tags { margin-bottom: 16px; }
  .wh-desc { margin-bottom: 18px; }
  .wh-meta { margin-bottom: 20px; padding-top: 14px; }
  .wh-cta { align-self: stretch; justify-content: center; text-align: center; line-height: 1.3;
    border-radius: 16px; }
}

/* ===== Programme finder: email me my match =====
   Sits under the result card, inside the same dark panel, and only appears
   once a result exists. Deliberately not a gate: the recommendation and the
   price are both already on screen before this is asked for. */
.result-capture { margin-top: 18px; padding: 20px clamp(18px, 3vw, 26px);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; }
.result-capture[hidden] { display: none; }
.rc-lead { font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--ink-on-dark);
  margin: 0 0 14px; max-width: 60ch; }
.rc-lead strong { color: #fff; }
.rc-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.rc-fields .form-field { margin: 0; }
.rc-fields label { display: block; font-family: var(--font); font-size: 12px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase; color: var(--teal-on-dark); margin-bottom: 6px; }
.rc-fields input { width: 100%; font-family: var(--font); font-size: 15px; color: #fff;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
  padding: 12px 14px; }
.rc-fields input:focus-visible { outline: 2px solid var(--teal-accent); outline-offset: 2px; }
.rc-fields .btn { white-space: nowrap; }
.rc-note { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font); font-size: 13px;
  line-height: 1.5; color: var(--grey-muted); margin: 14px 0 0; max-width: 62ch; }
.rc-status { font-family: var(--font); font-size: 14px; color: var(--teal-on-dark); margin: 10px 0 0; }
.rc-done { display: flex; align-items: center; gap: 10px; font-family: var(--font); font-size: 15px;
  color: #fff; margin: 0; }
.rc-done i { color: var(--teal-accent); }
@media (max-width: 720px) {
  .rc-fields { grid-template-columns: 1fr; }
  .rc-fields .btn { width: 100%; justify-content: center; }
}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   anything explicitly hidden, and out of the accessibility tree entirely via
   aria-hidden and tabindex="-1" on the field itself, so nobody using a screen
   reader or a keyboard ever meets it. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The status line under a form - the one place a visitor is told what
   happened after they pressed the button. Hidden until it has something to
   say, so it never leaves a gap. */
.form-status { margin-top: 14px; font-size: 14px; }
.form-status:empty { display: none; }

/* The ascent route on a phone.
   Its canvas is 1400 units wide, so on a 390px phone it was being squashed to
   0.28 of its size: a stroke drawn 2 units wide came out at about half a pixel
   and 26% opacity, which is to say invisible, and the camp markers were squashed
   into thin slivers. Below 700px js/layout.js now redraws the route in real
   pixels (a viewBox that matches the screen), so these widths are the widths
   you see. If the script does not run, these values still apply to the stretched
   canvas and the line is no worse than it was. */
@media (max-width: 700px) {
  .ascent .trail { stroke-width: 3; opacity: .5; }
  .ascent .trail-climb { stroke-width: 4; filter: drop-shadow(0 0 5px rgba(20,164,184,.75)); }
  .ascent .node { filter: drop-shadow(0 0 4px rgba(20,164,184,.8)); }
  .ascent .summit { filter: drop-shadow(0 0 7px rgba(20,164,184,.9)); }
}

/* A "price" that is a statement rather than a number: the coaching rung is built around the
   client, so it does not carry a figure. Smaller than the numeric prices beside it. */
.rung-price.is-text { font-size: clamp(22px, 2.3vw, 28px); line-height: 1.15; padding: 8px 0 6px; }

/* The founder's own Instagram, kept quiet: a text link, not an icon row. */
.founder-social { margin: 16px 0 0; font-family: var(--font); font-size: 14px; }
.founder-social a { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-deep); font-weight: 600; }
.founder-social a:hover { color: var(--black); }

/* The line that stands in for a price wherever a price is not published. */
.price-note { font-family: var(--font); font-size: 14px; color: var(--slate); margin: 0 0 18px; }

/* A one-off charge that sits beside a weekly price, for example App Portal Access. */
.pprice .pnote, .rp-note, .rung-note { display: block; font-family: var(--font); font-size: 12px; font-weight: 500;
  line-height: 1.4; letter-spacing: 0; margin-top: 4px; color: var(--slate); }
.rung-note { font-size: 13px; margin: -6px 0 14px; }