/* ==========================================================================
   KTS CAPITAL LLC — Site Stylesheet
   Design tokens derive from KTS_Capital_Brand_Specification_v2 (July 2026).
   Palette, typography, and usage rules follow that document.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Core brand palette — Brand Spec §7. These four are the complete palette. */
  --navy:        #0A2E6E;
  --charcoal:    #1A1A1A;
  --gray:        #8D8F94;
  --white:       #FFFFFF;

  /* Derived tints & shades. Not new brand colors — mixes of the core four,
     used for surfaces, borders and interaction states only. */
  --navy-900:    #061B42;
  --navy-800:    #08245A;
  --navy-700:    #0A2E6E;
  --navy-600:    #123C88;
  --navy-050:    #EEF2F9;

  --ink:         #1A1A1A;
  --ink-muted:   #4A4D54;   /* Charcoal lightened; passes AA on white (7.6:1) */
  --ink-subtle:  #6B6E76;   /* AA on white (4.9:1) — smallest permitted body tone */

  --surface:     #FFFFFF;
  --surface-alt: #F6F7F9;
  --surface-deep:#0A2E6E;

  --rule:        #E2E5EB;
  --rule-strong: #C9CDD6;

  /* Accent — Aviation Gold, Brand Spec §8. ON TRIAL, pending Kell's decision.
     Used only for graphic rules and borders, never for text: on white it is
     ~2.4:1, which fails WCAG AA for any type. To pull it back out, set both
     of these to var(--navy) / #fff and nothing else needs to change. */
  --gold:        #C9A227;
  --accent-rule:       var(--gold);
  --accent-rule-light: var(--gold);

  /* Type */
  --font-display: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", "Calibri", system-ui, sans-serif;

  --fs-display: clamp(2.75rem, 6.4vw, 5.25rem);
  --fs-h1:      clamp(2.25rem, 5vw,   3.75rem);
  --fs-h2:      clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h3:      clamp(1.1875rem, 1.7vw, 1.4375rem);
  --fs-lead:    clamp(1.0625rem, 1.45vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.75rem;

  /* Space — 8px base, geometric progression */
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-section: clamp(4.5rem, 9vw, 8.5rem);

  --container: 1240px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --nav-h: 76px;

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

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  /* Safety net against horizontal scroll. `clip` rather than `hidden` — `hidden`
     creates a scroll container and breaks position:sticky on the header. */
  overflow-x: clip;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.021em;
  line-height: 1.08;
  margin: 0 0 var(--sp-6);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.012em; line-height: 1.25; margin-bottom: var(--sp-3); }

p { margin: 0 0 var(--sp-6); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-12) 0; }

::selection { background: var(--navy); color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--navy); color: #fff; padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none; transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--sp-section); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--alt { background: var(--surface-alt); }
.section--navy {
  background: var(--navy);
  color: rgba(255,255,255,0.86);
}
.section--navy h2, .section--navy h3 { color: #fff; }
/* :not(.btn) is load-bearing. Without it this rule outranks .btn--light's own
   colour (0,2,0 vs 0,1,0) and paints white text on a white button. */
.section--navy a:not(.btn) { color: #fff; }

.section + .section--alt,
.section--alt + .section { border-top: 1px solid var(--rule); }

/* Sections carrying a single statement rather than a list. Vertical frame is
   scaled to the content it holds — a one-line statement in the full section
   padding reads as lost, while a dense section needs the full measure. */
.section--sparse { padding-block: clamp(2.75rem, 4.6vw, 4.25rem); }

/* When a page hero carries no subhead, the headline's bottom margin has nothing
   after it to absorb and pushes the block 24px deeper than every other hero.
   Only matches when the headline is genuinely the last thing in the hero. */
.page-hero h1:last-child { margin-bottom: 0; }

/* Editorial two-column: sticky heading beside flowing content */
.split {
  display: grid;
  gap: var(--sp-8) var(--sp-16);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-16); }
  .split__aside { position: sticky; top: calc(var(--nav-h) + var(--sp-8)); align-self: start; }
}

/* Variant for a split whose aside holds only a label. The default 5fr column
   strands a single word across 40% of the page; 2fr keeps the label beside
   its statement instead of across from it. */
@media (min-width: 900px) {
  .split--tight { grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: var(--sp-12); }
}

/* Section header: heading left, supporting copy right. Use this INSTEAD of
   nesting a card grid inside .split — a 3-col grid inside the 7fr column
   collapses each card to ~230px and the type falls apart. */
.section-head { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sp-16);
    /* `end` bottom-aligns the columns, which pushes the shorter heading column
       down and opens a dead gap above the eyebrow. Top-align instead. */
    align-items: start;
  }
}
.section-head h2 { margin-bottom: 0; }

/* Full-width note beneath a card grid */
.note-band {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 2px solid var(--navy);
  display: grid; gap: var(--sp-4);
}
@media (min-width: 900px) {
  .note-band { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-16); align-items: start; }
}
.note-band h3 { margin-bottom: 0; }

.grid { display: grid; gap: var(--sp-8); }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHIC COMPONENTS
   -------------------------------------------------------------------------- */

/* Eyebrow — small, wide-tracked, uppercase. The "engineering label" device. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin: 0 0 var(--sp-6);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--accent-rule);
  flex: none;
}
.eyebrow--light { color: rgba(255,255,255,0.7); }
.eyebrow--light::before { background: var(--accent-rule-light); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 62ch;
}
.section--navy .lead { color: rgba(255,255,255,0.82); }

.muted { color: var(--ink-muted); }
.small { font-size: var(--fs-sm); }

/* Numbered index used on Services / Values — evokes a spec document */
.index-num {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 1.05rem 1.75rem;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { background: var(--navy-600); border-color: var(--navy-600); }
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; transition: transform .28s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--navy-050); border-color: var(--navy); color: var(--navy); }

.btn--light { background: #fff; color: var(--navy); border-color: #fff; }
.btn--light:hover { background: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.88); color: var(--navy); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--outline-light:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }
@media (min-width: 900px) { .btn-row--end { justify-content: flex-end; } }

/* Inline arrow link */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.03em; color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--rule-strong); padding-bottom: 3px;
  transition: border-color .22s var(--ease);
}
.link-arrow:hover { border-color: var(--navy); }
.link-arrow svg { transition: transform .28s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  /* Was backdrop-filter: blur(14px). On a white page it was visually almost
     free but cost a full-width composite every scroll frame. Solid instead. */
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 24px rgba(10,46,110,0.05);
}

/* space-between would strand the CTA against the far right with a dead gap
   after the last link. Group links + CTA together and push the group right. */
.nav {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: flex-start;
  gap: var(--sp-8);
}
.nav__links { margin-left: auto; }
.nav__toggle { margin-left: auto; }
@media (min-width: 1040px) { .nav__toggle { margin-left: 0; } }

.brand {
  display: inline-flex; align-items: center; gap: 0.7rem;
  text-decoration: none;
  /* Must be allowed to shrink, or the nowrap wordmark forces document overflow
     on narrow viewports. */
  flex: 0 1 auto; min-width: 0;
}
.brand img { height: 30px; width: auto; flex: none; }
.brand__text {
  display: flex; flex-direction: column; line-height: 1;
  font-family: var(--font-display);
}
.brand__name {
  font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.17em;
  color: var(--navy); white-space: nowrap;
}
.brand__name span { font-weight: 400; color: var(--charcoal); }
/* The tagline is ~230px at its tracking — too wide to sit beside a hamburger
   on a 375px viewport. Hidden until there is room for it. */
.brand__tag { display: none; }
@media (min-width: 600px) {
  .brand__tag {
    display: block;
    font-size: 0.5rem; font-weight: 600; letter-spacing: 0.19em;
    color: var(--ink-subtle); margin-top: 5px; white-space: nowrap;
  }
}

/* Breakpoint raised from 940px to 1040px when Insights was added — five items
   plus the wordmark and CTA no longer fit inside the container at 940. */
.nav__links { display: none; align-items: center; gap: var(--sp-6); }
@media (min-width: 1040px) { .nav__links { display: flex; } }

.nav__link {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink); text-decoration: none;
  padding-block: 0.4rem;
  transition: color .2s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--navy);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease-out);
}
.nav__link:hover { color: var(--navy); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--navy); font-weight: 600; }

.nav__cta { display: none; }
@media (min-width: 1040px) { .nav__cta { display: inline-flex; padding: 0.8rem 1.35rem; } }

/* Mobile toggle + panel */
.nav__toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; margin-right: -10px;
  background: none; border: 0; cursor: pointer;
}
@media (min-width: 1040px) { .nav__toggle { display: none; } }
/* :not(.visually-hidden) is load-bearing. The button also contains a hidden
   "Menu" label; without the exclusion this rule outranks .visually-hidden's
   width:1px and stretches that label to the full header width. */
.nav__toggle span:not(.visually-hidden) {
  display: block; height: 2px; width: 100%; background: var(--navy);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__panel {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 99;
  background: #fff;
  padding: var(--sp-8) var(--gutter) var(--sp-16);
  display: flex; flex-direction: column; gap: var(--sp-2);
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav__panel.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1040px) { .nav__panel { display: none; } }
/* :not(.btn) again — this rule would otherwise paint the panel's CTA button
   navy-on-navy and give it a stray bottom border. */
.nav__panel a:not(.btn) {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--navy); text-decoration: none;
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule);
}
.nav__panel .btn { margin-top: var(--sp-8); justify-content: center; }
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 11vw, 9.5rem) clamp(4rem, 10vw, 8rem);
  background: var(--surface);
}
.hero__grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(10,46,110,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,46,110,0.055) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 90% 75% at 72% 32%, #000 5%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 72% 32%, #000 5%, transparent 72%);
}
/* The arrowhead sits at ~89% of the artwork's width. Any negative `right`
   large enough to matter pushes it off-screen — which is what was clipping the
   focal point of the graphic. Anchored to the gutter instead, and sized so it
   clears the 44rem text column on wide screens. */
.hero__art {
  position: absolute; z-index: 0; pointer-events: none;
  /* Align the artwork's right edge to the CONTAINER's right edge, not the
     viewport's. Anchoring to the viewport pushed it into the far margin where
     it read as clipped and sat off the layout grid entirely. */
  right: max(var(--gutter), calc(50% - (var(--container) / 2)));
  top: 50%;
  transform: translateY(-56%);
  width: min(460px, 34vw);
  opacity: 0.95;
}
@media (max-width: 1240px) {
  .hero__art { width: min(360px, 33vw); opacity: 0.9; transform: translateY(-60%); }
}
/* Below ~1100px there is no room beside the text column, so the artwork stops
   being a background element and becomes a block in the flow, between the
   buttons and the practice-area list. Capped at 460px — the desktop size — so
   it never renders larger on a small screen than it does on a large one. */
@media (max-width: 1100px) {
  .hero__art {
    display: block; position: static; opacity: 1; transform: none;
    width: min(86%, 460px);
    margin: clamp(2rem, 6vw, 3.5rem) 0 0 auto;
  }
}

/* 40rem, not 44rem — the wider column left no clearance for the artwork
   between ~1100px and ~1300px. */
.hero__inner { position: relative; z-index: 1; max-width: 40rem; }

.hero__title {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.032em;
  margin-bottom: var(--sp-8);
}
.hero__title em {
  font-style: normal;
  color: var(--charcoal);
}

.hero__meta {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--rule);
  display: grid; gap: var(--sp-8);
  position: relative; z-index: 1;
}
@media (min-width: 760px) { .hero__meta { grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); } }
.hero__meta dt {
  font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-subtle);
  margin-bottom: var(--sp-3);
}
.hero__meta dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.55; }

/* Page hero (interior pages) */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--navy);
  color: #fff;
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3.5rem, 8vw, 6.5rem);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 80% 90% at 88% 20%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 88% 20%, #000 0%, transparent 70%);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lead { color: rgba(255,255,255,0.8); }

/* --------------------------------------------------------------------------
   8. CARDS & LISTS
   -------------------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  padding: var(--sp-8);
  background: #fff;
  border: 1px solid var(--rule);
  transition: border-color .28s var(--ease), transform .28s var(--ease-out),
              box-shadow .28s var(--ease);
}
.card:hover {
  border-color: var(--navy);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(10,46,110,0.07);
}
.card__num {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.14em; color: var(--ink-subtle); margin-bottom: var(--sp-6);
  font-variant-numeric: tabular-nums;
}
.card h3 { margin-bottom: var(--sp-4); }
.card p { font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: var(--sp-6); }
.card .link-arrow { margin-top: auto; align-self: flex-start; }

.card--flat { border: 0; padding: 0; background: transparent; }
.card--flat:hover { transform: none; box-shadow: none; }
.card--flat { border-top: 2px solid var(--navy); padding-top: var(--sp-6); }

/* Value / principle rows */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid; gap: var(--sp-4);
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
@media (min-width: 860px) {
  .row { grid-template-columns: 4rem minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-8); }
}
.row h3 { margin: 0; }
.row p { margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); }
.section--navy .rows,
.section--navy .row { border-color: rgba(255,255,255,0.16); }
.section--navy .row p { color: rgba(255,255,255,0.76); }
.section--navy .index-num { color: rgba(255,255,255,0.55); }

/* Capability checklist */
.checks { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: var(--sp-3); }
.checks li {
  position: relative; padding-left: 1.75rem;
  font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.55;
}
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 9px; height: 9px; border: 2px solid var(--navy);
}
.section--navy .checks li { color: rgba(255,255,255,0.78); }
.section--navy .checks li::before { border-color: #fff; }

/* Stat band */
.stats { display: grid; gap: var(--sp-8); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); } }
.stat { border-top: 2px solid var(--accent-rule); padding-top: var(--sp-6); }
.section--navy .stat { border-top-color: var(--accent-rule-light); }
.stat__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1;
  color: var(--navy); letter-spacing: -0.03em; margin-bottom: var(--sp-3);
}
.section--navy .stat__value { color: #fff; }
.stat__label { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.5; }
.section--navy .stat__label { color: rgba(255,255,255,0.76); }

/* Pull quote / statement block */
.statement {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.1vw, 2.375rem);
  font-weight: 600; line-height: 1.24; letter-spacing: -0.022em;
  color: var(--navy); max-width: 22ch;
  text-wrap: balance;
}
.section--navy .statement { color: #fff; }

/* Compliance chain — requirement → means of compliance → evidence → closure.
   The spine of the discipline, rendered as a four-step sequence. */
.chain {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-8);
}
@media (min-width: 940px) {
  .chain { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8); }
}
.chain__step {
  position: relative;
  padding-top: var(--sp-6);
  border-top: 2px solid var(--accent-rule);
}
.chain__num {
  display: block;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.14em; color: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-4);
}
.chain__step h3 { margin-bottom: var(--sp-3); }
.chain__step p { font-size: var(--fs-sm); color: var(--ink-muted); margin: 0; }

/* Connector between steps. Horizontal on desktop, vertical on stacked layout. */
.chain__step:not(:last-child)::after {
  content: "";
  position: absolute;
  border-right: 1.5px solid var(--rule-strong);
  border-bottom: 1.5px solid var(--rule-strong);
  width: 8px; height: 8px;
}
@media (max-width: 939px) {
  .chain__step:not(:last-child)::after {
    left: 12px; bottom: calc(var(--sp-8) / -2 - 4px);
    transform: rotate(45deg);
  }
}
@media (min-width: 940px) {
  .chain__step:not(:last-child)::after {
    top: calc(var(--sp-6) + 0.15em);
    right: calc(var(--sp-8) / -2 - 4px);
    transform: rotate(-45deg);
  }
}

.section--navy .chain__step { border-top-color: var(--accent-rule-light); }
.section--navy .chain__step p { color: rgba(255,255,255,0.76); }
.section--navy .chain__num { color: rgba(255,255,255,0.55); }
.section--navy .chain__step:not(:last-child)::after {
  border-color: rgba(255,255,255,0.4);
}

/* Pull quote — a single accented rule, the firm's voice in the founder's words */
.quote {
  margin: var(--sp-12) 0;
  padding-left: var(--sp-6);
  border-left: 3px solid var(--accent-rule);
}
.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 600; line-height: 1.3; letter-spacing: -0.018em;
  color: var(--navy); margin: 0; max-width: 30ch;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   9. PROFILE (Leadership)
   -------------------------------------------------------------------------- */
.profile { display: grid; gap: var(--sp-8); align-items: start; }
/* The bio column runs roughly four times the height of the photo. Left static,
   the photo scrolls away after the first paragraph and leaves a tall empty
   column beside the rest of the text; sticky keeps the face with the words. */
@media (min-width: 860px) {
  .profile > div:first-child {
    position: sticky; top: calc(var(--nav-h) + var(--sp-8)); align-self: start;
  }
}
@media (min-width: 860px) {
  .profile { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--sp-16); }
}
.profile__photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--surface-alt); border: 1px solid var(--rule);
}
.profile__name { margin-bottom: var(--sp-2); }
.profile__role {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-subtle);
  margin-bottom: var(--sp-8);
}

/* Capability index — the full long tail, grouped and scannable */
.capabilities { display: grid; gap: var(--sp-8); }
@media (min-width: 700px)  { .capabilities { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-8) var(--sp-12); } }
@media (min-width: 1040px) { .capabilities { grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-8) var(--sp-12); } }
.capability h4 {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--navy);
  margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--accent-rule);
}
.capability ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.capability li { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   9b. INSIGHTS — article index and article pages
   -------------------------------------------------------------------------- */
.post-list { border-top: 1px solid var(--rule); }
.post {
  display: grid; gap: var(--sp-3);
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
@media (min-width: 860px) {
  .post { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--sp-8); }
}
.post__date {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-subtle);
}
.post h3 { margin-bottom: var(--sp-3); }
.post h3 a { color: var(--navy); text-decoration: none; }
.post h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.post p { font-size: var(--fs-sm); color: var(--ink-muted); margin: 0 0 var(--sp-4); }

/* Article body — a single measured prose column */
.article { max-width: 42rem; }
.article__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: rgba(255,255,255,0.65);
  margin-top: var(--sp-8);
}
.article__body > * + * { margin-top: var(--sp-6); }
.article__body p { font-size: 1.125rem; line-height: 1.72; max-width: none; }
.article__body h2 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-12); margin-bottom: 0;
}
.article__body h2 + p { margin-top: var(--sp-4); }
.article__body .lead { font-size: var(--fs-lead); max-width: none; }
.article__body ul { list-style: none; padding: 0; margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.article__body li {
  position: relative; padding-left: 1.5rem;
  font-size: 1.0625rem; line-height: 1.65; color: var(--ink-muted);
}
.article__body li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 7px; height: 7px; border: 2px solid var(--accent-rule);
}
.article__rule { border: 0; border-top: 2px solid var(--accent-rule); width: 64px; margin: var(--sp-12) 0; }

.article__footer {
  margin-top: var(--sp-16); padding-top: var(--sp-8);
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   10. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-6); }
.field { display: grid; gap: var(--sp-2); }
.field label {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-muted);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink);
  padding: 0.9rem 1rem; background: #fff;
  border: 1px solid var(--rule-strong); border-radius: 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  width: 100%;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10,46,110,0.12);
}
.field__hint { font-size: var(--fs-xs); color: var(--ink-subtle); }
@media (min-width: 700px) { .form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }

.contact-detail { border-top: 1px solid var(--rule); padding-top: var(--sp-6); margin-bottom: var(--sp-8); }
.contact-detail dt {
  font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-subtle);
  margin-bottom: var(--sp-2);
}
.contact-detail dd { margin: 0; font-size: var(--fs-body); }
.contact-detail dd a { text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.contact-detail dd a:hover { border-color: var(--navy); }

/* --------------------------------------------------------------------------
   11. CTA BAND & FOOTER
   -------------------------------------------------------------------------- */
/* The closing call to action sits on a pale navy tint rather than on navy. It
   follows the navy Track Record band and precedes the navy-900 footer; on the
   same navy as either it disappeared into them and the page ended in one
   undifferentiated block. The blue cast keeps it in the navy family instead of
   reading as a foreign stripe. */
.cta-band { background: var(--navy-050); color: var(--ink); position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(10,46,110,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,46,110,0.07) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 70% 120% at 92% 50%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 120% at 92% 50%, #000 0%, transparent 70%);
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-band h2 { color: var(--navy); max-width: 18ch; }
.cta-band p { color: var(--ink-muted); }

/* Bottom padding of the band directly above the call to action. Its padding and
   the CTA's stack, and the pair sat too far apart. */
.section--to-cta { padding-bottom: clamp(3rem, 6vw, 5.5rem); }

.site-footer { background: var(--navy-900); color: rgba(255,255,255,0.7); }
/* Same guard as .section--navy and .nav__panel — keep descendant link colours
   away from buttons, which own their own palette. */
.site-footer a:not(.btn) { color: rgba(255,255,255,0.7); text-decoration: none; }
.site-footer a:not(.btn):hover { color: #fff; }

.footer__top {
  display: grid; gap: var(--sp-12);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 860px) {
  .footer__top { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: var(--sp-16); }
}
.footer__brand img { height: 34px; width: auto; margin-bottom: var(--sp-6); }
.footer__brand p { font-size: var(--fs-sm); max-width: 34ch; color: rgba(255,255,255,0.6); }

.footer__col h4 {
  font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5);
  margin-bottom: var(--sp-6);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.footer__col li { font-size: var(--fs-sm); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.13);
  padding-block: var(--sp-6);
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8);
  justify-content: space-between; align-items: center;
  font-size: var(--fs-xs); color: rgba(255,255,255,0.5);
}
.footer__tagline { letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-display); font-weight: 600; }

/* At narrow widths the 88px grid is large relative to the mask ellipse, so the
   fade terminates mid-square and reads as a hard-edged rectangle rather than a
   gradient. Finer grid + a mask that runs all the way to transparent. */
@media (max-width: 760px) {
  .hero__grid-bg,
  .page-hero::after,
  .cta-band::after {
    background-size: 44px 44px;
  }
  .page-hero::after,
  .cta-band::after {
    mask-image: radial-gradient(ellipse 110% 85% at 88% 8%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 110% 85% at 88% 8%, #000 0%, transparent 100%);
  }
  .hero__grid-bg {
    mask-image: radial-gradient(ellipse 110% 70% at 70% 30%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 110% 70% at 70% 30%, #000 0%, transparent 100%);
  }
}

/* --------------------------------------------------------------------------
   12. MOTION — "minimal but tasteful"
   -------------------------------------------------------------------------- */
/* Scoped to .js so that if JavaScript fails or is blocked, nothing is hidden.
   The class is set by an inline script in <head> before first paint. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

.hero__art [data-draw] {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  animation: draw 1.9s var(--ease-out) forwards;
  animation-delay: var(--draw-delay, 0.25s);
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* The paper aircraft fades in with CSS only — it must NOT use [data-reveal].
   That mechanism starts an element at opacity 0 and waits for JavaScript to
   add .is-visible via IntersectionObserver, and Safari does not reliably fire
   IntersectionObserver for elements inside an SVG. The result was a plane
   stuck at opacity 0 on iPhone while the contrails, which are pure CSS,
   drew normally. Keep this CSS-only. */
.hero__art [data-fade] {
  opacity: 0;
  animation: heroFade .7s var(--ease-out) forwards;
  animation-delay: .9s;
}
@keyframes heroFade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero__art [data-draw] { stroke-dashoffset: 0; }
  .hero__art [data-fade] { opacity: 1; animation: none; }
}

/* ==========================================================================
   Photography
   Bands are full-bleed and break the reading rhythm between sections.
   Splits sit an image beside text, inside the container, at a size the
   source resolution actually supports.
   ========================================================================== */
.photoband { margin: 0; }
.photoband img {
  display: block;
  width: 100%;
  height: clamp(15rem, 33vw, 30rem);
  object-fit: cover;
  object-position: center;
}

/* An image at container width, shown at its own proportion. For pictures whose
   subject is the whole frame — a band would cut the subject in half. */
.photoframe { margin: 0; }
.photoframe img { display: block; width: 100%; height: auto; }
.photoframe figcaption {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-subtle);
  line-height: 1.65;
  max-width: 64ch;
}

/* ==========================================================================
   Diagrams
   Built as page content, not pictures: real text, sharp at any zoom, reflows
   on phones. Ported from the diagrams.html staging page.
   ========================================================================== */

/* ==========================================================================
   KTS diagram system, v3. Rebuilt against the reference set.
   Page content, not pictures: real text, sharp at any zoom, reflows on phones.
   ========================================================================== */
.dgm{--bd:#DDE1E9;--bd-soft:#EDEFF3;--panel:#fff;--ink2:#4A4D54;
     --sh:0 1px 2px rgba(10,46,110,.05),0 10px 30px rgba(10,46,110,.06)}
/* A diagram embedded inside an existing page section: no ground of its own, a
   heading scaled to sit under the section's h2 rather than compete with it. */
.dgm--embed{margin-top:clamp(3rem,6vw,5rem)}
.dgm--embed .dgm__title{font-size:clamp(1.375rem,2.1vw,1.75rem);letter-spacing:-.015em}
.dgm--embed .dgm__head{margin-bottom:clamp(2rem,4vw,3rem)}
.dgm--embed .dgm__orn i{width:min(140px,18vw)}
/* site.css sets p{max-width:68ch;margin-bottom} globally — that constrains and
   off-centres every centred line in here. Reset within diagrams only. */
.dgm p{max-width:none;margin:0}

/* ---------- shared header ---------- */
.dgm__head{text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.dgm__title{font-family:var(--font-display);font-weight:700;color:var(--navy);
  font-size:clamp(1.75rem,3.6vw,2.75rem);letter-spacing:-.025em;line-height:1.1;margin:0}
.dgm__orn{display:flex;align-items:center;justify-content:center;gap:var(--sp-6);margin:var(--sp-6) 0}
.dgm__orn i{display:block;height:1px;background:var(--gold);width:min(200px,24vw);opacity:.85}
.dgm__orn svg{width:60px;height:24px;color:var(--gold);flex:none}
.dgm__sub{font-size:clamp(1rem,1.4vw,1.1875rem);color:var(--ink-subtle);margin:0}

/* ---------- shared cards ---------- */
.dcard{background:var(--panel);border:1px solid var(--bd);border-radius:16px;box-shadow:var(--sh)}
.flow{display:grid;gap:var(--sp-12)}
@media(min-width:1040px){.flow{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:var(--sp-8)}}
.step{position:relative;padding:var(--sp-12) var(--sp-6) var(--sp-8);display:flex;flex-direction:column}
.step__n{position:absolute;top:-21px;left:50%;transform:translateX(-50%);
  width:42px;height:42px;border-radius:50%;background:var(--navy);color:var(--gold);
  font-family:var(--font-display);font-weight:700;font-size:17px;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(10,46,110,.28)}
.step h3{font-size:1.125rem;line-height:1.28;text-align:center;margin:0 0 var(--sp-4);color:var(--navy)}
.step__rule{height:1.5px;background:var(--gold);opacity:.9;margin:0 0 var(--sp-6)}
.step__note{font-size:var(--fs-sm);color:var(--ink-muted);line-height:1.6;margin:var(--sp-6) 0 0;text-align:center}
.hero-ico{display:block;margin:var(--sp-4) auto var(--sp-6);width:96px;height:96px}
/* 5 across in a 1240px container leaves ~200px per cell; scale the furniture down. */
.flow--tight{gap:var(--sp-6)}
.flow--tight .step{padding:var(--sp-12) var(--sp-4) var(--sp-6)}
.flow--tight .badge{width:38px;height:38px}
.flow--tight .badge svg{width:20px;height:20px}
.flow--tight .line-ico{width:30px;height:30px}
.flow--tight .panel li{padding:var(--sp-3);gap:var(--sp-3)}
.flow--tight .tbl th,.flow--tight .tbl td{padding:var(--sp-3) var(--sp-2)}
.flow--tight .tbl .lvl{width:2.75rem;font-size:1.15rem}
.flow--tight h3{font-size:1.0625rem}
/* the 5-wide layout needs more room than the 4-wide one. Below 1240px a cell is
   too narrow for "No safety effect" on one line, so hold 2-up until then. */
/* Two intermediate steps so a 4-across row never becomes 4 full-width slabs
   on a tablet. Arrows are only drawn when the row is genuinely a single row. */
@media(min-width:620px) and (max-width:1039px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8)}
}
@media(min-width:1040px) and (max-width:1239px){
  .flow--tight{grid-template-columns:repeat(2,1fr);gap:var(--sp-12)}
  .flow--tight .step:not(:last-child)::after,
  .flow--tight .step:not(:last-child)::before{display:none}
}
@media(min-width:1240px){
  .flow--tight{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* Connector arrow. The shaft spans the column gap inset 5px at each end; the
   head is a chevron whose tip lands exactly on the shaft's right end, so the
   shaft never pokes through it and never touches the next card. */
@media(min-width:1040px){
  .flow:not(.flow--tight){--gap:32px}
  .flow--tight{--gap:24px}
  .step:not(:last-child)::after{content:"";position:absolute;top:50%;margin-top:-1px;
    right:calc(7px - var(--gap));width:calc(var(--gap) - 12px);height:2px;background:var(--navy)}
  .step:not(:last-child)::before{content:"";position:absolute;top:50%;z-index:1;
    right:calc(6.9px - var(--gap));width:9px;height:9px;
    border-top:2px solid var(--navy);border-right:2px solid var(--navy);
    transform:translateY(-50%) rotate(45deg)}
}

/* gold-dot bullet list (diagram 1) */
.dots{list-style:none;margin:0;padding:0}
.dots li{position:relative;padding:var(--sp-4) 0 var(--sp-4) var(--sp-8);
  border-bottom:1px solid var(--bd-soft);font-size:var(--fs-sm);color:var(--ink2);line-height:1.45}
.dots li:last-child{border-bottom:0;padding-bottom:0}
.dots li::before{content:"";position:absolute;left:var(--sp-3);top:1.35em;
  width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* badge list (diagrams 2 & 3) */
.panel{border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.panel ul{list-style:none;margin:0;padding:0}
.panel li{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4);
  border-bottom:1px solid var(--bd-soft);font-size:var(--fs-sm);color:var(--ink);line-height:1.35}
.panel li:last-child{border-bottom:0}
.panel li>span:not(.badge){flex:1;min-width:0}  /* label wraps; the badge must not grow */
.badge{flex:none;width:40px;height:40px;border-radius:50%;background:var(--navy);
  display:grid;place-items:center}
.badge svg{width:21px;height:21px;color:#fff}
.line-ico{flex:none;width:34px;height:34px;color:var(--navy)}

/* severity → level table */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);
  border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.tbl th{background:var(--navy);color:#fff;font-family:var(--font-display);font-size:var(--fs-xs);
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding:var(--sp-4);text-align:left}
.tbl th:last-child{text-align:center}
.tbl th:first-child{border-right:1px solid rgba(255,255,255,.22)}
.tbl td:first-child{border-right:1px solid var(--bd-soft)}
.tbl td{padding:var(--sp-4);border-bottom:1px solid var(--bd-soft);color:var(--ink)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:nth-child(even){background:#FAFBFC}
.tbl .lvl{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--gold);
  text-align:center;width:4.5rem}

/* ---------- diagram 2: traceability layout ---------- */
.trace{display:grid;gap:var(--sp-8)}
/* Three columns once there is room: validation rail, the decomposition, verification
   rail. Below 1240px all three stack in reading order. */
@media(min-width:1240px){.trace{grid-template-columns:165px minmax(0,1fr) 165px;gap:40px;align-items:start}}
.aside{text-align:center}
.aside .badge{width:62px;height:62px;margin:0 auto var(--sp-4)}
.aside .badge svg{width:30px;height:30px}
.aside h3{font-size:1.25rem;line-height:1.25;color:var(--navy);margin:0 0 var(--sp-6)}
.aside ul{list-style:none;margin:0;padding:0;text-align:left}
.aside li{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) 0;
  border-bottom:1px solid var(--bd);font-size:var(--fs-sm);color:var(--ink)}
.aside li:last-child{border-bottom:0}
.aside li svg{flex:none;width:26px;height:26px;color:var(--gold)}
/* Gold dashed elbows: each one runs vertically to the rail, then turns right and
   points at the tier it applies to — the aircraft bar above, the item row below.
   Hidden below 1040px, where the rail sits above the diagram rather than beside it. */
.aside__dash{display:none}
@media(min-width:1240px){
  .aside__dash{display:block;position:relative}
  .aside__dash::before{content:"";position:absolute;left:50%;transform:translateX(-50%);width:2px;
    background-image:linear-gradient(var(--gold) 55%,transparent 0);background-size:2px 11px}
  .aside__dash::after{content:"";position:absolute;left:50%;height:2px;width:calc(50% + 25px);
    background-image:linear-gradient(to right,var(--gold) 55%,transparent 0);background-size:11px 2px}
  .aside__dash i{position:absolute;left:calc(100% + 25px);width:9px;height:9px;
    border-top:2px solid var(--gold);border-right:2px solid var(--gold);
    transform:translate(-4px,-3.5px) rotate(45deg)}
  .aside__dash--t{height:56px}
  .aside__dash--t::before{top:39px;bottom:0}
  .aside__dash--t::after{top:39px}
  .aside__dash--t i{top:39px}
  .aside--r .aside__dash::after{left:auto;right:50%}
  .aside--r .aside__dash i{left:auto;right:calc(100% + 25px);
    border-right:0;border-left:2px solid var(--gold);
    transform:translate(4px,-3.5px) rotate(-45deg)}
  .aside__dash--b{height:215px}
  .aside__dash--b::before{top:0;height:191px}
  .aside__dash--b::after{top:191px}
  .aside__dash--b i{top:191px}
}
.tier__bar{background:var(--navy);color:#fff;padding:var(--sp-4) var(--sp-6);
  font-family:var(--font-display);font-weight:700;font-size:1.0625rem;
  display:flex;align-items:center;gap:var(--sp-4)}
.tier__bar svg{width:34px;height:34px;color:#fff;flex:none}
.tier{overflow:hidden}
.tier__cols{display:grid}
@media(min-width:640px){.tier__cols{grid-template-columns:repeat(3,1fr)}}
.tier__col{padding:var(--sp-6);text-align:center;border-bottom:1px solid var(--bd-soft)}
@media(min-width:640px){.tier__col{border-bottom:0;border-right:1px solid var(--bd-soft)}
  .tier__col:last-child{border-right:0}}
/* site.css sets svg{display:block}, so text-align cannot centre these — they were
   sitting hard against the left padding while the label under them was centred. */
.tier__col svg{width:34px;height:34px;color:var(--gold);margin:0 auto var(--sp-3)}
.tier__col span{display:block;font-size:var(--fs-sm);color:var(--ink)}
.tier__body{padding:var(--sp-4) var(--sp-6);font-size:var(--fs-sm);color:var(--ink-muted);text-align:center}
/* Top tier only. It is the widest card in the diagram, so its icons are sized to
   carry that width instead of floating in it. Scoped so the three system cards
   below are untouched. */
.tier--top .tier__bar svg{width:44px;height:44px}
.tier--top .tier__col{padding:var(--sp-8) var(--sp-6) var(--sp-6)}
.tier--top .tier__col svg{width:68px;height:68px;margin-bottom:var(--sp-4)}
.row3{display:grid;gap:var(--sp-6)}
@media(min-width:760px){.row3{grid-template-columns:repeat(3,1fr)}}
.row6{display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.row6{grid-template-columns:repeat(6,1fr)}}
.itemcard{padding:var(--sp-6) var(--sp-3);text-align:center;border-radius:12px}
.itemcard .badge{width:56px;height:56px;margin:0 auto var(--sp-3)}
.itemcard .badge svg{width:30px;height:30px}
.itemcard strong{display:block;font-family:var(--font-display);font-size:var(--fs-sm);color:var(--navy)}
.itemcard span{font-size:var(--fs-xs);color:var(--ink-subtle)}

/* branching connectors */
.branch{position:relative;height:60px}
.branch u,.branch s{position:absolute;left:var(--x);width:2px;background:var(--navy);
  transform:translateX(-50%);text-decoration:none}
/* The shaft stops 2px short of its own box so its flat end finishes inside the
   chevron's stroke instead of protruding through the point. */
.branch s{padding-bottom:2px;background-clip:content-box}
.branch u{top:5px;height:25px}
.branch s{top:30px;bottom:7px}
.branch s::after{content:"";position:absolute;left:50%;bottom:1.9px;width:9px;height:9px;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
  transform:translate(-50%,0) rotate(45deg)}
.branch i{position:absolute;top:28px;height:2px;background:var(--navy);left:var(--l);right:var(--r)}
.branch--solo u,.branch--solo s{--x:50%}
@media(max-width:759px){
  .branch u,.branch s,.branch i{display:none}
  .branch::before{content:"";position:absolute;left:50%;top:5px;bottom:7px;width:2px;
    background:var(--navy);background-clip:content-box;padding-bottom:2px;
    transform:translateX(-50%)}
  .branch::after{content:"";position:absolute;left:50%;bottom:8.9px;width:9px;height:9px;
    border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
    transform:translate(-50%,0) rotate(45deg)}
}

/* names the item tier once, the way the two tiers above name themselves */
.tierlabel{display:flex;align-items:center;justify-content:center;gap:var(--sp-6);
  margin-top:var(--sp-6)}
.tierlabel i{display:block;height:1px;flex:1;max-width:150px;background:var(--gold);opacity:.65}
.tierlabel span{font-family:var(--font-display);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-subtle);white-space:nowrap}


/* ---------- diagram 4: the timing chart (under review, not yet placed) ---------- */
.figure{margin:0}
.figure svg{display:block;width:100%;height:auto}
.figure figcaption{margin:var(--sp-8) auto 0;font-size:var(--fs-sm);color:var(--ink-subtle);
  line-height:1.65;max-width:70ch;text-align:center}
/* Label sizes are in viewBox units so they shrink with the drawing. Below 760px the
   full labels fall under about 7px on screen; a shorter set is swapped in instead. */
.dg-phase{font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;fill:#6B6E76}
.dg-axis{font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;fill:#6B6E76}
.dg-series{font-family:var(--font-display);font-size:15px;font-weight:700}
.dg-note{font-family:var(--font-body);font-size:14px;fill:#4A4D54}
.dg-freeze{font-family:var(--font-display);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;fill:#6B6E76}
.dg-compact{display:none}
@media(max-width:760px){
  .dg-full{display:none}
  .dg-compact{display:block}
  .dg-phase{font-size:30px;letter-spacing:.06em}
  .dg-series{font-size:32px}
  .dg-note{font-size:28px}
}

/* ---------- footnote bands ---------- */
.note{display:flex;gap:var(--sp-6);align-items:flex-start;background:#F5F6F8;
  border-radius:14px;padding:var(--sp-8);margin-top:clamp(2.5rem,5vw,4rem);
  font-size:var(--fs-sm);color:var(--ink-muted);line-height:1.65}
.note svg{flex:none;width:34px;height:34px;color:var(--gold)}
.note .bar{flex:none;width:2px;align-self:stretch;background:var(--gold);opacity:.6}
.note strong{color:var(--navy)}
.fn{display:flex;gap:var(--sp-3);align-items:flex-start;margin-top:var(--sp-6);
  font-size:var(--fs-sm);color:var(--ink-muted);font-style:italic;line-height:1.6}
.fn svg{flex:none;width:22px;height:22px;color:var(--gold);margin-top:1px}
.foot{display:flex;align-items:center;justify-content:center;gap:var(--sp-6);margin-top:clamp(2.5rem,5vw,4rem)}
.foot i{height:1px;flex:1;max-width:280px;background-image:linear-gradient(to right,#D8DCE4 40%,transparent 0);
  background-size:7px 1px;background-repeat:repeat-x}
.foot svg{width:30px;height:30px;color:var(--gold);flex:none}

/* Contact form confirmation message */
.form__status {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-4) var(--sp-6);
  border-left: 3px solid var(--gray);
  background: var(--navy-050);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  max-width: none;
}
.form__status--ok  { border-left-color: var(--accent-rule); color: var(--ink); }
.form__status--err { border-left-color: #B3261E; color: var(--ink); }