/* =========================================================
   RUBICON MARITIME SOLUTIONS — Design System
   ========================================================= */

:root {
  /* Brand palette (guidelines) */
  --ruby-red: #A40907;
  --bright-red: #DA0C09;
  --deep-ocean: #310FA0;
  --summer-sky: #A2DAE0;
  --pale-blue: #EFFDFF;

  /* Functional */
  --ink: #0E0933;
  --ink-2: #2A2556;
  --muted: #616086;
  --muted-2: #8a89a8;
  --line: #e7e6ef;
  --line-2: #d3d2e0;
  --bg: #ffffff;
  --bg-soft: #fafbfd;
  --bg-tint: #f4f5fa;
  --indigo-900: #10063e;
  --indigo-800: #1a0f5a;
  --indigo-700: #241a6e;
  --indigo-600: #4134A5;

  /* Legacy aliases (existing rules) */
  --red: var(--bright-red);
  --red-dark: var(--ruby-red);
  --indigo: var(--indigo-600);
  --indigo-dark: var(--deep-ocean);
  --teal: var(--summer-sky);
  --teal-soft: var(--pale-blue);
  --line-strong: var(--line-2);

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  --track-caps: 0.04em;
  --track-tight: -0.015em;
  --track-tightest: -0.025em;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* Radii */
  --r-2: 2px;
  --r-3: 3px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-24: 24px;

  /* Shadow elevation (multi-layer, restrained) */
  --shadow-xs: 0 1px 2px rgba(14, 9, 51, 0.04);
  --shadow-sm: 0 1px 2px rgba(14, 9, 51, 0.04), 0 2px 6px -2px rgba(14, 9, 51, 0.05);
  --shadow-md: 0 2px 4px -1px rgba(14, 9, 51, 0.05), 0 8px 16px -6px rgba(14, 9, 51, 0.08);
  --shadow-lg: 0 4px 8px -2px rgba(14, 9, 51, 0.06), 0 16px 32px -12px rgba(14, 9, 51, 0.10);
  --shadow-xl: 0 8px 16px -4px rgba(14, 9, 51, 0.08), 0 32px 64px -24px rgba(14, 9, 51, 0.14);
  --shadow-btn: 0 1px 2px rgba(164, 9, 7, 0.18), 0 4px 12px -2px rgba(218, 12, 9, 0.25);
  --shadow-btn-hover: 0 2px 4px rgba(164, 9, 7, 0.22), 0 10px 24px -4px rgba(218, 12, 9, 0.36);
  --shadow-card-inset: inset 0 0 0 1px rgba(255,255,255,0.08);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --dur-4: 420ms;
  --dur-5: 700ms;

  --container: 1200px;
  --container-narrow: 960px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Reserve the fixed-nav height when any anchor-link scrolls into view, so
     the target heading lands BELOW the nav bar, not hidden behind it.
     72px nav + 24px breathing = 96px. Tighter on mobile where nav is shorter. */
  scroll-padding-top: 96px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (max-width: 720px) {
  html { scroll-padding-top: 72px; }
}
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: var(--fs-16);
  font-feature-settings: "ss01", "cv11", "calt";
}
/* Layout foundation — single canonical container, responsive horizontal padding.
   Mobile 20px / Tablet 24px / Desktop 32px. Mobile intentionally off-scale (+4px
   over sp-4) for a touch more breathing room on phones, per production spec. */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px)  { .container { padding: 0 var(--sp-5); } }
@media (min-width: 1024px) { .container { padding: 0 var(--sp-6); } }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--deep-ocean); color: #fff; }

/* Branded focus — red on primary surfaces, indigo halo elsewhere */
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(49, 15, 160, 0.22); border-radius: var(--r-4); }
.btn-primary:focus-visible { box-shadow: var(--shadow-btn), 0 0 0 4px rgba(218, 12, 9, 0.25); }
.btn-outline-light:focus-visible,
.on-dark :focus-visible,
.hero :focus-visible,
footer :focus-visible { box-shadow: 0 0 0 3px rgba(162, 218, 224, 0.4); }

/* Skip-link — visually hidden until focused, lands above the nav */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--deep-ocean);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-4);
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
  transition: transform 180ms var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid rgba(162, 218, 224, 0.75);
  outline-offset: 2px;
}

/* Noise texture — subtle cinematic depth on dark surfaces */
:root {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* =========================================================
   Typography
   ========================================================= */
h1, h2, h3, h4, h5 { font-family: var(--font-sans); color: var(--deep-ocean); }

h1 {
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-6);
  text-wrap: balance;
  hyphens: none;
}
h2, h3, h4 { text-wrap: balance; }
.lede, .section-head p { text-wrap: pretty; }
h1 em { font-style: normal; color: var(--summer-sky); font-weight: 300; letter-spacing: -0.015em; }
h1 .accent { color: var(--bright-red); font-style: normal; font-weight: 800; }

h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--deep-ocean);
  margin-bottom: var(--sp-4);
}
h2 em { font-style: normal; color: var(--bright-red); font-weight: 400; }
.on-dark h2 { color: #fff; }
.on-dark h2 em { color: var(--summer-sky); }

h3 { font-size: var(--fs-20); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: var(--fs-17); line-height: 1.35; font-weight: 600; letter-spacing: -0.005em; }

p { line-height: 1.65; color: var(--muted); }

.lede { font-size: var(--fs-20); line-height: 1.5; color: rgba(239, 253, 255, 0.78); font-weight: 400; letter-spacing: -0.005em; }

/* =========================================================
   Brand Mark + Nav
   ========================================================= */
/* Brand mark — considered hover that reads as "live link" rather than "fading out".
   Slight scale from a left-anchored origin + a soft red drop-shadow that blooms in,
   plus a tiny brightness lift. Transform-origin is left-center so the logo nudges
   *forward* on hover, not symmetrically in place. */
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transform-origin: left center;
  transition: transform 360ms var(--ease-out);
}
.brand img {
  height: 48px;
  width: auto;
  display: block;
  transition: filter 380ms var(--ease-out);
}
.brand.footer img { height: 72px; }
.brand:hover {
  transform: scale(1.035);
}
.brand:hover img {
  filter: drop-shadow(0 6px 14px rgba(218, 12, 9, 0.22)) brightness(1.05);
}
.brand:active {
  transform: scale(1.01);
  transition-duration: 140ms;
}
@media (prefers-reduced-motion: reduce) {
  .brand, .brand img { transition: none; }
  .brand:hover { transform: none; }
  .brand:hover img { filter: drop-shadow(0 2px 6px rgba(218, 12, 9, 0.18)); }
}

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-3) var(--ease-out);
}
.nav.scrolled {
  box-shadow: var(--shadow-xs);
}
/* Scroll progress indicator — custom, functional, on-brand */
.nav-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 0%;
  background: linear-gradient(90deg, var(--bright-red), var(--ruby-red));
  transition: width 80ms linear;
  pointer-events: none;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 var(--sp-5);
  max-width: var(--container);
  margin: 0 auto;
}
.nav-links { display: flex; gap: var(--sp-6); align-items: center; }
.nav-links a.link {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  padding: var(--sp-2) 0;
  transition: color var(--dur-2) var(--ease-out);
}
.nav-links a.link::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: var(--bright-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
.nav-links a.link:hover { color: var(--deep-ocean); }
.nav-links a.link:hover::after,
.nav-links a.link.active::after { transform: scaleX(1); }

.nav-toggle { display: none; background: transparent; border: 0; cursor: pointer; padding: var(--sp-2); border-radius: var(--r-4); }
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--deep-ocean); margin: 4px 0; border-radius: 2px; transition: transform var(--dur-2) var(--ease-out); }

/* =========================================================
   Buttons — premium, restrained
   ========================================================= */
.btn {
  --btn-pad-x: 20px;
  --btn-pad-y: 11px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: inherit;
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  border-radius: var(--r-6);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: relative;
  transition:
    background-color 180ms var(--ease-out),
    background-image 260ms var(--ease-out),
    border-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    transform 220ms var(--ease-out),
    box-shadow 320ms var(--ease-out);
  will-change: transform;
}
.btn:active {
  transform: translateY(0) scale(0.975);
  transition:
    transform 80ms var(--ease-out),
    box-shadow 80ms var(--ease-out);
}
.btn-primary:active {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(0, 0, 0, 0.10),
    var(--shadow-btn);
}
.btn-lg { --btn-pad-x: 26px; --btn-pad-y: 14px; font-size: var(--fs-15); }
/* Utility: align a button to the start of its flex container (used on submit in forms) */
.btn--start { align-self: flex-start; }
/* Button busy state — used by the contact form while POST is in flight */
.btn[data-busy="true"] { pointer-events: none; opacity: 0.78; cursor: progress; }
.btn[data-busy="true"] .arrow { animation: btnBusyArrow 0.9s ease-in-out infinite; }
@keyframes btnBusyArrow {
  0%, 100% { transform: translateX(0); opacity: 0.9; }
  50%      { transform: translateX(4px); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .btn[data-busy="true"] .arrow { animation: none; }
}
/* Utility: remove top padding on a section when it should butt directly against the section above */
.section--flush-top { padding-top: 0; }

/* =========================================================
   Placeholder system — neutral grey blocks indicating where visual
   assets will be added later. Clearly labelled so the intent is
   explicit. Replace with real assets via a simple class swap.
   ========================================================= */
.placeholder {
  background: #E5E7EB;
  border: 1px solid #D1D5DB;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--sp-3);
  box-sizing: border-box;
  line-height: 1.3;
}
.placeholder--icon {
  width: 44px;
  height: 44px;
  font-size: 8px;
  letter-spacing: 0.06em;
  padding: 4px;
  flex-shrink: 0;
  border-radius: 2px;
}
.placeholder--image {
  aspect-ratio: 16 / 9;
  width: 100%;
  min-height: 220px;
}
.placeholder--map {
  aspect-ratio: 2 / 1;
  width: 100%;
  min-height: 220px;
}
/* Contact page — Locations: content left, map right (2-column at desktop) */
.locations-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}
.locations-content { min-width: 0; }
.locations-map {
  aspect-ratio: 4 / 3;
  min-height: 260px;
  width: 100%;
  align-self: stretch;
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  overflow: hidden;
  background: var(--bg-soft);
}
.locations-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 900px) {
  .locations-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .locations-map {
    aspect-ratio: 16 / 9;
    min-height: 240px;
  }
}
/* Spacing utilities — use sparingly for per-instance vertical rhythm against the scale */
.u-mt-7  { margin-top:    var(--sp-7); }
.u-mt-8  { margin-top:    var(--sp-8); }
.u-mt-10 { margin-top:    var(--sp-10); }
.u-mb-7  { margin-bottom: var(--sp-7); }

.btn-primary {
  background: linear-gradient(180deg, #E11715 0%, var(--bright-red) 40%, var(--ruby-red) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    var(--shadow-btn);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Subtle top sheen — always on, deepens on hover */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 55%);
  opacity: 0.5;
  transition: opacity 280ms var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
/* Diagonal shine sweep — plays once per hover */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 35%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left 720ms var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.btn-primary > * { position: relative; z-index: 2; }
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    var(--shadow-btn-hover);
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover::after { left: 140%; }
/* .btn-ghost removed — was unused across the build */
.btn-light {
  background: #fff;
  color: var(--deep-ocean);
  box-shadow: var(--shadow-sm);
}
.btn-light:hover { background: var(--pale-blue); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}
.btn-outline-light:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.04); }

/* Ghost button on dark — quieter secondary CTA for the hero */
.btn-ghost-light {
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(162, 218, 224, 0.28);
  letter-spacing: 0.01em;
}
.btn-ghost-light .arrow {
  color: var(--summer-sky);
  margin-left: 8px;
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.btn-ghost-light:hover {
  border-color: rgba(162, 218, 224, 0.55);
  background: rgba(162, 218, 224, 0.06);
  color: #fff;
}
.btn-ghost-light:hover .arrow { color: #fff; transform: translateX(3px); }

/* Arrow animation inside buttons */
.btn .arrow, .btn::after {
  transition: transform var(--dur-2) var(--ease-out);
}
.btn:hover .arrow { transform: translateX(3px); }

/* =========================================================
   Hero
   ========================================================= */
/* =========================================================
   Hero — ship photography with blueprint overlay
   ========================================================= */
.hero {
  padding: 200px 0 152px;
  min-height: min(88vh, 820px);
  display: flex;
  align-items: center;
  background-color: #0b0633;
  background-image:
    /* Defence-chart graticule — faint hairline grid overlay tied to the
       engineering theme. SVG inlined so no extra request. */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M80 0H0v80' fill='none' stroke='%23a2dae0' stroke-width='0.5' stroke-opacity='0.06'/></svg>"),
    /* Left-side fade — stronger near the headline, eased out faster so
       the right side of the photo breathes. */
    linear-gradient(90deg,
      rgba(11, 6, 51, 0.98) 0%,
      rgba(11, 6, 51, 0.86) 22%,
      rgba(11, 6, 51, 0.5) 46%,
      rgba(11, 6, 51, 0.16) 70%,
      rgba(11, 6, 51, 0) 90%
    ),
    /* Vertical settle — lighter top (let the dramatic sky carry it),
       deeper bottom for horizon weight and clean section seam. */
    linear-gradient(180deg,
      rgba(11, 6, 51, 0.12) 0%,
      transparent 24%,
      transparent 64%,
      rgba(11, 6, 51, 0.55) 100%
    ),
    image-set(url('assets/ships/hero-fleet.webp') type('image/webp'), url('assets/ships/hero-fleet.jpg') type('image/jpeg'));
  background-size: 80px 80px, cover, cover, cover;
  background-position: 0 0, center, center, center;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Hairline rule at the hero baseline — closes the composition with a
   restrained red accent, echoes the section-label vocabulary used
   throughout the site. */
.hero::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(218, 12, 9, 0) 0%,
    rgba(218, 12, 9, 0.55) 22%,
    rgba(218, 12, 9, 0.75) 50%,
    rgba(218, 12, 9, 0.55) 78%,
    rgba(218, 12, 9, 0) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Grain + edge vignette — cinematic unity with the photography */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    var(--grain),
    radial-gradient(ellipse 110% 95% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
  background-blend-mode: overlay, multiply;
  opacity: 0.45;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
  /* Scroll-linked parallax via CSS var set in site.js — held at 0 unless animated */
  transform: translate3d(0, var(--hero-parallax, 0px), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero::after { transform: none; }
}

/* Hero atmospheric fog — subtle drifting haze, sits between ship photo and
   hero text. Low opacity + slow cycle so it reads as ambient, not busy. */
.hero-fog {
  position: absolute;
  top: -5%;
  left: -40%;
  width: 220%;
  height: 110%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.7;
  z-index: 0;
  background:
    radial-gradient(ellipse 30% 50% at 20% 60%, rgba(162, 218, 224, 0.06), transparent 60%),
    radial-gradient(ellipse 40% 40% at 45% 40%, rgba(65, 52, 165, 0.05),   transparent 60%),
    radial-gradient(ellipse 35% 55% at 70% 65%, rgba(162, 218, 224, 0.07), transparent 60%);
  filter: url(#heroFog) blur(2px);
  animation: heroFogDrift 40s linear infinite;
}
@keyframes heroFogDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hero particles — ~25 tiny cyan specks drifting up-left, very subtle */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero-particles .particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(162, 218, 224, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(162, 218, 224, 0.5);
  opacity: 0;
}
/* Subpage hero motion layers — injected by site.js into every .hero-photo.
   Quieter than the homepage (half the particles, lower fog opacity, slower
   drift) because these heroes are shorter and already have a legibility
   gradient on the text side. */
.hero.page.hero-photo .hero-photo-fog {
  position: absolute;
  top: -5%;
  left: -40%;
  width: 220%;
  height: 110%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 1;
  z-index: 0;
  background:
    radial-gradient(ellipse 30% 50% at 25% 55%, rgba(162, 218, 224, 0.18), transparent 65%),
    radial-gradient(ellipse 40% 40% at 55% 45%, rgba(65, 52, 165, 0.14),   transparent 65%),
    radial-gradient(ellipse 35% 55% at 80% 60%, rgba(162, 218, 224, 0.22), transparent 65%),
    radial-gradient(ellipse 25% 40% at 40% 30%, rgba(127, 211, 221, 0.14), transparent 60%);
  filter: url(#heroPhotoFog) blur(3px);
  animation: heroPhotoFogDrift 32s linear infinite;
}
@keyframes heroPhotoFogDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hero.page.hero-photo .hero-photo-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero.page.hero-photo .hero-photo-particles .particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(162, 218, 224, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(162, 218, 224, 0.85), 0 0 12px rgba(127, 211, 221, 0.55);
  opacity: 0;
}

/* Hero edge-rim — one subtle glow travelling along the frigate silhouette */
.hero-edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
.hero-edge-rim {
  fill: none;
  stroke: rgba(162, 218, 224, 0.75);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 2 380;
  filter: drop-shadow(0 0 4px rgba(162, 218, 224, 0.7))
          drop-shadow(0 0 10px rgba(162, 218, 224, 0.35));
  animation: heroEdgeTravel 10s ease-in-out infinite;
}
@keyframes heroEdgeTravel {
  0%   { stroke-dashoffset: 0;    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: -382; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fog { animation: none; opacity: 0; }
  .hero-particles { display: none; }
  .hero-edge-rim { animation: none; opacity: 0; }
}

@media (max-width: 960px) {
  .hero {
    background-image:
      linear-gradient(180deg,
        rgba(11, 6, 51, 0.92) 0%,
        rgba(11, 6, 51, 0.7) 45%,
        rgba(11, 6, 51, 0.55) 100%
      ),
      image-set(url('assets/ships/hero-fleet.webp') type('image/webp'), url('assets/ships/hero-fleet.jpg') type('image/jpeg'));
    background-size: cover, cover;
    background-position: center, center;
  }
}

/* Subpage hero — calmer, no ship photo; keeps the dark register */
.hero.page {
  padding: 148px 0 80px;
  /* Minimum rendered height matches the Services hero (measured ~637px at
     desktop) so every subpage hero reads at the same vertical weight
     regardless of copy length. Pages with longer content (e.g. Careers)
     exceed this naturally; shorter pages (Markets, Methodology) grow up. */
  min-height: 640px;
  display: block;
  background-color: var(--indigo-900);
  background-image:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(218, 12, 9, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(65, 52, 165, 0.35), transparent 55%),
    linear-gradient(180deg, var(--indigo-900) 0%, var(--indigo-800) 100%);
}
.hero.page::after { opacity: 0.3; }

/* About page hero — custom platform photography (indigo-treated at source).
   Legibility gradient sits above the photo; text column reads clean. */
.hero.page.hero-about {
  background-color: var(--indigo-900);
  background-image:
    linear-gradient(90deg,
      rgba(11, 6, 51, 0.92) 0%,
      rgba(11, 6, 51, 0.74) 32%,
      rgba(11, 6, 51, 0.42) 58%,
      rgba(11, 6, 51, 0.15) 82%,
      rgba(11, 6, 51, 0) 96%
    ),
    linear-gradient(180deg,
      rgba(11, 6, 51, 0.18) 0%,
      transparent 28%,
      transparent 72%,
      rgba(11, 6, 51, 0.32) 100%
    ),
    image-set(url('assets/hero-about.webp') type('image/webp'),
              url('assets/hero-about.jpg')  type('image/jpeg'));
  background-size: cover, cover, cover;
  background-position: center, center, right center;
  background-repeat: no-repeat;
}
@media (max-width: 960px) {
  .hero.page.hero-about {
    background-image:
      linear-gradient(180deg,
        rgba(11, 6, 51, 0.92) 0%,
        rgba(11, 6, 51, 0.68) 45%,
        rgba(11, 6, 51, 0.50) 100%
      ),
      image-set(url('assets/hero-about.webp') type('image/webp'),
                url('assets/hero-about.jpg')  type('image/jpeg'));
    background-size: cover, cover;
    background-position: center, right center;
  }
}

/* Platform hero — shared photo treatment (indigo-treated at source).
   Used on Markets, Services, Methodology, Projects, Careers.
   Ship sits at right of the photo; legibility gradient fades left-to-right. */
.hero.page.hero-photo {
  background-color: var(--indigo-900);
  background-image:
    linear-gradient(90deg,
      rgba(11, 6, 51, 0.88) 0%,
      rgba(11, 6, 51, 0.68) 34%,
      rgba(11, 6, 51, 0.36) 60%,
      rgba(11, 6, 51, 0.10) 84%,
      rgba(11, 6, 51, 0) 96%
    ),
    linear-gradient(180deg,
      rgba(11, 6, 51, 0.15) 0%,
      transparent 28%,
      transparent 72%,
      rgba(11, 6, 51, 0.30) 100%
    ),
    image-set(url('assets/hero-markets.webp') type('image/webp'),
              url('assets/hero-markets.jpg')  type('image/jpeg'));
  background-size: cover, cover, cover;
  background-position: center, center, right center;
  background-repeat: no-repeat;
}
@media (max-width: 960px) {
  .hero.page.hero-photo {
    background-image:
      linear-gradient(180deg,
        rgba(11, 6, 51, 0.90) 0%,
        rgba(11, 6, 51, 0.66) 45%,
        rgba(11, 6, 51, 0.50) 100%
      ),
      image-set(url('assets/hero-markets.webp') type('image/webp'),
                url('assets/hero-markets.jpg')  type('image/jpeg'));
    background-size: cover, cover;
    background-position: center, right center;
  }
}

/* Hero copy elevated */
.hero-inner .eyebrow { margin-bottom: var(--sp-6); }
.hero p.lede {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
  color: rgba(239, 253, 255, 0.78);
  max-width: 560px;
  margin-bottom: var(--sp-7);
}

@media (max-width: 1024px) {
  .hero { padding: 160px 0 120px; min-height: 0; }
}
@media (max-width: 640px) {
  .hero { padding: 140px 0 96px; }
  .hero-proof { gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-4); }
  .hero-proof-sep { display: none; }
  .hero-proof-item { flex: 0 0 100%; }
}
.hero.page { padding: 148px 0 72px; }
/* Hero is display:flex so its .container child shrink-wraps to the
   intrinsic width of .hero-inner (920 px) instead of filling out to
   the standard 1200 px container. width: 100% forces the container to
   span the full available width, so the hero content lines up
   horizontally with every other .container on the page (trust band,
   services, footer, etc.). */
.hero > .container { width: 100%; }
.hero-inner { position: relative; max-width: 920px; z-index: 1; }

/* Hero text legibility — soft indigo-tinted glow under the homepage hero
   text so the white headline, lede and proof row hold up where the ANZAC
   photo brightens through the indigo overlay (sky / horizon mid-frame).
   Layered: 1 px crisp edge + 14 px medium lift + 28 px wide halo, all in
   --ink so the shadow blends with the existing hero gradient rather than
   reading as a hard drop-shadow. Scoped to .hero:not(.page) so subpage
   heroes (which already sit on a solid dark register) are unaffected. */
.hero:not(.page) .hero-inner h1,
.hero:not(.page) .hero-inner .lede,
.hero:not(.page) .hero-inner .hero-proof {
  text-shadow:
    0 1px 0  rgba(11, 6, 51, 0.55),
    0 2px 14px rgba(11, 6, 51, 0.70),
    0 0 28px  rgba(11, 6, 51, 0.45);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--summer-sky);
  padding: 7px 14px;
  border: 1px solid rgba(162, 218, 224, 0.25);
  border-radius: 999px;
  background: rgba(162, 218, 224, 0.06);
  margin-bottom: var(--sp-6);
  backdrop-filter: blur(6px);
}
.eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--bright-red);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow:
    0 0 0 3px rgba(218, 12, 9, 0.14),
    0 0 6px 1px rgba(225, 23, 21, 0.55),
    0 0 14px 2px rgba(225, 23, 21, 0.22);
  animation: dotPulse 2.6s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(218, 12, 9, 0.14),
      0 0 6px 1px rgba(225, 23, 21, 0.45),
      0 0 14px 2px rgba(225, 23, 21, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(218, 12, 9, 0.20),
      0 0 10px 2px rgba(225, 23, 21, 0.70),
      0 0 20px 3px rgba(225, 23, 21, 0.32);
  }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow .dot { animation: none; }
}

.hero p.lede { margin-bottom: var(--sp-7); max-width: 620px; }
.hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }

/* Quiet proof row under CTAs — factual, technical, not a second message */
.hero-proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  max-width: 620px;
  border-top: 1px solid rgba(162, 218, 224, 0.14);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(239, 253, 255, 0.62);
}
.hero-proof-item .hp-k {
  display: inline-block;
  margin-right: 8px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(162, 218, 224, 0.55);
  font-weight: 600;
}
/* Animated count — tabular digits keep the number width stable 0 -> 100 */
.hero-proof-item .hp-count {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 3ch;
  text-align: right;
}
.hero-proof-sep {
  width: 1px;
  height: 10px;
  background: rgba(162, 218, 224, 0.2);
  display: inline-block;
}

/* Hero scroll cue — static hairline, single descending dot, 3.2s loop */
.hero-cue {
  position: absolute;
  right: clamp(24px, 4vw, 56px);
  bottom: var(--sp-6);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  pointer-events: none;
  z-index: 1;
}
.hero-cue-track {
  position: relative;
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, rgba(162, 218, 224, 0.28), rgba(162, 218, 224, 0));
}
.hero-cue-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--summer-sky);
  opacity: 0;
  animation: heroCueDrop 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.hero-cue-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(162, 218, 224, 0.45);
}
@keyframes heroCueDrop {
  0%   { top: 0; opacity: 0; }
  18%  { opacity: 0.7; }
  82%  { opacity: 0.7; }
  100% { top: 28px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cue-dot { animation: none; top: 4px; opacity: 0.7; }
}
@media (max-width: 960px) { .hero-cue { display: none; } }


/* =========================================================
   Trust band — consolidated accreditation + client row
   (replaces credentials-bar + client-strip)
   ========================================================= */
.trust-band {
  background: var(--indigo-900);
  padding: var(--sp-7) 0 var(--sp-6);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(162, 218, 224, 0.07);
}
.trust-band::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(162, 218, 224, 0.18) 25%, rgba(218, 12, 9, 0.28) 50%, rgba(162, 218, 224, 0.18) 75%, transparent);
}
.trust-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.trust-inner { position: relative; z-index: 1; }
.trust-row {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  flex-wrap: wrap;
}
.trust-row--creds {
  justify-content: space-between;
  padding-bottom: var(--sp-5);
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.trust-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(162, 218, 224, 0.55);
  font-weight: 600;
}
.trust-value {
  font-size: var(--fs-14);
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.trust-sep { color: rgba(162, 218, 224, 0.3); margin: 0 4px; font-weight: 400; }
.trust-highlight { color: var(--bright-red); font-weight: 800; letter-spacing: 0.01em; }

.trust-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(162, 218, 224, 0.16), transparent);
  margin: 0 0 var(--sp-5);
}

.trust-row--clients {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding-top: 0;
}
.trust-clients-label {
  position: relative;
  display: inline-block;
  /* Pin the label to its intrinsic text width so the absolutely-positioned
     aura + particle layers inside it can never stretch across the row.
     `justify-self: start` overrides the grid container's default `stretch`,
     which was letting the box balloon up to 112px (or wider when the gap
     collapsed) and scattering the particles across the logos area. */
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  padding-top: 12px;    /* optical-centre the label against the first row of logos */
  padding-bottom: 10px; /* breathing room for the ember particles rising below */
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(180, 228, 234, 0.72);
  font-weight: 600;
  white-space: nowrap;
  isolation: isolate;
}
.trust-clients-label .tcl-text {
  position: relative;
  z-index: 2;
  text-shadow:
    0 0 8px rgba(162, 218, 224, 0.38),
    0 0 18px rgba(162, 218, 224, 0.18);
  animation: trustLabelGlow 4.2s ease-in-out infinite;
}
/* Aura — soft radial halo sitting just under the wordmark, breathing gently.
   Centres on the text, fades to transparent, blurred for a diffuse look. */
.trust-clients-label .tcl-aura {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 140%;
  height: 38px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(162, 218, 224, 0.28) 0%,
    rgba(162, 218, 224, 0.12) 35%,
    transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
  animation: tclAuraPulse 5.6s ease-in-out infinite;
}
@keyframes tclAuraPulse {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) scale(0.92); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.06); }
}
/* Particle host — small ember field rising through the label area.
   Five staggered specks, each on its own keyframe phase so the field never
   all-fires-together. Kept low count to stay quiet. */
.trust-clients-label .tcl-particles {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.trust-clients-label .tcl-particles i {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(162, 218, 224, 0.9);
  box-shadow: 0 0 6px rgba(162, 218, 224, 0.55);
  opacity: 0;
  animation-name: tclParticle;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.trust-clients-label .tcl-particles i:nth-child(1) { left: 14%; animation-duration: 4.8s; animation-delay: -0.4s; }
.trust-clients-label .tcl-particles i:nth-child(2) { left: 36%; animation-duration: 5.6s; animation-delay: -1.7s; }
.trust-clients-label .tcl-particles i:nth-child(3) { left: 58%; animation-duration: 5.1s; animation-delay: -2.9s; width: 1.5px; height: 1.5px; }
.trust-clients-label .tcl-particles i:nth-child(4) { left: 78%; animation-duration: 6.0s; animation-delay: -4.3s; }
.trust-clients-label .tcl-particles i:nth-child(5) { left: 92%; animation-duration: 5.4s; animation-delay: -3.1s; width: 1.5px; height: 1.5px; }
@keyframes tclParticle {
  0%   { transform: translateY(6px);   opacity: 0; }
  15%  { opacity: 0.85; }
  70%  { opacity: 0.45; }
  100% { transform: translateY(-22px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .trust-clients-label .tcl-aura,
  .trust-clients-label .tcl-particles i,
  .trust-clients-label .tcl-text { animation: none; }
  .trust-clients-label .tcl-aura { opacity: 0.5; }
  .trust-clients-label .tcl-particles i { opacity: 0; }
}
/* Mobile: the ambient motion was composed for a desktop scale — on a phone
   the particles + wide aura read as scatter. Drop particles entirely and
   tighten the aura to a narrow static halo so the label feels considered
   rather than cluttered. */
@media (max-width: 640px) {
  .trust-clients-label { padding-top: 0; padding-bottom: 4px; }
  .trust-clients-label .tcl-particles { display: none; }
  .trust-clients-label .tcl-aura {
    width: 108%;
    height: 22px;
    bottom: 0;
    filter: blur(5px);
    animation: none;
    opacity: 0.32;
    background: radial-gradient(ellipse at center,
      rgba(162, 218, 224, 0.22) 0%,
      rgba(162, 218, 224, 0.08) 45%,
      transparent 75%);
  }
  .trust-clients-label .tcl-text {
    animation: none;
    text-shadow:
      0 0 6px rgba(162, 218, 224, 0.22),
      0 0 12px rgba(162, 218, 224, 0.08);
  }
}
.trust-clients-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
@keyframes trustLabelGlow {
  0%, 100% {
    text-shadow:
      0 0 8px rgba(162, 218, 224, 0.30),
      0 0 16px rgba(162, 218, 224, 0.12);
  }
  50% {
    text-shadow:
      0 0 10px rgba(162, 218, 224, 0.50),
      0 0 22px rgba(162, 218, 224, 0.22);
  }
}
/* Reduced-motion handling for the label lives below with the tcl-* children. */
.trust-clients {
  display: flex;
  flex-wrap: nowrap;              /* single line at desktop — see <=1024px media query below for wrap */
  justify-content: space-between; /* distribute the chip + 6 logos evenly across the row */
  align-items: center;
  gap: clamp(14px, 1.6vw, 28px);  /* minimum gap; space-between expands it to fill the row */
  min-height: 40px;
}
.trust-clients picture,
.trust-clients .trust-logo--text {
  flex-shrink: 0;                 /* don't let any item compress when the row tightens */
}
.trust-clients picture {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.trust-clients .trust-logo {
  width: auto;
  opacity: 0.68;
  transition: opacity 240ms var(--ease-out);
  user-select: none;
}
.trust-clients .trust-logo:hover { opacity: 1; }

/* -- Per-brand optical sizing --------------------------------------------
   Heights are tuned by visual weight (stroke thickness, cap height,
   whether the mark is single-line or stacked) rather than aspect ratio.
   All silhouettes are 200px intrinsic tall, so `height` is the only knob. */
.trust-clients .trust-logo[alt="Commonwealth of Australia"] { height: 40px; }
.trust-clients .trust-logo[alt="BAE Systems"]            { height: 18px; }
.trust-clients .trust-logo[alt="Thales"]                 { height: 17px; }
.trust-clients .trust-logo[alt="Birdon"]                 { height: 22px; }
.trust-clients .trust-logo[alt="Teekay Shipping"]        { height: 28px; }
.trust-clients .trust-logo[alt="Austal"]                 { height: 30px; }
.trust-clients .trust-logo[alt="Navantia"]               { height: 32px; }
.trust-clients .trust-logo[alt="Raytheon Technologies"]  { height: 34px; }

/* Text-fallback chip for client-strip entries without an approved logo asset.
   Sits in the same flex row as the image logos but needs higher opacity than
   the .trust-clients .trust-logo default (0.68): chunky white silhouettes
   carry visual weight at 0.68 but small white text does not.
   TODO: remove once Commonwealth of Australia logo asset is supplied. */
.trust-clients .trust-logo--text {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 2px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.92;
  white-space: nowrap;
}
.trust-clients .trust-logo--text:hover { opacity: 1; }

/* The secondary "Australian Government programmes" sub-band (formerly
   .trust-clients-gov / .trust-gov-rule / .trust-gov-label) was removed
   from the markup. CSS rules dropped with it. */

/* Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Below ~1024 the chip + 6 logos can no longer sit comfortably on a single
     line. Switch back to wrap so the row stays readable down to mobile. */
  .trust-clients {
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: clamp(16px, 3vw, 26px);
    row-gap: var(--sp-4);
  }
}
@media (max-width: 900px) {
  .trust-row--clients {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }
  .trust-clients-label { padding-top: 0; }
}
@media (max-width: 640px) {
  .trust-clients { column-gap: clamp(16px, 3vw, 26px); }
  .trust-clients .trust-logo--text { font-size: 12px; height: 24px; letter-spacing: 0.04em; }
  .trust-clients .trust-logo[alt="Commonwealth of Australia"] { height: 30px; }
  .trust-clients .trust-logo[alt="BAE Systems"]            { height: 14px; }
  .trust-clients .trust-logo[alt="Thales"]                 { height: 13px; }
  .trust-clients .trust-logo[alt="Birdon"]                 { height: 17px; }
  .trust-clients .trust-logo[alt="Teekay Shipping"]        { height: 22px; }
  .trust-clients .trust-logo[alt="Austal"]                 { height: 23px; }
  .trust-clients .trust-logo[alt="Navantia"]               { height: 25px; }
  .trust-clients .trust-logo[alt="Raytheon Technologies"]  { height: 26px; }
}

/* Clients-row breakpoints live alongside the grid definition above.
   Creds row keeps its own mid-width adjustment. */
@media (max-width: 1024px) {
  .trust-row--creds { gap: var(--sp-5); }
  .trust-item { min-width: 40%; }
}
@media (max-width: 640px) {
  .trust-band { padding: var(--sp-6) 0 var(--sp-5); }
  .trust-row--creds { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
  .trust-item { min-width: 0; }
}

/* =========================================================
   Legacy credentials bar / client strip — superseded by trust-band
   (kept for compatibility if used on other pages)
   ========================================================= */
/* Legacy credentials/client-strip blocks removed — consolidated into .trust-band */

/* =========================================================
   Sections
   ========================================================= */
section { padding: var(--sp-10) 0; }
.section-head { max-width: 720px; margin-bottom: var(--sp-8); }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bright-red);
  margin-bottom: var(--sp-4);
}
.section-label::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--bright-red);
  transform-origin: left center;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
}
/* Scoped draw-in reveal: only where the section-head is animated on scroll */
[data-animate] .section-label::before { transform: scaleX(0); }
[data-animate].in .section-label::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  [data-animate] .section-label::before { transform: scaleX(1); transition: none; }
}
.section-head.centered .section-label::before { display: none; }
.section-head p { font-size: var(--fs-17); color: var(--muted); line-height: 1.6; max-width: 640px; }
.on-dark .section-head p { color: rgba(239, 253, 255, 0.68); }
.on-dark .section-label { color: var(--summer-sky); }
.on-dark .section-label::before { background: var(--summer-sky); }

/* =========================================================
   Homepage — Services editorial split
   ========================================================= */
.services-section { padding: var(--sp-9) 0 var(--sp-8); }
.services-section .section-head { margin-bottom: var(--sp-7); }

.svc-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--sp-8);
  align-items: stretch;
}

/* Featured card — large, considered */
.svc-feature {
  display: flex;
  flex-direction: column;
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  background: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out);
}
.svc-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(49, 15, 160, 0.04), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(218, 12, 9, 0.035), transparent 60%);
  z-index: -1;
  transition: opacity var(--dur-4) var(--ease-out);
}
.svc-feature:hover { border-color: var(--line-2); background: var(--bg-soft); }

.svc-feature-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.svc-feature-label .n {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bright-red);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.svc-feature-label .n-num { color: var(--bright-red); }
.svc-feature-label .n-sep {
  width: 14px;
  height: 1px;
  background: var(--bright-red);
  opacity: 0.35;
  transition: width 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
.svc-feature:hover .n-sep { width: 22px; opacity: 0.6; }
.svc-feature-label .n-tag {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.12em;
  transition: color 240ms var(--ease-out);
}
.svc-feature:hover .n-tag { color: var(--deep-ocean); }
/* Enter-affordance — quiet at rest, quietly responsive on hover.
   White disc with hairline indigo border. On card hover, only two things
   change: the border strengthens to full indigo, and the chevron slides NE.
   No disc translate, no halo bloom, no colour inversion. */
.svc-feature-label .svc-arrow {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(49, 15, 160, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 260ms var(--ease-out);
}
.svc-feature-label .svc-arrow::after {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 1.75px solid var(--deep-ocean);
  border-right: 1.75px solid var(--deep-ocean);
  transform: rotate(45deg) translate(-1px, 1px);
  transition: transform 320ms var(--ease-out);
}
.svc-feature:hover .svc-feature-label .svc-arrow {
  border-color: var(--deep-ocean);
}
.svc-feature:hover .svc-feature-label .svc-arrow::after {
  transform: rotate(45deg) translate(2px, -2px);
}
/* Keyboard parity — same subtle state when the card has focus */
.svc-feature:focus-visible .svc-feature-label .svc-arrow {
  border-color: var(--deep-ocean);
}

.svc-feature h3 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--deep-ocean);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--sp-5);
}
.svc-feature p {
  font-size: var(--fs-17);
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: var(--sp-5);
  max-width: 46ch;
}
.svc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.svc-meta span {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
  position: relative;
}
.svc-meta span + span::before {
  content: '·';
  color: var(--line-2);
  margin-right: var(--sp-4);
  font-weight: 400;
}

/* Home page only: hide the service-card SEO keyword chips off-screen.
   Keeps the keywords in the rendered HTML so crawlers still index them;
   removes the visual chip row from the card layout. Off-screen rather
   than display:none / visibility:hidden so the markup is still parsed
   into the accessibility tree and DOM as normal content. */
.services-section .svc-meta {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  /* Reset the visible-chip layout properties so they don't leak into
     the off-screen rendering and reserve space anywhere. */
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

/* Feature-card footer row — credentials + CTA */
.svc-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.svc-cred {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.svc-cta {
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bright-red);
  transition: color 200ms var(--ease-out), letter-spacing 280ms var(--ease-out);
}
.svc-cta span { display: inline-block; transition: transform 280ms var(--ease-out); margin-left: 4px; }
.svc-feature:hover .svc-cta span { transform: translateX(3px); }

/* Editorial list — no card chrome, just hairlines */
.svc-index {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}
.svc-index li { border-top: 1px solid var(--line); }
.svc-index li:last-child { border-bottom: 1px solid var(--line); }

/* svc-index — collapsible accordion. Summary row is a <button>; the body
   (idx-desc + Explore CTA) expands on click via grid-template-rows 0fr→1fr
   on .idx-expanded. Pattern mirrors the projects-page .principal--accordion. */
.svc-index .idx-summary {
  display: grid;
  grid-template-columns: 44px 1fr 28px;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5) var(--sp-3);
  position: relative;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: padding 280ms var(--ease-out);
}
.svc-index .idx-summary::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--bg-soft) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  z-index: -1;
}
/* Left accent bar that draws in on hover / when expanded */
.svc-index .idx-summary::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 0;
  width: 2px;
  background: var(--bright-red);
  transform: translateY(-50%);
  transition: height 360ms var(--ease-out);
}
.svc-index .idx-summary:hover::before,
.svc-idx-item[data-expanded="true"] .idx-summary::before { opacity: 1; }
.svc-index .idx-summary:hover::after,
.svc-idx-item[data-expanded="true"] .idx-summary::after { height: 60%; }
.svc-index .idx-summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(218, 12, 9, 0.22);
  border-radius: 2px;
}

.svc-index .idx {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  transition: color 220ms var(--ease-out);
}
.svc-index .idx-summary:hover .idx,
.svc-idx-item[data-expanded="true"] .idx { color: var(--bright-red); }
.svc-index .idx-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.svc-index .idx-title {
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--deep-ocean);
  letter-spacing: -0.005em;
  position: relative;
  display: inline-block;
  background-image: linear-gradient(var(--deep-ocean), var(--deep-ocean));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 380ms var(--ease-out);
  align-self: flex-start;
}
.svc-index .idx-summary:hover .idx-title,
.svc-idx-item[data-expanded="true"] .idx-title { background-size: 100% 1px; }

/* + / − toggle mark on the right of the summary row */
.svc-index .idx-toggle-mark {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
  justify-self: end;
  margin-right: 6px;
}
.svc-index .idx-toggle-mark::before,
.svc-index .idx-toggle-mark::after {
  content: '';
  position: absolute;
  background: var(--muted-2);
  transition: transform 320ms var(--ease-out), opacity 260ms var(--ease-out), background-color 220ms var(--ease-out);
}
.svc-index .idx-toggle-mark::before {
  top: 50%; left: 0; right: 0;
  height: 1.5px;
  transform: translateY(-50%);
}
.svc-index .idx-toggle-mark::after {
  left: 50%; top: 0; bottom: 0;
  width: 1.5px;
  transform: translateX(-50%);
  transform-origin: center;
}
.svc-index .idx-summary:hover .idx-toggle-mark::before,
.svc-index .idx-summary:hover .idx-toggle-mark::after,
.svc-idx-item[data-expanded="true"] .idx-toggle-mark::before,
.svc-idx-item[data-expanded="true"] .idx-toggle-mark::after {
  background: var(--bright-red);
}
.svc-idx-item[data-expanded="true"] .idx-toggle-mark::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

/* Expanded body — animated via max-height (grid-template-rows 1fr sometimes
   collapses in flex children, so use the reliable max-height technique). */
.svc-index .idx-expanded {
  max-height: 0;
  overflow: hidden;
  transition: max-height 420ms var(--ease-out);
}
.svc-index .idx-expanded-inner {
  padding-left: calc(44px + var(--sp-5) + var(--sp-3));
  padding-right: calc(28px + var(--sp-3));
}
.svc-idx-item[data-expanded="true"] .idx-expanded {
  max-height: 600px;
}
.svc-idx-item[data-expanded="true"] .idx-expanded-inner {
  padding-top: var(--sp-1);
  padding-bottom: var(--sp-5);
}
.svc-index .idx-desc {
  font-size: var(--fs-14);
  color: var(--muted);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0 0 var(--sp-4);
}
.svc-index .idx-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bright-red);
  text-decoration: none;
  transition: gap 260ms var(--ease-out);
}
.svc-index .idx-cta:hover { gap: 12px; }
.svc-index .idx-cta .arrow { transition: transform 260ms var(--ease-out); }
.svc-index .idx-cta:hover .arrow { transform: translateX(2px); }

/* Mobile — tighter grid, smaller toggle mark */
@media (max-width: 560px) {
  .svc-index .idx-summary {
    grid-template-columns: 32px 1fr 22px;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-2);
  }
  .svc-index .idx-expanded-inner {
    padding-left: calc(32px + var(--sp-3) + var(--sp-2));
    padding-right: calc(22px + var(--sp-2));
  }
  .svc-index .idx-toggle-mark { width: 12px; height: 12px; }
}

/* =========================================================
   Editorial pillars row — hairline-separated, no cards
   ========================================================= */
.editorial-row {
  padding: var(--sp-9) 0 var(--sp-10);
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}
.ed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.ed-item {
  padding: var(--sp-5) var(--sp-6) var(--sp-3);
  border-left: 1px solid var(--line);
  position: relative;
}
.ed-item:first-child { border-left: 0; padding-left: 0; }
.ed-item:last-child { padding-right: 0; }
.ed-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--sp-6);
  width: 48px;
  height: 1px;
  background: var(--bright-red);
}
.ed-item:first-child::before { left: 0; }
.ed-n {
  font-family: var(--font-sans);
  font-size: clamp(48px, 5.5vw, 72px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--deep-ocean);
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.ed-n .pct { color: var(--bright-red); font-size: 0.55em; vertical-align: super; margin-left: 2px; }
.ed-label {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--sp-3);
}
.ed-item p {
  font-size: var(--fs-14);
  color: var(--muted);
  line-height: 1.55;
  max-width: 32ch;
}

/* Legacy .svc-preview / .svc-item block removed — superseded by .svc-split (feature + index) */

/* =========================================================
   About page — editorial restructure
   ========================================================= */
.about-who { padding: var(--sp-9) 0; }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--sp-9);
  align-items: start;
}
.about-aside { position: sticky; top: 120px; }
.about-aside h2 { margin-bottom: 0; }
.about-body p {
  font-size: var(--fs-17);
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: var(--sp-5);
  max-width: 62ch;
}
.about-body p:last-child { margin-bottom: 0; }

/* ============ Leadership — editorial principal list ============ */
.about-leadership {
  padding: var(--sp-9) 0;
  background: #fff;
  border-top: 1px solid var(--line);
}
.about-leadership .section-head { margin-bottom: var(--sp-7); }

.leadership-list {
  list-style: none;
  border-top: 1px solid var(--line);
}
.principal {
  display: grid;
  grid-template-columns: 64px 1fr 240px;
  column-gap: var(--sp-7);
  row-gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-4);
  margin: 0 calc(var(--sp-4) * -1);
  border-bottom: 1px solid var(--line);
  align-items: start;
  position: relative;
  border-radius: 2px;
  transition: background-color 320ms var(--ease-out);
}
/* Projects category list — neutralise the inherited list border-top and the
   base .principal { border-bottom } so the accordion variant controls its
   own hairlines (avoids doubled rules between adjacent rows). */
.projects-cat-list { border-top: 0; }
.projects-cat-list .principal { border-bottom: 0; padding: 0; margin: 0; }

/* =========================================================
   Principal — ACCORDION variant (Projects capability areas)
   Each row is a capability module: number lockup · title · descriptor ·
   schematic thumb · +/- control. Open state expands into a two-column
   content panel with a framed technical drawing.
   ========================================================= */
.principal--accordion {
  display: block;
  padding: 0;
  margin: 0;
  border-radius: 2px;
  position: relative;
  border-top: 1px solid var(--line);
  /* Deep-link target offset so the row sits below the sticky nav. */
  scroll-margin-top: 112px;
  transition: background-color 320ms var(--ease-out);
}
.principal--accordion:last-child { border-bottom: 1px solid var(--line); }
.principal--accordion::after {
  /* Hairline that animates from line-tone to faint red on hover/open.
     Sits on the row's top edge to read as a technical division. */
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--bright-red);
  opacity: 0;
  transform-origin: left;
  transform: scaleX(0);
  transition:
    transform 520ms var(--ease-out),
    opacity 320ms var(--ease-out);
  pointer-events: none;
}
.principal--accordion:hover::after,
.principal--accordion[data-expanded="true"]::after {
  opacity: 0.85;
  transform: scaleX(1);
}
@media (max-width: 720px) {
  .principal--accordion { scroll-margin-top: 88px; }
}

/* Summary row — the clickable header for each category */
.principal--accordion .pr-summary {
  display: grid;
  /* num · body · thumb · toggle */
  grid-template-columns: 72px minmax(0, 1fr) 132px 56px;
  column-gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6) var(--sp-4);
  margin: 0 calc(var(--sp-4) * -1);
  cursor: pointer;
  border-radius: 2px;
  position: relative;
  transition: background-color 320ms var(--ease-out);
}
.principal--accordion .pr-summary:hover {
  background-color: rgba(49, 15, 160, 0.025);
}
.principal--accordion[data-expanded="true"] .pr-summary {
  background-color: rgba(49, 15, 160, 0.03);
}
.principal--accordion .pr-summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(218, 12, 9, 0.32);
}

/* Number lockup — small red tick above, deep-ocean numeral */
.principal--accordion .pr-num {
  position: relative;
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--deep-ocean);
  font-variant-numeric: tabular-nums;
  padding-top: var(--sp-3);
  align-self: start;
  margin-top: 2px;
  transition: color 320ms var(--ease-out), transform 320ms var(--ease-out);
}
/* Red tick above the number lockup intentionally hidden — keeps the row
   compact and avoids competing red accents with the +/- toggle. Markup
   preserved so it can be restored by simply removing this display:none. */
.principal--accordion .pr-num::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 16px;
  height: 1px;
  background: var(--bright-red);
  opacity: 0.7;
  transition: width 360ms var(--ease-out), opacity 320ms var(--ease-out);
  display: none;
}
/* Number stays in --deep-ocean across all states. Previously it shifted
   to --ink on hover/expanded, which read as "going black" because the
   step from a saturated indigo (deep-ocean) to a near-black indigo
   (ink) is jarring. The background tint + toggle ring already signal
   the interactive state — no colour change needed on the number. */
.principal--accordion:hover .pr-num::before,
.principal--accordion[data-expanded="true"] .pr-num::before {
  width: 28px;
  opacity: 1;
}

/* Body column — title + descriptor */
.principal--accordion .pr-body { max-width: none; }
.principal--accordion .pr-header { margin-bottom: 0; }
.principal--accordion .pr-name {
  font-size: var(--fs-24);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-2);
  color: var(--deep-ocean);
  transition: color 320ms var(--ease-out);
}
/* Title stays in --deep-ocean across all states. Hover state is conveyed
   by the row's background tint + the toggle ring; no need to dim the
   title's colour (which previously stepped to --ink and read as black). */
.principal--accordion .pr-role {
  font-size: var(--fs-15);
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
}
.principal--accordion .pr-role::before {
  /* Suppress the inherited red dot — the number lockup carries the accent. */
  display: none;
}

/* Closed-state thumb — square schematic, clean technical frame */
.principal--accordion .pr-thumb {
  width: 112px;
  height: 112px;
  margin: 0;
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  position: relative;
  opacity: 1;
  transition:
    border-color 360ms var(--ease-out),
    transform 360ms var(--ease-out),
    opacity 320ms var(--ease-out);
}
/* When the row is open, the larger framed schematic in the open panel takes
   over visually — fade the closed-row thumb out so we never read as a
   double-up. Fades back in on close. */
.principal--accordion[data-expanded="true"] .pr-thumb {
  opacity: 0;
  pointer-events: none;
}
.principal--accordion .pr-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: saturate(0.92);
  transition: transform 480ms var(--ease-out), filter 360ms var(--ease-out);
}
.principal--accordion:hover .pr-thumb {
  border-color: rgba(49, 15, 160, 0.22);
  transform: translateY(-1px);
}
.principal--accordion:hover .pr-thumb img {
  transform: scale(1.03);
  filter: saturate(1);
}
.principal--accordion[data-expanded="true"] .pr-thumb {
  border-color: rgba(218, 12, 9, 0.35);
}

/* Toggle control — clean +/- inside a hit area, framed only on hover/open */
.pr-toggle-mark {
  display: inline-flex;
  position: relative;
  width: 40px;
  height: 40px;
  justify-self: end;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  transition:
    border-color 320ms var(--ease-out),
    background-color 320ms var(--ease-out);
}
.principal--accordion:hover .pr-toggle-mark {
  border-color: rgba(218, 12, 9, 0.42);
  background-color: rgba(255, 255, 255, 0.6);
}
.principal--accordion[data-expanded="true"] .pr-toggle-mark {
  border-color: var(--bright-red);
  background-color: rgba(218, 12, 9, 0.06);
}
.pr-toggle-mark::before,
.pr-toggle-mark::after {
  content: '';
  position: absolute;
  background: var(--bright-red);
  transition: transform 320ms var(--ease-out), opacity 260ms var(--ease-out);
}
.pr-toggle-mark::before {
  top: 50%; left: 12px; right: 12px;
  height: 1.5px;
  transform: translateY(-50%);
}
.pr-toggle-mark::after {
  left: 50%; top: 12px; bottom: 12px;
  width: 1.5px;
  transform: translateX(-50%);
  transform-origin: center;
}
.principal--accordion[data-expanded="true"] .pr-toggle-mark::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

/* Tag chip lists kept in DOM for SEO + restore. Hidden visually. */
.principal--accordion .pr-tags {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

/* ==================== OPEN PANEL ====================
   Two-column content panel: measured copy left, framed schematic right.
   Subtle paper-tinted background + red left accent rule. */
.principal--accordion .pr-expanded {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--ease-out);
  margin: 0 calc(var(--sp-4) * -1);
}
.principal--accordion .pr-expanded-inner {
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  column-gap: var(--sp-7);
  align-items: start;
  padding-left: calc(72px + var(--sp-6));
  padding-right: calc(56px + var(--sp-5));
  background-color: rgba(49, 15, 160, 0.025);
  opacity: 0;
  transition: opacity 360ms var(--ease-out) 80ms;
}
.principal--accordion .pr-expanded-inner::before {
  /* Animated red left accent rule — 1 px to match every other hairline
     used in the design system (number tick, frame cropmarks, capability
     focus separator). Avoids the "lines of different thicknesses" feel. */
  content: '';
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-5);
  bottom: var(--sp-6);
  width: 1px;
  background: var(--bright-red);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 560ms var(--ease-out) 100ms;
}
.principal--accordion[data-expanded="true"] .pr-expanded {
  grid-template-rows: 1fr;
}
.principal--accordion[data-expanded="true"] .pr-expanded-inner {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-7);
  opacity: 1;
}
.principal--accordion[data-expanded="true"] .pr-expanded-inner::before {
  transform: scaleY(1);
}

/* Open content — measured editorial copy column. Section gap (sp-5) gives
   a clean break between the body paragraph and the Capability focus block
   without leaving them feeling disconnected. */
.pr-expanded-copy {
  max-width: 60ch;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.principal--accordion .pr-expanded-copy .pr-authority {
  margin: 0;
  font-size: var(--fs-17);
  line-height: 1.7;
  color: rgba(14, 9, 51, 0.84);
  letter-spacing: -0.003em;
}
.principal--accordion .pr-expanded-copy .pr-tags { margin: 0; }

/* Capability focus — compact specification-style list under the open
   paragraph. A faint hairline separator above the label ties the block
   to the paragraph as one editorial unit. No per-item dashes — clean
   two-column typography does the work and removes a competing red
   accent against the open-panel left rule and frame cropmarks. */
.pr-capfocus {
  margin: 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.pr-capfocus-label {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bright-red);
  margin: 0 0 var(--sp-3);
  line-height: 1.2;
}
.pr-capfocus-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-6);
  row-gap: var(--sp-1);
  max-width: 56ch;
}
.pr-capfocus-list li {
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--deep-ocean);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Single column at narrow widths so the two-column layout never crushes
   longer items like "Trade Studies / Analysis of Alternatives". */
@media (max-width: 760px) {
  .pr-capfocus-list { grid-template-columns: 1fr; }
}

/* Framed schematic — technical drawing with corner cropmarks */
.pr-frame {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  border-radius: 3px;
  /* Faint blueprint-style ground tint behind the artwork */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(49, 15, 160, 0.025) 0%, rgba(49, 15, 160, 0) 65%);
}
.pr-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: saturate(0.95);
}
/* Four corner cropmarks — hairline red ticks for a technical-drawing feel */
.pr-frame::before,
.pr-frame::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
}
.pr-frame::before {
  top: -1px; left: -1px;
  border-top: 1px solid var(--bright-red);
  border-left: 1px solid var(--bright-red);
}
.pr-frame::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--bright-red);
  border-right: 1px solid var(--bright-red);
}
.pr-frame > .pr-frame-corner-tr,
.pr-frame > .pr-frame-corner-bl { display: none; } /* reserved for future symmetric ticks if needed */

/* Disable the default principal::before tick — accordion carries its own */
.principal--accordion::before { display: none !important; }
.principal--accordion:hover { background-color: transparent; }

/* ==================== RESPONSIVE ==================== */
/* Tablet: tighten thumb and column gaps; keep two-column open panel until
   the inner panel runs out of room. */
@media (max-width: 960px) {
  .principal--accordion .pr-summary {
    grid-template-columns: 64px minmax(0, 1fr) 96px 44px;
    column-gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-4);
  }
  .principal--accordion .pr-thumb { width: 96px; height: 96px; padding: 5px; }
  .principal--accordion .pr-name { font-size: var(--fs-20); }
  .principal--accordion .pr-expanded-inner {
    grid-template-columns: minmax(0, 1fr) 220px;
    column-gap: var(--sp-6);
    padding-left: calc(64px + var(--sp-5));
    padding-right: calc(44px + var(--sp-4));
  }
  .pr-toggle-mark { width: 36px; height: 36px; }
  .pr-toggle-mark::before { left: 10px; right: 10px; }
  .pr-toggle-mark::after { top: 10px; bottom: 10px; }
}

/* Below 760: open panel stacks. Frame moves under the copy.
   Thumb shrinks but stays present so the row scans like a deck of cards. */
@media (max-width: 760px) {
  .principal--accordion .pr-summary {
    /* 3-column grid: num | body | thumb. Toggle is absolutely positioned
       (see below) so it doesn't need its own column. Right-padding
       reserves space for the toggle. */
    grid-template-columns: 52px minmax(0, 1fr) 72px;
    column-gap: var(--sp-4);
    padding: var(--sp-5) 56px var(--sp-5) var(--sp-3);
  }
  .principal--accordion .pr-thumb { width: 72px; height: 72px; padding: 4px; }
  .principal--accordion .pr-name { font-size: var(--fs-18); }
  .principal--accordion .pr-role { font-size: var(--fs-14); }
  /* Stack the descriptor BELOW the title at narrow widths so every row
     reads identically. Without this, short descriptors (e.g. "Frigates &
     destroyers") stay inline with the title while longer ones wrap,
     giving the list an uneven rhythm. */
  .principal--accordion .pr-header {
    flex-direction: column;
    align-items: flex-start;
    column-gap: 0;
    row-gap: 4px;
  }
  /* The dot separator before .pr-role is meant to sit between two inline
     items; it reads as orphaned punctuation when the descriptor is on its
     own line, so hide it in this stacked layout. */
  .principal--accordion .pr-role::before { display: none; }
  /* Vertically centre the +/- toggle within the row at narrow widths so it
     aligns with the title text rather than sitting at the top next to the
     number. Switching to absolute positioning sidesteps a grid quirk where
     align-items: center wasn't seating the toggle at the row's vertical
     centre. */
  .principal--accordion .pr-summary { position: relative; }
  .principal--accordion .pr-toggle-mark {
    position: absolute;
    top: 50%;
    right: var(--sp-3);
    transform: translateY(-50%);
    /* The toggle no longer needs to participate in the grid since it's
       absolutely positioned. */
    justify-self: auto;
  }
  .principal--accordion .pr-expanded-inner {
    grid-template-columns: 1fr;
    row-gap: var(--sp-5);
    padding-left: calc(52px + var(--sp-4));
    padding-right: var(--sp-4);
  }
  .pr-frame { max-width: 320px; }
}

/* Phone: hide closed-row thumb so the title and descriptor breathe.
   Open-panel frame appears full-width above the copy, restoring the
   visual without the cramped collapsed-row image. */
@media (max-width: 520px) {
  .principal--accordion .pr-summary {
    /* Phone: 2-column (num | body) since the thumb is hidden and the
       toggle is absolutely positioned. Right padding reserves space for
       the absolute-positioned toggle. */
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: var(--sp-3);
    padding: var(--sp-4) 44px var(--sp-4) var(--sp-3);
  }
  .principal--accordion .pr-thumb { display: none; }
  .principal--accordion .pr-expanded-inner {
    padding-left: calc(40px + var(--sp-3));
    padding-right: var(--sp-3);
    row-gap: var(--sp-4);
  }
  /* Place the schematic ABOVE the copy on phone so it's seen first. */
  .principal--accordion .pr-expanded-inner { grid-template-rows: auto auto; }
  .principal--accordion .pr-expanded-copy { order: 2; }
  .principal--accordion .pr-frame { order: 1; max-width: 240px; }
  .principal--accordion .pr-num { font-size: var(--fs-12); }
  .principal--accordion .pr-num::before { width: 12px; }
  .principal--accordion:hover .pr-num::before,
  .principal--accordion[data-expanded="true"] .pr-num::before { width: 18px; }
  .principal--accordion .pr-name { font-size: var(--fs-17); margin-bottom: var(--sp-1); }
  .principal--accordion .pr-role { font-size: var(--fs-13); }
  .pr-toggle-mark { width: 32px; height: 32px; }
  .pr-toggle-mark::before { left: 9px; right: 9px; }
  .pr-toggle-mark::after  { top: 9px;  bottom: 9px; }
}

/* Decorative tick sits above the number as a clean editorial lockup.
   10px matches the canonical red bullet-strike used across .svc-key,
   .lc-activity, .lc-outputs, .engagement-card — single visual vocabulary. */
.principal::before {
  content: '';
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-7);
  width: 10px;
  height: 1px;
  background: var(--bright-red);
  opacity: 0.55;
  transition: opacity 320ms var(--ease-out), width 320ms var(--ease-out);
}
.principal:hover {
  background-color: rgba(162, 218, 224, 0.06);
}
.principal:hover::before {
  opacity: 1;
  width: 16px;
}

.pr-num {
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--bright-red);
  font-variant-numeric: tabular-nums;
  padding-top: var(--sp-3);
}

.pr-body { max-width: 720px; }

/* Portrait — initials fallback + image-ready (swap span for <img>) */
.pr-portrait {
  width: 240px;
  height: 240px;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 10px 0 0;
  position: relative;
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
  transition:
    border-color 280ms var(--ease-out),
    box-shadow 320ms var(--ease-out);
}
/* Engineering-drawing tick in the top-left corner — signals "draft plate" */
.pr-portrait::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--line-2);
  border-left: 1px solid var(--line-2);
  pointer-events: none;
  transition: border-color 320ms var(--ease-out);
}
/* Mirror tick in the bottom-right — appears only on row hover (quiet completion) */
.pr-portrait::after {
  content: '';
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 7px;
  height: 7px;
  border-bottom: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  opacity: 0;
  transition: opacity 320ms var(--ease-out), border-color 320ms var(--ease-out);
  pointer-events: none;
}
.principal:hover .pr-portrait {
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}
.principal:hover .pr-portrait::before {
  border-color: var(--muted-2);
}
.principal:hover .pr-portrait::after {
  opacity: 1;
  border-color: var(--muted-2);
}
.pr-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Photo-framed variant — slightly firmer frame than the initials placeholder */
.pr-portrait--photo {
  background: var(--bg-soft);
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}
.pr-portrait--photo::before,
.pr-portrait--photo::after {
  border-color: rgba(255, 255, 255, 0.7);
  mix-blend-mode: overlay;
}
.principal:hover .pr-portrait--photo {
  border-color: var(--deep-ocean);
  box-shadow: var(--shadow-md);
}
.principal:hover .pr-portrait--photo::before,
.principal:hover .pr-portrait--photo::after {
  border-color: rgba(255, 255, 255, 0.9);
}
.pr-portrait--photo img {
  transition: transform 560ms var(--ease-out);
}
.principal:hover .pr-portrait--photo img {
  transform: scale(1.03);
}
.pr-initials {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 600;
  color: var(--deep-ocean);
  letter-spacing: 0.06em;
  opacity: 0.78;
  transition: opacity 280ms var(--ease-out);
}
.principal:hover .pr-initials {
  opacity: 1;
}

.pr-header {
  display: flex;
  align-items: baseline;
  column-gap: var(--sp-4);
  row-gap: 2px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.pr-name {
  font-size: var(--fs-24);
  font-weight: 700;
  color: var(--deep-ocean);
  letter-spacing: -0.01em;
  margin: 0;
  text-transform: none;
  line-height: 1.2;
}
.pr-role {
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  line-height: 1.4;
}
.pr-role::before {
  content: '·';
  color: var(--line-2);
  margin-right: var(--sp-3);
  font-weight: 400;
}

.pr-authority {
  font-size: var(--fs-17);
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 var(--sp-4);
  max-width: 62ch;
  font-weight: 500;
}
.pr-bio {
  font-size: var(--fs-15);
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 var(--sp-4);
  max-width: 62ch;
}

.pr-tags {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
}
.pr-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.4;
  white-space: nowrap;
}

/* Optional LinkedIn / profile link — inline with chip row, separated by a hairline */
.pr-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep-ocean);
  padding: 5px 0 5px 12px;
  margin-left: 4px;
  border-left: 1px solid var(--line);
  text-decoration: none;
  position: relative;
  transition: color 200ms var(--ease-out);
}
.pr-link .pr-link-arrow {
  display: inline-block;
  transition: transform 220ms var(--ease-out);
}
.pr-link:hover { color: var(--bright-red); }
.pr-link:hover .pr-link-arrow { transform: translateX(3px); }
.pr-link::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--bright-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}
.pr-link:hover::after { transform: scaleX(1); }

@media (max-width: 1024px) {
  .principal {
    grid-template-columns: 64px 1fr;
    column-gap: var(--sp-5);
    row-gap: var(--sp-4);
  }
  .pr-num { grid-column: 1; grid-row: 1; }
  .pr-body { grid-column: 1 / -1; grid-row: 2; }
  .pr-portrait {
    grid-column: 2;
    grid-row: 1;
    width: 128px;
    height: 128px;
    margin-top: 0;
    justify-self: flex-start;
  }
  .pr-initials { font-size: 22px; }
}

/* Stacked card layout — mobile + portrait-tablet (anything below ~small-laptop).
   Explicit margins (not uniform grid-gap) so the rhythm reads:
     portrait →24px→ "01" →12px→ name (tight number-to-heading lockup).
   NOTE: Does not apply to .principal--accordion — that variant uses its own
   compact single-row layout at all widths. */
@media (max-width: 900px) {
  .principal:not(.principal--accordion) {
    grid-template-columns: 1fr;
    row-gap: 0;
    padding: var(--sp-7) 0;
    /* Reset the -16px horizontal bleed that the 3-column desktop layout uses —
       on mobile it cancels the container's 16px gutter and pushes text to the
       viewport edge. Cards sit cleanly inside the container here. */
    margin: 0;
  }
  /* Bigger portrait — reads as a proper anchor image rather than a stamp
     lost next to the text block. Matches the card's visual weight.
     Scoped to :not(.principal--accordion) so the accordion variant keeps
     its own compact single-row grid at mobile too. */
  .principal:not(.principal--accordion) .pr-portrait {
    grid-column: 1;
    grid-row: auto;
    width: 200px;
    height: 200px;
    order: 0;
    margin: 0 0 var(--sp-5) 0;  /* 24px below portrait */
    justify-self: flex-start;
  }
  .principal:not(.principal--accordion) .pr-num {
    grid-column: 1;
    grid-row: auto;
    padding-top: 0;
    order: 1;
    font-size: var(--fs-13);
    margin: 0 0 var(--sp-3) 0;  /* 12px below "01" → heading lockup */
  }
  .principal:not(.principal--accordion) .pr-body { grid-column: 1; grid-row: auto; order: 2; margin: 0; }
  .principal:not(.principal--accordion) .pr-header { gap: var(--sp-2); flex-direction: column; align-items: flex-start; margin-bottom: var(--sp-4); }
  .principal:not(.principal--accordion) .pr-role::before { display: none; }
  .principal:not(.principal--accordion) .pr-initials { font-size: 40px; }
  /* Tighten the bio rhythm so the text block balances the bigger portrait */
  .principal:not(.principal--accordion) .pr-authority { font-size: var(--fs-16); line-height: 1.6; margin-bottom: var(--sp-4); }
  .principal:not(.principal--accordion) .pr-bio       { font-size: var(--fs-14); line-height: 1.6; margin-bottom: var(--sp-5); }
  .principal:not(.principal--accordion) .pr-tags      { gap: var(--sp-2); }
  /* Decorative red tick would overlap the portrait image in stacked layout */
  .principal:not(.principal--accordion)::before { display: none; }
}

/* ============ Team — supporting engineers, 4-up grid below leadership ============ */
.about-team {
  padding: var(--sp-9) 0;
  background: #fff;
  border-top: 1px solid var(--line);
}
.about-team .section-head { margin-bottom: var(--sp-7); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-7);
  list-style: none;
  margin: 0;
  padding: 0;
}
.team-card { display: flex; flex-direction: column; }
.team-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 var(--sp-4);
  background: var(--bg-soft);
}
.team-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Placeholder while real headshots aren't yet supplied */
.team-portrait--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
  background: #f6f6fb;
  color: #9aa1b8;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.team-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}
.team-role {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
}
.team-bio {
  margin: var(--sp-3) 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #4b5566;
}

/* Extended team — denser directory below the featured 4 */
.team-extended-head {
  max-width: 720px;
  margin: var(--sp-9) 0 var(--sp-6);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line);
}
.team-extended-head .section-label { display: block; margin-bottom: var(--sp-3); }
.team-extended-lede {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #4b5566;
}
.team-grid--compact {
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-5);
}
.team-card--compact .team-portrait { margin-bottom: var(--sp-3); border-radius: 10px; }
.team-card--compact .team-name { font-size: 15px; font-weight: 600; }
.team-card--compact .team-role { font-size: 10px; margin-top: 2px; }
.team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
}
.team-tag {
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4b5566;
  white-space: nowrap;
}

/* Extra cards revealed by the View more toggle */
.team-card--extra { display: none; }
.team-grid--expanded .team-card--extra {
  display: flex;
  animation: teamCardFadeIn 320ms ease both;
}
@keyframes teamCardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .team-grid--expanded .team-card--extra { animation: none; }
}

/* Toggle button */
.team-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-7);
}
.team-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.team-toggle .arrow {
  display: inline-block;
  transition: transform 220ms ease;
}
.team-toggle:hover,
.team-toggle:focus-visible {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  outline: none;
}
.team-toggle[aria-expanded="true"] .arrow { transform: rotate(90deg); }

@media (max-width: 1200px) {
  .team-grid--compact { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 960px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
}
@media (max-width: 720px) {
  .team-grid--compact { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .team-grid--compact { grid-template-columns: repeat(2, 1fr); }
}

.about-accred {
  padding: var(--sp-10) 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* About — Memberships row (below Accreditations) */
.memberships {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.memberships-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
  white-space: nowrap;
}
.memberships-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px var(--sp-5);
  padding: 0;
  margin: 0;
}
.memberships-list li {
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--deep-ocean);
  position: relative;
}
.memberships-list li + li::before {
  content: '·';
  color: var(--line-2);
  margin-right: var(--sp-5);
  font-weight: 400;
  position: absolute;
  left: calc(-1 * var(--sp-5) - 4px);
}
@media (max-width: 720px) {
  .memberships { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .memberships-list { gap: 8px var(--sp-4); }
  .memberships-list li + li::before { left: calc(-1 * var(--sp-4) - 2px); margin-right: var(--sp-4); }
}

/* Markets — "Where we operate" — one shared grid so rows align across columns */
.markets-where { padding: var(--sp-9) 0; background: #fff; }
.markets-env-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-8);
  row-gap: 0;
  margin-top: var(--sp-7);
  border-top: 1px solid var(--line);
}

/* Column headers (Defence / Commercial) */
.markets-env-header {
  padding: var(--sp-7) 0 var(--sp-6);
  position: relative;
}
.markets-env-header::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 1px;
  background: var(--bright-red);
}
.markets-env-label {
  display: block;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--bright-red);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.markets-env-header h3 {
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--deep-ocean);
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-3);
}
.markets-env-header .markets-env-intro {
  font-size: var(--fs-15);
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  max-width: 44ch;
}

/* Rows — each pair of rows sits on the same grid row, so heights match automatically */
.me-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: var(--sp-4) var(--sp-3) var(--sp-4) 0;
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: padding-left 280ms var(--ease-out), background-color 280ms var(--ease-out);
}
.me-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 0;
  width: 2px;
  background: var(--bright-red);
  transform: translateY(-50%);
  transition: height 360ms var(--ease-out);
}
.me-row:hover {
  padding-left: var(--sp-3);
  background-color: rgba(162, 218, 224, 0.06);
}
.me-row:hover::before { height: 60%; }
.me-cat {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--deep-ocean);
  letter-spacing: -0.005em;
  transition: color 240ms var(--ease-out);
}
.me-row:hover .me-cat { color: var(--bright-red); }
.me-detail {
  font-size: var(--fs-13);
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 900px) {
  /* On mobile: stack as a single column, but keep Defence group first, then Commercial group */
  .markets-env-grid { display: flex; flex-direction: column; border-top: 0; margin-top: var(--sp-6); }
  .markets-env-grid > :nth-child(odd) { order: 1; }   /* Defence header + Defence rows */
  .markets-env-grid > :nth-child(even) { order: 2; }  /* Commercial header + Commercial rows */
  .markets-env-header { padding: var(--sp-6) 0 var(--sp-4); border-top: 1px solid var(--line); }
  .markets-env-grid > .markets-env-header:first-of-type { border-top: 0; padding-top: 0; }
  .markets-env-header::before { top: 0; }
  .me-row { padding-right: 0; }
}

/* Markets — bridge to services */
.markets-bridge { padding: var(--sp-8) 0; background: var(--bg-soft); border-top: 1px solid var(--line); }
.markets-bridge .section-head { margin-bottom: var(--sp-5); }
.markets-bridge-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep-ocean);
  padding: var(--sp-2) 0;
  min-height: 44px;
  position: relative;
  transition: color 200ms var(--ease-out);
}
.markets-bridge-cta::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: var(--deep-ocean);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--ease-out);
}
.markets-bridge-cta:hover::after { transform: scaleX(1); transform-origin: left; }
.markets-bridge-cta:hover { color: var(--bright-red); }
.markets-bridge-cta .arrow { transition: transform 220ms var(--ease-out); }
.markets-bridge-cta:hover .arrow { transform: translateX(3px); }

/* Approach — Governance affiliations row */
.governance-memberships {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(162, 218, 224, 0.10);
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.gov-mem-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(162, 218, 224, 0.55);
  font-weight: 600;
  white-space: nowrap;
}
.gov-mem-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--sp-5);
  padding: 0;
  margin: 0;
}
.gov-mem-list li {
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.88);
  position: relative;
}
.gov-mem-list li + li::before {
  content: '·';
  color: rgba(162, 218, 224, 0.35);
  margin-right: var(--sp-5);
  font-weight: 400;
  position: absolute;
  left: calc(-1 * var(--sp-5) - 4px);
}
@media (max-width: 720px) {
  .governance-memberships { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .gov-mem-list { gap: 8px var(--sp-4); }
  .gov-mem-list li + li::before { left: calc(-1 * var(--sp-4) - 2px); margin-right: var(--sp-4); }
}
.about-cta-section { padding: var(--sp-10) 0; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .about-aside { position: static; }
  .about-who, .about-team, .about-accred, .about-cta-section { padding: var(--sp-8) 0; }
}

/* =========================================================
   Approach page — lifecycle list + engagement models + governance
   ========================================================= */
.approach-lifecycle { padding: var(--sp-9) 0; }
.lifecycle-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.lifecycle-list li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--sp-7);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: padding-left 240ms var(--ease-out);
  position: relative;
}
.lifecycle-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--bright-red);
  transform: translateY(-50%);
  transition: width 320ms var(--ease-out);
}
.lifecycle-list li:hover { padding-left: 20px; }
.lifecycle-list li:hover::before { width: 12px; }
.lifecycle-list .lc-num {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--bright-red);
  font-variant-numeric: tabular-nums;
}
.lifecycle-list h3 {
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--deep-ocean);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.lifecycle-list p {
  font-size: var(--fs-15);
  color: var(--muted);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0;
}

.approach-engagement {
  padding: var(--sp-10) 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* =========================================================
   Approach — Lifecycle journey (horizontal stepper + tabpanel)
   Distinct interaction from Services; sequential, one-active.
   ========================================================= */
.lc-journey { margin-top: var(--sp-7); }

.lc-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
  padding: var(--sp-6) 0 var(--sp-5);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-7);
}
/* connector rail running through all dot centers */
.lc-stepper::before {
  content: '';
  position: absolute;
  left: 11px; right: 11px;
  top: calc(var(--sp-6) + 10px);
  height: 1px;
  background: var(--line-2);
  z-index: 0;
}
/* progress rail — fills from dot 1 to the active dot */
.lc-stepper::after {
  content: '';
  position: absolute;
  left: 11px;
  top: calc(var(--sp-6) + 10px);
  height: 1px;
  width: calc((100% - 22px) * var(--lc-progress, 0));
  background: var(--bright-red);
  z-index: 0;
  transition: width 420ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .lc-stepper::after { transition: none; }
}

.lc-step {
  flex: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 var(--sp-4) 0 0;
  font: inherit;
  color: inherit;
  text-align: left;
  position: relative;
  transition: opacity 220ms var(--ease-out);
  opacity: 0.55;
}
.lc-step:last-child { padding-right: 0; }
.lc-step:hover { opacity: 0.85; }
.lc-step[aria-selected="true"] { opacity: 1; }
.lc-step:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(218, 12, 9, 0.18);
  border-radius: var(--r-4);
}

.lc-step-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  background: #fff;
  z-index: 1;
  margin-bottom: var(--sp-4);
  position: relative;
  transition: border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.lc-step-dot::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--bright-red);
  transform: scale(0);
  transition: transform 320ms var(--ease-out);
}
.lc-step:hover .lc-step-dot { border-color: var(--muted-2); }
.lc-step[aria-selected="true"] .lc-step-dot {
  border-color: var(--bright-red);
  box-shadow: 0 0 0 4px rgba(218, 12, 9, 0.08);
}
.lc-step[aria-selected="true"] .lc-step-dot::after { transform: scale(1); }

.lc-step-num {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--bright-red);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.lc-step-title {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
  letter-spacing: -0.005em;
  max-width: 18ch;
}
.lc-step[aria-selected="true"] .lc-step-title {
  color: var(--deep-ocean);
  font-weight: 700;
}

/* PANELS */
.lc-panels { position: relative; }
.lc-panel { display: block; }
.lc-panel[hidden] { display: none; }
.lc-panel--active .lc-panel-inner {
  animation: lcPanelIn 480ms var(--ease-out);
}
@keyframes lcPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lc-panel-heading {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.lc-panel-num {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bright-red);
  font-variant-numeric: tabular-nums;
}
.lc-panel-title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--deep-ocean);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.lc-panel-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--sp-8);
  align-items: start;
}

.lc-panel-body .lc-panel-lead {
  font-size: var(--fs-17);
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0 0 var(--sp-5);
  max-width: 62ch;
  font-weight: 500;
}
.lc-sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bright-red);
  margin: 0 0 var(--sp-3);
}
.lc-activity {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px var(--sp-6);
  padding: var(--sp-3) 0 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.lc-activity li {
  font-size: var(--fs-14);
  color: var(--ink-2);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.lc-activity li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 1px;
  background: var(--bright-red);
}

.lc-outputs {
  padding: 0 0 0 var(--sp-5);
  border-left: 1px solid var(--line);
  align-self: start;
}
.lc-outputs-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: block;
  margin-bottom: var(--sp-3);
}
.lc-outputs ul {
  list-style: none;
  padding: var(--sp-3) 0 0;
  margin: 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lc-outputs li {
  font-size: var(--fs-13);
  color: var(--ink-2);
  font-weight: 500;
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.lc-outputs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 1px;
  background: var(--bright-red);
}

/* Lifecycle responsive — stepper stacks vertically on mobile */
@media (max-width: 960px) {
  .lc-stepper {
    flex-direction: column;
    padding: var(--sp-4) 0 0;
    border-bottom: 0;
    margin-bottom: var(--sp-6);
    gap: 0;
  }
  .lc-stepper::before {
    left: 10px;
    right: auto;
    top: 32px;
    bottom: 16px;
    width: 1px;
    height: auto;
  }
  /* Progress rail flips to vertical too — fills DOWN from the top dot to
     the active one. Mirrors ::before geometry; height scales with the
     --lc-progress CSS variable set by site.js. Previously this rule wasn't
     overridden, so the horizontal-mode width: calc() bled across the top
     of the stacked layout as a stray red line. */
  .lc-stepper::after {
    left: 10px;
    top: 32px;
    width: 1px;
    height: calc((100% - 48px) * var(--lc-progress, 0));
    transition: height 420ms var(--ease-out);
  }
  .lc-step {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    padding: var(--sp-4) 0;
    gap: var(--sp-4);
  }
  /* Remove per-step border lines in vertical mode — the dots + active rail
     already carry the rhythm; row borders read as noise. */
  .lc-step:last-child { border-bottom: 0; }
  .lc-step-num { min-width: 24px; }
  .lc-step-dot { margin-bottom: 0; flex-shrink: 0; }
  .lc-step-title { max-width: none; }
  .lc-panel-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .lc-outputs {
    padding: var(--sp-4) 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* =========================================================
   Approach — Engagement models: three static comparison columns
   Distinct from Services (no expand/collapse) and Lifecycle (no tabs).
   ========================================================= */
.eng-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: var(--sp-7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.eng-col {
  padding: var(--sp-7) var(--sp-6);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  background: #fff;
  position: relative;
  transition: background-color 280ms var(--ease-out);
}
.eng-col:first-child { border-left: 0; }
.eng-col::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--bright-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms var(--ease-out);
}
.eng-col:hover { background: rgba(255, 255, 255, 0.7); }
.eng-col:hover::before { transform: scaleX(1); }

.eng-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.eng-num {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--bright-red);
  font-variant-numeric: tabular-nums;
}
.eng-title {
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 800;
  color: var(--deep-ocean);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
}

.eng-lead {
  font-size: var(--fs-15);
  color: var(--ink-2);
  line-height: 1.6;
  font-weight: 500;
  margin: 0;
}

.eng-sub {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bright-red);
  font-weight: 700;
  margin: 0 0 var(--sp-3);
}
.eng-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eng-section li {
  font-size: var(--fs-13);
  color: var(--muted);
  padding-left: 14px;
  position: relative;
  line-height: 1.55;
}
.eng-section li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 1px;
  background: var(--line-2);
}

.eng-footer {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.eng-footer-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.eng-footer-value {
  font-size: var(--fs-14);
  color: var(--deep-ocean);
  font-weight: 700;
  letter-spacing: -0.005em;
}

@media (max-width: 960px) {
  .eng-columns {
    grid-template-columns: 1fr;
    border-top: 0;
    border-bottom: 0;
  }
  .eng-col {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: var(--sp-6) 0;
  }
  .eng-col:first-child { border-top: 0; }
}
.engagement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.engagement-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  padding: var(--sp-6);
  transition: border-color 180ms var(--ease-out), transform 240ms var(--ease-out), box-shadow 420ms var(--ease-out);
  transform-origin: center bottom;
  will-change: transform;
  position: relative;
}
.engagement-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--bright-red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 320ms var(--ease-out);
}
.engagement-card:hover { border-color: var(--line-2); background: var(--bg-soft); }
.engagement-card:hover::before { transform: scaleY(1); }
.eng-num {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--bright-red);
  margin-bottom: var(--sp-4);
  font-variant-numeric: tabular-nums;
}
.engagement-card h3 {
  font-size: var(--fs-24);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--deep-ocean);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-3);
}
.engagement-card p {
  font-size: var(--fs-15);
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: var(--sp-5);
}
.engagement-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.engagement-card ul li {
  font-size: var(--fs-13);
  color: var(--ink-2);
  padding-left: 16px;
  position: relative;
}
.engagement-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 1px;
  background: var(--bright-red);
}

.approach-governance {
  padding: var(--sp-8) 0 var(--sp-7);
  background: linear-gradient(180deg, var(--indigo-900) 0%, #0a0434 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.approach-governance::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* Gradient hairline at top — brand continuity with trust band */
.approach-governance::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(162, 218, 224, 0) 0%,
    rgba(162, 218, 224, 0.35) 22%,
    rgba(208, 44, 49, 0.55) 50%,
    rgba(162, 218, 224, 0.35) 78%,
    rgba(162, 218, 224, 0) 100%);
  pointer-events: none;
  z-index: 2;
}
/* Compact inline governance header — replaces the heavier section-head block */
.gov-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(162, 218, 224, 0.14);
  position: relative;
  z-index: 1;
}
.gov-header .section-label {
  flex: 0 0 auto;
  color: rgba(162, 218, 224, 0.7);
  margin: 0;
}
.gov-header .section-label::before { background: var(--bright-red); }
.gov-statement {
  flex: 1 1 320px;
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: #fff;
  text-transform: none;
  text-wrap: balance;
}
.governance-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
}
.governance-row--3 { grid-template-columns: repeat(3, 1fr); }
.governance-row--5 { grid-template-columns: repeat(5, 1fr); }
.gov-item {
  padding: var(--sp-1) var(--sp-5);
  border-left: 1px solid rgba(162, 218, 224, 0.14);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gov-item:first-child { border-left: 0; padding-left: 0; }
.gov-item:last-child { padding-right: 0; }
.gov-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(162, 218, 224, 0.55);
  font-weight: 600;
}
.gov-value {
  font-size: var(--fs-14);
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
}
/* When a gov-item has only the label (no sub-value sibling), promote the
   label to primary card-content weight. Used by the Methodology Outcomes
   row, where the label IS the outcome statement and no ISO/DISP value
   line is attached. */
.gov-item .gov-label:only-child {
  font-size: var(--fs-17);
  letter-spacing: -0.005em;
  text-transform: none;
  color: #fff;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 1024px) {
  .engagement-grid { grid-template-columns: 1fr; }
  /* Stack outcomes to a single column at narrow widths. A 2-column wrap of
     5 items would leave the last outcome ("Supportable") stranded alone on
     its row with empty space beside it, and the cross-cutting borders read
     as messy. Single column gives all 5 outcomes equal visual weight. */
  .governance-row { grid-template-columns: 1fr; gap: 0; }
  .governance-row .gov-item {
    border-left: 0;
    padding: var(--sp-4) 0;
    border-top: 1px solid rgba(162, 218, 224, 0.14);
    margin-top: 0;
  }
  .governance-row .gov-item:first-child { border-top: 0; padding-top: 0; }
  .governance-row .gov-item:last-child { padding-bottom: 0; }
}
@media (max-width: 720px) {
  .lifecycle-list li { grid-template-columns: 60px 1fr; gap: var(--sp-4); padding: var(--sp-5) 0; }
  .approach-lifecycle, .approach-engagement { padding: var(--sp-8) 0; }
  .approach-governance { padding: var(--sp-7) 0 var(--sp-6); }
  .gov-header { gap: var(--sp-3); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); }
  .gov-statement { font-size: var(--fs-16); flex-basis: 100%; }
}

/* =========================================================
   Projects page — editorial preamble
   ========================================================= */
.projects-index { padding-top: var(--sp-9); }
/* Accordion variant tightens the leading whitespace — the section-head now
   anchors the list directly under the hero so there is no editorial gap. */
.projects-index--accordion { padding-top: var(--sp-7); padding-bottom: var(--sp-9); }
.section-head--projects { margin-bottom: var(--sp-7); }
.section-head--projects h2 { margin-bottom: var(--sp-3); }
@media (max-width: 720px) {
  .projects-index--accordion { padding-top: var(--sp-6); padding-bottom: var(--sp-8); }
  .section-head--projects { margin-bottom: var(--sp-6); }
}
.projects-preamble {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-7);
  align-items: flex-end;
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  /* Border removed — the leadership-list that follows has its own border-top;
     stacking both was producing a double-hairline effect at mobile widths. */
}
.projects-preamble-lead { max-width: 560px; display: flex; flex-direction: column; gap: var(--sp-3); }
.projects-preamble-lead p {
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.projects-nda-link {
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--deep-ocean);
  padding: var(--sp-2) 0;
  min-height: 44px;
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 200ms var(--ease-out);
}
.projects-nda-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--bright-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}
.projects-nda-link:hover { color: var(--bright-red); }
.projects-nda-link:hover::after { transform: scaleX(1); }
.projects-nda-link .arrow { transition: transform 220ms var(--ease-out); }
.projects-nda-link:hover .arrow { transform: translateX(3px); }

@media (max-width: 720px) {
  .projects-preamble { grid-template-columns: 1fr; gap: var(--sp-4); align-items: flex-start; }
}

/* =========================================================
   Careers page — roles + aside stats
   ========================================================= */
.careers-roles { padding: var(--sp-10) 0; }
.careers-why {
  padding: var(--sp-10) 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}
.careers-intro {
  font-size: var(--fs-16);
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: var(--sp-6);
  max-width: 56ch;
}
.careers-aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  box-shadow: var(--shadow-sm);
}
.careers-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}
.careers-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.careers-stat:first-child { padding-top: 0; }
.cs-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
}
.cs-value {
  font-size: var(--fs-20);
  font-weight: 800;
  color: var(--deep-ocean);
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.cs-meta {
  font-size: var(--fs-13);
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .careers-inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  /* On narrow viewports the Expression of Interest panel reads first;
     the Locations / Clearance / Disciplines aside follows below. */
  .careers-aside { order: 1; }
}

/* =========================================================
   Why Rubicon — differentiators, editorial
   ========================================================= */
.why-section { padding: var(--sp-9) 0; background: #fff; }
.why-section .section-head { margin-bottom: var(--sp-7); }
/* Methodology page stacks .why-section directly on top of .approach-lifecycle.
   On wide screens the combined section paddings (96 + 96 = 192 px) read as
   editorial breathing room. On narrower widths the same gap dwarfs the content
   above it, so step the paddings down at each breakpoint. */
@media (max-width: 960px) {
  .why-section { padding: var(--sp-7) 0; }
  .approach-lifecycle { padding: var(--sp-7) 0; }
  .why-section .section-head { margin-bottom: var(--sp-6); }
}
@media (max-width: 720px) {
  .why-section { padding: var(--sp-6) 0; }
  .why-section .section-head { margin-bottom: var(--sp-5); }
}

/* Two-column head with supporting sketch on the right */
.why-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: center;
  margin-bottom: var(--sp-8);
}
/* When the head grid is the last block in its container (e.g. methodology
   page where the optional 3-pillar grid below is removed), drop the bottom
   margin so the figure doesn't leave a phantom 64 px gap before the next
   section. */
.why-head-grid:last-child { margin-bottom: 0; }
.why-head-grid .why-head-text {
  max-width: none;
  margin-bottom: 0;
}
/* No frame — isometric illustration has pure-white edges and blends into the
   section background. Container holds a 1:1 slot so layout is stable while the
   image loads (new isometric asset is square; prior sketch was 16:9). */
.why-head-image {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  justify-self: end;
}
.why-head-image picture,
.why-head-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 900px) {
  .why-head-image {
    justify-self: stretch;
    max-width: 420px;
    margin: 0 auto;
  }
}
@media (max-width: 900px) {
  .why-head-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
  border-top: 1px solid var(--line);
}
.why-item {
  padding: var(--sp-7) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
  /* Content nudges right 4px on hover — matches the .lifecycle-list idiom */
  transition: padding-left 320ms var(--ease-out);
}
.why-item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 1px;
  background: var(--bright-red);
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.why-item:hover { padding-left: 4px; }
.why-item:hover::before { width: 72px; }
.why-item .why-index {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--bright-red);
  font-variant-numeric: tabular-nums;
  transition: letter-spacing 320ms var(--ease-out);
}
.why-item:hover .why-index { letter-spacing: 0.22em; }
.why-item h3 {
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--deep-ocean);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  /* Heading colour responds — matches the toggle / careers / nav idiom */
  transition: color 260ms var(--ease-out);
}
.why-item:hover h3 { color: var(--bright-red); }
.why-item p {
  font-size: var(--fs-15);
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  max-width: 34ch;
}

@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; gap: 0; }
  .why-item { padding: var(--sp-6) 0; border-bottom: 1px solid var(--line); }
  .why-item:last-child { border-bottom: 0; }
  .why-item::before { top: 0; }
  .why-grid { border-top: 0; }
  .why-item:first-child { border-top: 1px solid var(--line); }
}

/* =========================================================
   Selected projects — restrained proof
   ========================================================= */
.selected-section {
  padding: var(--sp-9) 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.selected-section .selected-head { margin-bottom: var(--sp-7); }
.selected-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: none;
  margin-bottom: var(--sp-7);
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.selected-head h2 { margin-bottom: 0; }
.selected-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep-ocean);
  padding: var(--sp-2) 0;
  min-height: 44px;
  position: relative;
  transition: color 200ms var(--ease-out);
}
.selected-all::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: var(--deep-ocean);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--ease-out);
}
.selected-all:hover::after { transform: scaleX(1); transform-origin: left; }
.selected-all:hover { color: var(--bright-red); }
.selected-all .arrow { transition: transform 220ms var(--ease-out); }
.selected-all:hover .arrow { transform: translateX(3px); }

.selected-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.selected-item {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  transition: border-color 320ms var(--ease-out), transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
  transform-origin: center bottom;
  will-change: transform;
  position: relative;
  overflow: hidden;
}
/* Ship illustration panel — cool technical-paper gradient with a faint
   blueprint grid (major lines + finer subgrid) and a soft grounding
   shadow under the hull. WebPs are pre-cut so the panel design shows
   through behind the ship; a drop-shadow on the ship anchors it to the
   surface so it doesn't read as floating. */
.sel-blueprint {
  position: relative;
  margin: 0 0 var(--sp-4);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-6);
  overflow: hidden;
  padding: var(--sp-4);
  background:
    radial-gradient(ellipse 55% 16% at 50% 90%, rgba(14, 9, 51, 0.09), rgba(14, 9, 51, 0) 72%),
    linear-gradient(to right, rgba(49, 15, 160, 0.08) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(to bottom, rgba(49, 15, 160, 0.08) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(to right, rgba(49, 15, 160, 0.03) 1px, transparent 1px) 0 0 / 7px 7px,
    linear-gradient(to bottom, rgba(49, 15, 160, 0.03) 1px, transparent 1px) 0 0 / 7px 7px,
    linear-gradient(180deg, #f6f8fc 0%, #e8ebf3 100%);
  box-shadow:
    inset 0 0 0 1px rgba(49, 15, 160, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: box-shadow 320ms var(--ease-out);
}
.sel-blueprint picture,
.sel-blueprint img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  transition: transform 600ms var(--ease-out), filter 320ms var(--ease-out);
  filter: drop-shadow(0 6px 12px rgba(14, 9, 51, 0.13));
}
.selected-item:hover .sel-blueprint img {
  transform: scale(1.03);
  filter: drop-shadow(0 9px 14px rgba(14, 9, 51, 0.18));
}
.selected-item:hover .sel-blueprint {
  box-shadow:
    inset 0 0 0 1px rgba(49, 15, 160, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.selected-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--bright-red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 320ms var(--ease-out);
}
.selected-item:hover { border-color: var(--line-2); background: var(--bg-soft); }
.selected-item:hover::before { transform: scaleY(1); }

.sel-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.sel-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bright-red);
  padding: 4px 9px;
  border: 1px solid rgba(218, 12, 9, 0.22);
  border-radius: 999px;
}
.sel-tag--quiet {
  color: var(--muted);
  border-color: var(--line);
}
.selected-item h3 {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--deep-ocean);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 6px;
}
.selected-item .sel-scope {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--bright-red);
  letter-spacing: 0.01em;
  line-height: 1.35;
  margin: 0 0 var(--sp-3);
  padding: 0 0 var(--sp-3);
  border-bottom: 1px solid var(--line);
  position: relative;
  flex: 0 0 auto;
}
.selected-item .sel-scope::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--bright-red);
  transition: width 320ms var(--ease-out);
}
.selected-item:hover .sel-scope::after { width: 40px; }
.selected-item p {
  font-size: var(--fs-14);
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: var(--sp-5);
  flex: 1;
}
.sel-link {
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bright-red);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  transition: gap 220ms var(--ease-out);
}
.selected-item:hover .sel-link { gap: 10px; }

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

/* =========================================================
   Final CTA — calm, direct
   ========================================================= */
.final-cta {
  padding: var(--sp-10) 0 var(--sp-9);
  background: linear-gradient(180deg, var(--indigo-900) 0%, #0a0434 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(162, 218, 224, 0.22) 25%,
    rgba(218, 12, 9, 0.55) 50%,
    rgba(162, 218, 224, 0.22) 75%,
    transparent 100%);
}
/* Subtle grain overlay for depth — ties to other dark sections */
.final-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.cta-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--sp-8);
  align-items: center;
  position: relative;
  z-index: 1;
}
.cta-lead .section-label {
  margin-bottom: var(--sp-5);
}
.cta-lead h2 {
  color: #fff;
  font-size: clamp(30px, 3.4vw, 42px);
  margin-bottom: var(--sp-4);
}
.cta-lead h2 em { color: var(--summer-sky); font-weight: 300; }
.cta-lead p {
  color: rgba(239, 253, 255, 0.72);
  font-size: var(--fs-17);
  line-height: 1.6;
  margin-bottom: var(--sp-6);
  max-width: 520px;
}
.cta-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}

.cta-contact {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: var(--sp-7);
  border-left: 1px solid rgba(162, 218, 224, 0.14);
}
.cta-contact-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid rgba(162, 218, 224, 0.12);
  transition: border-color 200ms var(--ease-out);
}
.cta-contact-link:last-child { border-bottom: 0; }
.cta-contact-link:not(.cta-contact-link--static):hover { border-bottom-color: var(--summer-sky); }
.cc-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(162, 218, 224, 0.6);
  font-weight: 700;
}
.cc-value {
  font-size: var(--fs-16);
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: color 200ms var(--ease-out);
}
.cc-value--sm { font-size: var(--fs-14); font-weight: 500; line-height: 1.5; color: rgba(239, 253, 255, 0.78); }
.cta-contact-link:not(.cta-contact-link--static):hover .cc-value { color: var(--summer-sky); }

@media (max-width: 900px) {
  .cta-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .cta-contact { padding-left: 0; border-left: 0; border-top: 1px solid rgba(162, 218, 224, 0.14); padding-top: var(--sp-5); }
}

/* =========================================================
   Engage CTA — refined, quietly confident (legacy, retained for subpages)
   ========================================================= */
.engage-wrap { padding: var(--sp-8) 0 var(--sp-10); }

.engage {
  background: var(--indigo-900);
  color: #fff;
  border-radius: var(--r-16);
  padding: var(--sp-9) var(--sp-8);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--sp-9);
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-xl);
}
.engage-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-self: flex-start; }
.engage::before {
  content: '';
  position: absolute;
  top: -20%; right: -8%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(65, 52, 165, 0.45), transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.engage::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}
.engage .section-label { color: var(--summer-sky); margin-bottom: var(--sp-4); }
.engage .section-label::before { background: var(--summer-sky); }
.engage h2 {
  color: #fff;
  margin-bottom: var(--sp-4);
  font-size: clamp(32px, 3.6vw, 44px);
}
.engage h2 em { color: var(--summer-sky); font-weight: 300; }
.engage p {
  color: rgba(239, 253, 255, 0.72);
  font-size: var(--fs-17);
  line-height: 1.55;
  max-width: 520px;
}

.engage-aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-left: var(--sp-7);
  border-left: 1px solid rgba(162, 218, 224, 0.15);
}
.engage-contact-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(162, 218, 224, 0.12);
  transition: border-color var(--dur-2) var(--ease-out);
}
.engage-contact-link:hover { border-bottom-color: var(--summer-sky); }
.engage-contact-link .ecl-label {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(162, 218, 224, 0.7);
}
.engage-contact-link .ecl-value {
  font-size: var(--fs-17);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  transition: color var(--dur-2) var(--ease-out);
}
.engage-contact-link:hover .ecl-value { color: var(--summer-sky); }
.engage-aside .btn { align-self: flex-start; margin-top: var(--sp-3); }

/* =========================================================
   Pillars (3-col short about/stats)
   ========================================================= */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.pillar {
  background: #fff;
  padding: var(--sp-6) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  transition: border-color 180ms var(--ease-out), transform 240ms var(--ease-out), box-shadow 420ms var(--ease-out); transform-origin: center bottom; will-change: transform;
}
.pillar:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.pillar .n {
  font-size: var(--fs-48);
  font-weight: 800;
  color: var(--deep-ocean);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-3);
}
.pillar .n .acc { color: var(--bright-red); }
.pillar h4 {
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--deep-ocean);
  margin-bottom: var(--sp-1);
  letter-spacing: -0.005em;
}
.pillar p { font-size: var(--fs-14); color: var(--muted); line-height: 1.55; }

/* =========================================================
   Markets / Generic cards
   ========================================================= */
.markets-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.market {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  padding: var(--sp-6) var(--sp-5);
  transition: border-color 180ms var(--ease-out), transform 240ms var(--ease-out), box-shadow 420ms var(--ease-out); transform-origin: center bottom; will-change: transform;
  position: relative;
  overflow: hidden;
}
.market::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--bright-red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-3) var(--ease-out);
}
.market:hover { background: var(--bg-soft); border-color: var(--line-2); }
.market:hover::before { transform: scaleY(1); }
.market-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pale-blue);
  color: var(--deep-ocean);
  border-radius: var(--r-8);
  margin-bottom: var(--sp-5);
}
.market h4 {
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--deep-ocean);
  margin-bottom: var(--sp-2);
}
.market p { font-size: var(--fs-13); color: var(--muted); line-height: 1.55; }

/* =========================================================
   Services page — progressive-reveal editorial modules
   ========================================================= */
.services-detail-section { padding: var(--sp-9) 0 var(--sp-10); }
.svc-modules {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.svc-modules > li { border-bottom: 1px solid var(--line); }

.svc-module {
  display: block;
  position: relative;
  transition: background-color 320ms var(--ease-out);
}
.svc-module::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--sp-7);
  width: 0;
  height: 1px;
  background: var(--bright-red);
  transition: width 320ms var(--ease-out);
  pointer-events: none;
}
.svc-module[data-expanded="true"]::before { width: 18px; }

.svc-summary {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--sp-7);
  padding: var(--sp-7) 0 var(--sp-6);
  align-items: start;
}
/* When the module is open, tighten the gap below the toggle so the spacing
   between "Hide detail" and the expanded paragraph matches the spacing
   between the closed-summary paragraph and the toggle (both ~16 px). */
.svc-module[data-expanded="true"] .svc-summary {
  padding-bottom: var(--sp-4);
}
/* Illustrated variant — the figure is taken out of grid flow and absolutely
   positioned in a reserved right-hand column. This keeps the summary row's
   height driven by the TEXT column only, so the "Hide detail" toggle sits
   tight against the expanded panel below (the previous arrangement let the
   square figure dictate row height, leaving ~450 px of dead space between
   the toggle and the open content). */
.svc-module--illustrated { position: relative; }
.svc-module--illustrated .svc-summary {
  /* Reserve the third column for the absolutely-positioned figure. */
  grid-template-columns: 140px 1fr 280px;
}
.svc-visual {
  position: absolute;
  top: var(--sp-7);
  right: 0;
  width: 280px;
  margin: 0;
  aspect-ratio: 1 / 1;
}
.svc-visual picture,
.svc-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 560ms var(--ease-out);
}
.svc-module--illustrated:hover .svc-visual img {
  transform: scale(1.03);
}
/* Stack the visual below at narrower widths so it doesn't crush the title
   column. Revert the absolute-position trick here — at ≤1024 px the figure
   wraps into the content grid as a normal flow item. */
@media (max-width: 1024px) {
  .svc-module--illustrated .svc-summary {
    grid-template-columns: 140px 1fr;
  }
  .svc-module--illustrated .svc-visual {
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    margin-top: var(--sp-5);
  }
}
@media (max-width: 640px) {
  /* Mobile: collapse to a single column and re-order so the illustration
     sits ABOVE the copy. Far easier to scan on a phone — the visual
     anchors each service line before the user reads the wordy part. */
  .svc-module--illustrated .svc-summary {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding-top: var(--sp-5);
  }
  .svc-module--illustrated .svc-visual {
    order: -2;
    grid-column: auto;
    max-width: 82%;
    margin: 0 auto;  /* centre within the single column */
  }
  .svc-module--illustrated .svc-id {
    order: -1;
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-3);
    padding-top: 0;
  }
  .svc-module--illustrated .svc-content { order: 0; }
}

/* Number column */
.svc-id { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.svc-num {
  font-size: var(--fs-28);
  font-weight: 300;
  color: var(--bright-red);
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: font-weight 280ms var(--ease-out);
}
.svc-module[data-expanded="true"] .svc-num { font-weight: 500; }
.svc-role {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Was var(--muted-2) #8a89a8 which gives ~3:1 contrast on white — only
     passes WCAG AA for "large text" (18 px+ regular / 14 px+ bold). At
     10 px this is small text and needs 4.5:1. Switched to --muted #616086
     which gives ~5.5:1. Visually still a quiet eyebrow label. */
  color: var(--muted);
  font-weight: 700;
}

/* Content column */
.svc-content { min-width: 0; }
.svc-title {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--deep-ocean);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--sp-3);
  scroll-margin-top: 112px; /* clears the sticky nav when deep-linked */
}
@media (max-width: 720px) {
  .svc-title { scroll-margin-top: 88px; }
}
.svc-lead {
  font-size: var(--fs-17);
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 var(--sp-4);
  max-width: 60ch;
  font-weight: 500;
}
.svc-key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px var(--sp-5);
  padding: 0;
  margin: 0 0 var(--sp-5);
}
.svc-key li {
  font-size: var(--fs-14);
  color: var(--ink-2);
  padding-left: 18px;
  position: relative;
  font-weight: 500;
}
.svc-key li::before {
  content: '';
  position: absolute;
  left: 0;
  /* Anchor by line-box centre so the dash sits on the same baseline
     regardless of which row the item wraps to. 1 px hairlines used to
     render inconsistently at fractional DPRs (Windows 125 % / 150 %); 2 px
     with rounded ends stays crisp at any zoom and is visually identical
     across rows. */
  top: 0.7em;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--bright-red);
}

/* Toggle — no button chrome, text + line-mark that folds vertical→horizontal */
.svc-toggle {
  background: transparent;
  border: 0;
  padding: 6px 0;
  margin: 0;
  /* WCAG touch-target: min 44px tap area without changing visible type */
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bright-red);
  position: relative;
  transition: color 220ms var(--ease-out);
}
.svc-toggle:hover { color: var(--ruby-red); }
.svc-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(218, 12, 9, 0.18);
  border-radius: var(--r-3);
}
.svc-toggle-mark {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  /* Halo ring blooms on hover — same idiom as the hero LED dot */
  transition: box-shadow 280ms var(--ease-out);
}
.svc-toggle:hover .svc-toggle-mark {
  box-shadow: 0 0 0 6px rgba(218, 12, 9, 0.10);
}
.svc-toggle-mark::before,
.svc-toggle-mark::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 320ms var(--ease-out), opacity 260ms var(--ease-out);
}
.svc-toggle-mark::before {
  top: 50%; left: 0; right: 0;
  height: 1.5px;
  transform: translateY(-50%);
}
.svc-toggle-mark::after {
  left: 50%; top: 0; bottom: 0;
  width: 1.5px;
  transform: translateX(-50%);
  transform-origin: center;
}
.svc-module[data-expanded="true"] .svc-toggle-mark::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

.svc-toggle-label {
  position: relative;
  display: inline-block;
  min-width: 150px;
  text-align: left;
  /* Arrow-nudge on hover — matches the site-wide 3px idiom */
  transition: transform 260ms var(--ease-out);
}
.svc-toggle:hover .svc-toggle-label {
  transform: translateX(3px);
}
/* Hairline underline draws under label on hover — matches nav / text-link pattern */
.svc-toggle-label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}
.svc-toggle:hover .svc-toggle-label::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .svc-toggle-mark,
  .svc-toggle-label,
  .svc-toggle-label::after { transition: none; }
  .svc-toggle:hover .svc-toggle-mark { box-shadow: 0 0 0 6px rgba(218, 12, 9, 0.10); }
  .svc-toggle:hover .svc-toggle-label { transform: none; }
  .svc-toggle:hover .svc-toggle-label::after { transform: scaleX(1); }
}
.svc-toggle-more, .svc-toggle-less {
  display: inline-block;
  transition: opacity 220ms var(--ease-out);
}
.svc-toggle-less {
  position: absolute;
  left: 0; top: 0;
  opacity: 0;
}
.svc-module[data-expanded="true"] .svc-toggle-more { opacity: 0; }
.svc-module[data-expanded="true"] .svc-toggle-less { opacity: 1; }

/* Expanded region — grid-rows animation (no max-height jank) */
.svc-expanded {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 460ms var(--ease-out);
}
.svc-module[data-expanded="true"] .svc-expanded { grid-template-rows: 1fr; }
.svc-expanded-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.svc-module[data-expanded="true"] .svc-expanded-inner {
  opacity: 1;
  transition-delay: 160ms;
}

.svc-expanded-grid {
  display: grid;
  grid-template-columns: 140px 1fr 280px;
  column-gap: var(--sp-7);
  padding: 0 0 var(--sp-7);
}
.svc-context { grid-column: 2; min-width: 0; }
.svc-context p {
  font-size: var(--fs-15);
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 var(--sp-5);
  max-width: 58ch;
}
.svc-sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bright-red);
  margin: 0 0 var(--sp-3);
}
.svc-full {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px var(--sp-6);
  padding: var(--sp-3) 0 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.svc-full li {
  font-size: var(--fs-14);
  color: var(--ink-2);
  padding-left: 18px;
  position: relative;
  line-height: 1.6;
}
.svc-full li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--line-2);
}

/* Top-level capability headings inside .svc-context (one per capability
   area, no nested bullets). Sit between the two intro paragraphs and the
   PDF download link. Subtle red left-accent so the rhythm reads as a
   list of named areas, not a wall of competing H4s. */
.svc-context .svc-cap-heading {
  font-size: var(--fs-17);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) 0 var(--sp-2) 14px;
  border-left: 2px solid var(--bright-red);
  line-height: 1.35;
}
.svc-context .svc-cap-heading + .svc-cap-heading {
  margin-top: -2px; /* tighten the stack so the red bars read as one rail */
}

/* PDF download link below the capability headings. Inline-flex so the
   arrow tracks the text, with a soft pill-button feel via the underline
   and red accent. */
.svc-context .svc-download {
  margin: var(--sp-5) 0 0;
}
.svc-context .svc-download a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--bright-red);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid rgba(218, 12, 9, 0.25);
  transition: gap 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.svc-context .svc-download a:hover {
  gap: 12px;
  border-bottom-color: var(--bright-red);
}
.svc-context .svc-download + .svc-download { margin-top: var(--sp-2); }

/* Light-blue services box (used on the Project Management panel). Sits
   inside .svc-context after the two intro paragraphs. */
.svc-services-box {
  background: rgba(162, 218, 224, 0.10);
  border: 1px solid rgba(162, 218, 224, 0.32);
  border-radius: 4px;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  margin: 0 0 var(--sp-5);
}
.svc-services-box-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--deep-ocean);
  margin: 0 0 var(--sp-3);
}
.svc-services-box-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px var(--sp-5);
}
.svc-services-box-list li {
  font-size: var(--fs-14);
  color: var(--ink-2);
  line-height: 1.6;
  padding-left: 16px;
  position: relative;
}
.svc-services-box-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--deep-ocean);
  opacity: 0.55;
}
@media (max-width: 640px) {
  .svc-services-box-list { grid-template-columns: 1fr; }
}

/* Related engagement — quiet block on the right */
.svc-related {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0 0 0 var(--sp-5);
  border-left: 1px solid var(--line);
  align-self: start;
}
.svc-related-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.svc-related-link {
  display: grid;
  gap: 2px;
  color: inherit;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
  position: relative;
  transition: padding-left 220ms var(--ease-out);
}
.svc-related-link:hover { padding-left: var(--sp-2); }
.rel-platform {
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--deep-ocean);
  letter-spacing: -0.005em;
}
.rel-scope {
  font-size: var(--fs-13);
  color: var(--ink-2);
  font-weight: 500;
  line-height: 1.4;
  margin-top: 2px;
}
.rel-client {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--sp-2);
}
.rel-arrow {
  position: absolute;
  right: 0;
  top: var(--sp-3);
  color: var(--bright-red);
  font-weight: 600;
  transition: transform 220ms var(--ease-out);
}
.svc-related-link:hover .rel-arrow { transform: translateX(3px); }

/* Responsive */
@media (max-width: 1024px) {
  .svc-summary { grid-template-columns: 100px 1fr; column-gap: var(--sp-5); }
  .svc-expanded-grid { grid-template-columns: 100px 1fr; column-gap: var(--sp-5); }
  .svc-context { grid-column: 2; }
  .svc-related {
    grid-column: 2;
    grid-row: 2;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: var(--sp-5) 0 0 0;
    margin-top: var(--sp-6);
  }
}
@media (max-width: 640px) {
  .svc-summary {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding: var(--sp-6) 0 var(--sp-5);
  }
  .svc-id { flex-direction: row; align-items: baseline; gap: var(--sp-4); padding-top: 0; }
  .svc-num { font-size: 22px; }
  .svc-expanded-grid { grid-template-columns: 1fr; padding-bottom: var(--sp-6); }
  .svc-context, .svc-related { grid-column: 1; }
  .svc-full { grid-template-columns: 1fr; gap: 8px; }
  .svc-module::before { top: var(--sp-6); }
  .svc-toggle-label { min-width: auto; }
}

/* Legacy .split-section / .approach / .approach-card removed —
   Approach page now uses .approach-lifecycle / .approach-engagement / .approach-governance */

/* =========================================================
   Projects — Featured lead + Grid + NDA tile
   ========================================================= */

/* When a project card is itself an anchor target (deep-linked from homepage/services),
   give it a generous scroll-margin so the sticky nav doesn't clip its top edge. */
.project-featured[id],
.project-mid[id],
.project[id] { scroll-margin-top: 112px; }
@media (max-width: 720px) {
  .project-featured[id],
  .project-mid[id],
  .project[id] { scroll-margin-top: 88px; }
}
/* Subtle arrival cue — when a project card is the URL target, a soft cyan rim
   pulses around it once so the user sees "this is the one you clicked". */
.project-featured:target,
.project-mid:target,
.project:target {
  animation: projectTargetFlash 2.6s ease-out 1;
}
@keyframes projectTargetFlash {
  0%   { outline: 2px solid rgba(162, 218, 224, 0); outline-offset: 10px; }
  25%  { outline: 2px solid rgba(162, 218, 224, 0.6); outline-offset: 4px; }
  100% { outline: 2px solid rgba(162, 218, 224, 0); outline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-featured:target,
  .project-mid:target,
  .project:target {
    animation: none;
    outline: 2px solid rgba(162, 218, 224, 0.45);
    outline-offset: 4px;
  }
}

/* ---- Featured lead card ---- */
.project-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  overflow: hidden;
  margin-bottom: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: border-color 220ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.project-featured:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
}
.project-featured-visual {
  position: relative;
  /* No aspect-ratio at desktop — grid stretch fills the row to match the
     body column's height, so the image panel locks edge-to-edge with the
     text panel. Aspect-ratio is re-applied in the stacked mobile breakpoint. */
  background: linear-gradient(155deg, var(--indigo-900), var(--deep-ocean));
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 0;
}
/* Anchor the crop slightly left-of-centre so the hull number "155" stays in frame
   when the container stretches taller than the photo's native 16:9 aspect. */
.project-featured-visual img {
  object-position: 40% center;
}
.project-featured-visual .pv-art {
  position: absolute;
  inset: 0;
  opacity: 0.72;
}
.project-featured-visual .pv-art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.project-featured-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.28;
  mix-blend-mode: overlay;
}
.project-featured-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(255,255,255,0.1), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}
.project-featured-visual .ph {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  padding: var(--sp-5) var(--sp-6);
}
.project-featured-body {
  padding: var(--sp-8) var(--sp-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.project-featured-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.pfl-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bright-red);
  padding: 4px 9px;
  border: 1px solid rgba(218, 12, 9, 0.28);
  border-radius: 999px;
  background: rgba(218, 12, 9, 0.04);
}
.pfl-sector {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.pfl-client {
  margin-left: auto;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep-ocean);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--line);
}
.project-featured .project-platform {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  color: var(--deep-ocean);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 var(--sp-2);
  text-transform: none;
}
.project-featured .project-scope {
  font-size: var(--fs-17);
  font-weight: 500;
  color: var(--ink-2);
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.project-featured .project-desc {
  font-size: var(--fs-15);
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 var(--sp-5);
  max-width: 52ch;
}

/* ---- Mid tier — two editorial cards between featured and tertiary ---- */
.project-mid-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.project-mid {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  overflow: hidden;
  transition: border-color 200ms var(--ease-out), box-shadow 420ms var(--ease-out);
  display: flex;
  flex-direction: column;
  position: relative;
}
.project-mid::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--bright-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
  z-index: 2;
  pointer-events: none;
}
.project-mid:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); }
.project-mid:hover::before { transform: scaleX(1); }

.project-mid .project-visual { aspect-ratio: 16 / 9; }
.project-mid .project-body { padding: var(--sp-6) var(--sp-6) var(--sp-6); }

.project-platform-mid {
  font-size: clamp(20px, 2.1vw, 24px);
  font-weight: 800;
  color: var(--deep-ocean);
  text-transform: none;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 var(--sp-2);
}
.project-scope-mid {
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--ink-2);
  margin: 0 0 var(--sp-4);
  line-height: 1.35;
}
.project-mid .project-desc-mid,
.project-mid p:not(.project-scope-mid) {
  font-size: var(--fs-14);
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 var(--sp-5);
  flex: 1;
}

/* ---- Tertiary grid — three compact cards ---- */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.project {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  overflow: hidden;
  transition: border-color 180ms var(--ease-out), box-shadow 420ms var(--ease-out);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  position: relative;
}
.project::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--bright-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms var(--ease-out);
  z-index: 2;
  pointer-events: none;
}
.project:hover { box-shadow: var(--shadow-md); border-color: var(--line-2); }
.project:hover::before { transform: scaleX(1); }
/* Project visuals — custom maritime blueprint treatments (no stock gradients) */
.project-visual {
  aspect-ratio: 16 / 10;
  background: var(--deep-ocean);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  transition: transform var(--dur-4) var(--ease-out);
}
.project-mid:hover .project-visual,
.project:hover .project-visual {
  transform: none;
}
.project-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.25;
  mix-blend-mode: overlay;
}
.project-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}
.project-visual .pv-art {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0.72;
}
.project-visual .pv-art svg { width: 100%; height: 100%; display: block; }
/* Platform photography — fills the visual, pseudo-overlays sit on top */
.project-visual picture,
.project-featured-visual picture {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}
.project-visual img,
.project-featured-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out);
}
.project-visual::before,
.project-featured-visual::before { z-index: 2; }
.project-visual::after,
.project-featured-visual::after { z-index: 3; }
/* Precision zoom on hover — reads as inspection, not flourish */
.project:hover .project-visual img,
.project-mid:hover .project-visual img,
.project-featured:hover .project-featured-visual img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .project-visual img,
  .project-featured-visual img { transition: none; }
  .project:hover .project-visual img,
  .project-mid:hover .project-visual img,
  .project-featured:hover .project-featured-visual img { transform: none; }
}
.project-visual .ph {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  padding: var(--sp-5);
}
/* Tinted variants — solid ink then art overlay */
.project-visual.v2 { background: var(--ruby-red); }
.project-visual.v3 { background: var(--indigo-900); }
.project-visual.v4 { background: linear-gradient(155deg, var(--deep-ocean), var(--indigo-600)); }
.project-visual.v5 { background: linear-gradient(155deg, var(--bright-red), var(--indigo-900)); }
.project-visual.v6 { background: linear-gradient(155deg, var(--deep-ocean), var(--ruby-red)); }
.project-body { padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; }
/* Card header row: sector (red, left) + client (ink, right) */
.project-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.project-meta {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--bright-red);
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}
.project-client {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--deep-ocean);
  font-weight: 700;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.4;
}
.project h4,
.project-platform-sm {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--deep-ocean);
  margin: 0 0 var(--sp-1);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
}
.project-scope-sm {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-2);
  margin: 0 0 var(--sp-3);
  line-height: 1.35;
}
.project-desc-sm {
  font-size: var(--fs-14);
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 var(--sp-5);
  flex: 1;
}
.project-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.project-tag {
  font-size: 10px;
  padding: 4px 10px;
  background: #fff;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.project-featured .project-tag { background: var(--bg-soft); }

/* ---- NDA request tile (6th grid cell) ---- */
.project-cta-tile {
  background: linear-gradient(155deg, var(--indigo-900) 0%, var(--indigo-800) 100%);
  color: #fff;
  border: 1px solid var(--indigo-700);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 320px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 420ms var(--ease-out), border-color 220ms var(--ease-out);
}
.project-cta-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.project-cta-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(218, 12, 9, 0.12), transparent 55%);
  pointer-events: none;
}
.project-cta-tile:hover { border-color: rgba(162, 218, 224, 0.3); box-shadow: var(--shadow-md); }
.pct-inner {
  position: relative;
  z-index: 1;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  justify-content: flex-end;
}
.pct-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--summer-sky);
  opacity: 0.7;
}
.project-cta-tile h4 {
  font-size: var(--fs-20);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.25;
}
.project-cta-tile p {
  font-size: var(--fs-13);
  color: rgba(239, 253, 255, 0.65);
  line-height: 1.55;
  margin: 0;
  max-width: 30ch;
}
.pct-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(162, 218, 224, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--summer-sky);
  margin-top: var(--sp-3);
  transition: background-color 220ms var(--ease-out), border-color 220ms var(--ease-out), color 220ms var(--ease-out);
}
.project-cta-tile:hover .pct-arrow {
  background: var(--bright-red);
  border-color: var(--bright-red);
  color: #fff;
}

@media (max-width: 1024px) {
  .project-featured { grid-template-columns: 1fr; }
  .project-featured-visual { aspect-ratio: 16 / 9; }
  .project-featured-body { padding: var(--sp-6) var(--sp-5); }
  .project-mid-grid { grid-template-columns: 1fr 1fr; }
  .projects { grid-template-columns: repeat(2, 1fr); }
  .project-cta-tile { min-height: 220px; }
}
@media (max-width: 820px) {
  .project-mid-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .projects { grid-template-columns: 1fr; }
  .project-featured-visual { aspect-ratio: 400 / 260; }
  .project-featured-body { padding: var(--sp-5); }
}

/* =========================================================
   Accreditations
   ========================================================= */
.accred-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
.accred {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  padding: var(--sp-5);
  transition: border-color 180ms var(--ease-out), transform 240ms var(--ease-out), box-shadow 420ms var(--ease-out); transform-origin: center bottom; will-change: transform;
}
.accred:hover { border-color: var(--deep-ocean); background: var(--bg-soft); }
.accred-badge {
  width: 48px; height: 48px;
  border-radius: var(--r-6);
  background: linear-gradient(135deg, var(--deep-ocean), var(--indigo-600));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-13);
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px -4px rgba(49, 15, 160, 0.4);
}
.accred h3,
.accred h4 {
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--deep-ocean);
  margin-bottom: var(--sp-2);
  line-height: 1.3;
  text-transform: none;
  letter-spacing: -0.005em;
}
.accred p { font-size: var(--fs-13); color: var(--muted); line-height: 1.5; }

/* =========================================================
   Clients grid
   ========================================================= */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  overflow: hidden;
}
.client {
  background: #fff;
  padding: var(--sp-7) var(--sp-4);
  display: flex; align-items: center; justify-content: center;
  min-height: 112px;
  transition: background-color var(--dur-3) var(--ease-out);
}
.client:hover { background: var(--pale-blue); }
.client-name {
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--deep-ocean);
  text-align: center;
}

/* =========================================================
   Offices
   ========================================================= */
.offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.office {
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  background: #fff;
  transition: border-color 180ms var(--ease-out), transform 240ms var(--ease-out), box-shadow 420ms var(--ease-out); transform-origin: center bottom; will-change: transform;
}
.office:hover { border-color: var(--deep-ocean); background: var(--bg-soft); }
.office h3,
.office h4 {
  font-size: var(--fs-17);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--deep-ocean);
  margin-bottom: var(--sp-2);
}
.office p { font-size: var(--fs-13); color: var(--muted); line-height: 1.5; }
.office.hq {
  background: linear-gradient(135deg, var(--deep-ocean), var(--indigo-600));
  color: #fff;
  border-color: var(--deep-ocean);
  box-shadow: var(--shadow-md);
}
.office.hq h4 { color: #fff; }
.office.hq p { color: rgba(239, 253, 255, 0.75); }
.office .tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bright-red);
  margin-bottom: var(--sp-3);
  font-weight: 700;
}
.office.hq .tag { color: var(--summer-sky); }

/* =========================================================
   Careers
   ========================================================= */
.careers-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-9); align-items: center; }
.careers-visual {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--indigo-800), var(--indigo-600));
  border-radius: var(--r-16);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xl), var(--shadow-card-inset);
}
.careers-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
}
.careers-visual .quote { position: relative; z-index: 1; color: #fff; padding: var(--sp-7); text-align: center; max-width: 420px; }
.careers-visual .quote .q {
  font-size: var(--fs-20);
  font-weight: 300;
  line-height: 1.4;
  color: #fff;
  margin-bottom: var(--sp-5);
  letter-spacing: -0.015em;
}
.careers-visual .quote .a {
  font-size: var(--fs-12);
  color: var(--summer-sky);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.careers-list { list-style: none; margin-bottom: var(--sp-7); }
.careers-list li {
  border-top: 1px solid var(--line);
  position: relative;
}
.careers-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--bright-red);
  transition: width 280ms var(--ease-out);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}
.careers-list li:last-child { border-bottom: 1px solid var(--line); }
/* Each role is now a direct mailto with prefilled subject — "clickable role" UX
   without requiring per-role detail pages. Preserves the existing hover vocabulary
   (red hairline grows, padding nudges right) on the anchor itself. */
.careers-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  transition: padding-left 280ms var(--ease-out), color 180ms var(--ease-out);
}
.careers-list li:hover a { padding-left: 28px; }
.careers-list li:hover::before { width: 18px; }
.careers-list li:hover .role { color: var(--bright-red); }
.careers-list li:hover .role-arrow { transform: translateX(3px); color: var(--bright-red); }
.careers-list .role {
  font-size: var(--fs-15);
  color: var(--deep-ocean);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color 180ms var(--ease-out);
  flex: 1;
}
.careers-list .loc { font-size: var(--fs-13); color: var(--muted); }
.careers-list .role-arrow {
  font-size: var(--fs-14);
  color: var(--muted-2);
  transition: transform 220ms var(--ease-out), color 180ms var(--ease-out);
  flex-shrink: 0;
}
.careers-list a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(218, 12, 9, 0.30);
  border-radius: var(--r-3);
}

/* =========================================================
   Contact
   ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-9);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
}
.contact-info .item { padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.contact-info a.value, .contact-info .value { overflow-wrap: anywhere; }
.contact-info .item:last-child { border-bottom: 1px solid var(--line); }
.contact-info .label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-2);
  font-weight: 600;
}
.contact-info .value {
  font-size: var(--fs-17);
  color: var(--deep-ocean);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: color 180ms var(--ease-out);
}
/* Multi-line block value (e.g. postal address) — lighter weight, narrower rhythm */
.contact-info .value--block {
  font-weight: 400;
  font-size: var(--fs-15);
  line-height: 1.6;
}
/* Contact list sits below its section heading with standard-scale offset */
.contact-info--spaced { margin-top: var(--sp-6); }
.contact-info a.value {
  display: inline-block;
  background-image: linear-gradient(var(--bright-red), var(--bright-red));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color 180ms var(--ease-out), background-size 360ms var(--ease-out);
}
.contact-info a.value:hover { color: var(--bright-red); background-size: 100% 1px; }
/* Mobile + tablet: pad email/phone tap targets to WCAG 44px without changing visible type */
@media (max-width: 768px) {
  .contact-info a.value {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: #fff;
  padding: var(--sp-7);
  border-radius: var(--r-16);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
/* Honeypot field — hidden from sighted users and assistive tech. Bots that
   blindly fill every input will trip this; the server then silently accepts
   the submission without delivering. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.field input, .field textarea, .field select {
  padding: 13px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-6);
  background: #fff;
  font-family: inherit;
  font-size: var(--fs-15);
  color: var(--ink);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
/* Custom-styled select: strip the native dropdown chrome and replace with a
   subtle inline-SVG chevron in the brand red. Keeps the field visually
   consistent with the text inputs above. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23DA0C09' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.field select:hover { border-color: var(--line); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--deep-ocean);
  box-shadow: 0 0 0 4px rgba(49, 15, 160, 0.08);
}
.field select:focus {
  /* When focused, lift the chevron to indigo so the focus state reads as
     a single intentional brand colour instead of red-on-indigo competing. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23310FA0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; gap: var(--sp-3); }
}
.field input, .field select, .field textarea { min-width: 0; width: 100%; box-sizing: border-box; }

.form-wrap { position: relative; }
.form-privacy {
  font-size: var(--fs-12);
  color: var(--muted-2);
  line-height: 1.55;
  margin-top: var(--sp-2);
  margin-bottom: 0;
}
.form-privacy a {
  color: var(--deep-ocean);
  background-image: linear-gradient(var(--deep-ocean), var(--deep-ocean));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

/* Success state — slides in when form is submitted */
.form-success {
  background: #fff;
  padding: var(--sp-7);
  border-radius: var(--r-16);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  animation: formSuccessIn 520ms var(--ease-out);
}
/* The success card uses display:flex which would otherwise override the
   native [hidden] attribute. Force display:none while hidden so the card
   only appears AFTER the form is actually submitted. */
.form-success[hidden] { display: none; }
.form-success-mark {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--deep-ocean), var(--indigo-600));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -8px rgba(49, 15, 160, 0.4);
  margin-bottom: var(--sp-2);
}
.form-success h3 {
  font-size: var(--fs-20);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--deep-ocean);
}
.form-success p {
  font-size: var(--fs-15);
  color: var(--muted);
  line-height: 1.6;
}
.form-success p a {
  color: var(--deep-ocean);
  font-weight: 600;
  background-image: linear-gradient(var(--deep-ocean), var(--deep-ocean));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}
@keyframes formSuccessIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .form-success { animation: none; }
}

/* =========================================================
   Footer
   ========================================================= */
footer {
  background:
    linear-gradient(180deg, #0a0434 0%, var(--indigo-900) 45%, var(--indigo-900) 100%);
  color: rgba(239, 253, 255, 0.55);
  padding: var(--sp-9) 0 var(--sp-6);
  position: relative;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(162, 218, 224, 0.08) 20%, rgba(162, 218, 224, 0.16) 50%, rgba(162, 218, 224, 0.08) 80%, transparent);
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(162, 218, 224, 0.08);
  /* No own horizontal padding or max-width — the parent .container already
     provides max-width + horizontal padding. Two stacked max-width centred
     wrappers added a stray 24 px inset that pushed the footer content right
     of every other section on the page. */
}
footer .brand { margin-bottom: var(--sp-5); }
footer p.f-desc { font-size: var(--fs-14); max-width: 340px; line-height: 1.65; }
footer h3,
footer h4 {
  color: #fff;
  font-size: var(--fs-12);
  font-weight: 700;
  margin-bottom: var(--sp-5);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
}
footer ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
footer ul a {
  font-size: var(--fs-14);
  color: rgba(239, 253, 255, 0.55);
  display: inline-block;
  position: relative;
  padding: 2px 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 95%;
  transition: color 180ms var(--ease-out), background-size 320ms var(--ease-out);
}
footer ul a:hover { color: var(--summer-sky); background-size: 100% 1px; }

/* Office-address block under the Contact column on the home footer.
   Small, static (non-link) typography matching footer ul a luminance.
   Allows the column to grow tall on desktop and wrap cleanly on mobile. */
.f-addresses {
  margin-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.f-address {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.f-address-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239, 253, 255, 0.42);
}
.f-address-text {
  font-size: var(--fs-13);
  line-height: 1.55;
  color: rgba(239, 253, 255, 0.62);
}

/* Mobile touch-target: pad footer links to 44px without changing visible type */
@media (max-width: 768px) {
  footer ul a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
  }
  footer ul { gap: 0; }
}
.footer-bottom {
  padding-top: var(--sp-5);
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-13);
  color: rgba(239, 253, 255, 0.35);
  /* No max-width / margin: auto / horizontal padding — same reason as
     .footer-inner: the parent .container provides those. */
}

/* =========================================================
   Hamburger toggle → X (when open)
   ========================================================= */
.nav-toggle { position: relative; width: 44px; height: 44px; display: none; align-items: center; justify-content: center; }
.nav-toggle span { position: absolute; left: 12px; right: 12px; width: auto; transition: transform var(--dur-2) var(--ease-out), top var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out); }
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-toggle.open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* =========================================================
   Motion — subtle scroll reveals, staggered
   ========================================================= */
[data-animate] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
}
[data-animate].in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  [data-animate] { opacity: 1; transform: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  :root { --container: 100%; }
  .nav-links { gap: var(--sp-5); }
  .svc-preview { grid-template-columns: repeat(2, 1fr); }
  .svc-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .svc-item:nth-child(odd) { border-right: 1px solid var(--line); }
  .svc-item:nth-last-child(-n+2) { border-bottom: 0; }
  .svc-item:last-child { border-right: 0; }
  .svc-split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .careers-inner, .contact-grid, .engage { grid-template-columns: 1fr; gap: var(--sp-7); }
  .engage-aside { padding-left: 0; border-left: 0; padding-top: var(--sp-5); border-top: 1px solid rgba(162, 218, 224, 0.15); }
  .markets-grid, .projects { grid-template-columns: repeat(2, 1fr); }
  .accred-grid { grid-template-columns: repeat(3, 1fr); }
  .clients-grid, .offices { grid-template-columns: repeat(3, 1fr); }
  .service-detail { grid-template-columns: 1fr; gap: var(--sp-4); }
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-6); }
  section { padding: var(--sp-9) 0; }
  .services-section { padding: var(--sp-9) 0 var(--sp-8); }
}
/* Nav collapses earlier now that it holds 7 items (About / Markets / Services / Methodology / Projects / Careers / Contact) */
@media (max-width: 900px) {
  /* Mobile nav drawer — always rendered in the DOM, slid off-screen (right)
     and pointer-events disabled when closed, then slid back in via transform
     for a smooth open/close. Previously this used display:none / display:flex
     which can't be transitioned, so the menu snapped abruptly. */
  .nav-links {
    display: flex;
    position: fixed;
    top: 72px; left: 0; right: 0; bottom: 0;
    background: #fff;
    flex-direction: column;
    padding: var(--sp-5);
    gap: 0;
    align-items: stretch;
    box-shadow: var(--shadow-md);
    z-index: 99;
    overflow-y: auto;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    will-change: transform;
    transition:
      transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 220ms var(--ease-out),
      visibility 0s linear 380ms;
  }
  .nav-links.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition:
      transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 200ms var(--ease-out),
      visibility 0s linear 0s;
  }
  /* Subtle stagger so individual nav items settle in after the panel arrives. */
  .nav-links a, .nav-links .btn {
    opacity: 0;
    transform: translateX(16px);
    transition:
      opacity 240ms var(--ease-out),
      transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-links.open a, .nav-links.open .btn {
    opacity: 1;
    transform: translateX(0);
  }
  .nav-links.open a:nth-child(1) { transition-delay: 120ms; }
  .nav-links.open a:nth-child(2) { transition-delay: 160ms; }
  .nav-links.open a:nth-child(3) { transition-delay: 200ms; }
  .nav-links.open a:nth-child(4) { transition-delay: 240ms; }
  .nav-links.open a:nth-child(5) { transition-delay: 280ms; }
  .nav-links.open a:nth-child(6) { transition-delay: 320ms; }
  .nav-links a { min-height: 44px; display: flex; align-items: center; }
  .nav-toggle { display: flex; }
  /* Lock body scroll when mobile menu is open so background doesn't drift under the panel */
  body.nav-open { overflow: hidden; }
  /* Respect reduced-motion preference — skip the slide + stagger, just fade. */
  @media (prefers-reduced-motion: reduce) {
    .nav-links {
      transform: none;
      transition: opacity 160ms linear, visibility 0s linear 160ms;
    }
    .nav-links.open { transition: opacity 160ms linear, visibility 0s linear 0s; }
    .nav-links a, .nav-links .btn {
      transform: none;
      transition: opacity 160ms linear;
    }
    .nav-links.open a, .nav-links.open .btn { transition-delay: 0s !important; }
  }
}
@media (max-width: 720px) {
  .editorial-row .ed-grid { grid-template-columns: 1fr; }
  .editorial-row .ed-item { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-right: 0; padding-top: var(--sp-5); }
  .editorial-row .ed-item:first-child { border-top: 0; }
  .editorial-row .ed-item::before { left: 0 !important; }
  .svc-split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .engage { padding: var(--sp-7) var(--sp-5); grid-template-columns: 1fr; gap: var(--sp-6); }
  .engage-aside { padding-left: 0; border-left: 0; border-top: 1px solid rgba(162, 218, 224, 0.15); padding-top: var(--sp-5); }
  .brand img { height: 40px; }
  .brand.footer img { height: 58px; }
  .svc-preview, .pillars, .projects, .accred-grid, .markets-grid, .offices { grid-template-columns: 1fr; }
  .svc-item { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .svc-item:last-child { border-bottom: 0 !important; }
  .clients-grid { grid-template-columns: 1fr 1fr; }
  .hero { padding: 128px 0 72px; }
  .hero.page { padding: 112px 0 56px; min-height: 380px; }
  section { padding: var(--sp-8) 0; }
  .engage { padding: var(--sp-7) var(--sp-5); }
  .service-detail .body ul { grid-template-columns: 1fr; gap: var(--sp-2) 0; }
  .careers-list a { flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-6); }
  .footer-bottom { flex-direction: column; gap: var(--sp-3); }
  form { padding: var(--sp-5); }
  h1 { font-size: clamp(32px, 9vw, 48px); }
}

@media (max-width: 560px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
  footer p.f-desc {
    max-width: none;
  }
  footer ul a,
  .f-address-text {
    overflow-wrap: anywhere;
  }
}

/* =========================================================
   404 page — branded "off the chart" treatment
   ========================================================= */
.notfound {
  padding: clamp(120px, 18vh, 200px) 0 var(--sp-9);
  min-height: min(80vh, 760px);
  display: flex;
  align-items: center;
  position: relative;
}
.notfound::before {
  /* Faint chart graticule echoing the home hero overlay */
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M80 0H0v80' fill='none' stroke='%23310fa0' stroke-width='0.5' stroke-opacity='0.05'/></svg>");
  background-size: 80px 80px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}
.notfound-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
}
.notfound-h1 {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--deep-ocean);
  margin: 0 0 var(--sp-5);
}
.notfound-h1 em {
  font-style: normal;
  color: var(--bright-red);
  font-weight: 400;
}
.notfound-lede {
  font-size: var(--fs-20);
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 var(--sp-6);
  max-width: 56ch;
}
.notfound-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}
/* Small heading above the quick-links grid — sits above the hairline rule
   so screen-reader users get a clear outline (h1 -> h2 -> ul). Visually
   subtle so it doesn't compete with the h1 above. */
.notfound-links-heading {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--sp-3) 0 var(--sp-3);
}
.notfound-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px var(--sp-5);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
}
.notfound-links li { margin: 0; }
.notfound-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--deep-ocean);
  padding: 8px 0;
  letter-spacing: -0.005em;
  transition: color 180ms var(--ease-out), gap 180ms var(--ease-out);
}
.notfound-links a span { color: var(--bright-red); transition: transform 220ms var(--ease-out); }
.notfound-links a:hover { color: var(--deep-ocean); }
.notfound-links a:hover span { transform: translateX(4px); }
@media (max-width: 640px) {
  .notfound { padding-top: 120px; padding-bottom: var(--sp-8); min-height: 0; }
  .notfound-h1 { font-size: clamp(32px, 9vw, 48px); }
  .notfound-actions { flex-direction: column; align-items: stretch; }
  .notfound-actions .btn { width: 100%; justify-content: center; }
}