/* ════════════════════════════════════════════════════════════
   JTCC HIGH PERFORMANCE — WordPress scoped CSS
   Source: Claude Design handoff (styles.css) mapped to hp-* class names.
   All selectors scoped to .high-performance-page.
════════════════════════════════════════════════════════════ */

/* ── WordPress theme conflict overrides ─────────────────── */
body.page-template-template-high-performance-v2 div#page {
  padding-top: 0 !important;
  transition: padding-top 0s !important;
}
/* Footer's "Get In Touch" block (`section.home-contact-section`) has a base
   `margin-top: 234px` intended for the homepage overlap — a prior section
   visually fills that gap. The parent theme already resets it to `margin-top: 0`
   at ≤1023px (style.css:10574), so at the 1024px boundary a 234px white gap
   appeared between the v2 contact section and the footer. Match the parent
   theme's per-template override pattern (cf. `.page-template-template-contact`)
   to neutralize the homepage-only margin on this template at every width. */
body.page-template-template-high-performance-v2 section.home-contact-section {
  margin-top: 0;
}
.high-performance-page blockquote {
  margin: 0; padding: 0; background: none; position: static;
  color: inherit; border: none;
}
.high-performance-page blockquote::before { display: none; }
.high-performance-page a { color: inherit; text-decoration: none; }
.high-performance-page p { margin-bottom: 0; }
/* Theme has `ul, ol { margin: 0 0 1.5em 3em }` and `ul { list-style: disc }`.
   Reset to bare lists, but WITHOUT `!important` on margin/padding so individual
   components (e.g. `.hp-alumni-stats { margin-top: 18px }`) can space themselves.
   `list-style` and `counter-reset` keep `!important` to defend against any stray
   `<ol>` content from WYSIWYG that would otherwise pull in the theme's counter-circle styling. */
.high-performance-page ul,
.high-performance-page ol { margin: 0; padding: 0; list-style: none !important; counter-reset: none !important; }
.high-performance-page li { counter-increment: none !important; padding-left: 0; min-height: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.high-performance-page li::before { content: none !important; }
.high-performance-page figure { margin: 0; padding: 0; }
.high-performance-page dl { margin: 0; padding: 0; }
.high-performance-page dt,
.high-performance-page dd { margin: 0; padding: 0; font-weight: inherit; }
/* Theme's `sup { top: -0.5em }` would shift stat superscripts upward; neutralize at the
   element level and let stat-specific rules style sup as needed. */
.high-performance-page .hp-hstat-n sup,
.high-performance-page .hp-n-stat-n sup { position: static; top: auto; }

/* ── Design tokens ──────────────────────────────────────── */
.high-performance-page {
  --hp-text:        #1C1C1C;
  --hp-text-soft:   #707070;
  --hp-bg:          #FFFFFF;
  --hp-bg-soft:     #F8F8F8;
  --hp-bg-grey:     #F0F0F0;
  --hp-bg-cream:    #F4F1EA;
  --hp-border:      #DEDEDE;
  --hp-border-soft: #ECECEC;
  --hp-green:       #6AA308;
  --hp-green-lt:    #97CA3E;
  --hp-green-pale:  #D0E5AA;
  --hp-green-mist:  #F8FFED;
  --hp-blue:        #1B4EA0;
  --hp-blue-dk:     #0B2550;
  --hp-red:         #C71616;
  --hp-overlay:     rgba(11, 37, 80, 0.62);
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  font-weight: 400;
  color: var(--hp-text);
  background: var(--hp-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.high-performance-page img { display: block; max-width: 100%; }
.high-performance-page button { font: inherit; cursor: pointer; }

.high-performance-page svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ════════════════════════════════════════════════════════════
   PRIMITIVES
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-wrap {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
}

/* Eyebrow */
.high-performance-page .hp-ey {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--hp-green);
}
.high-performance-page .hp-ey::before {
  content: ""; display: inline-block;
  width: 28px; height: 1px; background: var(--hp-green);
  flex-shrink: 0;
}
.high-performance-page .hp-ey-light { color: var(--hp-green-lt); }
.high-performance-page .hp-ey-light::before { background: var(--hp-green-lt); }

/* Headings */
.high-performance-page .hp-h-display {
  font-size: clamp(56px, 7.5vw, 116px);
  font-weight: 600; line-height: 0.96;
  letter-spacing: -0.025em; color: #fff; margin: 0;
}
.high-performance-page .hp-h-display em {
  font-style: italic; color: var(--hp-green-lt); font-weight: 500;
}
.high-performance-page .hp-h-section {
  font-size: clamp(40px, 4.2vw + 4px, 76px);
  font-weight: 600; line-height: 0.98;
  letter-spacing: -0.02em; color: var(--hp-text); margin: 0;
}
.high-performance-page .hp-h-section em {
  font-style: italic; color: var(--hp-green); font-weight: 500;
}
.high-performance-page .hp-h-section-dark { color: #fff; }
.high-performance-page .hp-h-section-dark em { color: var(--hp-green-lt); }
.high-performance-page .hp-h-card {
  font-size: 24px; font-weight: 600;
  line-height: 1.15; letter-spacing: -0.005em;
  color: var(--hp-text); margin: 0;
}
.high-performance-page .hp-intro {
  font-size: 19px; font-weight: 400;
  color: var(--hp-text-soft); line-height: 1.7; max-width: 56ch;
}
.high-performance-page .hp-intro strong { color: var(--hp-text); font-weight: 600; }
.high-performance-page .hp-intro-dark { color: rgba(255,255,255,.82); }
.high-performance-page .hp-intro-dark strong { color: #fff; }

/* Buttons */
.high-performance-page .hp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 16px 28px;
  font-size: 16px; font-weight: 600;
  border: 2px solid transparent; border-radius: 0;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
}
.high-performance-page .hp-btn svg {
  width: 16px; height: 16px; flex-shrink: 0;
  transition: transform .18s ease;
}
.high-performance-page .hp-btn:hover svg { transform: translateX(3px); }
.high-performance-page .hp-btn-green {
  background: var(--hp-green); color: #fff; border-color: var(--hp-green);
}
.high-performance-page .hp-btn-green:hover {
  background: var(--hp-green-lt); border-color: var(--hp-green-lt); color: var(--hp-text);
}
.high-performance-page .hp-btn-ghost-light {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.55);
}
.high-performance-page .hp-btn-ghost-light:hover {
  background: #fff; color: var(--hp-text); border-color: #fff;
}
.high-performance-page .hp-btn-text {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600;
  color: var(--hp-blue-dk);
  padding: 4px 0; border-bottom: 1px solid currentColor;
  letter-spacing: .04em; text-transform: uppercase;
  transition: color .15s ease, gap .15s ease;
}
.high-performance-page .hp-btn-text:hover { color: var(--hp-green); gap: 14px; }
.high-performance-page .hp-btn-text svg { width: 14px; height: 14px; }

/* Section rule */
.high-performance-page .hp-section-rule {
  position: relative; text-align: center; margin-bottom: 56px;
}
.high-performance-page .hp-section-rule::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px; background: var(--hp-green-lt);
}
.high-performance-page .hp-section-rule-label {
  position: relative; display: inline-block;
  background: var(--hp-bg);
  border: 1px solid var(--hp-green-lt);
  font-size: 14px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 9px 24px; color: var(--hp-text);
}
.high-performance-page .hp-section-rule-cream .hp-section-rule-label {
  background: var(--hp-bg-cream);
}

/* Section header */
.high-performance-page .hp-sec-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 56px; margin-bottom: 64px;
}
.high-performance-page .hp-sec-header > div:first-child { max-width: 720px; }

/* Scroll-reveal */
.high-performance-page .hp-fade-up {
  opacity: 0; transform: translateY(8px);
  transition: opacity .55s ease, transform .55s ease;
}
.high-performance-page .hp-fade-up.in-view { opacity: 1; transform: translateY(0); }
@media (max-width: 768px) {
  .high-performance-page .hp-fade-up { opacity: 1 !important; transform: none !important; }
}

/* ════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: flex-end;
  background: var(--hp-blue-dk);
  overflow: hidden;
  padding: 0;
}
.high-performance-page .hp-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.high-performance-page .hp-hero-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
/* ── Video variant — background media ─────────────────────────
   Two rendering paths share `.hp-hero-media`: a native <video> (preferred,
   when an MP4 is uploaded) or an <iframe>-wrapping div (Vimeo fallback).
   Both fill the hero edge-to-edge with cover behavior and pick up the same
   subtle Ken Burns drift.

   Poster handling — the design goal is "the image should ONLY show if the
   video can't play." Instead of using <video poster="..."> (which flashes
   the image instantly while the video buffers), we render the same image
   as a SIBLING `.hp-hero-poster` underneath, and start the video at
   `opacity: 0`. JS adds `.is-playing` on the actual `playing` event for
   the native <video>; the Vimeo iframe uses a CSS animation delay since
   we can't observe iframe playback without loading Vimeo's player API.
   Result: dark navy void during buffer (the `.hp-hero` itself has a navy
   bg), then clean fade-in to video. If autoplay is blocked (iOS Low Power
   Mode, errors, etc.) the video never reaches `opacity: 1` and the poster
   stays visible — graceful fallback, never a broken hero. */
.high-performance-page .hp-hero-video,
.high-performance-page .hp-hero-video-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  transform: scale(1.06);
  transform-origin: 60% 40%;
  overflow: hidden;
}
.high-performance-page .hp-hero-video { object-fit: cover; }
/* Progressive enhancement: the opacity:0 starting state only applies when
   JS is present (the wp_head priority-1 inline script adds `.hp-js` to
   <html> before render). Without JS, video and poster both default to
   opacity:1 — the browser handles autoplay, video covers the poster as
   soon as frames render, hero is never blank. */
.hp-js .high-performance-page .hp-hero-video,
.hp-js .high-performance-page .hp-hero-video-frame,
.hp-js .high-performance-page .hp-hero-poster {
  opacity: 0;
  transition: opacity .6s ease-out;
}
.hp-js .high-performance-page .hp-hero-video.is-playing,
.hp-js .high-performance-page .hp-hero-poster.is-fallback {
  opacity: 1;
}
.high-performance-page .hp-hero-video-frame iframe {
  position: absolute;
  top: 50%; left: 50%;
  /* Trick for `background=1` Vimeo iframes: size to 16:9 then scale up so the
     player always fully covers the hero on portrait viewports too (mirrors
     what `object-fit: cover` does for the native video). */
  width: 177.78vh;          /* 16/9 of viewport height */
  height: 56.25vw;          /* 9/16 of viewport width */
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;     /* the iframe is decorative — no clicks */
}
/* Poster layout — sits behind the video in the z-index stack so the video
   fades in over it. Without JS, both render at default opacity:1 (browser
   handles autoplay, video covers poster when ready). With JS (`.hp-js`
   present on <html>), the rule block above takes effect: both start at
   opacity 0, JS fades whichever one wins (`playing` event → video,
   `error` / autoplay-rejection / 5s timeout → poster). */
.high-performance-page .hp-hero-poster { z-index: 0; }
/* Vimeo iframe — CSS animation handles the fade-in (we can't observe iframe
   playback state without loading Vimeo's Player API). Runs regardless of
   JS state; without JS the iframe is already at opacity:1 so the animation
   is a no-op. With JS it's at opacity:0 and the animation fades it in
   over a delay tuned to typical Vimeo player init. */
.high-performance-page .hp-hero-video-frame {
  animation: hp-hero-fade-in 1s .35s ease-out forwards;
}
@keyframes hp-hero-fade-in {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Ken Burns runs additively on top of the fade — separate properties so
     `transform` and `opacity` don't fight. */
  .high-performance-page .hp-hero-video,
  .high-performance-page .hp-hero-video-frame {
    animation: hp-hero-ken 26s ease-in-out infinite alternate;
  }
  /* Re-state the Vimeo fade-in because the rule above replaces `animation`
     entirely for Vimeo within reduced-motion-friendly contexts. We chain
     both animations on the wrapper. */
  .high-performance-page .hp-hero-video-frame {
    animation:
      hp-hero-fade-in 1s .35s ease-out forwards,
      hp-hero-ken 26s ease-in-out infinite alternate;
  }
}
@keyframes hp-hero-ken {
  from { transform: scale(1.06); }
  to   { transform: scale(1.16); }
}
/* Per-page hero focal point — overrides the default `center 30%`. Modifier
   classes are emitted only when the editor picks a non-default value; the
   "default" choice leaves the base rule untouched so existing pages don't
   visually shift when this field is added. Selectors carry one extra class
   than the base so they reliably override it in the cascade. */
.high-performance-page .hp-hero.hp-hero-focal--top    .hp-hero-img img { object-position: center 0%; }
.high-performance-page .hp-hero.hp-hero-focal--upper  .hp-hero-img img { object-position: center 25%; }
.high-performance-page .hp-hero.hp-hero-focal--center .hp-hero-img img { object-position: center 50%; }
.high-performance-page .hp-hero.hp-hero-focal--lower  .hp-hero-img img { object-position: center 75%; }
.high-performance-page .hp-hero.hp-hero-focal--bottom .hp-hero-img img { object-position: center 100%; }
.high-performance-page .hp-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(11,37,80,0.55) 0%, rgba(11,37,80,0.15) 35%, rgba(11,37,80,0.85) 100%),
    linear-gradient(95deg, rgba(11,37,80,0.55) 0%, rgba(11,37,80,0) 60%);
}
/* Hero overlay variants — selectable via ACF `hero_overlay` field.
   Scale matches the Contact section's "Background Image Opacity" vocabulary
   (Subtle → Showcase = image least → most visible). All variants keep the
   TOP and BOTTOM darker than the middle so the eyebrow / headline at top
   and sub-copy / CTAs at bottom stay readable against the photo. The
   base (no modifier) rule above is unchanged so existing pages render
   identically when "Default" is selected. */
.high-performance-page .hp-hero.hp-overlay--subtle .hp-hero-overlay {
  background:
    linear-gradient(180deg, rgba(11,37,80,0.78) 0%, rgba(11,37,80,0.50) 35%, rgba(11,37,80,0.96) 100%),
    linear-gradient(95deg, rgba(11,37,80,0.78) 0%, rgba(11,37,80,0.30) 60%);
}
.high-performance-page .hp-hero.hp-overlay--light .hp-hero-overlay {
  background:
    linear-gradient(180deg, rgba(11,37,80,0.68) 0%, rgba(11,37,80,0.30) 35%, rgba(11,37,80,0.88) 100%),
    linear-gradient(95deg, rgba(11,37,80,0.68) 0%, rgba(11,37,80,0.15) 60%);
}
.high-performance-page .hp-hero.hp-overlay--strong .hp-hero-overlay {
  background:
    linear-gradient(180deg, rgba(11,37,80,0.50) 0%, rgba(11,37,80,0.12) 35%, rgba(11,37,80,0.80) 100%),
    linear-gradient(95deg, rgba(11,37,80,0.50) 0%, rgba(11,37,80,0) 60%);
}
.high-performance-page .hp-hero.hp-overlay--bold .hp-hero-overlay {
  background:
    linear-gradient(180deg, rgba(11,37,80,0.45) 0%, rgba(11,37,80,0.08) 35%, rgba(11,37,80,0.72) 100%),
    linear-gradient(95deg, rgba(11,37,80,0.45) 0%, rgba(11,37,80,0) 60%);
}
.high-performance-page .hp-hero.hp-overlay--rich .hp-hero-overlay {
  background:
    linear-gradient(180deg, rgba(11,37,80,0.40) 0%, rgba(11,37,80,0.05) 35%, rgba(11,37,80,0.64) 100%),
    linear-gradient(95deg, rgba(11,37,80,0.40) 0%, rgba(11,37,80,0) 60%);
}
.high-performance-page .hp-hero.hp-overlay--vivid .hp-hero-overlay {
  background:
    linear-gradient(180deg, rgba(11,37,80,0.34) 0%, rgba(11,37,80,0.03) 35%, rgba(11,37,80,0.56) 100%),
    linear-gradient(95deg, rgba(11,37,80,0.34) 0%, rgba(11,37,80,0) 60%);
}
.high-performance-page .hp-hero.hp-overlay--showcase .hp-hero-overlay {
  background:
    linear-gradient(180deg, rgba(11,37,80,0.28) 0%, rgba(11,37,80,0.00) 35%, rgba(11,37,80,0.48) 100%),
    linear-gradient(95deg, rgba(11,37,80,0.28) 0%, rgba(11,37,80,0) 60%);
}
/* `video` overlay — auto-applied to the Video variant when overlay is left on
   Default (the template smart-defaults it server-side). Intentionally deeper
   than the Default still-image preset because moving footage is visually
   busier and the headline contrast tolerance is lower. Editor can still
   pick any other preset explicitly to override. */
.high-performance-page .hp-hero.hp-overlay--video .hp-hero-overlay {
  background:
    linear-gradient(180deg, rgba(11,37,80,0.64) 0%, rgba(11,37,80,0.30) 34%, rgba(11,37,80,0.92) 100%),
    linear-gradient(95deg, rgba(11,37,80,0.66) 0%, rgba(11,37,80,0) 62%);
}
/* v2 hero body — vertical head/foot split, no stat strip.
   .hp-hero-head sits at the top (eyebrow + display headline);
   .hp-hero-foot pins to the bottom (sub-copy left, CTAs right). */
.high-performance-page .hp-hero-body {
  position: relative; z-index: 2;
  width: 100%;
  padding: 160px 48px 96px;
  max-width: 1640px; margin: 0 auto;
  min-height: 100vh;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 80px;
}
.high-performance-page .hp-hero-head { max-width: 1400px; }
.high-performance-page .hp-hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px; align-items: end;
}
.high-performance-page .hp-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--hp-green-lt);
  margin-bottom: 32px;
}
.high-performance-page .hp-hero-dot {
  width: 7px; height: 7px;
  background: var(--hp-green-lt);
  border-radius: 50%;
  flex-shrink: 0;
  animation: hp-pulse 2.4s ease-in-out infinite;
}
@keyframes hp-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(151,202,62,.7); }
  60%       { opacity: .55; box-shadow: 0 0 0 12px rgba(151,202,62,0); }
}
/* Hero title is larger than the standard .hp-h-display — override the size
   while inheriting the italic-green <em> treatment from .hp-h-display em. */
.high-performance-page .hp-hero-title {
  color: #fff;
  font-size: clamp(72px, 10vw, 168px);
  line-height: 0.94;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}
/* Two-line headline stack — opt-in via the `hero_headline_stack` toggle.
   Pushes the emphasized portion (the `<em>`) to its own line for a bolder
   read. Works on v2 and the Video variant. v1 already stacks via a literal
   `<br>` in its render block, so this rule is a no-op there. */
.high-performance-page .hp-hero-title--stack em { display: block; }
.high-performance-page .hp-hero-sub {
  font-size: 22px; font-weight: 400;
  color: rgba(255,255,255,.85);
  line-height: 1.55; max-width: 52ch;
  margin: 0;
}
.high-performance-page .hp-hero-ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: flex-end;
}
.high-performance-page .hp-scroll-cue {
  position: absolute; left: 48px; bottom: 36px; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 500; color: rgba(255,255,255,.6);
}
.high-performance-page .hp-scroll-cue::after {
  content: ""; width: 60px; height: 1px; background: rgba(255,255,255,.4);
  animation: hp-scroll-line 2.4s ease-in-out infinite;
  transform-origin: left;
}
@keyframes hp-scroll-line {
  0%, 100% { transform: scaleX(0.3); opacity: .4; }
  50%       { transform: scaleX(1);   opacity: 1; }
}

/* ── Hero — Version 1 layout (content + stats corner panel) ──
   Selected per page via ACF `hero_variant`. Adds a `.hp-hero--v1`
   modifier that overrides the v2 head/foot vertical body into a
   2-column grid: content (eyebrow / h1 / sub / CTAs) on the left,
   an optional 4-stat panel on the right. The v2 base picture +
   overlay + scroll cue + image variants are reused unchanged. */
.high-performance-page .hp-hero--v1 .hp-hero-body {
  padding: 0 48px 96px;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: end;
  /* gap: 80px carries over from the v2 base */
}
.high-performance-page .hp-hero--v1 .hp-hero-content { min-width: 0; }
.high-performance-page .hp-hero--v1 .hp-hero-sub {
  font-size: 21px; font-weight: 400;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  max-width: 36ch;
  margin: 32px 0 40px;
}
/* v1 CTAs sit at the bottom of the left content column, left-aligned. */
.high-performance-page .hp-hero--v1 .hp-hero-ctas { justify-content: flex-start; }
/* Stats corner panel — 2×2 frosted tiles in the right column. */
.high-performance-page .hp-hero--v1 .hp-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.18);
}
.high-performance-page .hp-hero--v1 .hp-hstat {
  background: rgba(11,37,80,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 28px 26px;
}
.high-performance-page .hp-hero--v1 .hp-hstat-n {
  font-size: 56px; font-weight: 600;
  line-height: 1; color: #fff;
  letter-spacing: -.02em;
}
.high-performance-page .hp-hero--v1 .hp-hstat-n sup {
  font-size: 0.45em; vertical-align: top; line-height: 1;
  display: inline-block; margin-top: 12px;
  color: var(--hp-green-lt); font-weight: 500;
}
.high-performance-page .hp-hero--v1 .hp-hstat-l {
  margin-top: 10px;
  font-size: 13px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.65); line-height: 1.4;
}

@media (max-width: 1024px) {
  .high-performance-page .hp-hero--v1 .hp-hero-body {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .high-performance-page .hp-hero--v1 .hp-hero-stats { max-width: 560px; }
}
@media (max-width: 640px) {
  .high-performance-page .hp-hero--v1 .hp-hero-body { gap: 36px; }
  .high-performance-page .hp-hero--v1 .hp-hero-sub { font-size: 17px; margin: 24px 0 32px; max-width: none; }
  .high-performance-page .hp-hero--v1 .hp-hstat { padding: 20px 16px; }
  .high-performance-page .hp-hero--v1 .hp-hstat-n { font-size: 40px; }
  .high-performance-page .hp-hero--v1 .hp-hstat-l { font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════
   PROMO STRIP
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-promo-strip {
  background: var(--hp-bg-cream);
  border-top: 1px solid var(--hp-border);
  border-bottom: 1px solid var(--hp-border);
  padding: 0;
}
.high-performance-page .hp-promo-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: stretch;
  min-height: 480px;
}
.high-performance-page .hp-promo-media {
  position: relative; overflow: hidden;
  background: var(--hp-blue-dk);
  min-height: 480px;
}
.high-performance-page .hp-promo-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
}
/* Per-page focal point override. Modifier classes emitted only when editor
   picks a non-default value; "default" leaves base `center 35%` in place. */
.high-performance-page .hp-promo-media.hp-promo-focal--top    img { object-position: center 0%; }
.high-performance-page .hp-promo-media.hp-promo-focal--upper  img { object-position: center 25%; }
.high-performance-page .hp-promo-media.hp-promo-focal--center img { object-position: center 50%; }
.high-performance-page .hp-promo-media.hp-promo-focal--lower  img { object-position: center 75%; }
.high-performance-page .hp-promo-media.hp-promo-focal--bottom img { object-position: center 100%; }
.high-performance-page .hp-promo-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,37,80,.55) 0%, rgba(11,37,80,.88) 100%);
}
/* Promo veil variants — selectable via ACF `promo_overlay` field.
   Scale matches the Contact / Hero "Background Image Opacity" vocabulary
   (Subtle → Showcase = image least → most visible). The bottom stop is
   always heavier than the top so the headline and pricing block stay
   readable. The base rule above is the "Default" preset and is unchanged. */
.high-performance-page .hp-promo-strip.hp-overlay--subtle .hp-promo-veil {
  background: linear-gradient(180deg, rgba(11,37,80,.85) 0%, rgba(11,37,80,.98) 100%);
}
.high-performance-page .hp-promo-strip.hp-overlay--light .hp-promo-veil {
  background: linear-gradient(180deg, rgba(11,37,80,.70) 0%, rgba(11,37,80,.92) 100%);
}
.high-performance-page .hp-promo-strip.hp-overlay--strong .hp-promo-veil {
  background: linear-gradient(180deg, rgba(11,37,80,.42) 0%, rgba(11,37,80,.80) 100%);
}
.high-performance-page .hp-promo-strip.hp-overlay--bold .hp-promo-veil {
  background: linear-gradient(180deg, rgba(11,37,80,.32) 0%, rgba(11,37,80,.72) 100%);
}
.high-performance-page .hp-promo-strip.hp-overlay--rich .hp-promo-veil {
  background: linear-gradient(180deg, rgba(11,37,80,.22) 0%, rgba(11,37,80,.62) 100%);
}
.high-performance-page .hp-promo-strip.hp-overlay--vivid .hp-promo-veil {
  background: linear-gradient(180deg, rgba(11,37,80,.15) 0%, rgba(11,37,80,.52) 100%);
}
.high-performance-page .hp-promo-strip.hp-overlay--showcase .hp-promo-veil {
  background: linear-gradient(180deg, rgba(11,37,80,.08) 0%, rgba(11,37,80,.40) 100%);
}
.high-performance-page .hp-promo-overlay {
  position: relative; z-index: 2;
  height: 100%;
  padding: 56px clamp(28px, 5vw, 64px);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff;
}
/* Season pill sits BELOW the title + sub in the overlay (design order)
   and carries a slow breathing glow + a ripple dot to draw the eye. */
.high-performance-page .hp-promo-season {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  padding: 9px 16px 9px 14px;
  border-radius: 999px;
  margin-top: 28px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: hp-promo-season-breathe 3.2s ease-in-out infinite;
}
@keyframes hp-promo-season-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(151,202,62,0); }
  50%      { box-shadow: 0 0 0 6px rgba(151,202,62,0.18); }
}
.high-performance-page .hp-promo-season-dot {
  position: relative;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--hp-green-lt); display: inline-block;
  flex: 0 0 9px;
  animation: hp-promo-dot-pulse 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
.high-performance-page .hp-promo-season-dot::before,
.high-performance-page .hp-promo-season-dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--hp-green-lt);
  animation: hp-promo-dot-ripple 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
.high-performance-page .hp-promo-season-dot::after { animation-delay: .8s; }
@keyframes hp-promo-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.18); opacity: .85; }
}
@keyframes hp-promo-dot-ripple {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(3.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .high-performance-page .hp-promo-season,
  .high-performance-page .hp-promo-season-dot,
  .high-performance-page .hp-promo-season-dot::before,
  .high-performance-page .hp-promo-season-dot::after { animation: none; }
}
.high-performance-page .hp-promo-title {
  font-size: clamp(40px, 4.6vw, 60px);
  font-weight: 600; line-height: 1.0;
  color: #fff; letter-spacing: -0.02em; margin: 0;
  text-wrap: balance;
}
.high-performance-page .hp-promo-title em {
  font-style: italic; font-weight: 500; color: var(--hp-green-lt);
}
.high-performance-page .hp-promo-sub {
  margin-top: 18px;
  font-size: 15px; line-height: 1.55;
  color: rgba(255,255,255,.85); max-width: 38ch;
}
.high-performance-page .hp-promo-body {
  /* --hp-gutter: the body's own horizontal padding. --hp-feat-bleed: how
     far the featured card "pops out" past the regular row content area.
     Both are defined ONCE here and referenced by .hp-promo-tier-feat so
     its margin / padding / width values physically can't drift apart.
     Retune either per breakpoint as needed. */
  --hp-gutter: clamp(28px, 5vw, 64px);
  --hp-feat-bleed: 20px;
  padding: 56px var(--hp-gutter);
  display: flex; flex-direction: column; justify-content: center;
  gap: 32px;
}
.high-performance-page .hp-promo-tiers {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
}
.high-performance-page .hp-promo-tier {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hp-border);
}
.high-performance-page .hp-promo-tier:first-child { border-top: 1px solid var(--hp-border); }
/* Hover treatment: a green rail wipes in on the left, the row picks up a
   faint green-mist wash (featured row deepens to a navy tint instead since
   green-mist would clash with its existing 5% navy base), and the info block
   slides 14px right out of the rail's way. Price color untouched.
   Gated behind `(hover: hover)` so touch devices don't sticky-hover-tap. */
.high-performance-page .hp-promo-tier::before {
  /* !important because the page-wide `li::before { content: none !important }`
     reset (line 27) was designed to neutralize the parent theme's bullet
     injection but also kills any `content: ""` we add ourselves on <li>s.
     Explicit `height: 100%` instead of `top:0; bottom:0` — the row is a
     `display: grid` container, and absolute children of grid containers can
     have their height resolution deferred to grid auto-sizing in some
     browsers, capping the rail well short of the row's actual height. The
     box stays at full height the whole time; `clip-path` does the wipe-in. */
  content: "" !important;
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 100%;
  border-radius: 2px;
  background: var(--hp-green);
  clip-path: inset(50% 0);
  transition: clip-path .3s cubic-bezier(.4,0,.2,1);
}
/* Featured tier's rail matches its navy chrome (border, badge, bg tint) so
   the card reads as one coherent navy-themed unit rather than mixing green. */
.high-performance-page .hp-promo-tier.hp-promo-tier-feat::before {
  background: var(--hp-blue-dk);
}
.high-performance-page .hp-promo-tier .hp-pt-info {
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
@media (hover: hover) {
  .high-performance-page .hp-promo-tier:hover {
    background-color: var(--hp-green-mist);
  }
  .high-performance-page .hp-promo-tier:hover::before {
    clip-path: inset(0);
  }
  .high-performance-page .hp-promo-tier:hover .hp-pt-info {
    transform: translateX(14px);
  }
  .high-performance-page .hp-promo-tier.hp-promo-tier-feat:hover {
    background-color: rgba(11, 37, 80, 0.09);
  }
}
.high-performance-page .hp-pt-info {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.high-performance-page .hp-pt-name {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: 600; color: var(--hp-text);
  letter-spacing: -0.015em; line-height: 1.15;
}
.high-performance-page .hp-pt-meta {
  font-size: 12px; font-weight: 500;
  color: var(--hp-text-soft);
  letter-spacing: 0.14em; text-transform: uppercase;
}
/* Price is its own 2×2 grid: tiny "From" eyebrow spans the top, big amount
   bottom-left, small "/wk" suffix bottom-right (baseline-aligned). */
.high-performance-page .hp-pt-price {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 4px;
  align-items: baseline;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.high-performance-page .hp-pt-price-eyebrow {
  grid-column: 1 / -1; grid-row: 1;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hp-text-soft); margin-bottom: 2px;
}
.high-performance-page .hp-pt-price-amount {
  grid-column: 1; grid-row: 2;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: clamp(36px, 3.8vw, 48px);
  font-weight: 600; line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--hp-green);
}
.high-performance-page .hp-pt-price-suffix {
  grid-column: 2; grid-row: 2;
  font-size: 14px; font-weight: 500;
  color: var(--hp-text-soft);
  align-self: baseline;
}
/* Featured tier — pull-out card with subtle navy tint + "Invite Only" tag.
   The card "pops out" past the regular row content by --hp-feat-bleed on
   each side (not all the way to the body edge — there's an intentional
   gap between the card border and the cream container in the design).
   Matching internal padding pulls the content back in so the inner grid
   (price column included) keeps the same x-coordinates as the non-featured
   rows above. The explicit `width` is essential: without it, flex sizes
   this item to the parent's content width and only the left bleed renders
   (the right negative margin gets absorbed). `width: 100% + 2 * bleed`
   reclaims that span so both sides extend symmetrically. */
.high-performance-page .hp-promo-tier-feat {
  background: rgba(11, 37, 80, 0.05);
  margin: 8px calc(-1 * var(--hp-feat-bleed));
  padding: 24px var(--hp-feat-bleed);
  width: calc(100% + 2 * var(--hp-feat-bleed));
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid rgba(11, 37, 80, 0.35);
}
.high-performance-page .hp-promo-tier-feat + .hp-promo-tier { border-top: none; }
.high-performance-page .hp-promo-tier-feat .hp-pt-tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
  background: var(--hp-blue-dk); color: #fff;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 10px 6px 9px;
  border-radius: 3px;
  line-height: 1;
  align-self: flex-start;
}
.high-performance-page .hp-pt-tag-icon {
  width: 11px; height: 11px;
  fill: var(--hp-green-lt);
  flex: 0 0 11px;
  display: block;
}
.high-performance-page .hp-promo-tier-feat .hp-pt-name { font-size: clamp(20px, 1.6vw, 24px); }
.high-performance-page .hp-promo-tier-feat .hp-pt-price-amount { font-size: clamp(42px, 4.4vw, 56px); }
.high-performance-page .hp-promo-cta { align-self: flex-start; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════
   PHILOSOPHY
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-philosophy {
  background: var(--hp-bg-cream);
  padding: 140px 0;
}
.high-performance-page .hp-phil-grid {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 96px; align-items: center;
  margin-bottom: 100px;
}
.high-performance-page .hp-phil-photo { position: relative; }
.high-performance-page .hp-phil-photo img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
}
/* Per-page focal point override for the philosophy photo. */
.high-performance-page .hp-phil-photo.hp-phil-focal--top    img { object-position: center 0%; }
.high-performance-page .hp-phil-photo.hp-phil-focal--upper  img { object-position: center 25%; }
.high-performance-page .hp-phil-photo.hp-phil-focal--center img { object-position: center 50%; }
.high-performance-page .hp-phil-photo.hp-phil-focal--lower  img { object-position: center 75%; }
.high-performance-page .hp-phil-photo.hp-phil-focal--bottom img { object-position: center 100%; }
.high-performance-page .hp-phil-badge {
  position: absolute; bottom: -28px; right: -28px;
  background: var(--hp-blue-dk); color: #fff;
  padding: 24px 28px; min-width: 200px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.35);
}
.high-performance-page .hp-phil-badge-n {
  font-size: 48px; font-weight: 600;
  color: var(--hp-green-lt); line-height: 1; letter-spacing: -.02em;
}
.high-performance-page .hp-phil-badge-l {
  margin-top: 10px;
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.high-performance-page .hp-phil-quote {
  margin-top: 36px;
  border-left: 3px solid var(--hp-green);
  padding: 4px 0 4px 22px;
}
.high-performance-page .hp-phil-quote p {
  font-size: 19px; font-style: italic;
  color: var(--hp-text); line-height: 1.65; margin-bottom: 12px;
}
.high-performance-page .hp-phil-quote cite {
  font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--hp-text-soft); font-style: normal;
}
.high-performance-page .hp-phil-pillars {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--hp-border);
  border-bottom: 1px solid var(--hp-border);
}
.high-performance-page .hp-phil-pillar {
  padding: 36px 28px;
  border-right: 1px solid var(--hp-border);
  display: flex; flex-direction: column; gap: 14px;
  transition: background .25s ease, color .25s ease;
}
.high-performance-page .hp-phil-pillar:last-child { border-right: 0; }
.high-performance-page .hp-phil-pillar:hover { background: var(--hp-blue-dk); color: #fff; }
.high-performance-page .hp-pp-num {
  font-size: 13px; font-weight: 600;
  letter-spacing: .18em; color: var(--hp-green);
  transition: color .25s ease;
}
.high-performance-page .hp-pp-text {
  font-size: 17px; font-weight: 600; line-height: 1.25;
  color: var(--hp-text); transition: color .25s ease;
}
.high-performance-page .hp-phil-pillar:hover .hp-pp-num { color: var(--hp-green-lt); }
.high-performance-page .hp-phil-pillar:hover .hp-pp-text { color: #fff; }

/* Philosophy → training-methods video CTA tile (v2 addition).
   Self-contained block incl. its own responsive overrides. */
.high-performance-page .hp-phil-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  margin-top: 64px;
  padding: 28px 36px 28px 28px;
  background: var(--hp-blue-dk);
  color: #fff;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.high-performance-page .hp-phil-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(151,202,62,0.08) 60%, rgba(151,202,62,0.18) 100%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.high-performance-page .hp-phil-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px -20px rgba(11,37,80,.5);
}
.high-performance-page .hp-phil-cta:hover::before { opacity: 1; }
.high-performance-page .hp-phil-cta-play {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--hp-green);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  transition: background .25s ease, transform .35s ease;
}
.high-performance-page .hp-phil-cta-play::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(151,202,62,.4);
  animation: hp-phil-cta-pulse 2.6s ease-in-out infinite;
}
@keyframes hp-phil-cta-pulse {
  0%   { transform: scale(1);    opacity: .7; }
  60%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
.high-performance-page .hp-phil-cta:hover .hp-phil-cta-play {
  background: var(--hp-green-lt);
  transform: scale(1.05);
}
.high-performance-page .hp-phil-cta-play svg {
  width: 26px; height: 26px;
  fill: #fff; stroke: none;
  margin-left: 4px;
}
.high-performance-page .hp-phil-cta:hover .hp-phil-cta-play svg { fill: var(--hp-text); }
.high-performance-page .hp-phil-cta-body {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.high-performance-page .hp-phil-cta-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--hp-green-lt);
}
.high-performance-page .hp-phil-cta-eyebrow::before {
  content: ""; width: 24px; height: 1px;
  background: var(--hp-green-lt);
}
.high-performance-page .hp-phil-cta-headline {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: clamp(26px, 2.4vw + 4px, 38px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.high-performance-page .hp-phil-cta-headline em {
  font-style: italic;
  font-weight: 300;
  color: var(--hp-green-lt);
}
.high-performance-page .hp-phil-cta-arrow {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  transition: background .25s ease, border-color .25s ease, transform .35s ease;
}
.high-performance-page .hp-phil-cta-arrow svg {
  width: 18px; height: 18px;
  fill: none; stroke: #fff;
  stroke-width: 1.8;
}
.high-performance-page .hp-phil-cta:hover .hp-phil-cta-arrow {
  background: #fff;
  border-color: #fff;
  transform: translateX(6px);
}
.high-performance-page .hp-phil-cta:hover .hp-phil-cta-arrow svg { stroke: var(--hp-blue-dk); }

@media (max-width: 1024px) {
  .high-performance-page .hp-phil-cta { gap: 24px; padding: 24px 24px 24px 20px; margin-top: 48px; }
  .high-performance-page .hp-phil-cta-play { width: 60px; height: 60px; }
  .high-performance-page .hp-phil-cta-play svg { width: 22px; height: 22px; }
  .high-performance-page .hp-phil-cta-arrow { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
  .high-performance-page .hp-phil-cta {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 16px 18px;
    padding: 22px;
    margin-top: 40px;
  }
  .high-performance-page .hp-phil-cta-play { width: 52px; height: 52px; }
  .high-performance-page .hp-phil-cta-play svg { width: 20px; height: 20px; }
  .high-performance-page .hp-phil-cta-headline { font-size: 22px; }
  .high-performance-page .hp-phil-cta-arrow {
    grid-column: 1 / -1;
    width: auto; height: 44px;
    border-radius: 0;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.18);
    justify-content: flex-end;
    padding-top: 14px;
    margin-top: 6px;
  }
  .high-performance-page .hp-phil-cta:hover .hp-phil-cta-arrow {
    background: transparent;
    border-color: rgba(255,255,255,.18);
    transform: none;
  }
  .high-performance-page .hp-phil-cta:hover .hp-phil-cta-arrow svg { stroke: #fff; }
}

/* ════════════════════════════════════════════════════════════
   TICKER
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-ticker {
  background: var(--hp-blue-dk);
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.high-performance-page .hp-ticker-track {
  display: inline-flex;
  animation: hp-tick 42s linear infinite;
  padding: 18px 0;
}
.high-performance-page .hp-ticker-item {
  font-size: 13px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
  padding: 0 30px;
}
.high-performance-page .hp-ticker-dot {
  display: inline-block; width: 4px; height: 4px;
  background: var(--hp-green-lt); border-radius: 50%;
  margin-left: 30px; vertical-align: middle;
}
@keyframes hp-tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ════════════════════════════════════════════════════════════
   PROGRAM VIDEO
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-program-video {
  background: var(--hp-bg-soft);
  padding: 100px 0;
}
.high-performance-page .hp-video-frame {
  position: relative; aspect-ratio: 16/9;
  overflow: hidden; background: var(--hp-blue-dk);
}
.high-performance-page .hp-video-clickable { cursor: pointer; }
.high-performance-page .hp-video-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease, filter .4s ease;
  filter: brightness(0.55);
}
.high-performance-page .hp-video-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}
/* Once the iframe is embedded, suppress the bottom gradient so it doesn't dim the video. */
.high-performance-page .hp-video-frame:has(.hp-video-iframe)::after { content: none; }
.high-performance-page .hp-video-clickable:hover img { transform: scale(1.04); }
.high-performance-page .hp-video-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(11,37,80,.55) 100%);
  pointer-events: none;
}
.high-performance-page .hp-video-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px;
  background: var(--hp-green); border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background .2s ease, transform .2s ease;
}
.high-performance-page .hp-video-clickable:hover .hp-video-play {
  background: var(--hp-green-lt);
  transform: translate(-50%, -50%) scale(1.06);
}
.high-performance-page .hp-video-play svg {
  width: 32px; height: 32px; margin-left: 5px;
  fill: #fff; stroke: none;
}
.high-performance-page .hp-video-meta {
  position: absolute; left: 32px; bottom: 28px; z-index: 2;
  color: #fff;
}
.high-performance-page .hp-video-label {
  font-size: 12px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--hp-green-lt); margin-bottom: 8px;
}
.high-performance-page .hp-video-title {
  font-size: 24px; font-weight: 600;
  line-height: 1.2; max-width: 28ch;
}
.high-performance-page .hp-video-duration {
  position: absolute; right: 28px; bottom: 28px; z-index: 2;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.85); letter-spacing: .12em;
  background: rgba(0,0,0,.35); padding: 6px 12px;
  backdrop-filter: blur(6px);
}

/* ════════════════════════════════════════════════════════════
   ALUMNI PROOF
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-alumni-proof {
  background: var(--hp-bg); padding: 140px 0;
}
/* v2 alumni proof — static poster cards: a wide feature card spanning the
   row, plus standard portrait cards. Each shows badge + name + quote + credit
   over a veil (no hover-reveal). A pill "callout" sits below the grid. */
.high-performance-page .hp-alumni-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.high-performance-page .hp-alumni-card {
  position: relative; overflow: hidden;
  background: var(--hp-blue-dk);
  aspect-ratio: 9 / 10;
  display: flex; isolation: isolate;
}
.high-performance-page .hp-alumni-card-feat {
  grid-column: 1 / -1;
  aspect-ratio: 7 / 3;
}
.high-performance-page .hp-alumni-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
}
.high-performance-page .hp-alumni-card-feat img { object-position: center 28%; }
/* Per-card focal-point overrides (one extra class to beat the base). */
.high-performance-page .hp-alumni-card.hp-alumni-focal--top    img { object-position: center 0%; }
.high-performance-page .hp-alumni-card.hp-alumni-focal--upper  img { object-position: center 25%; }
.high-performance-page .hp-alumni-card.hp-alumni-focal--center img { object-position: center 50%; }
.high-performance-page .hp-alumni-card.hp-alumni-focal--lower  img { object-position: center 75%; }
.high-performance-page .hp-alumni-card.hp-alumni-focal--bottom img { object-position: center 100%; }
.high-performance-page .hp-alumni-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(11,37,80,0) 0%,
    rgba(11,37,80,0) 25%,
    rgba(11,37,80,0.55) 48%,
    rgba(11,37,80,0.92) 78%,
    rgba(11,37,80,0.97) 100%
  );
}
.high-performance-page .hp-alumni-card-feat .hp-alumni-veil {
  background: linear-gradient(
    98deg,
    rgba(11,37,80,0.96) 0%,
    rgba(11,37,80,0.88) 35%,
    rgba(11,37,80,0.55) 55%,
    rgba(11,37,80,0.15) 80%,
    rgba(11,37,80,0) 100%
  );
}
.high-performance-page .hp-alumni-content {
  position: relative; align-self: flex-end; width: 100%;
  padding: 36px 34px 32px; color: #fff;
  display: flex; flex-direction: column; gap: 14px;
}
.high-performance-page .hp-alumni-card-feat .hp-alumni-content {
  align-self: center; max-width: 56%;
  padding: 48px 56px; gap: 18px;
}
.high-performance-page .hp-alumni-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--hp-green); color: #fff;
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 6px 12px;
}
.high-performance-page .hp-alumni-badge-circle { background: var(--hp-blue); }
.high-performance-page .hp-alumni-name {
  font-size: clamp(26px, 2vw, 32px);
  font-weight: 600; line-height: 1.05; letter-spacing: -.015em;
  margin: 0; text-wrap: balance;
}
.high-performance-page .hp-alumni-card-feat .hp-alumni-name { font-size: clamp(36px, 3.2vw, 52px); }
.high-performance-page .hp-alumni-quote {
  margin: 0; position: relative;
  padding-left: 18px; border-left: 2px solid var(--hp-green-lt);
}
.high-performance-page .hp-alumni-quote p {
  margin: 0;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.5; font-weight: 400;
  color: rgba(255,255,255,.92); font-style: italic;
  letter-spacing: -.003em;
}
.high-performance-page .hp-alumni-card-feat .hp-alumni-quote p { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.45; }
.high-performance-page .hp-alumni-credit {
  margin: 0;
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--hp-green-lt);
}
.high-performance-page .hp-alumni-card-feat .hp-alumni-credit { font-size: 12px; }
/* Callout pill below the grid → links to the Full Time program. */
.high-performance-page .hp-alumni-callout {
  display: inline-flex; align-items: center; gap: 16px;
  margin-top: 56px;
  padding: 22px 32px;
  background: var(--hp-bg-cream);
  border: 1px solid var(--hp-border);
  border-radius: 999px;
  color: var(--hp-text); text-decoration: none;
  font-size: 17px; font-weight: 500; letter-spacing: -0.005em;
  transition: background .18s ease, border-color .18s ease, gap .18s ease;
}
.high-performance-page .hp-alumni-callout strong { color: var(--hp-green); font-weight: 600; }
.high-performance-page .hp-alumni-callout svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  transition: transform .18s ease;
}
.high-performance-page .hp-alumni-callout:hover { background: #fff; border-color: var(--hp-green); gap: 22px; }
.high-performance-page .hp-alumni-callout:hover svg { transform: translateX(4px); }

/* ════════════════════════════════════════════════════════════
   PROGRAMS
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-programs {
  background: var(--hp-bg-soft); padding: 140px 0;
}

/* Flagship card — wide row above the grid, image left, body right. */
.high-performance-page .hp-prog-flagship {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: #fff;
  outline: 2px solid var(--hp-blue-dk);
  outline-offset: -2px;
  cursor: pointer;
  margin-bottom: 56px;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
}
.high-performance-page .hp-prog-flagship:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 60px -22px rgba(11,37,80,.4);
}
.high-performance-page .hp-prog-flagship-media {
  position: relative;
  overflow: hidden;
  background: var(--hp-blue-dk);
  min-height: 420px;
}
.high-performance-page .hp-prog-flagship-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.high-performance-page .hp-prog-flagship:hover .hp-prog-flagship-media img { transform: scale(1.04); }
.high-performance-page .hp-prog-flagship-badge {
  position: absolute; top: 20px; left: 20px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--hp-blue-dk); color: #fff;
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 9px 14px;
  box-shadow: 0 6px 16px rgba(11,37,80,.4);
  line-height: 1;
}
.high-performance-page .hp-prog-flagship-badge svg {
  width: 12px; height: 12px;
  fill: var(--hp-green-lt); stroke: none;
  flex: 0 0 12px;
}
.high-performance-page .hp-prog-flagship-body {
  padding: 48px 56px;
  display: flex; flex-direction: column; gap: 18px;
  background: linear-gradient(180deg, #fff 0%, rgba(27,78,160,0.04) 100%);
}
.high-performance-page .hp-prog-flagship-body .hp-ey { margin-bottom: 4px; }
.high-performance-page .hp-prog-flagship-name {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: clamp(30px, 2.8vw, 42px);
  font-weight: 600;
  color: var(--hp-blue-dk);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
}
.high-performance-page .hp-prog-flagship-desc {
  font-size: 17px;
  line-height: 1.65;
  color: var(--hp-text);
  max-width: 52ch;
  margin: 0;
}
.high-performance-page .hp-prog-flagship-meta {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.high-performance-page .hp-prog-flagship-meta li {
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--hp-text);
  background: #fff;
  border: 1px solid var(--hp-border);
  padding: 6px 12px;
}
.high-performance-page .hp-prog-flagship-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--hp-border);
}
.high-performance-page .hp-prog-flagship .hp-prog-pill { background: var(--hp-blue-dk); color: #fff; }
.high-performance-page .hp-prog-flagship .hp-prog-details { color: var(--hp-blue-dk); }
.high-performance-page .hp-prog-flagship:hover .hp-prog-details,
.high-performance-page .hp-prog-flagship .hp-prog-details:hover { color: var(--hp-green); }

/* Secondary programs grid — 2x2 of horizontal cards (auto-fit wraps for N). */
.high-performance-page .hp-prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 16px;
}
.high-performance-page .hp-prog-card {
  position: relative;
  background: #fff;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  min-height: 320px;
  outline: 1px solid var(--hp-border);
  outline-offset: -1px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: outline-color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.high-performance-page .hp-prog-card:hover {
  border-color: var(--hp-green-lt); outline-color: transparent;
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -20px rgba(28,28,28,0.18);
  z-index: 1;
}
.high-performance-page .hp-prog-thumb {
  overflow: hidden;
  background: var(--hp-blue-dk);
  position: relative;
}
.high-performance-page .hp-prog-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 50%;
  transition: transform .6s ease;
}
.high-performance-page .hp-prog-card:hover .hp-prog-thumb img { transform: scale(1.06); }

/* Per-program thumbnail focal point — drives object-position on both the
   flagship media panel and the grid-card thumbnail so a single field tunes
   both. One extra class than the base selectors so each modifier reliably
   overrides the default `object-position: center 50%`. */
.high-performance-page .hp-prog-card.hp-prog-thumb-focal--top    .hp-prog-thumb img    { object-position: center 0%; }
.high-performance-page .hp-prog-card.hp-prog-thumb-focal--upper  .hp-prog-thumb img    { object-position: center 25%; }
.high-performance-page .hp-prog-card.hp-prog-thumb-focal--center .hp-prog-thumb img    { object-position: center 50%; }
.high-performance-page .hp-prog-card.hp-prog-thumb-focal--lower  .hp-prog-thumb img    { object-position: center 75%; }
.high-performance-page .hp-prog-card.hp-prog-thumb-focal--bottom .hp-prog-thumb img    { object-position: center 100%; }
.high-performance-page .hp-prog-flagship.hp-prog-thumb-focal--top    .hp-prog-flagship-media img { object-position: center 0%; }
.high-performance-page .hp-prog-flagship.hp-prog-thumb-focal--upper  .hp-prog-flagship-media img { object-position: center 25%; }
.high-performance-page .hp-prog-flagship.hp-prog-thumb-focal--center .hp-prog-flagship-media img { object-position: center 50%; }
.high-performance-page .hp-prog-flagship.hp-prog-thumb-focal--lower  .hp-prog-flagship-media img { object-position: center 75%; }
.high-performance-page .hp-prog-flagship.hp-prog-thumb-focal--bottom .hp-prog-flagship-media img { object-position: center 100%; }
.high-performance-page .hp-prog-body {
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}
.high-performance-page .hp-prog-body-head { display: flex; flex-direction: column; gap: 10px; }
.high-performance-page .hp-prog-name {
  font-size: 24px; font-weight: 600;
  line-height: 1.1; color: var(--hp-text);
  letter-spacing: -.01em;
}
.high-performance-page .hp-prog-desc {
  font-size: 14px; color: var(--hp-text-soft);
  line-height: 1.6;
}
/* Tag rows — row 1: Ages + Season; row 2: Level spans full. Age chip tinted green. */
.high-performance-page .hp-prog-tags {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.high-performance-page .hp-prog-tag {
  display: flex; flex-direction: column;
  gap: 2px;
  background: var(--hp-bg-soft);
  border: 1px solid var(--hp-border-soft);
  padding: 9px 12px;
  min-width: 0;
}
.high-performance-page .hp-prog-tag span {
  font-size: 9px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--hp-text-soft);
}
.high-performance-page .hp-prog-tag strong {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: -.005em;
  color: var(--hp-text);
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.high-performance-page .hp-prog-tag-age {
  background: var(--hp-green-mist);
  border-color: var(--hp-green-pale);
}
.high-performance-page .hp-prog-tag-age span { color: var(--hp-green); }
.high-performance-page .hp-prog-tag-age strong { color: var(--hp-green); font-size: 15px; }
.high-performance-page .hp-prog-tag-level { grid-column: 1 / -1; }

.high-performance-page .hp-prog-pill {
  align-self: flex-start;
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 12px;
  background: var(--hp-bg-grey); color: var(--hp-text);
}
.high-performance-page .hp-prog-pill-feat { background: var(--hp-green); color: #fff; }
.high-performance-page .hp-prog-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hp-border-soft);
}
.high-performance-page .hp-prog-details {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 0;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--hp-blue-dk);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .15s ease, gap .15s ease;
}
.high-performance-page .hp-prog-details svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 2;
  transition: transform .15s ease;
}
.high-performance-page .hp-prog-card:hover .hp-prog-details,
.high-performance-page .hp-prog-details:hover { color: var(--hp-green); gap: 12px; }
.high-performance-page .hp-prog-card:hover .hp-prog-details svg,
.high-performance-page .hp-prog-details:hover svg { transform: translateX(3px); }
.high-performance-page .hp-prog-details:focus-visible {
  outline: 2px solid var(--hp-green);
  outline-offset: 4px;
}

/* ════════════════════════════════════════════════════════════
   COACHING
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-coaching {
  background: var(--hp-bg); padding: 140px 0;
}
.high-performance-page .hp-coach-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 60px; margin-bottom: 56px;
  max-width: 1280px; margin-left: auto; margin-right: auto;
  padding: 0 48px;
}
.high-performance-page .hp-coach-controls { display: flex; gap: 8px; }
/* Active arrows are solid navy chips with a soft drop shadow, larger icon
   (22px) with a thicker stroke for presence. Hover swaps navy → green and
   lifts 2px. Disabled state keeps the old quiet white/gray look so the
   available direction reads as the affordance by contrast. */
.high-performance-page .hp-coach-arrow {
  width: 56px; height: 56px;
  background: var(--hp-blue-dk); color: #fff;
  border: 1px solid var(--hp-blue-dk);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(11, 37, 80, 0.18);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.high-performance-page .hp-coach-arrow svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.high-performance-page .hp-coach-arrow:hover:not(:disabled) {
  background: var(--hp-green); color: #fff; border-color: var(--hp-green);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(106, 163, 8, 0.32);
}
.high-performance-page .hp-coach-arrow:disabled {
  background: #fff; color: var(--hp-text-soft);
  border-color: var(--hp-border);
  box-shadow: none;
  opacity: .55; cursor: not-allowed;
}
.high-performance-page .hp-coach-outer {
  overflow: hidden;
  padding-left: max(48px, calc((100vw - 1280px) / 2));
}
.high-performance-page .hp-coach-rail {
  display: flex; gap: 24px;
  transition: transform .55s cubic-bezier(.25,.46,.45,.94);
}
/* Carousel-mode pagination dots — only rendered in DOM when the editor opts
   into carousel mode. JS populates with one dot per page (3 cards on
   desktop, 1 on mobile) and updates the active state as the rail moves. */
.high-performance-page .hp-coach-dots {
  display: flex; justify-content: center; align-items: center;
  gap: 10px;
  margin-top: 40px;
  padding: 0 32px;
}
.high-performance-page .hp-coach-dot {
  /* <button> reset — these are real buttons (keyboard + AT accessible) but
     visually just dots. */
  appearance: none;
  -webkit-appearance: none;
  background: rgba(28, 28, 28, 0.22);
  border: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, width .2s ease;
}
.high-performance-page .hp-coach-dot:hover { background: rgba(28, 28, 28, 0.45); }
.high-performance-page .hp-coach-dot:focus-visible {
  outline: 2px solid var(--hp-green);
  outline-offset: 3px;
}
.high-performance-page .hp-coach-dot.is-active {
  background: var(--hp-green);
  /* Wider active state — reads at a glance which page you're on. */
  width: 24px;
  border-radius: 4px;
}
/* Drag affordance on desktop (transform mode). At ≤1024px the rail uses
   native overflow scroll which has its own touch-drag semantics — no cursor
   override needed there. */
@media (min-width: 1025px) {
  .high-performance-page .hp-coach-rail { cursor: grab; }
  .high-performance-page .hp-coach-outer--dragging .hp-coach-rail {
    cursor: grabbing;
    /* While dragging, suppress text selection on the cards so the user
       doesn't accidentally highlight a coach name mid-swipe. */
    user-select: none;
    -webkit-user-select: none;
  }
}
/* Disable the browser's native image-drag behavior on coach photos. Without
   this, mousedown on a card image starts a drag-and-drop operation (ghost
   image follows the cursor, attempts to drag the image out of the page),
   which fires BEFORE our pointer-down slider handler — so the slider never
   responds to drags that originate on an image. Applies at every breakpoint
   so the affordance is consistent. */
.high-performance-page .hp-coach-rail img {
  -webkit-user-drag: none;
  user-drag: none;
}
.high-performance-page .hp-coach-card {
  flex: 0 0 calc((1280px - 96px - 48px) / 3);
  background: var(--hp-bg-soft);
  outline: 1px solid var(--hp-border); outline-offset: -1px;
  border: 2px solid transparent;
  transition: outline-color .2s, border-color .2s, transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.high-performance-page .hp-coach-card:hover {
  border-color: var(--hp-green-lt); outline-color: transparent;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(28,28,28,0.16);
}
.high-performance-page .hp-coach-photo {
  aspect-ratio: 1/1; overflow: hidden;
  background: var(--hp-blue-dk);
}
.high-performance-page .hp-coach-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%;
  transition: transform .6s ease;
}
/* Per-coach focal override (modifier emitted only when editor picks non-default). */
.high-performance-page .hp-coach-card.hp-coach-focal--top    .hp-coach-photo img { object-position: center 0%; }
.high-performance-page .hp-coach-card.hp-coach-focal--center .hp-coach-photo img { object-position: center 50%; }
.high-performance-page .hp-coach-card.hp-coach-focal--lower  .hp-coach-photo img { object-position: center 75%; }
.high-performance-page .hp-coach-card.hp-coach-focal--bottom .hp-coach-photo img { object-position: center 100%; }
.high-performance-page .hp-coach-card:hover .hp-coach-photo img { transform: scale(1.05); }
.high-performance-page .hp-coach-info {
  padding: 28px 26px; display: flex; flex-direction: column; gap: 10px;
}
.high-performance-page .hp-coach-role {
  font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--hp-green);
}
.high-performance-page .hp-coach-name {
  font-size: 22px; font-weight: 600;
  line-height: 1.15; color: var(--hp-text);
}
.high-performance-page .hp-coach-bio {
  font-size: 14px; color: var(--hp-text-soft); line-height: 1.6;
}
.high-performance-page .hp-coach-creds {
  margin-top: 12px; padding-top: 16px;
  border-top: 1px solid var(--hp-border);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.high-performance-page .hp-coach-creds li {
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--hp-text);
  background: #fff; border: 1px solid var(--hp-border);
  padding: 5px 10px;
}

/* ════════════════════════════════════════════════════════════
   NCAA
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-ncaa {
  background: var(--hp-blue-dk); color: #fff;
  padding: 140px 0; position: relative; overflow: hidden;
}
/* Optional faded background image — only renders when ACF `hp_ncaa_bg_image`
   is set (the `.hp-ncaa-has-image` modifier and `--hp-ncaa-bg` CSS variable
   are emitted on the section). The ::before holds the photo (de-saturated,
   18% opacity); the ::after lays a left-to-right navy gradient on top so
   the headline + intro stay legible. */
.high-performance-page .hp-ncaa.hp-ncaa-has-image::before {
  content: "";
  position: absolute; right: -10%; top: -20%;
  width: 60%; height: 140%;
  background-image: var(--hp-ncaa-bg);
  background-size: cover;
  background-repeat: no-repeat;
  /* `background-position` is set by the focal-point modifier rules below,
     NOT here — same specificity-collision concern as the contact section. */
  opacity: 0.18;
  filter: grayscale(0.4);
  z-index: 0;
  pointer-events: none;
}
/* Focal point modifiers — anchor the image so the most important part of the
   subject stays inside the visible window after `cover` cropping. */
.high-performance-page .hp-ncaa-focal--top::before    { background-position: center top; }
.high-performance-page .hp-ncaa-focal--bottom::before { background-position: center bottom; }
.high-performance-page .hp-ncaa-focal--center::before { background-position: center center; }
.high-performance-page .hp-ncaa.hp-ncaa-has-image::after {
  content: "";
  position: absolute; right: -10%; top: -20%;
  width: 60%; height: 140%;
  background: linear-gradient(90deg, rgba(11,37,80,1) 0%, rgba(11,37,80,0.4) 60%, rgba(11,37,80,0.85) 100%);
  z-index: 0;
  pointer-events: none;
}
.high-performance-page .hp-ncaa-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 96px; align-items: center;
}
.high-performance-page .hp-ncaa-stats {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid rgba(255,255,255,.18);
}
.high-performance-page .hp-n-stat {
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
  display: grid; grid-template-columns: auto 1fr;
  gap: 32px; align-items: center;
}
.high-performance-page .hp-n-stat-n {
  font-size: 88px; font-weight: 600;
  color: var(--hp-green-lt); line-height: 1;
  letter-spacing: -.02em; min-width: 220px;
}
.high-performance-page .hp-n-stat-n sup {
  font-size: 0.45em; vertical-align: top; line-height: 1;
  display: inline-block; margin-top: 14px;
  font-weight: 500;
}
.high-performance-page .hp-n-stat-l {
  font-size: 18px; font-weight: 500;
  color: rgba(255,255,255,.85); line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   INTERNATIONAL
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-international {
  background: var(--hp-bg-cream); padding: 140px 0;
}
.high-performance-page .hp-intl-intro {
  margin: 32px 0 0;
  max-width: 64ch;
  font-size: 18px; line-height: 1.65;
  color: var(--hp-text-soft); text-align: left;
}
/* Vertical header stack (eyebrow → h2 → intro → intl-actions). */
.high-performance-page .hp-intl-header {
  margin-bottom: 80px;
  max-width: 1280px;
}
.high-performance-page .hp-intl-header .hp-ey { margin-bottom: 20px; }
.high-performance-page .hp-intl-header .hp-h-section { margin: 0; }
/* Actions row beneath the header (primary CTA + quieter guide link siblings).
   Wraps to a column on narrow screens. */
.high-performance-page .hp-intl-actions {
  margin-top: 40px;
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
}
/* Pulsing "Accepting Applications Today" CTA: a normal hp-btn-green with an
   inline pulse dot on the left. Pulse uses a static center dot + two
   delay-offset ripples. */
.high-performance-page .hp-intl-cta {
  position: relative;
  padding-left: 22px;
  isolation: isolate;
}
.high-performance-page .hp-intl-cta-pulse {
  position: relative;
  display: inline-flex;
  width: 10px; height: 10px;
  align-items: center; justify-content: center;
  margin-right: 4px;
  pointer-events: none;
}
.high-performance-page .hp-intl-cta-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  position: relative; z-index: 2;
  animation: hp-intl-cta-dot 1.6s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none;
}
.high-performance-page .hp-intl-cta-pulse::before,
.high-performance-page .hp-intl-cta-pulse::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  animation: hp-intl-cta-ripple 1.6s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none;
}
.high-performance-page .hp-intl-cta-pulse::after { animation-delay: .8s; }
@keyframes hp-intl-cta-dot {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}
@keyframes hp-intl-cta-ripple {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(3);   opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .high-performance-page .hp-intl-cta-dot,
  .high-performance-page .hp-intl-cta-pulse::before,
  .high-performance-page .hp-intl-cta-pulse::after { animation: none; }
}
.high-performance-page .hp-intl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: 28px;
  row-gap: 16px;
  margin-bottom: 80px;
}
.high-performance-page .hp-intl-feature  { grid-column: 1; grid-row: 1; }
.high-performance-page .hp-intl-pillars  { grid-column: 2; grid-row: 1; }
/* Quiet guide link sits in row 2 col 1, directly under the feature image. */
.high-performance-page .hp-intl-guide-link-below {
  grid-column: 1; grid-row: 2;
  align-self: start;
  padding-left: 2px;
}
.high-performance-page .hp-intl-guide-link {
  font-size: 14px;
  color: var(--hp-text-soft);
}
.high-performance-page .hp-intl-guide-link svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transform: none !important;
}
.high-performance-page .hp-intl-guide-link:hover svg { transform: none !important; }
.high-performance-page .hp-intl-feature {
  position: relative; overflow: hidden;
  min-height: 540px; background: var(--hp-blue-dk);
}
.high-performance-page .hp-intl-feature > img,
.high-performance-page .hp-intl-feature > .hp-intl-feature-pic {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.high-performance-page .hp-intl-feature > .hp-intl-feature-pic img {
  width: 100%; height: 100%; object-fit: cover;
}
.high-performance-page .hp-intl-feature > img { object-fit: cover; }
/* International feature image focal point — drives object-position on both
   the direct <img> and the <picture> > <img> variants the partial may emit. */
.high-performance-page .hp-intl-feature.hp-intl-focal--top    > img,
.high-performance-page .hp-intl-feature.hp-intl-focal--top    > .hp-intl-feature-pic img { object-position: center 0%; }
.high-performance-page .hp-intl-feature.hp-intl-focal--upper  > img,
.high-performance-page .hp-intl-feature.hp-intl-focal--upper  > .hp-intl-feature-pic img { object-position: center 25%; }
.high-performance-page .hp-intl-feature.hp-intl-focal--center > img,
.high-performance-page .hp-intl-feature.hp-intl-focal--center > .hp-intl-feature-pic img { object-position: center 50%; }
.high-performance-page .hp-intl-feature.hp-intl-focal--lower  > img,
.high-performance-page .hp-intl-feature.hp-intl-focal--lower  > .hp-intl-feature-pic img { object-position: center 75%; }
.high-performance-page .hp-intl-feature.hp-intl-focal--bottom > img,
.high-performance-page .hp-intl-feature.hp-intl-focal--bottom > .hp-intl-feature-pic img { object-position: center 100%; }
.high-performance-page .hp-intl-feature-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,23,41,.05) 0%, rgba(11,23,41,.85) 100%);
}
.high-performance-page .hp-intl-feature-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px; color: #fff;
}
.high-performance-page .hp-intl-feature-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--hp-green-lt); margin-bottom: 18px;
}
.high-performance-page .hp-intl-feature-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hp-green-lt); flex-shrink: 0;
}
.high-performance-page .hp-intl-feature-title {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 600; line-height: 1.2;
  letter-spacing: -.005em; color: #fff; max-width: 22ch;
}
.high-performance-page .hp-intl-feature-title em {
  font-style: italic; color: var(--hp-green-lt); font-weight: 500;
}
/* Auto-rows lets the container hold any number of pillars without
   needing the row template updated each time a pillar is added/removed
   (was hardcoded to repeat(3, 1fr) when the section originally shipped
   with three pillars; the design now uses four). Each pillar's height is
   determined by its own content. */
.high-performance-page .hp-intl-pillars {
  display: grid; grid-auto-rows: auto;
  gap: 0; background: #fff;
  outline: 1px solid var(--hp-border); outline-offset: -1px;
}
.high-performance-page .hp-intl-pillar {
  display: grid; grid-template-columns: 88px 1fr;
  gap: 24px; align-items: center;
  padding: 32px 36px;
  border-bottom: 1px solid var(--hp-border);
  position: relative; transition: background .2s;
}
.high-performance-page .hp-intl-pillar:last-child { border-bottom: 0; }
.high-performance-page .hp-intl-pillar:hover { background: var(--hp-bg-soft); }
.high-performance-page .hp-intl-pillar::before {
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background .2s;
}
.high-performance-page .hp-intl-pillar:hover::before { background: var(--hp-green); }
.high-performance-page .hp-intl-pillar-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hp-bg-cream); border: 1px solid var(--hp-border);
}
.high-performance-page .hp-intl-pillar-icon svg {
  width: 26px; height: 26px;
  stroke: var(--hp-blue-dk); stroke-width: 1.5; fill: none;
}
.high-performance-page .hp-intl-pillar-title {
  font-size: 16px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--hp-text); margin-bottom: 8px;
}
.high-performance-page .hp-intl-pillar-body {
  font-size: 14px; line-height: 1.6; color: var(--hp-text-soft);
}
.high-performance-page .hp-intl-stories-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-bottom: 32px;
  padding-top: 56px; border-top: 1px solid var(--hp-border);
}
.high-performance-page .hp-intl-stories {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.high-performance-page .hp-story-card {
  background: #fff;
  outline: 1px solid var(--hp-border); outline-offset: -1px;
  border: 2px solid transparent;
  transition: outline-color .2s, border-color .2s, transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.high-performance-page .hp-story-card:hover {
  border-color: var(--hp-green-lt); outline-color: transparent;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(28,28,28,0.14);
}
.high-performance-page .hp-story-thumb {
  aspect-ratio: 16/10; overflow: hidden; position: relative;
  background: var(--hp-blue-dk);
  border-bottom: 3px solid var(--hp-green-lt);
}
.high-performance-page .hp-story-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85); transition: transform .6s ease;
}
.high-performance-page .hp-story-card:hover .hp-story-thumb img { transform: scale(1.05); }
.high-performance-page .hp-story-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,23,41,.15) 0%, rgba(11,23,41,.55) 100%);
}
.high-performance-page .hp-story-copy {
  padding: 24px 24px 28px;
  display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.high-performance-page .hp-story-tag {
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--hp-green);
}
.high-performance-page .hp-story-title {
  font-size: 20px; font-weight: 600; line-height: 1.25;
  color: var(--hp-text);
}

/* ════════════════════════════════════════════════════════════
   FACILITIES
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-facilities {
  background: var(--hp-bg); padding: 140px 0;
}
.high-performance-page .hp-fac-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.high-performance-page .hp-fac-tile {
  position: relative; aspect-ratio: 16/10;
  overflow: hidden; background: var(--hp-blue-dk);
}
.high-performance-page .hp-fac-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease;
}
/* Per-tile focal point override. */
.high-performance-page .hp-fac-tile.hp-fac-focal--top    img { object-position: center 0%; }
.high-performance-page .hp-fac-tile.hp-fac-focal--upper  img { object-position: center 25%; }
.high-performance-page .hp-fac-tile.hp-fac-focal--center img { object-position: center 50%; }
.high-performance-page .hp-fac-tile.hp-fac-focal--lower  img { object-position: center 75%; }
.high-performance-page .hp-fac-tile.hp-fac-focal--bottom img { object-position: center 100%; }
.high-performance-page .hp-fac-tile:hover img { transform: scale(1.04); }
.high-performance-page .hp-fac-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,37,80,0) 40%, rgba(11,37,80,0.85) 100%);
}
.high-performance-page .hp-fac-chip {
  position: absolute; top: 24px; left: 24px;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.95); padding: 8px 14px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--hp-text);
}
.high-performance-page .hp-fac-chip-dot {
  width: 8px; height: 8px;
  background: var(--hp-green); border-radius: 50%; flex-shrink: 0;
}
.high-performance-page .hp-fac-body {
  position: absolute; inset: auto 0 0 0;
  padding: 32px; color: #fff;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
}
.high-performance-page .hp-fac-title {
  font-size: 36px; font-weight: 600;
  line-height: 1.05; letter-spacing: -.01em; margin-bottom: 8px;
}
.high-performance-page .hp-fac-meta { font-size: 14px; color: rgba(255,255,255,.78); }
.high-performance-page .hp-fac-link {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.high-performance-page .hp-fac-link:hover { background: var(--hp-green); border-color: var(--hp-green); }
.high-performance-page .hp-fac-link svg { width: 18px; height: 18px; stroke: #fff; fill: none; }

/* ════════════════════════════════════════════════════════════
   STUDENT PATHWAY
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-pathway {
  background: var(--hp-bg-soft); padding: 140px 0;
}
.high-performance-page .hp-pathway-header {
  text-align: center; max-width: 720px; margin: 0 auto 80px;
}
.high-performance-page .hp-pathway-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center; margin-bottom: 64px;
}
.high-performance-page .hp-pathway-row:last-child { margin-bottom: 0; }
.high-performance-page .hp-pathway-row-reverse > :first-child { order: 2; }
.high-performance-page .hp-pathway-img {
  aspect-ratio: 4/3; overflow: hidden;
}
.high-performance-page .hp-pathway-img img { width: 100%; height: 100%; object-fit: cover; }
/* Per-row image focal override. */
.high-performance-page .hp-pathway-row.hp-pathway-focal--top    .hp-pathway-img img { object-position: center 0%; }
.high-performance-page .hp-pathway-row.hp-pathway-focal--upper  .hp-pathway-img img { object-position: center 25%; }
.high-performance-page .hp-pathway-row.hp-pathway-focal--center .hp-pathway-img img { object-position: center 50%; }
.high-performance-page .hp-pathway-row.hp-pathway-focal--lower  .hp-pathway-img img { object-position: center 75%; }
.high-performance-page .hp-pathway-row.hp-pathway-focal--bottom .hp-pathway-img img { object-position: center 100%; }
.high-performance-page .hp-pathway-content .hp-h-card {
  font-size: 40px; font-weight: 600;
  line-height: 1.05; letter-spacing: -.015em;
}
.high-performance-page .hp-pathway-content p {
  color: var(--hp-text-soft); font-size: 17px; line-height: 1.7;
  margin-bottom: 24px;
}
.high-performance-page .hp-pathway-content > .hp-btn-text { margin-top: 0; }

/* Divider between the academics pathway rows and the value-card rail
   (v2 merges v1's separate "Value Cards" section into Student Life). */
.high-performance-page .hp-student-life-rule {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin: 96px auto 56px;
  max-width: 920px;
}
.high-performance-page .hp-student-life-rule::before,
.high-performance-page .hp-student-life-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--hp-border);
}
.high-performance-page .hp-student-life-rule span {
  padding: 0 20px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--hp-text-soft);
}

/* ════════════════════════════════════════════════════════════
   MENTAL PERFORMANCE
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-mental {
  background: var(--hp-bg); padding: 140px 0;
}
.high-performance-page .hp-mental-grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 80px; align-items: center;
}
.high-performance-page .hp-mental-photo { aspect-ratio: 3/4; overflow: hidden; }
/* Support both legacy direct <img> and new <picture class="hp-mental-photo-pic"> markup */
.high-performance-page .hp-mental-photo > img,
.high-performance-page .hp-mental-photo > .hp-mental-photo-pic {
  width: 100%; height: 100%;
}
.high-performance-page .hp-mental-photo > img,
.high-performance-page .hp-mental-photo > .hp-mental-photo-pic img {
  object-fit: cover;
  object-position: center 30%;
}
/* Per-page focal override (modifier emitted only when editor picks non-default). */
.high-performance-page .hp-mental-photo.hp-mental-focal--top    > img,
.high-performance-page .hp-mental-photo.hp-mental-focal--top    > .hp-mental-photo-pic img { object-position: center 0%; }
.high-performance-page .hp-mental-photo.hp-mental-focal--upper  > img,
.high-performance-page .hp-mental-photo.hp-mental-focal--upper  > .hp-mental-photo-pic img { object-position: center 25%; }
.high-performance-page .hp-mental-photo.hp-mental-focal--center > img,
.high-performance-page .hp-mental-photo.hp-mental-focal--center > .hp-mental-photo-pic img { object-position: center 50%; }
.high-performance-page .hp-mental-photo.hp-mental-focal--lower  > img,
.high-performance-page .hp-mental-photo.hp-mental-focal--lower  > .hp-mental-photo-pic img { object-position: center 75%; }
.high-performance-page .hp-mental-photo.hp-mental-focal--bottom > img,
.high-performance-page .hp-mental-photo.hp-mental-focal--bottom > .hp-mental-photo-pic img { object-position: center 100%; }
.high-performance-page .hp-mental-staff {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-top: 32px;
}
.high-performance-page .hp-mental-staff-card {
  background: #fff; border: 1px solid var(--hp-border);
  padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
  border-left-width: 3px;
}
.high-performance-page .hp-mental-staff-card--blue { border-left-color: var(--hp-blue); }
.high-performance-page .hp-mental-staff-card--green { border-left-color: var(--hp-green); }
.high-performance-page .hp-mental-staff-avatar {
  width: 72px; height: 72px; flex: 0 0 72px;
  border-radius: 50%;
  background: var(--hp-bg-soft); color: var(--hp-blue-dk);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; letter-spacing: .04em;
  overflow: hidden;
}
.high-performance-page .hp-mental-staff-card--green .hp-mental-staff-avatar {
  background: rgba(0,138,82,.1); color: var(--hp-green);
}
/* When a photo is uploaded the avatar shows the image; otherwise the
   initials sit in the same tinted circle as the fallback. */
.high-performance-page .hp-mental-staff-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.high-performance-page .hp-mental-staff-name {
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--hp-text);
}
.high-performance-page .hp-mental-staff-role {
  font-size: 12px; color: var(--hp-text-soft); margin-top: 3px; line-height: 1.4;
}
.high-performance-page .hp-mental-tags {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0;
}
.high-performance-page .hp-mental-tags li {
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  color: var(--hp-text);
  background: var(--hp-bg-soft); border: 1px solid var(--hp-border);
  padding: 7px 12px;
}

/* ════════════════════════════════════════════════════════════
   VALUE-ADDS
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-value {
  background: var(--hp-bg-cream); padding: 140px 0;
}
.high-performance-page .hp-val-rail {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; margin-top: 56px;
}
.high-performance-page .hp-val-card {
  background: #fff; display: flex; flex-direction: column;
  outline: 1px solid var(--hp-border); outline-offset: -1px;
  border: 2px solid transparent;
  transition: outline-color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.high-performance-page .hp-val-card:hover {
  border-color: var(--hp-green-lt); outline-color: transparent;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(28,28,28,0.14);
}
.high-performance-page .hp-val-thumb { aspect-ratio: 16/10; overflow: hidden; }
.high-performance-page .hp-val-thumb img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease;
}
.high-performance-page .hp-val-card:hover .hp-val-thumb img { transform: scale(1.05); }
.high-performance-page .hp-val-body {
  padding: 26px 24px 28px;
  display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.high-performance-page .hp-val-icon {
  width: 40px; height: 40px;
  background: var(--hp-green-mist);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.high-performance-page .hp-val-icon svg {
  width: 20px; height: 20px; stroke: var(--hp-green); fill: none; stroke-width: 2;
}
.high-performance-page .hp-val-title {
  font-size: 19px; font-weight: 600; color: var(--hp-text); line-height: 1.25;
}
.high-performance-page .hp-val-desc {
  font-size: 14px; color: var(--hp-text-soft); line-height: 1.6; flex: 1;
}

/* ════════════════════════════════════════════════════════════
   CURRENT PLAYERS
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-current-players {
  background: var(--hp-bg); padding: 140px 0;
}
.high-performance-page .hp-players-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.high-performance-page .hp-player-card {
  position: relative; background: var(--hp-bg-soft);
  display: grid; grid-template-columns: 1fr 1.1fr;
  overflow: hidden;
  outline: 1px solid var(--hp-border); outline-offset: -1px;
  border: 2px solid transparent;
  transition: outline-color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.high-performance-page .hp-player-card:hover {
  border-color: var(--hp-green-lt); outline-color: transparent;
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -20px rgba(28,28,28,0.16);
}
/* The image cell gets an explicit aspect-ratio so card height is predictable
   regardless of the uploaded photo's dimensions. The default is square (1:1);
   editors can override per-page via the `hp_players_aspect` ACF field, which
   emits a `.hp-players-aspect--{value}` modifier on the section. */
.high-performance-page .hp-player-img {
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.high-performance-page .hp-players-aspect--4-5 .hp-player-img { aspect-ratio: 4 / 5; }
.high-performance-page .hp-players-aspect--3-4 .hp-player-img { aspect-ratio: 3 / 4; }
.high-performance-page .hp-players-aspect--2-3 .hp-player-img { aspect-ratio: 2 / 3; }
.high-performance-page .hp-player-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
}
/* Per-player focal-point modifiers — emitted as `hp-player-focal--{top|center|bottom}`
   on each `<article>`. Two-class selector beats the base `.hp-player-img img`
   (one class) on specificity, so the override wins at every breakpoint
   including the stacked tablet/mobile layouts where it matters most. */
.high-performance-page .hp-player-card.hp-player-focal--top    .hp-player-img img { object-position: center 0%; }
.high-performance-page .hp-player-card.hp-player-focal--upper  .hp-player-img img { object-position: center 25%; }
.high-performance-page .hp-player-card.hp-player-focal--center .hp-player-img img { object-position: center 50%; }
.high-performance-page .hp-player-card.hp-player-focal--lower  .hp-player-img img { object-position: center 75%; }
.high-performance-page .hp-player-card.hp-player-focal--bottom .hp-player-img img { object-position: center 100%; }
.high-performance-page .hp-player-body {
  padding: 32px 28px; display: flex; flex-direction: column; gap: 14px;
}
.high-performance-page .hp-player-tag {
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--hp-green);
}
.high-performance-page .hp-player-name {
  font-size: 28px; font-weight: 600; line-height: 1.05; color: var(--hp-text);
}
.high-performance-page .hp-player-meta { font-size: 14px; color: var(--hp-text-soft); }
.high-performance-page .hp-player-stats {
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--hp-border);
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.high-performance-page .hp-player-stats strong {
  display: block; font-size: 22px; font-weight: 600;
  color: var(--hp-blue-dk); line-height: 1;
}
.high-performance-page .hp-player-stats span {
  display: block; margin-top: 4px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--hp-text-soft);
}

/* ════════════════════════════════════════════════════════════
   ALUMNI NEWS
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-alumni-news {
  background: var(--hp-bg-soft);
  padding: 100px 0 140px;
}
/* Design spec: news heading is visually quieter than a standard section h2. */
.high-performance-page .hp-alumni-news .hp-h-section {
  font-size: clamp(32px, calc(3vw + 12px), 52px);
}
.high-performance-page .hp-news-list {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  max-width: 880px; margin: 0 auto;
}
.high-performance-page .hp-news-item {
  display: grid; grid-template-columns: 80px 1fr auto;
  gap: 24px; align-items: center;
  padding: 22px 4px; border-bottom: 1px solid var(--hp-border);
  transition: padding .2s ease;
}
.high-performance-page .hp-news-item:hover { padding-left: 16px; }
.high-performance-page .hp-news-date {
  font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--hp-green);
}
.high-performance-page .hp-news-title {
  font-size: 18px; font-weight: 500;
  color: var(--hp-text); line-height: 1.3;
}
.high-performance-page .hp-news-arrow {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hp-border); color: var(--hp-text);
  transition: background .2s, color .2s, border-color .2s;
}
.high-performance-page .hp-news-item:hover .hp-news-arrow {
  background: var(--hp-blue-dk); color: #fff; border-color: var(--hp-blue-dk);
}
.high-performance-page .hp-news-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ════════════════════════════════════════════════════════════
   CONTACT
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-contact {
  background: var(--hp-blue-dk); color: #fff;
  padding: 160px 0 140px;
  position: relative; overflow: hidden;
  text-align: center;
}
/* Optional faded background image — only renders when ACF `hp_contact_bg_image`
   is set (the `.hp-contact-has-image` modifier and `--hp-contact-bg` CSS
   variable are emitted on the section). The ::before holds the photo at 20%
   opacity, slightly desaturated; the ::after applies a navy radial vignette
   on top so the headline + form stay legible. */
.high-performance-page .hp-contact.hp-contact-has-image::before {
  content: "";
  position: absolute;
  /* Inset from each edge so the section's solid navy frames the image
     instead of bleeding to the viewport edges. Responsive via clamp:
     mobile gets ~24/20px frame; wide desktops get ~60/100px frame. */
  inset: clamp(24px, 4vw, 60px) clamp(20px, 6vw, 100px);
  background-image: var(--hp-contact-bg);
  background-size: cover;
  background-repeat: no-repeat;
  /* `background-position` is intentionally set by the focal-point modifier
     rules below, NOT here — putting it on this base rule would win on
     specificity and prevent `--top` / `--bottom` from ever applying. */
  /* Feather all four edges so the image blends seamlessly into the navy
     frame instead of cutting off at a hard line. Two linear gradients are
     intersected — opaque in the inner ~84% rectangle, transparent at the
     outer ~8-10% bands. Browsers without mask-composite support fall back
     to a hard-edged inset (still acceptable). */
  mask-image:
    linear-gradient(to right,  transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to right,  transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  opacity: 0.35;
  filter: grayscale(0.5);
  pointer-events: none;
}
/* Focal point modifiers — anchor the image so the most important part of the
   subject stays inside the visible area after `cover` cropping. Five-position
   selector matches the standardized v2 focal pattern (top / upper / center /
   lower / bottom). Background-position is used because the image is emitted
   as a CSS background on a ::before pseudo, not as an <img>. */
.high-performance-page .hp-contact-focal--top::before    { background-position: center 0%; }
.high-performance-page .hp-contact-focal--upper::before  { background-position: center 25%; }
.high-performance-page .hp-contact-focal--center::before { background-position: center 50%; }
.high-performance-page .hp-contact-focal--lower::before  { background-position: center 75%; }
.high-performance-page .hp-contact-focal--bottom::before { background-position: center 100%; }
/* Visibility modifiers — override the default 0.35 opacity. Selectors include
   `.hp-contact-has-image` to match the base rule's specificity (0,0,2,1) so
   these reliably override `opacity: 0.35` in the cascade. Same trap that
   affected the focal modifiers earlier. */
.high-performance-page .hp-contact.hp-contact-has-image.hp-contact-opacity--subtle::before { opacity: 0.18; }
.high-performance-page .hp-contact.hp-contact-has-image.hp-contact-opacity--light::before  { opacity: 0.26; }
.high-performance-page .hp-contact.hp-contact-has-image.hp-contact-opacity--strong::before { opacity: 0.50; }
.high-performance-page .hp-contact.hp-contact-has-image.hp-contact-opacity--bold::before   { opacity: 0.70; }
/* Rich — between Bold and Vivid. Bumps opacity higher and starts to pull
   the gradient back, but keeps more grayscale than Vivid for a slightly
   more muted feel. */
.high-performance-page .hp-contact.hp-contact-has-image.hp-contact-opacity--rich::before {
  opacity: 0.78;
  filter: grayscale(0.4);
}
.high-performance-page .hp-contact.hp-contact-has-image.hp-contact-opacity--rich::after {
  background: radial-gradient(ellipse at center, rgba(11,37,80,0.58) 0%, rgba(11,37,80,0.92) 75%);
}
/* Vivid — image at near-full strength, slightly less desaturation, gradient
   pulled back so the photo carries more of the visual weight. */
.high-performance-page .hp-contact.hp-contact-has-image.hp-contact-opacity--vivid::before {
  opacity: 0.85;
  filter: grayscale(0.3);
}
.high-performance-page .hp-contact.hp-contact-has-image.hp-contact-opacity--vivid::after {
  background: radial-gradient(ellipse at center, rgba(11,37,80,0.45) 0%, rgba(11,37,80,0.85) 75%);
}
/* Showcase — photo treated as a hero image. Full opacity, minimal grayscale,
   the navy gradient is now just enough tint to keep the white headline
   readable. Use for dramatic action shots where the image should dominate. */
.high-performance-page .hp-contact.hp-contact-has-image.hp-contact-opacity--showcase::before {
  opacity: 1;
  filter: grayscale(0.15);
}
.high-performance-page .hp-contact.hp-contact-has-image.hp-contact-opacity--showcase::after {
  background: radial-gradient(ellipse at center, rgba(11,37,80,0.30) 0%, rgba(11,37,80,0.70) 75%);
}
.high-performance-page .hp-contact::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(11,37,80,0.7) 0%, rgba(11,37,80,1) 75%);
  pointer-events: none;
}
.high-performance-page .hp-contact > * { position: relative; z-index: 1; }
.high-performance-page .hp-contact-eyebrow {
  font-size: 13px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--hp-green-lt); margin-bottom: 28px;
}
.high-performance-page .hp-contact-title {
  font-size: clamp(56px, 8vw, 128px);
  font-weight: 600; line-height: 0.95;
  letter-spacing: -.02em; color: #fff; margin: 0;
}
.high-performance-page .hp-contact-title em {
  font-style: italic; color: var(--hp-green-lt); font-weight: 500;
}
.high-performance-page .hp-contact-sub {
  margin: 36px auto 48px;
  font-size: 19px; color: rgba(255,255,255,.78);
  max-width: 56ch; line-height: 1.65;
}
.high-performance-page .hp-contact-btns {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.high-performance-page .hp-contact-row {
  margin-top: 64px; padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; justify-content: center; gap: 64px; flex-wrap: wrap;
}
/* Stacked, centered layout — icon on top, label below, value at the bottom.
   Each item is a column flex container so children center on the cross-axis;
   text-align: center handles the multi-line value (e.g. address) inside. */
.high-performance-page .hp-contact-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  text-align: center;
  flex: 0 1 240px;
}
.high-performance-page .hp-contact-item svg {
  width: 32px; height: 32px;
  stroke: var(--hp-green-lt); fill: none;
  stroke-width: 1.75; flex-shrink: 0;
}
.high-performance-page .hp-contact-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.high-performance-page .hp-contact-value {
  font-size: 18px; font-weight: 500;
  color: #fff; margin-top: 6px;
  line-height: 1.45;
}
.high-performance-page .hp-contact-value a {
  color: #fff;
  transition: color .15s ease;
}
.high-performance-page .hp-contact-value a:hover,
.high-performance-page .hp-contact-value a:focus-visible {
  color: var(--hp-green-lt);
}

/* Contact form */
.high-performance-page .hp-cta-form {
  margin: 64px auto 0; max-width: 720px;
  background: #fff; color: var(--hp-text);
  padding: 48px clamp(28px, 5vw, 56px);
  text-align: left; border-radius: 2px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.5);
}
.high-performance-page .hp-form-hed {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 28px; color: var(--hp-text);
  padding-bottom: 18px; border-bottom: 2px solid var(--hp-green);
}
.high-performance-page .hp-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.high-performance-page .hp-fw { margin-top: 18px; }
.high-performance-page .hp-fl {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--hp-text-soft); margin-bottom: 8px;
}
/* ════════════════════════════════════════════════════════════
   FORMIDABLE FORMS — High Performance contact form only.
   Scoped to .high-performance-page .hp-cta-form so no other
   Formidable forms on the site are affected.

   HP form aesthetic: SQUARE corners (border-radius: 0) — different
   from Private Lessons which uses pill-shaped fields. Both use the
   same defensive `!important` approach to defeat Formidable's
   built-in styles.

   Extra safety: also recommended to set CSS class "hp-contact-form"
   in Formidable → Form Settings → CSS Class.
════════════════════════════════════════════════════════════ */

/* Box-sizing */
.high-performance-page .hp-cta-form,
.high-performance-page .hp-cta-form * { box-sizing: border-box; }

/* Form shell — neutralize Formidable's default width / margin */
.high-performance-page .hp-cta-form .frm-show-form,
.high-performance-page .hp-cta-form form {
  font-family: "Barlow", system-ui, sans-serif;
  color: var(--hp-text);
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* ── Field grid ─────────────────────────────────────────── */
/* 2 columns on desktop. The single direct-child <fieldset>
   spans both columns so the inner sub-grid gets full width. */
.high-performance-page .hp-cta-form .frm_form_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.high-performance-page .hp-cta-form .frm_form_fields > fieldset {
  grid-column: 1 / -1;
}
/* position:relative scopes the hidden Select2 accessible <select>
   so its absolute width:100% resolves to the field, not the viewport. */
.high-performance-page .hp-cta-form .frm_form_field {
  position: relative;
}
/* Full-width fields: textarea, message, captcha, submit row, selects */
.high-performance-page .hp-cta-form .frm_form_field.frm_full,
.high-performance-page .hp-cta-form .frm_form_field.frm_section_heading,
.high-performance-page .hp-cta-form .frm_submit,
.high-performance-page .hp-cta-form .frm_form_field:has(textarea),
.high-performance-page .hp-cta-form .frm_form_field:has(select),
.high-performance-page .hp-cta-form .frm_form_field:has(.cf-turnstile),
.high-performance-page .hp-cta-form .frm_form_field:has([class*="turnstile"]) {
  grid-column: 1 / -1;
}

/* ── Labels ─────────────────────────────────────────────── */
.high-performance-page .hp-cta-form .frm_primary_label,
.high-performance-page .hp-cta-form label {
  font-family: "Barlow", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hp-text-soft);
  display: block;
  margin-bottom: 8px;
}

/* ── Inputs & native selects ────────────────────────────── */
.high-performance-page .hp-cta-form input[type="text"],
.high-performance-page .hp-cta-form input[type="email"],
.high-performance-page .hp-cta-form input[type="tel"],
.high-performance-page .hp-cta-form input[type="number"],
.high-performance-page .hp-cta-form input[type="url"],
.high-performance-page .hp-cta-form select {
  font-family: "Barlow", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  padding: 14px 16px !important;
  border-radius: 0 !important;
  border: 1px solid var(--hp-border) !important;
  background: #fff !important;
  color: var(--hp-text) !important;
  width: 100% !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
/* Restore the native dropdown chevron (since we removed appearance). */
.high-performance-page .hp-cta-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23707070' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 44px !important;
}

/* ── intl-tel-input phone wrapper ───────────────────────── */
.high-performance-page .hp-cta-form .iti { width: 100%; display: block; }
.high-performance-page .hp-cta-form .iti input[type="tel"] { padding-left: 54px !important; }

/* ── Textarea ───────────────────────────────────────────── */
.high-performance-page .hp-cta-form textarea {
  font-family: "Barlow", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  padding: 14px 16px !important;
  border-radius: 0 !important;
  border: 1px solid var(--hp-border) !important;
  background: #fff !important;
  color: var(--hp-text) !important;
  width: 100% !important;
  min-height: 120px;
  resize: vertical;
  line-height: 1.55;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* ── Focus states ───────────────────────────────────────── */
.high-performance-page .hp-cta-form input:focus,
.high-performance-page .hp-cta-form select:focus,
.high-performance-page .hp-cta-form textarea:focus {
  outline: none !important;
  border-color: var(--hp-green) !important;
  box-shadow: 0 0 0 3px rgba(106,163,8,.18) !important;
}

/* ── Placeholders ───────────────────────────────────────── */
.high-performance-page .hp-cta-form input::placeholder,
.high-performance-page .hp-cta-form textarea::placeholder {
  color: #a8a8a8;
}

/* ── Submit button — design = square green, uppercase ──── */
/* The submit row (.frm_submit.frm_flex) is a flex container with
   `align-items: center` and `gap: 2%`. Formidable injects hidden helpers
   inside it (honeypot inputs, AJAX loading spinner, status placeholders)
   that have non-zero dimensions even when invisible — `align-items: center`
   then pushes the visible button to the vertical center, so the bottom
   gap appears larger than the top. Pin alignment to flex-start and zero
   the helpers' dimensions so the button sits flush at the top of the row. */
.high-performance-page .hp-cta-form .frm_submit {
  margin-top: 0 !important;
  align-items: flex-start !important;
}
.high-performance-page .hp-cta-form .frm_submit > input[type="hidden"],
.high-performance-page .hp-cta-form .frm_submit .frm_ajax_loading,
.high-performance-page .hp-cta-form .frm_submit .frm_loading_now,
.high-performance-page .hp-cta-form .frm_submit .frm_no_panel,
.high-performance-page .hp-cta-form .frm_submit .frm_loading_form {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
.high-performance-page .hp-cta-form .frm_submit button,
.high-performance-page .hp-cta-form .frm_submit input[type="submit"],
.high-performance-page .hp-cta-form .frm_button_submit {
  /* Zero the button's own margin-top — the parent grid `gap` on
     .frm_form_fields handles spacing between the captcha row and the
     submit row, and align-items: flex-start (set above) pins the button
     to the top of its flex container. Adding 24px here would compound. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Barlow", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 16px 32px !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: var(--hp-green) !important;
  color: #fff !important;
  cursor: pointer;
  line-height: 1 !important;
  width: auto !important;
  transition: background .2s ease, transform .2s ease;
}
.high-performance-page .hp-cta-form .frm_submit button:hover,
.high-performance-page .hp-cta-form .frm_submit input[type="submit"]:hover,
.high-performance-page .hp-cta-form .frm_button_submit:hover {
  background: #587f1e !important;
  color: #fff !important;
  transform: translateY(-1px);
}
/* Arrow icon after the button label — matches the design's manual
   <button>Send Message <svg.../></button> pattern. The SVG is inlined as
   a data URI on a ::after pseudo-element so it works without modifying
   the Formidable shortcode output. The arrow translates 3px on hover,
   matching the .hp-btn pattern used elsewhere on the page. */
.high-performance-page .hp-cta-form .frm_submit button::after,
.high-performance-page .hp-cta-form .frm_button_submit::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform .18s ease;
  vertical-align: middle;
}
.high-performance-page .hp-cta-form .frm_submit button:hover::after,
.high-performance-page .hp-cta-form .frm_button_submit:hover::after {
  transform: translateX(3px);
}
/* Manual button (.hp-form-btn) — the design's reference HTML form uses
   <button class="hp-form-btn"> directly without a flex wrapper, so it
   needs margin-top: 24px to space itself from the textarea above.
   Formidable's button is handled by the rules above; this is a fallback
   for any hand-rendered form on the page. */
.high-performance-page .hp-form-btn {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--hp-green);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;
  transition: background .2s ease, transform .2s ease;
}
.high-performance-page .hp-form-btn:hover {
  background: #587f1e;
  color: #fff;
  transform: translateY(-1px);
}
.high-performance-page .hp-form-btn svg {
  width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2;
}

/* ── Validation errors ──────────────────────────────────── */
.high-performance-page .hp-cta-form .frm_error,
.high-performance-page .hp-cta-form .frm_error_style {
  font-family: "Barlow", sans-serif;
  font-size: 13px;
  color: var(--hp-red);
  margin-top: 6px;
}
.high-performance-page .hp-cta-form input.frm_invalid,
.high-performance-page .hp-cta-form textarea.frm_invalid,
.high-performance-page .hp-cta-form select.frm_invalid {
  border-color: var(--hp-red) !important;
  box-shadow: 0 0 0 3px rgba(199,22,22,.10) !important;
}

/* ── Success / confirmation message ─────────────────────── */
.high-performance-page .hp-cta-form .frm_message,
.high-performance-page .hp-cta-form .frm_message p {
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  color: var(--hp-green);
  background: var(--hp-green-mist);
  border-left: 3px solid var(--hp-green);
  padding: 14px 18px;
  margin: 0;
}

/* ── Required asterisk + helper text ────────────────────── */
.high-performance-page .hp-cta-form .frm_required {
  color: var(--hp-red);
  margin-left: 2px;
}
.high-performance-page .hp-cta-form .frm_description,
.high-performance-page .hp-cta-form .frm_help {
  font-family: "Barlow", sans-serif;
  font-size: 13px;
  color: var(--hp-text-soft);
  margin-top: 5px;
}

/* ── Cloudflare Turnstile ───────────────────────────────── */
/* Same structural treatment as Private Lessons — widget sits in
   its own full-width row, no extra top margin. */
.high-performance-page .hp-cta-form .cf-turnstile,
.high-performance-page .hp-cta-form [class*="turnstile"] {
  margin-top: 0 !important;
}

/* ── Select2 overrides — match HP's square aesthetic ────── */
/* main.js runs $(".frm_forms select").select2() globally;
   these rules style the replacement widget. PL uses pill shape;
   HP uses square corners to match the design. */

/* Belt-and-suspenders: clamp the hidden accessible <select> so
   its position:absolute width:100% can't overflow the viewport. */
.high-performance-page .hp-cta-form .select2-hidden-accessible {
  width: 1px !important;
}
.high-performance-page .hp-cta-form .select2-container {
  width: 100% !important;
  display: block !important;
}
.high-performance-page .hp-cta-form .select2-container .select2-selection--single {
  height: auto !important;
  padding: 14px 44px 14px 16px !important;
  border-radius: 0 !important;
  border: 1px solid var(--hp-border) !important;
  background: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: "Barlow", sans-serif !important;
}
.high-performance-page .hp-cta-form .select2-container .select2-selection__rendered {
  font-family: "Barlow", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--hp-text) !important;
  line-height: 1.4 !important;
  padding: 0 !important;
}
.high-performance-page .hp-cta-form .select2-container .select2-selection__placeholder {
  color: #a8a8a8 !important;
}
.high-performance-page .hp-cta-form .select2-container .select2-selection__arrow {
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  height: auto !important;
}
.high-performance-page .hp-cta-form .select2-container .select2-selection__arrow b {
  border-color: #707070 transparent transparent transparent !important;
  border-style: solid !important;
  border-width: 5px 4px 0 !important;
  margin: 0 !important;
  position: static !important;
}
.high-performance-page .hp-cta-form .select2-container--focus .select2-selection--single,
.high-performance-page .hp-cta-form .select2-container--open .select2-selection--single {
  border-color: var(--hp-green) !important;
  box-shadow: 0 0 0 3px rgba(106,163,8,.18) !important;
}

/* ── Mobile (≤640px): single column ─────────────────────── */
@media (max-width: 640px) {
  .high-performance-page .hp-cta-form .frm_form_fields {
    grid-template-columns: 1fr;
  }
  .high-performance-page .hp-cta-form .frm_form_field:has(select) {
    grid-column: 1;
  }
}

/* ── Very small phones (≤380px) — Turnstile is 300px fixed ── */
@media (max-width: 380px) {
  .high-performance-page .hp-cta-form .cf-turnstile,
  .high-performance-page .hp-cta-form [class*="turnstile"] {
    transform: scale(0.82);
    transform-origin: left center;
  }
}

/* ════════════════════════════════════════════════════════════
   SPACING OVERRIDE UTILITIES (Section Settings)
   Applied via ACF select → hp-sec--{tight|none} on section element.
   `!important` defeats each module's own per-section padding (e.g.
   `.hp-philosophy { padding: 140px 0 }`) without rewriting it.
   Defaults remain untouched when normal spacing is selected.
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-sec--tight {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}
.high-performance-page .hp-sec--none {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 1024px) {
  .high-performance-page .hp-sec--tight {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}
@media (max-width: 640px) {
  .high-performance-page .hp-sec--tight {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   BACKGROUND OVERRIDE UTILITIES
   Applied via ACF select → hp-bg--{value} on section element.
   Defaults remain untouched when no override is set.
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-bg--white { background: var(--hp-bg)      !important; }
.high-performance-page .hp-bg--soft  { background: var(--hp-bg-soft)  !important; }
.high-performance-page .hp-bg--grey  { background: var(--hp-bg-grey)  !important; }
.high-performance-page .hp-bg--cream { background: var(--hp-bg-cream) !important; }
.high-performance-page .hp-bg--dark  {
  background: var(--hp-blue-dk) !important;
  color: #fff !important;
}

/* Text utilities that need re-tinting when a light section is forced dark */
.high-performance-page .hp-bg--dark .hp-ey          { color: var(--hp-green-lt); }
.high-performance-page .hp-bg--dark .hp-ey::before  { background: var(--hp-green-lt); }
.high-performance-page .hp-bg--dark .hp-h-section   { color: #fff; }
.high-performance-page .hp-bg--dark .hp-h-section em { color: var(--hp-green-lt); }
.high-performance-page .hp-bg--dark .hp-intro       { color: rgba(255,255,255,.82); }
.high-performance-page .hp-bg--dark .hp-btn-text    { color: #fff; }
.high-performance-page .hp-bg--dark .hp-btn-text::after { background: #fff; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET ≤1024px
════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .high-performance-page .hp-wrap { padding: 0 32px; }
  .high-performance-page section { padding: 88px 0; }

  /* Hero */
  .high-performance-page .hp-hero-body {
    padding: 140px 32px 60px;
    gap: 56px;
  }
  .high-performance-page .hp-hero-foot {
    grid-template-columns: 1fr;
    gap: 32px; align-items: start;
  }
  .high-performance-page .hp-hero-ctas { justify-content: flex-start; }
  .high-performance-page .hp-hero-title { font-size: clamp(56px, 10vw, 104px); }
  .high-performance-page .hp-hero-sub { font-size: 19px; max-width: 60ch; }

  /* Promo */
  .high-performance-page .hp-promo-inner { grid-template-columns: 1fr; min-height: 0; }
  .high-performance-page .hp-promo-media { min-height: 360px; }
  .high-performance-page .hp-promo-overlay { padding: 48px 32px 40px; }
  /* --hp-gutter retunes to 32px; the desktop .hp-promo-tier-feat rule
     reads from the variable so its margin / padding / width all follow. */
  .high-performance-page .hp-promo-body { --hp-gutter: 32px; padding: 48px var(--hp-gutter); }

  /* Philosophy */
  .high-performance-page .hp-phil-grid { grid-template-columns: 1fr; gap: 56px; }
  .high-performance-page .hp-phil-photo { max-width: 560px; }
  .high-performance-page .hp-phil-pillars { grid-template-columns: repeat(3, 1fr); }
  .high-performance-page .hp-phil-pillars .hp-phil-pillar:nth-child(3) { border-right: 1px solid var(--hp-border); }
  .high-performance-page .hp-phil-pillars .hp-phil-pillar:nth-child(n+4) { border-top: 1px solid var(--hp-border); }

  /* Programs */
  /* Media uses ONLY min-height (not aspect-ratio + min-height together). The
     combo gives the box an intrinsic min-content width derived from the height
     (280 * 16/10 = 448px), which at narrow viewports overflows the grid track
     and bleeds the image past the body card on the right. min-height alone is
     enough here since aspect-ratio would never bite anyway: 16/10 of any narrow
     width is < 280px, so min-height always wins. */
  .high-performance-page .hp-prog-flagship { grid-template-columns: minmax(0, 1fr); }
  .high-performance-page .hp-prog-flagship-media { min-height: 280px; aspect-ratio: auto; }
  .high-performance-page .hp-prog-flagship-body { padding: 36px 28px; }

  /* Coaching */
  .high-performance-page .hp-coach-head {
    flex-direction: column; align-items: flex-start; gap: 24px; padding: 0 32px;
  }
  .high-performance-page .hp-coach-outer {
    padding-left: 32px; padding-right: 32px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .high-performance-page .hp-coach-outer::-webkit-scrollbar { display: none; }
  .high-performance-page .hp-coach-rail { transform: none !important; transition: none; width: max-content; }
  /* Explicit `flex-basis` (not bare `width`) — the base sets
     `flex: 0 0 calc(...)` which gives the card a hard flex-basis ~378px, and an
     explicit flex-basis wins over `width` in flexbox, so a width-only override
     was silently ignored and the card overflowed narrow viewports (bio text
     visually clipped). */
  .high-performance-page .hp-coach-card { flex: 0 0 320px; scroll-snap-align: start; }

  /* NCAA */
  .high-performance-page .hp-ncaa-grid { grid-template-columns: 1fr; gap: 56px; }

  /* International */
  .high-performance-page .hp-sec-header { flex-direction: column; gap: 20px; align-items: flex-start; }
  .high-performance-page .hp-intl-header { max-width: none; margin-bottom: 56px; }
  .high-performance-page .hp-intl-intro { max-width: none; font-size: 17px; }
  .high-performance-page .hp-intl-actions { gap: 16px 24px; }
  .high-performance-page .hp-intl-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 72px; }
  /* Reset the desktop column/row placements so feature + pillars stack into
     the single column. Without this, the desktop `grid-column: 2` on the
     pillars forces an implicit second track to appear at tablet and squeeze
     the feature image into a sliver next to the pillars. */
  .high-performance-page .hp-intl-feature,
  .high-performance-page .hp-intl-pillars { grid-column: 1; grid-row: auto; }
  .high-performance-page .hp-intl-guide-link-below { grid-column: 1; grid-row: auto; padding-left: 0; }
  .high-performance-page .hp-intl-feature { min-height: 380px; }
  .high-performance-page .hp-intl-stories { grid-template-columns: 1fr 1fr; gap: 20px; }
  /* When the LAST card lands alone in its row of a 2-col grid (positions 1, 3,
     5… — i.e. odd counts), let it span both columns instead of hiding it. This
     keeps every story visible regardless of how many the editor adds, and the
     selector is resilient: with 3 stories the 3rd spans; with 4 the layout is
     a clean 2×2; with 5 the 5th spans; etc. */
  .high-performance-page .hp-intl-stories .hp-story-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* Facilities */
  .high-performance-page .hp-fac-grid { grid-template-columns: 1fr; gap: 20px; }
  .high-performance-page .hp-fac-tile { aspect-ratio: 16/9; }

  /* Pathway */
  .high-performance-page .hp-pathway-row { grid-template-columns: 1fr; gap: 32px; }
  .high-performance-page .hp-pathway-row-reverse > :first-child { order: 0; }

  /* Mental */
  .high-performance-page .hp-mental-grid { grid-template-columns: 1fr; gap: 48px; }
  /* When the section stacks at <=1024px, switch the photo to a landscape
     banner so it doesn't force a tall portrait crop that adds excess
     scroll. Editors can upload a separate 16:10 landscape image in
     `hp_mental_photo_mobile`; if they don't, the desktop portrait is
     cover-cropped to fit (subject's top/bottom may be lost). */
  .high-performance-page .hp-mental-photo {
    max-width: none;
    aspect-ratio: 16 / 10;
  }

  /* Contact info row — tighten so all 3 items stay 3-up instead of wrapping
     to a 2+1 layout with a 64px vertical gap. Separating row-gap from
     column-gap means that if a very narrow tablet (≤700px) still can't
     fit 3 items, the wrap is only 24px tall instead of the previous 64px. */
  .high-performance-page .hp-contact-row {
    column-gap: 32px;
    row-gap: 24px;
  }
  .high-performance-page .hp-contact-item { flex: 0 1 180px; }

  /* Value */
  .high-performance-page .hp-val-rail { grid-template-columns: 1fr 1fr; gap: 20px; }

  /* Players */
  .high-performance-page .hp-players-grid { grid-template-columns: 1fr 1fr; }
  /* Stack the player card vertically at tablet/mobile so the photo isn't
     boxed into a square in the left column (leaving dead grey space below
     it) and the body has the full card width — gives the stats row enough
     room to render its labels on a single line each.
     We also force a landscape aspect here (4/3) regardless of the section's
     per-section "Card Image Aspect Ratio" setting; portrait crops in a
     stacked card produce extremely tall cards that don't read well. */
  .high-performance-page .hp-player-card {
    grid-template-columns: 1fr;
  }
  .high-performance-page .hp-player-card .hp-player-img {
    aspect-ratio: 4 / 3;
  }
  .high-performance-page .hp-player-body {
    padding: 28px 26px 32px;
  }

  /* Alumni Proof tablet rules moved out of this 1024 block — see the
     dedicated `@media (max-width: 1023px)` block below. The desktop
     2-up alumni grid stays in effect at exactly 1024px instead of
     collapsing to one column too early. */
}

/* ── Alumni Proof (tablet ≤1023px) — all cards collapse to one wide
   landscape poster; content sits left over a horizontal veil. Lives in
   its own media query (one pixel below the shared 1024 breakpoint) so
   the desktop 2-up grid survives the 1024px boundary. */
@media (max-width: 1023px) {
  .high-performance-page .hp-alumni-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .high-performance-page .hp-alumni-card,
  .high-performance-page .hp-alumni-card-feat {
    aspect-ratio: 16 / 9;
    min-height: 340px;
  }
  .high-performance-page .hp-alumni-card img { object-position: center 22%; }
  .high-performance-page .hp-alumni-veil,
  .high-performance-page .hp-alumni-card-feat .hp-alumni-veil {
    background: linear-gradient(
      98deg,
      rgba(11,37,80,0.96) 0%,
      rgba(11,37,80,0.88) 40%,
      rgba(11,37,80,0.55) 60%,
      rgba(11,37,80,0.15) 85%,
      rgba(11,37,80,0) 100%
    );
  }
  .high-performance-page .hp-alumni-content,
  .high-performance-page .hp-alumni-card-feat .hp-alumni-content {
    align-self: center;
    max-width: 58%;
    padding: 40px 48px;
    gap: 14px;
  }
  .high-performance-page .hp-alumni-name { font-size: 30px; }
  .high-performance-page .hp-alumni-card-feat .hp-alumni-name { font-size: 36px; }
  .high-performance-page .hp-alumni-quote p,
  .high-performance-page .hp-alumni-card-feat .hp-alumni-quote p { font-size: 17px; line-height: 1.5; }
  .high-performance-page .hp-alumni-callout { padding: 20px 26px; font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE ≤640px
════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .high-performance-page .hp-wrap { padding: 0 20px; }
  .high-performance-page section { padding: 64px 0; }

  /* Hero */
  .high-performance-page .hp-hero { min-height: auto; }
  .high-performance-page .hp-hero-body { padding: 120px 20px 48px; gap: 40px; min-height: 100svh; }
  .high-performance-page .hp-hero-eyebrow { font-size: 11px; gap: 10px; margin-bottom: 24px; }
  .high-performance-page .hp-hero-title { font-size: clamp(44px, 12vw, 68px); line-height: 0.98; }
  .high-performance-page .hp-hero-sub { font-size: 17px; max-width: none; }
  .high-performance-page .hp-hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .high-performance-page .hp-hero-ctas .hp-btn { width: 100%; }
  .high-performance-page .hp-scroll-cue { display: none; }

  /* Promo */
  .high-performance-page .hp-promo-media { min-height: 280px; }
  .high-performance-page .hp-promo-overlay { padding: 32px 20px 24px; }
  .high-performance-page .hp-promo-title { font-size: clamp(34px, 9vw, 40px); }
  /* Mobile retunes --hp-gutter to 20px; --hp-feat-bleed also shrinks to
     12px so the featured card still has a visible gap from the body edge
     (if it stayed 20px it'd equal the gutter and the card would full-bleed
     again). The featured override only needs to tighten vertical padding —
     horizontal is variable-driven. */
  .high-performance-page .hp-promo-body { --hp-gutter: 20px; --hp-feat-bleed: 12px; padding: 32px var(--hp-gutter); gap: 24px; }
  .high-performance-page .hp-promo-tier { gap: 16px; padding: 18px 0; align-items: end; }
  .high-performance-page .hp-promo-tier-feat { padding-top: 18px; padding-bottom: 18px; }
  .high-performance-page .hp-pt-name { font-size: 17px; }
  .high-performance-page .hp-promo-tier-feat .hp-pt-name { font-size: 19px; }
  .high-performance-page .hp-pt-meta { font-size: 11px; }
  .high-performance-page .hp-pt-price-amount { font-size: 32px; }
  .high-performance-page .hp-promo-tier-feat .hp-pt-price-amount { font-size: 38px; }
  .high-performance-page .hp-pt-price-suffix { font-size: 12px; }
  .high-performance-page .hp-pt-price-eyebrow { font-size: 9px; }

  /* Philosophy */
  .high-performance-page .hp-phil-photo { max-width: 100%; }
  .high-performance-page .hp-phil-badge { right: -12px; bottom: -12px; padding: 18px 20px; }
  .high-performance-page .hp-phil-badge-n { font-size: 36px; }
  .high-performance-page .hp-phil-badge-l { font-size: 11px; }
  .high-performance-page .hp-phil-pillars { grid-template-columns: 1fr 1fr; margin-top: 56px; }
  .high-performance-page .hp-phil-pillars .hp-phil-pillar { border-right: 1px solid var(--hp-border); }
  .high-performance-page .hp-phil-pillars .hp-phil-pillar:nth-child(2n) { border-right: 0; }
  .high-performance-page .hp-phil-pillars .hp-phil-pillar:nth-child(n+3) { border-top: 1px solid var(--hp-border); }
  .high-performance-page .hp-phil-quote p { font-size: 18px; }

  /* Type */
  .high-performance-page .hp-h-section { font-size: clamp(34px, 9vw, 48px); }
  .high-performance-page .hp-h-card { font-size: 22px; }
  .high-performance-page .hp-intro { font-size: 17px; }
  .high-performance-page .hp-btn { padding: 14px 22px; font-size: 14px; }

  /* Ticker */
  .high-performance-page .hp-ticker-track { padding: 14px 0; }
  .high-performance-page .hp-ticker-item { font-size: 11px; padding: 0 18px; letter-spacing: .18em; }

  /* Video */
  .high-performance-page .hp-video-frame { aspect-ratio: 4/3; }
  .high-performance-page .hp-video-play { width: 64px; height: 64px; }
  .high-performance-page .hp-video-play svg { width: 22px; height: 22px; }
  .high-performance-page .hp-video-title { font-size: 20px; }

  /* Alumni proof (mobile) — full portrait posters, content stacked at the
     bottom over a vertical veil. */
  .high-performance-page .hp-alumni-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .high-performance-page .hp-alumni-card,
  .high-performance-page .hp-alumni-card-feat {
    aspect-ratio: 4 / 5;
    min-height: 0;
  }
  .high-performance-page .hp-alumni-card img { object-position: center 20%; }
  .high-performance-page .hp-alumni-veil,
  .high-performance-page .hp-alumni-card-feat .hp-alumni-veil {
    background: linear-gradient(
      180deg,
      rgba(11,37,80,0) 0%,
      rgba(11,37,80,0) 22%,
      rgba(11,37,80,0.6) 46%,
      rgba(11,37,80,0.95) 76%,
      rgba(11,37,80,0.98) 100%
    );
  }
  .high-performance-page .hp-alumni-content,
  .high-performance-page .hp-alumni-card-feat .hp-alumni-content {
    align-self: flex-end;
    max-width: 100%;
    padding: 24px 22px 26px;
    gap: 12px;
  }
  .high-performance-page .hp-alumni-name,
  .high-performance-page .hp-alumni-card-feat .hp-alumni-name { font-size: 26px; }
  .high-performance-page .hp-alumni-quote { padding-left: 14px; }
  .high-performance-page .hp-alumni-quote p,
  .high-performance-page .hp-alumni-card-feat .hp-alumni-quote p { font-size: 15.5px; line-height: 1.5; }
  .high-performance-page .hp-alumni-credit,
  .high-performance-page .hp-alumni-card-feat .hp-alumni-credit { font-size: 10.5px; letter-spacing: .14em; }
  .high-performance-page .hp-alumni-callout {
    display: flex; width: 100%;
    padding: 18px 22px;
    font-size: 15px; gap: 12px;
    margin-top: 36px;
  }
  .high-performance-page .hp-alumni-callout-text { flex: 1; }

  /* Programs */
  .high-performance-page .hp-prog-card { grid-template-columns: 1fr; min-height: 0; }
  .high-performance-page .hp-prog-thumb { aspect-ratio: 16/10; }
  .high-performance-page .hp-prog-body { padding: 22px 20px; }
  .high-performance-page .hp-prog-flagship-body { padding: 28px 22px; }
  .high-performance-page .hp-prog-tags { grid-template-columns: 1fr; }
  .high-performance-page .hp-prog-tag-level { grid-column: auto; }

  /* Coaching */
  .high-performance-page .hp-coach-outer { padding-left: 20px; padding-right: 20px; }
  /* Card sized via `flex` (not `width`) since the base sets an explicit
     flex-basis. Use `min(...)` so the card never exceeds the visible scroll
     area at very narrow viewports (avoids the bio appearing clipped on the
     right because the card itself overflows the screen). */
  .high-performance-page .hp-coach-card { flex: 0 0 min(280px, calc(100vw - 56px)); }

  /* NCAA */
  .high-performance-page .hp-n-stat { padding: 24px 0; gap: 20px; }
  .high-performance-page .hp-n-stat-n { font-size: 56px; min-width: 0; }
  .high-performance-page .hp-n-stat-l { font-size: 16px; }

  /* International */
  .high-performance-page .hp-intl-feature { min-height: 280px; }
  .high-performance-page .hp-intl-feature-body { padding: 24px; }
  .high-performance-page .hp-intl-pillar { grid-template-columns: 56px 1fr; gap: 16px; padding: 24px; }
  .high-performance-page .hp-intl-pillar-icon { width: 48px; height: 48px; }
  .high-performance-page .hp-intl-pillar-icon svg { width: 22px; height: 22px; }
  .high-performance-page .hp-intl-stories-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .high-performance-page .hp-intl-stories { grid-template-columns: 1fr; gap: 16px; }

  /* Facilities */
  .high-performance-page .hp-fac-tile { aspect-ratio: 4/5; }
  .high-performance-page .hp-fac-body { padding: 20px; }
  .high-performance-page .hp-fac-title { font-size: 22px; }

  /* Pathway */
  .high-performance-page .hp-pathway-row { gap: 24px; margin-bottom: 48px; }
  .high-performance-page .hp-pathway-content .hp-h-card { font-size: 28px; }

  /* Mental */
  .high-performance-page .hp-mental-staff { grid-template-columns: 1fr; gap: 12px; }
  /* Stack the feature tags one per row on mobile — the chip-wrap layout
     produces visually inconsistent 1-vs-2-per-row rows otherwise. */
  .high-performance-page .hp-mental-tags {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .high-performance-page .hp-mental-tags li {
    text-align: center;
    padding: 10px 14px;
  }

  /* Value */
  .high-performance-page .hp-val-rail { grid-template-columns: 1fr; gap: 16px; }
  /* Only switch to thumb-left / body-right layout when a thumb actually exists.
     Without `:has()`, a thumbless card would auto-place its body into the 130px
     slot reserved for the missing thumb, wrapping the body text into a sliver
     and leaving the 1fr column empty. */
  .high-performance-page .hp-val-card:has(.hp-val-thumb) {
    display: grid; grid-template-columns: 130px 1fr;
  }
  .high-performance-page .hp-val-thumb { aspect-ratio: auto; height: 100%; }
  .high-performance-page .hp-val-body { padding: 18px 20px; }

  /* Players */
  .high-performance-page .hp-players-grid { grid-template-columns: 1fr; gap: 20px; }
  /* On mobile each card is full viewport width, so a 4:3 photo would be
     unnecessarily tall (~300+ px). Shift to a wider 16:10 banner aspect
     and tighten the body padding to keep cards compact. */
  .high-performance-page .hp-player-card .hp-player-img { aspect-ratio: 16 / 10; }
  .high-performance-page .hp-player-body { padding: 24px 22px 28px; }
  .high-performance-page .hp-player-name { font-size: 24px; }

  /* News */
  .high-performance-page .hp-news-item {
    grid-template-columns: 1fr auto; grid-template-rows: auto auto;
    gap: 4px 12px; padding: 18px 4px;
  }
  .high-performance-page .hp-news-date { grid-row: 1; grid-column: 1 / -1; font-size: 12px; }
  .high-performance-page .hp-news-title { grid-row: 2; grid-column: 1; font-size: 16px; }
  .high-performance-page .hp-news-arrow { grid-row: 2; grid-column: 2; }

  /* Contact */
  .high-performance-page .hp-contact-title { font-size: clamp(48px, 13vw, 72px); }
  .high-performance-page .hp-contact-sub { font-size: 17px; }
  .high-performance-page .hp-contact-btns { flex-direction: column; align-items: stretch; }
  .high-performance-page .hp-contact-btns .hp-btn { width: 100%; }
  /* Mobile contact row — back to comfortable internal item spacing.
     CRITICAL: reset `flex: 0 1 240px` (set on desktop). On desktop the main
     axis is horizontal so 240px is the column width. When mobile flips
     `flex-direction: column`, that same 240px becomes the item's MINIMUM
     HEIGHT, forcing each item to ~240px tall and producing huge gaps. */
  .high-performance-page .hp-contact-row { flex-direction: column; gap: 14px; align-items: center; margin-top: 36px; padding-top: 36px; }
  .high-performance-page .hp-contact-item { flex: 0 0 auto; gap: 8px; }
  .high-performance-page .hp-contact-item svg { width: 26px; height: 26px; }
  .high-performance-page .hp-contact-value { margin-top: 4px; }
  .high-performance-page .hp-cta-form { padding: 32px 22px; margin-top: 40px; }
  .high-performance-page .hp-form-row { grid-template-columns: 1fr; gap: 14px; }
  .high-performance-page .hp-form-hed { font-size: 22px; margin-bottom: 20px; }
  .high-performance-page .hp-form-btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   PROOF STATS — dark band with a 4-up stats grid (v2 addition)
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-proof-stats {
  background: var(--hp-blue-dk);
  color: #fff;
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.high-performance-page .hp-proof-stats::before {
  content: "";
  position: absolute;
  right: -10%; top: -30%;
  width: 70%; height: 160%;
  background: radial-gradient(ellipse at center, rgba(151,202,62,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.high-performance-page .hp-ps-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
  margin: 0;
}
.high-performance-page .hp-ps-stat {
  padding: 44px 32px;
  border-left: 1px solid rgba(255,255,255,.16);
}
.high-performance-page .hp-ps-stat:first-child { border-left: 0; }
.high-performance-page .hp-ps-n {
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 600;
  color: var(--hp-green-lt);
  line-height: 1;
  letter-spacing: -.02em;
}
/* Sup sizing/offset matches the v1-tuned hero + NCAA stat treatment, which
   visually aligned with the design (the bare design-spec values 0.42em /
   no line-height read a touch small and floated). 0.45em + explicit
   line-height:1 + margin-top:12px is the combination that locks the
   superscript flush at the top of the digit. position:static + top:auto
   override the theme's `sup { position: relative; top: -0.5em }`. */
.high-performance-page .hp-ps-n sup {
  font-size: 0.45em;
  vertical-align: top;
  line-height: 1;
  display: inline-block;
  margin-top: 12px;
  font-weight: 500;
  position: static;
  top: auto;
}
.high-performance-page .hp-ps-l {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  line-height: 1.45;
}

@media (max-width: 1024px) {
  .high-performance-page .hp-proof-stats { padding: 72px 0; }
  .high-performance-page .hp-ps-grid { grid-template-columns: 1fr 1fr; }
  .high-performance-page .hp-ps-stat { padding: 36px 28px; }
  .high-performance-page .hp-ps-stat:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .high-performance-page .hp-ps-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,.16); }
}
@media (max-width: 640px) {
  .high-performance-page .hp-proof-stats { padding: 56px 0; }
  .high-performance-page .hp-ps-grid { grid-template-columns: 1fr; }
  .high-performance-page .hp-ps-stat {
    padding: 28px 0;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.16);
  }
  .high-performance-page .hp-ps-stat:first-child { border-top: 0; }
  .high-performance-page .hp-ps-n { font-size: 56px; }
  .high-performance-page .hp-ps-l { font-size: 12px; margin-top: 12px; }
}

/* ════════════════════════════════════════════════════════════
   NOW ENROLLING — dark band, 4-up numbered tier grid (v2 addition)
   Self-contained band — placement-agnostic, second seasonal surface
   alongside the Promo Strip.
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-promo-band {
  background: var(--hp-blue-dk);
  color: #fff;
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.high-performance-page .hp-promo-band::before {
  content: "";
  position: absolute;
  right: -8%; top: -40%;
  width: 60%; height: 180%;
  background: radial-gradient(ellipse at center, rgba(151,202,62,0.14) 0%, transparent 60%);
  pointer-events: none;
}
.high-performance-page .hp-promo-band::after {
  content: "";
  position: absolute;
  left: -6%; bottom: -50%;
  width: 50%; height: 140%;
  background: radial-gradient(ellipse at center, rgba(27,78,160,0.35) 0%, transparent 65%);
  pointer-events: none;
}
.high-performance-page .hp-pb-head {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: end;
  margin-bottom: 64px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.high-performance-page .hp-pb-head .hp-ey { color: var(--hp-green-lt); }
.high-performance-page .hp-pb-head .hp-ey::before { background: var(--hp-green-lt); }
.high-performance-page .hp-pb-head .hp-h-section {
  color: #fff;
  margin-top: 18px;
}
.high-performance-page .hp-pb-head .hp-h-section em { color: var(--hp-green-lt); }
.high-performance-page .hp-pb-aside {
  display: flex; flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
.high-performance-page .hp-pb-aside p {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  max-width: 40ch;
  margin: 0;
}
.high-performance-page .hp-pb-season {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  padding: 9px 16px 9px 14px;
  border-radius: 999px;
}
.high-performance-page .hp-pb-season-dot {
  position: relative;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--hp-green-lt); display: inline-block;
  flex: 0 0 9px;
  animation: hp-promo-dot-pulse 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
.high-performance-page .hp-pb-season-dot::before,
.high-performance-page .hp-pb-season-dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--hp-green-lt);
  animation: hp-promo-dot-ripple 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
.high-performance-page .hp-pb-season-dot::after { animation-delay: .8s; }

/* 4-up tier grid */
.high-performance-page .hp-pb-tiers {
  position: relative; z-index: 1;
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.high-performance-page .hp-pbt {
  position: relative;
  padding: 36px 32px 32px;
  border-left: 1px solid rgba(255,255,255,.16);
  display: flex; flex-direction: column;
  gap: 28px;
  transition: background .25s ease;
}
.high-performance-page .hp-pbt:first-child { border-left: 0; }
.high-performance-page .hp-pbt:hover { background: rgba(255,255,255,.03); }
.high-performance-page .hp-pbt-head { display: flex; flex-direction: column; gap: 10px; }
.high-performance-page .hp-pbt-idx {
  font-size: 12px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--hp-green-lt);
}
.high-performance-page .hp-pbt-name {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: clamp(22px, 1.6vw, 26px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: #fff;
  text-wrap: balance;
}
.high-performance-page .hp-pbt-meta {
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.high-performance-page .hp-pbt-price {
  display: flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.high-performance-page .hp-pbt-price-eyebrow {
  font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-right: 6px;
}
.high-performance-page .hp-pbt-price-amount {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: clamp(38px, 3.6vw, 52px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.02em;
  color: #fff;
}
.high-performance-page .hp-pbt-price-suffix {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.6);
}

/* Featured tier */
.high-performance-page .hp-pbt-feat {
  background: rgba(151,202,62,0.06);
  border-left-color: rgba(151,202,62,0.3);
}
.high-performance-page .hp-pbt-feat + .hp-pbt { border-left-color: rgba(151,202,62,0.3); }
.high-performance-page .hp-pbt-feat:hover { background: rgba(151,202,62,0.10); }
.high-performance-page .hp-pbt-feat .hp-pbt-idx { color: #fff; }
.high-performance-page .hp-pbt-feat .hp-pbt-price-amount { color: var(--hp-green-lt); }
.high-performance-page .hp-pbt-tag {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--hp-green); color: #fff;
  font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 10px 6px 9px;
  line-height: 1;
  z-index: 2;
}
.high-performance-page .hp-pbt-tag svg {
  width: 11px; height: 11px;
  fill: #fff; stroke: none;
  flex: 0 0 11px;
  display: block;
}

/* Footer CTA row */
.high-performance-page .hp-pb-foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  margin-top: 48px;
}
.high-performance-page .hp-pb-foot-note {
  font-size: 13px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin: 0;
}
.high-performance-page .hp-pb-foot-note strong { color: var(--hp-green-lt); font-weight: 600; }
.high-performance-page .hp-pb-foot .hp-btn-green:hover { color: var(--hp-blue-dk); }

@media (max-width: 1024px) {
  .high-performance-page .hp-promo-band { padding: 100px 0; }
  .high-performance-page .hp-pb-head {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
  .high-performance-page .hp-pb-tiers { grid-template-columns: repeat(2, 1fr); }
  .high-performance-page .hp-pbt:nth-child(3) { border-left: 0; }
  .high-performance-page .hp-pbt:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.16); }
}
@media (max-width: 640px) {
  .high-performance-page .hp-promo-band { padding: 80px 0; }
  .high-performance-page .hp-pb-tiers { grid-template-columns: 1fr; }
  .high-performance-page .hp-pbt { border-left: 0; }
  .high-performance-page .hp-pbt:not(:first-child) { border-top: 1px solid rgba(255,255,255,.16); }
  .high-performance-page .hp-pb-foot { flex-direction: column; align-items: stretch; }
  .high-performance-page .hp-pb-foot .hp-btn { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   PROGRAM DETAIL MODAL — native <dialog>, opened by [data-modal-open],
   closed by [data-modal-close] / backdrop click / Escape.
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-prog-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--hp-text);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 100px -20px rgba(11,37,80,.5);
  margin: auto;
}
.high-performance-page .hp-prog-modal::backdrop {
  background: rgba(11,37,80,.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.high-performance-page .hp-prog-modal:not([open]) { display: none; }

@keyframes hp-prog-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hp-prog-modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.high-performance-page .hp-prog-modal[open] { animation: hp-prog-modal-in .28s cubic-bezier(.2,.7,.2,1); }
.high-performance-page .hp-prog-modal[open]::backdrop { animation: hp-prog-modal-backdrop-in .28s ease; }
@media (prefers-reduced-motion: reduce) {
  .high-performance-page .hp-prog-modal[open],
  .high-performance-page .hp-prog-modal[open]::backdrop { animation: none; }
}
/* Anchor-CTA close: when the modal's CTA is a same-page anchor, JS adds
   `.is-closing` to fade the dialog + backdrop out while the page smooth-
   scrolls to the destination behind it, then closes the <dialog> once the
   transition ends. pointer-events:none lets the (now-revealed) page receive
   events during the fade. */
.high-performance-page .hp-prog-modal.is-closing {
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.high-performance-page .hp-prog-modal.is-closing::backdrop {
  opacity: 0;
  transition: opacity .35s ease;
}
@media (prefers-reduced-motion: reduce) {
  /* Skip the fade entirely — the modal just closes and the page jumps. */
  .high-performance-page .hp-prog-modal.is-closing,
  .high-performance-page .hp-prog-modal.is-closing::backdrop { transition: none; }
}

.high-performance-page .hp-prog-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border: 0; padding: 0;
  background: rgba(255,255,255,.92);
  color: var(--hp-text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.high-performance-page .hp-prog-modal-close svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round;
}
.high-performance-page .hp-prog-modal-close:hover {
  background: var(--hp-text); color: #fff;
  transform: rotate(90deg);
}

.high-performance-page .hp-prog-modal-hero {
  position: relative;
  aspect-ratio: 21 / 9;
  background: var(--hp-blue-dk);
  overflow: hidden;
  flex: none;
}
.high-performance-page .hp-prog-modal-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.high-performance-page .hp-prog-modal-hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,37,80,0) 0%, rgba(11,37,80,.25) 50%, rgba(11,37,80,.92) 100%);
}
.high-performance-page .hp-prog-modal-hero-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px 32px;
  color: #fff;
  display: flex; flex-direction: column; gap: 6px;
}
.high-performance-page .hp-prog-modal-idx {
  font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--hp-green-lt);
}
.high-performance-page .hp-prog-modal-title {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0;
}

.high-performance-page .hp-prog-modal-body {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column; gap: 24px;
}

.high-performance-page .hp-prog-modal-tags {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.high-performance-page .hp-prog-modal-tags li {
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--hp-text);
  background: var(--hp-bg-soft);
  border: 1px solid var(--hp-border);
  padding: 6px 12px;
}

.high-performance-page .hp-prog-modal-prose {
  display: flex; flex-direction: column; gap: 14px;
}
.high-performance-page .hp-prog-modal-prose p {
  font-size: 15px; line-height: 1.65;
  color: var(--hp-text);
}

.high-performance-page .hp-prog-modal-schedule {
  background: var(--hp-bg-cream);
  border-left: 3px solid var(--hp-green);
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.high-performance-page .hp-prog-modal-h {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--hp-green);
  margin: 0;
}
.high-performance-page .hp-prog-modal-schedule ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.high-performance-page .hp-prog-modal-schedule li {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 18px;
  font-size: 14px; line-height: 1.55;
  color: var(--hp-text);
}
.high-performance-page .hp-prog-modal-schedule li span { font-weight: 500; color: var(--hp-text-soft); }
.high-performance-page .hp-prog-modal-schedule li strong { font-weight: 600; }
.high-performance-page .hp-prog-modal-schedule li em {
  display: block;
  font-style: italic;
  font-size: 13px;
  color: var(--hp-text-soft);
}
.high-performance-page .hp-prog-modal-schedule-note {
  font-size: 13px;
  font-style: italic;
  color: var(--hp-text-soft);
  line-height: 1.5;
}

.high-performance-page .hp-prog-modal-footnote {
  font-size: 12px;
  line-height: 1.6;
  color: var(--hp-text-soft);
  padding-top: 16px;
  border-top: 1px solid var(--hp-border);
}

.high-performance-page .hp-prog-modal-foot {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 20px 32px;
  background: var(--hp-bg-soft);
  border-top: 1px solid var(--hp-border);
}
.high-performance-page .hp-prog-modal-foot .hp-btn { padding: 14px 24px; }

/* ── Video lightbox modal (philosophy CTA, reusable) ───────── */
/* <dialog> opens in the top layer, so it isn't visually nested inside
   `.high-performance-page`. The descendant selectors still work since the
   element keeps its DOM position. */
.high-performance-page .hp-video-modal {
  width: min(960px, calc(100vw - 32px));
  max-width: none;
  /* Top padding reserves space for the close button so it sits ABOVE the
     player frame (clear of the YT/Vimeo top-bar controls), while keeping the
     close button inside the dialog's bounding box so auto-centering can't
     push it above the viewport. */
  padding: 56px 0 0 0;
  border: 0;
  background: transparent;
  overflow: visible;
  margin: auto;
}
.high-performance-page .hp-video-modal::backdrop {
  background: rgba(11,37,80,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.high-performance-page .hp-video-modal:not([open]) { display: none; }
.high-performance-page .hp-video-modal-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.6);
  overflow: hidden;
}
.high-performance-page .hp-video-modal-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* Poster covers the iframe by default. Once clicked, JS adds .is-playing on
   the dialog and the iframe (with autoplay) takes over. Centered play overlay
   matches the philosophy CTA play disc (green, white triangle).
   Note: no `display: block` — that would beat the `[hidden] { display: none }`
   user-agent rule by specificity and silently no-op the JS poster hide. */
.high-performance-page .hp-video-modal-poster {
  position: absolute; inset: 0;
  z-index: 2;
  padding: 0; border: 0; margin: 0;
  background: #000;
  cursor: pointer;
}
.high-performance-page .hp-video-modal.is-playing .hp-video-modal-poster {
  display: none;
}
.high-performance-page .hp-video-modal-poster img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.high-performance-page .hp-video-modal-poster-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--hp-green);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease, background .25s ease;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.55);
}
.high-performance-page .hp-video-modal-poster-play svg {
  width: 36px; height: 36px;
  fill: #fff; stroke: none;
  margin-left: 4px; /* visual centering for the triangle */
}
.high-performance-page .hp-video-modal-poster:hover .hp-video-modal-poster-play,
.high-performance-page .hp-video-modal-poster:focus-visible .hp-video-modal-poster-play {
  transform: translate(-50%, -50%) scale(1.06);
  background: var(--hp-green-lt);
}
.high-performance-page .hp-video-modal-poster:focus-visible {
  outline: 3px solid var(--hp-green-lt);
  outline-offset: -3px;
}
/* Sits ABOVE the player frame (inside the dialog's top padding) so it doesn't
   collide with the YouTube / Vimeo top-bar controls (share, watch-later,
   picture-in-picture). The dialog has transparent background so the close
   button is over the dark backdrop — white circle for contrast. */
.high-performance-page .hp-video-modal-close {
  position: absolute;
  top: 8px; right: 0;
  width: 40px; height: 40px;
  border: 0; padding: 0;
  background: rgba(255,255,255,.92);
  color: var(--hp-text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.high-performance-page .hp-video-modal-close svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round;
}
.high-performance-page .hp-video-modal-close:hover {
  background: var(--hp-text); color: #fff;
  transform: rotate(90deg);
}

/* When the modal opens via a <button>, only override the button-intrinsic
   defaults (default border, system font, text-align center, default cursor).
   Background, color, padding, and grid layout inherit from `.hp-phil-cta`
   so the navy tile design is unchanged. */
.high-performance-page button.hp-phil-cta {
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

@media (max-width: 640px) {
  /* Full-screen modal on phones. The browser's UA stylesheet for <dialog>
     applies `max-width: calc(100% - 6px - 2em)` / `max-height: calc(...)` —
     setting only `width: 100vw` (as we used to) leaves that cap in force,
     and combined with `margin: 0` cancelling the auto-centering, real iOS
     Safari renders the modal narrower than viewport and flush-left. (DevTools
     emulation handles the UA caps differently, which is why this wasn't
     visible on dev tooling.) Explicit `inset: 0` + `max-width/max-height:
     none` is what reliably fills the viewport edge-to-edge. */
  .high-performance-page .hp-prog-modal,
  .high-performance-page .hp-prog-modal.hp-prog-modal-summer {
    /* The summer selector uses the COMPOUND `.hp-prog-modal.hp-prog-modal-summer`
       (specificity 0,3,0) on purpose: the base summer width rule
       (`.hp-prog-modal-summer { width: min(880px, calc(100vw - 32px)) }`) is
       declared LATER in the file with equal specificity (0,2,0), so a plain
       single-class selector here would lose on source order and the modal
       would stay clamped + flush-left on phones. The extra class outranks it. */
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
  }
  .high-performance-page .hp-prog-modal-hero { aspect-ratio: 16 / 9; }
  .high-performance-page .hp-prog-modal-hero-meta { padding: 20px 22px; }
  .high-performance-page .hp-prog-modal-body { padding: 24px 22px; gap: 20px; }
  .high-performance-page .hp-prog-modal-foot {
    padding: 16px 22px;
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .high-performance-page .hp-prog-modal-foot .hp-btn { justify-content: center; }
  .high-performance-page .hp-prog-modal-schedule li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ════════════════════════════════════════════════════════════
   SUMMER TRAINING — tabbed modal (4 sub-programs)
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-prog-modal-summer { width: min(880px, calc(100vw - 32px)); }

.high-performance-page .hp-prog-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--hp-blue-dk);
  border-top: 1px solid rgba(255,255,255,.1);
  flex: none;
}
.high-performance-page .hp-prog-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.62);
  cursor: pointer;
  padding: 14px 16px 12px;
  display: flex; flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  text-align: left;
  font: inherit;
  border-bottom: 3px solid transparent;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  min-width: 0;
}
.high-performance-page .hp-prog-tab:last-child { border-right: 0; }
.high-performance-page .hp-prog-tab:hover { color: #fff; background: rgba(255,255,255,.04); }
.high-performance-page .hp-prog-tab.is-active {
  color: #fff;
  background: rgba(151,202,62,0.10);
  border-bottom-color: var(--hp-green-lt);
}
.high-performance-page .hp-prog-tab-name {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.005em;
}
.high-performance-page .hp-prog-tab-age {
  font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  line-height: 1.2;
}
.high-performance-page .hp-prog-tab.is-active .hp-prog-tab-age { color: var(--hp-green-lt); }
.high-performance-page .hp-prog-tab:focus-visible {
  outline: 2px solid var(--hp-green-lt);
  outline-offset: -2px;
}

/* Super National tab — gold tint emphasis + star icon */
.high-performance-page .hp-prog-tab-feat {
  background: linear-gradient(180deg, rgba(212,175,55,0.05) 0%, rgba(212,175,55,0.12) 100%);
}
.high-performance-page .hp-prog-tab-feat:hover {
  background: linear-gradient(180deg, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.16) 100%);
}
.high-performance-page .hp-prog-tab-feat .hp-prog-tab-name {
  display: inline-flex; align-items: center; gap: 7px;
}
.high-performance-page .hp-prog-tab-star {
  width: 12px; height: 12px;
  fill: #d4af37; stroke: none;
  flex: 0 0 12px;
}
.high-performance-page .hp-prog-tab-feat .hp-prog-tab-age { color: #d4af37; }
.high-performance-page .hp-prog-tab-feat.is-active {
  background: linear-gradient(180deg, rgba(212,175,55,0.14) 0%, rgba(151,202,62,0.10) 100%);
  border-bottom-color: #d4af37;
}
.high-performance-page .hp-prog-tab-feat.is-active .hp-prog-tab-age { color: #e8c560; }

.high-performance-page .hp-prog-modal-body-tabbed { gap: 0; padding: 0; }
.high-performance-page .hp-prog-tab-panel {
  padding: 32px 32px 28px;
  display: flex; flex-direction: column;
  gap: 22px;
}
.high-performance-page .hp-prog-tab-panel[hidden] { display: none; }
.high-performance-page .hp-prog-tab-panel:not(.is-active) { display: none; }
.high-performance-page .hp-prog-tab-panel.is-active { display: flex; }

/* Invite-only banner (Super National only) */
.high-performance-page .hp-prog-tier-invite-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, rgba(11,37,80,.06) 0%, rgba(11,37,80,.02) 100%);
  border-left: 3px solid var(--hp-blue-dk);
  padding: 14px 18px;
}
.high-performance-page .hp-prog-tier-invite-banner svg {
  width: 24px; height: 24px;
  fill: var(--hp-blue-dk); stroke: none;
  flex: 0 0 24px;
}
.high-performance-page .hp-prog-tier-invite-banner strong {
  display: block;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--hp-blue-dk);
  line-height: 1;
  margin-bottom: 4px;
}
.high-performance-page .hp-prog-tier-invite-banner span {
  font-size: 13px;
  color: var(--hp-text-soft);
  line-height: 1.45;
}

.high-performance-page .hp-prog-tier-info {
  display: flex; flex-direction: column; gap: 14px;
}
.high-performance-page .hp-prog-tier-info p {
  font-size: 15px; line-height: 1.65;
  color: var(--hp-text);
}

.high-performance-page .hp-prog-tier-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 14px;
}
.high-performance-page .hp-prog-tier-card {
  background: var(--hp-bg-cream);
  border-left: 3px solid var(--hp-green);
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.high-performance-page .hp-prog-tier-card .hp-prog-modal-h { margin-bottom: 6px; }
.high-performance-page .hp-prog-tier-time {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 20px; font-weight: 600;
  color: var(--hp-text);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.high-performance-page .hp-prog-tier-days {
  font-size: 13px;
  color: var(--hp-text-soft);
}
.high-performance-page .hp-prog-tier-note {
  font-size: 12px;
  font-style: italic;
  color: var(--hp-text-soft);
  line-height: 1.5;
  margin-top: 4px;
}

.high-performance-page .hp-prog-tier-pricing { border-left-color: var(--hp-blue-dk); }
.high-performance-page .hp-prog-tier-prices {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.high-performance-page .hp-prog-tier-prices li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--hp-border);
}
.high-performance-page .hp-prog-tier-prices li:last-child { border-bottom: 0; padding-bottom: 0; }
.high-performance-page .hp-prog-tier-prices li span {
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--hp-text-soft);
}
.high-performance-page .hp-prog-tier-prices li strong {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 22px; font-weight: 600;
  color: var(--hp-text);
  line-height: 1;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.high-performance-page .hp-prog-tier-prices li strong em {
  font-size: 12px; font-weight: 500;
  font-style: normal;
  color: var(--hp-text-soft);
  margin-left: 2px;
}
.high-performance-page .hp-prog-tier-prices li.is-member span,
.high-performance-page .hp-prog-tier-prices li.is-member strong { color: var(--hp-green); }

@media (max-width: 720px) {
  .high-performance-page .hp-prog-tabs { grid-template-columns: repeat(2, 1fr); }
  .high-performance-page .hp-prog-tab { border-bottom: 1px solid rgba(255,255,255,.08); }
  .high-performance-page .hp-prog-tab:nth-child(2) { border-right: 0; }
  .high-performance-page .hp-prog-tab:nth-child(n+3) { border-bottom: 0; }
  .high-performance-page .hp-prog-tab.is-active { border-bottom-color: var(--hp-green-lt); }
  .high-performance-page .hp-prog-tier-grid { grid-template-columns: 1fr; }
  .high-performance-page .hp-prog-tab-panel { padding: 24px 22px; }
}

/* ════════════════════════════════════════════════════════════
   FAQ — sticky left rail + <details> accordion groups
════════════════════════════════════════════════════════════ */

.high-performance-page .hp-faq {
  background: var(--hp-bg-cream);
  padding: 140px 0;
}
.high-performance-page .hp-faq-header {
  max-width: 760px;
  margin: 0 auto 72px;
  text-align: center;
}
.high-performance-page .hp-faq-header .hp-ey { justify-content: center; }
.high-performance-page .hp-faq-intro {
  margin-top: 20px;
  font-size: 18px;
  color: var(--hp-text-soft);
  line-height: 1.55;
}
.high-performance-page .hp-faq-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  align-items: start;
}

/* Left rail */
.high-performance-page .hp-faq-rail {
  position: sticky;
  top: 120px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.high-performance-page .hp-faq-rail-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--hp-border);
  color: var(--hp-text);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.high-performance-page .hp-faq-rail-item:hover { color: var(--hp-blue-dk); }
.high-performance-page .hp-faq-rail-item.is-active {
  color: var(--hp-blue-dk);
  border-bottom-color: var(--hp-blue-dk);
}
.high-performance-page .hp-faq-rail-num {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--hp-text-soft);
}
.high-performance-page .hp-faq-rail-item.is-active .hp-faq-rail-num { color: var(--hp-green); }
.high-performance-page .hp-faq-rail-label {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.high-performance-page .hp-faq-rail-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--hp-text-soft);
  background: var(--hp-bg);
  border: 1px solid var(--hp-border);
  border-radius: 999px;
  padding: 3px 10px;
  min-width: 28px;
  text-align: center;
}
.high-performance-page .hp-faq-rail-cta {
  margin-top: 32px;
  padding: 24px;
  background: var(--hp-bg);
  border: 1px solid var(--hp-border);
}
/* Two copies of the CTA exist in the DOM (one inside the rail, one after the
   groups). Show only the breakpoint-appropriate one — `display: none` hides
   the other from screen readers too, so no double-announcement. */
.high-performance-page .hp-faq-rail-cta--mobile { display: none; }
.high-performance-page .hp-faq-rail-cta-label {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--hp-text);
}

/* Groups */
.high-performance-page .hp-faq-groups {
  display: flex; flex-direction: column;
  gap: 64px;
}
.high-performance-page .hp-faq-group-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hp-border);
}
.high-performance-page .hp-faq-group-num {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: .14em;
  color: var(--hp-green);
}
.high-performance-page .hp-faq-group-title {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--hp-blue-dk);
  margin: 0;
}

/* Accordion items (native <details>) */
.high-performance-page .hp-faq-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.high-performance-page .hp-faq-list li { border-bottom: 1px solid var(--hp-border); }
.high-performance-page .hp-faq-list li:first-child { border-top: 1px solid var(--hp-border); }
.high-performance-page .hp-faq-item summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  transition: padding .25s ease;
}
.high-performance-page .hp-faq-item summary::-webkit-details-marker { display: none; }
.high-performance-page .hp-faq-item summary:hover { padding-left: 12px; }
.high-performance-page .hp-faq-q {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--hp-text);
  line-height: 1.35;
}
.high-performance-page .hp-faq-toggle {
  position: relative;
  width: 34px; height: 34px;
  flex: none;
  border: 1px solid var(--hp-border);
  border-radius: 50%;
  background: var(--hp-bg);
  transition: background .2s ease, border-color .2s ease, transform .25s ease;
}
.high-performance-page .hp-faq-toggle::before,
.high-performance-page .hp-faq-toggle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 1.5px;
  background: var(--hp-blue-dk);
  transform: translate(-50%, -50%);
  transition: transform .25s ease;
}
.high-performance-page .hp-faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.high-performance-page .hp-faq-item:hover .hp-faq-toggle {
  background: var(--hp-blue-dk);
  border-color: var(--hp-blue-dk);
}
.high-performance-page .hp-faq-item:hover .hp-faq-toggle::before,
.high-performance-page .hp-faq-item:hover .hp-faq-toggle::after { background: #fff; }
.high-performance-page .hp-faq-item[open] .hp-faq-toggle {
  background: var(--hp-green);
  border-color: var(--hp-green);
}
.high-performance-page .hp-faq-item[open] .hp-faq-toggle::before,
.high-performance-page .hp-faq-item[open] .hp-faq-toggle::after { background: #fff; }
.high-performance-page .hp-faq-item[open] .hp-faq-toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.high-performance-page .hp-faq-a {
  padding: 0 64px 26px 4px;
  animation: hp-faq-fade .35s ease both;
}
.high-performance-page .hp-faq-a p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--hp-text-soft);
  max-width: 68ch;
}
@keyframes hp-faq-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
  .high-performance-page .hp-faq-layout { grid-template-columns: 1fr; gap: 48px; }
  .high-performance-page .hp-faq-rail {
    position: static;
    flex-direction: row; flex-wrap: wrap;
    gap: 8px;
  }
  .high-performance-page .hp-faq-rail-item { flex: 1 1 240px; }
  /* Swap which copy is visible — hide the in-rail one, show the post-groups
     one so the prompt sits at the bottom of the section. */
  .high-performance-page .hp-faq-rail-cta--desktop { display: none; }
  .high-performance-page .hp-faq-rail-cta--mobile {
    display: block;
    margin-top: 56px;
  }
}
@media (max-width: 640px) {
  .high-performance-page .hp-faq-header { margin-bottom: 48px; }
  .high-performance-page .hp-faq-intro { font-size: 16px; }
  .high-performance-page .hp-faq-groups { gap: 48px; }
  .high-performance-page .hp-faq-group-title { font-size: 22px; }
  .high-performance-page .hp-faq-q { font-size: 16px; }
  .high-performance-page .hp-faq-item summary { padding: 18px 2px; gap: 16px; }
  .high-performance-page .hp-faq-item summary:hover { padding-left: 2px; }
  .high-performance-page .hp-faq-toggle { width: 30px; height: 30px; }
  .high-performance-page .hp-faq-a { padding: 0 8px 22px 2px; }
  .high-performance-page .hp-faq-a p { font-size: 15px; }
  .high-performance-page .hp-faq-rail-item { flex: 1 1 100%; padding: 14px 4px; }
}

/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .high-performance-page *,
  .high-performance-page *::before,
  .high-performance-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════
   BODY BACKGROUND — High Performance template only (desktop)
   ════════════════════════════════════════════════════════════
   The global theme renders a `<section class="home-contact-section">`
   "Get In Touch" CTA above the real <footer> (see footer.php). It has
   `margin-top: 234px`, and because margins live *outside* the box,
   that 234px reveals the page's body background. On every other
   template the body is white and the gap blends with the preceding
   white content, but this template ends with a navy contact section
   so the white margin shows as a hard seam below it.

   Fix: paint the body navy on this template only. The global
   `.home-contact-section` keeps its own `#1b4ea0` background
   completely untouched — we just stop the body from showing
   through as white in the gap. Scoped to desktop because the
   seam isn't visible on mobile (different stacking, no margin
   reveal in the same way), and to `body.page-template-template-
   high-performance` (the class WordPress emits from this template
   filename) so no other page is affected. */
@media (min-width: 1025px) {
  body.page-template-template-high-performance-v2 {
    background-color: #0B2550;
  }
}