/* style.css — SR Thinks Inc. */

/* ==========================================================================
   Typography — SF Pro Display (headings) & SF Pro Text (body, descriptions, labels)
   Self-hosted from /fonts (woff2 first, ttf fallback).
   ========================================================================== */

@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFProDisplay-Regular.woff2') format('woff2'),
       url('../fonts/SFProDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFProDisplay-Medium.woff2') format('woff2'),
       url('../fonts/SFProDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFProDisplay-Semibold.woff2') format('woff2'),
       url('../fonts/SFProDisplay-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFProDisplay-Bold.woff2') format('woff2'),
       url('../fonts/SFProDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Text';
  src: url('../fonts/SFProText-Regular.woff2') format('woff2'),
       url('../fonts/SFProText-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Text';
  src: url('../fonts/SFProText-RegularItalic.woff2') format('woff2'),
       url('../fonts/SFProText-RegularItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Text';
  src: url('../fonts/SFProText-Medium.woff2') format('woff2'),
       url('../fonts/SFProText-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Text';
  src: url('../fonts/SFProText-Semibold.woff2') format('woff2'),
       url('../fonts/SFProText-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Text';
  src: url('../fonts/SFProText-Bold.woff2') format('woff2'),
       url('../fonts/SFProText-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-ink: #14171C;
  --color-paper: #EEF0EC;
  --color-navy: #1B2A3D;
  --color-bronze: #9C7A3F;
  --color-stone: #5B5F5A;
  --color-hairline-paper: #D7D5CC;
  --color-hairline-ink: #2B3441;

  /* Derived semi-transparent tokens */
  --color-hairline-paper-faint: rgba(215, 213, 204, 0.18);
  --color-hairline-ink-faint: rgba(43, 52, 65, 0.35);

  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: var(--font-body); /* labels now use SF Pro Text (uppercase + tracking kept) */

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 8rem;
  --spacing-xxl: 12rem;

  /* Refined transitions */
  --transition-slow: 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-medium: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.25s ease;
}

/* Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-paper);
  color: var(--color-ink);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  margin-bottom: var(--spacing-sm);
  letter-spacing: -0.01em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  z-index: 1000;
  transition: top 0.2s ease;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

ul {
  list-style: none;
}

/* Sections Themes */
.theme-paper {
  background-color: var(--color-paper);
  color: var(--color-ink);
}

.theme-ink {
  background-color: var(--color-ink);
  color: var(--color-paper);
}

.theme-navy {
  background-color: var(--color-navy);
  color: var(--color-paper);
}

.theme-paper .hairline { border-color: var(--color-hairline-ink); }
.theme-ink .hairline { border-color: var(--color-hairline-paper); }
.theme-navy .hairline { border-color: var(--color-hairline-paper); }

/* Typography Extensions */
.text-accent { color: var(--color-bronze); }
.text-stone { color: var(--color-stone); }
.text-mono {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
}
.text-large {
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.text-xlarge {
  font-size: clamp(3.25rem, 7.5vw, 6rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.text-body-large { font-size: 1.2rem; line-height: 1.7; }
.text-body-xlarge { font-size: 1.4rem; line-height: 1.5; }

/* Grid Layouts */
.container {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* --- Section & Theme: Fix border-colour bug ---
   The theme class sits on the <section> itself, not on an ancestor.
   `.theme-ink section` never matches; use direct selectors instead. */
section {
  padding: var(--spacing-xl) 0;
  border-bottom: 1px solid var(--color-hairline-ink);
}

section.theme-ink,
section.theme-navy {
  border-bottom: 1px solid var(--color-hairline-paper-faint);
}

/* Override section padding for non-section containers */
.theme-ink > section,
.theme-navy > section {
  border-bottom: 1px solid var(--color-hairline-paper-faint);
}

.grid-editorial {
  display: grid;
  grid-template-columns: 2.5fr 7.5fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.grid-asymmetric {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--spacing-md);
}

.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

.col-start-4 { grid-column-start: 4; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }

/* Header & Nav */
header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1.125rem var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  border-bottom: 1px solid var(--color-hairline-ink);
  background-color: rgba(238, 240, 236, 0.97);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transition: transform var(--transition-slow), background-color var(--transition-fast), border-color var(--transition-fast);
}

.theme-ink header, .theme-navy header {
  border-bottom: 1px solid var(--color-hairline-paper-faint);
  background-color: rgba(20, 23, 28, 0.97);
  color: var(--color-paper);
}

header.menu-open {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

header.menu-open .logo {
  color: var(--color-paper) !important;
}

header.menu-open .mobile-menu-btn {
  color: var(--color-paper) !important;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.desktop-nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

/* Nav link — sliding underline hover treatment */
.desktop-nav a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 500;
  position: relative;
  padding-bottom: 2px;
}

.desktop-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-bronze);
  transition: width var(--transition-medium);
}

.desktop-nav a:hover::after,
.desktop-nav a[aria-current="page"]::after {
  width: 100%;
}

.desktop-nav a:hover,
.desktop-nav a[aria-current="page"] {
  color: var(--color-bronze);
}

/* CTA button — border treatment on hover */
.cta-button {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: color var(--transition-fast), letter-spacing var(--transition-fast);
}

.cta-button:hover {
  color: var(--color-bronze) !important;
  letter-spacing: 0.1em;
}

.mobile-menu-btn {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0;
}

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: var(--color-ink);
  color: var(--color-paper);
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 5.5rem var(--spacing-md) 2rem;
  transform: translateY(-100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav.is-open {
  transform: translateY(0);
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5.5vh, 2.2rem);
  line-height: 1.25;
  margin-bottom: 0.75rem;
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  color: var(--color-paper);
  transition: color var(--transition-fast);
}

.mobile-nav a span {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-stone);
  margin-top: 0;
  flex-shrink: 0;
}

.mobile-nav a:hover,
.mobile-nav a[aria-current="page"] {
  color: var(--color-bronze);
}

.mobile-nav a[aria-current="page"] span {
  color: var(--color-bronze);
}

/* Footer */
footer {
  padding: var(--spacing-xl) var(--spacing-md);
  background-color: var(--color-paper);
  border-top: 1px solid var(--color-hairline-ink);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--spacing-lg);
}

.footer-brand p {
  font-size: 1rem;
  line-height: 1.65;
  max-width: 26ch;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-nav a {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transition: color var(--transition-fast);
}

.footer-nav a:hover {
  color: var(--color-bronze);
}

.footer-legal {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-hairline-ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-stone);
}

/* Components */
.metric-group {
  margin-bottom: var(--spacing-md);
}

.metric-value {
  font-family: var(--font-mono);
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.metric-label {
  color: var(--color-stone);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

/* theme-ink / theme-navy label override:
   .metric-label lives inside a section.theme-ink, not inside an ancestor */
section.theme-ink .metric-label,
section.theme-navy .metric-label {
  color: var(--color-hairline-paper);
}

/* Fallback for any parent-level theming */
.theme-ink .metric-label, .theme-navy .metric-label {
  color: var(--color-hairline-paper);
}

/* Table - Ledger */
.ledger-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-hairline-ink) transparent;
}

.ledger {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  text-align: left;
}

.ledger th, .ledger td {
  padding: 1.5rem 1.25rem 1.5rem 0;
  border-bottom: 1px solid var(--color-hairline-ink);
  vertical-align: top;
}

/* Fix ledger borders — same root-on-section bug */
section.theme-ink .ledger th,
section.theme-ink .ledger td,
section.theme-navy .ledger th,
section.theme-navy .ledger td,
.theme-ink .ledger th,
.theme-ink .ledger td,
.theme-navy .ledger th,
.theme-navy .ledger td {
  border-bottom: 1px solid var(--color-hairline-paper-faint);
}

.ledger th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 500;
  color: var(--color-stone);
  padding-bottom: 0.875rem;
}

.ledger td {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.35;
  transition: color var(--transition-fast);
}

.ledger td.text-mono {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  padding-top: calc(1.5rem + 0.2rem);
  line-height: 1.5;
}

.ledger tr {
  transition: background-color var(--transition-fast);
}

.ledger tbody tr:hover td {
  color: var(--color-bronze);
}

/* Numbered Section */
.section-number {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-stone);
  margin-bottom: var(--spacing-md);
  display: block;
}

/* Leadership Row */
.leadership-row {
  display: flex;
  align-items: flex-start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--color-hairline-ink);
  gap: var(--spacing-md);
}

/* Fix for direct-theme leadership rows */
section.theme-ink .leadership-row,
section.theme-navy .leadership-row,
.theme-ink .leadership-row,
.theme-navy .leadership-row {
  border-bottom: 1px solid var(--color-hairline-paper-faint);
}

.monogram {
  width: 72px;
  height: 72px;
  border: 1px solid var(--color-hairline-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.75rem;
  flex-shrink: 0;
  color: var(--color-stone);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.leadership-row:hover .monogram {
  border-color: var(--color-bronze);
  color: var(--color-bronze);
}

section.theme-ink .monogram,
section.theme-navy .monogram,
.theme-ink .monogram,
.theme-navy .monogram {
  border-color: var(--color-hairline-paper-faint);
}

.leader-info {
  flex-grow: 1;
}

.leader-name {
  font-size: 1.75rem;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 0.35rem;
}

.leader-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  color: var(--color-stone);
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
}

section.theme-ink .leader-title,
section.theme-navy .leader-title,
.theme-ink .leader-title,
.theme-navy .leader-title {
  color: var(--color-hairline-paper);
}

/* Specific Utilities */
.border-top { border-top: 1px solid var(--color-hairline-ink); }
.theme-ink .border-top, .theme-navy .border-top { border-top: 1px solid rgba(215, 213, 204, 0.2); }

.pad-top-md { padding-top: var(--spacing-md); }
.pad-top-lg { padding-top: var(--spacing-lg); }
.pad-bot-md { padding-bottom: var(--spacing-md); }

/* Animations */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay utilities (add to children for sequenced reveals) */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* Table & Process Utilities */
.scroll-hint {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-stone);
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
}

.process-pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.process-step {
  font-size: 1.25rem;
}

.process-arrow {
  color: var(--color-stone);
  font-family: var(--font-mono);
}

h1, h2, h3, h4, h5, h6, .text-large, .text-xlarge {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .mobile-nav {
    transition: none !important;
  }
}

/* Responsive */
@media (max-width: 1280px) {
  .text-xlarge {
    font-size: clamp(3rem, 7vw, 5.5rem);
  }

  .text-large {
    font-size: clamp(2rem, 5vw, 4rem);
  }
}

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

  .desktop-nav {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
    color: inherit;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .scroll-hint {
    display: block;
  }
}

@media (max-width: 768px) {
  :root {
    --spacing-xl: 3.5rem;
    --spacing-xxl: 5rem;
  }

  .container {
    padding: 0 1.25rem;
  }

  header {
    padding: 0.875rem 1.25rem;
  }

  .grid-asymmetric {
    display: flex;
    flex-direction: column;
  }

  .col-3, .col-4, .col-6, .col-7, .col-8, .col-9, .col-12 {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .text-xlarge {
    font-size: clamp(2.2rem, 8vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .text-large {
    font-size: clamp(1.75rem, 6.5vw, 2.25rem);
    line-height: 1.12;
  }

  .metric-value {
    font-size: 2.75rem;
  }

  .monogram {
    width: 58px;
    height: 58px;
    font-size: 1.4rem;
  }

  .leader-name {
    font-size: 1.5rem;
  }

  .section-number {
    font-size: 0.72rem;
  }

  .process-step {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  :root {
    --spacing-xl: 3rem;
    --spacing-xxl: 4.5rem;
  }

  .container {
    padding: 0 1rem;
  }

  header {
    padding: 0.75rem 1rem;
  }

  .text-xlarge {
    font-size: 2rem;
    line-height: 1.08;
    letter-spacing: -0.02em;
  }

  .text-large {
    font-size: 1.6rem;
    line-height: 1.12;
  }

  .metric-value {
    font-size: 2.35rem;
    letter-spacing: -0.02em;
  }

  .monogram {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .leader-name {
    font-size: 1.3rem;
  }

  .leadership-row {
    gap: 1rem;
  }


  .mobile-nav {
    padding: 4.5rem 1rem 2rem;
  }
}


/* ============================================================
   HOMEPAGE — Section-specific components
   All classes below are NEW. Nothing above is modified.
============================================================ */

/* --- 01 HERO --- */
.hero-section {
  padding-top: var(--spacing-xxl);
  padding-bottom: var(--spacing-xxl);
}

.hero-inner {
  width: 100%;
}

.hero-eyebrow {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-hairline-paper-faint);
}

.hero-headline {
  margin-bottom: var(--spacing-lg);
}

/* CRITICAL FIX: hero body paragraph — full editorial reading width, NOT narrow */
.hero-body {
  max-width: 65ch;
  margin-top: var(--spacing-md);
}

.hero-body p {
  line-height: 1.75;
}

/* --- 02 METRICS ROW --- */
.metrics-row {
  display: flex;
  align-items: stretch;
  padding: var(--spacing-lg) 0;
}

.metric-cell {
  flex: 1;
  padding-right: var(--spacing-lg);
}

.metric-cell--locations {
  padding-right: 0;
}

.metric-location {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-hairline-paper);
  line-height: 1.9;
}

.metric-divider {
  width: 1px;
  background-color: var(--color-hairline-paper-faint);
  margin: 0 var(--spacing-lg);
  flex-shrink: 0;
}

/* --- 03 OPERATING MODEL FLOW --- */
.operating-model-flow {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-hairline-ink);
}

.om-label {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.om-arrow {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--color-stone);
}

/* ============================================================
   04 — ON DISCIPLINE
============================================================ */

.discipline-section {
  padding: 0;
  background: #0b3025;
}

.discipline-layout {
  display: grid;
  grid-template-columns: 48% 52%;
  min-height: 650px;
  align-items: stretch;
}

/* ============================================================
   LEFT IMAGE
============================================================ */

.discipline-image {
  position: relative;
  width: 100%;
  min-height: 650px;
  overflow: hidden;
}

.discipline-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* ============================================================
   IMAGE COLOR LAYER
   MATCHES THE GREEN/NAVY SECTION
============================================================ */

.discipline-image-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(7, 31, 28, 0.78) 0%,
      rgba(8, 35, 31, 0.68) 45%,
      rgba(9, 43, 34, 0.60) 100%
    );

  mix-blend-mode: normal;
}

/* ============================================================
   IMAGE LABEL
============================================================ */

.discipline-image-label {
  position: absolute;
  left: 40px;
  bottom: 38px;
  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: 8px;
}

.discipline-image-label .section-number {
  font-size: 13px;
  line-height: 1;
}

.discipline-image-label .text-mono {
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* ============================================================
   RIGHT CONTENT
============================================================ */

.discipline-body {
  padding: 65px 70px 65px 72px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  max-width: 760px;
}

.discipline-body .text-body-large {
  max-width: 620px;

  margin: 0 0 30px;

  line-height: 1.65;
}

.discipline-body .text-body-large:last-child {
  margin-bottom: 0;
}


/* ============================================================
   DESKTOP — REDUCE EMPTY SPACE
============================================================ */

@media (min-width: 1200px) {

  .discipline-layout {
    grid-template-columns: 47% 53%;
    min-height: 630px;
  }

  .discipline-image {
    min-height: 630px;
  }

  .discipline-body {
    padding-left: 68px;
    padding-right: 55px;
  }

  .discipline-body .text-body-large {
    max-width: 610px;
  }
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

  .discipline-layout {
    grid-template-columns: 1fr;
  }

  .discipline-image {
    min-height: 420px;
  }

  .discipline-body {
    max-width: none;
    padding: 55px 35px;
  }

  .discipline-body .text-body-large {
    max-width: none;
  }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .discipline-image {
    min-height: 320px;
  }

  .discipline-image-label {
    left: 25px;
    bottom: 25px;
  }

  .discipline-body {
    padding: 45px 22px;
  }

}

/* --- 05 DOMAIN INDEX --- */
.domain-index {
  border-top: 1px solid var(--color-hairline-paper-faint);
}

.domain-row {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-hairline-paper-faint);
  cursor: default;
  transition: color var(--transition-fast);
}

.domain-row:hover {
  color: var(--color-bronze);
}

.domain-num {
  color: var(--color-stone);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  min-width: 2rem;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.domain-row:hover .domain-num {
  color: var(--color-bronze);
}

.domain-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  flex: 1;
}

.domain-arrow {
  font-size: 0.85rem;
  color: var(--color-stone);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

.domain-row:hover .domain-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-bronze);
}

/* --- 06 ENGAGEMENT GRID --- */
.engagement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-hairline-ink);
}

.engagement-block {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 0;
  border-right: 1px solid var(--color-hairline-ink);
  gap: var(--spacing-sm);
}

.engagement-block:last-child {
  border-right: none;
  padding-right: 0;
}

.engagement-block:not(:first-child) {
  padding-left: var(--spacing-md);
}

.engagement-num {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-stone);
}

.engagement-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0;
}

.engagement-content p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-stone);
}

/* --- 07 HUBS GRID --- */
.hubs-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  border-top: 1px solid var(--color-hairline-paper-faint);
  padding-top: var(--spacing-lg);
}

.hub-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: var(--spacing-lg);
}

.hub-block:last-child {
  padding-right: 0;
  padding-left: var(--spacing-lg);
}

.hub-divider {
  width: 1px;
  background-color: var(--color-hairline-paper-faint);
  flex-shrink: 0;
}

.hub-coords {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--color-stone);
  margin-bottom: 0.25rem;
}

.hub-city {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-paper);
}

.hub-region {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  color: var(--color-stone);
  margin-top: 0.25rem;
}

.hub-role {
  font-size: 0.95rem;
  color: var(--color-hairline-paper);
  line-height: 1.5;
  margin-top: var(--spacing-sm);
  max-width: 30ch;
}

/* --- 08 TALENT PILLARS --- */
.talent-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  border-top: 1px solid var(--color-hairline-ink);
  padding-top: var(--spacing-md);
}

.talent-pillar {
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-hairline-ink);
}

/* --- 09 FINAL CTA --- */
.cta-section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: start;
}

.cta-section-headline h2 {
  margin-bottom: 0;
}

.cta-primary {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-paper);
  padding: 1rem 1.75rem;
  border: 1px solid rgba(215, 213, 204, 0.4);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  margin-right: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.cta-primary:hover {
  background-color: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}

.cta-secondary {
  display: inline-flex;
  align-items: center;
  color: var(--color-stone);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  padding: 1rem 0;
  transition: color var(--transition-fast);
  margin-bottom: var(--spacing-sm);
}

.cta-secondary:hover {
  color: var(--color-bronze);
}

.cta-section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================================
   HOMEPAGE RESPONSIVE OVERRIDES
============================================================ */

@media (max-width: 1024px) {
  .metrics-row {
    flex-wrap: wrap;
    gap: var(--spacing-lg);
  }

  .metric-cell {
    flex: 0 0 calc(50% - var(--spacing-lg));
    padding-right: 0;
  }

  .metric-divider {
    display: none;
  }

  .hubs-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hub-divider {
    display: none;
  }

  .hub-block {
    padding-right: 0;
  }

  .hub-block:last-child {
    padding-left: 0;
  }

  .cta-section-inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
}

@media (max-width: 768px) {
  .hero-section {
    min-height: auto;
    padding-bottom: var(--spacing-lg);
  }

  .hero-body {
    max-width: 100%;
  }

  .metrics-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
  }

  .metric-cell {
    flex: unset;
  }

  .metric-cell--locations {
    grid-column: span 2;
  }

  .operating-model-flow {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .engagement-grid {
    grid-template-columns: 1fr;
  }

  .engagement-block {
    border-right: none;
    border-bottom: 1px solid var(--color-hairline-ink);
    padding: var(--spacing-md) 0;
  }

  .engagement-block:not(:first-child) {
    padding-left: 0;
  }

  .engagement-block:last-child {
    border-bottom: none;
  }

  .hubs-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .talent-pillars {
    grid-template-columns: 1fr;
  }

  .cta-section-inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .domain-name {
    font-size: 1.15rem;
  }
}

@media (max-width: 480px) {
  .metrics-row {
    grid-template-columns: 1fr;
  }

  .metric-cell--locations {
    grid-column: span 1;
  }

  .cta-primary {
    width: 100%;
    justify-content: center;
    margin-right: 0;
    text-align: center;
  }

  .cta-secondary {
    width: 100%;
    justify-content: center;
  }

  .domain-name {
    font-size: 1rem;
  }

  .domain-row {
    gap: 0.75rem;
  }
}


/* ============================================================
   ABOUT PAGE — Component styles
   All classes below are NEW and prefixed about-
============================================================ */

/* Hero */
.about-hero-image-block {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40%;
  overflow: hidden;
  isolation: isolate;
}

/* Image layer */
.about-hero-image-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 1;
  mix-blend-mode: normal;
}

/* Stronger visible overlay */
.about-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    135deg,
    rgba(225, 235, 228, 0.42) 0%,
    rgba(225, 235, 228, 0.12) 45%,
    rgba(12, 30, 28, 0.48) 100%
  ) !important;
}

/* Keep caption above overlay */
.plant-image-label {
  position: absolute;
  z-index: 2;
}


/* Section 01 — typographic stack */
.about-stack {
  border-top: 1px solid var(--color-hairline-ink);
  padding-top: var(--spacing-md);
}

.about-stack-row {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-md);
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-hairline-ink);
}

.about-stack-row .text-mono {
  min-width: 10rem;
  flex-shrink: 0;
}

.about-stack-value {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.about-stack-connector {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--color-stone);
  padding: 0.5rem 0 0.5rem var(--spacing-md);
  display: block;
}

/* Section 03 — depth stats */
/* ============================================================
   THE DISCIPLINE — IMAGE + CONTENT
============================================================ */

.discipline-section {
  padding: 0 !important;
  background: #0b3025;
}

.discipline-section .container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}


/* ============================================================
   TWO COLUMN LAYOUT
============================================================ */

.discipline-layout {
  display: grid;
  grid-template-columns: 48% 52%;
  width: 100%;
  min-height: 620px;
  align-items: stretch;
}


/* ============================================================
   LEFT IMAGE
============================================================ */

.discipline-image {
  position: relative;
  width: 100%;
  min-height: 620px;
  overflow: hidden;
}

.discipline-image img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;
}


/* ============================================================
   IMAGE COLOR OVERLAY
============================================================ */

.discipline-image-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background: rgba(8, 38, 32, 0.58);

  pointer-events: none;
}


/* ============================================================
   IMAGE LABEL
============================================================ */

.discipline-image-label {
  position: absolute;

  left: 40px;
  bottom: 35px;

  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: 8px;
}

.discipline-image-label .section-number {
  font-size: 13px;
}

.discipline-image-label .text-mono {
  font-size: 14px;
  letter-spacing: 0.16em;
}


/* ============================================================
   RIGHT CONTENT
============================================================ */

.discipline-body {
  padding: 65px 7% 65px 7%;

  display: flex;
  flex-direction: column;
  justify-content: center;

  box-sizing: border-box;
}

.discipline-body .text-body-large {
  max-width: 750px;

  margin: 0 0 30px;

  line-height: 1.65;
}

.discipline-body .text-body-large:last-child {
  margin-bottom: 0;
}


/* ============================================================
   DESKTOP — SLIGHTLY COMPACT
============================================================ */

@media (min-width: 1200px) {

  .discipline-layout {
    grid-template-columns: 46% 54%;
    min-height: 600px;
  }

  .discipline-image {
    min-height: 600px;
  }

  .discipline-body {
    padding-left: 70px;
    padding-right: 90px;
  }

  .discipline-body .text-body-large {
    max-width: 620px;
  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

  .discipline-layout {
    grid-template-columns: 1fr;
  }

  .discipline-image {
    min-height: 420px;
  }

  .discipline-body {
    padding: 55px 35px;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  .discipline-image {
    min-height: 320px;
  }

  .discipline-image-label {
    left: 25px;
    bottom: 25px;
  }

  .discipline-body {
    padding: 45px 22px;
  }

}

/* Section 04 — governance pillars */
.about-governance-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--color-hairline-paper-faint);
}

.about-governance-pillar {
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-hairline-paper-faint);
}

.about-governance-pillar:nth-child(even) {
  padding-left: var(--spacing-md);
  border-left: 1px solid var(--color-hairline-paper-faint);
  padding-right: 0;
}

/* Section 05 — talent progression */
.about-progression {
  border-top: 1px solid var(--color-hairline-ink);
  padding-top: var(--spacing-md);
}

.about-progression-step {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-hairline-ink);
}

.about-progression-arrow {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--color-bronze);
  padding: 0.5rem 0;
  display: block;
}

/* Section 06 — process steps */
.about-process {
  border-top: 1px solid var(--color-hairline-paper-faint);
}

.about-process-step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-hairline-paper-faint);
}

.about-process-num {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-stone);
  min-width: 2rem;
  padding-top: 0.15rem;
  flex-shrink: 0;
}

.about-process-content {
  flex: 1;
}

/* ============================================================
   ABOUT RESPONSIVE
============================================================ */

@media (max-width: 1024px) {
  .about-hero-inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .about-depth-stats {
    grid-template-columns: 1fr;
  }

  .about-depth-divider {
    display: none;
  }

  .about-depth-num {
    font-size: 3rem;
  }
}

@media (max-width: 768px) {
  .about-stack-row {
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 0;
  }

  .about-stack-row .text-mono {
    min-width: unset;
  }

  .about-governance-pillars {
    grid-template-columns: 1fr;
  }

  .about-governance-pillar:nth-child(even) {
    padding-left: 0;
    border-left: none;
  }

  .about-depth-stats {
    gap: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .about-depth-num {
    font-size: 2.5rem;
  }

  .about-process-step {
    gap: 0.75rem;
  }
}

/* ============================================================
   PORTFOLIO PAGE — Component styles (prefixed pf-)
============================================================ */

/* Bench focus — SF Pro Text body copy, not mono */
.pf-bench {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-hairline-paper);
}

/* Pending company name — intentional editorial treatment */
.pf-pending {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-stone);
}

/* Publication note */
.pf-pub-note {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-hairline-paper-faint);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-stone);
  text-transform: none;
}

/* Data strip */
.pf-data-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--color-hairline-ink);
  border-bottom: 1px solid var(--color-hairline-ink);
}

.pf-data-cell {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 0;
}

.pf-data-cell:last-child {
  padding-right: 0;
}

.pf-data-num {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}

.pf-data-divider {
  width: 1px;
  background-color: var(--color-hairline-ink);
  margin: 0 var(--spacing-lg) 0 0;
  flex-shrink: 0;
}

/* Mobile stacked records — hidden by default on desktop */
.pf-stacked {
  display: none;
}

/* Desktop ledger — shown by default */
.pf-ledger-desktop {
  display: block;
}

/* Mobile stacked record layout */
.pf-record {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-hairline-paper-faint);
}

.pf-record-num {
  font-size: 0.72rem;
  color: var(--color-stone);
  letter-spacing: 0.1em;
  margin-bottom: 0.35rem;
}

.pf-record-domain {
  font-size: 0.9rem;
  letter-spacing: 0.07em;
  color: var(--color-paper);
  margin-bottom: var(--spacing-sm);
}

.pf-record-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  align-items: baseline;
}

.pf-record-dl dt {
  font-size: 0.7rem;
  color: var(--color-stone);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-top: 0.1rem;
  white-space: nowrap;
}

.pf-record-dl dd {
  margin: 0;
}

/* ============================================================
   PORTFOLIO RESPONSIVE
============================================================ */

@media (max-width: 768px) {
  /* Switch to stacked layout below 768 */
  .pf-ledger-desktop {
    display: none;
  }

  .pf-stacked {
    display: block;
    padding-top: var(--spacing-sm);
  }

  .pf-data-strip {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .pf-data-cell {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-hairline-ink);
  }

  .pf-data-cell:last-child {
    border-bottom: none;
  }

  .pf-data-divider {
    display: none;
  }

  .pf-data-num {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .pf-record-dl {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .pf-record-dl dt {
    margin-top: 0.5rem;
  }
}

/* ============================================================
   CAPABILITIES PAGE — Component styles (prefixed cap-)
============================================================ */

/* Capability index — editorial rows */
.cap-index {
  border-top: 1px solid var(--color-hairline-paper-faint);
}

.cap-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--spacing-lg);
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-hairline-paper-faint);
  transition: background-color var(--transition-fast);
}

.cap-row:hover {
  background-color: rgba(43, 52, 65, 0.04);
}

.cap-row-left {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.cap-num {
  font-size: 0.72rem;
  color: var(--color-stone);
  letter-spacing: 0.1em;
  flex-shrink: 0;
  min-width: 1.8rem;
  transition: color var(--transition-fast);
}

.cap-row:hover .cap-num {
  color: var(--color-bronze);
}

.cap-name {
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--color-paper);
  line-height: 1.3;
}

.cap-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-stone);
}

/* Specialization two-column grid */
.cap-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--spacing-xl);
}

.cap-spec-item {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-hairline-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
}

/* Philosophy chain (Section 03) */
.cap-chain {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  border-top: 1px solid var(--color-hairline-paper-faint);
  padding-top: var(--spacing-md);
}

.cap-chain-step {
  flex: 1;
  min-width: 160px;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 0;
}

.cap-chain-arrow {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--color-stone);
  padding-top: 0.2rem;
  flex-shrink: 0;
  align-self: flex-start;
}

/* Scale data grid (Section 04) */
.cap-scale-grid {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--color-hairline-ink);
  border-bottom: 1px solid var(--color-hairline-ink);
  padding: var(--spacing-lg) 0;
}

.cap-scale-cell {
  flex: 1;
  padding-right: var(--spacing-lg);
}

.cap-scale-cell--hubs {
  flex: 1.2;
  padding-right: 0;
}

.cap-scale-num {
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}

.cap-scale-divider {
  width: 1px;
  background-color: var(--color-hairline-ink);
  margin: 0 var(--spacing-lg);
  flex-shrink: 0;
}

/* ============================================================
   CAPABILITIES RESPONSIVE
============================================================ */

@media (max-width: 1024px) {
  .cap-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .cap-spec-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .cap-scale-grid {
    flex-wrap: wrap;
    gap: var(--spacing-md);
  }

  .cap-scale-cell {
    flex: 0 0 calc(33.33% - var(--spacing-md));
    padding-right: 0;
  }

  .cap-scale-divider {
    display: none;
  }

  .cap-chain {
    flex-direction: column;
    gap: 0;
  }

  .cap-chain-arrow {
    transform: rotate(90deg);
    padding: 0.4rem 0;
    display: block;
  }

  .cap-chain-step {
    padding-right: 0;
    border-bottom: 1px solid var(--color-hairline-paper-faint);
    padding-bottom: var(--spacing-sm);
  }
}

@media (max-width: 768px) {
  .cap-scale-cell {
    flex: 0 0 calc(50% - var(--spacing-md));
  }

  .cap-row-left {
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .cap-scale-cell {
    flex: 0 0 100%;
  }

  .cap-scale-num {
    font-size: 1.8rem;
  }

  .cap-spec-item {
    font-size: 0.95rem;
  }
}


/* ============================================================
   DELIVERY PAGE — Component styles (prefixed dlv-)
============================================================ */

/* Hero body */
.dlv-hero-body {
  margin-top: var(--spacing-md);
}

/* Delivery framework — vertical chain */
.dlv-framework {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-hairline-paper-faint);
  padding-top: var(--spacing-md);
}

.dlv-fw-step {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-hairline-paper-faint);
}

.dlv-fw-label {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-paper);
}

.dlv-fw-arrow {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--color-stone);
  padding: 0.4rem 0 0.4rem 1rem;
}

/* Delivery metrics row (pending) */
.dlv-metrics-row {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--color-hairline-ink);
  border-bottom: 1px solid var(--color-hairline-ink);
  padding: var(--spacing-lg) 0;
}

.dlv-metric-cell {
  flex: 1;
  padding-right: var(--spacing-lg);
}

.dlv-metric-cell:last-child {
  padding-right: 0;
}

.dlv-metric-divider {
  width: 1px;
  background-color: var(--color-hairline-ink);
  margin: 0 var(--spacing-lg);
  flex-shrink: 0;
}

/* ============================================================
   DELIVERY RESPONSIVE
============================================================ */

@media (max-width: 768px) {
  .dlv-metrics-row {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .dlv-metric-cell {
    padding-right: 0;
    border-bottom: 1px solid var(--color-hairline-ink);
    padding-bottom: var(--spacing-md);
  }

  .dlv-metric-cell:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .dlv-metric-divider {
    display: none;
  }

  .dlv-fw-label {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .dlv-fw-step {
    gap: 0.75rem;
  }
}


/* ============================================================
   LEADERSHIP PAGE — Component styles (prefixed ldr-)
============================================================ */

/* Biography body text */
.ldr-bio {
  font-family: var(--font-body);
  font-size: 0.975rem;
  line-height: 1.75;
  color: var(--color-stone);
  margin-top: var(--spacing-sm);
  max-width: 66ch;
}

/* Pending note — subtle, below bio */
.ldr-pending-note {
  margin-top: var(--spacing-sm);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(91, 95, 90, 0.6);
}

/* Pending surname — inline, de-emphasised */
.ldr-surname-pending {
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: 0.05em;
  color: var(--color-stone);
  font-weight: 400;
}

/* Data strip */
.ldr-data-strip {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--spacing-sm) 0;
}

.ldr-data-cell {
  flex: 1;
}

.ldr-data-divider {
  width: 1px;
  height: 3rem;
  background-color: var(--color-hairline-paper-faint);
  margin: 0 var(--spacing-lg);
  flex-shrink: 0;
}

/* ============================================================
   LEADERSHIP RESPONSIVE
============================================================ */

@media (max-width: 768px) {
  .ldr-data-strip {
    flex-wrap: wrap;
    gap: var(--spacing-md);
  }

  .ldr-data-cell {
    flex: 0 0 calc(50% - var(--spacing-md));
  }

  .ldr-data-divider {
    display: none;
  }
}

@media (max-width: 480px) {
  .ldr-data-cell {
    flex: 0 0 100%;
  }

  .ldr-bio {
    font-size: 0.93rem;
  }
}


/* ============================================================
   LEADERSHIP PREMIUM POLISH — hero + roster (replaces old ldr-* classes)
============================================================ */

/* Hero section */
.ldr-hero-section {
  padding-bottom: var(--spacing-lg);
}

.ldr-hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-stone);
  margin-bottom: var(--spacing-md);
}

.ldr-hero-heading {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 7rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin-bottom: var(--spacing-lg);
}

.ldr-hero-body {
  margin-top: 0;
}

.ldr-hero-note {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--color-stone);
  line-height: 1.7;
  max-width: 58ch;
  font-family: var(--font-mono);
}

/* Roster header (above column labels) */
.ldr-roster-header {
  margin-bottom: var(--spacing-md);
}

.ldr-roster-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-ink);
}

/* 4-column roster row */
.ldr-row {
  display: grid;
  grid-template-columns: 2.5rem 5rem 1fr 1.6fr;
  gap: 0 var(--spacing-md);
  align-items: baseline;
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--color-hairline-ink);
}

.ldr-row-header {
  padding: var(--spacing-sm) 0;
  border-bottom: 2px solid var(--color-hairline-ink);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-stone);
}

.ldr-row-last {
  border-bottom: none;
}

/* Column cells */
.ldr-col-idx {
  padding-top: 0.15rem;
}

.ldr-col-mono {
  display: flex;
  align-items: flex-start;
}

.ldr-col-name {
  padding-top: 0.1rem;
}

.ldr-col-bio {
  padding-top: 0.1rem;
}

/* Index number */
.ldr-idx {
  font-size: 0.72rem;
  color: var(--color-stone);
  letter-spacing: 0.08em;
}

/* Premium monogram — square, hairline border, SF Pro Display */
.ldr-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--color-hairline-ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  flex-shrink: 0;
}

/* Name, title in roster */
.ldr-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}

.ldr-title {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-stone);
}

/* Data strip (renamed from ldr-data-*) */
.ldr-strip {
  display: flex;
  align-items: center;
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--color-hairline-paper-faint);
  border-bottom: 1px solid var(--color-hairline-paper-faint);
}

.ldr-strip-cell {
  flex: 1;
}

.ldr-strip-div {
  width: 1px;
  height: 3.5rem;
  background-color: var(--color-hairline-paper-faint);
  margin: 0 var(--spacing-xl);
  flex-shrink: 0;
}

/* ============================================================
   LEADERSHIP PREMIUM — RESPONSIVE
============================================================ */

@media (max-width: 1024px) {
  .ldr-hero-heading {
    font-size: clamp(3rem, 8vw, 5rem);
  }

  .ldr-row {
    grid-template-columns: 2rem 4rem 1fr 1.2fr;
    gap: 0 var(--spacing-sm);
  }
}

@media (max-width: 768px) {
  .ldr-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
  }

  .ldr-row-header {
    display: none;
  }

  .ldr-col-idx {
    display: none;
  }

  .ldr-col-mono {
    margin-bottom: 0;
  }

  .ldr-strip {
    flex-wrap: wrap;
    gap: var(--spacing-md);
  }

  .ldr-strip-cell {
    flex: 0 0 calc(50% - var(--spacing-md));
  }

  .ldr-strip-div {
    display: none;
  }

  .ldr-hero-heading {
    font-size: clamp(2.8rem, 10vw, 4rem);
  }
}

@media (max-width: 480px) {
  .ldr-hero-heading {
    font-size: clamp(2.5rem, 12vw, 3.5rem);
  }

  .ldr-strip-cell {
    flex: 0 0 100%;
  }

  .ldr-roster-heading {
    font-size: 2rem;
  }

  .ldr-monogram {
    width: 3rem;
    height: 3rem;
    font-size: 0.9rem;
  }
}


/* ============================================================
   CAREERS PAGE — Component styles (prefixed car-)
============================================================ */

/* Hero */
.car-hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-stone);
  margin-bottom: var(--spacing-md);
}

.car-hero-heading {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.5vw, 6.5rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--color-paper);
  margin-bottom: var(--spacing-lg);
}

.car-hero-body {
  margin-top: 0;
}

/* Trajectory — editorial labelled items */
.car-trajectory {
  border-top: 1px solid var(--color-hairline-ink);
}

.car-traj-item {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 0 var(--spacing-lg);
  align-items: baseline;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--color-hairline-ink);
}

.car-traj-last {
  border-bottom: none;
}

.car-traj-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-stone);
}

.car-traj-body {
  font-family: var(--font-body);
  font-size: 0.975rem;
  line-height: 1.75;
  color: var(--color-ink);
}

/* Two career paths */
.car-paths-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 var(--spacing-xl);
  border-top: 1px solid var(--color-hairline-paper-faint);
  padding-top: var(--spacing-lg);
}

.car-path-divider {
  background-color: var(--color-hairline-paper-faint);
}

.car-path-block {
  padding-bottom: var(--spacing-lg);
}

.car-path-num {
  font-size: 0.72rem;
  color: var(--color-stone);
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-sm);
}

.car-path-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-paper);
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-md);
}

.car-path-body p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-stone);
  margin-bottom: var(--spacing-sm);
}

/* Domain chain — horizontal */
.car-domain-chain {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  border-top: 1px solid var(--color-hairline-paper-faint);
  padding-top: var(--spacing-md);
}

.car-domain-step {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.car-domain-num {
  font-size: 0.68rem;
  color: var(--color-stone);
  letter-spacing: 0.08em;
}

.car-domain-label {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-paper);
  letter-spacing: 0.02em;
}

.car-domain-arrow {
  font-size: 1rem;
  color: var(--color-stone);
}

/* Pending contact block */
.car-pending-block {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xl);
  padding: var(--spacing-md) 0;
  border-top: 1px solid rgba(215,213,204,0.15);
}

.car-pending-item {
  flex: 1;
}

.car-pending-div {
  width: 1px;
  height: 2.5rem;
  background-color: rgba(215,213,204,0.15);
  flex-shrink: 0;
}

/* ============================================================
   CAREERS RESPONSIVE
============================================================ */

@media (max-width: 1024px) {
  .car-hero-heading {
    font-size: clamp(2.8rem, 8vw, 5rem);
  }

  .car-traj-item {
    grid-template-columns: 1fr 1.4fr;
  }
}

@media (max-width: 768px) {
  .car-hero-heading {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  .car-traj-item {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
  }

  .car-paths-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .car-path-divider {
    display: none;
  }

  .car-path-block {
    border-bottom: 1px solid var(--color-hairline-paper-faint);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .car-domain-chain {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .car-domain-arrow {
    display: none;
  }

  .car-pending-block {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .car-pending-div {
    display: none;
  }
}

@media (max-width: 480px) {
  .car-hero-heading {
    font-size: clamp(2.2rem, 12vw, 3rem);
  }

  .car-path-title {
    font-size: 1.1rem;
  }
}


/* ============================================================
   CONTACT PAGE — Component styles (prefixed cnt-)
============================================================ */

/* Hero */
.cnt-hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-stone);
  margin-bottom: var(--spacing-md);
}

.cnt-hero-heading {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin-bottom: var(--spacing-lg);
}

.cnt-hero-body {
  margin-top: 0;
}

/* Locations */
.cnt-locations {
  display: flex;
  gap: var(--spacing-xl);
  border-top: 1px solid var(--color-hairline-paper-faint);
  padding-top: var(--spacing-md);
}

.cnt-location {
  flex: 1;
}

.cnt-loc-div {
  width: 1px;
  background-color: var(--color-hairline-paper-faint);
  flex-shrink: 0;
}

.cnt-loc-city {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-bronze);
  margin-bottom: var(--spacing-sm);
}

.cnt-loc-addr {
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--color-stone);
}

/* Directory */
.cnt-directory {
  border-top: 1px solid rgba(215,213,204,0.2);
}

.cnt-dir-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-md);
  padding: 1rem 0;
  border-bottom: 1px solid rgba(215,213,204,0.15);
}

.cnt-dir-last {
  border-bottom: none;
}

.cnt-dir-label {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-paper);
}

.cnt-dir-status {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(91,95,90,0.6);
  text-align: right;
}

/* Form section split (35/65) */
.cnt-form-split {
  display: grid;
  grid-template-columns: 35fr 65fr;
  gap: var(--spacing-xl);
  align-items: start;
}

.cnt-form-left {
  position: sticky;
  top: calc(var(--spacing-xxl) + 1rem);
}

.cnt-form-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-paper);
  margin-bottom: var(--spacing-lg);
}

.cnt-form-subtext {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--color-stone);
  max-width: 36ch;
}

/* Form */
.cnt-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.cnt-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

.cnt-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cnt-field-full {
  grid-column: 1 / -1;
}

.cnt-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-stone);
}

.cnt-req {
  color: var(--color-bronze);
}

.cnt-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(215,213,204,0.35);
  padding: 0.65rem 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-paper);
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.cnt-input::placeholder {
  color: rgba(91,95,90,0.45);
}

.cnt-input:focus {
  border-bottom-color: var(--color-bronze);
}

.cnt-input[aria-invalid="true"] {
  border-bottom-color: #c0392b;
}

/* Select wrapper (custom arrow) */
.cnt-select-wrap {
  position: relative;
}

.cnt-select {
  cursor: pointer;
  padding-right: 2rem;
}

.cnt-select option {
  background: var(--color-ink);
  color: var(--color-paper);
}

.cnt-select-arrow {
  position: absolute;
  right: 0.25rem;
  bottom: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-stone);
  pointer-events: none;
}

/* Textarea */
.cnt-textarea {
  resize: vertical;
  min-height: 9rem;
  line-height: 1.7;
}

/* Fieldset reset */
.cnt-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* Radio group */
.cnt-radio-group {
  display: flex;
  gap: var(--spacing-lg);
  padding-top: 0.35rem;
}

.cnt-radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-stone);
}

.cnt-radio-label input[type="radio"] {
  accent-color: var(--color-bronze);
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* Checkbox */
.cnt-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.cnt-checkbox-label input[type="checkbox"] {
  accent-color: var(--color-bronze);
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  cursor: pointer;
  flex-shrink: 0;
}

.cnt-consent-text {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--color-stone);
  line-height: 1.5;
}

/* Submit button */
.cnt-submit-row {
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(215,213,204,0.2);
}

.cnt-submit {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-paper);
  cursor: pointer;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cnt-submit:hover {
  color: var(--color-bronze);
}

.cnt-submit:focus-visible {
  outline: 2px solid var(--color-bronze);
  outline-offset: 4px;
}

.cnt-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Inline error messages */
.cnt-error {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #c0392b;
  margin-top: 0.25rem;
}

/* Status block (success / error / pending) */
.cnt-status {
  padding: var(--spacing-md);
  border-left: 2px solid var(--color-bronze);
  margin-bottom: var(--spacing-md);
}

.cnt-status--success { border-left-color: #2e7d5c; }
.cnt-status--error   { border-left-color: #c0392b; }
.cnt-status--pending { border-left-color: var(--color-bronze); }

.cnt-status-heading {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-paper);
  margin-bottom: 0.5rem;
}

.cnt-status-body {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-stone);
  line-height: 1.6;
}

/* ============================================================
   CONTACT RESPONSIVE
============================================================ */

@media (max-width: 1024px) {
  .cnt-form-split {
    grid-template-columns: 1fr 1.6fr;
    gap: var(--spacing-lg);
  }

  .cnt-form-heading {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
  }
}

@media (max-width: 768px) {
  .cnt-hero-heading {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  .cnt-form-split {
    grid-template-columns: 1fr;
  }

  .cnt-form-left {
    position: static;
  }

  .cnt-form-row {
    grid-template-columns: 1fr;
  }

  .cnt-locations {
    flex-direction: column;
  }

  .cnt-loc-div {
    display: none;
  }

  .cnt-dir-row {
    flex-direction: column;
    gap: 0.25rem;
  }

  .cnt-dir-status {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .cnt-hero-heading {
    font-size: clamp(2.2rem, 12vw, 3rem);
  }

  .cnt-form-heading {
    font-size: 1.8rem;
  }

  .cnt-radio-group {
    gap: var(--spacing-md);
  }
}


/* ============================================================
   HOMEPAGE — Section serial block (.hp-serial)
============================================================ */

.hp-serial {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: var(--spacing-sm);
}

.hp-serial-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--color-paper);
  opacity: 0.5;
}

.hp-serial-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bronze);
}


/* ============================================================
   HOMEPAGE — Navigation hover (bronze + animated underline)
============================================================ */

.desktop-nav a:not(.cta-button) {
  position: relative;
  transition: color 0.2s ease;
}

.desktop-nav a:not(.cta-button)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-bronze);
  transition: width 0.22s ease;
}

.desktop-nav a:not(.cta-button):hover,
.desktop-nav a:not(.cta-button):focus-visible {
  color: var(--color-bronze);
}

.desktop-nav a:not(.cta-button):hover::after,
.desktop-nav a:not(.cta-button):focus-visible::after {
  width: 100%;
}


/* ============================================================
   HOMEPAGE — Domain row hover
============================================================ */

.hp-domain-row {
  cursor: default;
  transition:
    color 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}

.hp-domain-row:hover,
.hp-domain-row:focus-visible {
  transform: translateX(4px);
  border-bottom-color: var(--color-bronze);
  outline: none;
}

.hp-domain-row:hover .domain-name,
.hp-domain-row:focus-visible .domain-name {
  color: var(--color-bronze);
  transition: color 0.2s ease;
}

.hp-domain-row:hover .domain-arrow,
.hp-domain-row:focus-visible .domain-arrow {
  color: var(--color-bronze);
  transition: color 0.2s ease;
}

.hp-domain-row:hover .domain-num,
.hp-domain-row:focus-visible .domain-num {
  color: var(--color-bronze);
  opacity: 0.7;
  transition: color 0.2s ease, opacity 0.2s ease;
}


/* ============================================================
   HOMEPAGE — Engagement block hover
============================================================ */

.hp-engagement {
  transition:
    border-color 0.2s ease;
}

.hp-engagement:hover,
.hp-engagement:focus-within {
  border-bottom-color: var(--color-bronze);
}

.hp-engagement:hover .engagement-title,
.hp-engagement:focus-within .engagement-title {
  color: var(--color-bronze);
  transition: color 0.2s ease;
}

.hp-engagement:hover .engagement-num,
.hp-engagement:focus-within .engagement-num {
  color: var(--color-bronze);
  opacity: 0.8;
  transition: color 0.2s ease, opacity 0.2s ease;
}


/* ============================================================
   HOMEPAGE — Hub block hover
============================================================ */

.hp-hub {
  transition: border-color 0.2s ease;
}

.hp-hub:hover .hub-city,
.hp-hub:focus-within .hub-city {
  color: var(--color-bronze);
  transition: color 0.22s ease;
}

.hp-hub:hover .hub-coords,
.hp-hub:focus-within .hub-coords {
  color: var(--color-paper);
  opacity: 0.9;
  transition: color 0.22s ease, opacity 0.22s ease;
}

.hp-hub:hover .hub-role,
.hp-hub:focus-within .hub-role {
  opacity: 0.9;
  transition: opacity 0.22s ease;
}


/* ============================================================
   HOMEPAGE — Metric cell hover
============================================================ */

.hp-metric {
  transition: none;
}

.hp-metric:hover .metric-value,
.hp-metric:focus-within .metric-value {
  color: var(--color-bronze);
  transition: color 0.2s ease;
}


/* ============================================================
   HOMEPAGE — CTA primary arrow nudge
============================================================ */

.cta-primary {
  transition:
    color 0.18s ease,
    transform 0.18s ease;
  display: inline-block;
}

.cta-primary:hover,
.cta-primary:focus-visible {
  color: var(--color-bronze);
  transform: translateX(4px);
}

.cta-secondary {
  transition: color 0.18s ease;
}

.cta-secondary:hover,
.cta-secondary:focus-visible {
  color: var(--color-bronze);
}

/* Section number subtle bronze on parent hover */
.hp-domain-row:hover .section-number,
.hp-engagement:hover .section-number {
  color: var(--color-bronze);
  transition: color 0.2s ease;
}


/* ============================================================
   REDUCED MOTION — disable all transforms + delay transitions
============================================================ */

@media (prefers-reduced-motion: reduce) {
  .hp-domain-row,
  .hp-domain-row:hover,
  .hp-domain-row:focus-visible {
    transform: none !important;
  }

  .cta-primary,
  .cta-primary:hover,
  .cta-primary:focus-visible {
    transform: none !important;
  }

  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .desktop-nav a:not(.cta-button)::after {
    transition: none;
  }

  .hp-domain-row,
  .hp-engagement,
  .hp-hub,
  .hp-metric,
  .cta-primary,
  .cta-secondary {
    transition: color 0.01s !important;
  }
}


/* ============================================================
   ABOUT PAGE — Interaction polish (prefixed ab-)
============================================================ */

/* Hero headline — subtle accent letter-spacing on hover */
.about-hero-inner h1:hover .text-accent,
.about-hero-inner h1:focus-within .text-accent {
  letter-spacing: -0.01em;
  transition: letter-spacing 0.25s ease, color 0.2s ease;
}

/* Section number: bronze when hovering the containing section */
.grid-editorial:hover > div > .section-number {
  color: var(--color-bronze);
  transition: color 0.22s ease;
}

/* ── Stack rows ── */
.ab-stack-row {
  cursor: default;
  transition: border-color 0.2s ease;
}

.ab-stack-row:hover .about-stack-value,
.ab-stack-row:focus-within .about-stack-value {
  color: var(--color-bronze);
  transition: color 0.2s ease;
}

/* ── Depth stat metric ── */
.ab-depth-stat {
  cursor: default;
}

.ab-depth-stat:hover .about-depth-num,
.ab-depth-stat:focus-within .about-depth-num {
  color: var(--color-bronze);
  transform: translateY(-2px);
  transition: color 0.2s ease, transform 0.2s ease;
}

/* ── Operating model flow — individual node hover ── */
.ab-om-node {
  cursor: default;
  transition: transform 0.2s ease;
}

.ab-om-node:hover,
.ab-om-node:focus-within {
  transform: translateX(4px);
}

.ab-om-node:hover .om-label,
.ab-om-node:focus-within .om-label {
  color: var(--color-bronze);
  transition: color 0.2s ease;
}

/* Arrow nudges when preceding node is hovered */
.ab-om-node:hover + .ab-om-arrow,
.ab-om-node:focus-within + .ab-om-arrow {
  transform: translateX(4px);
  color: var(--color-bronze);
  transition: transform 0.2s ease, color 0.2s ease;
}

.ab-om-arrow {
  transition: transform 0.2s ease, color 0.2s ease;
}

/* SR Thinks Inc. node stays bronze always; brightens on hover */
.ab-om-node--accent:hover .om-label,
.ab-om-node--accent:focus-within .om-label {
  color: var(--color-paper);
  transition: color 0.2s ease;
}

/* ── Process steps ── */
.ab-process-step {
  transition: border-color 0.2s ease;
}

.ab-process-step:hover,
.ab-process-step:focus-within {
  border-top-color: var(--color-bronze);
}

.ab-process-step:hover .about-process-num,
.ab-process-step:focus-within .about-process-num {
  color: var(--color-bronze);
  transition: color 0.2s ease;
}

/* ── Governance pillars ── */
.ab-gov-pillar {
  transition: border-top-color 0.2s ease;
}

.ab-gov-pillar:hover,
.ab-gov-pillar:focus-within {
  border-top-color: var(--color-bronze);
}

.ab-gov-pillar:hover > .text-mono,
.ab-gov-pillar:focus-within > .text-mono {
  color: var(--color-paper);
  transition: color 0.2s ease;
}

/* ── Footer nav links ── */
.ab-footer-nav a {
  position: relative;
  transition: color 0.2s ease;
}

.ab-footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-bronze);
  transition: width 0.2s ease;
}

.ab-footer-nav a:hover,
.ab-footer-nav a:focus-visible {
  color: var(--color-bronze);
}

.ab-footer-nav a:hover::after,
.ab-footer-nav a:focus-visible::after {
  width: 100%;
}

/* ── CTA primary (paper variant) — arrow nudge ── */
section.theme-paper .cta-primary:hover,
section.theme-paper .cta-primary:focus-visible {
  color: var(--color-bronze);
  transform: translateX(4px);
}

/* ── Section number on grid hover (all pages) ── */
.section-number {
  transition: color 0.22s ease;
}


/* ============================================================
   ABOUT — Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ab-depth-stat:hover .about-depth-num,
  .ab-depth-stat:focus-within .about-depth-num {
    transform: none !important;
  }

  .ab-om-node:hover,
  .ab-om-node:focus-within,
  .ab-om-node:hover + .ab-om-arrow,
  .ab-om-node:focus-within + .ab-om-arrow {
    transform: none !important;
  }

  .ab-footer-nav a::after {
    transition: none;
  }

  .ab-stack-row,
  .ab-depth-stat,
  .ab-om-node,
  .ab-om-arrow,
  .ab-process-step,
  .ab-gov-pillar {
    transition: color 0.01s !important;
  }
}


/* ============================================================
   PORTFOLIO PAGE — Interaction polish (prefixed pf-)
============================================================ */

/* ── Hero accent phrase — subtle letter-spacing on hover ── */
.pf-hero-accent {
  display: inline-block;
  transition: letter-spacing 0.25s ease;
}

h1:hover .pf-hero-accent,
h1:focus-within .pf-hero-accent {
  letter-spacing: 0.01em;
}

/* ── Data strip metric hover ── */
.pf-metric-cell {
  cursor: default;
}

.pf-metric-cell:hover .pf-metric-num,
.pf-metric-cell:focus-within .pf-metric-num {
  color: var(--color-bronze);
  transform: translateY(-2px);
  transition: color 0.2s ease, transform 0.2s ease;
}

.pf-metric-num {
  transition: color 0.2s ease, transform 0.2s ease;
}

/* ── Ledger table row hover ── */
.pf-tr {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease;
  outline: none;
}

.pf-tr:hover,
.pf-tr:focus-visible {
  transform: translateX(4px);
  outline: none;
}

/* Domain cell → bronze */
.pf-tr:hover td.text-mono:first-child,
.pf-tr:focus-visible td.text-mono:first-child {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

/* Pending cell → bronze (controlled placeholder look) */
.pf-tr:hover .pf-pending,
.pf-tr:focus-visible .pf-pending {
  color: var(--color-bronze);
  opacity: 0.8;
  transition: color 0.18s ease, opacity 0.18s ease;
}

/* Bench focus → higher contrast */
.pf-tr:hover .pf-bench,
.pf-tr:focus-visible .pf-bench {
  color: var(--color-paper);
  transition: color 0.18s ease;
}

/* Row bottom hairline → bronze tint on hover
   (ledger rows use border-bottom on td; target all tds) */
.pf-tr:hover td,
.pf-tr:focus-visible td {
  border-bottom-color: rgba(156, 122, 63, 0.4);
  transition: border-bottom-color 0.18s ease, color 0.18s ease;
}

/* Focus-visible ring — restrained */
.pf-tr:focus-visible {
  box-shadow: inset 2px 0 0 var(--color-bronze);
}

/* ── Closing statement accent hover ── */
.pf-closing-accent {
  display: inline-block;
  transition: letter-spacing 0.25s ease;
}

.pf-closing-accent:hover {
  letter-spacing: 0.01em;
}

/* ── CTA primary (ink-theme variant) ── */
.theme-paper .cta-primary:hover,
.theme-paper .cta-primary:focus-visible {
  color: var(--color-bronze);
  transform: translateX(4px);
}

/* ── Footer nav links ── */
.pf-footer-nav a {
  position: relative;
  transition: color 0.2s ease;
}

.pf-footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-bronze);
  transition: width 0.2s ease;
}

.pf-footer-nav a:hover,
.pf-footer-nav a:focus-visible {
  color: var(--color-bronze);
}

.pf-footer-nav a:hover::after,
.pf-footer-nav a:focus-visible::after {
  width: 100%;
}


/* ============================================================
   PORTFOLIO — Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pf-tr:hover,
  .pf-tr:focus-visible {
    transform: none !important;
  }

  .pf-metric-cell:hover .pf-metric-num,
  .pf-metric-cell:focus-within .pf-metric-num {
    transform: none !important;
  }

  .pf-hero-accent,
  .pf-closing-accent {
    transition: none !important;
  }

  .pf-footer-nav a::after {
    transition: none;
  }

  .pf-tr,
  .pf-metric-num {
    transition: color 0.01s !important;
  }
}


/* ============================================================
   CAPABILITIES PAGE — Interaction polish (prefixed cp-)
============================================================ */

/* ── Hero metric cells ── */
.cp-metric-cell {
  cursor: default;
}

.cp-metric-cell:hover .metric-value,
.cp-metric-cell:focus-within .metric-value {
  color: var(--color-bronze);
  transform: translateY(-2px);
  transition: color 0.2s ease, transform 0.2s ease;
}

/* ── Capability row hover ── */
.cp-row {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease;
  outline: none;
  position: relative;
}

/* Hidden arrow using ::after — reserved space, no layout shift */
.cp-row::after {
  content: '→';
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-bronze);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(0);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.cp-row:hover,
.cp-row:focus-visible {
  transform: translateX(3px);
  outline: none;
}

.cp-row:hover::after,
.cp-row:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(4px);
}

/* Hairline → bronze */
.cp-row:hover,
.cp-row:focus-visible {
  border-bottom-color: rgba(156, 122, 63, 0.4);
}

/* Cap name → bronze */
.cp-row:hover .cap-name,
.cp-row:focus-visible .cap-name {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

/* Cap num → subtle bronze tint */
.cp-row:hover .cap-num,
.cp-row:focus-visible .cap-num {
  color: var(--color-bronze);
  opacity: 0.65;
  transition: color 0.18s ease, opacity 0.18s ease;
}

/* Cap description → higher contrast (paper/ink-appropriate) */
.theme-navy .cp-row:hover .cap-desc,
.theme-navy .cp-row:focus-visible .cap-desc {
  color: var(--color-paper);
  transition: color 0.18s ease;
}

/* Focus-visible inset indicator */
.cp-row:focus-visible {
  box-shadow: inset 3px 0 0 var(--color-bronze);
}

/* ── Specialization item hover ── */
.cp-spec-item {
  transition:
    color 0.18s ease,
    transform 0.18s ease,
    border-bottom-color 0.18s ease;
  cursor: default;
}

.cp-spec-item:hover,
.cp-spec-item:focus-visible {
  color: var(--color-bronze);
  transform: translateX(3px);
  border-bottom-color: rgba(156, 122, 63, 0.35);
}

/* Deepest concentrations — slightly stronger baseline weight */
.cp-spec-item--deep {
  font-weight: 500;
}

.cp-spec-item--deep:hover,
.cp-spec-item--deep:focus-visible {
  color: var(--color-bronze);
}

/* ── Scale metric band hover ── */
.cp-scale-cell {
  cursor: default;
}

.cp-scale-cell:hover .cap-scale-num,
.cp-scale-cell:focus-within .cap-scale-num {
  color: var(--color-bronze);
  transform: translateY(-2px);
  transition: color 0.2s ease, transform 0.2s ease;
}

.cap-scale-num {
  transition: color 0.2s ease, transform 0.2s ease;
}

/* ── CTA navy variant hover ── */
.theme-navy .cta-primary:hover,
.theme-navy .cta-primary:focus-visible {
  color: var(--color-bronze);
  transform: translateX(4px);
}

.theme-navy .cta-secondary:hover,
.theme-navy .cta-secondary:focus-visible {
  color: var(--color-bronze);
}

/* ── Footer nav links ── */
.cp-footer-nav a {
  position: relative;
  transition: color 0.2s ease;
}

.cp-footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-bronze);
  transition: width 0.2s ease;
}

.cp-footer-nav a:hover,
.cp-footer-nav a:focus-visible {
  color: var(--color-bronze);
}

.cp-footer-nav a:hover::after,
.cp-footer-nav a:focus-visible::after {
  width: 100%;
}

/* Mobile: disable translateX on small screens to prevent overflow */
@media (max-width: 480px) {
  .cp-row:hover,
  .cp-row:focus-visible {
    transform: none;
  }

  .cp-spec-item:hover,
  .cp-spec-item:focus-visible {
    transform: none;
  }
}


/* ============================================================
   CAPABILITIES — Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cp-row:hover,
  .cp-row:focus-visible {
    transform: none !important;
  }

  .cp-row::after,
  .cp-row:hover::after,
  .cp-row:focus-visible::after {
    transition: opacity 0.01s !important;
    transform: translateY(-50%) !important;
  }

  .cp-spec-item:hover,
  .cp-spec-item:focus-visible {
    transform: none !important;
  }

  .cp-scale-cell:hover .cap-scale-num,
  .cp-scale-cell:focus-within .cap-scale-num,
  .cp-metric-cell:hover .metric-value,
  .cp-metric-cell:focus-within .metric-value {
    transform: none !important;
  }

  .cp-footer-nav a::after {
    transition: none;
  }

  .cp-row,
  .cp-spec-item,
  .cp-scale-cell,
  .cp-metric-cell {
    transition: color 0.01s !important;
  }
}


/* ============================================================
   DELIVERY PAGE — Interaction polish (prefixed dlv-)
============================================================ */

/* ── Hero accent ── */
.dlv-hero-accent {
  display: inline-block;
  transition: letter-spacing 0.25s ease;
}

h1:hover .dlv-hero-accent,
h1:focus-within .dlv-hero-accent {
  letter-spacing: 0.01em;
}

/* ── Engagement block hover ── */
.dlv-engagement {
  transition: border-bottom-color 0.18s ease;
}

.dlv-engagement:hover,
.dlv-engagement:focus-within {
  border-bottom-color: rgba(156, 122, 63, 0.45);
}

.dlv-engagement:hover .engagement-title,
.dlv-engagement:focus-within .engagement-title {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

.dlv-engagement:hover .engagement-num,
.dlv-engagement:focus-within .engagement-num {
  color: var(--color-bronze);
  opacity: 0.75;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.dlv-engagement:hover .engagement-content p,
.dlv-engagement:focus-within .engagement-content p {
  color: var(--color-paper);
  transition: color 0.18s ease;
}

/* ── Framework step hover ── */
.dlv-fw-step--interactive {
  cursor: default;
  transition:
    transform 0.18s ease,
    border-bottom-color 0.18s ease;
  outline: none;
}

.dlv-fw-step--interactive:hover,
.dlv-fw-step--interactive:focus-visible {
  transform: translateX(4px);
  outline: none;
}

.dlv-fw-step--interactive:hover .dlv-fw-label,
.dlv-fw-step--interactive:focus-visible .dlv-fw-label {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

/* Arrow nudges when preceding step is hovered */
.dlv-fw-step--interactive:hover + .dlv-fw-arrow--interactive,
.dlv-fw-step--interactive:focus-visible + .dlv-fw-arrow--interactive {
  transform: translateY(3px);
  color: var(--color-bronze);
  transition: transform 0.18s ease, color 0.18s ease;
}

.dlv-fw-arrow--interactive {
  transition: transform 0.18s ease, color 0.18s ease;
}

.dlv-fw-step--interactive:focus-visible {
  box-shadow: inset 3px 0 0 var(--color-bronze);
}

/* ── Hub headline accent ── */
.dlv-hub-headline-accent {
  display: inline-block;
  transition: letter-spacing 0.25s ease;
}

.dlv-hub-headline-accent:hover {
  letter-spacing: 0.01em;
}

/* ── Hub block hover ── */
.dlv-hub {
  cursor: default;
}

/* Base typography corrections for Delivery page theme-paper */
.theme-paper .dlv-hub .hub-city {
  color: var(--color-ink); /* Fix default faint color */
  position: relative;
  display: inline-block;
  transition: color 220ms ease-out, transform 220ms ease-out;
}

/* Thin underline ::after */
.theme-paper .dlv-hub .hub-city::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background-color: var(--color-bronze);
  transition: width 220ms ease-out;
}

.theme-paper .dlv-hub .hub-region {
  color: var(--color-stone);
  text-transform: uppercase;
  transition: color 220ms ease-out;
}

.theme-paper .dlv-hub .hub-role {
  color: var(--color-stone);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.1em;
  opacity: 0.8;
  transition: color 220ms ease-out, opacity 220ms ease-out;
}

.theme-paper .dlv-hub .hub-coords {
  transition: color 220ms ease-out;
}

.theme-paper .hub-divider {
  background-color: var(--color-hairline-ink-faint); /* Make visible on paper */
  transition: background-color 220ms ease-out;
}

/* Hover States */
.dlv-hub:hover .hub-city,
.dlv-hub:focus-within .hub-city,
.dlv-hub:focus-visible .hub-city {
  color: var(--color-bronze);
  transform: translateY(-2px);
}

.dlv-hub:hover .hub-city::after,
.dlv-hub:focus-within .hub-city::after,
.dlv-hub:focus-visible .hub-city::after {
  width: 48px;
}

.dlv-hub:hover .hub-region,
.dlv-hub:focus-within .hub-region,
.dlv-hub:focus-visible .hub-region {
  color: var(--color-ink);
}

.dlv-hub:hover .hub-role,
.dlv-hub:focus-within .hub-role,
.dlv-hub:focus-visible .hub-role {
  color: var(--color-bronze);
  opacity: 1;
}

.dlv-hub:hover .hub-coords,
.dlv-hub:focus-within .hub-coords,
.dlv-hub:focus-visible .hub-coords {
  color: var(--color-ink); /* subtle transition */
}

.theme-paper .hubs-grid:hover .hub-divider {
  background-color: rgba(43, 52, 65, 0.25); /* slightly more visible */
}

/* ── Process step hover ── */
.dlv-proc-step {
  transition: border-top-color 0.18s ease;
}

.dlv-proc-step:hover,
.dlv-proc-step:focus-within {
  border-top-color: rgba(156, 122, 63, 0.5);
}

.dlv-proc-step:hover .about-process-num,
.dlv-proc-step:focus-within .about-process-num {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

.dlv-proc-step:hover .text-mono.text-accent,
.dlv-proc-step:focus-within .text-mono.text-accent {
  color: var(--color-paper);
  transition: color 0.18s ease;
}

/* ── Delivery metric hover ── */
.dlv-metric-cell--hover {
  cursor: default;
}

.dlv-metric-cell--hover:hover .metric-value,
.dlv-metric-cell--hover:focus-within .metric-value {
  color: var(--color-bronze);
  transform: translateY(-2px);
  transition: color 0.2s ease, transform 0.2s ease;
}

.dlv-metric-cell--hover .metric-value {
  transition: color 0.2s ease, transform 0.2s ease;
}

/* ── Footer nav links ── */
.dlv-footer-nav a {
  position: relative;
  transition: color 0.2s ease;
}

.dlv-footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-bronze);
  transition: width 0.2s ease;
}

.dlv-footer-nav a:hover,
.dlv-footer-nav a:focus-visible {
  color: var(--color-bronze);
}

.dlv-footer-nav a:hover::after,
.dlv-footer-nav a:focus-visible::after {
  width: 100%;
}

/* Mobile: no translateX overflow */
@media (max-width: 480px) {
  .dlv-fw-step--interactive:hover,
  .dlv-fw-step--interactive:focus-visible {
    transform: none;
  }
}


/* ============================================================
   DELIVERY — Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .dlv-fw-step--interactive:hover,
  .dlv-fw-step--interactive:focus-visible {
    transform: none !important;
  }

  .dlv-fw-step--interactive:hover + .dlv-fw-arrow--interactive,
  .dlv-fw-step--interactive:focus-visible + .dlv-fw-arrow--interactive {
    transform: none !important;
  }

  .dlv-metric-cell--hover:hover .metric-value,
  .dlv-metric-cell--hover:focus-within .metric-value {
    transform: none !important;
  }

  .dlv-hero-accent,
  .dlv-hub-headline-accent {
    transition: none !important;
  }

  .dlv-footer-nav a::after {
    transition: none;
  }

  .dlv-engagement,
  .dlv-fw-step--interactive,
  .dlv-fw-arrow--interactive,
  .dlv-hub,
  .dlv-hub .hub-city,
  .dlv-hub .hub-city::after,
  .dlv-hub .hub-region,
  .dlv-hub .hub-role,
  .dlv-hub .hub-coords,
  .hub-divider,
  .dlv-proc-step,
  .dlv-metric-cell--hover {
    transition: color 0.01s !important;
    transform: none !important;
  }
}


/* ============================================================
   LEADERSHIP PAGE — Interaction polish (prefixed ldr-)
============================================================ */

/* ── Officer row hover ── */
.ldr-row--hover {
  transition: border-color 0.2s ease;
  outline: none;
}

/* Hairline → subtle bronze tint on hover */
.ldr-row--hover:hover,
.ldr-row--hover:focus-within {
  border-bottom-color: rgba(156, 122, 63, 0.4);
}

/* Serial number → bronze + subtle shift */
.ldr-row--hover:hover .ldr-idx,
.ldr-row--hover:focus-within .ldr-idx {
  color: var(--color-bronze);
  transform: translateX(2px);
  transition: color 0.18s ease, transform 0.18s ease;
}

.ldr-idx {
  display: inline-block;
  transition: color 0.18s ease, transform 0.18s ease;
}

/* Monogram → bronze border + bronze text */
.ldr-row--hover:hover .ldr-monogram,
.ldr-row--hover:focus-within .ldr-monogram {
  border-color: var(--color-bronze);
  color: var(--color-bronze);
  transform: scale(1.02);
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.ldr-monogram {
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

/* Officer name → bronze (primary accent) */
.ldr-row--hover:hover .ldr-name,
.ldr-row--hover:focus-within .ldr-name {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

.ldr-name {
  transition: color 0.18s ease;
}

/* Role/title → slightly stronger contrast (secondary, more restrained) */
.ldr-row--hover:hover .ldr-title,
.ldr-row--hover:focus-within .ldr-title {
  opacity: 1;
  color: var(--color-ink);
  transition: color 0.18s ease, opacity 0.18s ease;
}

.ldr-title {
  transition: color 0.18s ease, opacity 0.18s ease;
}

/* Bio → slightly higher contrast */
.ldr-row--hover:hover .ldr-bio,
.ldr-row--hover:focus-within .ldr-bio {
  color: var(--color-ink);
  transition: color 0.18s ease;
}

.ldr-bio {
  transition: color 0.18s ease;
}

/* Pending note → slightly more visible on hover but stays secondary */
.ldr-row--hover:hover .ldr-pending-note,
.ldr-row--hover:focus-within .ldr-pending-note {
  opacity: 0.75;
  transition: opacity 0.18s ease;
}

.ldr-pending-note {
  transition: opacity 0.18s ease;
}

/* Focus-visible inset indicator */
.ldr-row--hover:focus-visible {
  box-shadow: inset 3px 0 0 var(--color-bronze);
}

/* ── Footer nav links ── */
.ldr-footer-nav a {
  position: relative;
  transition: color 0.2s ease;
}

.ldr-footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-bronze);
  transition: width 0.2s ease;
}

.ldr-footer-nav a:hover,
.ldr-footer-nav a:focus-visible {
  color: var(--color-bronze);
}

.ldr-footer-nav a:hover::after,
.ldr-footer-nav a:focus-visible::after {
  width: 100%;
}

/* Mobile: disable translateX to prevent overflow */
@media (max-width: 480px) {
  .ldr-row--hover:hover .ldr-idx,
  .ldr-row--hover:focus-within .ldr-idx {
    transform: none;
  }

  .ldr-row--hover:hover .ldr-monogram,
  .ldr-row--hover:focus-within .ldr-monogram {
    transform: none;
  }
}


/* ============================================================
   LEADERSHIP — Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ldr-idx,
  .ldr-monogram {
    transition: color 0.01s !important;
  }

  .ldr-row--hover:hover .ldr-idx,
  .ldr-row--hover:focus-within .ldr-idx {
    transform: none !important;
  }

  .ldr-row--hover:hover .ldr-monogram,
  .ldr-row--hover:focus-within .ldr-monogram {
    transform: none !important;
  }

  .ldr-footer-nav a::after {
    transition: none;
  }

  .ldr-row--hover,
  .ldr-name,
  .ldr-title,
  .ldr-bio,
  .ldr-pending-note {
    transition: color 0.01s !important;
  }
}


/* ============================================================
   CAREERS PAGE — Interaction polish (prefixed car-)
============================================================ */

/* ── Hero accent ── */
.car-hero-accent {
  display: inline-block;
  transition: letter-spacing 0.25s ease;
}

h1:hover .car-hero-accent,
h1:focus-within .car-hero-accent {
  letter-spacing: 0.01em;
}

/* ── Trajectory item hover ── */
.car-traj-item--hover {
  transition: border-bottom-color 0.2s ease;
  cursor: default;
}

.car-traj-item--hover:hover,
.car-traj-item--hover:focus-within {
  border-bottom-color: rgba(156, 122, 63, 0.45);
}

.car-traj-item--hover:hover .car-traj-label,
.car-traj-item--hover:focus-within .car-traj-label {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

.car-traj-label {
  transition: color 0.18s ease;
}

.car-traj-item--hover:hover .car-traj-body,
.car-traj-item--hover:focus-within .car-traj-body {
  color: var(--color-ink);
  transition: color 0.18s ease;
}

.car-traj-body {
  transition: color 0.18s ease;
}

/* ── Career path steps (about-process-step reused) ── */
.car-proc-step {
  transition: border-top-color 0.18s ease;
}

.car-proc-step:hover,
.car-proc-step:focus-within {
  border-top-color: rgba(156, 122, 63, 0.5);
}

.car-proc-step:hover .about-process-num,
.car-proc-step:focus-within .about-process-num {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

.car-proc-step:hover .text-mono.text-accent,
.car-proc-step:focus-within .text-mono.text-accent {
  color: var(--color-paper);
  transition: color 0.18s ease;
}

/* ── Work authorization steps (reuse dlv-fw-step pattern) ── */
.car-wa-step {
  cursor: default;
  transition: transform 0.18s ease;
  outline: none;
}

.car-wa-step:hover,
.car-wa-step:focus-visible {
  transform: translateX(4px);
  outline: none;
}

.car-wa-step:hover .dlv-fw-label,
.car-wa-step:focus-visible .dlv-fw-label {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

.car-wa-step:focus-visible {
  box-shadow: inset 3px 0 0 var(--color-bronze);
}

/* ── Career path blocks (who we recruit) ── */
.car-path-block--hover {
  transition: border-color 0.2s ease;
  cursor: default;
}

.car-path-block--hover:hover .car-path-num,
.car-path-block--hover:focus-within .car-path-num {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

.car-path-num {
  transition: color 0.18s ease;
}

.car-path-block--hover:hover .car-path-title,
.car-path-block--hover:focus-within .car-path-title {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

.car-path-title {
  transition: color 0.18s ease;
}

.car-path-block--hover:hover .car-path-body p,
.car-path-block--hover:focus-within .car-path-body p {
  color: var(--color-paper);
  transition: color 0.18s ease;
}

/* ── Domain chain steps (Build across the group) ── */
.car-domain-step--hover {
  cursor: default;
  transition: transform 0.18s ease;
}

.car-domain-step--hover:hover,
.car-domain-step--hover:focus-visible {
  transform: translateY(-2px);
}

.car-domain-step--hover:hover .car-domain-label,
.car-domain-step--hover:focus-visible .car-domain-label {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

.car-domain-label {
  transition: color 0.18s ease;
}

.car-domain-step--hover:hover .car-domain-num,
.car-domain-step--hover:focus-visible .car-domain-num {
  color: var(--color-bronze);
  opacity: 0.7;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.car-domain-num {
  transition: color 0.18s ease, opacity 0.18s ease;
}

/* ── Metric cell hover ── */
.car-metric-cell {
  cursor: default;
}

.car-metric-cell:hover .metric-value,
.car-metric-cell:focus-within .metric-value {
  color: var(--color-bronze);
  transform: translateY(-2px);
  transition: color 0.2s ease, transform 0.2s ease;
}

.car-metric-cell .metric-value {
  transition: color 0.2s ease, transform 0.2s ease;
}

.car-metric-cell:hover .metric-label,
.car-metric-cell:focus-within .metric-label {
  color: var(--color-ink);
  transition: color 0.2s ease;
}

/* ── Footer nav links ── */
.car-footer-nav a {
  position: relative;
  transition: color 0.2s ease;
}

.car-footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-bronze);
  transition: width 0.2s ease;
}

.car-footer-nav a:hover,
.car-footer-nav a:focus-visible {
  color: var(--color-bronze);
}

.car-footer-nav a:hover::after,
.car-footer-nav a:focus-visible::after {
  width: 100%;
}

/* Mobile: suppress translateX/Y on small screens */
@media (max-width: 480px) {
  .car-wa-step:hover,
  .car-wa-step:focus-visible {
    transform: none;
  }

  .car-domain-step--hover:hover,
  .car-domain-step--hover:focus-visible {
    transform: none;
  }
}


/* ============================================================
   CAREERS — Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .car-hero-accent {
    transition: none !important;
  }

  .car-wa-step:hover,
  .car-wa-step:focus-visible {
    transform: none !important;
  }

  .car-domain-step--hover:hover,
  .car-domain-step--hover:focus-visible {
    transform: none !important;
  }

  .car-metric-cell:hover .metric-value,
  .car-metric-cell:focus-within .metric-value {
    transform: none !important;
  }

  .car-footer-nav a::after {
    transition: none;
  }

  .car-traj-item--hover,
  .car-traj-label,
  .car-traj-body,
  .car-proc-step,
  .car-wa-step,
  .car-path-block--hover,
  .car-path-num,
  .car-path-title,
  .car-domain-step--hover,
  .car-domain-label,
  .car-domain-num,
  .car-metric-cell {
    transition: color 0.01s !important;
  }
}


/* ============================================================
   CONTACT PAGE — Interaction polish (prefixed cnt-)
============================================================ */

/* ── Hero accent ── */
.cnt-hero-accent {
  display: inline-block;
  transition: letter-spacing 0.25s ease;
}

h1:hover .cnt-hero-accent,
h1:focus-within .cnt-hero-accent {
  letter-spacing: 0.01em;
}

/* ── Location block hover ── */
.cnt-location--hover {
  cursor: default;
  transition: border-color 0.22s ease;
}

/* City name: bronze + thin underline + micro lift */
.cnt-location--hover .cnt-loc-city {
  display: inline-block;
  position: relative;
  transition: color 0.22s ease, transform 0.22s ease-out;
}

.cnt-location--hover .cnt-loc-city::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background-color: var(--color-bronze);
  transition: width 0.22s ease-out;
}

.cnt-location--hover:hover .cnt-loc-city,
.cnt-location--hover:focus-within .cnt-loc-city {
  color: var(--color-bronze);
  transform: translateY(-2px);
}

.cnt-location--hover:hover .cnt-loc-city::after,
.cnt-location--hover:focus-within .cnt-loc-city::after {
  width: 48px;
}

/* Address: slightly stronger contrast on hover */
.cnt-location--hover .cnt-loc-addr {
  transition: opacity 0.22s ease;
}

.cnt-location--hover:hover .cnt-loc-addr,
.cnt-location--hover:focus-within .cnt-loc-addr {
  opacity: 0.85;
}

/* ── Directory row hover ── */
.cnt-dir-row--hover {
  transition: border-bottom-color 0.18s ease;
  cursor: default;
}

.cnt-dir-row--hover:hover,
.cnt-dir-row--hover:focus-within {
  border-bottom-color: rgba(156, 122, 63, 0.45);
}

.cnt-dir-row--hover:hover .cnt-dir-label,
.cnt-dir-row--hover:focus-within .cnt-dir-label {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

.cnt-dir-label {
  transition: color 0.18s ease;
}

.cnt-dir-row--hover:hover .cnt-dir-status,
.cnt-dir-row--hover:focus-within .cnt-dir-status {
  opacity: 0.85;
  transition: opacity 0.18s ease;
}

.cnt-dir-status {
  transition: opacity 0.18s ease;
}

/* ── Form inputs: hover ── */
.cnt-input:hover {
  border-bottom-color: var(--color-bronze);
  transition: border-color 0.18s ease;
}

/* ── Form inputs: focus ── */
.cnt-input:focus,
.cnt-input:focus-visible {
  outline: none;
  border-bottom-color: var(--color-bronze);
  transition: border-color 0.18s ease;
}

/* Label → bronze when sibling input is focused */
.cnt-field:focus-within .cnt-label {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

.cnt-label {
  transition: color 0.18s ease;
}

/* Required asterisk — subtle bronze */
.cnt-req {
  color: var(--color-bronze);
  opacity: 0.75;
}

/* ── Select: hover + focus ── */
.cnt-select-wrap:hover .cnt-input,
.cnt-select-wrap:focus-within .cnt-input {
  border-bottom-color: var(--color-bronze);
}

.cnt-select-wrap:focus-within .cnt-select-arrow {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

.cnt-select-arrow {
  transition: color 0.18s ease;
}

/* ── Radio buttons: custom bronze accent ── */
.cnt-radio-label {
  transition: color 0.18s ease;
}

.cnt-radio-label:hover span,
.cnt-radio-label:focus-within span {
  color: var(--color-bronze);
  transition: color 0.18s ease;
}

/* Bronze radio accent */
.cnt-radio-label input[type="radio"] {
  accent-color: var(--color-bronze);
}

/* ── Checkbox: bronze accent ── */
.cnt-checkbox-label {
  transition: color 0.18s ease;
}

.cnt-checkbox-label:hover .cnt-consent-text,
.cnt-checkbox-label:focus-within .cnt-consent-text {
  color: var(--color-paper);
  transition: color 0.18s ease;
}

.cnt-consent-text {
  transition: color 0.18s ease;
}

.cnt-checkbox-label input[type="checkbox"] {
  accent-color: var(--color-bronze);
}

/* ── Submit button hover ── */
.cnt-submit {
  transition:
    color 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}

.cnt-submit:hover,
.cnt-submit:focus-visible {
  color: var(--color-bronze);
  transform: translateX(4px);
  border-color: var(--color-bronze);
  outline: none;
}

/* ── Footer nav links ── */
.cnt-footer-nav a {
  position: relative;
  transition: color 0.2s ease;
}

.cnt-footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-bronze);
  transition: width 0.2s ease;
}

.cnt-footer-nav a:hover,
.cnt-footer-nav a:focus-visible {
  color: var(--color-bronze);
}

.cnt-footer-nav a:hover::after,
.cnt-footer-nav a:focus-visible::after {
  width: 100%;
}

/* Mobile: suppress transforms to prevent overflow */
@media (max-width: 480px) {
  .cnt-location--hover:hover .cnt-loc-city,
  .cnt-location--hover:focus-within .cnt-loc-city {
    transform: none;
  }

  .cnt-submit:hover,
  .cnt-submit:focus-visible {
    transform: none;
  }
}


/* ============================================================
   CONTACT — Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cnt-hero-accent,
  .cnt-location--hover .cnt-loc-city,
  .cnt-submit {
    transition: color 0.01s !important;
    transform: none !important;
  }

  .cnt-location--hover .cnt-loc-city::after,
  .cnt-footer-nav a::after {
    transition: none;
  }

  .cnt-location--hover,
  .cnt-dir-row--hover,
  .cnt-dir-label,
  .cnt-dir-status,
  .cnt-label,
  .cnt-select-arrow,
  .cnt-radio-label,
  .cnt-consent-text,
  .cnt-checkbox-label {
    transition: color 0.01s !important;
  }
}


/* ============================================================
   ENTERPRISE TECHNOLOGY LAYER — Global system (prefixed tech-)
   Appended — nothing above modified
============================================================ */

/* ── Design tokens: tech accent ── */
:root {
  --color-tech-cyan: rgba(120, 180, 200, 0.65);
  --color-tech-cyan-faint: rgba(120, 180, 200, 0.12);
  --color-tech-cyan-pure: #78B4C8;
  --color-tech-node: rgba(156, 122, 63, 0.7);
  --color-tech-grid: rgba(215, 213, 204, 0.04);
  --color-tech-grid-ink: rgba(43, 52, 65, 0.07);
}

/* ── Hero canvas (tech background) ── */
.tech-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* Keep hero content above canvas */
.tech-hero > .container {
  position: relative;
  z-index: 1;
}

/* ── Corner system markers ── */
.tech-corner {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}

.tech-corner--tl {
  top: calc(var(--spacing-xxl) + 1rem);
  left: 2rem;
}

.tech-corner--tr {
  top: calc(var(--spacing-xxl) + 1rem);
  right: 2rem;
}

.tech-marker-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--color-stone);
  opacity: 0.7;
  text-transform: uppercase;
}

.tech-marker-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-bronze);
  opacity: 0.75;
}

/* Pulsing dot animation */
@keyframes tech-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%       { opacity: 0.3;  transform: scale(0.7); }
}

.tech-marker-dot--pulse {
  animation: tech-pulse 2.8s ease-in-out infinite;
}

/* ── Tech status row (hero eyebrow) ── */
.tech-status-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.tech-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-tech-cyan-pure);
  opacity: 0.8;
  animation: tech-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

.tech-status-text {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--color-stone);
  opacity: 0.65;
  text-transform: uppercase;
}

/* ── Section tech marker (thin top accent rule for sections) ── */
.tech-section-marker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--spacing-sm);
}

.tech-section-marker::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--color-bronze);
  opacity: 0.6;
}

.tech-section-id {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--color-stone);
  opacity: 0.7;
  text-transform: uppercase;
}

/* ── Technology domain row enhancements ── */
.domain-row {
  position: relative;
}

/* Subtle left accent bar on domain row hover */
.domain-row.hp-domain-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2px;
  height: 60%;
  background-color: var(--color-bronze);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform-origin: center;
}

.domain-row.hp-domain-row:hover::before,
.domain-row.hp-domain-row:focus-visible::before {
  opacity: 0.7;
  transform: translateY(-50%) scaleY(1);
}

/* ── Staggered reveal system ── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for sibling items */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.18s; }
.reveal-delay-3 { transition-delay: 0.26s; }
.reveal-delay-4 { transition-delay: 0.34s; }

/* ── Section hairline draw animation ── */
@keyframes tech-line-draw {
  from { width: 0; opacity: 0; }
  to   { width: 100%; opacity: 1; }
}

.tech-line-draw {
  display: block;
  height: 1px;
  background-color: var(--color-bronze);
  opacity: 0;
  width: 0;
}

.tech-line-draw.is-visible {
  animation: tech-line-draw 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Domain index: add subtle tech category badge ── */
.domain-row {
  position: relative;
}

/* ── Metrics: subtle accent border top on hover ── */
.metric-cell:hover {
  border-top-color: rgba(156, 122, 63, 0.4);
}

/* ── Engagement block: animated left border ── */
.engagement-block::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-bronze) 0%, transparent 100%);
  transition: width 0.4s ease;
}

.engagement-block:hover::before,
.engagement-block:focus-within::before {
  width: 100%;
}

.engagement-block {
  position: relative;
  overflow: hidden;
}

/* ── Tech grid overlay for ink sections (ultra-subtle) ── */
.theme-ink {
  background-image:
    linear-gradient(var(--color-tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-tech-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center center;
}

/* Paper sections: even more subtle grid */
.theme-paper {
  background-image:
    linear-gradient(var(--color-tech-grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-tech-grid-ink) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center center;
}

/* Navy: no grid (clean) */
.theme-navy {
  background-image: none;
}

/* ── About/Delivery process step: tech accent number ── */
.about-process-num {
  position: relative;
}

.about-process-num::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-bronze);
  transition: width 0.3s ease;
}

.about-process-step:hover .about-process-num::after,
.about-process-step:focus-within .about-process-num::after {
  width: 100%;
}

/* ── Hero headline tech color enhancement ── */
.hero-headline {
  position: relative;
}

/* ── Portfolio / table rows: subtle data metadata ── */
.pf-tr td:first-child::after {
  content: attr(data-domain-id, '');
}

/* ── Capability row: tech accent indicator dot ── */
.cap-row {
  position: relative;
}

.cap-row::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-bronze);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cap-row:hover::after,
.cap-row:focus-visible::after {
  opacity: 0.8;
  transform: translateY(-50%) scale(1);
}

/* ── Responsive: remove grid on mobile for performance ── */
@media (max-width: 768px) {
  .theme-ink,
  .theme-paper {
    background-image: none;
  }

  .tech-corner {
    display: none;
  }

  .tech-bg-canvas {
    display: none;
  }
}

/* ── Reduced motion overrides ── */
@media (prefers-reduced-motion: reduce) {
  .tech-marker-dot,
  .tech-status-dot {
    animation: none !important;
  }

  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .tech-line-draw.is-visible {
    animation: none !important;
    width: 100% !important;
    opacity: 1 !important;
  }

  .domain-row.hp-domain-row::before {
    transition: none !important;
  }

  .engagement-block::before {
    transition: none !important;
  }

  .about-process-num::after {
    transition: none !important;
  }
}


/* ============================================================
   SR THINKS INC. — GREEN VISUAL REFRESH 2026
   APPENDED — nothing above modified
   Phase 1-20: Green Theme, Compact Spacing, Real Images
============================================================ */

/* ── GREEN DESIGN TOKENS ── */
:root {
  --forest:        #12372A;
  --green:         #1F6B4F;
  --green-fresh:   #3E8E68;
  --green-light:   #DCEDE3;
  --paper:         #F3F6F1;
  --ink:           #111815;
  --stone-green:   #59635D;
  --accent-green:  #8AAE9A;

  /* Map to existing token names for backwards compatibility */
  --color-bronze:       var(--green);
  --color-paper:        var(--paper);
  --color-ink:          var(--ink);
  --color-stone:        var(--stone-green);
  --color-navy:         var(--forest);
  --color-hairline-ink: rgba(17, 24, 21, 0.18);
  --color-hairline-paper: rgba(243, 246, 241, 0.80);
  --color-hairline-paper-faint: rgba(220, 237, 227, 0.25);
  --color-hairline-ink-faint:   rgba(17, 24, 21, 0.12);

  /* Compact spacing — ~20% reduction from originals */
  --spacing-xl:  5.5rem;
  --spacing-xxl: 8rem;
}

/* ── BODY: paper background refresh ── */
body {
  background-color: var(--paper);
  color: var(--ink);
}

/* ── HEADER: paper bg with forest border ── */
header {
  background-color: rgba(243, 246, 241, 0.97);
  border-bottom: 1px solid rgba(31, 107, 79, 0.2);
}

/* ── LOGO: forest ink ── */
.logo {
  color: var(--forest);
  letter-spacing: 0.07em;
}

/* ── NAV LINKS: green accent hover ── */
.desktop-nav a:hover,
.desktop-nav a[aria-current="page"] {
  color: var(--green);
}

.desktop-nav a::after,
.desktop-nav a:not(.cta-button)::after {
  background-color: var(--green);
}

.desktop-nav a:not(.cta-button):hover::after,
.desktop-nav a:not(.cta-button)[aria-current="page"]::after {
  width: 100%;
}

.cta-button:hover {
  color: var(--green) !important;
}

/* ── MOBILE NAV ── */
.mobile-nav {
  background-color: var(--forest);
}

.mobile-nav a:hover,
.mobile-nav a[aria-current="page"] {
  color: var(--green-light);
}

.mobile-nav a span {
  color: var(--accent-green);
}

/* ── TEXT ACCENT: now green ── */
.text-accent {
  color: var(--green);
}

/* ── SECTION BORDERS ── */
section {
  border-bottom: 1px solid rgba(31, 107, 79, 0.1);
}

/* ── THEME OVERRIDES ── */

/* Paper sections: soft paper bg */
.theme-paper {
  background-color: var(--paper);
  color: var(--ink);
  background-image:
    linear-gradient(rgba(17,24,21,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,24,21,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* Ink sections: deep forest */
.theme-ink {
  background-color: var(--forest);
  color: var(--paper);
  background-image:
    linear-gradient(rgba(220,237,227,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220,237,227,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Navy sections: also forest (deep) */
.theme-navy {
  background-color: #0E2A1F;
  color: var(--paper);
  background-image: none;
}

/* Hairlines in dark sections */
section.theme-ink,
section.theme-navy {
  border-bottom: 1px solid rgba(220, 237, 227, 0.12);
}

.theme-ink .hairline { border-color: rgba(220,237,227,0.2); }
.theme-navy .hairline { border-color: rgba(220,237,227,0.2); }

/* ── FOCUS RING: green ── */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* ── SECTION NUMBERS: green tint ── */
.section-number {
  color: var(--accent-green);
}

/* ── METRIC VALUE: green accent on hover ── */
.hp-metric:hover .metric-value,
.hp-metric:focus-within .metric-value,
.car-metric-cell:hover .metric-value,
.dlv-metric-cell--hover:hover .metric-value,
.cp-metric-cell:hover .metric-value,
.ab-depth-stat:hover .about-depth-num {
  color: var(--green);
}

/* ── DOMAIN ROWS: green hover ── */
.domain-row:hover,
.hp-domain-row:hover {
  color: var(--green);
}

.domain-row:hover .domain-num,
.hp-domain-row:hover .domain-num {
  color: var(--green);
}

.domain-row:hover .domain-arrow,
.hp-domain-row:hover .domain-arrow {
  color: var(--green);
}

.domain-row.hp-domain-row::before {
  background-color: var(--green);
}

.hp-domain-row:hover,
.hp-domain-row:focus-visible {
  border-bottom-color: rgba(31, 107, 79, 0.35);
}

.hp-domain-row:hover .domain-name,
.hp-domain-row:focus-visible .domain-name {
  color: var(--green);
}

/* ── ENGAGEMENT BLOCKS ── */
.hp-engagement:hover .engagement-title,
.hp-engagement:focus-within .engagement-title,
.dlv-engagement:hover .engagement-title,
.dlv-engagement:focus-within .engagement-title {
  color: var(--green);
}

.hp-engagement:hover .engagement-num,
.hp-engagement:focus-within .engagement-num {
  color: var(--green);
}

.hp-engagement:hover,
.hp-engagement:focus-within {
  border-bottom-color: rgba(31, 107, 79, 0.4);
}

.engagement-block::before {
  background: linear-gradient(90deg, var(--green) 0%, transparent 100%);
}

/* ── HUB BLOCK HOVER ── */
.hp-hub:hover .hub-city,
.hp-hub:focus-within .hub-city,
.dlv-hub:hover .hub-city,
.dlv-hub:focus-within .hub-city {
  color: var(--green);
}

.theme-paper .dlv-hub .hub-city::after {
  background-color: var(--green);
}

.dlv-hub:hover .hub-role,
.dlv-hub:focus-within .hub-role {
  color: var(--green);
}

/* ── LEDGER TABLE: green on hover ── */
.ledger tbody tr:hover td {
  color: var(--green);
}

.pf-tr:hover td,
.pf-tr:focus-visible td {
  border-bottom-color: rgba(31, 107, 79, 0.3);
}

.pf-tr:hover td.text-mono:first-child,
.pf-tr:focus-visible td.text-mono:first-child {
  color: var(--green);
}

.pf-tr:hover .pf-pending,
.pf-tr:focus-visible .pf-pending {
  color: var(--green);
}

.pf-tr:hover .pf-bench,
.pf-tr:focus-visible .pf-bench {
  color: var(--green-light);
}

.pf-tr:focus-visible {
  box-shadow: inset 2px 0 0 var(--green);
}

/* ── CAPABILITY ROWS ── */
.cp-row:hover .cap-name,
.cp-row:focus-visible .cap-name {
  color: var(--green);
}

.cp-row:hover .cap-num,
.cp-row:focus-visible .cap-num {
  color: var(--green);
}

.cp-row:hover,
.cp-row:focus-visible {
  border-bottom-color: rgba(31, 107, 79, 0.3);
}

.cp-row:focus-visible {
  box-shadow: inset 3px 0 0 var(--green);
}

.cp-row::after {
  color: var(--green);
}

.cp-spec-item:hover,
.cp-spec-item:focus-visible {
  color: var(--green);
  border-bottom-color: rgba(31, 107, 79, 0.3);
}

.cp-scale-cell:hover .cap-scale-num,
.cp-scale-cell:focus-within .cap-scale-num {
  color: var(--green);
}

/* ── STACK ROWS (ABOUT) ── */
.ab-stack-row:hover .about-stack-value,
.ab-stack-row:focus-within .about-stack-value {
  color: var(--green);
}

/* ── PROCESS STEPS ── */
.ab-process-step:hover,
.ab-process-step:focus-within {
  border-top-color: rgba(31, 107, 79, 0.4);
}

.ab-process-step:hover .about-process-num,
.ab-process-step:focus-within .about-process-num {
  color: var(--green);
}

.about-process-num::after {
  background-color: var(--green);
}

.dlv-proc-step:hover,
.dlv-proc-step:focus-within {
  border-top-color: rgba(31, 107, 79, 0.4);
}

.dlv-proc-step:hover .about-process-num,
.dlv-proc-step:focus-within .about-process-num {
  color: var(--green);
}

/* ── GOVERNANCE PILLARS ── */
.ab-gov-pillar:hover,
.ab-gov-pillar:focus-within {
  border-top-color: rgba(31, 107, 79, 0.4);
}

/* ── OPERATING MODEL FLOW ── */
.ab-om-node:hover .om-label,
.ab-om-node:focus-within .om-label {
  color: var(--green);
}

.operating-model-flow {
  border-bottom-color: rgba(31, 107, 79, 0.15);
}

/* ── DELIVERY FRAMEWORK STEPS ── */
.dlv-fw-step--interactive:hover .dlv-fw-label,
.dlv-fw-step--interactive:focus-visible .dlv-fw-label {
  color: var(--green);
}

.dlv-fw-step--interactive:hover + .dlv-fw-arrow--interactive {
  color: var(--green);
}

.dlv-fw-step--interactive:focus-visible {
  box-shadow: inset 3px 0 0 var(--green);
}

/* ── LEADERSHIP ROWS ── */
.leadership-row:hover .monogram {
  border-color: var(--green);
  color: var(--green);
}

.ldr-row--hover:hover .ldr-idx,
.ldr-row--hover:focus-within .ldr-idx {
  color: var(--green);
}

.ldr-row--hover:hover .ldr-monogram,
.ldr-row--hover:focus-within .ldr-monogram {
  border-color: var(--green);
  color: var(--green);
}

.ldr-row--hover:hover .ldr-name,
.ldr-row--hover:focus-within .ldr-name {
  color: var(--green);
}

.ldr-row--hover:hover,
.ldr-row--hover:focus-within {
  border-bottom-color: rgba(31, 107, 79, 0.35);
}

.ldr-row--hover:focus-visible {
  box-shadow: inset 3px 0 0 var(--green);
}

/* ── CAREERS: TRAJECTORY ── */
.car-traj-item--hover:hover .car-traj-label,
.car-traj-item--hover:focus-within .car-traj-label {
  color: var(--green);
}

.car-traj-item--hover:hover,
.car-traj-item--hover:focus-within {
  border-bottom-color: rgba(31, 107, 79, 0.35);
}

.car-proc-step:hover,
.car-proc-step:focus-within {
  border-top-color: rgba(31, 107, 79, 0.4);
}

.car-proc-step:hover .about-process-num,
.car-proc-step:focus-within .about-process-num {
  color: var(--green);
}

.car-domain-step--hover:hover .car-domain-label,
.car-domain-step--hover:focus-visible .car-domain-label {
  color: var(--green);
}

.car-path-block--hover:hover .car-path-num,
.car-path-block--hover:hover .car-path-title {
  color: var(--green);
}

.car-wa-step:hover .dlv-fw-label,
.car-wa-step:focus-visible .dlv-fw-label {
  color: var(--green);
}

.car-wa-step:focus-visible {
  box-shadow: inset 3px 0 0 var(--green);
}

/* ── CONTACT FORM: green accents ── */
.cnt-input:focus,
.cnt-input:focus-visible,
.cnt-input:hover {
  border-bottom-color: var(--green);
}

.cnt-field:focus-within .cnt-label {
  color: var(--green);
}

.cnt-req {
  color: var(--green);
}

.cnt-radio-label input[type="radio"],
.cnt-checkbox-label input[type="checkbox"] {
  accent-color: var(--green);
}

.cnt-submit:hover,
.cnt-submit:focus-visible {
  color: var(--green);
  border-color: var(--green);
}

.cnt-location--hover:hover .cnt-loc-city,
.cnt-location--hover:focus-within .cnt-loc-city {
  color: var(--green);
}

.cnt-location--hover .cnt-loc-city::after {
  background-color: var(--green);
}

.cnt-loc-city {
  color: var(--green) !important;
}

.cnt-dir-row--hover:hover .cnt-dir-label,
.cnt-dir-row--hover:focus-within .cnt-dir-label {
  color: var(--green);
}

.cnt-dir-row--hover:hover,
.cnt-dir-row--hover:focus-within {
  border-bottom-color: rgba(31, 107, 79, 0.35);
}

.cnt-status--success {
  border-left-color: var(--green);
}

.cnt-select-wrap:focus-within .cnt-select-arrow {
  color: var(--green);
}

/* ── CTA BUTTONS: green system ── */
.cta-primary:hover,
.cta-primary:focus-visible {
  color: var(--green);
}

.cta-secondary:hover,
.cta-secondary:focus-visible {
  color: var(--green);
}

.theme-navy .cta-primary:hover,
.theme-navy .cta-primary:focus-visible,
.theme-navy .cta-secondary:hover,
.theme-navy .cta-secondary:focus-visible {
  color: var(--green-light);
}

/* ── FOOTER: deep forest ── */
footer {
  background-color: var(--forest);
  color: var(--paper);
  border-top: 1px solid rgba(220, 237, 227, 0.15);
}

footer .logo {
  color: var(--green-light);
}

footer .text-stone {
  color: var(--accent-green);
}

.footer-nav a {
  color: var(--accent-green);
}

.footer-nav a:hover {
  color: var(--green-light);
}

.footer-legal {
  color: var(--accent-green);
  border-top-color: rgba(220, 237, 227, 0.12);
}

/* Footer nav links for all page-specific classes */
.ab-footer-nav a,
.pf-footer-nav a,
.cp-footer-nav a,
.dlv-footer-nav a,
.ldr-footer-nav a,
.car-footer-nav a,
.cnt-footer-nav a {
  color: var(--accent-green);
}

.ab-footer-nav a:hover,
.pf-footer-nav a:hover,
.cp-footer-nav a:hover,
.dlv-footer-nav a:hover,
.ldr-footer-nav a:hover,
.car-footer-nav a:hover,
.cnt-footer-nav a:hover {
  color: var(--green-light);
}

.ab-footer-nav a::after,
.pf-footer-nav a::after,
.cp-footer-nav a::after,
.dlv-footer-nav a::after,
.ldr-footer-nav a::after,
.car-footer-nav a::after,
.cnt-footer-nav a::after {
  background-color: var(--green-light);
}

/* ── HERO COMPACT SPACING ── */
.hero-section {
  padding-top: calc(var(--spacing-xxl) + 1rem);
  padding-bottom: var(--spacing-xl);
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.hero-eyebrow {
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.hero-headline {
  margin-bottom: var(--spacing-md);
}

.hero-body {
  margin-top: var(--spacing-sm);
}

/* ── METRICS ROW COMPACT ── */
.metrics-row {
  padding: var(--spacing-md) 0;
}

/* ── SECTION SPACING COMPACT (global section override) ── */
section {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

/* ── TECH CANVAS: update node colors to green palette ── */
.tech-bg-canvas {
  opacity: 0.4;
}

.tech-marker-dot {
  background-color: var(--green);
}

.tech-status-dot {
  background-color: var(--green-fresh);
}

.tech-section-marker::before {
  background-color: var(--green);
}

.tech-line-draw {
  background-color: var(--green);
}

/* ── PULSING DOT: green ── */
@keyframes tech-pulse-green {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.7); }
}

.tech-marker-dot--pulse {
  animation: tech-pulse-green 2.8s ease-in-out infinite;
}

/* ── SERIAL NUMBER (hp-serial): green tint ── */
.hp-serial-label {
  color: var(--green);
}

.hp-serial-num {
  color: var(--green-light);
}

/* ── ABOUT DEPTH NUM ── */
.about-depth-num {
  color: var(--forest);
}

/* ── PROGRESSION ARROW ── */
.about-progression-arrow {
  color: var(--green);
}

/* ── PROCESS PIPELINE ARROW ── */
.process-arrow {
  color: var(--green);
}

/* ── OPERATING MODEL ARROW ── */
.om-arrow {
  color: var(--green);
}

/* ── DOMAIN INDEX BORDER ── */
.domain-index {
  border-top-color: rgba(31, 107, 79, 0.2);
}

.domain-row {
  border-bottom-color: rgba(31, 107, 79, 0.12);
}

/* ── PORTFOLIO DATA STRIP ── */
.pf-data-num {
  color: var(--forest);
}

.pf-data-divider {
  background-color: rgba(31, 107, 79, 0.15);
}

/* ── CAPABILITIES SCALE ── */
.cap-scale-num {
  color: var(--forest);
}

.cap-scale-divider {
  background-color: rgba(31, 107, 79, 0.15);
}

/* ── LEADERSHIP ── */
.ldr-hero-heading {
  color: var(--ink);
}

.ldr-roster-heading {
  color: var(--ink);
}

.ldr-monogram {
  border-color: rgba(31, 107, 79, 0.25);
  color: var(--stone-green);
}

.ldr-idx {
  color: var(--green);
}

.ldr-title {
  color: var(--accent-green);
}

/* ── DELIVERY HUB DIVIDER (paper) ── */
.theme-paper .hub-divider {
  background-color: rgba(31, 107, 79, 0.15);
}

/* ── MONOGRAM BORDER ── */
.monogram {
  border-color: rgba(31, 107, 79, 0.25);
  color: var(--stone-green);
}

/* ── ABOUT STACK ── */
.about-stack {
  border-top-color: rgba(31, 107, 79, 0.15);
}

.about-stack-row {
  border-bottom-color: rgba(31, 107, 79, 0.12);
}

.about-stack-connector {
  color: var(--green);
}

/* ── ABOUT DEPTH STATS ── */
.about-depth-stats {
  border-top-color: rgba(31, 107, 79, 0.15);
}

.about-depth-divider {
  background-color: rgba(31, 107, 79, 0.2);
}

/* ── ABOUT PROGRESSION ── */
.about-progression {
  border-top-color: rgba(31, 107, 79, 0.15);
}

.about-progression-step {
  border-bottom-color: rgba(31, 107, 79, 0.12);
}

/* ── ABOUT GOVERNANCE ── */
.about-governance-pillars {
  border-top-color: rgba(220, 237, 227, 0.2);
}

.about-governance-pillar {
  border-bottom-color: rgba(220, 237, 227, 0.15);
}

.about-governance-pillar:nth-child(even) {
  border-left-color: rgba(220, 237, 227, 0.15);
}

/* ── ABOUT PROCESS ── */
.about-process {
  border-top-color: rgba(220, 237, 227, 0.2);
}

.about-process-step {
  border-bottom-color: rgba(220, 237, 227, 0.15);
}

/* ── TALENT PILLARS ── */
.talent-pillars {
  border-top-color: rgba(31, 107, 79, 0.15);
}

.talent-pillar {
  border-bottom-color: rgba(31, 107, 79, 0.12);
}

/* ── ENGAGEMENT GRID ── */
.engagement-grid {
  border-top-color: rgba(31, 107, 79, 0.15);
}

.engagement-block {
  border-right-color: rgba(31, 107, 79, 0.15);
}

/* ── HUBS GRID ── */
.hubs-grid {
  border-top-color: rgba(220, 237, 227, 0.2);
}

/* Hub block (dark theme) */
.hub-city {
  color: var(--green-light);
}

/* ── CAREERS DOMAIN CHAIN ── */
.car-domain-chain {
  border-top-color: rgba(220, 237, 227, 0.2);
}

/* ── CAREERS PATHS ── */
.car-paths-grid {
  border-top-color: rgba(220, 237, 227, 0.15);
}

/* ── CONTACT STATUS ── */
.cnt-status {
  border-left-color: var(--green);
}

/* ── CONTACT DIRECTORY ── */
.cnt-directory {
  border-top-color: rgba(220, 237, 227, 0.2);
}

.cnt-dir-row {
  border-bottom-color: rgba(220, 237, 227, 0.15);
}

/* ── LEDGER BORDERS ── */
.ledger th,
.ledger td {
  border-bottom-color: rgba(31, 107, 79, 0.12);
}

section.theme-ink .ledger th,
section.theme-ink .ledger td,
section.theme-navy .ledger th,
section.theme-navy .ledger td,
.theme-ink .ledger th,
.theme-ink .ledger td,
.theme-navy .ledger th,
.theme-navy .ledger td {
  border-bottom-color: rgba(220, 237, 227, 0.12);
}

/* ── LEADERSHIP ROW BORDER ── */
.leadership-row {
  border-bottom-color: rgba(31, 107, 79, 0.12);
}

section.theme-ink .leadership-row,
section.theme-navy .leadership-row,
.theme-ink .leadership-row,
.theme-navy .leadership-row {
  border-bottom-color: rgba(220, 237, 227, 0.12);
}

/* ── BORDER-TOP UTILITY ── */
.border-top {
  border-top-color: rgba(31, 107, 79, 0.15);
}

.theme-ink .border-top,
.theme-navy .border-top {
  border-top-color: rgba(220, 237, 227, 0.15);
}

/* ── CAPABILITIES CHAIN ── */
.cap-chain {
  border-top-color: rgba(220, 237, 227, 0.2);
}

.cap-chain-arrow {
  color: var(--green);
}

/* ── CAPABILITIES SPEC GRID ── */
.cap-spec-item {
  border-bottom-color: rgba(31, 107, 79, 0.12);
}

/* ── DELIVERY FRAMEWORK ── */
.dlv-framework {
  border-top-color: rgba(220, 237, 227, 0.2);
}

.dlv-fw-step {
  border-bottom-color: rgba(220, 237, 227, 0.15);
}

/* ── CAREER TRAJECTORY ── */
.car-trajectory {
  border-top-color: rgba(31, 107, 79, 0.15);
}

.car-traj-item {
  border-bottom-color: rgba(31, 107, 79, 0.12);
}

/* ── CAREER PROCESS (work auth) ── */
.dlv-fw-step {
  border-bottom-color: rgba(31, 107, 79, 0.12);
}

/* ── SECTION COMPACT PADDING OVERRIDES ── */
.about-hero-inner {
  gap: var(--spacing-lg);
}

.grid-editorial {
  gap: var(--spacing-md);
}

.discipline-body {
  gap: var(--spacing-sm);
}

.operating-model-flow {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.hubs-grid {
  padding-top: var(--spacing-md);
}

.talent-pillars {
  padding-top: var(--spacing-sm);
}

.about-stack-row {
  padding: 0.75rem 0;
}

.car-traj-item {
  padding: 1rem 0;
}

.car-paths-grid {
  padding-top: var(--spacing-md);
}

.cap-chain {
  padding-top: var(--spacing-sm);
}

.dlv-framework {
  padding-top: var(--spacing-sm);
}

/* ── PF DATA STRIP COMPACT ── */
.pf-data-strip {
  padding: var(--spacing-sm) 0;
}

/* ── SCROLL HINT ── */
.scroll-hint {
  color: var(--accent-green);
}

/* ── SKIP LINK ── */
.skip-link {
  background: var(--forest);
  color: var(--green-light);
}

/* ── CONTACT: input bottom border ── */
.cnt-input {
  border-bottom-color: rgba(31, 107, 79, 0.25);
}

/* ── CONTACT submit row ── */
.cnt-submit-row {
  border-top-color: rgba(220, 237, 227, 0.2);
}

/* ── PENDING BLOCKS in careers ── */
.car-pending-block {
  border-top-color: rgba(220, 237, 227, 0.12);
}

.car-pending-div {
  background-color: rgba(220, 237, 227, 0.12);
}

/* ── LDR STRIP DIVIDER ── */
.ldr-strip {
  border-top-color: rgba(220, 237, 227, 0.2);
  border-bottom-color: rgba(220, 237, 227, 0.2);
}

.ldr-strip-div {
  background-color: rgba(220, 237, 227, 0.2);
}

/* ── PORTFOLIO PUB NOTE ── */
.pf-pub-note {
  border-top-color: rgba(220, 237, 227, 0.2);
}

/* ── MOBILE: compact hero ── */
@media (max-width: 768px) {
  .hero-section {
    padding-top: calc(var(--spacing-xl) + 2rem);
    padding-bottom: var(--spacing-md);
    min-height: 70vh;
  }

  :root {
    --spacing-xl: 3rem;
    --spacing-xxl: 4.5rem;
  }
}

@media (max-width: 480px) {
  .hero-section {
    min-height: 60vh;
    padding-bottom: var(--spacing-sm);
  }

  :root {
    --spacing-xl: 2.5rem;
    --spacing-xxl: 4rem;
  }
}

/* ── CAP ROW: fix z-index issue with ::after content arrow ── */
.cap-row {
  overflow: visible;
}

/* ── REAL PLANT IMAGE COMPONENTS ── */

/* Editorial plant image block — asymmetric, square crop */
.plant-image-block {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.plant-image-block img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
  border: none;
}

/* Subtle green left border treatment */
.plant-image-block--bordered {
  border-left: 2px solid var(--green);
}

/* Section with plant image split */
.section-plant-split {
  display: grid;
  grid-template-columns: 1fr 38%;
  gap: var(--spacing-lg);
  align-items: stretch;
}

.section-plant-split--reverse {
  grid-template-columns: 38% 1fr;
}

.section-plant-split .plant-image-block {
  height: 100%;
  min-height: 340px;
  max-height: 520px;
}

/* Hero plant image strip — right aligned, editorial */
.hero-plant-strip {
  position: absolute;
  right: 0;
  top: 0;
  width: 32%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.hero-plant-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.6;
}

/* Narrow full-width section image (careers, about) */
.section-image-band {
  width: 100%;
  height: 280px;
  overflow: hidden;
  position: relative;
}

.section-image-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* About editorial image block */
.about-image-editorial {
  width: 38%;
  flex-shrink: 0;
  overflow: hidden;
  min-height: 300px;
  max-height: 480px;
}

.about-image-editorial img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* Home hero image side panel */
.hero-image-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 30%;
  overflow: hidden;
  pointer-events: none;
}

.hero-image-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0.55;
  mix-blend-mode: luminosity;
}

/* Capabilities image aside */
.cap-image-aside {
  float: right;
  width: 36%;
  margin: 0 0 var(--spacing-md) var(--spacing-lg);
  overflow: hidden;
  min-height: 260px;
  clearfix: both;
}

.cap-image-aside img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Delivery image strip */
.delivery-image-strip {
  width: 100%;
  height: 260px;
  overflow: hidden;
  margin-bottom: var(--spacing-md);
}

.delivery-image-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* Tech label overlay on image */
.plant-image-label {
  position: absolute;
  bottom: var(--spacing-sm);
  left: var(--spacing-sm);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-light);
  background: rgba(18, 55, 42, 0.75);
  padding: 0.25rem 0.5rem;
  pointer-events: none;
}

/* Responsive: collapse plant images on mobile */
@media (max-width: 768px) {
  .section-plant-split,
  .section-plant-split--reverse {
    grid-template-columns: 1fr;
  }

  .section-plant-split .plant-image-block,
  .about-image-editorial {
    width: 100%;
    max-height: 240px;
    min-height: 180px;
  }

  .hero-image-panel,
  .hero-plant-strip {
    display: none;
  }

  .cap-image-aside {
    float: none;
    width: 100%;
    margin: 0 0 var(--spacing-md) 0;
  }

  .section-image-band {
    height: 200px;
  }

  .delivery-image-strip {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .section-image-band {
    height: 160px;
  }
}

/* ── GREEN TECH GRID OVERLAY: update ink section color ── */
.theme-ink {
  background-image:
    linear-gradient(rgba(220,237,227,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220,237,227,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── MOBILE NAV: compact padding ── */
.mobile-nav {
  padding: 5rem var(--spacing-md) 2rem;
}

/* ── HEADER: slightly more compact ── */
header {
  padding: 0.9rem var(--spacing-md);
}

/* ── FOOTER: compact ── */
footer {
  padding: var(--spacing-lg) var(--spacing-md);
}

.footer-legal {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
}

/* ── PORTFOLIO LEDGER th: green color ── */
section.theme-ink .ledger th,
.theme-ink .ledger th {
  color: var(--accent-green);
}

/* ── CAPABILITIES: cap-row hover bg ── */
.cap-row:hover {
  background-color: rgba(31, 107, 79, 0.04);
}

/* ── HOME SECTION CTA BOTTOM BORDER ── */
section .border-top + div .cta-primary,
.cta-section-actions .cta-primary {
  border-color: rgba(31, 107, 79, 0.35);
}

/* ── LUSH GREEN ACCENT ON KEY METRIC NUMBERS ── */
section.theme-ink .metric-value,
section.theme-navy .metric-value,
.theme-ink .metric-value,
.theme-navy .metric-value {
  color: var(--green-light);
}

/* ── SECTION NUMBER in dark sections ── */
section.theme-ink .section-number,
section.theme-navy .section-number,
.theme-ink .section-number,
.theme-navy .section-number {
  color: var(--accent-green);
}

/* ── OM NODE: dark theme ── */
section.theme-ink .om-label,
section.theme-navy .om-label,
.theme-ink .om-label,
.theme-navy .om-label {
  color: var(--green-light);
}

.om-label.text-accent {
  color: var(--green) !important;
}

/* Fix domain-row for homepage (ink theme) */
section.theme-ink .domain-row,
.theme-ink .domain-row {
  border-bottom-color: rgba(220, 237, 227, 0.1);
}

section.theme-ink .domain-num,
.theme-ink .domain-num {
  color: var(--accent-green);
}

/* ── HERO EYEBROW status text ── */
.tech-status-text {
  color: var(--accent-green);
  opacity: 0.8;
}

/* ── PULSING DOT in hero ── */
@keyframes green-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.65); }
}

.tech-marker-dot--pulse {
  animation: green-pulse 2.8s ease-in-out infinite;
  background-color: var(--green);
}

.tech-status-dot {
  background-color: var(--green-fresh);
  animation: green-pulse 2.4s ease-in-out infinite;
}

/* ── SCROLLBAR: thin green ── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: var(--paper);
}

::-webkit-scrollbar-thumb {
  background-color: var(--accent-green);
  border-radius: 0;
}

/* ── SELECTION: green highlight ── */
::selection {
  background-color: var(--green-light);
  color: var(--forest);
}

/* ─────────────────────────────────────────────────────────────
   END OF GREEN REFRESH — SR THINKS INC. 2026
───────────────────────────────────────────────────────────── */


/* ============================================================
   FINAL IMAGE PLACEMENT FIX — SR THINKS INC. 2026
   Surgical additions only — appended, nothing above modified
============================================================ */

/* ── Homepage Capabilities section — editorial image strip ── */
.hp-cap-image {
  width: 38%;
  min-width: 320px;
  max-width: 500px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-left: 2px solid var(--green);
  align-self: stretch;
  min-height: 300px;
  background-color: var(--forest, #12372A);
}

.hp-cap-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0.55;
  mix-blend-mode: luminosity;
  filter: contrast(1.1) brightness(1.05);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.hp-cap-image:hover img {
  transform: scale(1.025);
}

.hp-cap-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--forest, #12372A);
  opacity: 0.12;
  pointer-events: none;
}

.hp-cap-image .plant-image-label {
  z-index: 3;
}

/* ── Homepage Talent Development editorial plant image ── */
.hp-talent-image {
  width: 280px;
  flex-shrink: 0;
  align-self: stretch;
  background-color: var(--paper, #F3F6F1);
  position: relative;
  overflow: hidden;
  border-left: 2px solid var(--green);
}

.hp-talent-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  opacity: 0.85;
  mix-blend-mode: multiply;
  filter: none;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.hp-talent-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--paper, #F3F6F1);
  opacity: 0.12;
  pointer-events: none;
}

.hp-talent-image:hover img {
  transform: scale(1.025);
}

.hp-talent-image .plant-image-label {
  z-index: 3;
}

@media (max-width: 768px) {
  .hp-talent-image {
    width: 100% !important;
    height: 220px !important;
    margin-top: var(--spacing-md) !important;
    margin-bottom: var(--spacing-md) !important;
  }
}

/* ── Capabilities page: Depth of Specialization editorial image ── */
.cap-depth-image {
  background-color: var(--paper, #F3F6F1) !important;
  position: relative;
  overflow: hidden;
}

.cap-depth-image img {
  opacity: 0.85 !important;
  mix-blend-mode: multiply !important;
  filter: none !important;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.cap-depth-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--paper, #F3F6F1);
  opacity: 0.12;
  pointer-events: none;
}

.cap-depth-image:hover img {
  transform: scale(1.025);
}

.cap-depth-image .plant-image-label {
  z-index: 3;
}

/* ── plant-image-block hover interaction ── */
.plant-image-block img {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.plant-image-block:hover img {
  transform: scale(1.025);
}

/* ── Responsive: collapse image columns on tablet/mobile ── */
@media (max-width: 1024px) {
  .hp-cap-image {
    width: 30%;
    min-width: 240px;
  }
}

@media (max-width: 768px) {
  /* Capabilities section image: hide on mobile (domain list is primary content) */
  .hp-cap-image {
    display: none;
  }

  /* For all page hero flex layouts: stack vertically */
  .plant-image-block {
    width: 100% !important;
    min-width: unset !important;
    max-height: 220px !important;
    min-height: 180px !important;
    height: 220px !important;
  }
}

@media (max-width: 480px) {
  .plant-image-block {
    max-height: 180px !important;
    height: 180px !important;
  }
}

/* ── Reduced motion: disable image scale transitions ── */
@media (prefers-reduced-motion: reduce) {
  .hp-cap-image img,
  .plant-image-block img {
    transition: none !important;
  }
}

/* ── CONTACT FORM: Container BG & Contrast Fix ── */
.cnt-form-right {
  background-color: var(--paper);
  padding: 3rem;
  border-top: 4px solid var(--green);
}

.cnt-form-right .cnt-input {
  color: var(--ink) !important;
  border-bottom-color: rgba(17, 24, 21, 0.25) !important;
}

.cnt-form-right .cnt-input:focus,
.cnt-form-right .cnt-input:focus-visible,
.cnt-form-right .cnt-input:hover {
  border-bottom-color: var(--green) !important;
}

.cnt-form-right .cnt-label,
.cnt-form-right .cnt-consent-text {
  color: var(--color-stone) !important;
}

.cnt-form-right .cnt-field:focus-within .cnt-label {
  color: var(--green) !important;
}

.cnt-form-right .cnt-radio-label,
.cnt-form-right .cnt-checkbox-label,
.cnt-form-right .cnt-select-arrow {
  color: var(--ink) !important;
}

.cnt-form-right .cnt-input::placeholder {
  color: rgba(17, 24, 21, 0.4) !important;
}

@media (max-width: 768px) {
  .cnt-form-right {
    padding: 2rem 1.5rem;
  }
}

/* ── CONTACT FORM: Submit Button Visibility Fix ── */
.cnt-form-right .cnt-submit-row {
  border-top-color: rgba(17, 24, 21, 0.15) !important;
  padding-top: 2rem;
}

.cnt-form-right .cnt-submit {
  background-color: var(--forest) !important;
  color: var(--paper) !important;
  padding: 1rem 1.5rem !important;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cnt-form-right .cnt-submit:hover,
.cnt-form-right .cnt-submit:focus-visible {
  background-color: var(--ink) !important;
  color: var(--green-light) !important;
  transform: translateY(-2px) !important;
}

/* ── HERO IMAGE FULL HEIGHT & EDITORIAL MERGE (ALL PAGES) ── */
.about-hero-section,
.pf-hero-section,
.cap-hero-section,
.dlv-hero-section,
.ldr-hero-section,
.car-hero-section,
.cnt-hero-section {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--spacing-xxl) + 1rem);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-hairline-ink);
  box-sizing: border-box;
}

.theme-ink.about-hero-section,
.theme-ink.car-hero-section {
  border-bottom-color: rgba(215, 213, 204, 0.2);
}

.about-hero-inner,
.pf-hero-inner,
.cap-hero-inner,
.dlv-hero-inner,
.ldr-hero-inner,
.car-hero-inner,
.cnt-hero-inner {
  display: flex;
  gap: var(--spacing-xl);
  align-items: flex-start;
  width: 100%;
}

.about-hero-text,
.pf-hero-text,
.cap-hero-text,
.dlv-hero-text,
.ldr-hero-text,
.car-hero-text,
.cnt-hero-text {
  flex: 1;
  max-width: 56%;
  min-width: 280px;
}

.about-hero-image-block,
.pf-hero-image-block,
.cap-hero-image-block,
.dlv-hero-image-block,
.ldr-hero-image-block,
.car-hero-image-block,
.cnt-hero-image-block {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40%;
  overflow: hidden;
  border-left: none !important;
  background-color: var(--paper, #F3F6F1);
}

.about-hero-image-block img,
.pf-hero-image-block img,
.cap-hero-image-block img,
.dlv-hero-image-block img,
.ldr-hero-image-block img,
.car-hero-image-block img,
.cnt-hero-image-block img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.85;
  mix-blend-mode: multiply;
  filter: none;
}

.pf-hero-image-block img {
  object-position: center 25%;
}

.cap-hero-image-block img {
  object-position: center 20%;
}

.dlv-hero-image-block img {
  object-position: center 30%;
}

.ldr-hero-image-block img {
  object-position: center 30%;
}

.car-hero-image-block img {
  object-position: center 25%;
}

.cnt-hero-image-block img {
  object-position: center 35%;
}

.about-hero-image-block::after,
.pf-hero-image-block::after,
.cap-hero-image-block::after,
.dlv-hero-image-block::after,
.ldr-hero-image-block::after,
.car-hero-image-block::after,
.cnt-hero-image-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--paper, #F3F6F1);
  opacity: 0.12;
  pointer-events: none;
}

/* Dark theme image treatment (Careers) — matching Homepage green effect with clean edge */
.theme-ink .about-hero-image-block,
.theme-ink .car-hero-image-block {
  background-color: var(--forest, #12372A) !important;
  border-left: none !important;
}

.theme-ink .about-hero-image-block img,
.theme-ink .car-hero-image-block img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0.55;
  mix-blend-mode: luminosity;
  filter: contrast(1.1) brightness(1.05);
}

.theme-ink .about-hero-image-block::after,
.theme-ink .car-hero-image-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--forest, #12372A);
  opacity: 0.12;
  pointer-events: none;
}

.about-hero-image-block .plant-image-label,
.pf-hero-image-block .plant-image-label,
.cap-hero-image-block .plant-image-label,
.dlv-hero-image-block .plant-image-label,
.ldr-hero-image-block .plant-image-label,
.car-hero-image-block .plant-image-label,
.cnt-hero-image-block .plant-image-label {
  position: absolute;
  bottom: var(--spacing-sm);
  left: var(--spacing-sm);
  z-index: 3;
}

@media (max-width: 1024px) {
  .about-hero-section,
  .pf-hero-section,
  .cap-hero-section,
  .dlv-hero-section,
  .ldr-hero-section,
  .car-hero-section,
  .cnt-hero-section {
    min-height: 70vh;
  }
  .about-hero-text,
  .pf-hero-text,
  .cap-hero-text,
  .dlv-hero-text,
  .ldr-hero-text,
  .car-hero-text,
  .cnt-hero-text {
    max-width: 58%;
  }
  .about-hero-image-block,
  .pf-hero-image-block,
  .cap-hero-image-block,
  .dlv-hero-image-block,
  .ldr-hero-image-block,
  .car-hero-image-block,
  .cnt-hero-image-block {
    width: 38%;
  }
}

@media (max-width: 768px) {
  .about-hero-section,
  .pf-hero-section,
  .cap-hero-section,
  .dlv-hero-section,
  .ldr-hero-section,
  .car-hero-section,
  .cnt-hero-section {
    min-height: auto;
    padding-top: calc(var(--spacing-xl) + 2rem);
    padding-bottom: var(--spacing-md);
  }
  .about-hero-inner,
  .pf-hero-inner,
  .cap-hero-inner,
  .dlv-hero-inner,
  .ldr-hero-inner,
  .car-hero-inner,
  .cnt-hero-inner {
    flex-direction: column;
  }
  .about-hero-text,
  .pf-hero-text,
  .cap-hero-text,
  .dlv-hero-text,
  .ldr-hero-text,
  .car-hero-text,
  .cnt-hero-text {
    max-width: 100% !important;
  }
  .about-hero-image-block,
  .pf-hero-image-block,
  .cap-hero-image-block,
  .dlv-hero-image-block,
  .ldr-hero-image-block,
  .car-hero-image-block,
  .cnt-hero-image-block {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: unset !important;
    max-height: 240px !important;
    min-height: 200px !important;
    height: 240px !important;
    margin-top: var(--spacing-md);
  }
}



/* ============================================================
   SR THINKS INC. — V2 REFINEMENTS (Oct 2026)
   1. New logo   2. Font system   3. Tighter spacing
   4. Text-contrast fixes on dark + light sections
   Appended last on purpose so it overrides earlier layers.
============================================================ */

/* ── 1. LOGO ─────────────────────────────────────────────── */
.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  letter-spacing: 0;
  text-transform: none;
}
.logo-img {
  display: block;
  height: 46px;
  width: auto;
}
header { padding-top: 0.45rem; padding-bottom: 0.45rem; }

/* On dark surfaces the logo sits on a soft paper chip so the teal "SR" stays legible */
footer .logo,
header.menu-open .logo {
  background: var(--paper);
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
}
footer .logo { margin-bottom: var(--spacing-sm); }
footer .logo-img { height: 64px; }

/* ── 2. FONT SYSTEM ──────────────────────────────────────────
   Headings            → SF Pro Display
   Body / descriptions → SF Pro Text
   Labels, nav, buttons, forms → SF Pro Text (uppercase + tracking kept)  */
h1, h2, h3, h4, h5, h6,
.text-large, .text-xlarge {
  font-family: var(--font-display);
}
body, p, li, a, span, div, address, dt, dd, th, td, label, legend {
  font-family: var(--font-body);
}
/* keep display face where it is deliberately used for big type */
.metric-value, .about-depth-num, .cap-scale-num, .pf-data-num,
.domain-name, .engagement-title, .hub-city, .ldr-name, .ldr-roster-heading,
.ldr-hero-heading, .car-hero-heading, .cnt-hero-heading, .cnt-form-heading,
.car-path-title, .about-stack-value, .dlv-fw-label, .cap-name, .ldr-monogram,
.section-number, .om-label, .car-domain-label {
  font-family: var(--font-display);
}
.text-mono { font-weight: 500; letter-spacing: 0.07em; }
button, input, select, textarea { font-family: var(--font-body); }

/* ── 3. TIGHTER SPACING ───────────────────────────────────── */
:root {
  --spacing-lg: 2.75rem;
  --spacing-xl: 3.75rem;
  --spacing-xxl: 5.5rem;
}
section { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

/* Heroes: no more 80vh slabs. Inline styles in the HTML need !important to beat. */
.hero-section,
.about-hero-section, .pf-hero-section, .cap-hero-section, .dlv-hero-section,
.ldr-hero-section, .car-hero-section, .cnt-hero-section {
  min-height: clamp(420px, 60vh, 600px) !important;
  padding-top: 7rem !important;
  padding-bottom: 3.25rem !important;
}
.hero-section { align-items: center; }

/* Editorial grid: narrower label column, less dead space beside content */
.grid-editorial {
  grid-template-columns: minmax(170px, 2fr) 8fr;
  gap: var(--spacing-md);
}
.grid-editorial .text-body-large,
.grid-editorial p.text-body-large { max-width: 74ch !important; }

/* Image + text split sections */
.discipline-layout { min-height: 0 !important; }
.discipline-image { min-height: 460px !important; }
.discipline-body { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }

/* Misc vertical rhythm */
.metrics-row { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.operating-model-flow { margin-bottom: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.hubs-grid { padding-top: var(--spacing-sm); }
.engagement-grid, .cap-index, .domain-index { margin-top: var(--spacing-sm); }

@media (max-width: 1024px) {
  .grid-editorial { grid-template-columns: 1fr; gap: var(--spacing-sm); }
  .discipline-image { min-height: 300px !important; }
}
@media (max-width: 768px) {
  :root { --spacing-lg: 2rem; --spacing-xl: 2.75rem; --spacing-xxl: 4rem; }
  .hero-section, .about-hero-section, .pf-hero-section, .cap-hero-section,
  .dlv-hero-section, .ldr-hero-section, .car-hero-section, .cnt-hero-section {
    min-height: 0 !important;
    padding-top: 6rem !important;
    padding-bottom: 2.25rem !important;
  }
  .logo-img { height: 40px; }
  footer .logo-img { height: 54px; }
}

/* ── 4. TEXT CONTRAST ─────────────────────────────────────────
   Accent-green and stone-grey were tuned for light paper and
   nearly vanished on the dark forest sections (≈2:1). Re-point the
   tokens inside dark scopes so every rule that uses them is fixed
   at once. Targets WCAG AA (4.5:1).                               */
section.theme-ink,
section.theme-navy,
.discipline-section,
footer,
.mobile-nav {
  --green:         #8FD6B0;
  --green-fresh:   #8FD6B0;
  --color-bronze:  #8FD6B0;
  --accent-green:  #B9DDC8;
  --color-stone:   #C7D6CD;
  --stone-green:   #C7D6CD;
}
/* Light sections */
.section-number { color: var(--green); }
.theme-ink .section-number, .theme-navy .section-number { color: var(--accent-green); }
.ldr-title { color: var(--green); }
.cnt-req { color: #B3261E; }
.hub-role, .hub-region { opacity: 1; }
.ldr-pending-note, .pf-pub-note { color: #4B5750; opacity: 1; }
.theme-ink .ldr-pending-note, .theme-navy .ldr-pending-note,
.theme-ink .pf-pub-note, .theme-navy .pf-pub-note,
.cnt-dir-status, .car-pending-item .text-mono { color: #C7D6CD; opacity: 1; }
/* Dark hero extras */
.hp-serial-num { color: var(--green-light); }
.tech-marker-label { color: var(--accent-green); }
.domain-arrow, .dlv-fw-arrow, .car-domain-arrow, .cap-chain-arrow, .om-arrow { color: var(--green); }
.cta-secondary { color: var(--accent-green); }
.theme-paper .cta-secondary { color: var(--color-stone); }

/* ── 4b. CONTRAST — exceptions & stragglers ───────────────── */
/* Paper card sitting inside a dark section: restore light-surface tokens */
.cnt-form-right {
  --green:         #1F6B4F;
  --green-fresh:   #3E8E68;
  --color-bronze:  #1F6B4F;
  --accent-green:  #4F6F5F;
  --color-stone:   #3F4A44;
  --stone-green:   #3F4A44;
}
.cnt-form-right .cnt-req { color: #9B1C14 !important; opacity: 1 !important; }
.cnt-form-right .cnt-error { color: #9B1C14; }
.theme-paper .dlv-hub .hub-role { color: #3F4A44; opacity: 1; }
.car-pending-item .text-mono { color: #C7D6CD !important; opacity: 1 !important; }
.hp-serial, .hp-serial-num { opacity: 1 !important; }
.hp-serial-num { color: #F3F6F1; }

/* ── 5. LOGO SIZE + HOME HERO FIXES ───────────────────────── */
.logo-img { height: 58px; }
header { padding-top: 0.3rem; padding-bottom: 0.3rem; }
@media (max-width: 768px) { .logo-img { height: 46px; } }

/* Home hero: keep headline clear of the photo panel + stop corner markers colliding with the eyebrow */
.tech-hero { padding-top: 8.5rem !important; }
.tech-corner--tl, .tech-corner--tr { top: 5.4rem; }
.hero-headline { font-size: clamp(2.6rem, 5.4vw, 4.9rem); max-width: 64vw; }
@media (max-width: 1024px) {
  .hero-headline { max-width: 100%; }
  .tech-hero { padding-top: 7.5rem !important; }
}

/* Section headings that live in the label column need a wider column */
.grid-editorial:has(> div:first-child > h2) {
  grid-template-columns: minmax(280px, 4fr) 6fr;
}
@media (max-width: 1024px) {
  .grid-editorial:has(> div:first-child > h2) { grid-template-columns: 1fr; }
}

/* ── 6. SMALLER HEADINGS + LEANER COPY SIZE ───────────────── */
.text-xlarge { font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
.text-large  { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.text-body-large { font-size: 1.05rem; line-height: 1.65; }
.hero-headline { font-size: clamp(2.2rem, 4.4vw, 3.8rem); }
.ldr-hero-heading, .car-hero-heading, .cnt-hero-heading, .cnt-form-heading, .ldr-roster-heading {
  font-size: clamp(2rem, 4vw, 3.2rem);
}
.ldr-hero-note { max-width: 46ch; }

/* ── 7. FOOTER: WHITE LOGO + CONTACT ──────────── */
footer { position: relative; overflow: hidden; }
footer .container { position: relative; }
footer .logo, footer .logo--footer { background: none; padding: 0; border-radius: 0; }
footer .logo-img { height: 72px; opacity: 0.95; }
.footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.6fr; }
.footer-contact { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-contact .text-mono { color: var(--accent-green); margin-bottom: 0.25rem; }
.footer-contact a { color: var(--paper); font-size: 1rem; width: fit-content; border-bottom: 1px solid transparent; }
.footer-contact a:hover { border-bottom-color: var(--green); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* Home hero: eyebrow block removed — rebalance spacing */
.tech-hero { padding-top: 7rem !important; }
.tech-corner--tl, .tech-corner--tr { top: 5rem; }

/* ── 8. HOME HERO: taller banner, bigger image, content centered ── */
.tech-hero {
  min-height: clamp(600px, 88vh, 820px) !important;
  display: flex; align-items: center;
  padding-top: 7rem !important; padding-bottom: 3.5rem !important;
}
.tech-hero > .container { width: 100%; }
.hero-image-panel { width: 40%; }
.hero-image-panel img { opacity: 0.7; object-position: center 40%; }
.hero-headline { font-size: clamp(2.1rem, 3.9vw, 3.4rem); max-width: 56vw; }
.hero-body p { max-width: 52ch; }
@media (max-width: 1024px) {
  .hero-image-panel { width: 100%; }
  .hero-image-panel img { opacity: 0.18; }
  .hero-headline { max-width: 100%; }
  .tech-hero { min-height: 0 !important; }
}

.hero-body p { max-width: 58ch; }

/* ── 9. HOME BANNER ONLY: full-width image, text centered ──── */
.tech-hero { min-height: clamp(680px, 100vh, 920px) !important; justify-content: center; text-align: center; }
.tech-hero .hero-image-panel { width: 100%; left: 0; }
.tech-hero .hero-image-panel img { opacity: 1; mix-blend-mode: normal; object-position: center 40%; }
.tech-hero .hero-image-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,42,31,.80) 0%, rgba(18,55,42,.72) 50%, rgba(14,42,31,.86) 100%); }
.tech-hero .hero-inner { display: flex; flex-direction: column; align-items: center; }
.tech-hero .hero-headline { max-width: 20ch; margin-left: auto; margin-right: auto; font-size: clamp(2.4rem, 4.8vw, 4.2rem); }
.tech-hero .hero-body p { max-width: 62ch; margin: 0 auto; }
@media (max-width: 1024px) { .tech-hero { min-height: 0 !important; } .tech-hero .hero-image-panel img { opacity: 1; } }

/* ── 10. HOME BANNER: larger text ──────────────────────────── */
.tech-hero .hero-headline { font-size: clamp(2.9rem, 6vw, 5.4rem); max-width: 18ch; line-height: 1.05; }
.tech-hero .hero-body p { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.65; max-width: 66ch; }
@media (max-width: 768px) { .tech-hero .hero-headline { font-size: clamp(2.4rem, 9vw, 3.2rem); } .tech-hero .hero-body p { font-size: 1.1rem; } }

/* ── 9. LARGER TEXT ───────────────────────────────────────────
   All type is rem-based, so raising the root size scales every
   label, description and heading together.                      */
html { font-size: 112.5%; }               /* 18px base (was 16px) */
.text-body-large { font-size: 1.15rem; line-height: 1.65; }
.text-mono { font-size: 0.9rem; }
@media (max-width: 768px) { html { font-size: 106.25%; } }   /* 17px on phones */


/* ── 10. HOME BANNER — FINAL: taller, image behind, heading + text centered ── */
.tech-hero {
  min-height: clamp(620px, 86vh, 820px) !important;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding-top: 6.5rem !important; padding-bottom: 4rem !important;
}
.tech-hero > .container { width: 100%; }
.hero-image-panel { left: 0; right: 0; width: 100%; }
.hero-image-panel img { opacity: 0.32; object-position: center 45%; }
.hero-inner { max-width: 980px; margin: 0 auto; }
.hero-headline { max-width: none; font-size: clamp(2.3rem, 4.6vw, 4rem); margin-left: auto; margin-right: auto; }
.hero-body p { max-width: 62ch; margin-left: auto; margin-right: auto; }
@media (max-width: 1024px) { .tech-hero { min-height: 0 !important; } .hero-image-panel img { opacity: 0.25; } }

/* ── 10b. Home banner: beat the earlier higher-specificity hero rules ── */
.tech-hero .hero-headline {
  font-size: clamp(2.2rem, 3.9vw, 3.4rem) !important;
  max-width: 22ch !important; line-height: 1.12 !important;
  margin-left: auto !important; margin-right: auto !important;
}
.tech-hero .hero-body p { font-size: 1.05rem !important; max-width: 64ch !important; margin-left: auto; margin-right: auto; }
.tech-hero .hero-inner { margin-top: 0; }
@media (max-width: 768px) { .tech-hero .hero-headline { font-size: clamp(2rem, 8vw, 2.6rem) !important; } .tech-hero .hero-body p { font-size: 1rem !important; } }

/* ── 11. HOME BANNER — RESTORED SPLIT LAYOUT (text left, image right), taller ── */
.tech-hero {
  text-align: left; justify-content: flex-start; align-items: center;
  min-height: clamp(620px, 86vh, 820px) !important;
}
.tech-hero .hero-image-panel { left: auto; right: 0; width: 42%; }
.tech-hero .hero-image-panel img { opacity: 0.8; object-position: center 40%; }
.tech-hero .hero-image-panel::after {
  background: linear-gradient(90deg, rgba(18,55,42,.55) 0%, rgba(18,55,42,0) 45%);
}
.tech-hero .hero-inner { width: 54%; max-width: none; margin: 0; align-items: flex-start; }
.tech-hero .hero-headline {
  max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
  font-size: clamp(2.1rem, 3.4vw, 3rem) !important; text-align: left;
}
.tech-hero .hero-body p { max-width: 56ch !important; margin: 0 !important; text-align: left; }
@media (max-width: 1024px) {
  .tech-hero .hero-inner { width: 100%; }
  .tech-hero .hero-image-panel { left: 0; width: 100%; }
  .tech-hero .hero-image-panel img { opacity: 0.2; }
  .tech-hero .hero-image-panel::after { background: none; }
}

/* ── 12. DELIVERY BENCHMARKS: larger numbers + labels ── */
.dlv-metrics-row .dlv-metric-num {
  font-size: clamp(3rem, 6vw, 5rem); line-height: 1.05;
  color: var(--green); letter-spacing: -0.01em;
}
.dlv-metrics-row .metric-label {
  font-size: 1.05rem; line-height: 1.5; letter-spacing: 0.06em; margin-top: 0.75rem;
  color: var(--color-ink); max-width: 30ch;
}

/* ── 13. PORTFOLIO COMPANY LINKS ── */
.pf-company { font-family: var(--font-body); }
.pf-company a {
  color: var(--paper); font-size: 1.1rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; border-bottom: 1px solid rgba(243,246,241,.35);
  padding-bottom: 2px; transition: color .2s, border-color .2s;
}
.pf-company a span[aria-hidden] { color: var(--green); }
.pf-company a:hover, .pf-company a:focus-visible { color: var(--green); border-bottom-color: var(--green); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }