/* ==========================================================================
   Phoenix Comprehensive Project — Site styles
   Brand tokens: Phoenix Black #050505 · Midnight Navy #071426 · Deep Navy #0B1F3A
                 Phoenix Gold #D4AF37 · Phoenix Orange #E86A24 · Pure White #FFFFFF
   Type: Cormorant Garamond (headlines) · Inter (body / UI)
   ========================================================================== */

:root {
  --pcp-black: #050505;
  /* THE PAGE GROUND — Deep Burgundy. Every page, section, bar, panel and
     footer surface is painted from this one value; see the theme block lower
     in this file. Black is still here as --pcp-black for anything that is
     genuinely ink rather than a surface (button text on gold, for instance).

     Settled here after #9E101B and #650810. Those were bright enough to eat
     the site's translucent white text and all of its small gold caps —
     measured at 2.8:1 for a form label where 4.5 is needed. #260000 sits at
     a relative luminance of 0.004, near enough to black that every text
     colour keeps the contrast it had, which is why none of them had to
     change. */
  --pcp-burgundy: #260000;
  /* Two relatives, for surfaces that sit ON the ground. On a ground this
     dark a panel has to be LIGHTER to read as raised — going darker would
     just be black on near-black. */
  /* #360606 lifted the cards nicely but left the Business card body copy at
     4.40:1 against a 4.5 requirement — the only text anywhere that the new
     ground made worse. A shade darker clears it without the cards sinking
     into the page, and no text colour had to move. */
  --pcp-burgundy-raise: #280303;
  --pcp-burgundy-deep: #1C0000;
  --pcp-navy: #071426;
  --pcp-deep: #0B1F3A;
  --pcp-gold: #D4AF37;
  --pcp-gold-light: #F1D27A;
  --pcp-gold-dark: #B8891B;
  --pcp-orange: #E86A24;
  --pcp-white: #FFFFFF;

  --card-bg: #0B0B0B;
  --card-border: rgba(212, 175, 55, 0.20);
  --text: rgba(255, 255, 255, 0.82);
  --text-muted: rgba(255, 255, 255, 0.58);
  --text-faint: rgba(255, 255, 255, 0.40);

  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 16px;
  --radius-sm: 12px;
  /* Editorial chapters (Founder, Business, Reserve) use a tighter corner so
     they read as structured rather than soft. Two radii, each with a role. */
  --radius-edit: 4px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 40px -24px rgba(0, 0, 0, 0.8);
  --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -30px rgba(212, 175, 55, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.38);
  --shadow-gold: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 12px 32px -12px rgba(212, 175, 55, 0.6);
}

/* --- Base ------------------------------------------------------------- */
html { scroll-behavior: smooth; overflow-x: clip; } /* clip, not hidden: no scroll container, so sticky/pins are unaffected; covers iOS where body overflow-x alone is ignored */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background-color: var(--pcp-black);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip`, not `hidden`. `overflow-x: hidden` makes <body> a scroll container,
     which silently disables `position: sticky` on every child — including the
     site header. `clip` blocks horizontal scroll without doing that; html
     carries the same rule as a safety net. */
  overflow-x: clip;
}

::selection { background: rgba(212, 175, 55, 0.35); color: #fff; }

h1, h2, h3, h4, .font-display {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  color: var(--pcp-white);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 600;
}
h1 { letter-spacing: -0.03em; }

:focus-visible {
  outline: 2px solid var(--pcp-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Page background: deep navy-black gradient + grain -----------------
   The warm-gold ambient light is now owned entirely by PCPMotion.CinematicBackground
   (assets/css/cinematic.css) so there is exactly one gold light source per page,
   not two stacked in the same corner. This gradient stays navy/black only. */
.bg-page {
  position: relative;
  isolation: isolate;
  background-color: var(--pcp-black);
  background-image:
    radial-gradient(900px 600px at -10% 20%, rgba(11, 31, 58, 0.9), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(7, 20, 38, 0.95), transparent 65%),
    linear-gradient(180deg, var(--pcp-black) 0%, var(--pcp-navy) 100%);
  background-attachment: fixed;
}
@media (max-width: 767px) { .bg-page { background-attachment: scroll; } }

.grain { position: relative; }
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Excludes .pcp-cinematic-bg — the global fixed atmosphere layer (assets/css/cinematic.css)
   needs to stay position:fixed and z-index:-1, not be forced to relative/1 like real content. */
.grain > *:not(.pcp-cinematic-bg) { position: relative; z-index: 1; }

/* Surface layering: base → elevated → floating */
.surface-elevated {
  background: linear-gradient(180deg, rgba(11, 31, 58, 0.55), rgba(7, 20, 38, 0.35));
  border-top: 1px solid rgba(212, 175, 55, 0.12);
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
}
.surface-floating {
  background: rgba(13, 5, 5, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

/* --- Gold text ---------------------------------------------------------- */
.text-gold-gradient {
  background: linear-gradient(120deg, #F1D27A 0%, #D4AF37 45%, #B8891B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gold-orange-gradient {
  background: linear-gradient(120deg, #F1D27A 0%, #D4AF37 40%, #E86A24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  /* No flex gap. Character-split reveals (data-reveal="chars") turn every
     glyph into its own flex item, so a gap here became 12px of tracking
     between letters and pushed eyebrows past the mobile viewport. The rule
     spacing lives on the pseudo-elements instead. */
  gap: 0;
  max-width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pcp-gold);
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  flex-shrink: 0;
  margin-right: 0.75rem;
  background: linear-gradient(90deg, transparent, var(--pcp-gold));
}
/* Restore the tracking the text would have had between split glyphs. */
.eyebrow > .pcp-mask { margin-right: 0.22em; }
.eyebrow > .pcp-mask:last-child { margin-right: 0; }
.eyebrow.eyebrow-center::after {
  content: "";
  width: 2rem;
  height: 1px;
  flex-shrink: 0;
  margin-left: 0.75rem;
  background: linear-gradient(90deg, var(--pcp-gold), transparent);
}

.divider-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
}

/* --- Logo lockup --------------------------------------------------------- */
.logo-mark {
  height: 2.5rem;
  width: auto;
}
.logo-word {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
.logo-sub {
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

/* --- Navigation ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
}
/* The body-level `.grain > *` lift above gives EVERY direct child of body
   `position: relative; z-index: 1` so content sits over the fixed cinematic
   background — and it outranks the rule above, so <header> and <main> ended up
   equal siblings at z=1. <main> is later in the DOM, so it painted over the
   header and over the mobile menu that lives inside it. Same specificity as
   the grain rule, declared later, so the header wins the stacking order. */
.grain > .site-header { position: sticky; z-index: 50; }
/* Same clobbering: the skip link's `position: absolute` was overridden to
   relative, so it took 34px of layout space (shifted off-screen) and left a
   dead strip above the header — which then jumped from 24px to 0 on the first
   scroll once sticky worked. Absolute again: no strip, header flush at 0. */
.grain > .skip-link { position: absolute; z-index: 100; } /* above the z-50 header when focused */
/* Slightly more opaque once the page has scrolled, for readability over
   content. site.js toggles the class at 12px. Home has its own tint. */
.site-header { transition: background-color 320ms ease; }
.site-header.is-scrolled { background-color: rgba(13, 5, 5, 0.88); }
/* A sticky header would otherwise cover the top of any anchored target
   (#orientation, #tracks, #faq, #main, focused form fields). */
main [id] { scroll-margin-top: 6rem; }
.nav-link {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.15rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  /* Rest → hover in ~280ms: off-white to warm gold, a 1px lift. Only colour
     and transform animate, so it composites. */
  transition: color 280ms ease, transform 280ms var(--ease-spring);
  will-change: transform;
}
/* Soft gold illumination beneath the text. Opacity 0 at rest — nothing glows
   until the pointer arrives. */
.nav-link::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -0.15rem;
  width: 78%; height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(212, 175, 55, 0.18) 0%, transparent 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
/* Thin gold underline, growing from the centre outward. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 1px;
  background: var(--pcp-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 320ms var(--ease-spring);
}
.nav-link:hover,
.nav-link:focus-visible { color: var(--pcp-gold); transform: translateY(-1px); }
.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }
.nav-link:hover::before,
.nav-link:focus-visible::before { opacity: 1; }
.nav-link:active { transform: translateY(0); }
/* Active page: gold, underlined, full opacity — identifiable without hover. */
.nav-link[aria-current="page"] { color: var(--pcp-gold); opacity: 1; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
/* Full-width rows in the mobile menu take neither the lift nor the glow. */
.mobile-nav .nav-link::before { display: none; }
.mobile-nav .nav-link:hover,
.mobile-nav .nav-link:focus-visible { transform: none; }

/* Header CTA: a touch brighter, ≤1.02 scale, one restrained light sweep. */
.site-header .btn-primary { overflow: hidden; }
.site-header .btn-primary::before {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%; left: 0;
  width: 38%;
  z-index: 1;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.38) 50%, transparent 100%);
  transform: skewX(-18deg) translateX(-160%);
  opacity: 0;
  pointer-events: none;
  transition: transform 640ms var(--ease-spring), opacity 180ms ease;
}
.site-header .btn-primary:hover,
.site-header .btn-primary:focus-visible { transform: translateY(-1px) scale(1.015); }
.site-header .btn-primary:hover::before,
.site-header .btn-primary:focus-visible::before { transform: skewX(-18deg) translateX(420%); opacity: 1; }
.site-header .btn-primary:active { transform: translateY(0) scale(0.99); }

.mobile-nav {
  background: linear-gradient(180deg, #0D0505 0%, #071426 100%);
  transform-origin: top;
  transition: transform 0.5s var(--ease-spring);
}
.mobile-nav[hidden] { display: block !important; opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden; }
.mobile-nav .nav-link { display: block; padding: 0.85rem 0; font-size: 0.9rem; }

.hamburger span {
  display: block;
  height: 1.5px;
  width: 22px;
  background: var(--pcp-gold);
  transition: transform 0.45s var(--ease-spring), opacity 0.3s;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  border-radius: 999px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.45s var(--ease-spring), box-shadow 0.45s var(--ease-spring);
  will-change: transform;
}
.btn-sm { padding: 0.7rem 1.25rem; font-size: 0.7rem; }
.btn-lg { padding: 1.1rem 2.25rem; font-size: 0.82rem; }

.btn-primary {
  color: var(--pcp-black);
  background: linear-gradient(135deg, #F1D27A 0%, #D4AF37 55%, #C9A22F 100%);
  box-shadow: var(--shadow-gold);
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #FFF0B8 0%, #F1D27A 50%, #D4AF37 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.btn-primary > * { position: relative; z-index: 1; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 18px 40px -14px rgba(212,175,55,0.75); }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-secondary {
  color: var(--pcp-gold);
  border: 1px solid rgba(212, 175, 55, 0.6);
  background: rgba(212, 175, 55, 0.04);
}
.btn-secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(212, 175, 55, 0.12);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.btn-secondary > * { position: relative; z-index: 1; }
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -16px rgba(212, 175, 55, 0.5); border-color: var(--pcp-gold); }
.btn-secondary:hover::after { opacity: 1; }
.btn-secondary:active { transform: translateY(0) scale(0.98); }

.btn-ghost {
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.14);
}
.btn-ghost:hover { transform: translateY(-2px); color: #fff; border-color: rgba(255,255,255,0.3); }
.btn-ghost:active { transform: translateY(0) scale(0.98); }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pcp-gold);
  padding: 0.5rem 0;
}
.btn-text svg { transition: transform 0.45s var(--ease-spring); }
.btn-text:hover { color: var(--pcp-gold-light); }
.btn-text:hover svg { transform: translateX(6px); }
.btn-text:active svg { transform: translateX(2px); }

.btn-dark {
  color: var(--pcp-gold);
  background: var(--pcp-black);
  box-shadow: 0 16px 40px -18px rgba(0,0,0,0.8);
}
.btn-dark:hover { transform: translateY(-2px); color: var(--pcp-gold-light); }
.btn-dark:active { transform: translateY(0) scale(0.98); }

/* --- Cards ----------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.55s var(--ease-spring), box-shadow 0.55s var(--ease-spring);
  will-change: transform;
}
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(400px 200px at 20% 0%, rgba(212, 175, 55, 0.14), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.card:hover::before { opacity: 1; }
.card > * { position: relative; }
.card-static:hover { transform: none; box-shadow: var(--shadow-card); }
.card-static:hover::before { opacity: 0; }

.card-featured {
  background:
    linear-gradient(180deg, rgba(212, 175, 55, 0.08), rgba(11, 11, 11, 0) 40%),
    var(--card-bg);
  border-color: rgba(212, 175, 55, 0.45);
}

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.10), rgba(212, 175, 55, 0.02));
  color: var(--pcp-gold);
  flex-shrink: 0;
}
.icon-tile svg { width: 1.35rem; height: 1.35rem; }

/* --- Imagery: gradient overlay + colour treatment ------------------------ */
.img-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: var(--pcp-deep);
  isolation: isolate;
}
.img-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}
.img-frame::before { /* colour treatment layer */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, var(--pcp-deep), var(--pcp-gold-dark));
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
}
.img-frame::after { /* gradient overlay */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(13, 5, 5, 0.72), rgba(13, 5, 5, 0.1) 55%, transparent);
  pointer-events: none;
}
.img-frame > .img-caption { position: absolute; z-index: 3; }

.ring-gold {
  box-shadow: 0 0 0 1px rgba(212,175,55,0.35), 0 0 0 8px rgba(212,175,55,0.06), 0 40px 80px -40px rgba(212,175,55,0.35);
}

/* --- Reveal-on-scroll (transform & opacity only) ------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 0.9s var(--ease-spring);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card, .nav-link, .nav-link::before, .nav-link::after, .btn-text svg, .site-header { transition: none; }
  .nav-link:hover, .nav-link:focus-visible, .site-header .btn-primary:hover { transform: none; }
  .site-header .btn-primary::before { display: none; }
}

/* --- Forms ------------------------------------------------------------------ */
.field-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field {
  width: 100%;
  padding: 0.9rem 1.05rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: rgba(255, 255, 255, 0.025);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
.field::placeholder { color: rgba(255,255,255,0.32); }
.field:hover { border-color: rgba(212, 175, 55, 0.4); }
.field:focus { outline: none; border-color: var(--pcp-gold); box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.14); }
.field:focus-visible { outline: none; }
.field[aria-invalid="true"] { border-color: var(--pcp-orange); box-shadow: 0 0 0 4px rgba(232, 106, 36, 0.14); }
select.field {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23D4AF37' stroke-width='1.5'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}
select.field option { background: var(--pcp-card); color: #fff; }
.field-error { display: none; margin-top: 0.4rem; font-size: 0.78rem; color: #F0A277; }
.field[aria-invalid="true"] ~ .field-error,
label:has(.check[aria-invalid="true"]) + .field-error { display: block; }

.check {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem; height: 1.15rem;
  border-radius: 5px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(255,255,255,0.03);
  display: inline-grid;
  place-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.check::before {
  content: "";
  width: 0.6rem; height: 0.6rem;
  border-radius: 2px;
  background: linear-gradient(135deg, #F1D27A, #D4AF37);
  transform: scale(0);
  transition: transform 0.35s var(--ease-spring);
}
.check:checked::before { transform: scale(1); }
.check:checked { border-color: var(--pcp-gold); }

/* --- Misc components -------------------------------------------------------- */
.stat-number {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.timeline { position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(212,175,55,0.6), rgba(212,175,55,0.08));
}
.timeline-dot {
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1.15rem; height: 1.15rem;
  border-radius: 999px;
  background: var(--pcp-black);
  border: 1px solid var(--pcp-gold);
  display: grid; place-content: center;
}
.timeline-dot::after { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 999px; background: var(--pcp-gold); }

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: marquee 38s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

details.faq { border-bottom: 1px solid rgba(212,175,55,0.14); }
details.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .faq-icon { transition: transform 0.45s var(--ease-spring); color: var(--pcp-gold); flex-shrink: 0; }
details.faq[open] summary .faq-icon { transform: rotate(45deg); }
details.faq summary:hover h3 { color: var(--pcp-gold-light); }

.quote-mark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 5rem;
  line-height: 0.6;
  color: rgba(212,175,55,0.45);
}

.avatar {
  width: 3rem; height: 3rem;
  border-radius: 999px;
  display: grid; place-content: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--pcp-black);
  background: linear-gradient(135deg, #F1D27A, #D4AF37 60%, #B8891B);
  flex-shrink: 0;
}

.drop-cap::first-letter {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 3.6em;
  line-height: 0.8;
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--pcp-gold);
}

.gold-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #F1D27A 0%, #D4AF37 40%, #E86A24 100%);
  color: var(--pcp-black);
}
.gold-band h2, .gold-band h3 { color: var(--pcp-black); }
.gold-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 300px at 90% 10%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(500px 300px at 10% 100%, rgba(13,5,5,0.25), transparent 60%);
}
.gold-band > * { position: relative; z-index: 1; }

.link-muted { color: var(--text-muted); }
.link-muted:hover { color: var(--pcp-gold); }
.link-muted:active { color: var(--pcp-gold-light); }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: 0.6rem 1rem; border-radius: 8px;
  background: var(--pcp-gold); color: var(--pcp-black); font-weight: 600; font-size: 0.8rem;
}
.skip-link:focus { top: 1rem; }

/* ==========================================================================
   FOOTER — subtle upgrade
   Applies to BOTH footer implementations (the shared Tailwind-utility footer
   and the home page's `.site-footer`) by targeting the element and the hooks
   they share, so no footer markup had to change and no build variant needed
   regenerating. Calm and functional: nothing here animates on scroll.
   ========================================================================== */

/* The footer emerges from the page rather than starting at a hard border. */
body > footer {
  position: relative;
  background-image: linear-gradient(180deg, rgba(2, 2, 3, 0) 0%, rgba(2, 2, 3, 0.55) 22%, rgba(2, 2, 3, 0.85) 100%);
}

/* A single hairline across the top, fading at both ends — quieter than a
   full-width border. */
body > footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.22) 18%, rgba(212, 175, 55, 0.22) 82%, transparent);
}

/* Footer links: a gold underline that grows from the left on engagement,
   instead of only a colour shift. Underline is animated with transform, so
   it composites. */
body > footer .link-muted {
  position: relative;
  display: inline-block;
  transition: color 260ms ease;
}

body > footer .link-muted::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 340ms var(--ease-spring);
}

body > footer .link-muted:hover,
body > footer .link-muted:focus-visible { color: var(--pcp-gold); }

body > footer .link-muted:hover::after,
body > footer .link-muted:focus-visible::after { transform: scaleX(1); }

/* Every footer link needs a visible keyboard ring, including the icon-only
   social links. */
body > footer a:focus-visible {
  outline: 2px solid var(--pcp-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Social tiles in the shared footer use .icon-tile; the home footer uses
   .social and is styled in home.css. Give the shared one the same restrained
   lift so the two footers behave alike. */
body > footer .icon-tile {
  transition: transform 420ms var(--ease-spring), border-color 260ms ease;
}

body > footer .icon-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.55);
}

body > footer .icon-tile:active { transform: translateY(0); }

/* The bottom bar sits quieter than the columns above it. */
body > footer .divider-gold { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  body > footer .link-muted::after,
  body > footer .icon-tile { transition: none; }
  body > footer .icon-tile:hover { transform: none; }
}

/* ==========================================================================
   Mobile pass — cost reductions and touch targets, site-wide
   ========================================================================== */
@media (max-width: 767px) {
  /* Decorative 120px blurs on every page hero are the single most expensive
     paint on a phone. Halve the radius; the effect reads the same at 390px. */
  .blur-\[120px\] { filter: blur(56px); }
  /* Footer links were 20px tall. Padding lifts them to ~30px (WCAG 2.5.8 AA
     is 24px); negative margin keeps the visual rhythm unchanged. */
  body > footer .link-muted { padding-block: 0.3rem; margin-block: -0.3rem; }
}

/* ==========================================================================
   Header behaviour — added, not restructured
   --------------------------------------------------------------------------
   The markup, the five links, their destinations and the Reserve CTA are
   untouched. What changes is how the bar responds:

     --hdr   0 over the hero, 1 once scrolled. Driven continuously by
             assets/js/header.js so the transparent-to-dark change is a real
             fade rather than a class snapping between two states.

   Nothing here animates a layout property; it is background alpha, colour,
   opacity and a few pixels of transform.
   ========================================================================== */
.site-header {
  --hdr: 1;
  /* Overrides .surface-floating's flat tint so the bar can start invisible. */
  background-color: rgba(13, 5, 5, calc(0.88 * var(--hdr)));
  border-bottom-color: rgba(212, 175, 55, calc(0.12 * var(--hdr)));
  transition:
    background-color 260ms ease,
    border-bottom-color 260ms ease,
    transform 420ms var(--ease-spring),
    box-shadow 320ms ease;
  will-change: transform;
}
/* The blur is switched rather than scaled: backdrop-filter: blur(0) still
   costs a backdrop snapshot, so over the hero it is simply off. */
.site-header {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header.is-glass {
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.site-header.is-scrolled {
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.9);
}

/* Scrolling down: the bar settles back a few pixels and the links soften.
   This is a change of prominence, not a hide — the bar never leaves, and the
   logo and the Reserve CTA keep their full strength. */
.site-header.is-receded { transform: translate3d(0, -5px, 0); }
.site-header.is-receded .nav-link { opacity: 0.6; }
.nav-link { transition: color 280ms ease, transform 280ms var(--ease-spring), opacity 320ms ease; }

/* A finer underline: a hairline that is brightest at its centre and carries a
   little light, rather than a flat bar ruled edge to edge. */
.nav-link::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.9) 20%,
    var(--pcp-gold-light) 50%,
    rgba(212, 175, 55, 0.9) 80%,
    transparent 100%);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}
/* Hover still wins over the tracked state, on any link. */
.site-header .nav-link:hover::after,
.site-header .nav-link:focus-visible::after { transform: scaleX(1); }

/* The mobile panel needs the bar opaque behind it whatever the scroll state. */
.site-header.is-nav-open {
  --hdr: 1;
  transform: none;
}
.site-header.is-nav-open .nav-link { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: background-color 200ms linear, border-bottom-color 200ms linear; }
  .site-header.is-receded { transform: none; }
  .site-header.is-receded .nav-link { opacity: 1; }
}

/* Development-only slot label for declarative video slots
   (<div data-pcp-video="founder">). Rendered by assets/js/video.js on
   localhost only, so production never shows it. The Community section keeps
   its own label element, already styled beside its frames. */
.pcp-video-slot {
  position: absolute;
  z-index: 8;
  left: 0.85rem;
  bottom: 0.85rem;
  max-width: calc(100% - 1.7rem);
  padding: 0.32rem 0.6rem;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: rgba(241, 210, 122, 0.82);
  background: rgba(5, 5, 5, 0.66);
  border: 1px solid rgba(212, 175, 55, 0.22);
  pointer-events: none;
  overflow-wrap: anywhere;
}
/* A declarative slot is a positioned stage for whatever lands in it. */
[data-pcp-video] { position: relative; }
[data-pcp-video] > video,
[data-pcp-video] > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms var(--ease-spring);
}
[data-pcp-video].is-showing > video,
[data-pcp-video].is-showing > img { opacity: 1; }

/* ==========================================================================
   Verified proof — rendered by assets/js/results.js
   --------------------------------------------------------------------------
   Reads as evidence rather than advertising: the figure lands first, a
   hairline draws under it, then the label and its provenance follow. Nothing
   here is decorative enough to flatter a number that has not earned it.
   Only transform and opacity animate.
   ========================================================================== */
.proof-root[hidden] { display: none; }

.proof-metrics {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.proof-stat { position: relative; }

/* The number rises out of a mask rather than fading in. */
.proof-num-mask { display: block; overflow: hidden; }
.proof-num {
  display: block;
  color: #fff;
  transform: translateY(105%);
  transition: transform 900ms var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 90ms);
  font-variant-numeric: tabular-nums;
}
[data-proof-in] .proof-num { transform: translateY(0); }

/* The rule expands from the left once the figure has landed. */
.proof-rule {
  display: block;
  height: 1px;
  margin: 1rem 0 0;
  background: linear-gradient(90deg, var(--pcp-gold), rgba(212, 175, 55, 0.05));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 760ms var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 90ms + 320ms);
}
[data-proof-in] .proof-rule { transform: scaleX(1); }

.proof-label {
  margin-top: 0.85rem;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.proof-note {
  margin-top: 0.5rem;
  font-size: 0.76rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.42);
}
.proof-asof { color: rgba(255, 255, 255, 0.34); font-size: 0.72rem; }

/* Label and provenance follow the rule. */
.proof-label,
.proof-note {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 620ms ease, transform 620ms var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 90ms + 520ms);
}
[data-proof-in] .proof-label,
[data-proof-in] .proof-note { opacity: 1; transform: translateY(0); }

/* Stories */
.proof-stories {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.proof-story {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 110ms);
}
[data-proof-in].proof-story { opacity: 1; transform: translateY(0); }
.proof-quote { font-size: 1.05rem; line-height: 1.7; color: rgba(255, 255, 255, 0.85); }
.proof-cap { margin-top: 1.4rem; }
.proof-name { font-size: 0.9rem; font-weight: 600; color: #fff; }
.proof-role { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-top: 0.2rem; }

/* Achievements, events, milestones, international participation */
.proof-block { margin-top: 3.5rem; }
.proof-block-title {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pcp-gold);
  font-family: inherit;
  font-weight: 500;
}
.proof-list { margin: 1.25rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(212, 175, 55, 0.16); }
.proof-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.16);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-proof-in].proof-item { opacity: 1; transform: translateY(0); }
.proof-item:not(:has(.proof-item-value)) { grid-template-columns: 1fr; }
.proof-item-value {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.75rem;
  color: var(--pcp-gold);
  font-variant-numeric: tabular-nums;
}
.proof-item-title { color: rgba(255, 255, 255, 0.88); }
.proof-item-detail { margin-top: 0.3rem; font-size: 0.88rem; line-height: 1.65; color: rgba(255, 255, 255, 0.55); }

@media (prefers-reduced-motion: reduce) {
  .proof-num, .proof-rule, .proof-label, .proof-note, .proof-story, .proof-item {
    transition: none;
    transform: none;
    opacity: 1;
  }
  .proof-rule { transform: scaleX(1); }
}

/* ==========================================================================
   Mobile pass — dedicated, not shrunk
   --------------------------------------------------------------------------
   Findings from a 360/390px audit. Nothing here changes the desktop design.
   ========================================================================== */
@media (max-width: 767px) {
  /* Footer links measured 26–32px tall. Padding lifts every one past 44px
     without moving the text. */
  /* min-height rather than padding: padding has to be re-derived for every
     font size (the legal row is 12px, the list is 15px), and got 33 and 38px.
     A fixed 44px box with the text centred in it is exact for all of them. */
  body > footer .link-muted { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; }
  body > footer .link-muted::after { bottom: calc(50% - 0.8em); }

  /* Text links with an arrow ("See the results", "About PCP"); already
     inline-flex and centred, so the box just needs the height. */
  .btn-text { min-height: 2.75rem; }

  /* Native checkboxes are 18px; the label is the real target, so give it the
     height and the hit area comes free. */
  label:has(> .check) { min-height: 2.75rem; padding: 0.3rem 0; align-items: center; }

  /* A sticky header with an 18px backdrop blur is re-blurred on every scroll
     frame on a phone. Halve it; at this size the glass reads the same. */
  .site-header.is-glass {
    -webkit-backdrop-filter: blur(9px) saturate(130%);
    backdrop-filter: blur(9px) saturate(130%);
  }
}

/* The mobile menu height. The Tailwind class in the markup is now dvh; this is
   the fallback for anything that predates dynamic viewport units. */
@supports not (height: 100dvh) {
  .mobile-nav { height: calc(100vh - 76px); }
}

/* ==========================================================================
   Layout primitives shared by Home and About
   --------------------------------------------------------------------------
   These were .page-home-only. "Who are you becoming?" and "Most people are not
   missing ambition" now live on About with their design intact, so the rules
   they depend on are scoped to BOTH pages here — never global, so no other
   page can be affected. Home's remaining home.css rules still load after this
   file and keep winning wherever they overlap. Single source of truth.
   ========================================================================== */
.page-home, .page-about {
  /* Tightened from clamp(5.5rem, 10vw, 8.75rem) — 88px mobile / 140px
     desktop. Two adjacent sections each contributed that, so the blank band
     between them was 280px on a laptop and the page read as a series of
     separate screens rather than one document. 100px a side leaves a 200px
     band: still a clear break, about 29% less of it.

     Only the padding changes. Nothing here touches type, card sizes or any
     element's own box. */
  /* HALF AN INCH A SIDE, so a boundary is ONE inch.
     Asked for as "about 1 inch (96px) around each section", with the rule
     that two neighbours must not add up to more than that — and those two
     only agree at 48px a side. It was 100px a side, which met two sections
     back to back and put a 200px band between them.
     48px a side on a laptop, 28px on a phone, where an inch of nothing is a
     larger share of the screen. */
  --section-y: clamp(1.75rem, 3.4vw, 3rem);    /* 28px mobile → 48px desktop */
  --measure: 42rem;                             /* ~672px body text max width */
}
/* On Home, chapter headings take their size from the element rule
   `.page-home h2` (home.css). That rule must NOT be dual-scoped — it would
   resize every .t-h2 on About. Instead, the moved chapter heading keeps its
   Home size via its own .h-caps hook; :not(.statement) leaves the larger
   "Who are you becoming?" statement to its own rule. Values mirror
   `.page-home h2` exactly. */
.page-about .h-caps:not(.statement) {
  font-size: clamp(2.4rem, 4.4vw, 3.5rem); line-height: 1.02; font-weight: 500; letter-spacing: 0.005em;
}
.page-home .h-caps, .page-about .h-caps { text-transform: uppercase; }
.page-home .lede, .page-about .lede { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.65; color: rgba(255,255,255,0.68); max-width: var(--measure); }
.page-home .wrap, .page-about .wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px) {.page-home .wrap, .page-about .wrap { padding-left: 2rem; padding-right: 2rem; } }
.page-home .section, .page-about .section { padding-top: var(--section-y); padding-bottom: var(--section-y); position: relative; }
.page-home .surface-navy, .page-about .surface-navy {
  background: linear-gradient(180deg, rgba(7, 20, 38, 0) 0%, rgba(7, 20, 38, 0.85) 18%, rgba(11, 31, 58, 0.85) 82%, rgba(7, 20, 38, 0) 100%);
}
.page-home .statement, .page-about .statement { font-size: clamp(2.75rem, 6.2vw, 5.5rem); line-height: 1; font-weight: 500; }
.page-home .rule-gold, .page-about .rule-gold { width: 4rem; height: 1px; background: linear-gradient(90deg, var(--pcp-gold), transparent); }
.page-home .lack-list, .page-about .lack-list { border-top: 1px solid rgba(212,175,55,0.16); }
.page-home .lack-list li, .page-about .lack-list li {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; align-items: baseline;
  padding: 1.25rem 0; border-bottom: 1px solid rgba(212,175,55,0.16);
}
.page-home .lack-list .n, .page-about .lack-list .n { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; color: var(--pcp-gold); font-weight: 600; }
.page-home .lack-list h3, .page-about .lack-list h3 { font-size: 1.6rem; font-weight: 500; line-height: 1.1; }
.page-home .lack-list p, .page-about .lack-list p { font-size: 0.95rem; color: rgba(255,255,255,0.58); margin-top: 0.25rem; }
@media (min-width: 1024px) {.page-home .sticky-col, .page-about .sticky-col { position: sticky; top: 7.5rem; } }

/* ==========================================================================
   MEDIA LEGIBILITY VEIL
   A dark gradient over CONTENT media so a heading or caption placed on top
   stays readable while the photograph or video underneath stays visible.

   Deliberately scoped to media CONTAINERS. The PCP logo, the phoenix mark and
   the SVG icons are excluded, because nothing is ever set over them and
   dimming them would cost the branding its contrast.

   The hero and the founder frames already carry their own veils
   (.hero-video-veil, .fdr-stage::after) and are not doubled up here.

   z-index 6 puts it above the frame's texture, sheen and vignette layers
   (2-5) and below the caption content, which rides higher.
   ========================================================================== */
.media-frame::before,
[data-stories] .story-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.26) 42%,
    rgba(0, 0, 0, 0) 78%);
}

/* ==========================================================================
   ABOUT PCP — the mansion as one continuous ground
   --------------------------------------------------------------------------
   Same treatment the Home page uses: the room is painted on .pcp-cinematic-bg,
   the single position:fixed, inset:0, z-index:-1 layer that already sits
   behind all content on every page. One layer means it never scrolls, there
   is no seam between sections, and no section owns a background block.

   The veil is the same gradient Home carries (0.82-0.96), so the darkness
   behind the copy — and therefore its legibility — matches exactly.

   Everything below simply stops a surface from painting over that ground.
   Sections are cleared outright; cards keep their own tone but become
   translucent, so they still read as cards with their borders and shadows
   intact rather than dissolving into the room.

   Scoped to .page-about throughout: no other page is affected.
   ========================================================================== */
.page-about .pcp-cinematic-bg {
  background-image:
    linear-gradient(180deg,
      rgba(3, 10, 20, 0.96) 0%,
      rgba(3, 10, 20, 0.84) 12%,
      rgba(3, 10, 20, 0.82) 88%,
      rgba(3, 10, 20, 0.96) 100%),
    url('../media/backgrounds/pcp-business-background.png');
  background-size: cover, cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* Section fills: cleared, so the one ground shows through unbroken. */
.page-about .surface-navy,
.page-about .surface-navy-solid,
.page-about .surface-elevated {
  background: none;
}

/* Cards: the same near-black and navy they already use, now translucent.
   Borders, radii and shadows are untouched, so nothing about their shape,
   size or position changes — only what shows behind them. */
.page-about .card { background-color: rgba(11, 11, 11, 0.62); }
.page-about .img-frame { background-color: rgba(11, 31, 58, 0.55); }

/* The header stays a plain black bar. It is transparent by default and only
   tints in on scroll, which over a fixed room would have let the mansion
   show through the navigation. */
.page-about .site-header { background-color: #000000; }

/* ==========================================================================
   MEMBER LOGIN — the hero film as a fixed page background
   --------------------------------------------------------------------------
   position: fixed, so the footage holds still while the page scrolls over it.
   z-index -2 puts it behind all content and behind .pcp-cinematic-bg (-1), so
   the shared ambient layer still reads on top of it. Negative z-index paints
   above the canvas, which is why body's own near-black does not hide it.

   object-fit: cover fills the viewport at any size without distorting the
   frame — the video is 16:9 and the viewport rarely is.

   The veil is the page's readability: the login card sits mid-screen, so the
   gradient is deepest at the top and bottom edges and steady through the
   middle band, matching the treatment the other pages use.

   Scoped to .page-login throughout; no other page carries that class.
   ========================================================================== */
.page-login .login-video-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.page-login .login-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-login .login-video-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(3, 10, 20, 0.94) 0%,
      rgba(3, 10, 20, 0.80) 18%,
      rgba(3, 10, 20, 0.78) 82%,
      rgba(3, 10, 20, 0.94) 100%);
}

/* The bar stays opaque at the colour it already uses, so the film cannot play
   through the navigation. Only the alpha changes — the hue does not. */
.page-login .site-header,
.page-login .site-header.is-scrolled { background-color: rgb(13, 5, 5); }

/* ==========================================================================
   Play mark — the button a gated video shows before it is started
   --------------------------------------------------------------------------
   Paired with the play gate in site.js. While a video is paused this is the
   one thing on the picture; once it plays, the real control bar takes over
   and this steps aside.

   It is a button, not a veil: a circle a few rem across in the middle of the
   frame, a small share of its area. Nothing else is laid over the footage —
   no fade, no gradient, no tint — and the frame keeps whatever border and
   rounded corners it already has.
   ========================================================================== */
[data-play-gate] .pcp-play {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: clamp(3.4rem, 4.8vw, 4.6rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid rgba(212, 175, 55, 0.62);
  border-radius: 50%;
  /* Only inside the circle, so the picture around it stays untouched. It is
     what keeps the mark readable over a bright frame. */
  background: rgba(5, 5, 5, 0.46);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  cursor: pointer;
  /* transform and opacity only */
  transition: opacity 420ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
              scale 420ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
              border-color 420ms ease, background-color 420ms ease;
}
/* The triangle. */
[data-play-gate] .pcp-play::after {
  content: '';
  margin-left: 0.18em;
  border-left: 0.92rem solid rgba(241, 210, 122, 0.92);
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
}
[data-play-gate] .pcp-play:hover,
[data-play-gate] .media-frame:hover .pcp-play,
[data-play-gate] .fdr-stage:hover .pcp-play {
  scale: 1.06;
  border-color: rgba(212, 175, 55, 0.92);
  background: rgba(5, 5, 5, 0.58);
}
[data-play-gate] .pcp-play:focus-visible {
  outline: 2px solid var(--pcp-gold);
  outline-offset: 4px;
}
[data-play-gate] .pcp-play:active { scale: 0.97; }

/* Playing: the mark steps aside and the real control bar takes over. */
[data-play-gate] .is-playing .pcp-play {
  opacity: 0;
  pointer-events: none;
  scale: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  [data-play-gate] .pcp-play { transition: none; }
}

/* ==========================================================================
   ABOUT — the five value cards carry the Home page's photographs
   --------------------------------------------------------------------------
   The same treatment the seven pillar cards use on the home page
   (assets/css/home.css, "Pillar cards that carry their own photograph"), so
   the two rows read as one family: each card names its file in --value-photo
   and the veil, the sizing, the gold edge and the clipping are shared.

   Five of the pictures are the home page's own files, matched pillar for
   pillar. Transformation has no pillar of that name to borrow from; Personal
   Development is its counterpart — both are the individual changing — so it
   takes personal-development-bg.jpg. Impact has no counterpart at all and
   carries its own photograph, impact-bg.jpg.

   [data-value] names exactly those six cards, so all six of the values row
   share one treatment and none of them is the odd one out.

   Layer order is top-first: the readability veil, then the photograph. The
   veil is deepest at the top and bottom, where the icon tile, the heading and
   the paragraph sit, and lighter across the middle so the picture still
   reads. .card > * is already position: relative (site.css), so every piece
   of content paints above the background rather than behind it.

   CLIPPING. background-clip: padding-box stops the photograph at the INSIDE
   edge of the border, so a semi-transparent gold edge cannot show the image
   through itself; overflow: hidden then makes the rounded corner clip any
   layer inside the card, including .card::before. box-sizing is border-box,
   so doubling the border to 2px does not change the card's outer size — only
   the content box moves in by 1px, and the grid is untouched.
   ========================================================================== */
.page-about .card[data-value="transformation"] { --value-photo: url('../media/backgrounds/personal-development-bg.jpg'); }
.page-about .card[data-value="community"]      { --value-photo: url('../media/backgrounds/community-bg.jpg'); }
.page-about .card[data-value="opportunity"]    { --value-photo: url('../media/backgrounds/opportunity-bg.jpg'); }
.page-about .card[data-value="education"]      { --value-photo: url('../media/backgrounds/education-bg.jpg'); }
.page-about .card[data-value="leadership"]     { --value-photo: url('../media/backgrounds/leadership-bg.jpg'); }
.page-about .card[data-value="impact"]         { --value-photo: url('../media/backgrounds/impact-bg.jpg'); }

.page-about .card[data-value] {
  background-image:
    linear-gradient(180deg,
      rgba(4, 9, 18, 0.90) 0%,
      rgba(4, 9, 18, 0.72) 38%,
      rgba(4, 9, 18, 0.78) 68%,
      rgba(4, 9, 18, 0.92) 100%),
    var(--value-photo);
  background-size: auto, cover;
  background-position: 0% 0%, 50% 50%;
  background-repeat: no-repeat, no-repeat;
  border: 2px solid rgba(212, 175, 55, 0.55);
  background-clip: padding-box;
  overflow: hidden;
}

/* Hover reads as the edge brightening, matching the pillar cards, rather than
   the border thinning back to its resting weight. */
.page-about .card[data-value]:hover { border-color: rgba(212, 175, 55, 0.85); }

/* ==========================================================================
   ABOUT — Our Mission and Our Vision carry a photograph
   --------------------------------------------------------------------------
   The same construction the values row above uses, with one difference: the
   border is NOT touched. These two are .card-featured and already carry their
   own heavier gold edge at 0.45 alpha, and the request was for a picture
   inside them, not a new edge. So this block adds the photograph, the veil
   that keeps the words legible, and the clipping — nothing else.

   [data-mv] is on exactly these two articles and nowhere else, so no other
   card and no page background can pick it up.

   Layer order is top-first: the readability veil, then the photograph. The
   veil is deepest at the top and bottom, where the icon tile, the eyebrow,
   the heading and the paragraph sit, and lighter across the middle so the
   picture still reads.

   CLIPPING. background-clip: padding-box stops the photograph at the INSIDE
   edge of the border, so a semi-transparent gold edge cannot show the image
   through itself; overflow: hidden then makes the rounded corner clip every
   layer inside the card, including .card::before's hover glow.
   ========================================================================== */
.page-about .card[data-mv="mission"] { --mv-photo: url('../media/backgrounds/mission-bg.jpg'); }
.page-about .card[data-mv="vision"]  { --mv-photo: url('../media/backgrounds/vision-bg.jpg'); }

.page-about .card[data-mv] {
  /* Deeper through the upper half than the values row's veil. These cards are
     349px tall against that row's 216px, so the small gold "Our mission" /
     "Our vision" eyebrow sits further down the gradient, in the lighter band:
     measured against the brightest 5% of the photograph behind it, it came
     out at 4.44:1, just under AA. 0.92 / 0.80 carries it clear. */
  background-image:
    linear-gradient(180deg,
      rgba(4, 9, 18, 0.92) 0%,
      rgba(4, 9, 18, 0.80) 42%,
      rgba(4, 9, 18, 0.82) 70%,
      rgba(4, 9, 18, 0.93) 100%),
    var(--mv-photo);
  background-size: auto, cover;
  background-position: 0% 0%, 50% 50%;
  background-repeat: no-repeat, no-repeat;
  background-clip: padding-box;
  overflow: hidden;
}

/* ==========================================================================
   Two lights running round a button's frame
   --------------------------------------------------------------------------
   A utility, not a one-off: drop
     <span class="btn-orbit" aria-hidden="true"><i></i><i></i></span>
   as a SIBLING of any button whose wrapper carries .btn-orbit-host, and it
   picks up that button's shape. It is on the header's Reserve CTA and on the
   Home hero's; adding or moving it is two classes of markup and needs nothing
   here.

   They follow the actual outline — along the straight edges and round the
   curved ends — rather than tracing a circle over the top of it, which is
   what a rotated container would have done on a shape this wide and short.

   offset-path: border-box is what makes that true. The path is the border box
   of the dot's containing block, with its corner radii, so the dots inherit
   the button's pill exactly and keep following it if the button is ever
   resized or its radius changed. Nothing about the shape is hardcoded here.

   ON THE BUTTON'S OUTLINE, AND WHY IT IS NOT A CHILD OF IT. Both of these buttons
   are overflow: hidden, because each clips its own shimmer sweep, so a dot
   placed outside their frame from inside would simply be cut away. clip-path
   on the shimmer is not a way round it either: clip-path is applied in the
   element's own coordinates and travels with its transform, so a swept
   gradient would carry its clip along with it.

   So the orbit is a SIBLING of the button, inside .btn-orbit-host — the
   wrapper each button already had. Measured before moving it: that wrapper's
   box matches the button's exactly, to the pixel, on both. The host is the
   positioning context; the orbit matches it exactly, so the path IS the
   button's outline and the dots ride it half in and half out, clipped by
   nothing.

   The radius is set here rather than inherited. The host has no radius of its
   own, and these are pills, so 999px gives a path that is the button's shape
   grown outwards — round the ends as well as along the sides.

   PALE, NOT GOLD. The button is a solid gold gradient; gold dots on gold are
   invisible. These are a near-white core falling off through gold to nothing,
   which reads as a gold light moving over a gold surface.

   One deviation worth naming: this animates offset-distance, not transform or
   opacity. There is no way to walk a rounded-rect outline with a transform —
   a rotation traces an ellipse. It is two 5px dots on one element, so the
   cost is negligible, and offset-distance is the property built for this.
   ========================================================================== */
@supports (offset-path: border-box) {
  .btn-orbit-host { position: relative; }

  .btn-orbit {
    position: absolute;
    /* ON the line. inset: 0 against a host whose box matches the button to the
       pixel makes this path the button's own outline, and a dot centred on a
       path straddles it — half inside the frame, half outside. That is only
       possible because the orbit is a SIBLING of the button: as a child it
       would be cut in half by the button's overflow: hidden, which is what
       forced the earlier versions to sit wholly inside or wholly outside. */
    inset: 0;
    z-index: 2;
    border-radius: 999px;
    pointer-events: none;
  }

  .btn-orbit i {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle,
      #FFFDF4 0%,
      #FFF1BF 38%,
      rgba(241, 210, 122, 0.75) 62%,
      rgba(212, 175, 55, 0) 100%);
    box-shadow: 0 0 10px rgba(255, 248, 214, 0.95), 0 0 22px rgba(241, 210, 122, 0.7);
    offset-path: border-box;
    offset-distance: 0%;
    offset-rotate: 0deg;
    animation: btn-orbit 4.2s linear infinite;
  }

  /* Half a lap behind, so the two sit opposite each other for the whole
     circuit. A negative delay rather than a second offset-distance: that way
     one keyframe serves both and they can never drift apart. */
  .btn-orbit i:nth-child(2) {
    animation-delay: -2.1s;
  }
}

@keyframes btn-orbit {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-orbit { display: none; }
}

/* ==========================================================================
   Pure black grounds, site-wide
   --------------------------------------------------------------------------
   Every page and section surface is Rich Crimson, var(--pcp-burgundy). The mansion that sat on
   .pcp-cinematic-bg is gone, and so are the navy and gold gradients that the
   page ground and the section fills were built from.

   Was #000000; the theme moved to burgundy and only this value changed —
   every selector, every exclusion and the reasoning below still stand.

   `!important` is what makes this hold. Each page's own stylesheet loads
   AFTER this file and several of them repaint these same surfaces —
   business.css paints the room, founder.css paints the Golden Phoenix
   poster, home.css and reserve.css set their own grounds. An important
   declaration beats a normal one whatever the order, so none of them can
   put a colour back. Every original rule is left in place and untouched, so
   deleting this block restores the old theme exactly.

   WHAT IS DELIBERATELY NOT TOUCHED, because the brief was backgrounds only:
     · the hero film and the Reserve/Login background videos — those are
       footage, not a background image, and they are the feature the hero is
       built around;
     · the photographs used as card surfaces (the About value cards and
       Mission/Vision, the Business "What PCP Develops" panel) — those are
       pictures, and pictures were to be kept;
     · every card, panel, frame, button, border and divider, which keep their
       own fills;
     · the grain, a near-invisible texture at 7% that sits on the surface
       rather than being one.
   ========================================================================== */
body,
.bg-page {
  background-color: var(--pcp-burgundy) !important;
  background-image: none !important;
}

/* The shared fixed atmosphere layer: the mansion on About, Business, Results
   and Login, and the Golden Phoenix poster on Founder. */
.pcp-cinematic-bg {
  background-color: var(--pcp-burgundy) !important;
  background-image: none !important;
}
/* The warm bloom that layer carries. Nothing is removed from the page — it is
   simply not lit. */
.pcp-ambient-glow { opacity: 0 !important; }

/* Section fills. */
.surface-navy,
.surface-navy-solid,
.surface-elevated {
  background-color: var(--pcp-burgundy) !important;
  background-image: none !important;
}

/* The hero's own ground, under the film. */
.page-home .hero-bg {
  background-color: var(--pcp-burgundy) !important;
  background-image: none !important;
}

/* The bar and the mobile panel, so the theme is unbroken from the top. */
.site-header,
.site-header.is-scrolled,
.mobile-nav {
  background-color: var(--pcp-burgundy) !important;
  background-image: none !important;
}

/* The last two coloured washes.

   The closing section on Home carried its own faint gold radial over black,
   and four pages open with a large blurred gold or navy blob behind the page
   title. Both are background colour rather than content, and on a flat burgundy
   ground a 10% gold smudge at 120px of blur is exactly the warmth the theme
   is meant to drop. The elements stay in the markup and keep their size and
   position; they are simply no longer tinted. */
.page-home .closing {
  background-color: var(--pcp-burgundy) !important;
  background-image: none !important;
}

.blur-\[120px\] {
  background-color: transparent !important;
}

/* The remaining section atmosphere.

   Found by sweeping every page for any surface wider than 60% of the
   viewport and taller than 200px that still carried a colour or a gradient:

     .pcp-seam-veil / -wash / -glow   navy and gold washes between the Home
                                      sections
     .biz-bridge, .biz-close          the navy and cream section grounds on
                                      Business
     footer                           a dark fade rather than a flat ground

   STILL LEFT ALONE, and these are the ones that came back in that sweep but
   are not backgrounds: .hero-ambient and .hero-rays, which are the hero
   film's own light; .fdr-spot-veil and .fdr-phoenix-veil, .biz-close-veil,
   .rsv-video-veil and .login-video-veil, every one of which is a legibility
   veil sitting over a photograph or a video so the copy on top stays
   readable; and .gold-band, which is a gold CTA panel with text on it — a
   component, not a ground. */
.pcp-seam-veil,
.pcp-seam-wash,
.pcp-seam-glow,
[data-business] .biz-bridge,
[data-business] .biz-close,
.site-footer,
footer.relative {
  background-color: var(--pcp-burgundy) !important;
  background-image: none !important;
}

/* The phoenix-journey stage on Home was #050505 — near black, but not it. */
.page-home .stage { background-color: var(--pcp-burgundy) !important; }

/* ---- CARDS, PANELS AND THE MODAL SURFACE --------------------------------
   The named surfaces from the brief that are not page grounds: the cards,
   the form panel, the modal's own background and the sequence stage behind
   the Phoenix journey.

   The gold radial that sits on top of several of these is kept — it is the
   warmth the design is built on, and the brief was to leave gold alone. Only
   the dark half underneath becomes crimson.

   A FLAT PANEL ON A FLAT PAGE OF THE SAME VALUE WOULD DISAPPEAR, so the raised
   surfaces are a shade deeper than the ground rather than the same value.
   They are still the same burgundy family; they are simply a step off the
   value behind them, which is the only way a panel reads as a panel. The
   gold hairline and the shadow do the rest. */
.card,
.card-featured,
[data-business] .biz-card,
.page-home .stage-bg {
  background-color: var(--pcp-burgundy-raise) !important;
  background-image: none !important;
}

.rsv-modal-dialog,
.page-reserve .rsv-page-panel,
.page-home .reels-loop .biz-reel {
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(212, 175, 55, 0.07) 0%, transparent 60%),
    linear-gradient(180deg, var(--pcp-burgundy-raise) 0%, var(--pcp-burgundy-deep) 100%) !important;
}

/* The reservation panel inside the modal is flattened and shows the dialog
   through it; on the reserve page it is the dialog. Either way it must not
   paint its own near-black over the crimson. */
[data-reserve] .rsv-panel {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(212, 175, 55, 0.045) 0%, transparent 58%),
    linear-gradient(180deg, var(--pcp-burgundy-raise) 0%, var(--pcp-burgundy-deep) 100%) !important;
}

/* ==========================================================================
   The header lockup
   --------------------------------------------------------------------------
   One image carrying the mark and the wordmark. The separate "PHOENIX
   COMPREHENSIVE PROJECT" line that used to be set in type beside the mark is
   gone from the markup, so there is nothing here to hide.

   Sized by HEIGHT, with the width following from the artwork's 4.59:1 shape.
   That is what keeps it from crowding the navigation: the bar is a flex row
   of lockup, nav and CTA, and a logo given a width would push the other two
   around as the viewport narrows. A height ties it to the bar instead.

   flex-shrink: 0 on the link, so if the row ever did run short the logo is
   not the thing that gets squeezed out of shape.
   ========================================================================== */
.site-header .brand-lockup {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.site-header .brand-lockup img {
  display: block;
  width: auto;
  /* 33px on a 360 phone, rising to 46px once there is room. At 4.59:1 that is
     152px and 212px of width — comfortably clear of the hamburger on a phone
     and of the first nav link on a desktop. */
  height: clamp(2.05rem, 3.4vw, 2.9rem);
}

/* ==========================================================================
   Footer lockup
   --------------------------------------------------------------------------
   One supplied image where the mark and the wordmark used to sit side by
   side. Width is set and height is left to the browser, so the file's own
   560x122 ratio decides the height — there is no second value that could
   disagree with it and squash the image, and nothing is cropped.

   The width is capped against the column as well as in rem, so it never
   outgrows the footer's first column on a narrow screen.
   ========================================================================== */
.footer-lockup-link {
  display: inline-block;
  max-width: 100%;
}

.footer-lockup {
  display: block;
  width: min(17.5rem, 100%);
  height: auto;
}

@media (max-width: 767px) {
  .footer-lockup { width: min(15rem, 100%); }
}