/* ============================================================
   EAIC.UK v2 — component layer
   Loads AFTER site.css. Adds the components the v2 structure needs
   (engagements, services, values, six questions, seats, tiers, evidence
   states, long-form article) using the existing tokens only. Nothing here
   re-tunes site.css; it only adds.
   ============================================================ */

/* ── Section furniture ─────────────────────────────────────── */
.sec-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head .eyebrow { margin-bottom: 1rem; }
.sec-head h2 { margin-bottom: 1rem; }
.sec-head p { color: var(--ink-mid); font-size: 1.02rem; line-height: 1.75; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head--wide { max-width: 860px; }

.band { background: var(--off-white); border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone); }
.band--oxford { background: var(--oxford); color: rgba(255,255,255,.78); border: 0; }
.band--oxford h2, .band--oxford h3, .band--oxford h4 { color: var(--white); }
.band--oxford .eyebrow { color: var(--gold-lt); }
.band--oxford .sec-head p, .band--oxford p { color: rgba(255,255,255,.72); }
.band--oxford .link-ink { color: var(--white); }
.band--gold-pale { background: var(--gold-pale); border-top: 1px solid rgba(138,98,16,.12); border-bottom: 1px solid rgba(138,98,16,.12); }

.measure { max-width: 68ch; }
.measure p { color: var(--ink-mid); line-height: 1.8; margin-bottom: 1.25rem; }
.measure p:last-child { margin-bottom: 0; }

/* Statement — a single sentence given room, used for mission/vision moments */
.statement {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.25;
  color: var(--oxford);
  max-width: 24ch;
  margin: 0;
  font-weight: 500;
}
.statement em { color: var(--gold-text); font-style: italic; }
.band--oxford .statement { color: var(--white); }
.band--oxford .statement em { color: var(--gold-lt); }

/* ── Generic responsive card grid ──────────────────────────── */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--tight { gap: 1rem; }
@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .grid--3, .grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 600px)  { .grid--4 { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2rem;
  background: var(--white);
  display: flex; flex-direction: column;
  transition: border-color .2s, box-shadow .2s;
}
.card:hover { border-color: var(--border-mid); box-shadow: 0 4px 24px rgba(13,33,64,.07); }
.card .eyebrow { margin-bottom: .75rem; }
.card h3 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; color: var(--oxford); margin-bottom: .6rem; line-height: 1.2; }
.card p { font-size: .92rem; color: var(--ink-mid); line-height: 1.7; }
.card p + p { margin-top: .75rem; }
.card > p:last-of-type { flex-grow: 1; }
.card__foot { margin-top: 1.5rem; font-size: .875rem; }
.card--accent { border-top: 3px solid var(--gold); }
.card--oxford-top { border-top: 3px solid var(--oxford); }
.card--flat { background: transparent; border-color: var(--border); }
.card--quiet { background: var(--off-white); border-color: var(--stone); }
.band--oxford .card {
  background: rgba(255,255,255,.045);
  border-color: rgba(199,164,99,.22);
}
.band--oxford .card h3 { color: var(--white); }
.band--oxford .card p { color: rgba(255,255,255,.66); }
.band--oxford .card:hover { border-color: rgba(199,164,99,.45); box-shadow: none; }

/* Card link that fills the card */
a.card { color: inherit; text-decoration: none; }
a.card:hover h3 { color: var(--gold-text); }
.band--oxford a.card:hover h3 { color: var(--gold-lt); }

/* Arrow link */
.more {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .875rem; font-weight: 500; color: var(--oxford);
  text-decoration: none; margin-top: auto;
}
.more::after { content: '→'; transition: transform .15s; }
.more:hover::after { transform: translateX(3px); }
.band--oxford .more { color: var(--gold-lt); }

/* ── Key/value meta rows (engagement + service cards) ─────── */
.kv { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--border); }
.kv li {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--border);
  font-size: .85rem; line-height: 1.5; color: var(--ink-mid);
}
.kv li b { font-weight: 500; color: var(--oxford); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding-top: .1rem; }
.band--oxford .kv, .band--oxford .kv li { border-color: rgba(255,255,255,.12); }
.band--oxford .kv li { color: rgba(255,255,255,.7); }
.band--oxford .kv li b { color: var(--gold-lt); }
@media (max-width: 480px) { .kv li { grid-template-columns: 1fr; gap: .2rem; } }

/* "You hold:" line */
.hold {
  margin-top: 1.25rem; padding: .9rem 1rem;
  background: var(--off-white); border: 1px solid var(--stone); border-radius: 6px;
  font-size: .875rem; line-height: 1.6; color: var(--ink-mid);
}
.hold b { color: var(--oxford); font-weight: 500; }
.band--oxford .hold { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.72); }
.band--oxford .hold b { color: var(--white); }

/* ── Engagement cards (seven) ──────────────────────────────── */
.eng { counter-reset: eng; display: grid; gap: 1.5rem; }
.eng-card {
  counter-increment: eng;
  border: 1px solid var(--border); border-radius: 10px; background: var(--white);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid; grid-template-columns: 5rem 1fr; gap: 1.5rem 2rem;
}
.eng-card__no {
  font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--gold-text); font-weight: 500;
}
.eng-card__no::before { content: counter(eng, decimal-leading-zero); }
.eng-card__body { min-width: 0; }
.eng-card h3 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; color: var(--oxford); margin-bottom: .35rem; }
.eng-card__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1.1rem; }
.tag {
  display: inline-block; font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 3px; background: rgba(13,33,64,.07); color: var(--oxford);
}
.tag--gold { background: var(--gold-pale); color: #7a5010; }
.tag--soft { background: var(--off-white); color: var(--ink-muted); border: 1px solid var(--stone); }
.eng-card p { color: var(--ink-mid); line-height: 1.75; font-size: .95rem; }
.eng-card__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; margin-top: 1.5rem; }
.eng-card h4 { font-family: var(--font-body); font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); margin-bottom: .6rem; }
.eng-card__cols ul { list-style: none; margin: 0; padding: 0; }
.eng-card__cols li { font-size: .875rem; color: var(--ink-mid); line-height: 1.55; padding: .4rem 0 .4rem 1.2rem; position: relative; border-bottom: 1px solid var(--border); }
.eng-card__cols li:first-child { border-top: 1px solid var(--border); }
.eng-card__cols .u-yes li::before { content: '→'; position: absolute; left: 0; color: var(--ink-faint); font-weight: 600; }
.eng-card__cols .u-no li::before  { content: '×'; position: absolute; left: 0; color: var(--ink-faint); font-weight: 600; }
@media (max-width: 860px) {
  .eng-card { grid-template-columns: 1fr; gap: .5rem; }
  .eng-card__no { font-size: 1.8rem; }
  .eng-card__cols { grid-template-columns: 1fr; }
}

/* ── Service cards (twelve) ────────────────────────────────── */
.svc-group { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.svc-group + .svc-group { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--border); }
.svc-group__head { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem 3rem; margin-bottom: 2rem; align-items: start; }
.svc-group__head h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.svc-group__head .eyebrow { margin-bottom: .6rem; }
.svc-group__head p { color: var(--ink-mid); line-height: 1.75; }
@media (max-width: 860px) { .svc-group__head { grid-template-columns: 1fr; } }
.svc { border: 1px solid var(--border); border-radius: 10px; padding: 1.75rem; display: flex; flex-direction: column; background: var(--white); }
.svc:hover { border-color: var(--border-mid); }
.svc h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; color: var(--oxford); margin-bottom: .6rem; }
.svc > p { font-size: .9rem; color: var(--ink-mid); line-height: 1.7; flex-grow: 1; }
.svc .kv { margin-top: 1rem; }
.svc .kv li { grid-template-columns: 6.5rem 1fr; padding: .45rem 0; font-size: .82rem; }
.svc .hold { font-size: .84rem; }
.svc .more { margin-top: 1.1rem; }

/* ── Values (six demands) ──────────────────────────────────── */
.values { list-style: none; margin: 0; padding: 0; counter-reset: val; }
.values li {
  counter-increment: val;
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem 2rem;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--border);
}
.values li:last-child { border-bottom: 1px solid var(--border); }
.values li::before {
  content: counter(val); font-family: var(--font-display); font-size: 2.8rem; line-height: .9;
  color: var(--gold-text); font-weight: 500;
}
.values h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 500; color: var(--oxford); margin-bottom: .75rem; line-height: 1.2; }
.values p { color: var(--ink-mid); line-height: 1.8; max-width: 68ch; }
.values .hook { margin-top: 1rem; font-size: .875rem; color: var(--ink-mid); border-left: 2px solid var(--gold); padding-left: 1rem; line-height: 1.65; max-width: 68ch; }
.values .hook b { color: var(--gold-text); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; display: block; margin-bottom: .25rem; }
@media (max-width: 640px) { .values li { grid-template-columns: 1fr; gap: .5rem; } .values li::before { font-size: 1.8rem; } }

/* ── Six questions (Citadel) ───────────────────────────────── */
.q6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: q; }
.q6 > div { counter-increment: q; border: 1px solid var(--border); border-radius: 10px; padding: 1.75rem; background: var(--white); display: flex; flex-direction: column; }
.q6 .q6__no { font-family: var(--font-display); font-size: .95rem; letter-spacing: .12em; color: var(--gold-text); margin-bottom: .75rem; }
.q6 .q6__no::before { content: counter(q, decimal-leading-zero) ' — '; }
.q6 h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; color: var(--oxford); margin-bottom: .5rem; }
.q6 .q6__ask { font-family: var(--font-display); font-style: italic; color: var(--ink-mid); font-size: 1.05rem; margin-bottom: .9rem; line-height: 1.45; }
.q6 p { font-size: .88rem; color: var(--ink-mid); line-height: 1.7; }
@media (max-width: 1024px) { .q6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .q6 { grid-template-columns: 1fr; } }

/* ── Evidence-state chips ──────────────────────────────────── */
.ev { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .65rem; border-radius: 3px; border: 1px solid var(--border-mid); color: var(--oxford); white-space: nowrap; }
.ev::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--oxford); }
.ev--verified::before { background: #1d6647; }
.ev--built::before { background: var(--oxford); }
.ev--designed::before { background: var(--gold); }
.ev--intended::before { background: transparent; border: 1.5px solid var(--ink-faint); box-sizing: border-box; }
.ev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.ev-grid > div { border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; }
.ev-grid h3 { font-family: var(--font-display); font-size: 1.35rem; color: var(--oxford); margin: .9rem 0 .35rem; font-weight: 500; }
.ev-grid .ev-grid__def { font-size: .8rem; font-weight: 500; color: var(--gold-text); margin-bottom: .6rem; }
.ev-grid p { font-size: .875rem; color: var(--ink-mid); line-height: 1.65; }
@media (max-width: 1024px) { .ev-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .ev-grid { grid-template-columns: 1fr; } }

/* ── Flow (the operating model, left to right) ─────────────── */
.flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; align-items: stretch; }
.flow > div {
  position: relative; border: 1px solid rgba(199,164,99,.28); border-radius: 8px;
  padding: 1.25rem 1rem; background: rgba(255,255,255,.045); min-height: 9rem;
}
.flow > div + div::before {
  content: '→'; position: absolute; left: -.85rem; top: 50%; transform: translateY(-50%);
  color: var(--gold-lt); font-size: 1rem; z-index: 1; background: var(--oxford); padding: 0 .1rem;
}
.flow__step { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: .5rem; font-weight: 500; }
.flow h3 { font-family: var(--font-display); font-size: 1.15rem; color: var(--white); margin-bottom: .4rem; font-weight: 500; line-height: 1.2; }
.flow p { font-size: .8rem; color: rgba(255,255,255,.62); line-height: 1.55; margin: 0; }
.flow > .flow--human { border-color: var(--gold); background: rgba(199,164,99,.12); }
@media (max-width: 1024px) { .flow { grid-template-columns: repeat(3, 1fr); } .flow > div:nth-child(4)::before { display: none; } }
@media (max-width: 640px)  { .flow { grid-template-columns: 1fr; } .flow > div + div::before { content: '↓'; left: 50%; top: -.95rem; transform: translateX(-50%); } }

/* ── Seats (disciplines) ───────────────────────────────────── */
.seats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.seat { border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem 1.35rem; background: var(--white); }
.seat h3 { font-family: var(--font-body); font-size: .95rem; font-weight: 500; color: var(--oxford); margin-bottom: .4rem; }
.seat p { font-size: .84rem; color: var(--ink-mid); line-height: 1.6; }
.seat--lead { grid-column: 1 / -1; border-color: var(--oxford); border-width: 1.5px; display: grid; grid-template-columns: 1fr 2fr; gap: 1rem 2rem; align-items: center; }
.seat--lead h3 { font-family: var(--font-display); font-size: 1.4rem; }
@media (max-width: 860px) { .seats { grid-template-columns: 1fr 1fr; } .seat--lead { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .seats { grid-template-columns: 1fr; } }

/* ── Tiers (four) ──────────────────────────────────────────── */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.tier { padding: 2rem 1.75rem; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.tier:last-child { border-right: 0; }
.tier--lead { background: var(--off-white); }
.tier .eyebrow { margin-bottom: .75rem; }
.tier h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--oxford); margin-bottom: .6rem; line-height: 1.2; }
.tier p { font-size: .875rem; color: var(--ink-mid); line-height: 1.65; }
.tier .tier__job { margin-top: auto; padding-top: 1rem; font-size: .8rem; color: var(--ink-mid); border-top: 1px solid var(--border); margin-top: 1.25rem; }
.tier .tier__job b { display: block; color: var(--gold-text); font-weight: 500; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .25rem; }
@media (max-width: 1024px) { .tiers { grid-template-columns: 1fr 1fr; } .tier:nth-child(2) { border-right: 0; } .tier:nth-child(-n+2) { border-bottom: 1px solid var(--border); } }
@media (max-width: 600px)  { .tiers { grid-template-columns: 1fr; } .tier { border-right: 0; border-bottom: 1px solid var(--border); } .tier:last-child { border-bottom: 0; } }

/* ── Numbered vertical steps (phases, what happens next) ───── */
.steps-v { list-style: none; margin: 0; padding: 0; counter-reset: sv; }
.steps-v li { counter-increment: sv; display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.25rem; padding: 1.5rem 0; border-top: 1px solid var(--border); }
.steps-v li:last-child { border-bottom: 1px solid var(--border); }
.steps-v li::before {
  content: counter(sv); width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--oxford); color: var(--gold-lt); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 500;
}
.steps-v h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--oxford); margin-bottom: .4rem; }
.steps-v .steps-v__meta { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); font-weight: 500; margin-bottom: .4rem; }
.steps-v p { font-size: .92rem; color: var(--ink-mid); line-height: 1.7; }
.steps-v .check-list { margin-top: .75rem; }

/* ── Check list & plain lists ──────────────────────────────── */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { font-size: .9rem; color: var(--ink-mid); padding: .5rem 0 .5rem 1.5rem; position: relative; border-bottom: 1px solid var(--border); line-height: 1.55; }
.check-list li:first-child { border-top: 1px solid var(--border); }
.check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-size: .8rem; }
.check-list--plain li { border: 0; padding: .3rem 0 .3rem 1.5rem; }
.check-list--plain li:first-child { border: 0; }
.x-list { list-style: none; margin: 0; padding: 0; }
.x-list li { font-size: .9rem; color: var(--ink-mid); padding: .5rem 0 .5rem 1.5rem; position: relative; border-bottom: 1px solid var(--border); line-height: 1.55; }
.x-list li:first-child { border-top: 1px solid var(--border); }
.x-list li::before { content: '×'; position: absolute; left: 0; color: var(--ink-faint); font-weight: 600; }
.band--oxford .check-list li, .band--oxford .x-list li { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.12); }

/* ── Numbered deliverables (01–09) ─────────────────────────── */
.numbered { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: nd; }
.numbered > div { counter-increment: nd; border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; background: var(--white); }
.numbered > div::before { content: counter(nd, decimal-leading-zero); display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--gold-text); line-height: 1; margin-bottom: .75rem; font-weight: 500; }
.numbered h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--oxford); margin-bottom: .45rem; }
.numbered p { font-size: .875rem; color: var(--ink-mid); line-height: 1.65; }
@media (max-width: 1024px) { .numbered { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .numbered { grid-template-columns: 1fr; } }

/* ── Table ─────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
.tbl th { text-align: left; padding: .75rem 1rem; font-family: var(--font-display); font-weight: 500; color: var(--oxford); font-size: 1rem; border-bottom: 2px solid var(--oxford); }
.tbl td { padding: 1rem; vertical-align: top; color: var(--ink-mid); border-bottom: 1px solid var(--border); line-height: 1.55; }
.tbl td strong { color: var(--oxford); font-weight: 500; }
.tbl tr:nth-child(even) td { background: var(--white); }
.tbl .price { font-family: var(--font-display); font-size: 1.1rem; color: var(--gold-text); font-weight: 500; white-space: nowrap; }
.tbl-note { font-size: .8rem; color: var(--ink-muted); margin-top: 1rem; line-height: 1.6; }

/* ── Split (text + aside) ──────────────────────────────────── */
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }
.split--rev > :first-child { order: 2; }
.aside { border-left: 2px solid var(--gold); padding-left: 1.5rem; }
.aside h3 { font-family: var(--font-display); font-size: 1.25rem; color: var(--oxford); font-weight: 500; margin-bottom: .5rem; }
.aside p { font-size: .9rem; color: var(--ink-mid); line-height: 1.7; }
.aside p + p { margin-top: .75rem; }
.aside--box { border: 1px solid var(--border); border-left: 2px solid var(--gold); border-radius: 0 10px 10px 0; padding: 1.5rem 1.75rem; background: var(--off-white); }
@media (max-width: 860px) { .split, .split--even { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } }

/* ── Pull quote (light ground) ─────────────────────────────── */
.pull { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: clamp(1.5rem, 3vw, 2.5rem) 0; margin: 0; }
.pull blockquote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.45; color: var(--oxford); margin: 0; max-width: 34ch; }
.pull figcaption { margin-top: 1rem; font-size: .82rem; color: var(--ink-muted); letter-spacing: .04em; }

/* ── Definition strip (small facts in a row) ───────────────── */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.facts > div b { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--oxford); font-weight: 500; line-height: 1.1; margin-bottom: .3rem; }
.facts > div span { font-size: .82rem; color: var(--ink-muted); line-height: 1.5; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr 1fr; } }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; font-family: var(--font-display); font-size: 1.15rem; color: var(--oxford); font-weight: 500; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); color: var(--gold-text); font-size: 1.4rem; font-family: var(--font-body); }
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding: 0 0 1.25rem; font-size: .92rem; color: var(--ink-mid); line-height: 1.75; max-width: 70ch; }
.faq details > div p + p { margin-top: .75rem; }

/* ── People ────────────────────────────────────────────────── */
.person { display: grid; grid-template-columns: 5rem 1fr; gap: 1.5rem; padding: 2rem 0; border-top: 1px solid var(--border); }
.person:last-child { border-bottom: 1px solid var(--border); }
.person__mono { width: 5rem; height: 5rem; border-radius: 50%; background: var(--oxford); color: var(--gold-lt); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: .04em; }
.person h3 { font-family: var(--font-display); font-size: 1.6rem; color: var(--oxford); font-weight: 500; margin-bottom: .15rem; }
.person__role { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); font-weight: 500; margin-bottom: 1rem; }
.person blockquote { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--ink-mid); line-height: 1.5; margin: 0 0 1rem; max-width: 60ch; }
.person p { font-size: .92rem; color: var(--ink-mid); line-height: 1.75; max-width: 68ch; }
.person p + p { margin-top: .75rem; }
.person .kv { max-width: 40rem; }
@media (max-width: 560px) { .person { grid-template-columns: 1fr; } }

/* ── Long-form article ─────────────────────────────────────── */
.article { max-width: 760px; }
.article > p, .article li { color: var(--ink-mid); line-height: 1.85; font-size: 1.02rem; }
.article > p { margin-bottom: 1.35rem; }
.article h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 2.75rem 0 1rem; }
.article h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--oxford); margin: 2rem 0 .75rem; }
.article ul, .article ol { margin: 0 0 1.5rem 1.25rem; }
.article li { margin-bottom: .5rem; }
.article blockquote { border-left: 2px solid var(--gold); padding-left: 1.25rem; margin: 1.75rem 0; font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--oxford); line-height: 1.5; }
.article table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .92rem; }
.article th, .article td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.article th { font-weight: 500; color: var(--oxford); border-bottom: 2px solid var(--oxford); }
.article a { color: var(--oxford); text-decoration: underline; text-underline-offset: 2px; }
.article .callout { background: var(--off-white); border: 1px solid var(--stone); border-radius: 8px; padding: 1.25rem 1.5rem; margin: 1.75rem 0; font-size: .95rem; }
.article .callout p { margin: 0; line-height: 1.7; }
.article .callout p + p { margin-top: .75rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .8rem; color: var(--ink-muted); letter-spacing: .03em; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.article-meta b { color: var(--oxford); font-weight: 500; }
.article-layout { display: grid; grid-template-columns: minmax(0, 760px) 260px; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.article-side { position: sticky; top: 5.5rem; }
.article-side h4 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; margin-bottom: .75rem; }
.article-side ul { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.article-side li { margin-bottom: .5rem; }
.article-side a { font-size: .875rem; color: var(--ink-mid); text-decoration: none; }
.article-side a:hover { color: var(--oxford); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 960px) { .article-layout { grid-template-columns: 1fr; } .article-side { position: static; } }

/* ── Legal prose ───────────────────────────────────────────── */
.legal { max-width: 760px; }
.legal h2 { font-size: 1.4rem; margin: 2.25rem 0 .75rem; }
.legal p, .legal li { color: var(--ink-mid); line-height: 1.8; font-size: .95rem; }
.legal p { margin-bottom: 1rem; }
.legal ul, .legal ol { margin: 0 0 1.25rem 1.25rem; }
.legal .legal__updated { font-size: .8rem; color: var(--ink-muted); margin-bottom: 2rem; }

/* ── Product pair (Sentinel ↔ Citadel bridge) ──────────────── */
.pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; }
.pair__arrow { font-family: var(--font-display); font-size: 2rem; color: var(--gold-text); text-align: center; }
@media (max-width: 860px) { .pair { grid-template-columns: 1fr; } .pair__arrow { transform: rotate(90deg); } }

/* ── Route chooser (three ways in) ─────────────────────────── */
.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.route { border: 1px solid var(--border); border-radius: 10px; padding: 1.75rem; display: flex; flex-direction: column; background: var(--white); }
.route .eyebrow { margin-bottom: .6rem; }
.route h3 { font-family: var(--font-display); font-size: 1.35rem; color: var(--oxford); font-weight: 500; margin-bottom: .5rem; }
.route p { font-size: .88rem; color: var(--ink-mid); line-height: 1.65; flex-grow: 1; margin-bottom: 1.25rem; }
@media (max-width: 860px) { .routes { grid-template-columns: 1fr; } }

/* ── Stack strip (what the workforce runs on) ─────────────── */
.stack { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.stack > div { background: var(--white); padding: 1.25rem 1.35rem; }
.stack b { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); font-weight: 500; margin-bottom: .4rem; }
.stack span { font-size: .875rem; color: var(--ink-mid); line-height: 1.55; display: block; }
@media (max-width: 1024px) { .stack { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .stack { grid-template-columns: 1fr; } }

/* ── Contact form ──────────────────────────────────────────── */
.form { display: grid; gap: 1.1rem; max-width: 560px; }
.form label { display: block; font-size: .8rem; font-weight: 500; letter-spacing: .04em; color: var(--oxford); margin-bottom: .4rem; }
.form input, .form select, .form textarea {
  width: 100%; font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  padding: .8rem .95rem; border: 1.5px solid var(--border-mid); border-radius: 6px; background: var(--white);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--oxford); box-shadow: 0 0 0 3px rgba(13,33,64,.1); }
.form textarea { min-height: 9rem; resize: vertical; }
.form .form__hint { font-size: .78rem; color: var(--ink-muted); margin-top: .35rem; }
.form .form__err { display: none; font-size: .78rem; color: #96322f; margin-top: .35rem; }
.form .is-invalid .form__err { display: block; }
.form .is-invalid input, .form .is-invalid textarea { border-color: #96322f; }
.form__ok { display: none; border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 1.5rem 1.75rem; background: var(--off-white); }
.form__ok h3 { font-family: var(--font-display); color: var(--oxford); font-size: 1.3rem; margin-bottom: .4rem; }
.form__ok p { color: var(--ink-mid); font-size: .92rem; }

/* ── Small helpers ─────────────────────────────────────────── */
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.center { text-align: center; }
.small { font-size: .85rem; color: var(--ink-muted); line-height: 1.6; }
.divider { height: 1px; background: var(--border); margin: clamp(2rem, 4vw, 3rem) 0; }
.band--oxford .divider { background: rgba(255,255,255,.12); }
.inline-links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; font-size: .9rem; }
.inline-links a { color: var(--oxford); text-decoration: underline; text-underline-offset: 3px; }
.band--oxford .inline-links a { color: var(--white); }
.wrap-ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.75rem; }

/* Hero: allow a wider stat label on dense pages */
.hero__stat-label { max-width: 22ch; margin: 0 auto; }

/* ── Additions after the first page-writing pass ───────────── */
.notice { border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 1.1rem 1.4rem; background: var(--off-white); font-size: .9rem; color: var(--ink-mid); line-height: 1.7; margin: 1.25rem 0; }
.notice b { color: var(--oxford); font-weight: 500; }
.note { font-size: .8rem; color: var(--ink-muted); line-height: 1.6; margin-top: 1rem; }
.legal h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--oxford); margin: 1.5rem 0 .5rem; }
/* Links inside hero copy sit on a dark photograph — keep them legible. */
.hero .lead .link-ink, .page-hero .lead .link-ink { color: var(--gold-lt); text-decoration-color: rgba(224,170,66,.6); display: inline; padding: 0; min-height: 0; }
/* Standalone callout (the .article-scoped one only works inside long-form pages). */
.callout { background: var(--off-white); border: 1px solid var(--stone); border-radius: 8px; padding: 1.25rem 1.5rem; margin: 1.75rem 0; font-size: .95rem; }
.callout p { margin: 0; line-height: 1.7; color: var(--ink-mid); }
.callout p + p { margin-top: .75rem; }

/* EAIC v3 — additive layer over site.css  ·  v3.1 */

/* Standalone callout (the .article-scoped one only works inside long-form pages). */
.standalone-callout, .callout { background: var(--off-white); border: 1px solid var(--stone); border-radius: 8px; padding: 1.25rem 1.5rem; margin: 1.75rem 0; font-size: .95rem; }
.callout p { margin: 0; line-height: 1.7; color: var(--ink-mid); }
.callout p + p { margin-top: .75rem; }
.callout--dark { background: var(--oxford); border-color: var(--oxford); color: rgba(255,255,255,.92); }
.callout--dark p { color: rgba(255,255,255,.92); }
.callout--dark b, .callout--dark strong { color: #fff; }

/* pill radio for scorecard / self-tests */
.pill { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--border-mid); border-radius: 999px; padding: .45rem 1rem; font-size: .85rem; color: var(--ink-mid); cursor: pointer; background: #fff; }
.pill:hover { border-color: var(--gold); }
.pill input { accent-color: var(--oxford); margin: 0; }
.pill:has(input:checked) { background: var(--oxford); border-color: var(--oxford); color: #fff; }
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .35rem 0 .9rem; }
.q-card { border: 1px solid var(--border); border-radius: 8px; padding: 1.1rem 1.25rem; margin: 1rem 0; background: #fff; }
.q-card h3 { font-family: var(--font-body); font-size: .95rem; font-weight: 500; color: var(--oxford); margin-bottom: .25rem; }

.notice { border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 1.1rem 1.4rem; background: var(--off-white); font-size: .9rem; color: var(--ink-mid); line-height: 1.7; margin: 1.25rem 0; }
.notice b { color: var(--oxford); font-weight: 500; }
.note { font-size: .8rem; color: var(--ink-muted); line-height: 1.6; margin-top: 1rem; }
/* ══════════════════════════════════════════════════════════
   MEGA PANEL — three-column dropdown (What We Do)           v3.4
   Extends .nav__dropdown from site.css; the panel chrome,
   hover bridge and backdrop-filter rules are inherited.
   ══════════════════════════════════════════════════════════ */
.nav__item--mega { position: static; }

/* A three-column panel is too wide to hang off its trigger, so it spans the
   bar instead: anchored to the nav row, clamped to the viewport. */
/* site.css renders dropdown panels translucent (rgba white + backdrop blur).
   Over the photographic hero that fails: the h1's display type reads straight
   through the lower leaf descriptions — visible on Who We Are, where "Thirty
   minutes with a founder" sits over the headline. Blur does not rescue 12px
   grey text on an unpredictable backdrop, so every panel is opaque here. */
.nav__dropdown {
  background: var(--white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--border);
  box-shadow: 0 12px 40px rgba(13,33,64,.18), 0 2px 8px rgba(13,33,64,.09);
}

.nav__mega {
  box-shadow: 0 16px 48px rgba(13,33,64,.20), 0 2px 8px rgba(13,33,64,.10);
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, calc(100vw - 2.5rem));
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1.15fr 0.85fr;
  gap: 0 1.5rem;
  padding: 1.5rem 1.5rem 1.25rem;
  align-items: start;
}
.nav__mega__col { min-width: 0; }
.nav__mega__col + .nav__mega__col {
  border-left: 1px solid var(--border);
  padding-left: 1.5rem;
}

/* Column head doubles as the link to that section's own page. */
.nav__mega__head {
  display: block;
  padding: 0 0.65rem 0.7rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.nav__mega__head-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--oxford);
  line-height: 1.25;
}
.nav__mega__head-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.nav__mega__head:hover { background: rgba(199,164,99,.07); border-radius: 6px 6px 0 0; }
.nav__mega__head:hover .nav__mega__head-title { color: var(--gold); }

/* Leaf rows sit tighter than a single-column dropdown's — three columns of
   loose rows would run the panel past the fold on a laptop. */
.nav__mega .nav__dropdown-link { padding: 0.45rem 0.65rem; }
.nav__mega .nav__dropdown-desc { margin-top: 0.05rem; }

@media (max-width: 1060px) {
  .nav__mega { grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
  .nav__mega__col:nth-child(3) {
    grid-column: 1 / -1;
    border-left: 0;
    padding-left: 0;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
  }
}

/* ── Mobile drawer: three levels ─────────────────────────── */
.drawer-label a { padding: 0 !important; font: inherit; color: inherit; }
.nav__drawer a.drawer-sub {
  font-weight: 500;
  color: var(--oxford);
  padding-top: 0.7rem;
}
.nav__drawer a.drawer-leaf {
  padding-left: 1rem;
  font-size: 0.9rem;
  border-left: 1px solid var(--border);
  margin-left: 0.15rem;
}

/* ── Content-review fixes, 2 September 2026 ─────────────────────────
   Two components in site.css are defined only in their dark-context form.
   Both are additive corrections, not restyling: no change to type, spacing
   or layout — only a colour so existing text is legible where it is used. */

/* site.css gives .breadcrumb a white treatment for the dark hero only. The
   five /legal/ pages place it on the white page background, where white text
   at 62% opacity is invisible. Default it to muted ink; keep white in a hero. */
.breadcrumb { color: var(--ink-muted); }
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--oxford); }
.breadcrumb span { color: var(--border); }
.page-hero .breadcrumb, .hero .breadcrumb { color: rgba(255,255,255,.62); }
.page-hero .breadcrumb a, .hero .breadcrumb a { color: rgba(255,255,255,.62); }
.page-hero .breadcrumb a:hover, .hero .breadcrumb a:hover { color: rgba(255,255,255,.85); }
.page-hero .breadcrumb span, .hero .breadcrumb span { color: rgba(255,255,255,.35); }

/* .hold has a light default and a .band--oxford dark variant, but no hero
   variant. Mirror the existing dark treatment so a "You hold:" line can sit
   under the hero lead on the detail pages. */
.page-hero .hold { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.72); }
.page-hero .hold b { color: var(--white); }

/* ── ROGS dial ───────────────────────────────────────────────────────
   The one new graphic component. A semicircular gauge for the 0–100
   composite, drawn entirely from existing tokens. The value shown is
   illustrative and is labelled as such in the markup; the four
   dimensions are named without sub-scores, because those are not on
   the approved numbers list. No inline styles (checker rule). */
.rogs { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: clamp(1.5rem, 4vw, 3rem);
        align-items: center; border: 1px solid var(--border); border-radius: 10px;
        padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--white); }
.rogs__dial { width: 100%; height: auto; display: block; }
.rogs__track { fill: none; stroke: var(--border-mid); stroke-width: 13; stroke-linecap: round; }
.rogs__value { fill: none; stroke: var(--gold); stroke-width: 13; stroke-linecap: round; }
.rogs__num { font-family: var(--font-display); font-size: 44px; font-weight: 500; fill: var(--oxford); }
.rogs__den { font-family: var(--font-body); font-size: 14px; fill: var(--ink-muted); }
.rogs__cap { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; fill: var(--gold-text); font-weight: 500; }
.rogs__end { font-size: 11px; fill: var(--ink-faint); }
.rogs__body h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--oxford); margin-bottom: .5rem; }
.rogs__body > p { font-size: .9rem; color: var(--ink-mid); line-height: 1.7; margin-bottom: 1.1rem; }
.rogs__dims { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.25rem; }
.rogs__dims li { font-size: .85rem; color: var(--ink-mid); padding-left: .9rem; position: relative; }
.rogs__dims li::before { content: ''; position: absolute; left: 0; top: .5em; width: .35rem; height: .35rem;
                         border-radius: 50%; background: var(--gold); }
@media (max-width: 700px) { .rogs { grid-template-columns: 1fr; } .rogs__dims { grid-template-columns: 1fr; } }

/* ── Diagrams — five hand-made SVGs, 2 September 2026 ────────────────
   Inline SVG figures. Every class and id inside them is namespaced dNN-
   so nothing collides with site.css (.card, .small, .body, .q all exist
   there). Text inside a ~1500px-wide drawing stops being readable once
   the figure is narrower than about 800px, so the figures are desktop
   and tablet enhancements: below 900px they are hidden and the HTML
   beside them carries the content. Where a drawing replaces an existing
   component (.dia--swap), that component returns below 900px. */
.dia { margin: 2rem 0 0; }
.dia__svg { display: block; width: 100%; height: auto; }
.dia--card { background: var(--oxford); border-radius: 12px; padding: clamp(1rem, 2.5vw, 2rem); }
.dia figcaption { margin-top: .9rem; font-size: .85rem; color: var(--ink-muted); line-height: 1.6; max-width: 70ch; }
.band--oxford .dia figcaption, .dia--card figcaption { color: rgba(255,255,255,.72); }
.dia a rect { transition: stroke .15s, stroke-width .15s; }
.dia a:hover rect, .dia a:focus-visible rect { stroke: var(--gold); stroke-width: 2.5; }
.dia a:focus-visible { outline: none; }
.dia--swap + .flow { display: none; }
@media (max-width: 900px) {
  .dia { display: none; }
  .dia--swap + .flow { display: grid; }
}
/* 01-ai-estate-map.svg */ .dia .d01-sans{font-family:var(--font-body)} .dia .d01-serif{font-family:var(--font-display)} .dia .d01-eyebrow{font:500 18px var(--font-body);letter-spacing:4px} .dia .d01-label{font:500 18px var(--font-body);letter-spacing:1px} .dia .body{font:400 17px var(--font-body)} .dia .d01-small{font:400 14px var(--font-body)} .dia .d01-node{fill:#132B50;stroke:#6E83A2;stroke-width:1.5} .dia .d01-nodeShadow{fill:#0D2140;stroke:#D9A63B;stroke-width:1.5;stroke-dasharray:7 7} .dia .d01-line{stroke:#7890B1;stroke-width:1.5;fill:none;opacity:.48} .dia .d01-goldLine{stroke:#D9A63B;stroke-width:2;fill:none} .dia .d01-paper{fill:#F7F6F3;stroke:#D8D4CB;stroke-width:1.5}
/* 02-sentinel-five-phases.svg */ .dia .d02-serif{font-family:var(--font-display)} .dia .d02-sans{font-family:var(--font-body)} .dia .d02-eye{font:500 17px var(--font-body);letter-spacing:3px} .dia .d02-body{font:400 16px var(--font-body)} .dia .d02-small{font:400 14px var(--font-body)} .dia .d02-card{fill:#fff;stroke:#D8D4CB;stroke-width:1.3}
/* 03-governed-workforce.svg */ .dia .d03-serif{font-family:var(--font-display)} .dia .d03-sans{font-family:var(--font-body)} .dia .d03-eye{font:500 16px var(--font-body);letter-spacing:3px} .dia .d03-body{font:400 15px var(--font-body)} .dia .d03-small{font:400 13px var(--font-body)} .dia .d03-card{fill:#142D52;stroke:#506784;stroke-width:1.4}
/* 04-seven-engagement-shapes.svg */ .dia .d04-serif{font-family:var(--font-display)} .dia .d04-sans{font-family:var(--font-body)} .dia .d04-eye{font:500 15px var(--font-body);letter-spacing:3px} .dia .d04-body{font:400 14px var(--font-body)} .dia .d04-small{font:400 12px var(--font-body)} .dia .d04-box{fill:#fff;stroke:#D8D4CB;stroke-width:1.2} .dia .d04-gold{fill:#8A6210}
/* 05-six-board-questions.svg */ .dia .d05-serif{font-family:var(--font-display)} .dia .d05-sans{font-family:var(--font-body)} .dia .d05-eye{font:500 16px var(--font-body);letter-spacing:3px} .dia .d05-body{font:400 16px var(--font-body)} .dia .d05-small{font:400 13px var(--font-body)} .dia .d05-q{fill:#F7F6F3;stroke:#D8D4CB;stroke-width:1.3}

/* ── 06 The AI factory (4 September 2026) ────────────────────────────
   The sixth figure, on /what-we-do/factory-floor/ in the "Who builds
   it" oxford band. Drawn from the Founder's own estate diagram; the
   first figure authored directly as inline SVG at the cropped size the
   other five end up at, so there is no source slide in tools/diagrams/
   and it does not pass through refine.py — edit it in the fragment.

   Why it is not a second copy of d03: d03 on the delivery-model page
   draws the six-stage review *sequence*. This draws the *estate* — the
   board, both founders, their lab dev teams, the eight Hermes delivery
   streams and the platform under all of it. Two cuts of one workforce.

   Two deliberate departures from the source diagram, both so it sits on
   the site rather than beside it:
   1. The source colour-coded Declan steel and Austin gold. Gold is the
      estate's sparing accent, so here gold carries governance, the
      humans and the platform frame, and every agent seat is steel. The
      two founders are told apart by column and label, not by hue.
   2. The source's platform bar reads "Google Cloud Platform / Vertex AI",
      which the never-say-where-it-is-hosted ruling had banned. The
      Founder lifted that ruling on 4 September 2026, so the bar names the
      platform and carries the audit-trail line under it. The FORBIDDEN
      entry in check_v3.py was removed to match, with the override
      recorded there; "europe-west2" is still banned. */
/* Sizes are set from the rendered scale, not the viewBox: at the 1104px
   the figure occupies in a 1200px container the drawing is at 0.69, so a
   14px label lands at ~9.7px on screen. Nothing here goes below 14px. */
.dia .d06-serif { font-family: var(--font-display); }
.dia .d06-sans  { font-family: var(--font-body); }
.dia .d06-eye   { font: 500 17px var(--font-body); letter-spacing: 2.6px; }
.dia .d06-eye-s { font: 500 14px var(--font-body); letter-spacing: 1.8px; }
.dia .d06-name  { font: 500 27px var(--font-display); }
.dia .d06-sub   { font: 500 25px var(--font-display); }
.dia .d06-em    { font-style: italic; }
.dia .d06-lg    { font: 400 19px var(--font-body); }
.dia .d06-body  { font: 400 17px var(--font-body); }
.dia .d06-small { font: 400 16px var(--font-body); }

.dia .d06-panel  { fill: #112a4e; stroke: #3f597c; stroke-width: 1.4; }
.dia .d06-card   { fill: #142D52; stroke: #506784; stroke-width: 1.4; }
.dia .d06-chip   { fill: #0d2140; stroke: #45608a; stroke-width: 1.2; }
.dia .d06-floor  { fill: #0b1c36; stroke: #D9A63B; stroke-width: 1.6; }
.dia .d06-zebra  { fill: #16325a; }
.dia .d06-hair   { fill: none; stroke: #3f597c; stroke-width: 1.2; }
.dia .d06-divide { fill: none; stroke: #D9A63B; stroke-width: 1.4; opacity: .55; }
.dia .d06-line   { fill: none; stroke: #D9A63B; stroke-width: 1.6; }
.dia .d06-crown  { fill: none; stroke: #D9A63B; stroke-width: 2.5; }
.dia .d06-glyph  { fill: none; stroke: #8FB0DA; stroke-width: 1.6; }
.dia .d06-seat   { fill: #8FB0DA; }
.dia .d06-gold   { fill: #D9A63B; }
.dia .d06-ink    { fill: #C6D2E2; }
.dia .d06-dim    { fill: #94A7C2; }
.dia .d06-white  { fill: #FFFFFF; }

/* The five tiers as real HTML. Hidden while the drawing carries them;
   returns below 900px, where the drawing's 14px text stops being
   legible. Mirrors the .dia--swap + .flow pair further up. */
.dia--swap + .estate-tiers { display: none; }
.estate-tiers { list-style: none; margin: 2rem 0 0; padding: 0;
                grid-template-columns: 1fr; gap: 1.35rem; }
.estate-tiers li { padding-left: 1rem; border-left: 2px solid var(--gold); }
.estate-tiers b { display: block; font-family: var(--font-display);
                  font-size: 1.2rem; font-weight: 500; color: var(--white);
                  margin-bottom: .2rem; }
.estate-tiers span { display: block; font-size: .9rem; line-height: 1.65;
                     color: rgba(255,255,255,.72); }
@media (min-width: 560px) and (max-width: 900px) {
  .estate-tiers { grid-template-columns: 1fr 1fr; gap: 1.35rem 2rem; }
}
@media (max-width: 900px) {
  .dia--swap + .estate-tiers { display: grid; }
}
.dia .d06-platform { font: 500 24px var(--font-display); }

/* ── 5 Sep 2026 review fixes ───────────────────────────────────────────────
   Each rule names its finding in ~/Desktop/eaic-uk-visual-review-2026-09-05.md
   (S = site-wide, C = content, P = page, M = mobile). Appended last so that
   source order settles the ties with the rules above. */
/* S2: ".measure p" (line 26) outranked ".band--oxford p" by source order, so
   dark-band body text rendered dark grey on navy. */
.band--oxford .measure p { color: rgba(255,255,255,.72); }
/* S3: the hero column was 16ch, leaving single-word lines at 1280 and 1440. */
.hero h1, .page-hero h1 { max-width: 21ch; text-wrap: balance; }
/* S4: closing-CTA and section headings balance their own lines; the <br>s went. */
.cta-band h2, .sec-head h2, .split h2, .card h3 { text-wrap: balance; }
/* S5: "How it runs" is a real list again; cap the measure and breathe after the spec table. */
.steps-v { max-width: 760px; margin-top: 2rem; }
/* S7: the "You hold:" line stays in the hero text column instead of crossing the photo. */
.hero__content .hold { max-width: 34rem; }
/* M2: breadcrumbs wrap between items, never inside one. */
.breadcrumb { flex-wrap: wrap; row-gap: .2rem; }
.breadcrumb a, .breadcrumb span, .breadcrumb b { white-space: nowrap; }
.breadcrumb b { font-weight: 400; }
/* P3: Our Work per-client figures as a compact metric list. */
.kv--metric { max-width: 34rem; }
.kv--metric li { grid-template-columns: 1fr 4rem; align-items: center; }
.kv--metric li b { text-transform: none; letter-spacing: 0; font-size: .85rem; padding-top: 0; }
.kv--metric li span { font-family: var(--font-display); font-size: 1.5rem; color: var(--oxford); text-align: right; line-height: 1; }
/* P5: nine text logos as a 3 x 3 wall instead of 6 + 3. */
@media (min-width: 720px) { .exp-wall { grid-template-columns: repeat(3, 1fr); } }
/* P2 / C12: links inside plain lists, notes and boxes read as links. */
.check-list--links a, .links a, .aside--box p a { color: var(--oxford); text-decoration: underline; text-underline-offset: 2px; }
/* P1: the who-we-are stack has four cells, not five; the statement needs air. */
@media (min-width: 1025px) { .stack--4 { grid-template-columns: repeat(4, 1fr); } }
.stack + .statement { margin-top: 2.5rem; }
/* C10: fact rows sized to what is left once the hero duplicates went. */
@media (min-width: 861px) { .facts--2 { grid-template-columns: repeat(2, 1fr); } .facts--3 { grid-template-columns: repeat(3, 1fr); } }
/* M3: on one column the contents/related block leads the article rather than landing mid-way. */
@media (max-width: 960px) { .article-side { order: -1; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; } }
/* M1: the contract-shapes table stacks on a phone instead of scrolling sideways. */
@media (max-width: 720px) {
  .tbl--stack { min-width: 0; }
  .tbl--stack, .tbl--stack tbody, .tbl--stack tr, .tbl--stack th, .tbl--stack td { display: block; }
  .tbl--stack thead { display: none; }
  .tbl--stack tr { padding: 1rem 0; border-bottom: 1px solid var(--border); }
  .tbl--stack th[scope="row"] { border: 0; padding: 0 0 .5rem; }
  .tbl--stack td { border: 0; padding: .3rem 0; background: transparent !important; }
  .tbl--stack td::before { content: attr(data-label); display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .1rem; }
}
/* M4: the gauge caption sat on the arc ends at 390px. */
.rogs__den { font-size: 12px; }
/* Bands without .section had no vertical padding at all (verified on live: the
   eyebrow sat on the top edge of the navy). Give them the section rhythm; bands
   that are also .section already have it. */
.band:not(.section) { padding: var(--section-gap) 0; }
/* ── Footer (S8, Founder 5 Sep 2026; cleanup 6 Sep 2026) ──────────────
   Measured live on 6 Sep: 956px tall at 1440 with 150–255px holes under the
   short lists and ~400px under the brand; 137px columns wrapping 11 links at
   1081–1199; a 2,072px single-column stack on phones. Four rules fix it, all
   presentation — FOOTER_COLS and the DOM (tab) order are unchanged. */
.footer__col h4 { color: rgba(255,255,255,.78); }   /* headings read above the links */
.footer__brand p { max-width: 34ch; }                /* was 28ch; the column is wider */
/* 1. Even rows: the build marks the longest half of the lists .footer__col--long;
      they take the first row (10/8/8), the short lists the second (5/4/4). */
@media (min-width: 641px) {
  .footer__grid--pillars .footer__col { order: 2; }
  .footer__grid--pillars .footer__col--long { order: 1; }
}
/* 2. Tablets and small laptops (641–1080px): the brand row was 270px tall with
      its right two thirds empty; the address now sits beside the tagline. */
@media (min-width: 641px) and (max-width: 1080px) {
  .footer__grid--pillars .footer__brand { display: grid; grid-template-columns: minmax(0, 34ch) max-content; column-gap: 3rem; align-items: start; }
  .footer__grid--pillars .footer__brand .footer__address { grid-column: 2; grid-row: 1 / 3; margin-top: .4rem; }
}
/* 3. From 1081px the brand is a tall first column spanning both rows and the
      six lists flow 3 + 3 beside it (S8). Was 1200px: between 1081 and 1199
      the site.css six-equal-columns rule stood and gave 137px columns. */
@media (min-width: 1081px) {
  .footer__grid--pillars { grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)); gap: 2.5rem 2.25rem; }
  .footer__grid--pillars .footer__brand { grid-column: auto; grid-row: span 2; margin-bottom: 0; padding-right: 1.5rem; border-right: 1px solid rgba(255,255,255,.1); }
}
/* 4. Phones: two columns of links instead of one stack; the brand block keeps
      the full row (site.css grid-column: 1 / -1). */
@media (max-width: 640px) {
  .footer__grid--pillars { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
}