/* ═══════════════════════════════════════════════════════════════════
   Terra Development — Luxe Bring-Up · Wave 1
   Loaded site-wide AFTER each page's inline <style> block.
   Additive only — never overrides existing brand tokens.
   Principle: if a JPM PB MD notices the effect AS an effect, it failed.
   ═══════════════════════════════════════════════════════════════════ */

/* ── New tokens (additive only) ───────────────────────────────────── */
:root {
  /* Premium easing palette */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Duration tokens */
  --d-micro:  240ms;
  --d-reveal: 800ms;

  /* Depth tokens — navy-tinted, never pure black */
  --shadow-paper: 0 1px 2px rgba(15, 37, 64, 0.04),
                  0 8px 24px rgba(15, 37, 64, 0.06);
  --shadow-float: 0 0 0 1px rgba(217, 210, 194, 0.8),
                  0 16px 48px rgba(15, 37, 64, 0.08);

  /* Display-only deeper warm ink — opt-in via .ink-display class */
  --ink-display: #14110D;

  /* Sticky-stack scroll offset (topnav 64 + phase-nav 52 + 16 breathing) */
  --scroll-offset: 132px;
}

/* Wide-gamut P3 — automatic upgrade on supporting displays.
   Falls back to sRGB declared in each page's inline <style>. */
@supports (color: color(display-p3 0 0 0)) {
  :root {
    --navy: color(display-p3 0.059 0.145 0.251);
    --gold: color(display-p3 0.722 0.565 0.176);
  }
}

/* ── Typography craft (site-wide) ─────────────────────────────────── */
html {
  scroll-behavior: smooth;
  hanging-punctuation: first last;
}

html, body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

/* Headlines — balanced wrap, display optical size, lining figures.
   Color intentionally inherited (existing pages use navy on heads). */
h1, h2, h3,
.hero-headline, .section-title, .about-title, .engage-headline,
.posture-quote, .pullquote {
  text-wrap: balance;
  font-variation-settings: "opsz" 60;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "lnum" 1;
}

/* Body — pretty wrap (no orphans), oldstyle figures */
p, li, blockquote, .hero-sub, .section-dek, .phase-detail-prose p {
  text-wrap: pretty;
  font-variation-settings: "opsz" 12;
}

/* Metadata strips & lists — tabular lining figures */
.cred-strip, .deliverables-list, .footer-link, .nav-link {
  font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

/* Optional deeper warm ink for headlines that opt in */
.ink-display { color: var(--ink-display); }

/* ── Sticky-stack anchor offset ───────────────────────────────────── */
section[id], h2[id], h3[id], [id^="phase"], [id^="audience"], [id^="discipline"] {
  scroll-margin-top: var(--scroll-offset);
}

/* ── Reveal-on-scroll (universal, JS-driven fallback) ─────────────── */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--d-reveal) var(--ease-out-expo),
              transform var(--d-reveal) var(--ease-out-expo);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* CSS-native progressive enhancement on supporting browsers */
@supports (animation-timeline: view()) {
  .reveal {
    opacity: 1;
    transform: none;
    animation: td-rise linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 25%;
  }
  @keyframes td-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Respect reduced motion — institutional brands must */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Phase-nav active-link indicator ──────────────────────────────── */
.phase-nav-link { position: relative; transition: color var(--d-micro) ease; }
.phase-nav-link.is-current { color: var(--gold); }
.phase-nav-link.is-current::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--gold);
  animation: td-link-draw 360ms var(--ease-out-expo) both;
}
@keyframes td-link-draw {
  from { transform: scaleX(0); transform-origin: left center; }
  to   { transform: scaleX(1); transform-origin: left center; }
}

/* ── Focus ring — premium, accessible, never browser-default ──────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Engage form — gold-sweep focus + validation states ───────────── */
.engage-form-field {
  position: relative;
}

.engage-form-input,
.engage-form-textarea,
.engage-form-select {
  caret-color: var(--gold);
  transition: border-bottom-color var(--d-micro) ease;
}

/* Gold underline that sweeps in on focus */
.engage-form-field::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms var(--ease-out-expo);
  pointer-events: none;
}
.engage-form-field:focus-within::after {
  transform: scaleX(1);
}

/* Suppress focus ring on form inputs — the sweep handles it */
.engage-form-input:focus-visible,
.engage-form-textarea:focus-visible,
.engage-form-select:focus-visible {
  outline: none;
}

/* Validation states — only after user interaction (:user-valid/invalid) */
.engage-form-input:user-invalid,
.engage-form-textarea:user-invalid {
  border-bottom-color: color-mix(in oklch, var(--navy), crimson 50%);
}

/* In-button loading/success/error choreography */
.engage-form-submit {
  position: relative;
  transition: background var(--d-micro) ease,
              opacity var(--d-micro) ease,
              transform var(--d-micro) ease;
}
.engage-form-submit[data-state="loading"] {
  opacity: 0.72;
  cursor: progress;
}
.engage-form-submit[data-state="success"] {
  background: color-mix(in oklch, var(--navy), var(--gold) 40%);
}
.engage-form-submit[data-state="error"] {
  background: color-mix(in oklch, var(--navy), crimson 30%);
}
.engage-form-submit:disabled {
  cursor: not-allowed;
}

/* ── Nav-link underline travel (replace browser-default hover) ────── */
.nav-link {
  position: relative;
  transition: color var(--d-micro) var(--ease-out-quart);
}
.nav-link:not(.nav-link-active)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 360ms var(--ease-out-expo);
}
.nav-link:not(.nav-link-active):hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}