:root {
  --paper: #f5f3ee;
  --paper-soft: #fbfaf7;
  --ink: #14100e;
  --muted: rgba(20, 16, 14, 0.66);
  --faint: rgba(20, 16, 14, 0.12);
  --oxblood: #651f2a;
  --max: 1510px;
  --display: "Bodoni Moda", Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
  --sans: "Instrument Sans", "Avenir Next", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

section,
.relationship-band,
.proof-band,
.section-anchor {
  scroll-margin-top: 106px;
}

body {
  line-height: 1.5;
  margin: 0;
  background:
    radial-gradient(circle at 85% 6%, rgba(101, 31, 42, 0.055), transparent 24rem),
    linear-gradient(90deg, rgba(20, 16, 14, 0.035), transparent 10%, transparent 90%, rgba(20, 16, 14, 0.035)),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  min-height: 86px;
  padding: 8px clamp(24px, 4vw, 52px);
  background: rgba(245, 243, 238, 0.92);
  border-bottom: 1px solid rgba(20, 16, 14, 0.08);
  backdrop-filter: blur(16px);
}

.signature-mark {
  display: inline-flex;
  width: 180px;
  height: 58px;
  align-items: center;
  overflow: visible;
}

.signature-reveal,
.signature-inline,
.footer-signature {
  display: inline-block;
  position: relative;
  overflow: visible;
}

.signature-reveal {
  width: 100%;
  height: 100%;
}

.signature-reveal::after,
.signature-inline::after,
.footer-signature::after {
  display: none;
}

.signature-reveal img,
.signature-inline img,
.footer-signature img,
.signature-svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.signature-reveal img,
.signature-inline img,
.footer-signature img,
.signature-svg image {
  filter: brightness(0) saturate(100%) invert(7%) sepia(16%) saturate(763%) hue-rotate(336deg) brightness(97%)
    contrast(97%);
  animation: signature-ink 640ms ease-out both;
}

.signature-path {
  fill: none;
  stroke: #fff;
  stroke-width: 210;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: signature-draw 2.8s cubic-bezier(0.76, 0, 0.24, 1) 280ms forwards;
}

.site-nav {
  visibility: hidden;
  position: fixed;
  inset: 86px clamp(18px, 3vw, 46px) auto;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-14px);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.site-nav.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.site-nav::before {
  position: fixed;
  inset: -86px -60px 0;
  z-index: -1;
  content: "";
  background: rgba(20, 16, 14, 0.22);
  backdrop-filter: blur(4px);
}

.menu-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.34fr) 1fr;
  gap: clamp(28px, 5vw, 72px);
  max-width: 1180px;
  margin-left: auto;
  border: 1px solid rgba(20, 16, 14, 0.12);
  background:
    radial-gradient(ellipse at 82% 18%, rgba(101, 31, 42, 0.06), transparent 36%),
    rgba(251, 250, 247, 0.98);
  box-shadow: 0 36px 100px rgba(20, 16, 14, 0.18);
  padding: clamp(24px, 4vw, 46px);
}

.menu-intro h2 {
  margin: 14px 0 22px;
  font-family: var(--display);
  font-size: clamp(2.4rem, 4vw, 4.6rem);
  font-weight: 500;
  line-height: 0.92;
}

.menu-email {
  display: inline-flex;
  color: var(--oxblood);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.menu-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--faint);
  border-left: 1px solid var(--faint);
}

.menu-links a {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 18px;
  min-height: 96px;
  align-content: center;
  border-right: 1px solid var(--faint);
  border-bottom: 1px solid var(--faint);
  padding: 16px 18px;
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.menu-links a:hover,
.menu-links a:focus-visible {
  background: rgba(101, 31, 42, 0.06);
  color: var(--oxblood);
  transform: translateY(-1px);
}

.menu-links span {
  grid-row: 1 / 3;
  color: var(--oxblood);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.menu-links strong {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.4vw, 2.9rem);
  font-weight: 500;
  line-height: 0.92;
}

.menu-links small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer nav a {
  position: relative;
  padding-block: 10px;
  /* Short labels like "AI" measured 16px wide, under the 24px minimum. */
  display: inline-block;
  min-width: 24px;
  text-align: center;
}

.site-footer nav a::after {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--oxblood);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.site-footer nav a:hover::after,
.site-footer nav a:focus-visible::after {
  transform: scaleX(1);
}

.header-cta {
  grid-column: 4;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0 20px;
  background: var(--oxblood);
  color: var(--paper-soft);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.menu-button {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(101, 31, 42, 0.24);
  border-radius: 4px;
  padding: 0 16px;
  background: rgba(251, 250, 247, 0.52);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.menu-button:hover,
.menu-button:focus-visible,
.menu-button[aria-expanded="true"] {
  border-color: var(--oxblood);
  background: var(--oxblood);
  color: var(--paper-soft);
}

.menu-icon {
  display: grid;
  gap: 5px;
}

.menu-icon span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 180ms ease;
}

.menu-button[aria-expanded="true"] .menu-icon span:first-child {
  transform: translateY(3.5px) rotate(32deg);
}

.menu-button[aria-expanded="true"] .menu-icon span:last-child {
  transform: translateY(-3.5px) rotate(-32deg);
}

.side-rail {
  position: fixed;
  z-index: 35;
  top: 114px;
  bottom: 96px;
  left: clamp(18px, 3vw, 43px);
  display: flex;
  width: 72px;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  padding-left: 10px;
  border-left: 1px solid var(--faint);
}

.side-rail a {
  display: grid;
  gap: 2px;
  color: rgba(20, 16, 14, 0.64);
  font-family: var(--display);
  font-size: 0.8rem;
  line-height: 1.1;
}

.side-rail a:first-child {
  color: var(--ink);
}

.side-rail a:first-child::after {
  width: 28px;
  height: 2px;
  margin-top: 8px;
  content: "";
  background: var(--oxblood);
}

.side-rail span {
  font-size: 0.72rem;
}

.hero,
.section-slab,
.relationship-band,
.proof-band {
  max-width: var(--max);
  margin-inline: auto;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(410px, 0.45fr) minmax(620px, 0.55fr);
  min-height: min(780px, calc(100svh - 86px));
  padding: 0 clamp(20px, 4vw, 44px) 0 126px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(245, 243, 238, 0.98) 0%, rgba(245, 243, 238, 0.95) 39%, transparent 58%),
    var(--paper);
}

.hero::before,
.career::before,
.readiness::before {
  display: none;
}

.architectural-svg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  animation: svg-field-drift 14s ease-in-out infinite alternate;
}

.architectural-svg-hero {
  inset: 0 auto 0 18%;
  width: 82%;
  opacity: 0.72;
}

.architectural-svg-career,
.architectural-svg-work,
.architectural-svg-doors {
  opacity: 0.46;
}

.architectural-svg-career {
  inset: 28% 0 auto;
  height: 66%;
}

.architectural-svg-work {
  inset: 34% 0 auto;
  height: 54%;
}

/* The pillar cards are rgba(245,243,238,0.035). 3.5% opaque, effectively
   glass, so the armature runs ACROSS the card band rather than dodging it,
   and reads through the pillars.

   It lives INSIDE .readiness-grid, not the section: percentage insets against
   the section broke the moment the AEO strip was added and the section grew
   from 501px to 1418px, dragging the ember across the copy. Anchored to the
   grid it tracks the pillars whatever else the section gains. */
.readiness-grid { position: relative; }

.architectural-svg-readiness {
  inset: -18% 0;
  width: 100%;
  height: 136%;
  opacity: 1;
}

.architectural-svg-doors {
  inset: 36% 0 auto;
  height: 52%;
  opacity: 0.36;
}

/* ---------- Armature weave: the hero/menu grammar, section-wide ----------
   One spine repeated as offset <use> clones. Replaces the two or three lone
   arch-paths that used to drift through these sections, same composition,
   but it now reads as an engineered drawing rather than stray strokes.

   Colour is background-dependent and NOT interchangeable: the cream slabs run
   at 243-250 luminance, where a light stroke is invisible and only oxblood
   reads. The .readiness slab is ink at 17, where the opposite is true. */
/* ---------- AEO / GEO: its own chapter ----------
   Previously this lived inside the ink readiness slab, so two different
   arguments shared one continuous dark field and read as one. It is now a
   separate section on the cream ground with its own inset ink panel, the
   cream gutter between the two dark blocks is what makes them read as two. */
.aeo {
  padding: clamp(12px, 3vw, 40px) clamp(16px, 5vw, 72px) clamp(56px, 8vw, 110px);
  background: var(--paper);
}

.aeo-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: stretch;
  padding: clamp(36px, 5vw, 76px) clamp(28px, 4vw, 64px);
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 900px) {
  .aeo-panel { grid-template-columns: minmax(0, 1fr); }
}

.aeo-copy { max-width: 62ch; }

.aeo-copy .kicker { color: rgba(245, 243, 238, 0.52); }

.aeo-copy h3 {
  margin: 0.4em 0 0.5em;
  display: grid;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.aeo-copy .line-lead { color: var(--paper); }
.aeo-copy .line-turn { color: #c8707c; }

/* Frames the section as an insight rather than a service pitch. AEO/GEO is one
   tangible manifestation of Discovery and Knowledge readiness, not the category
   Shannon operates in, and the label has to say so before the headline lands. */
.aeo-frame {
  margin: 0 0 14px;
  max-width: 44ch;
  color: var(--oxblood);
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.45;
}

.aeo-lede {
  color: rgba(245, 243, 238, 0.78);
  font-family: var(--sans);
  font-size: clamp(0.98rem, 1.5vw, 1.06rem);
  line-height: 1.62;
  text-wrap: pretty;
}

.aeo-question {
  margin: 1.4em 0 0;
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  font-style: italic;
  letter-spacing: -0.01em;
}

/* The live scorer. The section's whole argument is that a company should know
   its own number, so making the visitor fill in a form to get one undercut the
   point being made three lines above it. */
.scorer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 22px 0 10px;
}

.scorer-field {
  display: grid;
  gap: 6px;
  flex: 1 1 260px;
}

.scorer-field span {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.scorer-field input {
  padding: 13px 14px;
  border: 1px solid rgba(20, 16, 14, 0.24);
  border-radius: 2px;
  background: var(--paper-soft);
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
}

.scorer-field input:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 1px;
}

/* The two steps live inside the same flex form, so each has to claim a full
   row. And because .scorer-step carries a display of its own, the hidden
   attribute would otherwise lose to it and both steps would render at once. */
.scorer-step {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.scorer-step[hidden] {
  display: none;
}

.scorer-gate {
  display: block;
  border: 1px solid rgba(20, 16, 14, 0.14);
  border-radius: 2px;
  padding: clamp(16px, 2.4vw, 22px);
  background: var(--paper-soft);
}

.scorer-gate-lede {
  margin: 0 0 14px;
  max-width: 54ch;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.scorer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.scorer-field-wide {
  grid-column: 1 / -1;
}

/* The answers are the point, so they get a real measure and no card. Two
   columns on wide screens purely so five questions do not become a long
   scroll immediately before the contact section. */
.faq-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(26px, 3.4vw, 44px);
}

.faq-item h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

.faq-item p {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.62;
  text-wrap: pretty;
}

.scorer-turnstile {
  margin-top: 14px;
  min-height: 65px;
}

.scorer-turnstile[hidden] {
  display: none;
}

.scorer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.scorer-back {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.scorer-back:hover,
.scorer-back:focus-visible {
  color: var(--oxblood);
}

.scorer-legal {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.scorer-note,
.scorer-status {
  margin: 0;
  max-width: 54ch;
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted);
}

.scorer-out { margin-top: 20px; }

.scorer-result {
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--faint);
  background: var(--paper-soft);
}

.scorer-host {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxblood);
}

.scorer-score {
  margin: 6px 0 2px;
  font-family: var(--display);
  line-height: 0.9;
  color: var(--ink);
}

.scorer-score strong { font-size: clamp(3rem, 7vw, 4.6rem); font-weight: 500; }
.scorer-score i { font-style: normal; font-size: 1.3rem; color: var(--muted); margin-left: 4px; }

.scorer-band {
  margin: 0 0 18px;
  max-width: 46ch;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
}

.scorer-bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }

.scorer-bars li {
  display: grid;
  grid-template-columns: minmax(96px, 128px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
}

.scorer-bars i { display: block; height: 7px; background: rgba(20, 16, 14, 0.1); }
.scorer-bars b { display: block; height: 100%; background: var(--oxblood); }
.scorer-bars em { font-style: normal; color: var(--ink); }

.scorer-sub {
  margin: 22px 0 8px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxblood);
}

.scorer-misses { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: 7px; }

.scorer-misses strong {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

.scorer-misses span {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
}

.scorer-foot {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--faint);
  max-width: 60ch;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
}

.scorer-foot a { color: var(--oxblood); }

.aeo-facts {
  margin: 1.8em 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.2em;
  counter-reset: aeo;
}

.aeo-facts li {
  position: relative;
  display: grid;
  gap: 0.3em;
  padding-left: 2.5em;
  counter-increment: aeo;
}

/* A real ordered sequence, so the numerals carry information rather than
   decorating the section the way a stock eyebrow would. */
.aeo-facts li::before {
  content: counter(aeo, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  color: rgba(200, 112, 124, 0.85);
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.aeo-facts strong {
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 600;
}

.aeo-facts span {
  color: rgba(245, 243, 238, 0.68);
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.58;
  text-wrap: pretty;
}

.aeo-facts code {
  padding: 1px 5px;
  background: rgba(245, 243, 238, 0.09);
  color: rgba(245, 243, 238, 0.92);
  font-size: 0.88em;
}

.aeo-turn {
  margin: 1.8em 0 0;
  color: rgba(245, 243, 238, 0.86);
  font-family: var(--sans);
  font-size: clamp(0.96rem, 1.5vw, 1.02rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.aeo-cta {
  margin-top: 1.8em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.aeo-reversal {
  max-width: 38ch;
  color: rgba(245, 243, 238, 0.56);
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.5;
}

/* ---------- The answer card: what the section is arguing about ----------
   Deliberately abstract and captioned as illustrative. A panel that looked
   like a live scan of the visitor's own site would be a lie told in CSS. */
/* The column stretches to the full panel height; the card sticks inside it.
   Without this wrapper the grid item collapses to the card's own height and
   sticky has no distance to travel. */
.answer-col { position: relative; }

.answer-card {
  /* Travels with the copy instead of sitting centred: the right column is
     shorter than the argument beside it, so a static card leaves dead space
     at whichever end it is not on. */
  position: sticky;
  top: clamp(96px, 14vh, 150px);
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid rgba(245, 243, 238, 0.14);
  background: rgba(245, 243, 238, 0.028);
}

/* The card's hook is a plain question naming the actual products, not an
   abstract tracked label, a full sentence at 0.68rem/0.16em uppercase is
   unreadable, so this is sized and cased like something meant to be read. */
.answer-card-ask {
  margin: 0;
  max-width: 34ch;
  color: var(--paper);
  font-family: var(--sans);
  font-size: clamp(0.94rem, 1.3vw, 1.02rem);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.answer-cite-label {
  margin: 0;
  color: rgba(245, 243, 238, 0.5);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.answer-lines {
  margin: 18px 0 26px;
  display: grid;
  gap: 11px;
}

.answer-lines span {
  height: 7px;
  width: var(--w);
  background: rgba(245, 243, 238, 0.2);
  transform-origin: left center;
  transform: scaleX(0);
  animation: answer-write 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--d);
}

.answer-lines span:last-child { background: rgba(245, 243, 238, 0.12); }

.answer-chips {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 13px;
  border: 1px solid rgba(245, 243, 238, 0.16);
  opacity: 0;
  animation: answer-chip 500ms ease forwards;
}

.chip:nth-child(1) { animation-delay: 0.62s; }
.chip:nth-child(2) { animation-delay: 0.78s; }
.chip-open { animation-delay: 1s; }

.chip span {
  width: var(--w);
  height: 7px;
  background: rgba(245, 243, 238, 0.28);
}

/* The empty slot is the whole argument: two names landed, the third did not. */
.chip-open {
  border-color: rgba(200, 112, 124, 0.62);
  border-style: dashed;
  color: #dc8b94;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.answer-caption {
  margin: 20px 0 0;
  /* 0.42 composited to 3.80:1 against the card, under AA for body text.
     This is the honesty disclaimer; it has to be readable. */
  color: rgba(245, 243, 238, 0.58);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-style: italic;
}

@keyframes answer-write {
  to { transform: scaleX(1); }
}

@keyframes answer-chip {
  to { opacity: 1; }
}

/* Reduced motion: show the finished state, skip the build. */
@media (prefers-reduced-motion: reduce) {
  .answer-lines span { transform: scaleX(1); animation: none; }
  .chip { opacity: 1; animation: none; }
}

/* ---------- Document pages (accessibility statement, etc.) ---------- */
.doc-page { background: var(--paper); }

.doc-head {
  padding: clamp(24px, 4vw, 44px) clamp(22px, 6vw, 96px);
  border-bottom: 1px solid rgba(20, 16, 14, 0.1);
}

.doc-back {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.doc-back:hover { color: var(--oxblood); }

.doc {
  max-width: 68ch; /* 65-75ch body measure */
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) clamp(22px, 6vw, 40px) clamp(64px, 9vw, 120px);
}

.doc h1 {
  margin: 0.2em 0 0.6em;
  font-family: var(--display);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.doc h2 {
  margin: 2.2em 0 0.6em;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.doc p,
.doc li {
  color: rgba(20, 16, 14, 0.82);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.68;
  text-wrap: pretty;
}

.doc-lede {
  font-size: 1.12rem;
  color: rgba(20, 16, 14, 0.9);
}

.doc-list {
  margin: 1em 0 0;
  padding-left: 1.1em;
  display: grid;
  gap: 0.8em;
}

.doc code {
  padding: 1px 5px;
  background: rgba(101, 31, 42, 0.07);
  font-size: 0.9em;
}

.doc-contact a {
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--oxblood);
}

.doc-updated {
  margin-top: 3em;
  padding-top: 1.2em;
  border-top: 1px solid rgba(20, 16, 14, 0.1);
  font-size: 0.86rem !important;
  color: rgba(20, 16, 14, 0.58) !important;
}

/* ---------- Accessibility ---------- */
/* WCAG 2.4.1. Off-screen until focused, then it lands under the header. */
.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  z-index: 200;
  padding: 12px 22px;
  transform: translateX(-50%);
  background: var(--oxblood);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 180ms ease;
}

.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.footer-a11y a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* WCAG 2.2 target size */
  min-height: 24px;
}

.a11y-mark {
  width: 18px;
  height: 18px;
  flex: none;
}

.arch-weave use {
  fill: none;
  stroke: rgba(101, 31, 42, 0.13);
  stroke-width: 1.1;
  stroke-linecap: round;
}

.arch-weave use:nth-child(4) { stroke: rgba(101, 31, 42, 0.2); stroke-width: 1.4; }
.arch-weave use:nth-child(1),
.arch-weave use:nth-child(7) { stroke: rgba(101, 31, 42, 0.07); }

/* Ink slab: light reads, oxblood does not. */
.arch-weave-dark use {
  stroke: rgba(245, 243, 238, 0.11);
  stroke-width: 1.1;
}

.arch-weave-dark use:nth-child(4) { stroke: rgba(245, 243, 238, 0.2); stroke-width: 1.4; }
.arch-weave-dark use:nth-child(1),
.arch-weave-dark use:nth-child(7) { stroke: rgba(245, 243, 238, 0.06); }

/* The readiness ember reuses the hero's bloom/core pair but with its own
   filter id, since the hero's lives in a different stacking context. */
.ai-live .ember-bloom { filter: url(#aiEmberGlow); }

.arch-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
}

.arch-primary {
  stroke: rgba(101, 31, 42, 0.12);
  stroke-width: 9;
  stroke-dasharray: 720 210;
  animation:
    arch-dash 9s linear infinite,
    arch-drift 7s ease-in-out infinite alternate;
}

.arch-quiet {
  stroke: rgba(101, 31, 42, 0.045);
  stroke-width: 4;
  stroke-dasharray: 540 160;
  animation:
    arch-dash-reverse 13s linear infinite,
    arch-drift-reverse 9s ease-in-out infinite alternate;
}

.arch-white {
  stroke: rgba(255, 255, 255, 0.84);
  stroke-width: 20;
  stroke-dasharray: 620 190;
  animation:
    arch-dash 11s linear infinite,
    arch-rise 8s ease-in-out infinite alternate;
}

.hero-copy {
  position: relative;
  z-index: 5;
  align-self: start;
  max-width: 500px;
  padding: clamp(70px, 8vh, 104px) 0 56px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(4.8rem, 6.15vw, 7.2rem);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: 0;
}

h1 span,
.career h2 span {
  color: var(--oxblood);
}

/* The hero headline is a sentence now, not a job title. The global h1 scale
   (4.8rem floor, 0.82 line-height, built for "CHIEF AI OFFICER." at seventeen
   characters) would set this sixty-two-character line as seven lines of 115px
   serif inside a 500px well and push it straight through the column. Hero-only
   override: smaller, looser leading so uppercase lines do not collide, and
   balanced so the four lines come out even rather than leaving an orphan. */
/* Each sentence owns its own line box. Left to wrap freely, the second
   sentence starts mid-line at narrow widths ("ANYMORE. KNOWING" sharing a
   line), which collapses the ink/oxblood two-sentence structure the whole
   headline depends on. */
.hero h1 .line-lead,
.hero h1 .line-turn {
  display: block;
  /* pretty, not balance. balance evens the line lengths across the block,
     which splits "ADVANTAGE ANYMORE." in two to match the short first line
     and turns a four-line headline into five. pretty only pulls up a
     trailing orphan, which is the thing actually worth fixing. */
  text-wrap: pretty;
}

.hero h1 .line-lead {
  color: var(--ink);
}

.hero h1 {
  font-size: clamp(1.9rem, 2.9vw, 3.05rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  text-wrap: balance;
}

.title-line {
  /* Two roles joined by a middot: let the break fall at the divider rather
     than orphaning "Architect" on its own line. */
  text-wrap: balance;
  margin: 0 0 16px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.35vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-copy p:not(.title-line),
.career-head p,
.global-band p,
.readiness-grid p,
.door-card span,
.resume-references p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--oxblood);
  border-radius: 4px;
  padding: 0 18px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.button:hover,
.button:focus-visible,
.text-link:hover,
.text-link:focus-visible,
.door-card:hover,
.door-card:focus-visible {
  transform: translateY(-2px);
}

.button-primary {
  background: var(--oxblood);
  color: var(--paper-soft);
}

.button-secondary {
  background: rgba(245, 243, 238, 0.64);
  color: var(--ink);
}

.hero-media {
  position: relative;
  z-index: 2;
  min-height: min(780px, calc(100svh - 86px));
  align-self: stretch;
  overflow: hidden;
}

.hero-media::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  background:
    linear-gradient(90deg, rgba(245, 243, 238, 0.98), rgba(245, 243, 238, 0.64) 15%, transparent 35%, transparent 86%, rgba(245, 243, 238, 0.5)),
    linear-gradient(180deg, transparent 62%, rgba(245, 243, 238, 0.96));
  pointer-events: none;
}

.hero-media::after {
  display: none;
}

/* ---------- Hero ember armature: bottom-right, over the image ----------
   Same grammar as the menu armature (one spine, repeated as offset <use>
   clones) but it never resolves into a finished drawing: a short ember runs
   the spine on a loop, so the corner reads as current moving through
   structure rather than as ornament. Sits above the paper scrim; the edge
   mask does the fading so it never collides with the cream. */
.ember {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: min(76%, 580px);
  height: auto;
  pointer-events: none;
  overflow: visible;
}

.ember-strands use {
  fill: none;
  stroke: rgba(101, 31, 42, 0.3);
  stroke-width: 1;
  stroke-linecap: round;
}

/* The image behind this sits at ~107/255 luminance, so a saturated red core
   is the same brightness as its background and disappears. Built like actual
   neon instead: a blurred oxblood bloom carries the colour, a near-white core
   carries the light. Same construction as .arch-white, which is the only
   reason the existing hero lines read over this photograph at all. */
.ember-bloom,
.ember-core {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 0.3 0.7;
  stroke-dashoffset: 1;
  animation: ember-run var(--ember-dur, 9s) linear infinite;
  animation-delay: var(--ember-delay, 0s);
}

.ember-bloom {
  stroke: #9e2233;
  stroke-width: 7;
  opacity: 0.9;
  filter: url(#emberGlow);
}

.ember-core {
  stroke: #ffe8e2;
  stroke-width: 1.5;
}

.ember-run-a { --ember-dur: 9s;    --ember-delay: 0s; }
.ember-run-b { --ember-dur: 12.5s; --ember-delay: -3.4s; }
.ember-run-c { --ember-dur: 15s;   --ember-delay: -8s; }

.ember-run-b .ember-bloom,
.ember-run-b .ember-core { stroke-dasharray: 0.24 0.76; }
.ember-run-b .ember-bloom { stroke-width: 5; opacity: 0.68; }
.ember-run-b .ember-core { stroke-width: 1.1; }
.ember-run-c .ember-bloom,
.ember-run-c .ember-core { stroke-dasharray: 0.19 0.81; }
.ember-run-c .ember-bloom { stroke-width: 4; opacity: 0.5; }
.ember-run-c .ember-core { stroke-width: 0.9; }

@keyframes ember-run {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* Reduced motion: keep the structure, park the ember mid-run, stop the loop. */
@media (prefers-reduced-motion: reduce) {
  .ember-bloom,
  .ember-core {
    animation: none;
    stroke-dashoffset: 0.45;
  }
}

@media (max-width: 900px) {
  .ember { width: min(88%, 420px); }
  .ember-strands use { stroke-width: 0.8; }
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
  filter: saturate(0.92) contrast(1.02);
}

.hero-quote {
  width: min(330px, 100%);
  margin-top: clamp(28px, 4vh, 46px);
  padding-top: 18px;
  border-top: 1px solid rgba(101, 31, 42, 0.28);
  color: var(--ink);
}

.hero-quote blockquote {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.75vw, 2.1rem);
  line-height: 0.98;
  text-transform: uppercase;
}

.signature-inline {
  width: 210px;
  height: 56px;
}

.hero-tag {
  position: absolute;
  right: clamp(58px, 8vw, 128px);
  bottom: clamp(64px, 9vw, 120px);
  /* above .ember (z-3): the running core must never cross the wordmark */
  z-index: 4;
  max-width: 190px;
  margin: 0;
  color: rgba(20, 16, 14, 0.56);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.65;
  text-transform: uppercase;
}

.relationship-band {
  display: grid;
  grid-template-columns: 250px 1fr;
  border-block: 1px solid var(--faint);
  background: rgba(251, 250, 247, 0.78);
}

.relationship-band p,
.press p,
.kicker {
  margin: 0;
  color: var(--oxblood);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.relationship-band p {
  display: flex;
  align-items: center;
  padding: 22px 28px;
  border-right: 1px solid var(--faint);
}

/* auto-fit rather than a hardcoded count: the band has to absorb marks being
   added or removed without wrapping one orphan onto a second row */
.relationship-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* the CELL is the <li>; .lm-text is the wordmark inside it */
.relationship-grid > li {
  display: grid;
  min-height: 80px;
  place-items: center;
  border-right: 1px solid var(--faint);
  padding: 10px;
  text-align: center;
}

.relationship-grid > li:last-child {
  border-right: 0;
}

.relationship-grid .lm-text {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.5vw, 1.6rem);
  line-height: 1;
}

.badge-mark,
.script-mark,
.triton-mark {
  color: var(--oxblood);
}

.proof-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--faint);
  background: rgba(251, 250, 247, 0.84);
}

.proof-band div {
  min-height: 104px;
  padding: 20px 18px 18px;
  border-right: 1px solid var(--faint);
  text-align: center;
}

.proof-band div:last-child {
  border-right: 0;
}

.proof-band strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--display);
  font-size: clamp(2.15rem, 4vw, 3.55rem);
  font-weight: 500;
  line-height: 0.95;
}

.proof-band span {
  color: rgba(20, 16, 14, 0.68);
  font-family: var(--display);
  font-size: clamp(0.95rem, 1.3vw, 1.25rem);
}

/* The sector list is a label, not a figure, so it must not compete with the two
   score pairs beside it. Same cell, much smaller type. */
.proof-sectors strong {
  font-size: clamp(0.98rem, 1.35vw, 1.3rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}

.proof-band sup {
  font-size: 0.55em;
  vertical-align: super;
  line-height: 0;
}

/* Spans the whole band so the GlamDerm qualifier sits with the figures it
   qualifies rather than floating under an unrelated cell. */
.proof-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--faint);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
}

.hero-name {
  margin-bottom: 0.7em;
}

.hero-scope {
  font-size: 0.94em;
}

/* The commercial record. Deliberately set as a quiet row of figures, not a
   proof band: by the time a reader reaches it they already know the category,
   so these read as range rather than as identity. */
.commercial-record {
  margin: 0 0 clamp(30px, 3.6vw, 48px);
  padding-bottom: clamp(24px, 3vw, 34px);
  border-bottom: 1px solid var(--faint);
}

.commercial-record ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
}

.commercial-record li {
  display: grid;
  gap: 4px;
}

.commercial-record strong {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.commercial-record span {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}

.section-slab {
  position: relative;
  padding: clamp(34px, 5vw, 70px) clamp(20px, 4vw, 44px) clamp(40px, 5vw, 78px) 126px;
  border-bottom: 1px solid var(--faint);
}

.section-anchor {
  position: absolute;
  top: -96px;
}

.section-slab > :not(.architectural-svg):not(.section-anchor),
.relationship-band > *,
.proof-band > * {
  position: relative;
  z-index: 2;
}

.career {
  overflow: hidden;
}

/* The lede and the tagline hang from the baseline of the headline rather than
   floating at the top of a 237px row. Same content, but the space above them
   reads as air under a display line instead of a hole beside one. */
.career-head > p,
.career-head > small {
  align-self: end;
}

/* The resume sits with the name and title, where someone who has just decided
   to act will look for it, rather than in a sidebar that ran 200px longer than
   the column beside it. */
.dossier-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 3vw, 36px);
}

.career-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(300px, 0.52fr) minmax(280px, 0.35fr) auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  margin-bottom: 34px;
}

.career h2,
.global-band h2,
.doors h2,
.resume-references h2,
.references h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.7rem, 5vw, 5.3rem);
  font-weight: 500;
  line-height: 0.88;
}

.career-head small {
  justify-self: end;
  padding-top: 8px;
  color: rgba(20, 16, 14, 0.56);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.timeline {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin: 0;
  padding: 18px 0 0;
  border-top: 2px solid rgba(101, 31, 42, 0.55);
  list-style: none;
}

.timeline li {
  position: relative;
  min-height: 54px;
  padding-right: 14px;
  font-family: var(--display);
  font-size: 0.82rem;
  line-height: 1.15;
}

.timeline li::before {
  position: absolute;
  top: -24px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  content: "";
  background: var(--oxblood);
}

.timeline strong {
  display: block;
  margin-bottom: 5px;
  color: var(--oxblood);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 900;
}

.timeline span {
  color: rgba(20, 16, 14, 0.76);
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 20px;
}

.section-title-row h2,
.ground-head h2,
.readiness h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 3.55rem);
  font-weight: 500;
  line-height: 0.96;
}

/* Direct child only. As a loose descendant selector this also caught the
   .kicker nested in the row's left div, right-aligning it inside a 360px box:
   invisible on long kickers that fill the box, but "Published" was shunted
   ~230px to the right of the headline it belongs to. */
.section-title-row > p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: right;
  text-transform: uppercase;
}

/* Both the kicker and the h2 ship margin:0, so they sat flush. */
.section-title-row .kicker { margin-bottom: 0.9em; }

.work-intro {
  max-width: 760px;
  margin: 0 0 22px;
}

.work-intro p {
  margin: 0;
  color: rgba(20, 16, 14, 0.72);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.55;
}

.venture-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.venture-grid article {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  background: var(--ink);
  border-radius: 6px;
  box-shadow: 0 18px 54px rgba(20, 16, 14, 0.1);
}

.venture-grid article::after,
.door-card::after,
.image-triptych article::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(180deg, rgba(20, 16, 14, 0.12), rgba(20, 16, 14, 0.78));
  pointer-events: none;
}

.venture-grid article::after {
  background:
    linear-gradient(180deg, rgba(20, 16, 14, 0.16), rgba(20, 16, 14, 0.38) 42%, rgba(20, 16, 14, 0.9)),
    linear-gradient(90deg, rgba(20, 16, 14, 0.48), transparent 56%);
}

.venture-grid img,
.door-card img,
.image-triptych img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.door-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.work-card-copy {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 2;
}

.work-card-copy span {
  display: block;
  margin-bottom: 10px;
  color: rgba(251, 250, 247, 0.72);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-transform: uppercase;
}

.work-card-copy h3 {
  margin: 0 0 10px;
  color: var(--paper-soft);
  font-family: var(--display);
  font-size: clamp(1.55rem, 2.2vw, 2.25rem);
  font-weight: 500;
  line-height: 0.95;
}

.work-card-copy p {
  margin: 0;
  color: rgba(251, 250, 247, 0.82);
  font-size: 0.86rem;
  line-height: 1.48;
}

.global-band {
  display: grid;
  grid-template-columns: 0.31fr 0.43fr 0.26fr;
  gap: 10px;
  align-items: stretch;
  padding-top: 0;
  padding-bottom: 0;
}

.global-band > div {
  align-self: center;
  padding-block: 44px;
}

.global-band h2 {
  margin-bottom: 14px;
  text-transform: uppercase;
}

.global-band p {
  margin-bottom: 18px;
  font-family: var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.text-link {
  display: inline-flex;
  /* WCAG 2.2 target size, measured 17px tall. */
  align-items: center;
  min-height: 24px;
  color: var(--oxblood);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform 180ms ease;
}

.text-link::after {
  content: "→";
  padding-left: 10px;
}

.global-band figure {
  position: relative;
  min-height: 290px;
  margin: 0;
  overflow: hidden;
}

.global-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.global-jet {
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

.global-desert {
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

.global-desert::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(20, 16, 14, 0.48));
}

.global-desert figcaption {
  position: absolute;
  right: 20px;
  bottom: 18px;
  z-index: 2;
  max-width: 210px;
  color: var(--paper-soft);
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.1;
  text-align: right;
  text-transform: uppercase;
}

.readiness {
  overflow: hidden;
}

.readiness .section-title-row {
  align-items: center;
}

.readiness h2 {
  max-width: 820px;
  margin-top: 8px;
}

.readiness-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.readiness-grid article,
.door-card-light {
  min-height: 190px;
  border: 1px solid rgba(101, 31, 42, 0.12);
  border-radius: 6px;
  padding: 22px;
  background: rgba(251, 250, 247, 0.93);
  backdrop-filter: blur(10px);
  /* No resting shadow. A 1px border plus a 46px soft shadow on the same
     element is the ghost-card tell, pick one. The border is the architectural
     choice here and matches the hairline rules used elsewhere. .book-card
     already follows this: border at rest, lift only on hover. */
}

.readiness-grid strong {
  display: block;
  margin-bottom: 30px;
  color: var(--oxblood);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.readiness-grid h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 1.65rem;
  font-weight: 500;
}

.readiness-grid p {
  margin: 0;
  font-size: 0.92rem;
}

.doors h2 {
  max-width: 940px;
  margin-bottom: 8px;
}

.doors > .kicker {
  margin-bottom: 24px;
}

.door-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.door-card {
  position: relative;
  display: flex;
  min-height: 285px;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 6px;
  padding: 20px;
  background: var(--ink);
  color: var(--paper-soft);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.door-card strong,
.door-card span {
  position: relative;
  z-index: 2;
}

.door-card strong {
  margin-bottom: 8px;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.35vw, 2.6rem);
  font-weight: 500;
  line-height: 0.96;
}

.door-card span {
  color: rgba(251, 250, 247, 0.82);
  font-size: 0.9rem;
}

.door-card.door-card-light {
  border: 1px solid rgba(101, 31, 42, 0.18);
  background:
    linear-gradient(135deg, rgba(101, 31, 42, 0.08), transparent 58%),
    rgba(251, 250, 247, 0.86);
  color: var(--ink);
}

.door-card.door-card-light::after {
  display: none;
}

.door-card.door-card-light span {
  color: var(--muted);
}

.contact-form {
  display: grid;
  grid-template-columns: minmax(280px, 0.38fr) 1fr;
  gap: clamp(28px, 5vw, 72px);
  margin-top: 54px;
  border: 1px solid rgba(101, 31, 42, 0.14);
  border-radius: 6px;
  padding: clamp(22px, 4vw, 42px);
  background:
    linear-gradient(135deg, rgba(251, 250, 247, 0.98), rgba(245, 243, 238, 0.72)),
    radial-gradient(ellipse at 100% 0%, rgba(101, 31, 42, 0.08), transparent 42%);
}

.form-copy h3 {
  margin: 12px 0 14px;
  font-family: var(--display);
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  font-weight: 500;
  line-height: 0.95;
}

.form-copy p:not(.kicker) {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

/* Engagement model: a terms-style note under the lede, set off by a full
   hairline rather than a side stripe. The selector must out-specify
   .form-copy p:not(.kicker) (0,2,1), which sets margin:0 and font-size:1rem, a bare .form-engagement (0,1,0) loses both and sits flush against the
   paragraph above. 0.92rem on --muted over --paper measures 5.88:1. */
.form-copy p.form-engagement {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--faint);
  font-size: 0.92rem;
}

.form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form-fields label {
  display: grid;
  gap: 8px;
  color: rgba(20, 16, 14, 0.74);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.form-fields input,
.form-fields select,
.form-fields textarea {
  width: 100%;
  border: 1px solid rgba(101, 31, 42, 0.18);
  border-radius: 4px;
  padding: 13px 13px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  font: 500 0.95rem/1.35 var(--sans);
  outline: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.form-fields textarea {
  min-height: 142px;
  resize: vertical;
}

.form-fields input:focus,
.form-fields select:focus,
.form-fields textarea:focus {
  border-color: var(--oxblood);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 4px rgba(101, 31, 42, 0.08);
}

.message-field,
.form-fields .button,
.form-status {
  grid-column: 1 / -1;
}

.form-fields .button {
  justify-self: start;
  width: auto;
}

.form-status {
  min-height: 1.3em;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.press {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 24px;
  align-items: center;
}

.press-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  border-left: 1px solid var(--faint);
}

.press-row > li {
  display: grid;
  min-height: 62px;
  place-items: center;
  border-right: 1px solid var(--faint);
  color: rgba(20, 16, 14, 0.76);
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 2.35rem);
  line-height: 1;
  text-align: center;
}

.image-triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 0;
}

.image-triptych article {
  position: relative;
  min-height: 355px;
  overflow: hidden;
}

.image-triptych p {
  position: absolute;
  z-index: 2;
  bottom: 18px;
  left: 18px;
  max-width: 250px;
  margin: 0;
  color: var(--paper-soft);
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.resume-references {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 280px;
}

.resume-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.references {
  max-width: 1120px;
  text-align: center;
}

.references h2 {
  margin: 12px auto 24px;
  max-width: 900px;
  line-height: 0.96;
}

.site-footer {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 28px;
  align-items: center;
  max-width: var(--max);
  margin-inline: auto;
  padding: 42px clamp(20px, 4vw, 44px) 42px 126px;
}

.footer-signature {
  width: 190px;
  height: 52px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  color: rgba(20, 16, 14, 0.64);
  font-family: var(--display);
  font-size: 0.86rem;
}

.site-footer .social-links {
  justify-content: flex-end;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer p {
  grid-column: 1 / 3;
  margin: 0;
  color: rgba(20, 16, 14, 0.58);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-footer small {
  color: rgba(20, 16, 14, 0.62);
  font-size: 0.72rem;
}

.js .relationship-band,
.js .proof-band,
.js .section-slab {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.relationship-band.is-visible,
.proof-band.is-visible,
.section-slab.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* The dark slab never fades as a whole: compositing a full-bleed #14100E
   background through opacity produces a grey wash over cream. Reveal its
   contents instead, so the backdrop root never moves (kills the blur pop too). */
.js .readiness {
  opacity: 1;
  transform: none;
}

.js .readiness .section-title-row,
.js .readiness .readiness-grid {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.readiness.is-visible .section-title-row,
.readiness.is-visible .readiness-grid {
  opacity: 1;
  transform: translateY(0);
}

/* Reserve the box: these images sat at intrinsic ratio inside min-height
   parents, growing the document up to 2352px on load at 900px wide. */
.hero-media img,
.venture-grid img,
.global-band img,
.image-triptych img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img,
.venture-grid img,
.global-band img,
.door-card img,
.image-triptych img {
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-media:hover img,
.venture-grid article:hover img,
.global-band figure:hover img,
.door-card:hover img,
.image-triptych article:hover img {
  transform: scale(1.025);
}

@keyframes signature-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes arch-dash {
  to {
    stroke-dashoffset: -1220;
  }
}

@keyframes arch-dash-reverse {
  to {
    stroke-dashoffset: 700;
  }
}

@keyframes arch-drift {
  from {
    transform: translate3d(-1.2%, -0.6%, 0) rotate(-0.2deg);
  }

  to {
    transform: translate3d(1.2%, 0.8%, 0) rotate(0.2deg);
  }
}

@keyframes arch-drift-reverse {
  from {
    transform: translate3d(1%, 0.8%, 0) rotate(0.18deg);
  }

  to {
    transform: translate3d(-1%, -0.6%, 0) rotate(-0.18deg);
  }
}

@keyframes arch-rise {
  from {
    transform: translate3d(0, 1.4%, 0) scale(1);
  }

  to {
    transform: translate3d(0, -1.1%, 0) scale(1.018);
  }
}

@keyframes svg-field-drift {
  from {
    transform: translate3d(-0.8%, 0.4%, 0) scale(1);
  }

  to {
    transform: translate3d(1%, -0.7%, 0) scale(1.018);
  }
}

@keyframes signature-wipe {
  to {
    transform: scaleX(0);
  }
}

@keyframes signature-ink {
  from {
    opacity: 0;
    transform: translate3d(0, 2px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

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

  /* Shortening the fade turns it into a one-frame snap, which is a harder
     flash than the animation. Reveal state must be reset outright. */
  .hero-copy,
  .relationship-band,
  .proof-band,
  .section-slab,
  .readiness .section-title-row,
  .readiness .readiness-grid {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 1280px) {
  .site-header {
    grid-template-columns: auto 1fr auto auto;
  }

  .header-cta {
    display: inline-flex;
  }

  .hero,
  .section-slab,
  .site-footer {
    padding-left: 104px;
  }

  .proof-band,
  .relationship-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .proof-band div:nth-child(3),
  .relationship-grid span:nth-child(3) {
    border-right: 0;
  }

  .proof-band div:nth-child(-n + 3),
  .relationship-grid span:nth-child(-n + 3) {
    border-bottom: 1px solid var(--faint);
  }

  .venture-grid,
  .readiness-grid,
  .door-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .venture-grid article {
    min-height: 380px;
  }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
    justify-content: space-between;
    min-height: 76px;
  }

  .header-cta {
    display: none;
  }

  .signature-mark {
    width: 160px;
    height: 54px;
  }

  .site-nav {
    inset: 76px 12px auto;
  }

  .site-nav::before {
    inset: -76px -12px -100vh;
  }

  .menu-panel {
    grid-template-columns: 1fr;
    max-height: calc(100svh - 98px);
    overflow: auto;
  }

  .menu-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .side-rail {
    display: none;
  }

  .hero,
  .section-slab,
  .site-footer {
    padding-inline: 22px;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 38px;
    background: var(--paper);
  }

  .hero-copy {
    max-width: 640px;
    padding: 0;
  }

  .hero-media {
    min-height: 520px;
    margin-inline: -22px;
  }

  .hero-quote {
    width: min(360px, 100%);
  }

  .hero-tag {
    right: 24px;
    bottom: 36px;
  }

  .relationship-band,
  .press {
    grid-template-columns: 1fr;
  }

  .relationship-band p {
    justify-content: center;
    border-right: 0;
    border-bottom: 1px solid var(--faint);
    text-align: center;
  }

  .career-head,
  .global-band,
  .resume-references,
  .contact-form {
    grid-template-columns: 1fr;
    display: grid;
  }

  .career-head small {
    justify-self: start;
  }

  .timeline {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 18px;
  }

  .section-title-row,
  .readiness .section-title-row {
    display: grid;
    align-items: start;
  }

  .section-title-row p {
    max-width: none;
    text-align: left;
  }

  .global-band figure {
    min-height: 330px;
  }

  .press-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .image-triptych {
    grid-template-columns: 1fr;
  }

  .site-footer {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .site-footer p {
    grid-column: auto;
  }

  .site-footer .social-links {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .site-header {
    min-height: 68px;
    padding-inline: 16px;
  }

  .signature-mark {
    width: 138px;
    height: 48px;
  }

  .site-nav {
    top: 68px;
    inset: 68px 10px auto;
  }

  .site-nav::before {
    inset: -68px -10px -100vh;
  }

  .menu-button {
    min-height: 38px;
    padding: 0 12px;
  }

  .menu-label {
    display: none;
  }

  .menu-panel {
    padding: 20px;
  }

  .menu-intro h2 {
    font-size: clamp(2.2rem, 13vw, 3.6rem);
  }

  .menu-links {
    grid-template-columns: 1fr;
  }

  .menu-links a {
    min-height: 80px;
  }

  h1 {
    font-size: clamp(4.2rem, 20vw, 6.2rem);
  }

  .hero h1 {
    font-size: clamp(1.7rem, 7.4vw, 2.4rem);
  }

  .hero-copy {
    padding-top: 22px;
  }

  .hero-actions {
    display: grid;
  }

  .button {
    width: 100%;
  }

  .hero-media {
    min-height: 430px;
  }

  .hero-quote {
    width: auto;
    margin: 24px 0 0;
    padding: 16px 0 0;
    background: transparent;
  }

  .hero-tag {
    position: static;
    margin: 16px 0 0;
  }

  .relationship-grid,
  .proof-band,
  .venture-grid,
  .readiness-grid,
  .door-grid,
  .form-fields {
    grid-template-columns: 1fr;
  }

  .relationship-grid span,
  .proof-band div {
    border-right: 0;
    border-bottom: 1px solid var(--faint);
  }

  .section-slab {
    padding-block: 42px;
  }

  .career h2,
  .global-band h2,
  .doors h2,
  .resume-references h2,
  .references h2 {
    font-size: clamp(2.55rem, 13vw, 4rem);
  }

  .timeline {
    grid-template-columns: 1fr;
    border-top: 0;
    padding-top: 0;
  }

  .timeline li {
    padding: 12px 0 12px 22px;
    border-left: 2px solid rgba(101, 31, 42, 0.55);
  }

  .timeline li::before {
    top: 17px;
    left: -7px;
  }

  .venture-grid article,
  .door-card,
  .image-triptych article {
    min-height: 330px;
  }

  .work-card-copy h3 {
    font-size: clamp(1.6rem, 9vw, 2.3rem);
  }

  .press-row {
    grid-template-columns: 1fr;
    border-left: 0;
  }

  .press-row > li {
    border-left: 1px solid var(--faint);
  }
}


/* ============ PUBLISHED / BOOKS ============ */
.books {
  background: var(--paper-soft);
  position: relative;
  overflow: hidden;
}

.books-lede {
  max-width: 46ch;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
}

.books-group + .books-group {
  margin-top: 64px;
}

.books-group-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--faint);
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.book-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding: 22px;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--faint);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.45s, box-shadow 0.45s;
}

.book-card:hover,
.book-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(101, 31, 42, 0.42);
  box-shadow: 0 18px 44px rgba(20, 16, 14, 0.12);
}

.book-cover {
  display: block;
  aspect-ratio: 2 / 3;
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(20, 16, 14, 0.22);
}

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

.book-cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px;
  text-align: center;
}

.placeholder-title {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.1;
  color: var(--paper);
}

.placeholder-rule {
  width: 32px;
  height: 1px;
  background: rgba(245, 243, 238, 0.42);
}

.placeholder-author {
  font-family: var(--sans);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 243, 238, 0.68);
}

.book-copy {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 4px;
}

.book-copy strong {
  font-family: var(--display);
  font-size: 1.42rem;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: 0.005em;
}

.book-copy em {
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

.book-badge {
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
  border: 1px solid rgba(101, 31, 42, 0.32);
  padding: 5px 10px;
}

.book-link {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.book-link::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--oxblood);
  transform: scaleX(0.53);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.book-card:hover .book-link::after,
.book-card:focus-visible .book-link::after {
  transform: scaleX(1);
}

.footer-vehicle {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
}

.footer-vehicle a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-color: rgba(101, 31, 42, 0.5);
}

.footer-vehicle a:hover {
  color: var(--oxblood);
}

@media (max-width: 980px) {
  .book-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .books-group + .books-group { margin-top: 48px; }
}

@media (max-width: 680px) {
  .book-card { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 16px; }
  .book-copy strong { font-size: 1.2rem; }
}

/* ============ FORM: honeypot + status states ============ */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-status {
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.5;
  min-height: 1.4em;
  margin: 4px 0 0;
  color: var(--muted);
}

.form-status[data-state="pending"] { color: var(--muted); }
.form-status[data-state="success"] {
  color: var(--ink);
  font-weight: 600;
  padding-left: 18px;
  position: relative;
}
.form-status[data-state="success"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 1px;
  background: var(--oxblood);
}
.form-status[data-state="error"] { color: var(--oxblood); font-weight: 500; }

.contact-form button[type="submit"][disabled] {
  opacity: 0.55;
  cursor: progress;
}

/* ============ SIGNATURE (traced vector) ============ */
.sig-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sig-svg {
  display: block;
  width: 100%;
  height: auto;
  color: currentColor;
}

.signature-mark .sig-svg { width: 190px; }
.signature-inline .sig-svg { width: 210px; }
.footer-signature .sig-svg { width: 200px; }

.sig-draw [data-sig-stroke] {
  transition: stroke-dashoffset 2.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sig-draw.is-written [data-sig-stroke] { stroke-dashoffset: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .sig-draw [data-sig-stroke] {
    transition: none;
    stroke-dashoffset: 0 !important;
  }
}

/* ================= UPGRADE PASS ================= */

/* --- #5 career headline: controlled breaks --- */
.career-head h2 .line { display: block; }
.career-head h2 .accent { color: var(--oxblood); }

/* --- #7 hero signature: give it real presence --- */
.signature-inline .sig-svg { width: 320px; }
@media (max-width: 680px) { .signature-inline .sig-svg { width: 230px; } }

/* --- #6 header CTA appears after the hero --- */
/* The CTA is the primary conversion control: it is visible at every scroll
   position, including the very top. It only shifts weight on scroll. */
.js .site-header .header-cta {
  transition: box-shadow 0.4s ease, background 0.3s ease;
}
.site-header.is-scrolled .header-cta {
  box-shadow: 0 6px 22px rgba(101, 31, 42, 0.22);
}

/* --- #1 THE SPINE: one continuous line --- */
.spine {
  position: fixed;
  left: 18px;
  top: 0;
  width: 60px;
  height: 100vh;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.spine.is-live { opacity: 1; }
.spine svg { width: 100%; height: 100%; display: block; }
.spine-track {
  fill: none;
  stroke: rgba(20, 16, 14, 0.09);
  stroke-width: 1.25;
}
.spine-track,
.spine-live { transition: stroke 320ms ease; }

.spine-live {
  fill: none;
  stroke: var(--oxblood);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.85;
}
.spine-dark .spine-track { stroke: rgba(245, 243, 238, 0.16); }
.spine-dark .spine-live { stroke: rgba(245, 243, 238, 0.85); }

@media (max-width: 1180px) { .spine { display: none; } }
@media (prefers-reduced-motion: reduce) { .spine { display: none; } }

/* --- #1 closing signature above the form --- */
.closing-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 0 46px;
  text-align: center;
}
.closing-sign .sig-close { width: min(520px, 76%); color: var(--ink); }
.closing-sign-note {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* --- #2 AI READINESS GOES DARK --- */
.readiness {
  background: var(--ink);
  color: var(--paper);
}
.readiness .kicker { color: rgba(245, 243, 238, 0.62); }
.readiness h2 { color: var(--paper); }
.readiness .readiness-grid article {
  background: rgba(245, 243, 238, 0.035);
  border: 1px solid rgba(245, 243, 238, 0.14);
}
.readiness .readiness-grid article strong { color: var(--paper); opacity: 0.4; }
.readiness .readiness-grid article h3 { color: var(--paper); }
.readiness .readiness-grid article p { color: rgba(245, 243, 238, 0.74); }
.readiness .button-primary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.readiness .button-primary:hover { background: var(--oxblood); color: var(--paper); border-color: var(--oxblood); }
.readiness .arch-path.arch-white { stroke: rgba(245, 243, 238, 0.14); }
.readiness .arch-path.arch-primary { stroke: rgba(245, 243, 238, 0.26); }

/* --- #4 PRESS: wordmark treatment --- */
.press-label {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 26px;
}
.press-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--faint);
}
.press-row .pm {
  white-space: nowrap;
  color: var(--ink);
  opacity: 0.82;
  line-height: 1;
  align-self: baseline;
  transition: opacity 0.4s ease;
}
.press-row .pm:hover { opacity: 1; }
.press-row .lm-text.pm-forbes { font-family: var(--display); font-weight: 700; font-size: 1.34rem; letter-spacing: -0.005em; }
.press-row .lm-text.pm-robb { font-family: var(--display); font-weight: 400; font-size: 1.12rem; letter-spacing: 0.02em; }
.press-row .lm-text.pm-bloomberg { font-family: var(--sans);    font-weight: 600; font-size: 1.06rem; letter-spacing: -0.018em; }
.press-row .lm-text.pm-yacht { font-family: var(--display); font-weight: 400; font-size: 0.98rem; letter-spacing: 0.10em; text-transform: uppercase; }
.press-row .lm-text.pm-boat { font-family: var(--sans);    font-weight: 700; font-size: 0.98rem; letter-spacing: 0.03em; }

.press-row .lm-text.pm-coin { font-family: var(--sans);    font-weight: 500; font-size: 0.96rem; letter-spacing: -0.01em; }

@media (max-width: 880px) {
  .press-row { justify-content: flex-start; gap: 16px 28px; }
  .press-row .pm { font-size: 1rem !important; }
  
}

/* --- #9 DOOR HIERARCHY --- */
.door-grid-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.door-grid-secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}
.door-card-quiet {
  min-height: 0;
  padding: 26px 28px;
  background: var(--paper-soft);
  border: 1px solid var(--faint);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.door-card-quiet::after { display: none; }
.door-card-quiet strong { color: var(--ink); font-size: 1.16rem; }
.door-card-quiet span { color: var(--muted); }

@media (max-width: 980px) {
  .door-grid-primary,
  .door-grid-secondary { grid-template-columns: minmax(0, 1fr); }
}

/* --- #8 EXECUTIVE DOSSIER --- */
.dossier { background: var(--paper-soft); }
.dossier-head { margin-bottom: 40px; }
.dossier-title {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
}
.dossier-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.dossier-facts { margin: 0; border-top: 1px solid var(--faint); display: grid; }
.dossier-facts > div {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--faint);
}
.dossier-facts dt {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.dossier-facts dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--ink);
}
.dossier-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* ---------- Case study ----------
   The proof section for the AEO argument. Every figure here is measured, and
   the unmet items are published alongside the score, a case study that marks
   itself perfect is an advertisement, and reads like one. */
.case { padding-block: clamp(64px, 9vw, 130px); }

/* The two .line spans are inline by default, so the sentences ran together
   as "PAGE ONE.THE MACHINE". Grid gives each its own row. */
.case h2 { display: grid; }
.case h2 .line-turn { color: var(--oxblood); }

.case-lede {
  max-width: 380px;
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.6;
  text-align: right;
  text-wrap: pretty;
}

.case-shot {
  margin: clamp(30px, 4vw, 48px) 0 0;
}

.case-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--faint);
}

.case-shot figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.78rem;
}

.case-score {
  margin-top: clamp(38px, 5vw, 62px);
  padding-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--faint);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 250px);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* The note sets the height of the left column, so it is measured against the
   graphic rather than left to wrap wherever it likes. Too wide and the column
   ends 150px short of the scale beside it. */
.case-score-note {
  max-width: 47ch;
}

/* The readiness scale. This earns its place by showing what the two numerals
   cannot: the proportion of the gain, and where the unmet headroom sits. The
   dashed length at the top is the same figure the "still open" panel states, so
   the graphic and the prose can never drift apart. */
.score-viz {
  margin: 0;
  align-self: start;
}

.score-viz svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 222px;
  overflow: visible;
}

.score-viz figcaption {
  max-width: 34ch;
  margin-top: 12px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.74rem;
  line-height: 1.5;
}

.viz-track,
.viz-base,
.viz-open,
.viz-gain,
.viz-tick,
.viz-rule {
  fill: none;
  stroke-linecap: butt;
}

.viz-track { stroke: rgba(20, 16, 14, 0.08); stroke-width: 9; }
.viz-base { stroke: rgba(20, 16, 14, 0.38); stroke-width: 7; }
.viz-open { stroke: rgba(20, 16, 14, 0.3); stroke-width: 1.5; stroke-dasharray: 3 4; }
.viz-tick { stroke: rgba(20, 16, 14, 0.24); stroke-width: 1; }
.viz-rule { stroke: var(--faint); stroke-width: 1; }

/* Neon build: wide halo, tighter bloom, solid core, hot filament. Glow is
   additive, so on a cream ground it has to be carried by spread and a lighter
   filament rather than by luminance the paper cannot give back. */
.viz-gain { stroke: var(--oxblood); }
.viz-halo { stroke: #b3384a; stroke-width: 16; opacity: 0.2; }
.viz-bloom { stroke: #a8384a; stroke-width: 11; opacity: 0.42; }
.viz-core { stroke-width: 9; }
.viz-hot { stroke: #d8596c; stroke-width: 2.4; opacity: 0.85; }

/* The withheld baseline. A hatched band rather than a point, because the exact
   figure is the practice's to publish and it has asked us not to. The bar above
   it starts at the passing line, which understates the distance travelled: the
   safe direction to be wrong in. */
.viz-hatch-line {
  stroke: rgba(20, 16, 14, 0.3);
  stroke-width: 2;
}

.viz-zone {
  opacity: 0.85;
}

.viz-rule-pass {
  stroke: rgba(20, 16, 14, 0.34);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.viz-pass-label {
  fill: rgba(20, 16, 14, 0.5);
  letter-spacing: 0.14em;
}

.viz-scale,
.viz-sub {
  fill: var(--muted);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.viz-seg {
  fill: var(--ink);
  font-family: var(--display);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.viz-seg-gain { fill: var(--oxblood); }
.viz-seg-open { fill: rgba(20, 16, 14, 0.42); }

/* Drawn upward on arrival, and only the gain, the segment that represents the
   work. Default state is complete, so a reader without JS sees the finished
   scale rather than an empty axis. */
.js .score-viz .viz-gain { stroke-dasharray: 0 1; }

.js .is-visible .score-viz .viz-gain {
  stroke-dasharray: 1 1;
  transition: stroke-dasharray 1100ms cubic-bezier(0.22, 1, 0.36, 1) 240ms;
}

/* The glow holds after the draw and never settles into a countable rhythm.
   There is no randomness in CSS, so three layers run on coprime durations with
   deliberately uneven keyframe spacing: the envelopes beat against each other
   and the combined pattern does not visibly repeat. Same trick as the hero
   ember, so the two live elements on the page read as one family. */
.js .is-visible .score-viz .viz-halo {
  animation: vizHalo 13.1s ease-in-out 1340ms infinite;
}

.js .is-visible .score-viz .viz-bloom {
  animation: vizBloom 9.4s ease-in-out 1340ms infinite;
}

.js .is-visible .score-viz .viz-hot {
  animation: vizHot 7.3s ease-in-out 1340ms infinite;
}

@keyframes vizHalo {
  0%, 9% { opacity: 0.16; stroke-width: 15; }
  17% { opacity: 0.4; stroke-width: 21; }
  24% { opacity: 0.2; stroke-width: 16; }
  38% { opacity: 0.5; stroke-width: 24; }
  44% { opacity: 0.22; stroke-width: 17; }
  61% { opacity: 0.34; stroke-width: 19; }
  69% { opacity: 0.15; stroke-width: 15; }
  86% { opacity: 0.46; stroke-width: 22; }
  100% { opacity: 0.16; stroke-width: 15; }
}

@keyframes vizBloom {
  0%, 11% { opacity: 0.36; stroke-width: 11; }
  21% { opacity: 0.68; stroke-width: 14; }
  29% { opacity: 0.4; stroke-width: 11; }
  46% { opacity: 0.8; stroke-width: 15; }
  53% { opacity: 0.42; stroke-width: 12; }
  67% { opacity: 0.58; stroke-width: 13; }
  76% { opacity: 0.34; stroke-width: 11; }
  91% { opacity: 0.72; stroke-width: 14; }
  100% { opacity: 0.36; stroke-width: 11; }
}

@keyframes vizHot {
  0%, 14% { opacity: 0.72; stroke-width: 2.2; }
  23% { opacity: 1; stroke-width: 3.1; }
  33% { opacity: 0.8; stroke-width: 2.4; }
  49% { opacity: 1; stroke-width: 3.4; }
  57% { opacity: 0.74; stroke-width: 2.2; }
  72% { opacity: 0.94; stroke-width: 2.8; }
  81% { opacity: 0.7; stroke-width: 2.2; }
  94% { opacity: 1; stroke-width: 3.2; }
  100% { opacity: 0.72; stroke-width: 2.2; }
}

@media (prefers-reduced-motion: reduce) {
  .js .score-viz .viz-gain,
  .js .is-visible .score-viz .viz-gain {
    stroke-dasharray: 1 1;
    transition: none;
  }

  .js .is-visible .score-viz .viz-halo,
  .js .is-visible .score-viz .viz-bloom,
  .js .is-visible .score-viz .viz-hot {
    animation: none;
  }
}

@media (max-width: 900px) {
  .case-score {
    grid-template-columns: 1fr;
  }

  .score-viz svg { max-width: 260px; }
}

/* The score is the product, so it gets a name and is set as a unit. */
.score-label {
  margin: 0 0 14px;
  color: var(--oxblood);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* The per-cent sign rides smaller and higher so the numeral stays dominant. */
.case-num strong i {
  font-style: normal;
  font-size: 0.42em;
  vertical-align: 0.9em;
  margin-left: 0.04em;
  letter-spacing: 0;
}

.case-score-pair {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 44px);
}

.case-num { display: grid; gap: 4px; }

.case-num strong {
  font-family: var(--display);
  font-size: clamp(3.2rem, 8vw, 5.6rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.case-num-before strong { color: rgba(20, 16, 14, 0.34); }
.case-num-after strong { color: var(--oxblood); }

.case-num span {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.case-arrow {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: rgba(20, 16, 14, 0.3);
  align-self: center;
}

.case-score-note {
  max-width: 64ch;
  margin: 18px 0 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.case-cta {
  margin-top: clamp(34px, 4vw, 50px);
  padding: clamp(26px, 3.2vw, 42px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--ink);
  color: var(--paper);
}

.case-cta .score-label { color: #c8707c; }

.case-cta h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-wrap: balance;
}

.case-cta-note {
  max-width: 54ch;
  margin: 0;
  color: rgba(245, 243, 238, 0.78);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.case-cta-actions { display: grid; gap: 14px; justify-items: start; }

.case-cta-reversal {
  max-width: 38ch;
  color: rgba(245, 243, 238, 0.58);
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .case-cta { grid-template-columns: minmax(0, 1fr); }
}

.case-grid {
  margin-top: clamp(38px, 5vw, 58px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--faint);
  border-block: 1px solid var(--faint);
}

.case-col {
  padding: clamp(24px, 3vw, 34px);
  background: var(--paper);
}

.case-col-label {
  margin: 0 0 14px;
  color: var(--oxblood);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.case-code {
  margin: 0;
  padding: 16px 18px;
  background: rgba(20, 16, 14, 0.04);
  border-left: none;
  font-family: Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-x: auto;
}

.case-col-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Second case study. Demoted by scale, not by hiding: the GlamDerm figures were
   produced on the pre-v2 rubric, so they must stay legible and labelled while
   never reading as a peer of the AimwellBio number directly above them. */
.case-secondary h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }

.case-secondary .case-num strong { font-size: clamp(2.4rem, 5.5vw, 3.8rem); }

.case-secondary .case-score-note strong { color: var(--ink); }

.case-score-note code,
.case-col-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  letter-spacing: -0.01em;
}

.case-facts {
  margin: clamp(34px, 4vw, 50px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(20px, 3vw, 34px);
}

.case-facts li { display: grid; gap: 5px; }

.case-facts strong {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.case-facts span {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}

.case-kicker {
  max-width: 68ch;
  margin: clamp(32px, 4vw, 46px) 0 0;
  font-family: var(--sans);
  font-size: clamp(0.98rem, 1.5vw, 1.06rem);
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}

.case-kicker em { font-style: italic; }

/* The argument and the admission, side by side. Stacked, each occupied about
   half the slab and left roughly 600px of nothing to its right; paired, they
   read as claim and counterweight, which is also how they are meant to be read. */
.case-close {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  margin-top: clamp(32px, 4vw, 46px);
}

.case-close .case-kicker {
  margin-top: 0;
}

.case-close .case-open {
  margin-top: 0;
}

@media (max-width: 900px) {
  .case-close {
    grid-template-columns: 1fr;
    gap: clamp(22px, 3vw, 30px);
  }
}

.case-open {
  max-width: 68ch;
  margin-top: clamp(30px, 4vw, 42px);
  padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid var(--faint);
}

.case-open p:last-child {
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.6;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .case-lede { text-align: left; max-width: none; }
}

/* ---------- In their words ----------
   Dates are shown deliberately. Most of these recommendations are old, and
   hiding that would be the weaker move: displayed chronologically, a 2008
   endorsement and a 2024 one saying the same thing is evidence of consistency
   rather than a stale testimonial. The span is the argument. */
.voices { padding-block: clamp(64px, 9vw, 130px); }

.voices-lede {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.55;
  text-align: right;
  text-wrap: pretty;
}

.voices-grid {
  margin: clamp(34px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* Three named rows so every card's year, quote and attribution sit on the
     same baselines. Without subgrid each card sizes its own rows and the
     attribution rules land at different heights, measured 18px apart. */
  grid-template-rows: auto 1fr auto;
  gap: 1px;
  background: var(--faint);
  border-block: 1px solid var(--faint);
}

.voice {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: 16px;
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.4vw, 32px);
  background: var(--paper);
}

.voice-year {
  margin: 0;
  color: var(--oxblood);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.voice blockquote { margin: 0; }

.voice blockquote p {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.voice-who {
  margin: 0;
  display: grid;
  gap: 3px;
  padding-top: 14px;
  border-top: 1px solid var(--faint);
}

.voice-who strong {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

.voice-who span {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 760px) {
  .voices-lede { text-align: left; max-width: none; }
}

/* ---------- Certifications ----------
   Sits in the dossier, not the hero. These are currency signals next to
   twenty years of operating history, displayed as a credential panel a board
   member can scan, not as a badge wall that would invite the question of why
   a Chief AI Officer needs to prove literacy. Issuer leads; the programme
   names substantiate it. No issuer logo: a completion is not a partnership. */
.creds {
  margin-top: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--faint);
}

/* Issuer lockup: the official wordmark from Anthropic's own education
   platform, at credential scale and in the issuer slot, identification, not
   a partnership claim. The typed "Education" completes the real issuer name
   and still reads if the image fails. */
.creds-issuer {
  margin: 10px 0 14px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
}

.creds-mark {
  width: 152px;
  height: auto;
  display: block;
}

.creds-issuer-sub {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.creds-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
  max-width: 44ch;
}

.creds-list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(20, 16, 14, 0.82);
}

.creds-list a {
  display: inline-block;
  min-height: 24px; /* WCAG 2.2 target size */
  color: rgba(20, 16, 14, 0.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(101, 31, 42, 0.28);
  transition: color 180ms ease, border-color 180ms ease;
}

.creds-list a:hover,
.creds-list a:focus-visible { color: var(--oxblood); border-color: var(--oxblood); }

.creds-id {
  display: block;
  margin-top: 1px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.creds-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 7px;
  height: 1px;
  background: var(--oxblood);
}

.creds-note {
  margin: 14px 0 0;
  max-width: 44ch;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

/* The heading used to span the full width above the grid, pushing the right
   column down and leaving 372px of dead space beneath the facts list. Moving
   it into the left column lets the right column start at the top of the
   section, which closes most of that gap. */
.dossier-main {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(18px, 2.2vw, 26px);
}

/* The facts list fills whatever height the right column sets, and its rows
   distribute into it. Previously it sat at its natural 332px against a 704px
   neighbour, leaving a visible hole beneath. Rows are capped so a very tall
   right column can't stretch them into a sparse ladder. */
.dossier-facts {
  align-content: space-between;
}

.dossier-facts > div { max-height: 96px; }

.dossier-refs {
  margin-top: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--faint);
}
.dossier-refs p { color: var(--muted); font-family: var(--sans); font-size: 0.9rem; max-width: 40ch; margin: 8px 0 12px; }

@media (max-width: 980px) {
  .dossier-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .dossier-facts > div { grid-template-columns: 130px minmax(0, 1fr); gap: 14px; }
}


/* --- Book role line (contribution vs sole authorship) --- */
.book-role {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- VENTURE INDEX: typographic ledger --- */
.venture-index { background: var(--paper-soft); }
.vi-lede {
  max-width: 44ch;
  font-family: var(--sans);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--muted);
}
/* The tracks live on the LIST and each row adopts them via subgrid. With the
   grid on each <li>, every row sized its own columns to its own content, so
   only the first column ever lined up. Negative inline margin + matching row
   padding gives the hover band breathing room without moving the text. */
.vi-list {
  list-style: none;
  display: grid;
  grid-template-columns: 46px minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 1.2fr) auto;
  margin: 8px -20px 0;
  padding: 0;
  border-top: 1px solid var(--faint);
  counter-reset: vi;
}
.vi-list li {
  counter-increment: vi;
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  gap: 26px;
  align-items: baseline;
  padding: 22px 20px;
  border-bottom: 1px solid var(--faint);
  transition: background 0.4s ease;
}
.vi-list li::before {
  content: counter(vi, decimal-leading-zero);
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--oxblood);
  opacity: 0.7;
}
.vi-list li:hover { background: rgba(101, 31, 42, 0.028); }
.vi-name {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
}
.vi-role {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.vi-note {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}
.vi-link {
  justify-self: end;
  /* WCAG 2.2 target size: these measured 20px tall, under the 24px minimum. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  text-align: right;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(101, 31, 42, 0.4);
  padding-bottom: 3px;
}
.vi-link:hover { color: var(--oxblood); }
.vi-link-muted {
  color: var(--muted);
  border-bottom: 0;
  font-weight: 500;
  opacity: 0.8;
}

@media (max-width: 1100px) {
  .vi-list { grid-template-columns: minmax(0, 1fr); }
  .vi-list li {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px 18px;
    padding: 20px;
  }
  .vi-link { justify-self: start; text-align: left; }
  .vi-list li::before { grid-row: span 4; }
  .vi-name { font-size: 1.28rem; }
}

/* ================= MENU. THE ARRIVING LINE =================
   The panel is not a new surface. It is the spine continuing: one stroke
   enters the panel's top-left, branches into the index, and its wake is the
   only texture in the room. Every resting value here is the VISIBLE one, the undrawn dashoffset and the row offset exist only on
   .site-nav:not(.is-open), a subtree already opacity:0 / pointer-events:none,
   so nothing can flicker and closing snaps rather than rewinding.
   No infinite animation: the page already runs arch-dash in the grounds. */

.menu-panel { position: relative; }
.menu-intro { position: relative; z-index: 1; }
.menu-links { position: relative; z-index: 1; }

.menu-armature {
  --bleed: clamp(24px, 4vw, 46px);
  position: absolute;
  inset: calc(-1 * var(--bleed));
  z-index: 0;
  width: calc(100% + 2 * var(--bleed));
  height: calc(100% + 2 * var(--bleed));
  overflow: hidden;
  clip-path: inset(0);
  pointer-events: none;
}

.ma-spine,
.ma-branch,
.ma-hatch use { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.ma-spine { stroke: var(--oxblood); stroke-width: 1.5; opacity: 0.92; vector-effect: non-scaling-stroke; }
.ma-branch { stroke: rgba(101, 31, 42, 0.34); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Irregular offsets: even spacing reads as a machine stripe, uneven reads as engraving. */
.ma-hatch use { stroke: rgba(101, 31, 42, 0.17); stroke-width: 0.75; }

/* The wake travels with the tip and is the only thing that lets the hatch
   exist. Texture is the line's residue, and it withdraws with the line.
   Deliberately NOT non-scaling-stroke, its width is a reveal radius. */
.ma-wake { stroke: #fff; stroke-width: 236; stroke-linecap: round; }

.ma-spine,
.ma-branch,
.ma-wake { stroke-dasharray: 1; stroke-dashoffset: 1; }

.ma-wake   { transition: stroke-dashoffset 1020ms cubic-bezier(0.22, 0.61, 0.36, 1) 60ms; }
.ma-spine  { transition: stroke-dashoffset  880ms cubic-bezier(0.22, 0.61, 0.36, 1) 60ms; }
.ma-branch { transition: stroke-dashoffset  700ms cubic-bezier(0.22, 0.61, 0.36, 1) 430ms; }
.ma-branch-late { transition-delay: 560ms; }

.site-nav.is-open .ma-spine,
.site-nav.is-open .ma-branch,
.site-nav.is-open .ma-wake { stroke-dashoffset: 0; }

.site-nav:not(.is-open) .ma-spine,
.site-nav:not(.is-open) .ma-branch,
.site-nav:not(.is-open) .ma-wake { transition-duration: 230ms; transition-delay: 0ms; }

/* The settle rides `translate`, the hover press rides `transform`: they
   compose into one matrix but never fight, so the 620ms entrance easing
   cannot clobber the existing translateY(-1px) hover. */
.menu-links a { opacity: 1; translate: 0 0; }

.site-nav.is-open .menu-links a {
  transition:
    opacity 460ms ease calc(240ms + var(--row, 0) * 26ms),
    translate 620ms cubic-bezier(0.22, 0.61, 0.36, 1) calc(240ms + var(--row, 0) * 26ms),
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.site-nav:not(.is-open) .menu-links a { opacity: 0; translate: 0 12px; transition-duration: 0ms; }

/* The nib: one stroke travelling between rows without lifting. Gated on
   data-nib-ready so a JS failure means no nib, not a stroke parked at 0,0. */
.menu-nib {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100px;
  height: 10px;
  opacity: 0;
  pointer-events: none;
  transform-origin: 0 50%;
  transition: transform 430ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 260ms ease 880ms;
}

.site-nav.is-open .menu-links[data-nib-ready] .menu-nib { opacity: 1; }
.menu-nib svg { display: block; width: 100%; height: 100%; }
.menu-nib path { stroke: var(--oxblood); stroke-width: 1.6; stroke-linecap: round; }

/* Last thing the line does before it rests: rule the email. */
.menu-email { position: relative; padding-bottom: 7px; }
.menu-email::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1) 760ms;
}
.site-nav.is-open .menu-email::after { transform: scaleX(1); }
.site-nav:not(.is-open) .menu-email::after { transition: none; }

/* At 980px .menu-panel becomes overflow:auto, so an absolutely positioned
   child's containing block is the SCROLLPORT, height:100% would cover only
   the first screen. The line becomes a masthead stroke instead. */
@media (max-width: 980px) {
  .menu-armature { inset: calc(-1 * var(--bleed)) calc(-1 * var(--bleed)) auto; height: 300px; }
  .ma-hatch,
  .ma-branch { display: none; }
  .ma-spine { stroke-width: 1.3; opacity: 0.8; }
}

@media (max-width: 680px) { .menu-armature { --bleed: 20px; height: 220px; } }

/* Reduced motion: not "motion removed", the same drawing, delivered
   complete, and deliberately denser to carry what the drawing event carried.
   !important is load-bearing: the global reduce block forces
   transition-duration:1ms on *, which would snap every state change here. */
@media (prefers-reduced-motion: reduce) {
  .ma-spine,
  .ma-branch,
  .ma-wake { stroke-dashoffset: 0 !important; transition: none !important; }

  .ma-hatch use { stroke: rgba(101, 31, 42, 0.2); stroke-width: 0.85; }
  .ma-spine { stroke-width: 1.7; opacity: 1; }
  .ma-branch { stroke: rgba(101, 31, 42, 0.42); }

  .menu-links a,
  .site-nav.is-open .menu-links a,
  .site-nav:not(.is-open) .menu-links a {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }

  .menu-nib,
  .site-nav.is-open .menu-links[data-nib-ready] .menu-nib { transition: none !important; will-change: auto; }

  .menu-links a:hover,
  .menu-links a:focus-visible { box-shadow: inset 2px 0 0 0 var(--oxblood); transform: none !important; }

  .menu-email::after,
  .site-nav.is-open .menu-email::after,
  .site-nav:not(.is-open) .menu-email::after { transform: scaleX(1) !important; transition: none !important; }
}


/* ================= MENU: ESCAPE HATCHES, SIGNATURE, SOCIAL =================
   The panel used to be inescapable by mouse: its scrim spans inset
   -86px -60px 0, which reaches up over the header, and the nav outranked
   the header on z-index. The button looked live and was not, elementFromPoint
   at its centre returned .site-nav. Three ways out now: the header button
   (header raised above the nav), an explicit Close control, and the scrim. */

/* .site-nav is a CHILD of .site-header, so raising the header does nothing:
   the nav and the controls are siblings in one stacking context. The nav
   sits at z-60, so its scrim painted over the menu button - the button
   looked live and elementFromPoint returned .site-nav. The controls must
   outrank the nav, not the header. */
.site-header { z-index: 80; }
.site-header .signature-mark,
.site-header .menu-button,
.site-header .header-cta { position: relative; z-index: 75; }

.menu-close {
  position: absolute;
  top: clamp(14px, 2vw, 22px);
  right: clamp(14px, 2vw, 22px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  background: none;
  border: 1px solid var(--faint);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.menu-close:hover,
.menu-close:focus-visible { color: var(--oxblood); border-color: rgba(101, 31, 42, 0.45); }

.menu-close-mark {
  position: relative;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}
.menu-close-mark::before,
.menu-close-mark::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  content: "";
  background: currentColor;
  border-radius: 2px;
}
.menu-close-mark::before { transform: rotate(45deg); }
.menu-close-mark::after { transform: rotate(-45deg); }

/* the mark is the whole affordance below 680px */
@media (max-width: 680px) {
  .menu-close { gap: 0; padding: 10px; }
  .menu-close-word { display: none; }
}

/* signature sits above the index heading, the hand, then the system */
.menu-signature {
  display: block;
  width: 168px;
  margin-bottom: 20px;
  color: var(--ink);
  opacity: 0.9;
}
.menu-signature .sig-svg { width: 100%; }

.menu-social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--faint);
}
.menu-social a {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.menu-social a:hover,
.menu-social a:focus-visible { color: var(--oxblood); border-bottom-color: rgba(101, 31, 42, 0.5); }

/* ================= CAREER HEADLINE: two voices, one line each =================
   The turn was setting at the same size as the setup and breaking to
   "IT / CONNECTED / IT." Smaller and in oxblood, it lands as the answer. */
.career-head h2 .line { display: block; text-wrap: balance; }

.career-head h2 .line-lead { color: var(--ink); }

.career-head h2 .line-turn {
  color: var(--oxblood);
  font-size: 0.62em;
  letter-spacing: 0.005em;
  margin-top: 0.18em;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .career-head h2 .line-turn { font-size: 0.7em; white-space: normal; }
}

/* ================= ON THE GROUND =================
   Was "Global Perspective": two aviation shots and a mood caption. The hero
   already claims Miami / New York / London / Dubai / Riyadh / Singapore /
   Shanghai; this band is the receipt for that claim. Captions carry PLACE and
   CONTEXT, never sentiment - "Riyadh, Invest Saudi" is checkable, "a wider
   world" is a mood board. */
.ground { background: var(--paper-soft); }

.ground-head { max-width: 62ch; margin-bottom: 34px; }
.ground-head p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
}

.ground-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ground-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 3 / 4;
}

.ground-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ground-shot:hover img { transform: scale(1.03); }

.ground-shot::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(20, 16, 14, 0) 42%, rgba(20, 16, 14, 0.82));
  pointer-events: none;
}

.ground-shot figcaption {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ground-place {
  font-family: var(--display);
  font-size: 1.16rem;
  line-height: 1.1;
  color: var(--paper);
}

.ground-note {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 243, 238, 0.74);
}

@media (max-width: 980px) {
  .ground-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .ground-grid { grid-template-columns: minmax(0, 1fr); }
  .ground-shot { aspect-ratio: 4 / 3; }
}

/* ================= LOGO MARKS =================
   The image is ALWAYS decorative (alt=""), the text span is ALWAYS the sole
   accessible name. So the screen-reader experience is identical whether a
   file exists or not, and nothing announces "logo" twice. Text is the
   default and the image is an UPGRADE applied on load - never a fallback on
   error, so a missing file shows the wordmark rather than a broken icon. */

.lm {
  position: relative;
  display: grid;
  place-items: center;
}

.lm-mark {
  display: none;
  width: auto;
  max-width: min(100%, 190px);
  max-height: 34px;
  object-fit: contain;
  opacity: 0.86;
  transition: opacity 0.35s ease;
}

.lm:hover .lm-mark { opacity: 1; }

/* only once JS confirms the file decoded */
.lm[data-mark-ready] .lm-mark { display: block; }
.lm[data-mark-ready] .lm-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* screen-reader-only expansion of an abbreviated wordmark */
.lm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* optical sizing: a compact roundel needs more height than a wide wordmark
   to read at the same visual weight */
.lm-49ers .lm-mark,
.lm-hawks .lm-mark { max-height: 44px; }
.lm-rolls .lm-mark { max-height: 40px; }
.lm-alsd .lm-mark,
.lm-triton .lm-mark { max-height: 36px; }
.lm-braves .lm-mark { max-height: 38px; }

.press-row .lm-mark { max-height: 26px; max-width: min(100%, 150px); }
.press-row .lm-forbes .lm-mark { max-height: 30px; }
.press-row .lm-boat .lm-mark { max-height: 28px; }
/* stacked icon-over-text lockups need more height to read at the same
   optical weight as a single-line wordmark */
.press-row .lm-coin .lm-mark { max-height: 42px; }
.lm-triton .lm-mark { max-height: 42px; }

@media (max-width: 880px) {
  .lm-mark { max-height: 26px; }
  .lm-49ers .lm-mark,
  .lm-hawks .lm-mark { max-height: 34px; }
  .press-row .lm-mark { max-height: 20px; }
}

/* The decorative arch layers render wider than the viewport (measured 1463px
   at 1440) and their hosts were overflow:visible, producing 23px of real
   horizontal scroll. `clip` rather than `hidden`: it suppresses the overflow
   without creating a scroll container, so sticky/fixed children are unaffected. */
.section-slab,
.relationship-band,
.proof-band,
.hero {
  overflow-x: clip;
}

/* The menu armature bleeds --bleed past the panel on every side by design.
   Clip at the nav, not the panel, so the bleed still reaches the panel's
   border box while contributing no document scroll width. */
.site-nav { overflow: clip; }
.lm-damen .lm-mark { max-height: 30px; }