/* ════════════════════════════════════════════════════════════
   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 div#page {
  padding-top: 0 !important;
  transition: padding-top 0s !important;
}
.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%;
}
.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 `hp_hero_overlay` field. */
.high-performance-page .hp-hero.hp-overlay--lighter .hp-hero-overlay {
  background:
    linear-gradient(180deg, rgba(11,37,80,0.30) 0%, rgba(11,37,80,0.05) 35%, rgba(11,37,80,0.55) 100%),
    linear-gradient(95deg, rgba(11,37,80,0.30) 0%, rgba(11,37,80,0) 60%);
}
.high-performance-page .hp-hero.hp-overlay--light .hp-hero-overlay {
  background:
    linear-gradient(180deg, rgba(11,37,80,0.42) 0%, rgba(11,37,80,0.10) 35%, rgba(11,37,80,0.70) 100%),
    linear-gradient(95deg, rgba(11,37,80,0.42) 0%, rgba(11,37,80,0) 60%);
}
.high-performance-page .hp-hero.hp-overlay--dark .hp-hero-overlay {
  background:
    linear-gradient(180deg, rgba(11,37,80,0.70) 0%, rgba(11,37,80,0.30) 35%, rgba(11,37,80,0.92) 100%),
    linear-gradient(95deg, rgba(11,37,80,0.70) 0%, rgba(11,37,80,0.10) 60%);
}
.high-performance-page .hp-hero.hp-overlay--darker .hp-hero-overlay {
  background:
    linear-gradient(180deg, rgba(11,37,80,0.85) 0%, rgba(11,37,80,0.50) 35%, rgba(11,37,80,0.98) 100%),
    linear-gradient(95deg, rgba(11,37,80,0.85) 0%, rgba(11,37,80,0.25) 60%);
}
.high-performance-page .hp-hero-body {
  position: relative; z-index: 2;
  width: 100%;
  padding: 0 48px 96px;
  max-width: 1640px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px; align-items: end;
}
.high-performance-page .hp-hero-content { min-width: 0; }
.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: 28px;
}
.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); }
}
.high-performance-page .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;
}
.high-performance-page .hp-hero-ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.high-performance-page .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-hstat {
  background: rgba(11,37,80,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 28px 26px;
}
.high-performance-page .hp-hstat-n {
  font-size: 56px; font-weight: 600;
  line-height: 1; color: #fff; letter-spacing: -.02em;
}
.high-performance-page .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-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;
}
.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; }
}

/* ════════════════════════════════════════════════════════════
   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%;
}
.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 `hp_promo_overlay` field. */
.high-performance-page .hp-promo-strip.hp-overlay--lighter .hp-promo-veil {
  background: linear-gradient(180deg, rgba(11,37,80,.25) 0%, rgba(11,37,80,.60) 100%);
}
.high-performance-page .hp-promo-strip.hp-overlay--light .hp-promo-veil {
  background: linear-gradient(180deg, rgba(11,37,80,.40) 0%, rgba(11,37,80,.74) 100%);
}
.high-performance-page .hp-promo-strip.hp-overlay--dark .hp-promo-veil {
  background: linear-gradient(180deg, rgba(11,37,80,.72) 0%, rgba(11,37,80,.95) 100%);
}
.high-performance-page .hp-promo-strip.hp-overlay--darker .hp-promo-veil {
  background: linear-gradient(180deg, rgba(11,37,80,.88) 0%, rgba(11,37,80,1) 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;
}
.high-performance-page .hp-promo-season {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  padding: 7px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.high-performance-page .hp-promo-season-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hp-green-lt); display: inline-block;
  box-shadow: 0 0 0 3px rgba(165,214,167,.25);
  flex-shrink: 0;
}
.high-performance-page .hp-promo-title {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 600; line-height: 1.0;
  color: #fff; letter-spacing: -0.015em; margin: 0;
}
.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 {
  padding: 56px clamp(28px, 5vw, 64px);
  display: flex; flex-direction: column; justify-content: center;
  gap: 32px;
}
.high-performance-page .hp-promo-tiers {
  display: flex; flex-direction: column; gap: 0;
}
.high-performance-page .hp-promo-tier {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hp-border);
  transition: padding-left .2s ease;
}
.high-performance-page .hp-promo-tier:first-child { border-top: 1px solid var(--hp-border); }
.high-performance-page .hp-promo-tier:hover { padding-left: 6px; }
.high-performance-page .hp-pt-num {
  font-size: 13px; font-weight: 600;
  color: var(--hp-text-soft); letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.high-performance-page .hp-pt-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.high-performance-page .hp-pt-name {
  font-size: 17px; font-weight: 600; color: var(--hp-text);
  letter-spacing: -0.01em; line-height: 1.2;
}
.high-performance-page .hp-pt-meta {
  font-size: 14px; color: var(--hp-text-soft);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.high-performance-page .hp-pt-price {
  font-size: 12px; color: var(--hp-text-soft);
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.high-performance-page .hp-pt-price strong {
  font-weight: 600; color: var(--hp-text); font-size: 16px;
  display: block; line-height: 1.2;
}
.high-performance-page .hp-promo-tier-feat {
  background: #fff;
  margin: 0 -20px; padding: 22px 20px !important;
  border-radius: 4px;
  border: 1px solid var(--hp-blue-dk);
  border-top: 1px solid var(--hp-blue-dk) !important;
}
.high-performance-page .hp-promo-tier-feat:hover { padding-left: 26px !important; }
.high-performance-page .hp-promo-tier-feat + .hp-promo-tier { border-top: none; }
.high-performance-page .hp-promo-tier-feat .hp-pt-num { color: var(--hp-blue-dk); font-weight: 700; }
.high-performance-page .hp-promo-tier-feat .hp-pt-name { font-size: 19px; }
.high-performance-page .hp-promo-tier-feat .hp-pt-price strong { color: var(--hp-blue-dk); font-size: 18px; }
.high-performance-page .hp-pt-tag {
  display: inline-block; margin-bottom: 6px;
  background: var(--hp-green); color: #fff;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 3px; align-self: flex-start;
}
.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 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;
}
.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; }

/* ════════════════════════════════════════════════════════════
   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;
}
.high-performance-page .hp-alumni-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.high-performance-page .hp-alumni-card {
  position: relative; overflow: hidden;
  background: var(--hp-blue-dk);
  aspect-ratio: 3/4; cursor: pointer;
}
.high-performance-page .hp-alumni-card img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  transition: transform .8s ease;
}
/* Per-card focal-point modifiers — most visually impactful at tablet/mobile
   where the photo crops to landscape and a portrait athlete photo can lose
   the head or feet. Selectors carry one extra class than the base
   (`.hp-alumni-card.hp-alumni-focal--top`) so they reliably override the
   base's `object-position: center 20%` in the cascade. */
.high-performance-page .hp-alumni-card.hp-alumni-focal--top img    { object-position: center top; }
.high-performance-page .hp-alumni-card.hp-alumni-focal--bottom img { object-position: center bottom; }
.high-performance-page .hp-alumni-card.hp-alumni-focal--center img { object-position: center center; }
.high-performance-page .hp-alumni-card:hover img,
.high-performance-page .hp-alumni-card:focus-visible img { transform: scale(1.05); }
.high-performance-page .hp-alumni-card:focus-visible {
  outline: 2px solid var(--hp-green-lt); outline-offset: 4px;
}
.high-performance-page .hp-alumni-hint {
  position: absolute; top: 16px; right: 16px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: rgba(255,255,255,.92); color: var(--hp-blue-dk);
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px; backdrop-filter: blur(4px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.high-performance-page .hp-alumni-hint svg {
  width: 12px; height: 12px;
  stroke: var(--hp-green); fill: none; stroke-width: 2;
}
.high-performance-page .hp-alumni-card:hover .hp-alumni-hint,
.high-performance-page .hp-alumni-card:focus-within .hp-alumni-hint {
  opacity: 0; transform: translateY(-4px);
}
.high-performance-page .hp-alumni-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,37,80,0) 35%, rgba(11,37,80,0.92) 100%);
  transition: opacity .4s ease;
}
.high-performance-page .hp-alumni-card:hover::after,
.high-performance-page .hp-alumni-card:focus-within::after { opacity: 0; }
.high-performance-page .hp-alumni-quote {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px 30px;
  background: linear-gradient(180deg, rgba(11,37,80,0.55) 0%, rgba(11,37,80,0.92) 60%);
  color: #fff; opacity: 0; transition: opacity .45s ease;
  pointer-events: none;
}
.high-performance-page .hp-alumni-card:hover .hp-alumni-quote,
.high-performance-page .hp-alumni-card:focus-within .hp-alumni-quote { opacity: 1; }
/* Hide body content when quote is showing so the badge/name don't bleed through
   the semi-transparent quote gradient. */
.high-performance-page .hp-alumni-card:hover .hp-alumni-body,
.high-performance-page .hp-alumni-card:focus-within .hp-alumni-body { opacity: 0; }
.high-performance-page .hp-alumni-body { transition: opacity .35s ease; }
.high-performance-page .hp-q-mark {
  font-size: 96px; line-height: .6;
  color: var(--hp-green-lt); margin-bottom: 4px;
}
.high-performance-page .hp-alumni-quote p {
  font-size: 19px; line-height: 1.35; font-weight: 500;
  letter-spacing: -.005em; margin-bottom: 14px;
}
.high-performance-page .hp-alumni-quote cite {
  font-style: normal; font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--hp-green-lt);
}
.high-performance-page .hp-alumni-body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 32px 30px; color: #fff;
}
.high-performance-page .hp-alumni-badge {
  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; margin-bottom: 16px;
}
.high-performance-page .hp-alumni-badge-blue,
.high-performance-page .hp-alumni-badge-circle { background: var(--hp-blue); }
.high-performance-page .hp-alumni-name {
  font-size: 32px; font-weight: 600;
  line-height: 1.05; letter-spacing: -.01em; margin-bottom: 8px;
}
.high-performance-page .hp-alumni-meta {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.7); letter-spacing: .04em;
}
.high-performance-page .hp-alumni-stats {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.18);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.high-performance-page .hp-alumni-stats li {
  font-size: 13px; color: rgba(255,255,255,.85);
  display: flex; flex-direction: column;
}
.high-performance-page .hp-alumni-stats strong {
  font-size: 22px; font-weight: 600;
  color: var(--hp-green-lt); line-height: 1;
}
.high-performance-page .hp-alumni-stats span {
  font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 4px;
}

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

.high-performance-page .hp-programs {
  background: var(--hp-bg-soft); padding: 140px 0;
}
.high-performance-page .hp-prog-rail {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.high-performance-page .hp-prog-card {
  position: relative; 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-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 {
  aspect-ratio: 4/5; overflow: hidden;
  background: var(--hp-blue-dk); position: relative;
}
.high-performance-page .hp-prog-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.high-performance-page .hp-prog-card:hover .hp-prog-thumb img { transform: scale(1.06); }
.high-performance-page .hp-prog-popular-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--hp-green); color: #fff;
  font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 10px;
}
.high-performance-page .hp-prog-body {
  padding: 24px 22px 28px;
  display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.high-performance-page .hp-prog-idx {
  font-size: 12px; font-weight: 600;
  letter-spacing: .18em; color: var(--hp-text-soft);
}
.high-performance-page .hp-prog-name {
  font-size: 22px; font-weight: 600;
  line-height: 1.1; color: var(--hp-text);
}
.high-performance-page .hp-prog-desc {
  font-size: 14px; color: var(--hp-text-soft);
  line-height: 1.6; flex: 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-feat .hp-prog-pill { background: var(--hp-green); color: #fff; }
.high-performance-page .hp-prog-feat .hp-prog-name { color: var(--hp-blue-dk); }

/* ════════════════════════════════════════════════════════════
   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; }
.high-performance-page .hp-coach-arrow {
  width: 56px; height: 56px;
  background: #fff; color: var(--hp-text);
  border: 1px solid var(--hp-border);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s;
}
.high-performance-page .hp-coach-arrow svg { width: 18px; height: 18px; }
.high-performance-page .hp-coach-arrow:hover:not(:disabled) {
  background: var(--hp-blue-dk); color: #fff; border-color: var(--hp-blue-dk);
}
.high-performance-page .hp-coach-arrow:disabled { opacity: .3; 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);
}
.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;
}
.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 {
  max-width: 480px; font-size: 19px; line-height: 1.65;
  color: var(--hp-text-soft); text-align: left;
}
.high-performance-page .hp-intl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 28px; margin-bottom: 96px;
}
.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; }
.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;
}
.high-performance-page .hp-intl-pillars {
  display: grid; grid-template-rows: repeat(3, 1fr);
  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;
}
.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; }
.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;
}

/* ════════════════════════════════════════════════════════════
   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%;
}
.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: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  background: var(--hp-bg-soft); color: var(--hp-blue-dk);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
}
.high-performance-page .hp-mental-staff-card--green .hp-mental-staff-avatar {
  background: rgba(0,138,82,.1); color: var(--hp-green);
}
.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 top; }
.high-performance-page .hp-player-card.hp-player-focal--bottom .hp-player-img img { object-position: center bottom; }
.high-performance-page .hp-player-card.hp-player-focal--center .hp-player-img img { object-position: center center; }
.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;
}
.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. Same options
   as the NCAA section (top / center / bottom). */
.high-performance-page .hp-contact-focal--top::before    { background-position: center top; }
.high-performance-page .hp-contact-focal--bottom::before { background-position: center bottom; }
.high-performance-page .hp-contact-focal--center::before { background-position: center center; }
/* 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;
  }
}

/* ════════════════════════════════════════════════════════════
   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--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 {
    grid-template-columns: 1fr;
    gap: 48px; padding: 140px 32px 60px;
  }
  .high-performance-page .hp-hero-stats {
    grid-template-columns: 1fr 1fr; max-width: 560px;
  }
  .high-performance-page .hp-hstat-n { font-size: 56px; }

  /* 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; }
  .high-performance-page .hp-promo-body { padding: 48px 32px; }

  /* 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 */
  .high-performance-page .hp-prog-rail { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* 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; }
  .high-performance-page .hp-coach-card { width: 320px; scroll-snap-align: start; flex-shrink: 0; }

  /* 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-intro { max-width: none; }
  .high-performance-page .hp-intl-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 72px; }
  .high-performance-page .hp-intl-feature { min-height: 380px; }
  .high-performance-page .hp-intl-stories { grid-template-columns: 1fr 1fr; gap: 20px; }
  .high-performance-page .hp-intl-stories .hp-story-card:last-child { display: none; }

  /* 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 (stacked card on tablet + mobile) ─────────
     Desktop uses a hover-reveal overlay design — the quote and badge sit
     on top of the photo. On touch devices that pattern breaks (no hover),
     and the badge/name/stats overlap the photo awkwardly (visible in the
     tablet screenshot). At <=1024px the card converts to a vertical stack:
     photo at top, then a navy panel below containing badge → name → meta
     → stats → quote, all in normal flow with the quote always visible. */
  .high-performance-page .hp-alumni-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .high-performance-page .hp-alumni-card {
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    cursor: default;
    background: var(--hp-blue-dk);
  }
  /* Hide the affordance pill — no hover available on touch */
  .high-performance-page .hp-alumni-card .hp-alumni-hint { display: none; }
  /* Photo becomes contained, takes the top of the card */
  .high-performance-page .hp-alumni-card > img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center 20%;
    transition: none;
  }
  /* No bottom gradient (image isn't behind text anymore); no image zoom */
  .high-performance-page .hp-alumni-card::after { content: none; }
  .high-performance-page .hp-alumni-card:hover img,
  .high-performance-page .hp-alumni-card:focus-visible img { transform: none; }
  /* Body flows under the image in normal positioning */
  .high-performance-page .hp-alumni-body {
    position: static;
    inset: auto;
    padding: 28px 26px 0;
    opacity: 1 !important;
    transition: none;
    display: block;
  }
  /* Defeat the desktop hover-fade-body rule on touch */
  .high-performance-page .hp-alumni-card:hover .hp-alumni-body,
  .high-performance-page .hp-alumni-card:focus-within .hp-alumni-body {
    opacity: 1 !important;
  }
  /* Quote also flows below body, always visible, with a divider */
  .high-performance-page .hp-alumni-quote {
    position: static;
    inset: auto;
    opacity: 1 !important;
    background: none;
    transition: none;
    pointer-events: auto;
    margin: 18px 26px 0;
    padding: 20px 0 28px;
    border-top: 1px solid rgba(255,255,255,.18);
  }
  /* Tighten the name + quote scale for the compact card */
  .high-performance-page .hp-alumni-card .hp-alumni-name { font-size: 26px; }
  .high-performance-page .hp-alumni-card .hp-q-mark {
    font-size: 56px;
    margin-bottom: 4px;
  }
  .high-performance-page .hp-alumni-card .hp-alumni-quote p {
    font-size: 16px;
    line-height: 1.45;
    margin-bottom: 12px;
  }
}

/* ════════════════════════════════════════════════════════════
   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-body { padding: 120px 20px 48px; gap: 36px; }
  .high-performance-page .hp-hero-eyebrow { font-size: 11px; gap: 10px; }
  .high-performance-page .hp-hero-sub { font-size: 17px; margin: 24px 0 32px; }
  .high-performance-page .hp-hero-ctas { flex-direction: column; align-items: stretch; }
  .high-performance-page .hp-hero-ctas .hp-btn { width: 100%; }
  .high-performance-page .hp-hstat { padding: 20px 16px; }
  .high-performance-page .hp-hstat-n { font-size: 40px; }
  .high-performance-page .hp-hstat-l { font-size: 11px; }
  .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: 32px; }
  .high-performance-page .hp-promo-body { padding: 32px 20px; gap: 24px; }
  .high-performance-page .hp-promo-tier { gap: 14px; padding: 14px 0; }
  .high-performance-page .hp-promo-tier-feat { margin: 0 -12px; padding: 18px 12px; }
  .high-performance-page .hp-promo-tier-feat:hover { padding-left: 16px; }
  .high-performance-page .hp-pt-name { font-size: 16px; }
  .high-performance-page .hp-promo-tier-feat .hp-pt-name { font-size: 17px; }

  /* 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 — tablet's stacked-card pattern carries through to mobile.
     Only override what needs to differ at this width: single-column grid,
     wider photo aspect for the larger card, slightly tighter inner padding.
     All the structural rules (vertical stack, photo on top, body + quote
     below, no hover-reveal) live in the @media (max-width: 1024px) block. */
  .high-performance-page .hp-alumni-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .high-performance-page .hp-alumni-card > img {
    aspect-ratio: 16/10;
    object-position: center 15%;
  }
  .high-performance-page .hp-alumni-body { padding: 24px 22px 0; }
  .high-performance-page .hp-alumni-quote {
    margin: 16px 22px 0;
    padding: 18px 0 24px;
  }

  /* Programs */
  .high-performance-page .hp-prog-rail { grid-template-columns: 1fr; gap: 16px; }
  .high-performance-page .hp-prog-card { display: grid; grid-template-columns: 130px 1fr; }
  .high-performance-page .hp-prog-thumb { aspect-ratio: auto; height: 100%; }
  .high-performance-page .hp-prog-body { padding: 18px 20px; }

  /* Coaching */
  .high-performance-page .hp-coach-outer { padding-left: 20px; padding-right: 20px; }
  .high-performance-page .hp-coach-card { width: 280px; }

  /* 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; }
  .high-performance-page .hp-intl-stories .hp-story-card:last-child { display: flex; }

  /* 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; }
  .high-performance-page .hp-val-card { 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; }
}

/* ════════════════════════════════════════════════════════════
   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 {
    background-color: #0B2550;
  }
}