/* ==========================================================================
   Home page  Microsoft-adjacent Fluent system
   Tokens only. No raw hex. No serif display axes. No side-stripe borders.
   No translateY on card hover. No glow shadows. No font-variation-settings.
   See DESIGN.md + .impeccable/design.json for the named rules this file honors.
   ========================================================================== */


/* ==========================================================================
   GENERIC HOME-PAGE SECTION FRAME
   ========================================================================== */

.home-section {
  padding-block: var(--section-y);
  background-color: var(--color-paper);
  color: var(--color-ink);
}

.home-section--alt {
  background-color: var(--color-surface-alt);
}

/* Legacy alias used historically; alt and paper-deep behave the same now */
.home-section--paper-deep {
  background-color: var(--color-surface-alt);
}

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

.home-section--navy {
  background-color: var(--color-deep-navy);
  color: var(--color-on-dark);
}

.home-section--navy h2,
.home-section--navy h3,
.home-section--navy p {
  color: var(--color-on-dark);
}

.home-section--navy .home-section__lead,
.home-section--navy .methodology-phase__body,
.home-section--navy .methodology-phase__weeks {
  color: var(--color-on-dark-soft);
}

.home-section__header {
  max-width: 64ch;
  margin-bottom: var(--space-10);
}

.home-section__header--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.home-section__h2 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: inherit;
  margin: 0 0 var(--space-5);
  max-width: 22ch;
}

.home-section__header--center .home-section__h2 {
  margin-left: auto;
  margin-right: auto;
}

.home-section__lead {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  margin: 0;
  max-width: 60ch;
}

.home-section__header--center .home-section__lead {
  margin-left: auto;
  margin-right: auto;
}

/* On-dark eyebrow tweak */
.eyebrow--on-dark {
  color: var(--color-on-dark);
}

/* Surface-Alt band: Communication Blue (#0078D4) at small sizes measures
   ~4.15:1 on #F5F5F5, which fails WCAG AA (4.5:1). Pressed-blue (#005A9E)
   on the same band measures ~7.5:1 and clears AA. Scope this swap to
   eyebrows, ghost/secondary buttons, and other small-text Communication
   Blue uses that live on alt bands. */
.home-section--alt .eyebrow,
.home-section--alt .conversion-path__eyebrow,
.home-section--alt .btn--ghost,
.home-section--alt .btn--outline,
.home-section--alt .btn--secondary {
  color: var(--color-brand-pressed);
}
.home-section--alt .eyebrow::before {
  background-color: var(--color-brand-pressed);
}
.home-section--alt .btn--secondary {
  border-color: var(--color-brand-pressed);
}
.home-section--alt .btn--ghost:hover,
.home-section--alt .btn--outline:hover {
  color: var(--color-brand-hover);
}
.home-section--alt .btn--secondary:hover {
  background-color: var(--color-brand-pressed);
  color: var(--color-paper);
  border-color: var(--color-brand-pressed);
}


/* ==========================================================================
   1  HOME HERO  navy, asymmetric, with live-proof card
   Navy surface consistent with .page-hero. White headline, light proof card.
   Two-column composition: left column (masthead, headline, sub, CTAs,
   caption) is balanced against the proof card on the right; the stat rail
   spans full width below. No dead quadrant.
   ========================================================================== */

.home-hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(900px 460px at 78% 12%, rgba(0, 120, 212, 0.16), transparent 65%),
    var(--color-deep-navy);
  color: var(--color-on-dark);
  overflow: hidden;
}

/* Faint structural grid — shared engineered texture with .page-hero.
   The ::before drifts slowly (Part 6, living hero). */
.home-hero::before {
  content: "";
  position: absolute;
  inset: -64px;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--color-hero-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-hero-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  animation: hero-grid-drift var(--dur-ambient) linear infinite;
}

/* Soft ambient light source — gently shifts (Part 6, living hero). */
.home-hero__halo {
  position: absolute;
  inset: -16% -12% auto auto;
  width: clamp(440px, 62vw, 1000px);
  height: clamp(440px, 62vw, 1000px);
  background: radial-gradient(
    closest-side,
    rgba(0, 120, 212, 0.22),
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  animation: hero-light-shift calc(var(--dur-ambient) * 1.4) ease-in-out infinite alternate;
}

.home-hero__container {
  position: relative;
  z-index: 1;
}

.home-hero__masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-on-dark);
  letter-spacing: 0;
}

/* base.css styles every `ul li` (gray ink, left padding, a hairline ::before).
   The masthead is a <ul>, so those defaults must be neutralized here. */
.home-hero__masthead li {
  margin: 0;
  padding-left: 0;
  color: inherit;
  line-height: var(--leading-snug);
}

.home-hero__masthead li::before {
  content: none;
}

.home-hero__masthead-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.home-hero__masthead-item:first-child {
  gap: 0;
}

.home-hero__masthead-item:first-child::before {
  content: "";
  display: inline-block;
  position: static;
  width: 24px;
  height: 1px;
  margin-right: var(--space-3);
  background-color: var(--color-brand-primary);
}

.home-hero__masthead-divider {
  width: 1px;
  height: 12px;
  background-color: var(--color-on-dark-border);
}

.home-hero__h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-on-dark);
  margin: 0 0 var(--space-5);
  max-width: 24ch;
  text-wrap: balance;
}

.home-hero__h1 strong {
  font-weight: var(--fw-bold);
  color: var(--color-on-dark);
  /* governed: a thin Communication-Blue underline carries the emphasis
     where bold alone would be near-invisible on the white-on-navy headline */
  box-shadow: inset 0 -0.08em 0 var(--color-brand-primary);
}

.home-hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
  margin-bottom: var(--space-10);
}

.home-hero__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 32rem;
}

.home-hero__sub {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-on-dark-soft);
  margin: 0;
  max-width: 50ch;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.home-hero__caption {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-on-dark-soft);
  margin: 0;
}

/* Live proof card */
.home-hero__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.home-hero__field-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-on-dark-soft);
  letter-spacing: 0;
  margin: 0;
}

.home-hero__field-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(16, 124, 16, 0.12);
}

.home-hero__field-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  /* Resting depth — a light card lifting off the navy surface (Part 6). */
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.24);
  /* transform is driven continuously by the scroll parallax (scroll-animations.js)
     and is intentionally left out of the transition so it tracks scroll 1:1. */
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.home-hero__field-card:hover {
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.38), 0 3px 12px rgba(0, 0, 0, 0.28);
  border-color: var(--color-border-strong);
}

.home-hero__field-card:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.home-hero__field-frame {
  display: block;
  aspect-ratio: 16 / 9;
  background-color: var(--color-surface-card);
  overflow: hidden;
}

.home-hero__field-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-hero__field-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.home-hero__field-title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  letter-spacing: 0;
}

.home-hero__field-desc {
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
}

.home-hero__field-link {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  color: var(--color-brand-primary);
  transition: color var(--transition-fast);
}

.home-hero__field-card:hover .home-hero__field-link {
  color: var(--color-brand-hover);
}

/* Stats rail — full-width band below the two-column body */
.home-hero__rail {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-on-dark-border);
}

.home-hero__rail-stat {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
}

.home-hero__rail-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--color-on-dark);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.home-hero__rail-unit {
  font-size: 0.6em;
  font-weight: var(--fw-regular);
  margin-left: 0.05em;
  color: var(--color-brand-primary);
}

.home-hero__rail-label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-on-dark-soft);
  line-height: var(--leading-snug);
  margin: 0;
  letter-spacing: 0;
}

.home-hero__rail-divider {
  width: 1px;
  height: 36px;
  background-color: var(--color-on-dark-border);
}

@media (max-width: 960px) {
  .home-hero__body {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: start;
  }
  .home-hero__lead {
    max-width: 60ch;
  }
  .home-hero__rail {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .home-hero__rail-divider {
    width: 100%;
    height: 1px;
  }
}

@media (max-width: 600px) {
  .home-hero__masthead {
    font-size: 0.6875rem;
  }
  .home-hero__masthead-divider {
    display: none;
  }
}


/* ==========================================================================
   HERO ENTRANCE
   --------------------------------------------------------------------------
   The home hero arrives as ONE unit: a single fast fade + small rise on
   .home-hero__container (~320ms). Not staggered, not per-element, not
   per-line. This replaced the retired line-by-line headline wipe and the
   data-hero-step stagger, which read as slow piecemeal loading. hero-fx.js
   adds .hero-entrance--snap to the hero. The cinematic breathing light
   (below) is separate and not part of the entrance.
   ========================================================================== */

@keyframes hero-entrance-snap {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-entrance--snap .home-hero__container {
  animation: hero-entrance-snap 320ms var(--ease-out-expo) both;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .hero-entrance--snap .home-hero__container {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   LIVING HERO — ambient drift + light shift (Part 6)
   Barely-perceptible. Sensed, not seen. Shared by .page-hero (components.css).
   -------------------------------------------------------------------------- */

@keyframes hero-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(64px, 64px, 0); }
}

@keyframes hero-light-shift {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  to   { transform: translate3d(-4%, 3%, 0) scale(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero::before,
  .home-hero__halo {
    animation: none;
  }
}


/* ==========================================================================
   HERO — CINEMATIC LIGHT
   --------------------------------------------------------------------------
   The dramatic home-hero treatment: one soft Communication-Blue light
   breathing behind the headline. hero-fx.js adds .hero-fx--cinematic to
   .home-hero. This light is AMBIENT, not an entrance — it is shared by both
   entrance variants and runs continuously regardless of which is active.
   ========================================================================== */

/* The dramatic-light layer (the .hero-fx-light div). Inert until
   .hero-fx--cinematic is set on the hero. */
.hero-fx-light {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}

/* --- Cinematic light: one large soft radial that drifts + pulses --------- */
.hero-fx--cinematic .hero-fx-light {
  /* Positioned behind the headline column (left-of-centre, upper third). */
  inset: -22% auto auto -14%;
  width: clamp(620px, 78vw, 1240px);
  height: clamp(620px, 78vw, 1240px);
  background: radial-gradient(
    closest-side,
    rgba(0, 120, 212, 0.30),
    rgba(0, 120, 212, 0.14) 42%,
    transparent 72%
  );
  filter: blur(12px);
  opacity: 1;
  will-change: transform, opacity;
  animation: hero-fx-cinematic-light 20s ease-in-out infinite;
}

/* Slow drift + scale + opacity pulse — ambient luminosity breathing, calm,
   never a strobe. One soft radial only (no mesh). */
@keyframes hero-fx-cinematic-light {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.78;
  }
  50% {
    transform: translate3d(5%, 3.5%, 0) scale(1.16);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.78;
  }
}

/* --- Proof card: resting lift (visual treatment, NOT an entrance) -------- */
.hero-fx--cinematic .home-hero__field-card {
  box-shadow: 0 30px 64px rgba(0, 0, 0, 0.42), 0 4px 14px rgba(0, 0, 0, 0.30);
}

@media (prefers-reduced-motion: reduce) {
  .hero-fx--cinematic .hero-fx-light {
    animation: none;
    /* Hold a calm mid-pulse luminosity — visible but completely still. */
    transform: translate3d(2.5%, 1.75%, 0) scale(1.08);
    opacity: 0.9;
  }
}
/* >>> END HERO — CINEMATIC LIGHT <<< */


/* ==========================================================================
   2  THE SHIFT  leadership tension
   ========================================================================== */

.shift-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.shift-grid__prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 56ch;
}

.shift-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.shift-stat__num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--color-brand-primary);
  letter-spacing: var(--tracking-tight);
}

.shift-stat__unit {
  font-size: 0.5em;
  font-weight: var(--fw-regular);
  margin-left: 0.05em;
}

.shift-stat__caption {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  max-width: 56ch;
}

.shift-stat__source {
  display: block;
  margin-top: var(--space-2);
  font-style: normal;
  font-size: var(--text-small);
  color: var(--color-ink-soft);
  letter-spacing: 0;
}

.shift-grid__secondary {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  margin: 0;
}

.shift-grid__body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  margin: 0;
}

.shift-grid__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  /* Pressed-blue (#005A9E ≈ 7.5:1 on Surface-Alt) so the small link clears AA. */
  color: var(--color-brand-pressed);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.shift-grid__cue:hover {
  color: var(--color-brand-hover);
  text-decoration: underline;
}

/* Phase list (I / II current / III) */
.shift-phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.shift-phase {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
}

.shift-phase__numeral {
  grid-row: 1 / span 3;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--color-brand-primary);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.shift-phase__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0;
}

.shift-phase__body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  margin: 0;
}

.shift-phase__marker {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-soft);
  margin: 0;
  letter-spacing: 0;
}

/* Current state: Mission Burnt Orange. Used once per page (the "II." row).
   Marker stays in ink-soft so the small-text/F5F5F5 pair clears AA;
   the burnt-orange identity is carried by the numeral alone. */
.shift-phase--current .shift-phase__numeral {
  color: var(--color-cn-accent);
}

@media (max-width: 768px) {
  .shift-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   3  PILLAR TRIO
   ========================================================================== */

.pillar-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.pillar-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.pillar-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.pillar-card__numeral {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--color-brand-primary);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.pillar-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0;
  text-wrap: balance;
}

.pillar-card__body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  margin: 0;
  flex-grow: 1;
}

.pillar-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  color: var(--color-brand-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.pillar-card__link:hover {
  color: var(--color-brand-hover);
  text-decoration: underline;
}


/* ==========================================================================
   4  AI PATH  4-position stepper
   ========================================================================== */

.ai-path {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

.ai-path__position {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.ai-path__position:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.ai-path__numeral {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--color-brand-primary);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.ai-path__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0;
}

.ai-path__where {
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
  margin: 0;
}

.ai-path__do-label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-brand-primary);
  letter-spacing: 0;
  margin: var(--space-2) 0 0;
}

.ai-path__do {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  margin: 0;
}

.ai-path__pullquote {
  margin: var(--space-10) 0 var(--space-6);
  max-width: 56ch;
}

.ai-path__cta {
  display: flex;
  justify-content: flex-start;
}


/* ==========================================================================
   5  AGENTS
   ========================================================================== */

.agents-subhead {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
  max-width: 60ch;
}

.agent-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.agent-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.agent-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.agent-card__name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-brand-primary);
  margin: 0;
  letter-spacing: 0;
}

.agent-card__name em {
  font-style: normal;
}

.agent-card__body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  margin: 0;
}

.agents-closer {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  margin: var(--space-8) 0 var(--space-6);
  max-width: 70ch;
}

.agents-cta {
  display: flex;
  justify-content: flex-start;
}


/* ==========================================================================
   6  GOVERNANCE
   ========================================================================== */

.governance-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-bottom: var(--space-8);
}

.governance-body__prose {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  margin: 0;
  max-width: 65ch;
}

.governance-stack {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.governance-caption {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-soft);
  margin: 0;
  letter-spacing: 0;
}

.governance-cta {
  margin-top: var(--space-6);
}

@media (max-width: 768px) {
  .governance-body {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   7  CREDENTIALS
   ========================================================================== */

.credentials-row {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: var(--space-6) 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-5);
  align-items: center;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-paper);
}

.credential {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  text-align: center;
}

.credential img {
  width: auto;
  height: 56px;
  max-width: 160px;
  object-fit: contain;
}

.credential__label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-soft);
  margin: 0;
  letter-spacing: 0;
}

.credential--featured {
  position: relative;
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-md);
  background-color: var(--color-paper);
}

.credential--featured .credential__label {
  color: var(--color-brand-primary);
}

.credentials-caption {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-soft);
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
  letter-spacing: 0;
}

@media (max-width: 1023px) {
  .credentials-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .credentials-row {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==========================================================================
   8  PROOF BAR + NATIONAL MALL CASE STUDY
   ========================================================================== */

.proof-bar {
  padding-block: var(--space-7);
  background-color: var(--color-paper);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.proof-bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.proof-bar__label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-soft);
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}

.proof-bar__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-7);
  flex-grow: 1;
}

.proof-bar__logos img {
  height: 32px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  opacity: 0.7;
  filter: grayscale(1);
  transition: opacity var(--transition-fast), filter var(--transition-fast);
}

.proof-bar__logos li:hover img {
  opacity: 1;
  filter: grayscale(0);
}

/* Case study layout */
.proof {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.proof__h2 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
  max-width: 28ch;
  text-wrap: balance;
}

.proof__lead {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-6);
  max-width: 60ch;
}

.proof__highlights {
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.proof__highlights li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.proof__highlights li strong {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  letter-spacing: 0;
}

.proof__highlights li span {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
}

.proof__meta {
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

.proof__meta li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.proof__meta li strong {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  /* On Surface-Alt: pressed-blue clears AA where primary-blue would not. */
  color: var(--color-brand-pressed);
  letter-spacing: 0;
}

.proof__meta li span {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.proof__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Showcase column (image + pullquotes) */
.proof__showcase {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: sticky;
  top: calc(var(--header-height) + var(--space-5));
}

.proof__preview {
  display: flex;
  flex-direction: column;
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.proof__preview:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.proof__preview:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.proof__preview-frame {
  display: block;
  aspect-ratio: 16 / 9;
  background-color: var(--color-surface-card);
  overflow: hidden;
}

.proof__preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.proof__preview-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-soft);
}

.proof__preview-domain {
  font-weight: var(--fw-semibold);
  color: var(--color-brand-primary);
}

/* Pullquotes inside the showcase column.
   border-TOP only, never border-left greater than 1px. */
.proof__pullquote {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-brand-primary);
}

.proof__pullquote blockquote {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--fw-semibold);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
  max-width: 50ch;
}

.proof__pullquote figcaption {
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--color-ink-soft);
  letter-spacing: 0;
}

.proof__pullquote figcaption strong {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}

@media (max-width: 960px) {
  .proof {
    grid-template-columns: 1fr;
  }
  .proof__showcase {
    position: static;
  }
}


/* ==========================================================================
   9  METHODOLOGY (navy band)
   ========================================================================== */

.methodology-grid {
  list-style: none;
  margin: 0 0 var(--space-10);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

.methodology-phase {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.methodology-phase:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

.methodology-phase__num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--color-on-dark);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.methodology-phase__weeks {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-on-dark-soft);
  letter-spacing: 0;
  margin: 0;
}

.methodology-phase__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-on-dark);
  margin: 0;
}

.methodology-phase__body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-on-dark-soft);
  margin: 0;
}

.methodology-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

/* The methodology CTA is on a navy band. Use paper-fill on hover-darker. */
.methodology-cta__btn {
  background-color: var(--color-paper);
  color: var(--color-brand-primary);
  border-color: var(--color-paper);
}

.methodology-cta__btn:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-brand-pressed);
  border-color: var(--color-surface-alt);
}

.methodology-cta__note {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-on-dark-soft);
  margin: 0;
}


/* ==========================================================================
   10  SECTOR TRIO
   ========================================================================== */

.sector-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.sector-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.sector-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.sector-card__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-brand-primary);
  letter-spacing: 0;
  margin: 0;
}

.sector-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0;
  text-wrap: balance;
}

.sector-card__body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  margin: 0;
  flex-grow: 1;
}

.sector-card__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.sector-card__logos img {
  height: 28px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  opacity: 0.7;
  filter: grayscale(1);
}

.sector-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  color: var(--color-brand-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sector-card__link:hover {
  color: var(--color-brand-hover);
  text-decoration: underline;
}


/* ==========================================================================
   11  CONVERSION SPLIT
   ========================================================================== */

.conversion-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}

.conversion-split__rule {
  display: block;
  width: 1px;
  background-color: var(--color-border-strong);
  align-self: stretch;
}

.conversion-path {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) 0;
}

.conversion-path__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-brand-primary);
  letter-spacing: 0;
  margin: 0;
}

.conversion-path__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  letter-spacing: 0;
  margin: 0;
}

.conversion-path__body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-soft);
  margin: 0;
  max-width: 55ch;
}

.conversion-path__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.conversion-path__note {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-soft);
  margin: 0;
}

@media (max-width: 768px) {
  .conversion-split {
    grid-template-columns: 1fr;
  }
  .conversion-split__rule {
    width: 100%;
    height: 1px;
  }
}


/* ==========================================================================
   ACCESSIBILITY  visually-hidden helper for the conversion h2
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .home-hero__field-card,
  .pillar-card,
  .ai-path__position,
  .agent-card,
  .sector-card,
  .methodology-phase,
  .proof__preview,
  .proof-bar__logos img {
    transition: none;
  }
}