/* =============================================================
   Hard Driven Athletics - Core Styles
   Premium, editorial, high-contrast. Black / white / controlled red.
   ============================================================= */

:root {
  --color-black: #050505;
  --color-charcoal: #111111;
  --color-charcoal-2: #181818;
  /* WCAG AA-passing red for small text on the dark backgrounds */
  --color-red-accessible: #e25566;
  --color-white: #ffffff;
  --color-off-white: #f4f4f2;
  --color-gray: #9a9a9a;
  --color-gray-dark: #555555;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-dark: rgba(5, 5, 5, 0.12);
  --color-red: #c8102e;
  --color-red-deep: #a30d26;

  --font-display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;

  --width-reading: 720px;
  --width-content: 1240px;
  --width-wide: 1440px;

  --space-section: clamp(4rem, 9vw, 10.5rem);
  --space-section-sm: clamp(3rem, 6vw, 6.5rem);

  --header-height: 76px;
  --radius: 6px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-white);
  background: var(--color-black);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  margin: 0 0 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.display-xl {
  font-size: clamp(3.1rem, 8.5vw, 7rem);
  line-height: 0.96;
}

.display-lg { font-size: clamp(2.2rem, 5vw, 4rem); }

.display-md { font-size: clamp(1.6rem, 3vw, 2.4rem); }

.eyebrow {
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: 1.5rem;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--color-red);
  flex: none;
}

p { margin: 0 0 1.2rem; max-width: 62ch; }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
}

.muted { color: var(--color-gray); }

/* ---------- Layout ---------- */

.container { width: 100%; max-width: var(--width-content); margin: 0 auto; padding: 0 24px; }
.container--wide { max-width: var(--width-wide); }
.container--reading { max-width: var(--width-reading); }

.section { padding: var(--space-section) 0; }
.section--sm { padding: var(--space-section-sm) 0; }

.section--light {
  background: var(--color-off-white);
  color: var(--color-black);
}
.section--light .lede { color: rgba(5, 5, 5, 0.78); }
.section--light .eyebrow { color: var(--color-gray-dark); }
.section--light .muted { color: var(--color-gray-dark); }

.section--charcoal { background: var(--color-charcoal); }

.section-head { max-width: 780px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.site-header.scrolled {
  background: rgba(5, 5, 5, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
}

.brand-link { display: inline-flex; align-items: center; }

/* Logo rendering: force crisp white on dark, black on light,
   regardless of the PNG's native color. Never stretched. */
.logo { height: 30px; width: auto; object-fit: contain; }
.logo--acronym { height: 34px; display: none; }
.logo--on-dark { mix-blend-mode: screen; }
.logo--on-light { filter: invert(1); mix-blend-mode: multiply; }

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--color-white); }

.primary-nav a[aria-current="page"] {
  color: var(--color-white);
  border-bottom-color: var(--color-red);
}

.nav-cta { margin-left: 0.8rem; }

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-white);
  padding: 0.55rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  /* 44x44 minimum touch target. The header is 76px tall, so this fits
     without overflow and the button's appearance is otherwise unchanged. */
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  padding: 1rem 1.7rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow, .btn:focus-visible .arrow { transform: translateX(4px); }

.btn--primary { background: var(--color-red); color: var(--color-white); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--color-red-deep); }

.btn--white { background: var(--color-white); color: var(--color-black); }
.btn--white:hover, .btn--white:focus-visible { background: var(--color-off-white); }

.btn--ghost {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.35);
}
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--color-white); }

.section--light .btn--ghost { color: var(--color-black); border-color: rgba(5, 5, 5, 0.3); }
.section--light .btn--ghost:hover { border-color: var(--color-black); }

.text-link {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  /* Accessibility: brand red #c8102e is only ~3.5:1 on the dark
     sections; this lighter red passes WCAG AA (5.6:1 on black).
     Light sections restore the brand red below (5.4:1 there). */
  color: var(--color-red-accessible);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.section--light .text-link { color: var(--color-red); }
.text-link:hover .arrow { transform: translateX(4px); }
.text-link .arrow { transition: transform 0.25s var(--ease); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + 3rem) 0 5rem;
  overflow: hidden;
  isolation: isolate;
}

/* Reserved zone for future athlete photography or video.
   Neutral dark treatment; acronym watermark keeps it deliberate. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 620px at 78% 30%, rgba(200, 16, 46, 0.14), transparent 60%),
    linear-gradient(112deg, var(--color-black) 0%, var(--color-black) 42%, var(--color-charcoal-2) 100%);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 5, 5, 0.88) 0%, rgba(5, 5, 5, 0.55) 55%, rgba(5, 5, 5, 0.25) 100%);
}

.hero-watermark {
  position: absolute;
  right: -4%;
  bottom: -10%;
  height: 72%;
  width: auto;
  opacity: 0.5;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-content { max-width: 860px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.4rem;
}

/* C2 (approved July 16, 2026): hero facts promoted to a chip strip
   directly under the lede. Same words, bigger presence. The location
   chip carries the one controlled red outline. */
.hero .eyebrow { color: rgba(255, 255, 255, 0.7); }

.hero-meta {
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.hero-meta li {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

.hero-meta .chip--location {
  border-color: rgba(200, 16, 46, 0.6);
  color: var(--color-off-white);
}

.scroll-cue {
  position: absolute;
  left: 24px;
  bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.scroll-cue::after {
  content: "";
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--color-gray), transparent);
  animation: cue 2.4s var(--ease) infinite;
}

@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Statement band ---------- */

.statement {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.statement blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.14;
  text-transform: uppercase;
  max-width: 22ch;
}

.statement .attribution {
  margin-top: 1.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gray);
}

/* ---------- Media placeholder zones ---------- */

/* V1 (approved July 16, 2026): intentional editorial empty state.
   Faint diagonal hairline texture, a short top hairline rule, and a
   bottom-left monospace caption naming the intended shot (data-shot).
   The centered logo watermark is retired from these zones. When a real
   photograph lands, the <img> replaces the texture and caption. */
.media-zone {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)) no-repeat 1.1rem 1.1rem / 34px 1px,
    repeating-linear-gradient(45deg, transparent 0, transparent 14px, rgba(255, 255, 255, 0.028) 14px, rgba(255, 255, 255, 0.028) 15px),
    linear-gradient(160deg, var(--color-charcoal) 0%, var(--color-charcoal-2) 100%);
}

.media-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  pointer-events: none;
}

.media-zone::after {
  content: attr(data-shot);
  position: absolute;
  left: 1.1rem;
  bottom: 1rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.media-zone--tall { aspect-ratio: 4 / 5; }
.media-zone--wide { aspect-ratio: 16 / 9; }
.media-zone--square { aspect-ratio: 1 / 1; }

/* ---------- Split editorial sections ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.split--reverse > .split-media { order: 2; }

/* ---------- Featured service (Online S&C) ---------- */

.feature-tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-red);
  border: 1px solid rgba(200, 16, 46, 0.45);
  border-radius: 3px;
  padding: 0.3rem 0.7rem;
  margin-bottom: 1.2rem;
}

.checklist { list-style: none; margin: 1.6rem 0 2rem; padding: 0; max-width: 58ch; }

.checklist li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.9rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.98rem;
}

.section--light .checklist li { border-bottom-color: var(--color-border-dark); }

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 14px;
  height: 2px;
  background: var(--color-red);
}

.price-line {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 1.6rem;
}

.price-line small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-gray);
  margin-top: 0.3rem;
}

/* ---------- Service rows (editorial list, not equal cards) ---------- */

.service-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: start;
  padding: 2.4rem 0;
  border-top: 1px solid var(--color-border-dark);
}

.service-row:last-child { border-bottom: 1px solid var(--color-border-dark); }

.service-index {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(5, 5, 5, 0.25);
}

.service-row h3 { margin-bottom: 0.4rem; font-size: 1.35rem; }

.service-role {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-red);
  display: block;
  margin-bottom: 0.9rem;
}

.service-row p { font-size: 0.95rem; margin-bottom: 0.5rem; }

/* ---------- Value grid ---------- */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 4rem);
}

.value-item h3 {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--color-red);
  display: inline-block;
}

.value-item p { font-size: 0.94rem; color: rgba(255, 255, 255, 0.75); }
.section--light .value-item p { color: rgba(5, 5, 5, 0.72); }

/* ---------- Process ---------- */

.process { counter-reset: step; list-style: none; margin: 0; padding: 0; }

.process li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 1.6rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--color-border);
  align-items: baseline;
}

.process li::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-red);
}

.process h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.process p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.75); margin: 0; }

.note-block {
  margin-top: 2.4rem;
  padding: 1.4rem 1.6rem;
  border-left: 3px solid var(--color-red);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 62ch;
}

.section--light .note-block { background: rgba(5, 5, 5, 0.04); color: rgba(5, 5, 5, 0.78); }

/* ---------- Coach ---------- */

.coach-quote {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.25;
  border-left: 3px solid var(--color-red);
  padding-left: 1.4rem;
  margin: 2rem 0 0;
  max-width: 30ch;
}

.cred-list {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cred-list li {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0.45rem 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- Proof ---------- */

/* V3 (approved July 16, 2026): condensed empty state until real proof
   exists. Two feedback slots on one row, metric slot full width below,
   lower minimum height. Slots grow back as consented proof arrives. */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.proof-grid .proof-metric { grid-column: 1 / -1; }

.proof-slot {
  border: 1px dashed var(--color-border-dark);
  border-radius: var(--radius);
  padding: 2rem 1.6rem;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
}

.proof-slot .slot-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gray-dark);
}

.proof-slot p { font-size: 0.9rem; color: rgba(5, 5, 5, 0.6); margin: 0; }

.proof-metric {
  grid-column: 1 / -1;
  min-height: 140px;
  align-items: flex-start;
}

/* ---------- FAQ ---------- */

.faq-list { border-top: 1px solid var(--color-border-dark); }

.faq-item { border-bottom: 1px solid var(--color-border-dark); }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: inherit;
  padding: 1.5rem 0.2rem;
  cursor: pointer;
}

.faq-question .faq-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border-dark);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}

.faq-question[aria-expanded="true"] .faq-icon {
  background: var(--color-black);
  color: var(--color-white);
  transform: rotate(45deg);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--ease);
}

.faq-answer-inner { padding: 0 0.2rem 1.8rem; max-width: 68ch; }
.faq-answer-inner p { font-size: 0.96rem; color: rgba(5, 5, 5, 0.75); }

/* ---------- Final CTA ---------- */

.final-cta { text-align: left; position: relative; overflow: hidden; }

.final-cta .container { position: relative; }

.final-cta h2 { max-width: 16ch; }

.final-cta-watermark {
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  height: 130%;
  opacity: 0.4;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-black);
  border-top: 1px solid var(--color-border);
  padding: clamp(3.5rem, 7vw, 6rem) 0 2.5rem;
  color: rgba(255, 255, 255, 0.75);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 3rem;
  margin-bottom: 3.5rem;
}

.footer-brand p { font-size: 0.92rem; max-width: 34ch; }

.site-footer .footer-brand .logo { height: 42px; }

.footer-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gray);
  margin: 0 0 1.1rem;
}

.footer-links { list-style: none; margin: 0; padding: 0; }

.footer-links li { margin-bottom: 0.65rem; }

.footer-links a {
  text-decoration: none;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s var(--ease);
}

.footer-links a:hover, .footer-links a:focus-visible { color: var(--color-white); }

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  font-size: 0.78rem;
  color: var(--color-gray);
}

.footer-statement {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Forms ---------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 1.6rem;
}

.form-field { display: flex; flex-direction: column; gap: 0.45rem; }
.form-field--full { grid-column: 1 / -1; }

.form-field label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.form-field .hint { font-size: 0.78rem; color: var(--color-gray-dark); }

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(5, 5, 5, 0.25);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-black);
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 1px;
}

.consent-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: rgba(5, 5, 5, 0.75);
}

.consent-row input { margin-top: 0.25rem; width: 18px; height: 18px; }

.form-status {
  grid-column: 1 / -1;
  display: none;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--color-red);
  background: rgba(5, 5, 5, 0.05);
  font-size: 0.92rem;
}

.form-status.visible { display: block; }

/* ---------- Page hero (interior pages) ---------- */

.page-hero {
  padding: calc(var(--header-height) + clamp(3.5rem, 8vw, 7rem)) 0 clamp(3rem, 6vw, 5.5rem);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.page-hero h1 { max-width: 18ch; }

/* ---------- Utility ---------- */

.divider-red { width: 56px; height: 3px; background: var(--color-red); border: 0; margin: 0 0 1.8rem; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-red);
  color: var(--color-white);
  padding: 0.8rem 1.2rem;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }

.draft-banner {
  background: var(--color-charcoal);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.3rem;
  font-size: 0.85rem;
  color: var(--color-gray);
  margin-bottom: 2.5rem;
  max-width: 68ch;
}

.section--light .draft-banner {
  background: rgba(5, 5, 5, 0.05);
  border-color: var(--color-border-dark);
  color: var(--color-gray-dark);
}

/* Availability note (added November 6, 2026): the service-hold notice on the home, services and contact pages. */
.availability-note {
  background: var(--color-charcoal);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-red);
  border-radius: var(--radius);
  padding: 0.9rem 1.2rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-gray);
  margin: 1.2rem 0 1.6rem;
  max-width: 68ch;
}

.section--light .availability-note {
  background: rgba(5, 5, 5, 0.05);
  border-color: var(--color-border-dark);
  border-left-color: var(--color-red);
  color: var(--color-gray-dark);
}

.legal-copy h2 { font-size: 1.15rem; margin-top: 2.6rem; }
.legal-copy p, .legal-copy li { font-size: 0.95rem; color: rgba(5, 5, 5, 0.78); }

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.visible { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue::after { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Contact two-path split (V2, approved July 16, 2026) ----------
   Two self-routing cards: book instantly (red) or email to start (ghost).
   Reuses the .split collapse at 1024px; booking card stacks first. */

.contact-paths {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
  margin-bottom: 3rem;
}

.contact-card {
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius);
  padding: 2rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.contact-card .eyebrow { margin-bottom: 0.2rem; }
.contact-card h2 { margin-bottom: 0; }
.contact-card p { margin: 0; }
.contact-card .card-action { margin-top: auto; padding-top: 0.6rem; }

/* The address is one long unbreakable token; let it wrap inside the card
   rather than widen the card past small viewports. */
.contact-card [data-contact-email] { overflow-wrap: anywhere; }
/* The footer email is the same long address; keep it wrapping on
   narrow viewports too. */
.site-footer [data-contact-email] { overflow-wrap: anywhere; }

/* ---------- Utilities (October 27, 2026) ----------
   These classes replace the repeated inline style attributes that the
   pages carried (footer legal links, the bare footer on the legal and 404
   pages, the footer logo spacing, two flush sections, the services
   sub-headings and a few paragraph offsets). Declared last so that a
   single-class utility wins over the single-class rules above. */
.u-mt-16 { margin-top: 1.6rem; }
.u-mt-20 { margin-top: 2rem; }
.u-mb-14 { margin-bottom: 1.4rem; }
.u-pt-0 { padding-top: 0; }
.u-fs-105 { font-size: 1.05rem; }
.link-inherit, .link-inherit:hover, .link-inherit:focus-visible { color: inherit; }
.footer-bottom--bare { border-top: 0; padding-top: 0; }