/* ==========================================================================
   VERITYN
   Design system + site styles
   Register: ivory field, navy ink, brass rules. Private-office / chambers.
   No frameworks, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --paper:        #FBF9F5;
  --ivory:        #F5F2EC;
  --ivory-deep:   #ECE7DC;
  --navy:         #16253B;
  --navy-deep:    #0E1826;
  --navy-mid:     #1D3049;

  /* Ink */
  --ink:          #16253B;
  --ink-muted:    #46546B;
  /* Faint tones are still body-sized text, so both variants clear WCAG AA (4.5:1)
     against the worst surface they sit on: ivory-deep and navy respectively. */
  --ink-faint:    #5C6879;   /* 5.06 on ivory, 4.59 on ivory-deep */
  --ink-invert:   #F2EFE9;
  --ink-invert-muted: #A9B3C1;
  --ink-faint-invert: #8792A3; /* 5.67 on navy-deep, 4.90 on navy */

  /* Brass */
  --brass:        #BDA26E;
  --brass-bright: #C9AF78;
  --brass-text:   #7A6432;   /* accessible brass for small text on ivory */

  /* Rules */
  --rule:         rgba(22, 37, 59, .14);
  --rule-strong:  rgba(22, 37, 59, .26);
  --rule-brass:   rgba(189, 162, 110, .55);
  --rule-invert:  rgba(242, 239, 233, .18);

  /* Type */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --fs-display:   clamp(2.9rem, 6.2vw, 5.5rem);
  --fs-h1:        clamp(2.2rem, 4.4vw, 3.6rem);
  --fs-h2:        clamp(1.7rem, 2.9vw, 2.6rem);
  --fs-h3:        clamp(1.2rem, 1.7vw, 1.5rem);
  --fs-lede:      clamp(1.1rem, 1.45vw, 1.35rem);
  --fs-body:      1.0625rem;
  --fs-small:     0.9375rem;
  --fs-micro:     0.75rem;

  /* Space */
  --gutter:       clamp(1.25rem, 5vw, 4.5rem);
  --shell:        1440px;
  --section-y:    clamp(4.5rem, 9vw, 9rem);
  --stack:        clamp(1.75rem, 3vw, 2.75rem);

  /* Motion */
  --ease:         cubic-bezier(.16, 1, .3, 1);
  --ease-soft:    cubic-bezier(.4, 0, .2, 1);
  --dur:          .5s;

  --header-h:     76px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 380;
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--brass); color: var(--navy-deep); }

:focus-visible {
  outline: 2px solid var(--brass-text);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--navy);
  color: var(--ink-invert);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 12px; }

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

/* --------------------------------------------------------------------------
   3. TYPE PRIMITIVES
   -------------------------------------------------------------------------- */
.display,
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.display { font-size: var(--fs-display); line-height: .98; letter-spacing: -0.032em; }
.h1      { font-size: var(--fs-h1);      line-height: 1.03; letter-spacing: -0.028em; }
.h2      { font-size: var(--fs-h2);      line-height: 1.1; }
.h3      { font-size: var(--fs-h3);      line-height: 1.25; letter-spacing: -0.015em; }

.display em, .h1 em, .h2 em, .h3 em {
  font-style: italic;
  font-weight: 300;
  color: var(--brass-text);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-text);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--brass);
  flex: none;
}
.eyebrow--bare::before { display: none; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 46ch;
  font-weight: 380;
}

.prose p { color: var(--ink-muted); max-width: 62ch; }
.prose p + p { margin-top: 1.15rem; }
.prose strong { color: var(--ink); font-weight: 550; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
}

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

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 5.5vw, 5.5rem); }

.section--deep   { background: var(--ivory-deep); }
.section--paper  { background: var(--paper); }

.section--navy,
.footer {
  /* Rebind the faint tone inside dark surfaces so every use of it, including
     inline styles, stays above 4.5:1 without being restated. */
  --ink-faint: var(--ink-faint-invert);
}

.section--navy {
  background: var(--navy-deep);
  color: var(--ink-invert);
}
.section--navy .lede,
.section--navy .prose p { color: var(--ink-invert-muted); }
.section--navy .eyebrow { color: var(--brass-bright); }
.section--navy .prose strong { color: var(--ink-invert); }

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

/* Sticky index rail + body: the "dossier" reading pattern */
.rail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.rail__label { grid-column: 1 / span 3; }
.rail__body  { grid-column: 5 / span 8; }

@media (min-width: 1024px) {
  .rail__label { position: sticky; top: calc(var(--header-h) + 3rem); align-self: start; }
}

.rail__label .index {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  color: var(--brass-text);
  display: block;
  margin-bottom: .6rem;
}
.rail__label .title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 20ch;
}

/* --------------------------------------------------------------------------
   4b. SERVICE ICONS + LIST MARKERS
   -------------------------------------------------------------------------- */
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.svc-icon {
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--brass-text);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.svc-icon--lg { width: 46px; height: 46px; }
.section--navy .svc-icon { color: var(--brass-bright); }

/* Checkmark for capability lists: things Verityn does, so a tick reads correctly */
.item-list .n::before {
  content: "";
  display: block;
  width: 10px;
  height: 5px;
  margin-top: .42em;
  border-left: 1.5px solid var(--brass-text);
  border-bottom: 1.5px solid var(--brass-text);
  transform: rotate(-45deg);
}
.section--navy .item-list .n::before { border-color: var(--brass-bright); }

/* Neutral marker for unordered prose lists, where a tick would be wrong */
.stack-ruled--plain > li { grid-template-columns: 1.5rem 1fr; }
.stack-ruled .marker::before {
  content: "";
  display: block;
  width: 9px;
  height: 1px;
  margin-top: .82em;
  background: var(--brass);
}

.rule-top    { border-top: 1px solid var(--rule); }
.rule-bottom { border-bottom: 1px solid var(--rule); }
.rule-brass  { border-top: 1px solid var(--rule-brass); }
.section--navy .rule-top,
.section--navy .rule-bottom { border-color: var(--rule-invert); }

/* --------------------------------------------------------------------------
   5. INCIDENT STRIP + HEADER
   -------------------------------------------------------------------------- */
/* Exists so the strip and the header can stick as one unit on mobile without
   measuring the strip, which wraps to two lines on narrow screens. On desktop
   it is display:contents, adding no box at all, so the header goes on sticking
   to the viewport instead of to a short parent. */
.topbar { display: contents; }

.incident {
  background: var(--navy-deep);
  color: var(--ink-invert);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.incident__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 38px;
  padding-block: .5rem;
}
.incident__pulse {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--ink-invert-muted);
}
.incident__pulse::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--brass);
  border-radius: 50%;
  animation: pulse 2.4s var(--ease-soft) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}
.incident__link {
  color: var(--brass-bright);
  border-bottom: 1px solid var(--brass-bright);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.incident__link:hover { color: var(--ink-invert); border-color: var(--ink-invert); }
.incident__region { color: var(--ink-invert-muted); }

.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--ivory);
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--rule-brass);
  background: rgba(245, 242, 236, .94);
}
@supports (backdrop-filter: blur(10px)) {
  .header.is-stuck { backdrop-filter: blur(10px); }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--header-h);
}

/* The full screen menu is a child of the header, so it shares the header's
   stacking context. Brand and toggle need to outrank it to stay visible and
   clickable while the menu is open. */
.brand { display: inline-flex; align-items: center; position: relative; z-index: 90; }
.brand img { height: 24px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem); }

.nav__link {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 420;
  color: var(--ink-muted);
  padding-block: .4rem;
  transition: color .3s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta {
  font-size: 0.875rem;
  font-weight: 450;
  letter-spacing: .01em;
  padding: .6rem 1.15rem;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.nav__cta span { position: relative; z-index: 1; }
.nav__cta::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--navy);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s var(--ease);
}
.nav__cta:hover { color: var(--ink-invert); border-color: var(--navy); }
.nav__cta:hover::before { transform: scaleY(1); }
.nav__cta:active { transform: translateY(1px); }

/* Toggle is the V mark from the logo, knocked through to ivory on a navy field
   when hovered or open. Two stacked layers rather than a swapped background
   image so both files are already decoded and the change cannot flash. */
.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  padding: 0;
  background: none;
  border: 1px solid var(--rule-strong);
  cursor: pointer;
  position: relative;
  z-index: 90;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .18s var(--ease-soft);
}
.nav__toggle-mark { position: relative; display: block; width: 22px; height: 22px; }
.nav__toggle-mark::before,
.nav__toggle-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity .35s var(--ease);
}
.nav__toggle-mark::before { background-image: url("../assets/verityn-mark.png"); }
.nav__toggle-mark::after  { background-image: url("../assets/verityn-mark-light.png"); opacity: 0; }

.nav__toggle:focus-visible,
.nav__toggle[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); }

.nav__toggle:focus-visible .nav__toggle-mark::before,
.nav__toggle[aria-expanded="true"] .nav__toggle-mark::before { opacity: 0; }

.nav__toggle:focus-visible .nav__toggle-mark::after,
.nav__toggle[aria-expanded="true"] .nav__toggle-mark::after { opacity: 1; }

/* Hover only where hover is real. On touch it sticks after a tap, leaving the
   closed toggle looking permanently inverted. */
@media (hover: hover) {
  .nav__toggle:hover { background: var(--navy); border-color: var(--navy); }
  .nav__toggle:hover .nav__toggle-mark::before { opacity: 0; }
  .nav__toggle:hover .nav__toggle-mark::after { opacity: 1; }
}

.nav__toggle:active { transform: translateY(1px); }

/* Scroll lock while the full screen menu is open */
.nav-open, .nav-open body { overflow: hidden; }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }

  /* Strip and header travel together. The strip outranks the header so it stays
     visible over the open menu panel, which lives inside the header. */
  .topbar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 90;
  }
  .incident { position: relative; z-index: 2; }
  .header { position: relative; top: auto; z-index: 1; }

  /* The open menu locks scrolling with overflow:hidden, which stops sticky from
     resolving and drops the bar back to the top of the document. Pin it outright
     for as long as the menu is open. Nothing shifts visibly because the panel
     covers everything behind it. */
  .nav-open .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  /* Anchor targets must clear the whole bar, not just the header */
  html { scroll-padding-top: calc(var(--header-h) + 5rem); }

  /* A backdrop-filter on the header would make it the containing block for the
     fixed menu below, so it is dropped at these widths. */
  .header.is-stuck { backdrop-filter: none; background: var(--ivory); }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 80;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--ivory);
    padding: calc(var(--header-h) + 6.5rem) var(--gutter) 3rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .4s var(--ease), visibility .4s;
  }
  .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

  .nav__link {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 7vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.022em;
    color: var(--ink);
    padding-block: 1.05rem;
    border-bottom: 1px solid var(--rule);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--brass-text); }

  .nav__cta {
    margin-top: 2.25rem;
    text-align: center;
    font-size: 1rem;
    padding: 1.05rem 1.25rem;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s var(--ease), transform .5s var(--ease),
                color .35s var(--ease), border-color .35s var(--ease);
  }

  .nav.is-open .nav__link,
  .nav.is-open .nav__cta { opacity: 1; transform: none; }

  .nav.is-open .nav__link:nth-child(1) { transition-delay: .10s; }
  .nav.is-open .nav__link:nth-child(2) { transition-delay: .16s; }
  .nav.is-open .nav__link:nth-child(3) { transition-delay: .22s; }
  .nav.is-open .nav__link:nth-child(4) { transition-delay: .28s; }
  .nav.is-open .nav__link:nth-child(5) { transition-delay: .34s; }
  .nav.is-open .nav__cta  { transition-delay: .40s; }
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.6rem;
  font-size: 0.9375rem;
  font-weight: 450;
  letter-spacing: .005em;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s var(--ease-soft), color .35s var(--ease), border-color .35s var(--ease);
}
.btn span { position: relative; z-index: 1; }
.btn svg { position: relative; z-index: 1; transition: transform .4s var(--ease); flex: none; }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--navy); color: var(--ink-invert); }
.btn--primary::before {
  content: ""; position: absolute; inset: 0;
  background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.btn--primary:hover { color: var(--navy-deep); }
.btn--primary:hover::before { transform: scaleX(1); }

.btn--ghost { border-color: var(--rule-strong); color: var(--ink); }
.btn--ghost::before {
  content: ""; position: absolute; inset: 0;
  background: var(--navy);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.btn--ghost:hover { color: var(--ink-invert); border-color: var(--navy); }
.btn--ghost:hover::before { transform: scaleX(1); }

.section--navy .btn--ghost { border-color: var(--rule-invert); color: var(--ink-invert); }
.section--navy .btn--ghost::before { background: var(--brass); }
.section--navy .btn--ghost:hover { color: var(--navy-deep); border-color: var(--brass); }

.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: 0.9375rem;
  font-weight: 450;
  color: var(--ink);
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--rule-brass);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.link-arrow svg { transition: transform .4s var(--ease); }
.link-arrow:hover { border-color: var(--brass); color: var(--brass-text); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--navy .link-arrow { color: var(--ink-invert); }
.section--navy .link-arrow:hover { color: var(--brass-bright); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero { padding-top: clamp(3.5rem, 7vw, 6.5rem); padding-bottom: 0; }

.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: end;
}
.hero__copy   { grid-column: 1 / span 7; }
.hero__ledger { grid-column: 8 / span 5; }

.hero__display { margin-top: 1.5rem; }
.hero__display .line { display: block; }
.hero__lede { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.hero__actions { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Explicit 2x2 so the pairing is guaranteed, not a by-product of flex wrapping:
   engagement model / coverage on the first row, founded on / personnel below. */
.hero__meta {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2.5rem;
}
@media (max-width: 520px) {
  .hero__meta { grid-template-columns: minmax(0, 1fr); }
}
.hero__meta div { display: grid; gap: .25rem; }
.hero__meta dt { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-text); }
.hero__meta dd { font-size: var(--fs-small); color: var(--ink-muted); }

/* Service ledger: replaces the generic three-card row */
.ledger { border-top: 1px solid var(--rule-brass); }

.ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem .25rem;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.ledger__row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(189, 162, 110, .16);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.ledger__row > * { position: relative; z-index: 1; transition: transform .5s var(--ease); }
.ledger__row:hover::before { transform: scaleX(1); }
.ledger__row:hover > * { transform: translateX(10px); }
.ledger__row:hover .ledger__arrow { transform: translateX(16px); }

.ledger__row .svc-icon { width: 26px; height: 26px; }
.ledger__name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  letter-spacing: -0.015em;
}
.ledger__arrow { color: var(--ink-faint); }

.hero__rule {
  margin-top: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--rule-brass);
}

/* --------------------------------------------------------------------------
   8. BELIEF BAND
   -------------------------------------------------------------------------- */
.belief { background: var(--ivory-deep); overflow: hidden; }
.belief__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.belief__copy { grid-column: 1 / span 6; }
.belief__media { grid-column: 8 / span 5; position: relative; }

.belief__quote {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.1vw, 2.7rem);
  line-height: 1.16;
  letter-spacing: -0.024em;
  font-weight: 350;
  margin-top: 1.5rem;
}
.belief__quote em { font-style: italic; color: var(--brass-text); }

.belief__attrib {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.belief__media figure { position: relative; margin: 0; }
.belief__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  mix-blend-mode: multiply;
}
.belief__frame {
  position: absolute;
  inset: -14px -14px 14px 14px;
  border: 1px solid var(--rule-brass);
  pointer-events: none;
}
.belief__caption {
  margin-top: .9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   8b. PLATE — wide image band, same treatment as the home page portrait
   -------------------------------------------------------------------------- */
/* The band always follows a fully padded section on the same surface, so its own
   top padding would stack into an oversized gap. */
.plate-band { padding-top: 0; }

.plate { margin: 0; }
.plate__media { position: relative; }
.plate__media img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  mix-blend-mode: multiply;
}
.plate__frame {
  position: absolute;
  inset: -14px -14px 14px 14px;
  border: 1px solid var(--rule-brass);
  pointer-events: none;
}
.plate__caption {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (max-width: 700px) {
  .plate__media img { aspect-ratio: 4 / 3; }
  .plate__frame { inset: -8px -8px 8px 8px; }
}

/* --------------------------------------------------------------------------
   9. PROBLEM (PAS) — ruled stack, no cards
   -------------------------------------------------------------------------- */
.stack-ruled > li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
.stack-ruled > li:last-child { border-bottom: 1px solid var(--rule); }
.section--navy .stack-ruled > li { border-color: var(--rule-invert); }

.stack-ruled .num {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  color: var(--brass-text);
  padding-top: .35rem;
}
.section--navy .stack-ruled .num { color: var(--brass-bright); }
.stack-ruled h3 { margin-bottom: .5rem; }
.stack-ruled p { color: var(--ink-muted); max-width: 60ch; }
.section--navy .stack-ruled p { color: var(--ink-invert-muted); }

/* --------------------------------------------------------------------------
   10. SERVICE BLOCKS (FAB) — zig-zag, ruled
   -------------------------------------------------------------------------- */
.service {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--rule);
  align-items: start;
}
.service:last-of-type { border-bottom: 1px solid var(--rule); }

.service__head { grid-column: 1 / span 5; }
.service__caps { grid-column: 7 / span 6; }

.service:nth-child(even) .service__head { grid-column: 8 / span 5; order: 2; }
.service:nth-child(even) .service__caps { grid-column: 1 / span 6; order: 1; }

.service__index { display: block; margin-bottom: 1.1rem; }
.service__title { margin-bottom: .9rem; }
.service__promise { color: var(--ink-muted); max-width: 42ch; }
.service__link { margin-top: 1.5rem; }

.service__caps h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .9rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--rule);
}
.cap-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem 1.75rem;
}
.cap-list li {
  font-size: var(--fs-small);
  color: var(--ink-muted);
  padding-left: 1.45rem;
  position: relative;
}
/* Same tick as .item-list, so capability lists read identically everywhere */
.cap-list li::before {
  content: "";
  position: absolute;
  left: 1px; top: .5em;
  width: 9px; height: 4.5px;
  border-left: 1.5px solid var(--brass-text);
  border-bottom: 1.5px solid var(--brass-text);
  transform: rotate(-45deg);
}
.service__outcome {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--ink);
}
.service__outcome strong {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-text);
  display: block;
  margin-bottom: .35rem;
}

/* --------------------------------------------------------------------------
   11. METHOD LEDGER (BAB) — table, not cards
   -------------------------------------------------------------------------- */
.method {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule-brass);
}
.method__col {
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 2rem) clamp(1.75rem, 3vw, 2.5rem) 0;
  border-right: 1px solid var(--rule);
}
.method__col:last-child { border-right: 0; padding-right: 0; }
.method__col:not(:first-child) { padding-left: clamp(1.25rem, 2vw, 2rem); }
.section--navy .method { border-top-color: var(--rule-brass); }
.section--navy .method__col { border-right-color: var(--rule-invert); }

.method__stage {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-text);
  margin-bottom: 1rem;
}
.section--navy .method__stage { color: var(--brass-bright); }
.method__col h3 { margin-bottom: .75rem; }
.method__col p { color: var(--ink-muted); font-size: var(--fs-small); }
.section--navy .method__col p { color: var(--ink-invert-muted); }

/* --------------------------------------------------------------------------
   12. PROOF LEDGER
   -------------------------------------------------------------------------- */
.proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule-brass);
  border-bottom: 1px solid var(--rule-invert);
}
.proof__item {
  padding: clamp(1.5rem, 2.5vw, 2.25rem) 1.5rem clamp(1.5rem, 2.5vw, 2.25rem) 0;
  border-right: 1px solid var(--rule-invert);
}
.proof--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proof__item:last-child { border-right: 0; }
.proof__item:not(:first-child) { padding-left: 1.5rem; }
.proof__figure {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--brass-bright);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.proof__label {
  margin-top: .8rem;
  font-size: var(--fs-small);
  color: var(--ink-invert-muted);
  max-width: 22ch;
}

/* Not currently used. Kept ready for accreditation chips in the Standing section
   once certifications are confirmed. See README. */
.accred {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
.accred li {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-invert-muted);
  padding: .5rem .9rem;
  border: 1px solid var(--rule-invert);
}

/* --------------------------------------------------------------------------
   13. CTA BAND (5 P's)
   -------------------------------------------------------------------------- */
.cta__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}
.cta__copy { grid-column: 1 / span 7; }
.cta__side { grid-column: 9 / span 4; }

.cta__side dl { display: grid; gap: 1.25rem; }
.cta__side dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-bottom: .3rem;
}
.cta__side dd { font-size: var(--fs-small); color: var(--ink-invert-muted); }
.cta__side a:hover { color: var(--brass-bright); }

/* --------------------------------------------------------------------------
   13b. CRISIS DESK
   -------------------------------------------------------------------------- */
.desk {
  border-top: 2px solid var(--brass);
  border-bottom: 1px solid var(--rule-invert);
  padding-block: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.desk__lead { grid-column: 1 / span 5; }
.desk__steps { grid-column: 7 / span 6; }

.desk__number {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--brass-bright);
  margin-top: .85rem;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
}
.desk__number:hover { color: var(--ink-invert); }
.desk__note { margin-top: 1rem; font-size: var(--fs-small); color: var(--ink-invert-muted); max-width: 40ch; }
.desk__note a { color: var(--ink-invert); border-bottom: 1px solid var(--rule-brass); transition: color .3s var(--ease), border-color .3s var(--ease); overflow-wrap: anywhere; }
.desk__note a:hover { color: var(--brass-bright); border-color: var(--brass-bright); }

.desk__steps ol { counter-reset: step; }
.desk__steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding-block: .8rem;
  border-bottom: 1px solid var(--rule-invert);
  font-size: var(--fs-small);
  color: var(--ink-invert-muted);
}
.desk__steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  color: var(--brass-bright);
  padding-top: .2em;
}

@media (max-width: 960px) {
  .desk { grid-template-columns: minmax(0, 1fr); }
  .desk__lead, .desk__steps { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   14. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */
.pagehead { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.pagehead__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}
.pagehead__copy { grid-column: 1 / span 7; }
.pagehead__aside { grid-column: 9 / span 4; }
.pagehead__icon { margin-top: 1.5rem; }
.pagehead__icon + h1 { margin-top: .9rem; }
.pagehead h1 { margin-top: 1.25rem; }
.pagehead .lede { margin-top: 1.5rem; }

.crumb {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.crumb a:hover { color: var(--brass-text); }

.aside-facts { border-top: 1px solid var(--rule-brass); }
.aside-facts > div {
  padding-block: .95rem;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
}
.aside-facts dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.aside-facts dd { font-size: var(--fs-small); text-align: right; }

/* --------------------------------------------------------------------------
   15. CAPABILITY TABLE (service pages)
   -------------------------------------------------------------------------- */
.captable { border-top: 1px solid var(--rule-brass); }
.captable__group {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
.captable__name { grid-column: 1 / span 4; }
.captable__items { grid-column: 6 / span 7; }
.captable__name h3 { margin-bottom: .5rem; }
.captable__name p { font-size: var(--fs-small); color: var(--ink-muted); max-width: 34ch; }

.item-list { display: grid; gap: 0; }
.item-list li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 1rem;
  padding-block: .85rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
}
.item-list li:last-child { border-bottom: 0; }
.item-list .n {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  color: var(--brass-text);
  padding-top: .18em;
}

/* --------------------------------------------------------------------------
   16. FORM
   -------------------------------------------------------------------------- */
.contact__form  { grid-column: 1 / span 7; }
.contact__aside { grid-column: 9 / span 4; }

.form { display: grid; gap: 1.5rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
/* align-content: start is load bearing. Fields in a row stretch to the tallest,
   and the default stretch would share that extra height across the label, input
   and hint rows, dragging one input's underline out of line with its neighbour. */
.field { display: grid; gap: .5rem; align-content: start; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.field .hint { font-size: 0.8125rem; color: var(--ink-faint); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .85rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--fs-body);
  color: var(--ink);
  transition: border-color .3s var(--ease);
  border-radius: 0;
}
.field select { appearance: none; cursor: pointer; padding-right: 1.5rem; }
.field.has-select { position: relative; }
.field.has-select::after {
  content: "";
  position: absolute;
  right: 4px; bottom: 1.35rem;
  width: 7px; height: 7px;
  border-right: 1px solid var(--ink-faint);
  border-bottom: 1px solid var(--ink-faint);
  transform: rotate(45deg);
  pointer-events: none;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--brass); }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); opacity: .65; }

.field .error {
  font-size: 0.8125rem;
  color: #8C2F2F;
  display: none;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-bottom-color: #8C2F2F; }
.field.is-invalid .error { display: block; }

.form__consent { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.form__consent input { width: 16px; height: 16px; margin-top: .3rem; accent-color: var(--navy); }
.form__consent label { font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.form__consent .error { grid-column: 1 / -1; }
.form__consent.is-invalid input { outline: 2px solid #8C2F2F; outline-offset: 2px; }

.form__status {
  display: none;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--brass);
  background: rgba(189, 162, 110, .1);
  font-size: var(--fs-small);
}
.form__status.is-visible { display: block; }
.form__status.is-error { border-left-color: #8C2F2F; background: rgba(140, 47, 47, .07); }

.btn[data-loading="true"] { pointer-events: none; opacity: .65; }
.btn[data-loading="true"] .btn__label::after {
  content: "";
  display: inline-block;
  width: 1ch;
  animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--navy-deep); color: var(--ink-invert); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer__top {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3vw, 3rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--rule-invert);
}
.footer__brand img { height: 26px; width: auto; }
.footer__brand p { margin-top: 1.25rem; color: var(--ink-invert-muted); font-size: var(--fs-small); max-width: 32ch; }

.footer__col h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin: 0 0 1.1rem;
}
.footer__col li + li { margin-top: .65rem; }
.footer__col a { font-size: var(--fs-small); color: var(--ink-invert-muted); transition: color .3s var(--ease); }
.footer__col a:hover { color: var(--ink-invert); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint-invert);
}
.footer__bottom a:hover { color: var(--brass-bright); }

/* --------------------------------------------------------------------------
   18. REVEAL
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* Failsafe: reveal system switched off, nothing hidden, nothing animating. */
.reveals-off [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* --------------------------------------------------------------------------
   19. RESPONSIVE
   -------------------------------------------------------------------------- */
/* The 4-up folds to 2x2. The 3-up would leave an orphan on the second row, so
   it holds three columns until there is no longer room, then stacks outright. */
@media (max-width: 1100px) {
  .proof:not(.proof--three) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof:not(.proof--three) .proof__item:nth-child(2) { border-right: 0; }
  .proof:not(.proof--three) .proof__item:nth-child(3) { padding-left: 0; border-top: 1px solid var(--rule-invert); }
  .proof:not(.proof--three) .proof__item:nth-child(4) { border-top: 1px solid var(--rule-invert); }
}

@media (max-width: 860px) {
  .proof--three { grid-template-columns: minmax(0, 1fr); }
  .proof--three .proof__item { border-right: 0; padding-left: 0; border-top: 1px solid var(--rule-invert); }
  .proof--three .proof__item:first-child { border-top: 0; }
}

@media (max-width: 960px) {
  :root { --header-h: 66px; }

  /* Collapse the 12 column track set. Spanning 1 / -1 is not enough: twelve
     minmax(0,1fr) tracks plus eleven gaps set a floor wider than a phone. */
  .hero__grid,
  .belief__grid,
  .cta__grid,
  .pagehead__grid,
  .rail,
  .grid12,
  .service,
  .captable__group { grid-template-columns: minmax(0, 1fr); }

  .hero__grid { gap: 3rem; }
  .hero__copy, .hero__ledger,
  .belief__copy, .belief__media,
  .cta__copy, .cta__side,
  .pagehead__copy, .pagehead__aside,
  .rail__label, .rail__body,
  .service__head, .service__caps,
  .captable__name, .captable__items,
  .contact__form, .contact__aside { grid-column: 1 / -1 !important; order: initial !important; }

  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }

  .method { grid-template-columns: 1fr; }
  .method__col { border-right: 0; border-bottom: 1px solid var(--rule); padding: 1.75rem 0; }
  .method__col:last-child { border-bottom: 0; }
  .method__col:not(:first-child) { padding-left: 0; }
  .section--navy .method__col { border-bottom-color: var(--rule-invert); }

  .rail__label { margin-bottom: .5rem; }
  .footer__col { margin-top: .5rem; }
  .footer__top { gap: 2.25rem; }
}

@media (max-width: 640px) {
  .cap-list { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .proof { grid-template-columns: 1fr; }
  .proof__item { border-right: 0; padding-left: 0; border-top: 1px solid var(--rule-invert); }
  .proof__item:first-child { border-top: 0; }
  .stack-ruled > li { grid-template-columns: 1fr; gap: .5rem; }
  .item-list li { grid-template-columns: 2.25rem 1fr; }
  .incident__inner { justify-content: center; }
  .incident__region { display: none; }
  .btn-row .btn { width: 100%; justify-content: center; }
  .belief__frame { inset: -8px -8px 8px 8px; }
}

/* --------------------------------------------------------------------------
   20. MOTION + PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .incident, .header, .footer, .btn, .nav { display: none; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}