/* ElevatedCtrl — page components. Base system in styles.css. */

/* Wordmark: the client's ELEVATEDCtrl SVG, drawn in the current colour */
.brand__logo {
  display: block; width: 136px; height: 22px; background: currentColor;
  -webkit-mask: url(img/wordmark.svg) left center / contain no-repeat;
  mask: url(img/wordmark.svg) left center / contain no-repeat;
}
.brand { color: var(--ink); }
.brand--light { color: var(--on-deep); }
.curtain__word {
  display: block; width: min(280px, 60vw); height: 46px; background: var(--accent-soft);
  -webkit-mask: url(img/wordmark.svg) center / contain no-repeat;
  mask: url(img/wordmark.svg) center / contain no-repeat;
  clip-path: inset(0 100% 0 0); animation: wipe .8s var(--ease-io) .05s forwards;
}
.curtain.is-lifting .curtain__word { opacity: 0; transform: translateY(-24px); transition: opacity .4s, transform .6s var(--ease-out); }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
.footer__mark { font-size: clamp(3rem, 12.4vw, 13.75rem); }

/* Inner page heroes: shorter, smaller title */
.hero--page { min-height: 86svh; }
.hero--page .hero__title { font-size: clamp(2.5rem, 4.9vw, 4.875rem); }
.hero__title--article { font-size: clamp(2.125rem, 3.6vw, 3.5rem) !important; line-height: 1.06; letter-spacing: -.02em; }
.hero__title--article .line > span { white-space: normal; }
.hero--feature .hero__media { min-height: 380px; }

/* Split: copy beside one photograph */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.split--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.split__copy .lead { margin-top: 22px; }
.split__copy > .link { margin-top: 18px; }
.split__photo { aspect-ratio: 4 / 5; max-height: 78svh; width: 100%; }
.minor { font: 500 0.9375rem/1.4 var(--sans); color: var(--muted); margin: clamp(28px, 4vh, 40px) 0 14px; }

/* Home: four focus areas */
.focus { list-style: none; margin: clamp(28px, 4vh, 44px) 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; }
.focus__item { padding-top: 16px; border-top: 1px solid var(--line); }
.focus__topic { display: block; font-size: 0.8125rem; color: var(--accent); margin-bottom: 6px; }
.focus__title { font: 400 clamp(1.3125rem, 1.7vw, 1.5625rem)/1.2 var(--serif); letter-spacing: -.01em; }
.focus__item p { margin-top: 6px; color: var(--muted); font-size: 0.9688rem; }

/* Objectives: four columns, each with its services */
.objectives { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.objective { padding: 26px clamp(16px, 1.6vw, 26px) 8px 0; border-right: 1px solid var(--line); }
.objective + .objective { padding-left: clamp(16px, 1.6vw, 26px); }
.objective:last-child { border-right: 0; }
.objective__no { font: 400 0.9375rem/1 var(--serif); color: var(--accent); }
.objective__title { margin-top: 14px; font: 400 clamp(1.375rem, 1.8vw, 1.6875rem)/1.18 var(--serif); letter-spacing: -.01em; }
.objective__text { margin-top: 10px; color: var(--ink-2); font-size: 0.9688rem; }
.objective__subs { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.objective__subs li { font-size: 0.9062rem; color: var(--muted); padding-left: 14px; position: relative; }
.objective__subs li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 1px; background: var(--accent); }
.objective__subs strong { display: block; color: var(--ink); font-weight: 500; }

/* Services: three domains */
.domains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.domain { padding-top: 22px; border-top: 1px solid var(--ink); }
.domain__no { font: 400 0.9375rem/1 var(--serif); color: var(--accent); }
.domain__title { margin-top: 14px; font: 400 clamp(1.5rem, 2vw, 1.875rem)/1.15 var(--serif); letter-spacing: -.012em; }
.domain__sub { margin-top: 6px; color: var(--muted); font-size: 0.9375rem; }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; font-size: 0.9688rem; color: var(--ink-2); }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: .45em; width: 11px; height: 6px;
  border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg);
}
.ticks--large li { font: 400 clamp(1.1875rem, 1.5vw, 1.375rem)/1.35 var(--serif); padding-block: 14px; border-bottom: 1px solid var(--line); padding-left: 32px; }
.ticks--large li::before { top: 1.25em; }
.ticks--large { gap: 0; margin-top: 0; border-top: 1px solid var(--line); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9062rem; color: var(--ink-2); transition: border-color .3s, color .3s; }
.chips li:hover { border-color: var(--accent); color: var(--ink); }

/* Approach: engine and target ranges */
.engine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.engine li { padding-top: 20px; border-top: 1px solid var(--line); }
.engine h3 { font: 400 clamp(1.375rem, 1.8vw, 1.6875rem)/1.2 var(--serif); }
.engine p { margin-top: 8px; color: var(--muted); }
.targets { margin-top: clamp(40px, 7vh, 72px); padding: clamp(24px, 3vw, 40px); background: var(--deep); color: var(--on-deep); border-radius: var(--r); }
.targets__label { font-size: 0.875rem; color: var(--on-deep-muted); }
.targets__row { margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.targets__row div { display: flex; flex-direction: column-reverse; gap: 4px; }
.targets__row dd { margin: 0; font: 300 clamp(2.5rem, 4.6vw, 4.5rem)/1 var(--serif); letter-spacing: -.03em; color: var(--accent-soft); font-variant-numeric: tabular-nums; }
.targets__row dt { color: var(--on-deep); font-size: 0.9375rem; }
.terms--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.terms--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 64px; padding: 14px 0; font: 400 clamp(1.1875rem, 1.5vw, 1.4375rem)/1.3 var(--serif); transition: color .2s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }
.faq__icon { position: relative; flex: none; width: 14px; height: 14px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px; background: currentColor; transition: transform .45s var(--spring); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__item p { padding: 0 40px 22px 0; color: var(--ink-2); max-width: 60ch; }
.faq__item[open] p { animation: faq-in .5s var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

/* About: track record */
.record { list-style: none; margin: 0; padding: 0; counter-reset: rec; border-top: 1px solid var(--ink); }
.record li { counter-increment: rec; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.record li::before { content: counter(rec, decimal-leading-zero); grid-row: span 2; font: 400 0.9375rem/1.7 var(--serif); color: var(--accent); }
.record h3 { font: 400 clamp(1.3125rem, 1.7vw, 1.5625rem)/1.25 var(--serif); }
.record p { margin-top: 6px; color: var(--muted); font-size: 0.9688rem; }
.sectors__list li span { display: block; }

/* Insight cards */
.head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(24px, 2.6vw, 40px); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card__link { display: flex; flex-direction: column; text-decoration: none; height: 100%; transition: transform .5s var(--spring); }
.card__link:hover { transform: translateY(-2px); }
.card__photo { aspect-ratio: 3 / 2; margin-bottom: 18px; }
.card__link:hover .card__photo img { transform: scale(1.03); }
.card__meta { font-size: 0.8125rem; color: var(--accent); }
.card__title { margin-top: 8px; font: 400 clamp(1.3125rem, 1.7vw, 1.5625rem)/1.22 var(--serif); letter-spacing: -.01em; transition: color .2s; }
.card__link:hover .card__title { color: var(--accent); }
.card__text { margin-top: 10px; color: var(--muted); font-size: 0.9688rem; }

/* Article body */
.section--prose { min-height: 0; padding-top: clamp(56px, 8vh, 96px); }
.prose { max-width: 68ch; margin-inline: auto; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); color: var(--ink-2); }
.prose h2 { font-size: clamp(1.875rem, 2.8vw, 2.625rem); margin: 0 0 18px; max-width: none; color: var(--ink); }
.prose h3 { font: 400 clamp(1.375rem, 1.8vw, 1.6875rem)/1.25 var(--serif); color: var(--ink); margin: 40px 0 12px; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 1.2em; display: grid; gap: 8px; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 600; }

/* Closing call to action */
.close--short { min-height: 70svh; background: var(--surface); }
.close--short .close__grid { align-items: end; }
.close--short .close__copy .lead { margin-top: 0; }
.close--short .hero__actions { margin-top: 28px; }

/* Contact */
.contact { padding-top: calc(var(--nav-h) + clamp(40px, 8vh, 96px)); }
.contact .hero__kicker { margin-bottom: 24px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field select {
  width: 100%; min-height: 50px; padding: 12px 40px 12px 14px; appearance: none;
  font: 400 1rem/1.45 var(--sans); color: var(--ink);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231a1a1a' stroke-width='1.5'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
  border: 1px solid var(--line); border-radius: var(--r); transition: border-color .2s, box-shadow .2s;
}
.field select:hover { border-color: var(--ink-2); }
.field select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

/* Responsive */
@media (max-width: 1100px) {
  .objectives { grid-template-columns: 1fr 1fr; }
  .objective { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px 0 24px !important; }
  .objective:nth-child(odd) { padding-right: 28px !important; border-right: 1px solid var(--line); }
  .objective:nth-child(even) { padding-left: 28px !important; }
  .terms--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .split, .split--wide, .domains, .engine, .terms--3, .cards--3 { grid-template-columns: 1fr; }
  .split__photo { aspect-ratio: 3 / 2; max-height: none; }
  .hero--page { min-height: auto; }
  .close--short { min-height: auto; }
  .close--short .close__grid { align-items: start; }
  .close--short .close__copy { margin-top: 20px; }
  .targets__row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .objectives, .focus, .terms--4, .cards--3, .cards--2, .field-row { grid-template-columns: 1fr; }
  .objective, .objective:nth-child(odd), .objective:nth-child(even) { padding: 22px 0 !important; border-right: 0; }
  .brand__logo { width: 120px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .curtain__word { animation: none; clip-path: none; }
  .card__link:hover { transform: none; }
}

/* Longer client headlines: lines may wrap inside their mask; italic overhang kept */
.hero__title .line > span { white-space: normal; }
.hero__title .line { padding-right: .12em; margin-right: -.12em; }
.hero:not(.hero--page) .hero__title { font-size: clamp(2.5rem, 5vw, 5rem); }
.hero--page .hero__title { font-size: clamp(2.375rem, 4.4vw, 4.375rem); }
h1.close__title { font-family: var(--serif); font-weight: 380; font-variation-settings: "opsz" 60; }


/* ---------- Institutional labels: uppercase, tracked, brand blue (mirrors document metadata labels) ---------- */
.hero__kicker, .focus__topic, .card__meta, .step__when, .objective__no, .domain__no, .svc__no, .label {
  font-family: var(--sans); font-weight: 600; font-size: 0.7812rem; letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
}
.hero__kicker { color: var(--ink-2); }
.hero__kicker .dot { background: var(--accent); }
.hero__facts dt, .close__facts dt { font-weight: 600; font-size: 0.7812rem; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Units: three equal panels ---------- */
.units { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.unit { position: relative; padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); display: flex; flex-direction: column; min-height: 100%; transition: border-color .4s var(--ease-out), transform .6s var(--spring); }
.unit:hover { border-color: var(--accent); transform: translateY(-3px); }
.unit__word { font-size: 0.7812rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.unit__name { margin-top: 14px; font: 400 clamp(1.625rem, 2.2vw, 2.125rem)/1.08 var(--serif); letter-spacing: -.015em; }
.unit__name span { display: block; }
.unit__text { margin-top: 14px; color: var(--ink-2); font-size: 1rem; max-width: 34ch; }
.unit__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 7px; color: var(--muted); font-size: 0.9062rem; }
.unit__list li { padding-left: 14px; position: relative; }
.unit__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: var(--accent); }
.unit__link { margin-top: auto; padding-top: 26px; }
.unit__link .link { font-weight: 700; }
.unit > a.unit__cover { position: absolute; inset: 0; border-radius: inherit; }

/* ---------- Authority and capability: the two-column statement ---------- */
.split-table { width: 100%; border-collapse: collapse; margin-top: clamp(28px, 4vh, 44px); }
.split-table th, .split-table td { text-align: left; vertical-align: top; padding: 16px 20px 16px 0; border-bottom: 1px solid var(--line); font-size: 0.9688rem; }
.split-table th { font-weight: 700; color: var(--ink); width: 18%; }
.split-table thead th { font-size: 0.7812rem; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--ink); padding-bottom: 12px; }
.split-table td { color: var(--ink-2); }
.split-table td:last-child { color: var(--ink); }

/* ---------- Boundary note ---------- */
.note { margin-top: clamp(32px, 5vh, 52px); padding: clamp(22px, 2.4vw, 32px); border-left: 2px solid var(--accent); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; max-width: 70ch; }
.note p { color: var(--ink-2); }
.note p + p { margin-top: 10px; }
.note strong { color: var(--ink); font-weight: 700; }

/* ---------- Sector families ---------- */
.families { list-style: none; margin: clamp(28px, 4vh, 44px) 0 0; padding: 0; border-top: 1px solid var(--ink); }
.families li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.families h3 { font: 400 clamp(1.25rem, 1.7vw, 1.5625rem)/1.2 var(--serif); letter-spacing: -.01em; }
.families p { color: var(--muted); font-size: 0.9688rem; }

/* ---------- Leadership ---------- */
.leader { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.leader__name { font: 400 clamp(1.5rem, 2vw, 1.875rem)/1.1 var(--serif); letter-spacing: -.01em; margin-top: 8px; }
.leader__role { color: var(--muted); font-size: 0.9375rem; margin-top: 4px; }
.leader p.lead + p.lead { margin-top: 18px; }

@media (max-width: 900px) {
  .units, .leader { grid-template-columns: 1fr; }
  .families li { grid-template-columns: 1fr; gap: 6px; }
  .split-table th { width: 26%; }
}
@media (max-width: 640px) {
  .split-table, .split-table thead, .split-table tbody, .split-table tr { display: block; }
  .split-table thead { display: none; }
  .split-table th, .split-table td { display: block; padding: 8px 0; border: 0; }
  .split-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .split-table th { padding-bottom: 2px; }
  .split-table td::before { content: attr(data-col); display: block; font-size: 0.7188rem; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 2px; }
}

/* Shorter sections where content is brief */
.section--short { min-height: 0; padding-block: clamp(80px, 12vh, 140px); }

/* ---------- Small notes and secondary footer links ---------- */
.minor-note { margin-top: 18px; font-size: 0.9062rem; color: var(--muted); max-width: 60ch; }
.minor-note a, .note a, .prose a { color: var(--accent); }
.footer__nav--minor { grid-column: 2; margin-top: -24px; }
.footer__nav--minor a { font-size: 0.8438rem; color: var(--on-deep-muted); }

/* ---------- Work: decision records ---------- */
.cases { display: grid; gap: clamp(28px, 4vh, 48px); }
.case { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 72px); padding-top: 28px; border-top: 1px solid var(--ink); }
.case__no { font-family: var(--sans); font-weight: 600; font-size: 0.7812rem; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.case__title { margin-top: 12px; font: 400 clamp(1.625rem, 2.4vw, 2.25rem)/1.12 var(--serif); letter-spacing: -.015em; max-width: 18ch; }
.case__body { margin: 0; display: grid; gap: 18px; }
.case__body > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.case__body > div:last-child { border-bottom: 0; }
.case__body dt { font-weight: 600; font-size: 0.7812rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.case__body dd { margin: 0; color: var(--ink-2); }
.case__body .ticks { margin-top: 0; }

/* ---------- Readiness check ---------- */
.readiness { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.readiness__intro { position: sticky; top: calc(var(--nav-h) + 24px); }
.readiness__intro .lead { margin-top: 24px; }
.readiness__form { display: grid; gap: 28px; }
.rq-area { margin: 0; padding: 0; border: 0; min-width: 0; }
.rq-area__title { float: left; width: 100%; padding: 18px 0 4px; border-top: 1px solid var(--ink); font: 400 clamp(1.375rem, 1.8vw, 1.6875rem)/1.2 var(--serif); }
.rq-area__title + .rq { clear: both; }
.rq { padding: 16px 0; border-bottom: 1px solid var(--line); }
.rq__text { color: var(--ink-2); }
.rq__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rq__opts label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9062rem; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.rq__opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rq__opts label:hover { border-color: var(--ink-2); }
.rq__opts label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rq__opts label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.rq.is-missing .rq__text { color: #a1311f; }
.readout { margin-top: clamp(40px, 6vh, 72px); scroll-margin-top: calc(var(--nav-h) + 16px); padding: clamp(28px, 3vw, 48px); background: var(--surface); border-radius: var(--r); outline: none; }
.readout__areas { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 14px; }
.readout__area { display: grid; grid-template-columns: 140px minmax(0, 1fr) 110px; gap: 20px; align-items: center; }
.readout__name { font: 400 1.25rem/1.2 var(--serif); }
.readout__bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.readout__bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 1s var(--ease-out); }
.readout__band { font-size: 0.8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: right; }
.is-strong .readout__band { color: var(--accent); }
.is-developing .readout__band { color: var(--ink-2); }
.is-exposed .readout__band { color: #a1311f; }
.is-exposed .readout__bar i { background: #a1311f; }
.readout__next .ticks a { color: var(--accent); font-weight: 600; }
.readout .hero__actions { margin-top: 28px; }

/* ---------- Glossary ---------- */
.gloss { margin-top: clamp(48px, 8vh, 88px); }
.gloss__title { font-size: clamp(1.75rem, 2.6vw, 2.5rem); max-width: none; }
.gloss__list { margin: 24px 0 0; border-top: 1px solid var(--ink); }
.gloss__list > div { display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.gloss__list dt { font: 400 1.25rem/1.3 var(--serif); }
.gloss__list dd { margin: 0; color: var(--ink-2); max-width: 64ch; }

@media (max-width: 1180px) and (min-width: 901px) {
  .nav__links { gap: 16px; }
  .nav__links a:not(.btn) { font-size: 0.875rem; }
}
@media (max-width: 900px) {
  .case, .readiness { grid-template-columns: 1fr; }
  .readiness__intro { position: static; }
  .footer__nav--minor { grid-column: 1; margin-top: 0; }
}
@media (max-width: 640px) {
  .case__body > div, .gloss__list > div { grid-template-columns: 1fr; gap: 4px; }
  .readout__area { grid-template-columns: 1fr auto; }
  .readout__bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Footer: one row of links, one base line, the emblem as a faded watermark ---------- */
.footer { padding-block: 56px 0; }
.footer .footer__grid { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px 48px; }
.footer .footer__nav { justify-content: flex-end; gap: 4px 26px; }
.footer__base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--on-deep) 14%, transparent); }
.footer__base .footer__legal { grid-column: auto; padding: 0; border: 0; }
.footer__minor { display: flex; gap: 22px; }
.footer__minor a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.8438rem; color: var(--on-deep-muted); text-decoration: none; transition: color .2s; }
.footer__minor a:hover { color: var(--on-deep); }
.footer__emblem {
  width: clamp(150px, 19vw, 280px); aspect-ratio: 1210 / 1550; margin: clamp(40px, 6vh, 64px) auto 0;
  --em: color-mix(in srgb, var(--on-deep) 11%, transparent);
  --em-lit: color-mix(in srgb, var(--on-deep) 30%, transparent);
  background: linear-gradient(105deg, var(--em) 0 42%, var(--em-lit) 50%, var(--em) 58% 100%) 120% 0 / 260% 100% no-repeat, var(--em);
  -webkit-mask: url(img/emblem.svg) center bottom / contain no-repeat;
  mask: url(img/emblem.svg) center bottom / contain no-repeat;
  margin-bottom: clamp(12px, 1.6vh, 18px);
}
/* Reveal: the emblem builds upward from its base, then a light passes across it once */
.js .footer__emblem { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(40px); }
.js .footer__emblem.is-in {
  opacity: 1; clip-path: inset(0 0 0 0); transform: none;
  transition: opacity .6s var(--ease-out), clip-path 1.6s var(--ease-io), transform 1.8s var(--spring-soft);
  animation: emblem-sheen 2.2s var(--ease-io) 1.3s 1 both;
}
@keyframes emblem-sheen { from { background-position: 120% 0, 0 0; } to { background-position: -20% 0, 0 0; } }
@media (max-width: 900px) {
  .footer .footer__grid { grid-template-columns: 1fr; }
  .footer .footer__nav { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .js .footer__emblem { opacity: 1; transform: none; clip-path: none; animation: none; } }

/* Analytics control on the privacy page: a statement and its switch on one row */
.optout { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 1.5em 0 .5em; padding: 18px 0; border-block: 1px solid var(--line); }
.optout__label { display: block; cursor: pointer; font: 500 var(--fs-support)/1.4 var(--sans); color: var(--ink); }
.optout__state { display: block; margin-top: 4px; font: 400 var(--fs-small)/1.45 var(--sans); color: var(--muted); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 0.875rem; }

/* Toggle switch: a native checkbox drawn as a track and knob, so keyboard and screen readers get the real control */
.switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative;
  width: 44px; height: 26px; margin: 0; border: 0; border-radius: 999px;
  background: var(--line); cursor: pointer;
  transition: background-color .3s var(--ease-out);
}
.switch::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(14, 27, 61, .28);
  transition: transform .4s var(--spring, var(--ease-out));
}
.switch:hover { background: color-mix(in srgb, var(--line) 70%, var(--muted)); }
.switch:checked, .switch:checked:hover { background: var(--accent); }
.switch:checked::before { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.switch:disabled { background: var(--ink); opacity: .45; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .switch, .switch::before { transition: none; }
}

/* =====================================================================
   Refinement pass, 13 November 2026.
   Typesetting, list markers, unit columns, essay setting and label tracking.
   Kept as one layer so it can be reviewed or reverted as a unit.
   ===================================================================== */

/* Typesetting: balanced headings, no widows or orphans, proper kerning, oldstyle figures in the serif */
body { font-kerning: normal; font-optical-sizing: auto; }
h1, h2, h3, .hero__title, .close__title, .unit__name, .svc__title, .card__title,
.focus__title, .objective__title, .domain__title, .hero__facts dd { text-wrap: balance; }
p, li, dd, figcaption, .lead, .svc__text, .unit__text, .card__text { text-wrap: pretty; }
h1, h2, h3, .prose, .ticks--large, .hero__facts dd, .close__facts dd { font-variant-numeric: oldstyle-nums proportional-nums; }
.svc__no, .objective__no, .domain__no, .case__no, .record li::before { font-variant-numeric: lining-nums tabular-nums; }

/* Labels: lighter, more open tracking reads as engraved rather than shouted */
.hero__kicker, .focus__topic, .card__meta, .step__when, .objective__no, .domain__no, .svc__no, .label,
.unit__word, .case__no, .split-table thead th {
  font-size: 0.75rem; font-weight: 600; letter-spacing: .13em;
}
.hero__facts dt, .close__facts dt, .case__body dt { font-size: 0.7188rem; letter-spacing: .12em; }

/* One list marker everywhere: a short 1px accent rule centred on the first line of text.
   A 1px rule on a fractional position smears across two pixel rows and renders grey on some rows and
   blue on others, so main.js sets --snap to move each rule onto a whole device pixel. */
.unit__list li::before, .objective__subs li::before, .ticks li::before, .prose ul > li::before {
  content: ""; position: absolute; left: 0; top: calc(.5lh - .5px + var(--snap, 0px));
  width: 10px; height: 1px; background: var(--accent); border: 0; transform: none;
}
.unit__list { gap: 9px; line-height: 1.5; }
.unit__list li, .objective__subs li { padding-left: 20px; }
.ticks li { padding-left: 24px; }
.ticks--large li { padding-left: 30px; }
.ticks--large li::before { top: calc(14px + .5lh - .5px + var(--snap, 0px)); width: 14px; }

/* Units: editorial columns under a rule instead of boxed cards */
.units { gap: clamp(32px, 4vw, 64px); }
.unit { border: 0; border-top: 1px solid var(--ink); border-radius: 0; background: none; padding: 26px 0 0; }
.unit:hover { transform: none; border-top-color: var(--accent); }
.unit__name { transition: color .3s var(--ease-out); }
.unit:hover .unit__name { color: var(--accent); }
.unit__word { font-weight: 600; }

/* Essays and the privacy notice: set in the serif, at a reading measure */
.prose { font-family: var(--serif); font-size: clamp(1.1875rem, 1.4vw, 1.3125rem); line-height: 1.62; max-width: 34em; }
.prose p { margin: 0 0 1.05em; }
.prose h3 { margin: 2.2em 0 .5em; font-size: clamp(1.5rem, 2vw, 1.8125rem); line-height: 1.2; letter-spacing: -.01em; }
.prose h3 + p { margin-top: 0; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose ul { list-style: none; padding-left: 0; gap: .55em; margin-bottom: 1.3em; }
.prose ul > li { position: relative; padding-left: 28px; }
.prose ol { padding-left: 1.4em; }
.prose ol > li::marker { font-variant-numeric: oldstyle-nums; color: var(--accent); }
.prose .hero__kicker, .prose .minor-note, .prose .btn { font-family: var(--sans); }

/* Small section labels in the label voice, not as stray sentences */
.minor { font-size: 0.7188rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 900px) {
  .unit { padding-top: 22px; }
}
@media (max-width: 560px) {
  .prose { font-size: 1.125rem; line-height: 1.6; }
  .prose ul > li { padding-left: 22px; }
}

/* Numerals: italic serif figures in a light weight, sitting on the title's baseline.
   The register style of a well-set annual report: present, quiet, never louder than the title. */
.svc__no, .domain__no, .objective__no .num, .case__no .num {
  font-family: var(--serif); font-style: italic; font-weight: 300; letter-spacing: .01em; text-transform: none;
  font-variant-numeric: lining-nums tabular-nums; color: var(--accent);
}
.svc__no { font-size: clamp(1.1875rem, 1.5vw, 1.375rem); line-height: 1.2; }
.svc__link { align-items: first baseline; grid-template-columns: 56px minmax(0, 1fr) 24px; }
.svc__arrow { align-self: center; margin-top: 0; }
.domain__no { font-size: 1.25rem; line-height: 1; }
.objective__no .num, .case__no .num { font-size: 1.1875rem; margin-right: 10px; vertical-align: -1px; }
/* the separator after the figure is replaced by space: "01  Transport · Financing" */
.objective__no .sep, .case__no .sep { display: none; }

/* Annotation titles: italic serif margin notes instead of tracked capitals.
   Capitals stay for category labels; annotations get the quieter, more literary voice. */
.case__body dt, .hero__facts dt, .close__facts dt {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1rem;
  letter-spacing: 0; text-transform: none; color: var(--muted);
}
.case__body dt { padding-top: 1px; }
.hero__facts dt { font-size: 0.9375rem; margin-bottom: 2px; }
.close__facts div, .case__body > div { align-items: first baseline; }
.close__facts dt, .case__body dt { padding-top: 0; }

/* Hero labels: plain, without the status dot, which read as a live indicator rather than a heading */
.hero__kicker { gap: 0; }
.hero__kicker .dot { display: none; }
@media (max-width: 900px) {
  .svc__link { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
}

/* =====================================================================
   Navigation refinements, 13 November 2026: back to top, essay contents, page transitions.
   ===================================================================== */

/* Back to top: a margin mark, not a floating widget. A fine vertical rule in the right margin fills
   with the accent as the page is read; "Top" sits beneath it in the italic serif.
   No circle, no shadow, no blur. It turns light over the navy sections. */
.totop {
  position: fixed; z-index: 55; right: max(14px, calc(var(--gutter) / 2 - 14px)); bottom: calc(28px + var(--bar-h, 0px));
  width: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0;
  color: var(--ink-2); text-decoration: none;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .6s var(--ease-out), transform .8s var(--ease-out), bottom .6s var(--ease-out), color .4s var(--ease-out);
}
.totop.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.totop__rule { position: relative; display: block; width: 1px; height: 64px; background: var(--line); overflow: hidden; transition: background-color .4s var(--ease-out); }
.totop__fill { position: absolute; inset: 0; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .15s linear; }
.totop__label { font: italic 400 0.9375rem/1 var(--serif); letter-spacing: .01em; transition: transform .5s var(--ease-out); }
.totop:hover { color: var(--accent); }
.totop:hover .totop__label { transform: translateY(-3px); }
.totop:hover .totop__rule { background: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.totop:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; border-radius: 2px; }
.totop.is-on-deep { color: var(--on-deep-muted); }
.totop.is-on-deep .totop__rule { background: color-mix(in srgb, var(--on-deep) 22%, transparent); }
.totop.is-on-deep .totop__fill { background: var(--accent-soft); }
.totop.is-on-deep:hover { color: var(--on-deep); }
body:has(.nav.is-open) .totop { opacity: 0; pointer-events: none; }
/* Phones: no margin to sit in, so it rests on a small paper ground at the edge, shown on scroll-up only */
@media (max-width: 900px) {
  .totop { right: 10px; bottom: calc(16px + var(--bar-h, 0px)); width: 36px; padding: 10px 0 9px; gap: 8px;
           background: color-mix(in srgb, var(--paper) 94%, transparent); border-radius: 2px; }
  .totop__rule { height: 40px; }
  .totop.is-on-deep { background: color-mix(in srgb, var(--deep) 94%, transparent); }
}

/* Essay contents: a quiet rail in the left margin on wide screens only */
.section--prose .wrap { position: relative; }
.toc { display: none; }
@media (min-width: 1240px) {
  .toc { display: block; position: absolute; top: 0; bottom: 0; left: var(--gutter); width: min(220px, calc((100% - 34em) / 2 - 2 * var(--gutter))); }
  .toc__inner { position: sticky; top: calc(var(--nav-h) + 48px); }
  .toc__title { margin: 0 0 14px; font: italic 400 0.9375rem/1.3 var(--serif); color: var(--muted); }
  .toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); counter-reset: toc; }
  .toc__list a {
    position: relative; display: block; padding: 7px 0 7px 18px; margin-left: -1px; border-left: 1px solid transparent;
    font-size: 0.8438rem; line-height: 1.4; color: var(--muted); text-decoration: none; text-wrap: balance;
    transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
  }
  .toc__list a:hover { color: var(--ink); }
  .toc__list a.is-active { color: var(--ink); border-left-color: var(--accent); }
}

/* Between pages: a soft dissolve instead of a hard white flash (browsers with view transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .totop, .totop__label, .totop__fill { transition: none; }
}

/* =====================================================================
   Top menu, 13 November 2026: quieter, more editorial.
   Solid paper with a hairline on scroll (no frosted glass), the call to action as a refined text
   link set apart by a divider (no black pill), and no duplicate progress line.
   ===================================================================== */
.nav.is-scrolled {
  background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 1px 0 var(--line);
}
.nav__progress { display: none; }
.nav__links { gap: clamp(18px, 2.2vw, 34px); }
.nav__links a:not(.nav__cta) { font-size: 0.9062rem; letter-spacing: .005em; color: var(--ink-2); }
.nav__links a[aria-current="page"]:not(.nav__cta) { color: var(--ink); background-size: 100% 1px; }

.nav__cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-left: clamp(4px, .8vw, 12px);
  padding-left: clamp(18px, 2.2vw, 34px); position: relative;
  font: 500 0.9062rem/1 var(--sans); letter-spacing: .005em; color: var(--ink); text-decoration: none;
  background: none !important;
}
.nav__cta::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 18px; transform: translateY(-50%); background: var(--line); }
.nav__cta span {
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px; transition: background-size .45s var(--ease-out), color .3s var(--ease-out);
}
.nav__cta svg { width: 14px; height: 14px; color: var(--accent); transition: transform .45s var(--ease-out); }
.nav__cta:hover span { color: var(--accent); }
.nav__cta:hover svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .nav__links a:not(.nav__cta) { font: 400 2.125rem/1.2 var(--serif); color: var(--ink); }
  .nav__links a.nav__cta { margin: 36px 0 0; padding: 0; min-height: 48px; border-bottom: 0; align-self: flex-start;
    font: 500 1.0625rem/1 var(--sans); color: var(--ink); }
  .nav__links a.nav__cta svg { width: 16px; height: 16px; }
  .nav__cta::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__cta span, .nav__cta svg { transition: none; }
}

/* =====================================================================
   Collapsed offer: "What we do" panel (adopted from nav prototype A, 13 November 2026).
   Desktop: hover or click opens a full-width panel. Phones: groups sit open in the menu.
   ===================================================================== */
.navx { display: inline-flex; align-items: center; }
.navx__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 0.9062rem/1 var(--sans); letter-spacing: .005em; color: var(--ink-2);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size .35s var(--ease-out), color .2s;
}
.navx__btn:hover, .navx__btn[aria-expanded="true"], .navx__btn.is-current { color: var(--ink); background-size: 100% 1px; }
.navx__chev { width: 12px; height: 12px; transition: transform .4s var(--ease-out); }
.navx__btn[aria-expanded="true"] .navx__chev { transform: rotate(180deg); }
.navx__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.navx__panel {
  position: absolute; left: 0; right: 0; top: var(--nav-h);
  background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -40px rgba(14, 27, 61, .35);
  opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--ease-out), transform .5s var(--ease-out);
}
.navx__panel.is-open { opacity: 1; transform: none; }
.navx__grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 clamp(40px, 6vw, 96px);
  padding-top: 34px; padding-bottom: 30px;
}
.navx__head { margin: 0 0 10px; font: italic 400 0.9375rem/1.3 var(--serif); color: var(--muted); }
.navx__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.navx__list li { border-bottom: 1px solid var(--line); }
.nav__links .navx__list a {
  display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 24px; padding: 14px 0;
  text-decoration: none; color: var(--ink); background: none !important;
}
.navx__t { font: 400 1.3125rem/1.25 var(--serif); letter-spacing: -.008em; transition: color .3s var(--ease-out); }
.navx__d { font-size: 0.8438rem; color: var(--muted); }
.nav__links .navx__col:first-child .navx__list a { grid-template-columns: minmax(0, 1fr) 20em; }
.nav__links .navx__col:nth-child(2) .navx__list a { grid-template-columns: 6.5em minmax(0, 1fr); }
.navx__list a:hover .navx__t, .navx__list a[aria-current="page"] .navx__t { color: var(--accent); }
.navx__foot { grid-column: 1 / -1; margin: 22px 0 0; font-size: 0.875rem; color: var(--muted); }
.navx__foot em { font: italic 400 0.9375rem/1 var(--serif); margin-right: 6px; }
.navx__foot a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; background: none !important; display: inline !important; min-height: 0 !important; }
.navx__foot a:hover { color: var(--accent); }
@media (min-width: 901px) and (max-width: 1180px) {
  .navx__d { display: none; }
  .nav__links .navx__col .navx__list a { grid-template-columns: minmax(0, 1fr); }
}

.nav__links > a, .navx__btn { white-space: nowrap; }

@media (max-width: 900px) {
  .nav__links { justify-content: flex-start !important; overflow-y: auto; padding-top: calc(var(--nav-h) + 16px) !important; }
  .navx { display: block; }
  .navx__btn { display: none; }
  .navx__panel, .navx__panel[hidden] { display: block; position: static; opacity: 1; transform: none; border: 0; box-shadow: none; background: none; }
  .navx__grid { display: block; padding: 0 0 8px; }
  .navx__col + .navx__col { margin-top: 26px; }
  .nav__links .navx__list a { display: block; padding: 11px 0; border-bottom: 0; font: inherit; min-height: 0; }
  .nav__links .navx__foot a { font: 500 0.9375rem/1.4 var(--sans); padding: 0; border-bottom: 0; }
  .navx__t { display: block; font-size: 1.5rem; }
  .navx__d { display: block; text-align: left; justify-self: start; margin-top: 4px; font-size: 0.875rem; }
  .navx__foot { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .navx__panel, .navx__chev { transition: none; }
}

/* =====================================================================
   Menu, 13 November 2026: five words, one shallow dropdown.
   Services opens three lines; each names a unit and says plainly what it produces.
   ===================================================================== */
.menu { position: relative; display: inline-flex; align-items: center; }
.menu__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; cursor: pointer;
  font: 400 0.9062rem/1 var(--sans); letter-spacing: .005em; color: var(--ink-2);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size .35s var(--ease-out), color .2s;
}
.menu__btn:hover, .menu__btn[aria-expanded="true"], .menu__btn.is-current { color: var(--ink); background-size: calc(100% - 18px) 1px; }
.menu__chev { width: 11px; height: 11px; opacity: .7; transition: transform .4s var(--ease-out); }
.menu__btn[aria-expanded="true"] .menu__chev { transform: rotate(180deg); }
.menu__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.menu__panel {
  position: absolute; left: -22px; top: calc(100% + 2px); width: 420px; padding: 8px 22px 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 24px 50px -30px rgba(14, 27, 61, .35);
  opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease-out), transform .45s var(--ease-out);
}
.menu__panel.is-open { opacity: 1; transform: none; }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li + li { border-top: 1px solid var(--line); }
.nav__links .menu__list a {
  display: grid; grid-template-columns: 6.2em minmax(0, 1fr); align-items: baseline; gap: 16px;
  min-height: 0; padding: 13px 0; text-decoration: none; color: var(--ink); background: none;
}
.menu__t { font: 400 1.1875rem/1.2 var(--serif); letter-spacing: -.008em; transition: color .3s var(--ease-out); }
.menu__d { font-size: 0.8438rem; color: var(--muted); }
.nav__links .menu__list a:hover .menu__t, .nav__links .menu__list a[aria-current="page"] .menu__t { color: var(--accent); }
.nav__links > a, .menu__btn { white-space: nowrap; }

/* Phones: no dropdown; the three units sit open under a small heading, then the rest */
@media (max-width: 900px) {
  .menu { display: block; }
  .menu__btn { display: none; }
  .menu__panel, .menu__panel[hidden] { display: block; position: static; width: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; opacity: 1; transform: none; }
  .menu__list::before { content: "Services"; display: block; margin: 0 0 6px; font: italic 400 0.9375rem/1.3 var(--serif); color: var(--muted); }
  .menu__list li + li { border-top: 0; }
  .nav__links .menu__list a { display: block; padding: 9px 0; border-bottom: 0; }
  .menu__t { display: block; font-size: 1.875rem; line-height: 1.15; }
  .menu__d { display: block; margin-top: 3px; font-size: 0.875rem; }
  .nav__links > .menu + a { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .menu__panel, .menu__chev { transition: none; } }

/* Phone menu: scrolls when the list is taller than the screen; nothing behind it moves */
@media (max-width: 900px) {
  .nav__links {
    justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding-top: calc(var(--nav-h) + 12px); padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
  .nav__links > .nav__cta { margin-bottom: 8px; }
  .nav.is-open { transform: none !important; }
}
@media (max-width: 900px) {
  /* The list is a child of the bar row, so a strip is painted between them: list below, logo and Close above */
  .nav.is-open .nav__row { position: relative; }
  .nav.is-open .nav__row::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
  .nav.is-open .nav__links { z-index: 0; }
}

/* =====================================================================
   Type scale pass, 13 November 2026: fluid sizes
   Text grows smoothly with the viewport instead of jumping at breakpoints. Each tier is a clamp()
   from its phone size at 390px to its desktop size at 1600px, set in rem so a reader's own browser
   text size is respected. Headings and essays already scale with clamp() and are unchanged.
     --fs-body   17 -> 18.5px  body and running copy in cards, lists and tables
     --fs-support 15.5 -> 16.5px  sub-lines, chips, notes, form labels, footer links, buttons
     --fs-small  14 -> 15px    footer legal, privacy banner, menu descriptors, contents rail
     --fs-label  12.5 -> 13px  tracked-capital labels
     --fs-note   17 -> 20px    small serif figures and terms (facts, glossary terms, readouts)
     --fs-nav    14.5 -> 16px  desktop top menu, from 901px (where the bar appears) to 1600px
   ===================================================================== */
:root {
  --fs-body: clamp(1.0625rem, 1.0323rem + .124vw, 1.15625rem);
  --fs-support: clamp(.96875rem, .9486rem + .0826vw, 1.03125rem);
  --fs-small: clamp(.875rem, .8549rem + .0826vw, .9375rem);
  --fs-label: clamp(.78125rem, .7712rem + .0413vw, .8125rem);
  --fs-note: clamp(1.0625rem, 1.0021rem + .2479vw, 1.25rem);
  --fs-nav: clamp(.90625rem, .7854rem + .2146vw, 1rem);
}

body { font-size: var(--fs-body); }

/* Running copy: same size as body text */
.svc__text, .unit__text, .terms p, .focus__item p, .objective__text, .record p, .card__text,
.families p, .ticks li, .split-table th, .split-table td, .form__status { font-size: var(--fs-body); }

/* Supporting text */
.domain__sub, .leader__role, .unit__list, .objective__subs li, .chips li, .minor-note,
.rq__opts label, .targets__row dt, .footer__brand p, .footer__nav a, .btn,
.field label, .field--group legend, .field__error, .sectors__note, .targets__label,
.hero__facts dt, .case__body dt { font-size: var(--fs-support); }

/* Small print */
.footer__legal, .footer__nav--minor a, .footer__minor a, .btn--sm,
.menu__d, .navx__d, .toc__list a { font-size: var(--fs-small); }

/* Labels: tracked capitals */
.hero__kicker, .focus__topic, .card__meta, .step__when, .objective__no, .domain__no, .svc__no, .label,
.unit__word, .case__no, .split-table thead th, .minor, .readout__band, .split-table td::before { font-size: var(--fs-label); }
.svc__no { font-size: clamp(1.1875rem, 1.5vw, 1.375rem); }
.domain__no { font-size: 1.25rem; }

/* Small serif figures and terms */
.hero__facts dd, .close__facts dd, .terms h3, .readout__name, .gloss__list dt { font-size: var(--fs-note); }

/* Desktop top menu only; the phone menu keeps its large serif links */
@media (min-width: 901px) {
  .nav__links a:not(.nav__cta), .menu__btn, .navx__btn, .nav__cta { font-size: var(--fs-nav); }
}

/* =====================================================================
   Menu pass, 13 November 2026: Services as an editorial panel.
   Desktop: the boxed dropdown becomes a full-width panel under the bar, aligned to the page grid;
   the three units sit as columns under a hairline rule, as on the home page. Phone: one rhythm for
   every link, the units' descriptors in the sans, the call to action resting at the foot.
   ===================================================================== */
@media (min-width: 901px) {
  .menu { position: static; }
  .nav:has(.menu__btn[aria-expanded="true"]) { background: var(--paper); box-shadow: 0 1px 0 var(--line); }

  .menu__panel {
    position: absolute; left: 0; right: 0; top: 100%; width: auto;
    /* Whole-pixel padding: the 1px rules above the units smear to grey on a fractional row */
    padding: 36px max(var(--gutter), (100% - var(--max)) / 2) 44px;
    background: var(--paper); border: 0; border-radius: 0; box-shadow: 0 1px 0 var(--line);
    display: grid; grid-template-columns: minmax(0, .7fr) repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px);
    opacity: 0; transform: translateY(-6px);
    transition: opacity .3s var(--ease-out), transform .5s var(--ease-out);
  }
  .menu__panel[hidden] { display: none; }
  .menu__panel.is-open { opacity: 1; transform: none; }
  /* A faint veil over the page while the panel is open */
  .menu__panel::after {
    content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 1px); height: 100vh;
    background: rgba(14, 27, 61, .07); pointer-events: none;
  }
  .menu__panel::before {
    content: "Services"; padding-top: 20px;
    font: italic 400 var(--fs-support)/1.3 var(--serif); color: var(--muted);
  }

  .menu__list { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: inherit; counter-reset: unit; }
  .menu__list li + li { border-top: 0; }
  .menu__list li {
    counter-increment: unit; opacity: 0; transform: translateY(6px);
    transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
  }
  .menu__panel.is-open .menu__list li { opacity: 1; transform: none; }
  .menu__panel.is-open .menu__list li:nth-child(2) { transition-delay: .05s; }
  .menu__panel.is-open .menu__list li:nth-child(3) { transition-delay: .1s; }

  .nav__links .menu__list a {
    display: block; position: relative; min-height: 0; padding: 20px 0 4px; border-top: 1px solid var(--line);
    white-space: normal; background: none;
  }
  .nav__links .menu__list a::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent);
    transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out);
  }
  .nav__links .menu__list a:hover::before, .nav__links .menu__list a:focus-visible::before,
  .nav__links .menu__list a[aria-current="page"]::before { transform: none; }
  .menu__t {
    display: block; font: 400 clamp(1.5rem, 1.9vw, 1.875rem)/1.1 var(--serif); letter-spacing: -.012em; color: var(--ink);
  }
  .menu__t::before {
    content: counter(unit, decimal-leading-zero); display: block; margin-bottom: 12px;
    font: italic 300 var(--fs-support)/1 var(--serif); color: var(--accent); font-variant-numeric: lining-nums tabular-nums;
  }
  .menu__d { display: block; margin-top: 10px; font-size: var(--fs-support); line-height: 1.45; color: var(--muted); text-wrap: balance; }
}

@media (max-width: 900px) {
  .nav__links { gap: 0; }
  .menu__list::before {
    content: "Services"; margin: 4px 0 6px;
    font: 600 var(--fs-label)/1 var(--sans); font-style: normal; letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  }
  .nav__links .menu__list a,
  .nav__links > a:not(.nav__cta) {
    display: block; padding: 12px 0 13px; border-bottom: 1px solid var(--line);
    font: 400 1.875rem/1.15 var(--serif); color: var(--ink);
  }
  .menu__t { font-size: inherit; line-height: inherit; }
  .nav__links .menu__list a[aria-current="page"] .menu__t,
  .nav__links > a[aria-current="page"]:not(.nav__cta) { color: var(--accent); }
  .menu__d { margin-top: 4px; font: 400 var(--fs-small)/1.4 var(--sans); color: var(--muted); }
  .nav__links > .menu + a { margin-top: 28px; border-top: 0; }
  .nav__links a.nav__cta { margin-top: auto; padding-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu__list li, .nav__links .menu__list a::before { transition: none; }
}

/* =====================================================================
   Menu rollover pass, 13 November 2026.
   Hover is distinct from "you are here": the current page keeps its ink underline; hover draws an accent
   line that enters from the left and leaves to the right. Pointing at one item softens the others, in the
   bar and in the Services panel. Hover effects need a real pointer; keyboard focus gets the same states.
   ===================================================================== */
@media (min-width: 901px) {
  /* Bar links: accent line in from the left, out to the right; current page stays ink */
  .nav__links > a:not(.nav__cta), .menu__btn {
    transition: background-size .5s var(--ease-out), color .35s var(--ease-out);
    background-position: 100% calc(100% - 10px);
  }
  .nav__links > a:not(.nav__cta):not([aria-current]):not(.is-current),
  .menu__btn:not(.is-current) { background-image: linear-gradient(var(--accent), var(--accent)); }
  .nav__links > a:not(.nav__cta):focus-visible, .menu__btn:focus-visible,
  .menu__btn[aria-expanded="true"] { background-position: 0 calc(100% - 10px); color: var(--ink); }
  .nav__links > a:not(.nav__cta):focus-visible { background-size: 100% 1px; }
  .menu__btn:focus-visible, .menu__btn[aria-expanded="true"] { background-size: calc(100% - 18px) 1px; }

  /* Services panel: the rule draws through, an arrow arrives after the name */
  .nav__links .menu__list a::before { transform-origin: right; }
  .nav__links .menu__list a:focus-visible::before { transform-origin: left; }
  .nav__links .menu__list a { transition: opacity .4s var(--ease-out); }
  .nav__links .menu__list a:focus-visible { outline-offset: 6px; }
  .menu__t::after {
    content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .32em; vertical-align: .06em;
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0; transform: translateX(-8px); transition: opacity .35s var(--ease-out), transform .55s var(--ease-out);
  }
  .menu__d { transition: color .35s var(--ease-out); }
  .nav__links .menu__list a:focus-visible .menu__t { color: var(--accent); }
  .nav__links .menu__list a:focus-visible .menu__t::after { opacity: 1; transform: none; }
  .nav__links .menu__list a:focus-visible .menu__d { color: var(--ink-2); }

  /* Call to action: the underline wipes out to the right and redraws from the left */
  .nav__cta:focus-visible span { animation: cta-redraw .8s var(--ease-out); color: var(--accent); }
  .nav__cta:focus-visible svg { transform: translateX(4px); }
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .nav__links > a:not(.nav__cta):hover { background-position: 0 calc(100% - 10px); background-size: 100% 1px; color: var(--ink); }
  .menu__btn:hover { background-position: 0 calc(100% - 10px); }

  /* Spotlight in the bar: the item under the pointer, or open Services, stays in ink; the rest soften */
  .nav__links:has(> a:not(.nav__cta):hover, .menu__btn:hover, .menu__btn[aria-expanded="true"]) > a:not(.nav__cta):not(:hover),
  .nav__links:has(> a:not(.nav__cta):hover) .menu__btn:not([aria-expanded="true"]) { color: var(--muted); }

  .nav__links .menu__list a:hover::before { transform-origin: left; }
  .nav__links .menu__list a:hover .menu__t { color: var(--accent); }
  .nav__links .menu__list a:hover .menu__t::after { opacity: 1; transform: none; }
  .nav__links .menu__list a:hover .menu__d { color: var(--ink-2); }
  /* Spotlight in the panel */
  .menu__list:has(a:hover) a:not(:hover) { opacity: .42; }

  .nav__cta:hover span { animation: cta-redraw .8s var(--ease-out); }
}

/* The current unit keeps its accent name and rule; it needs no arrow */
.nav__links .menu__list a[aria-current="page"] .menu__t::after { display: none; }

@keyframes cta-redraw {
  0%   { background-size: 100% 1px; background-position: 100% 100%; }
  42%  { background-size: 0 1px;    background-position: 100% 100%; }
  43%  { background-size: 0 1px;    background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__links > a:not(.nav__cta), .menu__btn, .nav__links .menu__list a, .menu__t::after, .menu__d { transition: none; }
  .nav__cta:hover span, .nav__cta:focus-visible span { animation: none; }
  .menu__t::after { transform: none; }
}

/* =====================================================================
   Large screens, 13 November 2026.
   Font sizes and the page container are in rem, so the page grows as one composition when the root size
   grows. Up to 1920px nothing changes (1rem = the reader's own default, normally 16px). Beyond it the
   root rises gently: about 1.125x at 2560px, at most 1.2x (3200px and wider). Moderated 14 November
   2026 from 1.07x at 1920 / 1.21x at 2560 / 1.35x max, which stacked on the display caps below.
   Media queries stay in px and so are not affected.
   ===================================================================== */
html { font-size: clamp(100%, 100% + (100vw - 1920px) * .003125, 120%); }
/* The wordmark and the bar grow with the text. The bar height is rounded to a whole pixel because the
   Services panel hangs from it and its 1px rules smear on a fractional row. */
.brand__logo { width: 8.5rem; height: 1.375rem; }
@media (max-width: 640px) { .brand__logo { width: 7.5rem; height: 1.25rem; } }
@supports (width: round(1px, 1px)) { :root { --nav-h: round(4.75rem, 1px); } }

/* =====================================================================
   Calls to action, 13 November 2026.
   The rounded pill with an arrow, the outlined twin, the colour wipe, the magnetic pull and the press
   shrink read as template. Now: a square-cornered ink block with no icon for the primary action; the
   secondary action is a text link with a hairline; the top bar has a small outlined button. Hover is a
   plain change of tone. Magnetic code removed from main.js; arrows removed from the markup.
   ===================================================================== */
.btn {
  border-radius: 0; padding: 0 2rem; min-height: 3.375rem; letter-spacing: .01em;
  translate: none; overflow: visible;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.btn::after { content: none; }
.btn:active { transform: none; }
.btn--primary { --bg: var(--ink); --fg: var(--paper); --bd: var(--ink); }
.btn--primary:hover, .btn--primary:focus-visible { --bg: var(--accent); --bd: var(--accent); }
.btn:not(.btn--primary):not(.btn--ghost):hover { --bg: var(--ink); --fg: var(--paper); }
.btn--sm { min-height: 2.75rem; padding: 0 1.25rem; }

/* Secondary action: a text link beside the block, not a second button */
.btn--ghost {
  --bd: transparent; padding: 0; min-height: 3.375rem;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + .8em) / 100% 1px no-repeat;
  transition: color .3s var(--ease-out), background-size .5s var(--ease-out);
}
.btn--ghost:hover, .btn--ghost:focus-visible { --bg: transparent; color: var(--accent); }
.hero__actions { align-items: center; gap: 12px 2.25rem; }

/* Top bar: a small outlined block, no divider, no arrow */
@media (min-width: 901px) {
  .nav__cta {
    min-height: 2.5rem; margin-left: clamp(4px, .8vw, 12px); padding: 0 1.125rem;
    border: 1px solid var(--ink); color: var(--ink);
    transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
  }
  .nav__cta::before { content: none; }
  .nav__cta span { background: none; padding-bottom: 0; }
  .nav__cta:hover span, .nav__cta:focus-visible span { animation: none; color: inherit; }
  /* Selector matches the bar-link hover rule in styles.css so the paper text wins */
  .nav__links a.nav__cta:hover, .nav__links a.nav__cta:focus-visible, .nav__links a.nav__cta[aria-current="page"] {
    background: var(--ink) !important; color: var(--paper);
  }
  /* Services on a unit page: its underline starts under the word, not 18px in */
  .menu__btn.is-current { background-position: 0 calc(100% - 10px); }
}
/* Phone menu: the call to action is a full-width block at the foot */
@media (max-width: 900px) {
  .nav__links a.nav__cta {
    justify-content: center; align-self: stretch; min-height: 3.375rem; padding: 0 1.5rem;
    background: var(--ink) !important; color: var(--paper); font: 500 var(--fs-body)/1 var(--sans);
  }
  .nav__links a.nav__cta span { background: none; padding-bottom: 0; }
  /* At least this much air above it when the screen is short */
  .nav__links > a:has(+ .nav__cta) { margin-bottom: 2rem; }
}
@media (max-width: 560px) {
  .hero__actions .btn--ghost { width: auto; }
}

/* =====================================================================
   Parallax photographs, 13 November 2026.
   Only the home band and each page's closing section carry a photograph; reading sections stay plain.
   The photograph is taller than its section and drifts against the scroll on the same scroll-driven
   timeline as the framed photographs (no script). Browsers without scroll timelines show it still;
   reduced motion stops it. Closing sections turn deep navy with light text over a veil.
   ===================================================================== */
.plx { position: absolute; inset: -12% 0; z-index: -1; pointer-events: none; }
.plx img { display: block; width: 100%; height: 100%; object-fit: cover; }
@supports (animation-timeline: view()) {
  .plx img { animation: plx linear both; animation-timeline: view(); }
  .band__photo.plx img { animation-name: widen, plx; animation-timeline: view(), view(); }
  @keyframes plx { from { translate: 0 -8%; } to { translate: 0 8%; } }
}

.close--image { position: relative; isolation: isolate; background: var(--deep); color: var(--on-deep); }
/* overflow: clip, not hidden: hidden makes the frame a scroll container, and view() then measures the
   photograph against its own frame, so it never moves. This also restarts the framed photographs'
   drift and the band's widening, which had been frozen for the same reason. min-width: 0 keeps the
   shrink that hidden used to give a photograph inside a grid. */
.photo, .band, .close--image { overflow: clip; }
.photo { min-width: 0; }
.close--image .plx img { filter: saturate(.7); }
.close--image .plx::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 27, 61, .88), rgba(14, 27, 61, .8) 45%, rgba(14, 27, 61, .9));
}
.close--image .close__title { color: var(--on-deep); }
.close--image .lead { color: color-mix(in srgb, var(--on-deep) 84%, var(--deep)); }
.close--image .btn--primary { --bg: var(--on-deep); --fg: var(--deep); --bd: var(--on-deep); }
.close--image .btn--primary:hover, .close--image .btn--primary:focus-visible { --bg: var(--accent); --fg: #fff; --bd: var(--accent); }
.close--image :focus-visible { outline-color: var(--on-deep); }

@media (prefers-reduced-motion: reduce) {
  .plx img { animation: none !important; translate: none !important; }
}
/* A hairline where the closing photograph meets the navy footer */
.close--image::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: color-mix(in srgb, var(--on-deep) 14%, transparent); }

/* =====================================================================
   Questions panel, 13 November 2026.
   The original platform's chatbot (blue bubble, rounded card, avatars, coloured bubbles, a persona named
   as a staff member) restated in the site's language: a square "Ask a question" tab; a full-height panel on
   paper with a hairline edge; the transcript set like a document, answers in the serif and questions in
   the sans, divided by hairlines; plainly labelled as automated. Behaviour in chat.js.
   ===================================================================== */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Launcher: shown only once chat.js has something to talk to */
.ask {
  position: fixed; z-index: 56; right: var(--gutter); bottom: calc(24px + var(--bar-h, 0px));
  display: none; align-items: center; min-height: 2.75rem; padding: 0 1.125rem;
  font: 500 var(--fs-small)/1 var(--sans); letter-spacing: .01em; color: var(--ink); text-decoration: none;
  background: var(--paper); border: 1px solid var(--ink);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), opacity .3s var(--ease-out), bottom .35s var(--ease-out);
}
.has-chat .ask { display: inline-flex; }
.ask:hover, .ask:focus-visible { background: var(--ink); color: var(--paper); }
.chat-open .ask { opacity: 0; pointer-events: none; }

/* Panel */
.chat {
  position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; width: min(30rem, 100%);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto;
  background: var(--paper); color: var(--ink); border-left: 1px solid var(--line);
  box-shadow: -40px 0 80px -60px rgba(14, 27, 61, .35);
  transform: translateX(100%); transition: transform .5s var(--ease-out);
}
.chat[hidden] { display: none; }
.chat.is-open { transform: none; }
.chat.no-anim { transition: none; }
.chat > * { padding-inline: 2rem; }

.chat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1.75rem; }
.chat__title { font: 400 1.75rem/1.1 var(--serif); letter-spacing: -.012em; max-width: none; }
.chat__close, .chat__link {
  padding: 0; border: 0; cursor: pointer; text-decoration: none;
  font: 400 var(--fs-small)/1.4 var(--sans); color: var(--ink-2);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: color .2s, background-size .4s var(--ease-out);
}
.chat__close:hover, .chat__link:hover { color: var(--accent); }
.chat__note {
  margin-top: .75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line);
  font-size: var(--fs-small); line-height: 1.5; color: var(--muted);
}
.chat__demo { display: none; font: italic 400 var(--fs-small)/1.5 var(--serif); color: var(--accent); }
.is-demo .chat__demo { display: inline; }

/* Transcript */
.chat__log { overflow-y: auto; overscroll-behavior: contain; padding-block: .5rem 1.25rem; scrollbar-width: thin; }
.chat__lede { margin: 1.25rem 0 .75rem; font: italic 400 var(--fs-support)/1.4 var(--serif); color: var(--muted); }
.chat__prompts { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.chat__prompts li { border-top: 1px solid var(--line); }
.chat__prompts button {
  position: relative; display: block; width: 100%; padding: .875rem 0 .875rem 1.375rem; border: 0; background: none;
  text-align: left; cursor: pointer; font: 400 var(--fs-body)/1.35 var(--serif); color: var(--ink);
  transition: color .3s var(--ease-out), padding-left .5s var(--ease-out);
}
.chat__prompts button::before { content: ""; position: absolute; left: 0; top: calc(.875rem + .65em); width: 10px; height: 1px; background: var(--accent); }
.chat__prompts button:hover, .chat__prompts button:focus-visible { color: var(--accent); padding-left: 1.625rem; }

.chat__turn { padding: 1.25rem 0; }
.chat__turn + .chat__turn { border-top: 1px solid var(--line); }
.chat__who { margin-bottom: .5rem; font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.chat__turn--assistant .chat__who { color: var(--accent); }
.chat__text { overflow-wrap: anywhere; }
.chat__text p + p, .chat__text ul + p, .chat__text p + ul { margin-top: .75em; }
.chat__turn--user .chat__text { font: 400 var(--fs-body)/1.5 var(--sans); color: var(--ink-2); }
.chat__turn--assistant .chat__text { font: 400 var(--fs-body)/1.55 var(--serif); color: var(--ink); }
.chat__text a { color: var(--accent); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.chat__text a:hover { background-size: 0 1px; background-position: 100% 100%; transition: background-size .4s var(--ease-out); }
.chat__text strong { font-weight: 600; }
.chat__text ul { list-style: none; margin: 0; padding: 0; }
.chat__text li { position: relative; padding-left: 1.375rem; }
.chat__text li + li { margin-top: .5em; }
.chat__text li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: var(--accent); }

/* Waiting: a hairline draws across, no bouncing dots */
.chat__pending { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.chat__line { position: relative; display: block; height: 1px; overflow: clip; background: var(--line); }
.chat__line::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--accent); animation: chat-draw 1.4s var(--ease-io, ease-in-out) infinite; }
@keyframes chat-draw { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.chat__pending em { display: block; margin-top: .625rem; font: italic 400 var(--fs-small)/1 var(--serif); color: var(--muted); }

/* Composer */
.chat__form { display: flex; align-items: flex-end; gap: .75rem; padding-block: .875rem; border-top: 1px solid var(--line); transition: border-color .3s; }
.chat__form:focus-within { border-top-color: var(--ink); }
.chat__form textarea {
  flex: 1; min-height: 2.75rem; max-height: 160px; padding: .625rem 0; resize: none; border: 0; background: none;
  font: 400 var(--fs-body)/1.5 var(--sans); color: var(--ink); outline: none;
}
.chat__form textarea::placeholder { color: var(--muted); opacity: 1; }
.chat__form .btn { flex: none; }
.chat__form .btn:disabled { opacity: .4; cursor: default; }

.chat__email { padding-bottom: .875rem; }
.chat__email label { display: block; font-size: var(--fs-small); color: var(--muted); }
.chat__email-row { display: flex; align-items: center; gap: .75rem; margin-top: .375rem; }
.chat__email input {
  flex: 1; min-width: 0; min-height: 2.75rem; padding: .5rem 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  background: none; font: 400 var(--fs-support)/1.4 var(--sans); color: var(--ink); outline: none;
}
.chat__email input:focus { border-bottom-color: var(--accent); }
.chat__status { margin-top: .375rem; font-size: var(--fs-small); color: var(--accent); min-height: 1em; }

.chat__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; padding-top: .25rem; }
.chat__foot .chat__link { display: inline-flex; min-height: 2.75rem; align-items: center; background-position: 0 calc(50% + .8em); }
.chat__foot [hidden] { display: none; }
.chat__person { margin-left: auto; }
.chat__fine { padding-bottom: 1.25rem; font-size: var(--fs-small); color: var(--muted); }
.chat__fine a { color: inherit; }

/* Where the margin is too narrow for both, the Top mark rises above the launcher */
@media (max-width: 1180px) {
  .has-chat .totop { bottom: calc(24px + 2.75rem + 16px + var(--bar-h, 0px)); }
}
@media (max-width: 640px) {
  .ask { bottom: calc(16px + var(--bar-h, 0px)); }
  .chat { border-left: 0; box-shadow: none; }
  .chat > * { padding-inline: 20px; }
  .chat__head { padding-top: 1.25rem; }
  html.chat-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .chat, .ask, .chat__prompts button { transition: none; }
  .chat__line::after { animation: none; width: 100%; opacity: .5; }
}

/* ---------- Start with: curated routes under each home-page situation ---------- */
.objective { display: flex; flex-direction: column; }
.objective__subs { margin-bottom: 26px; }
.start { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.start__label { font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.start__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.start__list a { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.start__kind { font: 400 var(--fs-small)/1.2 var(--sans); color: var(--muted); }
.start__t {
  justify-self: start; font: 400 var(--fs-support)/1.35 var(--serif);
  background: linear-gradient(var(--line), var(--line)) 0 100% / 100% 1px no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .start__t { background-image: linear-gradient(var(--line), var(--line)), linear-gradient(var(--accent), var(--accent)); background-size: 100% 1px, 0 1px; background-position: 0 100%, 100% 100%; background-repeat: no-repeat; transition: background-size .4s var(--ease-out); }
  .start__list a:hover .start__t { background-size: 100% 1px, 100% 1px; background-position: 0 100%, 0 100%; }
}
.start__list a:focus-visible .start__t { background-image: linear-gradient(var(--accent), var(--accent)); }

/* ---------- Glossary terms in running text, with their definition on hover, focus or tap ---------- */
a.term {
  color: inherit; text-decoration: underline dotted; text-decoration-color: var(--accent);
  text-decoration-thickness: 1px; text-underline-offset: .22em; background: none;
}
@media (hover: hover) and (pointer: fine) { a.term:hover { color: var(--accent); } }
a.term:focus-visible { color: var(--accent); outline: 1px solid var(--accent); outline-offset: 2px; }
.term-tip {
  position: absolute; z-index: 58; max-width: min(22rem, calc(100vw - 32px));
  padding: 14px 16px 15px; background: var(--deep); color: var(--on-deep);
  font: 400 var(--fs-small)/1.5 var(--sans); box-shadow: 0 10px 30px rgba(14, 27, 61, .18);
  opacity: 0; transform: translateY(4px); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); pointer-events: none;
}
.term-tip.is-open { opacity: 1; transform: none; }
.term-tip__k { display: block; margin-bottom: 6px; font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--on-deep-muted); }
.term-tip__more { display: block; margin-top: 8px; color: var(--on-deep-muted); }
@media (prefers-reduced-motion: reduce) { .term-tip { transition: none; transform: none; } }
.gloss, .gloss__list > div { scroll-margin-top: calc(var(--nav-h) + 24px); }
.gloss__list > div:target { background: var(--surface); box-shadow: -12px 0 0 var(--surface), 12px 0 0 var(--surface); }

/* ---------- Questions: the site sections an answer was drawn from ---------- */
.chat__src { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.chat__src-k { font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.chat__src ul { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .4rem; }
.chat__src a { font: 400 var(--fs-small)/1.4 var(--sans); color: var(--ink-2); text-decoration: none; background: linear-gradient(var(--line), var(--line)) 0 100% / 100% 1px no-repeat; }
.chat__src a:hover, .chat__src a:focus-visible { color: var(--accent); }
.chat__src em { font-style: normal; color: var(--muted); }

/* ---------- Tool pages: document guide, stress test, worked example ---------- */
.tool-intro { max-width: 46rem; margin-bottom: clamp(40px, 7vh, 72px); }
.tool-intro .close__title { max-width: 16ch; }
.tool-intro .lead { margin-top: 24px; max-width: 52ch; }
.tool-k, .dg-choices__k, .dg-panel__for, .st-chart__k, .st-notes__k, .paper__note-k, .paper__meta {
  font: 600 var(--fs-label)/1.2 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}

/* Document guide */
.docguide { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.docguide:not(.is-live) { grid-template-columns: 1fr; }
.docguide:not(.is-live) .dg-choices { display: none; }
.docguide:not(.is-live) .dg-panel + .dg-panel { margin-top: 64px; }
.dg-choices { position: sticky; top: calc(var(--nav-h) + 24px); margin: 0; padding: 0; border: 0; min-width: 0; }
.dg-choices ul { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.dg-choice { position: relative; display: flex; align-items: center; min-height: 52px; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--line); font: 400 var(--fs-support)/1.35 var(--serif); color: var(--ink-2); cursor: pointer; transition: color .2s; }
.dg-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dg-choice::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: var(--line); transition: background-color .2s, width .3s var(--ease-out); }
.dg-choice:has(input:checked) { color: var(--ink); }
.dg-choice:has(input:checked)::before { background: var(--ink); width: 14px; }
.dg-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .dg-choice:hover { color: var(--ink); } .dg-choice:hover::before { background: var(--accent); } }
.dg-panel { padding-top: 22px; border-top: 1px solid var(--ink); }
.dg-panel__doc { margin-top: 14px; font: 400 clamp(1.625rem, 2.6vw, 2.25rem)/1.15 var(--serif); letter-spacing: -.012em; max-width: 24ch; }
.dg-panel__doc:focus { outline: none; }
.dg-panel__weight { margin-top: 14px; font-size: var(--fs-body); color: var(--ink-2); max-width: 52ch; }
.dg-panel__body { margin: 28px 0 0; display: grid; gap: 18px; }
.dg-panel__body > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.dg-panel__body dt { font-weight: 600; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.dg-panel__body dd { margin: 0; color: var(--ink-2); font-size: var(--fs-body); }
.dg-panel__body .ticks { margin-top: 0; }
.dg-panel__more { margin-top: 18px; }

/* Stress test */
.stress { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.stress__controls { display: grid; gap: 26px; position: sticky; top: calc(var(--nav-h) + 24px); }
.st-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.st-preset { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); background: none; font: 500 var(--fs-small)/1 var(--sans); color: var(--ink-2); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.st-preset[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .st-preset:hover { border-color: var(--ink-2); } }
.st-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-input { padding-top: 16px; border-top: 1px solid var(--line); }
.st-input__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.st-input__row label { font: 500 var(--fs-support)/1.3 var(--sans); color: var(--ink); }
.st-input__row output { font: 400 var(--fs-note)/1 var(--serif); color: var(--ink); white-space: nowrap; }
.st-input input[type="range"] { width: 100%; margin: 14px 0 6px; accent-color: var(--accent); min-height: 24px; }
.st-input__help { font-size: var(--fs-small); color: var(--muted); }
.st-figures { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
@media (max-width: 600px) { .st-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-figures > div { padding: 16px 16px 18px 0; border-bottom: 1px solid var(--line); }
.st-figures dt { font-size: var(--fs-small); color: var(--muted); }
.st-figures dd { margin: 8px 0 0; font: 400 clamp(1.375rem, 2vw, 1.75rem)/1.1 var(--serif); color: var(--ink); }
.stress.is-breach [data-out="below"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.st-chart { margin: 36px 0 0; position: relative; }
.st-chart svg { display: block; width: 100%; height: auto; margin-top: 14px; overflow: visible; }
.st-chart .grid { stroke: var(--line); stroke-width: 1; }
.st-chart .tick { fill: var(--muted); font: 400 11px var(--sans); }
.st-chart .val { fill: var(--ink-2); font: 500 11px var(--sans); }
.st-chart .ref { stroke: var(--ink); stroke-width: 1; }
.st-chart .ref-label { fill: var(--ink); font: 500 11px var(--sans); }
.st-chart__tip { margin-top: 10px; font-size: var(--fs-small); color: var(--ink-2); min-height: 1.4em; }
.st-chart__key { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-small); color: var(--muted); }
.st-key { display: inline-block; width: 12px; height: 12px; }
.st-key--ok { background: var(--accent); }
.st-key--low { background: repeating-linear-gradient(45deg, var(--accent) 0 2px, var(--paper) 2px 5px); box-shadow: inset 0 0 0 1px var(--accent); margin-left: 8px; }
.st-table { margin-top: 18px; font-size: var(--fs-small); }
.st-table summary { cursor: pointer; color: var(--ink-2); }
.st-table table { margin-top: 12px; width: 100%; border-collapse: collapse; }
.st-table th, .st-table td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.st-table thead th { color: var(--muted); }
.st-notes { margin-top: clamp(56px, 9vh, 96px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 96px); padding-top: 24px; border-top: 1px solid var(--ink); }
.st-notes section p { margin-top: 12px; color: var(--ink-2); max-width: 60ch; }
.st-notes .ticks { margin-top: 12px; }
.st-notes > .minor-note { grid-column: 1 / -1; margin-top: 0; }

/* Worked example: a document on the page, with notes alongside */
.paper { max-width: 70rem; }
.paper__head { padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px) 24px; background: #fff; border: 1px solid var(--line); border-bottom: 0; }
.paper__title { margin-top: 12px; font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.2 var(--serif); letter-spacing: -.01em; max-width: 30ch; }
.paper__from { margin-top: 8px; color: var(--muted); font-size: var(--fs-small); }
.paper__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 19rem); }
.paper__sec { padding: 22px clamp(20px, 3vw, 40px) 26px; background: #fff; border: 1px solid var(--line); border-top-color: #eceff4; border-bottom: 0; }
.paper__row:last-child .paper__sec { border-bottom: 1px solid var(--line); }
.paper__sec h3 { display: flex; gap: 12px; align-items: baseline; font: 600 var(--fs-support)/1.3 var(--sans); color: var(--ink); }
.paper__no { font: 400 var(--fs-note)/1 var(--serif); color: var(--accent); }
.paper__sec p, .paper__sec li { margin-top: 10px; font: 400 var(--fs-body)/1.6 var(--serif); color: var(--ink); max-width: 62ch; }
.paper__sec .ticks li { margin-top: 0; }
.paper__options { margin: 6px 0 0; padding-left: 1.4em; }
.paper__options strong { font-weight: 600; }
.paper__table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: var(--fs-small); }
.paper__table th, .paper__table td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); }
.paper__table thead th { font-weight: 500; color: var(--muted); }
.paper__note { padding: 22px 0 22px clamp(20px, 2.4vw, 32px); border-left: 1px solid var(--accent); margin-left: clamp(16px, 2vw, 28px); align-self: start; }
.paper__note p:last-child { margin-top: 8px; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.55; }
.ev { display: inline-block; padding: 2px 6px 1px; border: 1px solid var(--muted); font: 600 .75rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); vertical-align: .12em; white-space: nowrap; }

/* Contact: guided briefing */
.field--group { margin: 0; padding: 0; border: 0; min-width: 0; }
.field--group legend { padding: 0; margin-bottom: 8px; font-weight: 500; color: var(--ink-2); }
.field__opt { margin-left: 6px; font-weight: 400; color: var(--muted); }
.field__hint { font-size: var(--fs-small); color: var(--muted); max-width: 60ch; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.checks label { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: var(--fs-support); color: var(--ink-2); cursor: pointer; }
.checks input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); flex: none; }

/* Readiness: keep answers, date, actions */
.rq-keep { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--fs-support); color: var(--ink-2); cursor: pointer; }
.rq-keep input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.readout__date { margin-top: 10px; font-size: var(--fs-small); color: var(--muted); }
.readout__read { margin-top: 18px; }
.readout .hero__actions { align-items: center; gap: 12px 28px; }
.readout button.link { background-color: transparent; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--ink); cursor: pointer; }

@media (max-width: 900px) {
  .docguide, .stress, .st-notes { grid-template-columns: 1fr; }
  .dg-choices, .stress__controls { position: static; }
  .dg-panel__body > div { grid-template-columns: 1fr; gap: 6px; }
  .paper__row { grid-template-columns: 1fr; }
  .paper__note { margin: 0; padding: 14px 20px 20px; border-left: 0; border-right: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--surface); }
  .checks { grid-template-columns: 1fr; }
}

@media print {
  .nav, footer, .totop, .ask, .chat, .skip, .readiness, .readout .hero__actions, .readout .minor-note, .close--short { display: none !important; }
  .readout { display: block !important; }
  .contact { padding-top: 0; }
  body { background: #fff; }
}

/* =====================================================================
   Large-screen type moderation, 14 November 2026.
   Display sizes reached their vw caps by about 1600px and were then multiplied by the root growth, so
   headings ran to 86-103px at 1920px and 97-116px at 2560px, crowding the measure and pushing the home
   headline to four lines. Caps lowered by roughly 10-15%; phone and tablet sizes are unchanged.
   At 1600px / 2560px: home headline 72 / 81px, page headline 62 / 70, section heading 52 / 59,
   band line 80 / 90, closing headline 72 / 81, lede 19 / 21. Body text keeps its 18.5px desktop size.
   ===================================================================== */
h2 { font-size: clamp(2.125rem, 3.6vw, 3.25rem); }
.hero:not(.hero--page) .hero__title { font-size: clamp(2.5rem, 4.6vw, 4.5rem); }
.hero--page .hero__title { font-size: clamp(2.375rem, 4vw, 3.875rem); }
.band__line { font-size: clamp(2.5rem, 5.2vw, 5rem); }
.close__title { font-size: clamp(2.75rem, 4.8vw, 4.5rem); }
.hero__lede { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }

/* =====================================================================
   Responsive content pass, 14 November 2026.
   A phone reader scans for the decision and the next step; detail that the unit pages already carry,
   and second photographs that only balance a desktop column, cost screens without adding meaning.
   Each page keeps its hero photograph and its closing image. Hidden lazy images are not downloaded.
   ===================================================================== */

/* Card photographs hold their 3:2 frame at every size. A portrait source (the coast) was stretching
   its frame, so one card stood taller than its neighbours. */
.card__photo img { position: absolute; inset: 0; }

@media (max-width: 640px) {
  /* Home: the unit pages list each unit's services; the card keeps its sentence and its link */
  .unit__list { display: none; }
  /* Home: the four situations keep their title, sentence and next step; the deliverables are on
     the unit pages */
  .objective__subs { display: none; }
  /* Home insights: two essays, then "All insights" */
  #insights .card:nth-child(n+3) { display: none; }
  /* Second photographs beside a text column */
  .sectors__photos, .services__photo, .approach__photo, .split__photo { display: none; }
  /* The margin rule has no margin to sit in at this width and crosses the text */
  .totop { display: none; }
}

/* Tablet: essays in two columns rather than a stack of full-width photographs; the home page shows
   two, matching the pair. Unit lists and the second photographs stay: there is room for them here. */
@media (min-width: 641px) and (max-width: 900px) {
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #insights .card:nth-child(n+3) { display: none; }
}

/* Phone launcher, 14 November 2026: a compact "Ask" that steps aside with the bar while the reader
   scrolls down, and returns on scrolling up or at the foot of the page. Desktop is unchanged. */
@media (max-width: 640px) {
  .ask { min-height: 2.75rem; padding: 0 1rem; transition: transform .45s var(--ease-out), opacity .3s var(--ease-out), background-color .3s var(--ease-out), color .3s var(--ease-out), bottom .35s var(--ease-out); }
  .ask__more { display: none; }
  html:has(.nav.is-hidden):not(.is-at-end) .ask { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
  html:has(.nav.is-hidden):not(.is-at-end) .ask:focus-visible { transform: none; opacity: 1; }
}

/* Capability provenance, 14 November 2026: where a strength comes from, stated after what it gives the client */
.terms__from { margin-top: 12px; font: italic 400 var(--fs-small)/1.5 var(--serif); color: var(--muted); }

/* Contact: the note shown once the visitor's mail application has opened */
.form__sent { margin-top: 1.25rem; padding: 1.25rem 1.375rem; border-left: 2px solid var(--accent); background: var(--surface); }
.form__sent p { margin: 0; color: var(--ink-2); }
.form__sent p + p { margin-top: 0.625rem; }
.form__sent-title { font-family: var(--serif); font-size: 1.375rem; line-height: 1.25; color: var(--ink) !important; }
.form__sent-alt { font-size: 0.875rem; color: var(--muted) !important; }