/* Strature — the site's design system (rebuilt 30 Sep 2026, R-169: the brief's house identity in
   McKinsey's page grammar). See src/assets/COMPONENTS.md for the kit and copy-paste snippets.

   The seven tokens of STRATURE_IDENTITY.md, plus navy (the cover ground) and coral (vermilion's
   dark-ground counterpart, used ONLY on navy). Cover K's gold is not a token and is not used here.
   Light pages with navy fields; never a dark theme. Phone first: 375px, 16px gutter, header <= 88px.
   No shadows, no rounded corners, no inline styles (the CSP forbids them). */

/* ---------- fonts: Newsreader self-hosted (Latin subset, from the Google Fonts API, v26) ---------- */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("/assets/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;
  src:url("/assets/fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens ---------- */
:root{
  --paper:#FBF9F5; --tint:#EFEDE7; --hair:#D5D2CA; --graphite:#5C6670; --ink:#12181D;
  --verm:#A8321C; --knockout:#FFFFFF;
  --navy:#132338; --coral:#F0714E;
  --white:var(--knockout);
  --serif:"Newsreader","Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --g:16px; --max:1180px; --measure:66ch; --mh:56px;
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;background:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.55;overflow-x:hidden;font-feature-settings:"kern","liga";font-variation-settings:"opsz" 16}
h1,h2,h3,h4,p,ol,ul,figure,dl,dd,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* QA B1 (WCAG 2.4.7, 1.4.11): on every navy field the ring is white (ink on navy is 1.1:1); the masthead does the same
   under .mh. verify_extra/wp3.py focus_on_navy measures each ring against what lies behind it. */
.on-navy :focus-visible,.plate.navy :focus-visible,footer.ft :focus-visible{outline-color:var(--white)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g)}
.skip{position:absolute;left:var(--g);top:-60px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:50;font-family:var(--sans);font-size:14px}
.skip:focus{top:8px}
.skip:focus-visible{outline-color:var(--white)}  /* it opens over the navy masthead (QA B1) */
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}

/* ---------- the type scale (01_visual_audit s5 Global) ----------
   H1 56/60 Newsreader 600 (34px on the phone) - H2 32 Newsreader 500 - card title 20 Newsreader 600 -
   body 17 Newsreader 400 at 66ch - label 11 Plex Sans 600 caps +0.15em - every figure Plex Mono.
   Body in ink; graphite for apparatus only. H1 italics in ink. */
.h1,.hero h1,.hero-cap h1,.ph h1,.nf h1{font-family:var(--serif);font-weight:600;font-size:34px;line-height:1.06;letter-spacing:-.021em;font-variation-settings:"opsz" 72;text-wrap:balance;max-width:20ch}
.h1 em,.hero h1 em,.hero-cap h1 em,.ph h1 em,.nf h1 em{font-style:italic;font-weight:400;color:inherit}
.h2,.sec h2,.opener h2{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.15;letter-spacing:-.012em;font-variation-settings:"opsz" 48;text-wrap:balance;max-width:26ch}
.h3,.card h3,.pillar h3,.tile h3{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.25;letter-spacing:-.006em;font-variation-settings:"opsz" 24;text-wrap:pretty}
.body,.prose,.standfirst{max-width:var(--measure);text-wrap:pretty}
.standfirst{font-size:19px;line-height:1.45}
.lbl,.ovl{display:block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;line-height:1.2;color:var(--graphite)}
.lbl .n,.ovl .n{font-family:var(--mono);font-weight:500;margin-right:8px;letter-spacing:.06em}
.num,.fig-v{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums}
/* QA N2: an ID such as F-0154, a date or a figure never breaks at its hyphen or space; the one long .num (the RBC tallies) may wrap */
.num{white-space:nowrap}
.rec .im .num{white-space:normal}
.ui{font-family:var(--sans)}
.fine,.src{font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--graphite);max-width:70ch}
.src a,.fine a{color:var(--graphite)}
.src a:hover,.fine a:hover{color:var(--ink)}
.micro{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--graphite)}
@media (min-width:900px){
  .h1,.hero h1,.hero-cap h1,.ph h1,.nf h1{font-size:56px;line-height:60px}
  .h2,.sec h2,.opener h2{font-size:32px}
  .standfirst{font-size:21px;line-height:1.45}
}

/* ---------- the rail: 1px hair full height, a 6px ink segment astride it; vermilion only beside a decision ---------- */
.rail{position:relative;padding-left:24px}
.rail::before{content:"";position:absolute;left:3px;top:0;bottom:0;width:1px;background:var(--hair)}
.rail::after{content:"";position:absolute;left:0;top:0;width:6px;height:64px;background:var(--ink)}
.rail.decision::after{background:var(--verm)}
.rail-x{position:relative;padding-left:24px}
.rail-x::before{content:"";position:absolute;left:3px;top:0;bottom:0;width:1px;background:var(--hair)}
.rail-x::after{content:"";position:absolute;left:0;top:0;width:6px;height:40px;background:var(--ink)}
.on-navy .rail::before,.on-navy .rail-x::before{background:rgba(251,249,245,.28)}
.on-navy .rail::after,.on-navy .rail-x::after{background:var(--paper)}

/* ---------- masthead: navy, the reversed rail mark, insight-led nav, one CTA ---------- */
.mh{position:sticky;top:0;z-index:30;background:var(--navy);color:var(--white)}
.mh .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--mh)}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--white);height:var(--mh);flex:0 0 auto}
.brand svg{display:block;height:36px;width:auto}
.mh-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.mh :focus-visible{outline-color:var(--white)}
.mh-cta{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--white);text-decoration:none;border:1px solid rgba(255,255,255,.6);padding:0 12px;height:34px;display:inline-flex;align-items:center;white-space:nowrap}
.mh-cta:hover,.mh-cta[aria-current="page"]{background:var(--white);color:var(--navy);border-color:var(--white)}
.menu-btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px;background:transparent;border:1px solid transparent;color:var(--white);font-family:var(--sans);font-size:13px;font-weight:600}
.menu-btn .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.menu-btn .bars{display:block;width:18px;height:2px;background:currentColor;position:relative}
.menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.menu-btn .bars::before{top:-6px}
.menu-btn .bars::after{top:6px}
.menu-btn[aria-expanded="true"]{border-color:rgba(255,255,255,.6)}
.nav{display:none;font-family:var(--sans);font-size:14px;letter-spacing:.01em}
.nav[data-open="true"]{display:block;position:absolute;left:0;right:0;top:var(--mh);background:var(--navy);border-top:1px solid rgba(255,255,255,.18);padding:8px var(--g) 18px;max-height:calc(100vh - var(--mh));overflow:auto}
/* QA S5: the open panel fills the screen down to a 1px lower edge, so the navy hero below never reads as more menu */
.nav[data-open="true"]{min-height:calc(100vh - var(--mh));min-height:calc(100dvh - var(--mh));max-height:calc(100dvh - var(--mh));border-bottom:1px solid rgba(255,255,255,.35);overscroll-behavior:contain}
.nav ul{display:grid}
.nav > ul > li{border-bottom:1px solid rgba(255,255,255,.14)}
.nav a{display:block;color:var(--white);text-decoration:none;padding:12px 0;opacity:.92}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
/* the current page: a 3px inset bar hung in the gutter (margin -10px, padding 10px), so its text stays in line (QA N8) */
.nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--white);padding-left:10px;margin-left:-10px}
.nav .grp{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;color:var(--white);padding:12px 0;font:inherit;font-weight:600;text-align:left}
.nav .grp::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:6px;transition:transform .12s}
.nav .grp[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}
.nav .sub{display:none;padding:0 0 8px 12px}
.nav .grp[aria-expanded="true"] + .sub{display:grid}
.nav .sub a{padding:8px 0;font-size:13.5px}
.nav .sub a[aria-current="page"]{padding-left:10px;margin-left:-10px}
/* final QA item 7: the open phone menu ends on the one CTA, a knockout button, so the panel's lower navy is not empty */
.nav .nav-cta{margin-top:28px}
.nav .nav-cta a,.nav .nav-cta a[aria-current="page"]{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin:0;padding:0 16px;background:var(--paper);color:var(--navy);font-size:15px;font-weight:600;opacity:1;box-shadow:none}
.nav .nav-cta a:focus-visible{outline:2px solid var(--white);outline-offset:3px}
/* the masthead CTA steps back on the phone while the hero's own contact CTA is on screen (site.js sets .dup), so the
   first screen does not say "Get in touch" twice; it keeps its place, so nothing in the masthead moves */
.mh-cta{transition:opacity .15s}
/* the same while the phone menu is open: the panel ends on its own CTA */
@media (max-width:899px){.mh-cta.dup,.mh:has(.nav[data-open="true"]) .mh-cta{visibility:hidden;opacity:0}}
@media (min-width:900px){
  :root{--mh:64px}
  .brand svg{height:46px}
  .mh-right{gap:10px}
  .menu-btn{display:none}
  .nav .nav-cta{display:none}
  .nav,.nav[data-open="true"]{display:block;position:static;background:none;border:0;padding:0;min-height:0;max-height:none;overflow:visible}
  .nav > ul{display:flex;gap:26px;align-items:center}
  .nav > ul > li{border:0;position:relative}
  .nav a{padding:6px 0;border-bottom:1px solid transparent}
  .nav a:hover{border-bottom-color:rgba(255,255,255,.6)}
  .nav a[aria-current="page"]{box-shadow:none;padding-left:0;margin-left:0;border-bottom-color:var(--white)}
  .nav .grp{padding:6px 0;width:auto;gap:6px;font-weight:400;border-bottom:1px solid transparent}
  .nav .grp::after{margin:0 0 2px}
  /* the dropdown (WP3 s14): a paper panel with ink type, so the navy hero never shows through it; the phone accordion stays navy */
  .nav .sub{position:absolute;left:-16px;top:calc(100% + 8px);background:var(--paper);color:var(--ink);min-width:260px;padding:8px 16px 10px;border:1px solid var(--hair);box-shadow:none}
  .nav .sub a{padding:8px 0;border-bottom:0;white-space:nowrap;color:var(--ink);opacity:1}
  .nav .sub .sep{border-top:1px solid var(--hair);margin-top:6px;padding-top:6px}
  .nav .sub a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--ink);padding-left:10px;margin-left:-10px}
  .nav .sub a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
  .nav .sub :focus-visible{outline-color:var(--ink)}
  .nav li:has(.sub a[aria-current="page"]) > .grp{border-bottom-color:var(--white)}
}

/* ---------- buttons: .btn is the ONE vermilion primary per view; .ghost is ink-outlined; .knock is for navy ----------
   THE CTA RULE (WP3 s14; verify_extra/wp3.py cta_rule): .btn (vermilion) only on paper; inside .on-navy only .btn.knock or
   .btn.knock-ghost; and no .knock outside .on-navy. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 18px;font:600 14.5px/1 var(--sans);letter-spacing:.01em;text-decoration:none;border:1px solid var(--verm);background:var(--verm);color:var(--white);cursor:pointer;border-radius:0}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--white);text-decoration:none}
.btn .ar{font-family:var(--serif);font-size:18px;line-height:1;transition:transform .16s}
.btn:hover .ar{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.btn .ar,.nav .grp::after{transition:none}}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--white)}
.btn.knock{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn.knock:hover{background:var(--navy);color:var(--white);border-color:var(--white)}
.btn.knock-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.7)}
.btn.knock-ghost:hover{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.6;cursor:default}
.tl{font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}
.tl:hover{color:var(--graphite);border-bottom-color:currentColor}
.on-navy .tl{color:var(--white);border-bottom-color:rgba(255,255,255,.6)}
.on-navy .tl:hover{color:var(--white);border-bottom-color:var(--white)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
/* tap targets (WP3 s14; QA N3 extends it to every text link in main): a .tl reaches 44px; the rule under it becomes the
   text's own underline */
.ctas .tl,.icard-foot a,.foot .tl,main .tl{display:inline-flex;align-items:center;gap:6px;min-height:44px;border-bottom:0;padding-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.on-navy .ctas .tl,.on-navy .foot .tl,main .on-navy .tl{text-decoration-color:rgba(255,255,255,.6)}

/* ---------- sections ---------- */
.sec{padding:32px 0}
.sec + .sec{border-top:1px solid var(--hair)}
.sec.tinted{background:var(--tint);border-top:0}
.opener{display:grid;gap:12px;margin-bottom:32px}
.opener p{font-size:17px;max-width:var(--measure);text-wrap:pretty}
.prose p + p,.prose ul + p,.prose p + ul{margin-top:16px}
.prose ul{padding-left:18px;list-style:disc}
.prose li + li{margin-top:6px}
.prose h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.25;margin:32px 0 12px}
.prose .fine{margin-top:12px}
.two{display:grid;gap:24px}
@media (min-width:900px){
  .sec{padding:96px 0}
  .two{grid-template-columns:4fr 8fr;gap:64px;align-items:start}
  .two .opener{margin-bottom:0}
}

/* ---------- on-navy fields ---------- */
.on-navy{background:var(--navy);color:var(--white)}
.on-navy .lbl,.on-navy .ovl{color:rgba(251,249,245,.78)}
.on-navy .fine,.on-navy .src,.on-navy .micro{color:rgba(251,249,245,.78)}
.on-navy a{color:var(--white)}
.on-navy .fine a,.on-navy .src a{color:rgba(251,249,245,.9)}

/* ---------- 1 - the navy hero (home): flytitle, claim, standfirst, CTAs, one drawn plate ---------- */
.hero{padding:32px 0 40px}
.hero .lbl{margin-bottom:16px}
.hero .standfirst{margin-top:16px;max-width:44ch;color:rgba(251,249,245,.92)}
.hero .ctas{margin-top:24px}
.hero .plate,.hero .counts{margin-top:32px}
@media (min-width:900px){
  .hero{padding:80px 0 88px}
  .hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:start}
  .hero .lbl{margin-bottom:24px}
  .hero .standfirst{margin-top:24px}
  .hero .ctas{margin-top:32px}
  .hero .plate{margin-top:0}
  .hero .counts{margin-top:12px}
  .hero .counts .c .v{font-size:34px}
}

/* QA N5, the owner's phone standard: at 375x667 the first exhibit's headline is whole on the first screen (home, QB21).
   Phone only: tighter hero rhythm, nothing removed. verify.py enforces it. */
@media (max-width:599px){
  .hero{padding-top:24px}
  .hero .lbl{margin-bottom:12px}
  .hero .ctas{margin-top:20px}
  .hero .plate{margin-top:24px}
  .hero .plate .p-id,.brief-hero + .sec .plate .p-id{letter-spacing:.1em}
  .hero-cap.brief-hero{padding:24px 0}
  .hero-cap.brief-hero .imprint{margin-bottom:12px}
  .brief-hero + .sec{padding-top:24px}
}

/* ---------- 2 - the capability hero (interior pages, light): claim + one line + Get in touch ---------- */
.hero-cap,.ph{padding:32px 0 40px;border-bottom:1px solid var(--hair)}
.hero-cap .hero-grid .plate{margin-top:32px}
.hero-cap .lbl,.ph .lbl,.ph .ovl{margin-bottom:12px}
.hero-cap .standfirst,.ph .lede{margin-top:16px;max-width:52ch}
.ph .lede{font-size:19px;line-height:1.45}
.hero-cap .ctas,.ph .ctas{margin-top:24px}
@media (min-width:900px){
  .hero-cap,.ph{padding:64px 0 64px}
  .hero-cap .wrap.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:start}
  .hero-cap .hero-grid .plate{margin-top:0}
  .hero-cap .standfirst,.ph .lede{margin-top:24px}
  .hero-cap .ctas,.ph .ctas{margin-top:32px}
}

/* ---------- 2b - the interior hero (WP3 s11; contract 6 of design_specs/00_INDEX.md) ----------
   <section class="hero-cap ih on-navy"> > <div class="wrap hero-grid"> > <div class="rail">copy</div> + one
   <figure class="plate navy ih-plate"> or <div class="ih-art">. The art is moved from its page, never duplicated. */
.hero-cap.ih{border-bottom:0}                      /* .on-navy supplies the field and text colours */
.hero-cap.ih .standfirst{color:rgba(251,249,245,.92)}
.ih .ih-meta{margin-top:12px;font:500 13px/1.45 var(--sans);color:rgba(251,249,245,.8)}
.hero-cap.ih .ih-plate,.hero-cap.ih .ih-art{margin-top:24px}
.hero-cap.ih .hero-grid > *{min-width:0}
@media (min-width:900px){
  .hero-cap.ih .wrap.hero-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:center}
  .hero-cap.ih .ih-plate,.hero-cap.ih .ih-art{margin-top:0}
}
@media (max-width:599px){
  .hero-cap.ih{padding:24px 0 32px}
  .hero-cap.ih .ctas{margin-top:20px}
  .hero-cap.ih .ih-plate,.hero-cap.ih .ih-art{margin-top:20px}
}
.on-navy .diag text{fill:var(--white)} .on-navy .diag .t-lbl{fill:rgba(251,249,245,.78)}
.on-navy .diag .ln,.on-navy .diag .dash{stroke:var(--paper)} .on-navy .diag .box{stroke:var(--paper)}
.hero-cap.ih .diagram.ih-art{max-width:440px}
/* W-115: a trimmed hero (.ih-trim, the Advisory pages) has no art; its text takes the row, and on the phone the band
   and the section after it tighten so the first card's headline is on the 375x667 first screen */
.hero-cap.ih .hero-grid > .rail:only-child{grid-column:1 / -1}
.hero-cap.ih + .sec.on-navy{border-top:1px solid rgba(251,249,245,.22)}
@media (max-width:599px){.hero-cap.ih.ih-trim{padding-bottom:24px}.hero-cap.ih.ih-trim + .sec{padding-top:24px}}
/* final QA item 3: W-115 is a phone rule. From 900px a trimmed Advisory hero carries its diagram again (.dt-only); below
   900px the same diagram closes the next section (.ph-only). One copy is shown per width; the hidden one is not drawn. */
@media (max-width:899px){.dt-only{display:none}}
@media (min-width:900px){.ph-only{display:none}}
.ih-portrait .portrait{display:block;width:100%;max-width:280px;height:auto;border:1px solid rgba(251,249,245,.28)}
@media (min-width:900px){.ih-portrait{justify-self:end}.ih-portrait .portrait{max-width:360px}}

/* ---------- 3 - three pillars ---------- */
.pillars{display:grid;border-top:1px solid var(--ink)}
.pillar{padding:24px 0;border-bottom:1px solid var(--hair);display:grid;gap:8px;align-content:start}
.pillar p{max-width:40ch;text-wrap:pretty}
@media (min-width:900px){
  .pillars{grid-template-columns:repeat(3,1fr);column-gap:48px}
  .pillar{padding:32px 0}
}

/* ---------- 4 - the insight / brief card: format label, date, question title, thumbnail of its plate, imprint ---------- */
.cards{display:grid;gap:24px;border-top:1px solid var(--ink);padding-top:24px}
.card{display:grid;gap:12px;align-content:start;padding-bottom:24px;border-bottom:1px solid var(--hair)}
.card .meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.card .meta .date{font-family:var(--mono);font-size:12.5px;color:var(--graphite);letter-spacing:0;text-transform:none;font-weight:400}
.card .meta .sample{color:var(--ink);border:1px solid var(--ink);padding:2px 6px}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.card .dek{max-width:52ch;text-wrap:pretty}
.card .thumb{order:-1}
.card .imprint{margin-top:4px}
@media (min-width:600px){.cards{grid-template-columns:repeat(2,1fr);column-gap:32px}}
@media (min-width:900px){.cards{grid-template-columns:repeat(3,1fr);column-gap:48px}}
.cards.one{grid-template-columns:1fr}
@media (min-width:700px){
  .card.wide{grid-template-columns:5fr 7fr;column-gap:32px;grid-auto-rows:min-content}
  .card.wide .thumb{grid-column:1;grid-row:1 / span 5;order:0}
  .card.wide > :not(.thumb){grid-column:2}
}
@media (min-width:900px){.card.wide{column-gap:64px}}

/* ---------- 5 - the brief imprint line ---------- */
.imprint{font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--graphite);display:flex;flex-wrap:wrap;gap:2px 0}
/* the separator closes the item before it, so a wrapped line never opens with a stray dot (final QA item 5) */
.imprint > span:not(:last-child)::after{content:"\00b7";margin:0 6px}
.imprint .num{color:var(--ink)}

/* ---------- 6 - the rule strip: four numbered statements ---------- */
.rulestrip,.rules{display:grid;border-top:1px solid var(--ink)}
.rulestrip li,.rules li{padding:24px 0;border-bottom:1px solid var(--hair);display:grid;align-content:start;grid-template-columns:44px 1fr;gap:4px 12px}
.rulestrip .n,.rules .n{font-family:var(--mono);font-weight:500;font-size:15px;color:var(--graphite);padding-top:4px}
.rulestrip h3,.rules h3{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.25;letter-spacing:-.006em}
.rulestrip p,.rules p{grid-column:2;font-size:16px;max-width:48ch;text-wrap:pretty}
.rulestrip p i,.rules p i{font-style:italic}
.rulestrip p b,.rules p b{font-weight:600}
@media (min-width:900px){.rulestrip,.rules{grid-template-columns:repeat(2,1fr);column-gap:64px}.rulestrip li,.rules li{padding:32px 0}}

/* ---------- 7 - people block: photo, name, title, one line ---------- */
.people{display:grid;gap:24px;border-top:1px solid var(--ink);padding-top:24px}
.person{display:grid;grid-template-columns:96px 1fr;gap:8px 20px;align-items:start}
.person img{width:96px;height:96px;object-fit:cover;object-position:top;grid-row:1 / span 2}
.person .name{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.2;letter-spacing:-.006em;align-self:end}
.person .title{font-family:var(--sans);font-size:13.5px;color:var(--graphite)}
.person .line{margin-top:8px;max-width:44ch;text-wrap:pretty;grid-column:1 / -1}
.person .tl{grid-column:1 / -1;justify-self:start;margin-top:4px}
@media (min-width:600px){
  .person{grid-template-columns:160px 1fr;gap:4px 24px}
  .person img{width:160px;height:160px;grid-row:1 / span 4}
  .person .name{align-self:start}
  .person .line,.person .tl{grid-column:2}
}

/* ---------- 8 - the "Get in touch" band (navy) ---------- */
.touch{padding:48px 0}
.touch .wrap{display:grid;gap:20px}
.touch h2{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.15;letter-spacing:-.012em;max-width:26ch;text-wrap:balance}
.touch p{max-width:52ch;color:rgba(251,249,245,.9);text-wrap:pretty}
.touch .ctas{margin-top:4px}
@media (min-width:900px){
  .touch{padding:72px 0}
  .touch .wrap{grid-template-columns:7fr 5fr;align-items:center;gap:64px}
  .touch h2{font-size:32px}
  .touch .ctas{justify-content:flex-end}
}

/* ---------- 9 - tiles (Advisory capabilities): label, title, line, a small plate each ---------- */
.tiles{display:grid;border-top:1px solid var(--ink)}
.tile{display:grid;gap:10px;padding:24px 0;border-bottom:1px solid var(--hair);align-content:start}
.tile h3 a{text-decoration:none}
.tile h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.tile p{font-size:16px;max-width:38ch;text-wrap:pretty}
.tile .mini{margin-top:6px}
@media (min-width:600px){.tiles{grid-template-columns:repeat(2,1fr);column-gap:32px}}
@media (min-width:900px){.tiles{grid-template-columns:repeat(4,1fr);column-gap:56px}.tile{padding:32px 0}.tile p{max-width:30ch}}
@media (min-width:600px){.tiles.six{grid-template-columns:repeat(2,1fr);column-gap:32px}}
@media (min-width:900px){.tiles.six{grid-template-columns:repeat(3,1fr);column-gap:48px}}

/* ---------- 10 - the plate: a drawn exhibit in the plate grammar (rail, datum, direct labels, the STRATURE mark) ----------
   figure.plate > .p-head (id, title, lede) - .p-plot (rows) - .p-read - .p-rule - .p-foot (apparatus + mark).
   No gridlines, no frame; one datum; every mark labelled with its value; figures in Plex Mono. */
.plate{position:relative;background:var(--white);border:1px solid var(--hair);padding:16px 16px 12px 24px;font-family:var(--sans);color:var(--ink);container-type:inline-size}
/* a narrow plate keeps the end ticks, and the middle one when the count is odd (0 / 50 / 100), so the labels never run
   together (WP3 s2). QA S4: with four ticks the old even-child rule left "0 . 20 30"; now 0 and 30 only. */
@container (max-width:420px){
  .plate .p-axis span:not(:first-child):not(:last-child){visibility:hidden}
  .plate .p-axis span:nth-child(2):nth-last-child(2),.plate .p-axis span:nth-child(3):nth-last-child(3),
  .plate .p-axis span:nth-child(4):nth-last-child(4),.plate .p-axis span:nth-child(5):nth-last-child(5){visibility:visible}
}
.plate::before{content:"";position:absolute;left:8px;top:16px;bottom:12px;width:1px;background:var(--hair)}
.plate::after{content:"";position:absolute;left:5.5px;top:16px;width:6px;height:56px;background:var(--ink)}
.plate .p-head{display:grid;gap:6px;margin-bottom:20px}
.plate .p-id{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);line-height:1.2}
.plate .p-title{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.25;letter-spacing:-.006em;text-wrap:pretty;max-width:34ch}
.plate .p-lede{font-size:12.5px;line-height:1.45;color:var(--graphite);max-width:62ch}
.plate .p-plot{display:grid;gap:10px;position:relative}
.plate .p-plot.has-datum{padding-top:20px}
.plate .p-row{display:grid;grid-template-columns:104px 1fr 60px;align-items:center;gap:0 10px;min-height:22px}
.plate .p-row .p-lab{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);line-height:1.2}
.plate .p-row .p-val{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;text-align:right;white-space:nowrap}
.plate .p-row .p-val.lead{font-size:17px}
.plate .p-bar{position:relative;height:18px;display:block}
.plate .p-bar svg{display:block;width:100%;height:18px}
.plate .p-bar .ink{fill:var(--ink)}
.plate .p-bar .graphite{fill:var(--graphite)}
.plate .p-bar .accent{fill:var(--verm)}
.plate .p-bar .hollow{fill:var(--white);stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.plate .p-bar .watch{fill:var(--tint);stroke:var(--graphite);stroke-width:1;vector-effect:non-scaling-stroke}
.plate .p-sub{grid-column:2 / 4;font-family:var(--mono);font-size:11px;line-height:1.3;color:var(--graphite);font-variant-numeric:tabular-nums lining-nums;margin-top:-4px}
.plate .p-sub b{color:var(--ink);font-weight:500}
.plate .p-sub .accent{color:var(--verm)}
.plate .p-bar .slot{position:absolute;left:0;top:0;height:100%;display:block}
.plate .w5{width:5%}.plate .w10{width:10%}.plate .w20{width:20%}.plate .w25{width:25%}.plate .w33{width:33.333%}.plate .w40{width:40%}.plate .w50{width:50%}.plate .w60{width:60%}.plate .w75{width:75%}.plate .w100{width:100%}
.plate .p-bar .min{position:absolute;left:0;top:0;width:2px;height:18px;background:var(--ink)}
.plate .p-row.lane{position:relative}
/* the frame's left edge sits on the plate's text column (final QA item 5: it stood 8px left of it); the label is inset
   inside it, so the bar column keeps its x and every bar stays comparable */
.plate .p-row.lane::before{content:"";position:absolute;left:0;right:-6px;top:-4px;bottom:-4px;border:1px solid var(--verm)}
.plate .p-row.lane > .p-lab{padding-left:8px}
.plate .p-row.lane .p-lab,.plate .p-row.lane .p-val{color:var(--verm)}
.plate .p-row.lane .p-bar .min{background:var(--verm)}
.plate .p-vdatum{position:absolute;top:14px;bottom:-6px;border-left:1.5px dashed var(--ink);pointer-events:none}
.plate .p-vdatum span{position:absolute;top:-16px;right:6px;white-space:nowrap;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);line-height:1.2}
.plate .p-vdatum.at100{right:70px}
.plate .p-vdatum.at50{left:calc(114px + (100% - 184px) / 2)}
.plate .p-vdatum.at82{left:calc(114px + (100% - 184px) * .82)}
.plate .p-axis{display:flex;justify-content:space-between;border-top:1px solid var(--hair);margin:12px 70px 0 114px;padding-top:4px;font-family:var(--mono);font-size:11px;color:var(--graphite);font-variant-numeric:tabular-nums lining-nums}
.plate .p-unit{font-size:11px;color:var(--graphite);margin:4px 0 0 114px}
.plate .p-read{margin-top:20px;display:grid;gap:4px}
.plate .p-read .p-lab{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--graphite);line-height:1.2}
.plate .p-read p{font-family:var(--serif);font-size:16px;line-height:1.4;max-width:52ch;text-wrap:pretty}
.plate .p-rule{border-top:2px solid var(--ink);margin-top:16px}
.plate .p-foot{display:grid;gap:8px;padding-top:10px;font-size:11.5px;line-height:1.45;color:var(--graphite)}
.plate .p-foot b{color:var(--ink);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:11px;margin-right:6px}
.plate .p-foot .p-mark{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);justify-self:start;padding-top:4px}
.plate .p-foot .p-mark i{display:inline-block;width:6px;height:14px;background:var(--ink);position:relative}
.plate .p-foot .p-mark i::after{content:"";position:absolute;left:2.5px;top:14px;width:1px;height:6px;background:var(--hair)}
/* plate on navy: paper marks, coral accent (vermilion's dark counterpart; the only place coral appears) */
.plate.navy{background:var(--navy);border-color:rgba(251,249,245,.22);color:var(--white)}
.plate.navy::before{background:rgba(251,249,245,.28)}
.plate.navy::after{background:var(--paper)}
.plate.navy .p-id,.plate.navy .p-title,.plate.navy .p-row .p-val,.plate.navy .p-read p,.plate.navy .p-foot b,.plate.navy .p-foot .p-mark{color:var(--white)}
.plate.navy .p-lede,.plate.navy .p-row .p-lab,.plate.navy .p-read .p-lab,.plate.navy .p-axis,.plate.navy .p-foot,.plate.navy .p-unit{color:rgba(251,249,245,.8)}
.plate.navy .p-bar .ink{fill:var(--paper)}
.plate.navy .p-bar .graphite{fill:rgba(251,249,245,.55)}
.plate.navy .p-bar .accent{fill:var(--coral)}
.plate.navy .p-bar .hollow{fill:var(--navy);stroke:var(--paper)}
.plate.navy .p-bar .watch{fill:rgba(251,249,245,.18);stroke:rgba(251,249,245,.6)}
.plate.navy .p-sub{color:rgba(251,249,245,.8)}
.plate.navy .p-sub b{color:var(--white)}
.plate.navy .p-sub .accent{color:var(--coral)}
.plate.navy .p-bar .min{background:var(--paper)}
.plate.navy .p-row.lane::before{border-color:var(--coral)}
.plate.navy .p-row.lane .p-lab,.plate.navy .p-row.lane .p-val{color:var(--coral)}
.plate.navy .p-acclab{color:var(--coral)}  /* a strip's accent label on navy (the /briefs/ hero, X18): vermilion is 2.4:1 there */
.plate.navy .p-row.lane .p-bar .min{background:var(--coral)}
.plate.navy .p-vdatum{border-color:var(--paper)}
.plate.navy .p-vdatum span{color:var(--paper)}
.plate.navy .p-axis{border-top-color:rgba(251,249,245,.28)}
.plate.navy .p-rule{border-top-color:var(--paper)}
.plate.navy .p-foot .p-mark i{background:var(--paper)}
.plate.navy .p-foot .p-mark i::after{background:rgba(251,249,245,.4)}
/* compact plate: thumbnails and tiles */
.plate.mini{padding:12px 12px 10px 20px}
.plate.mini::before{top:12px;bottom:10px}
.plate.mini::after{top:12px;height:36px}
.plate.mini .p-head{margin-bottom:12px;gap:4px}
.plate.mini .p-title{font-size:16px}
.plate.mini .p-plot{gap:6px}
.plate.mini .p-row{min-height:16px;grid-template-columns:72px 1fr 52px}
.plate.mini .p-vdatum.at100{right:62px}
.plate.mini .p-vdatum.at50{left:calc(82px + (100% - 134px) / 2)}
.plate.mini .p-vdatum.at82{left:calc(82px + (100% - 134px) * .82)}
.plate.mini .p-axis{margin:8px 62px 0 82px}
.plate.mini .p-unit{margin-left:82px}
.plate.mini .p-bar,.plate.mini .p-bar svg,.plate.mini .p-bar .min{height:12px}
.plate.mini .p-row .p-val{font-size:12.5px}
.plate.mini .p-foot{padding-top:8px}
.plate.mini .p-rule{margin-top:12px}
/* an open slot: what has not happened yet, drawn at the same scale (dashed outline over a graphite hatch) */
.slot{border:1px dashed var(--graphite);background:repeating-linear-gradient(45deg,transparent 0 5px,var(--hair) 5px 6px)}

/* ---------- 10b - the diagram: a purely structural figure. No exhibit id, no reading, no source, no STRATURE mark. ---------- */
.diagram{border-top:1px solid var(--ink);padding-top:16px;font-family:var(--sans)}
.diagram svg{display:block;width:100%;height:auto}
.diagram figcaption{font-size:12.5px;line-height:1.45;color:var(--graphite);margin-top:12px;max-width:62ch}
.diagram .d-box{fill:var(--white);stroke:var(--ink);stroke-width:1}
.diagram .d-slot{fill:none;stroke:var(--graphite);stroke-width:1;stroke-dasharray:6 4}
.diagram .d-line{fill:none;stroke:var(--ink);stroke-width:1}
.diagram .d-hair{fill:none;stroke:var(--hair);stroke-width:1}
.diagram .d-txt{fill:var(--ink);font-family:var(--sans);font-size:12px}
.diagram .d-lab{fill:var(--graphite);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}

/* ---------- 10c - the counts strip: a compact reference to a plate drawn in full elsewhere (figures in Plex Mono, no apparatus) ---------- */
.counts{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;border-top:1px solid var(--ink);padding-top:16px;font-family:var(--sans)}
.counts .c{display:grid;gap:4px;align-content:start}
.counts .c .v{font-family:var(--mono);font-weight:500;font-size:28px;line-height:1;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.counts .c .k{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);line-height:1.2}
.counts .c.lane .v,.counts .c.lane .k{color:var(--verm)}
.counts .c-src{grid-column:1 / -1;font-size:11.5px;line-height:1.45;color:var(--graphite);border-top:1px solid var(--hair);padding-top:8px}
.counts .c-src a{color:inherit}
.on-navy .counts{border-top-color:var(--paper)}
.on-navy .counts .c .v{color:var(--white)}
.on-navy .counts .c .k,.on-navy .counts .c-src{color:rgba(251,249,245,.8)}
.on-navy .counts .c-src{border-top-color:rgba(251,249,245,.28)}
.on-navy .counts .c.lane .v,.on-navy .counts .c.lane .k{color:var(--coral)}
@media (min-width:600px){.counts{grid-template-columns:repeat(5,1fr);gap:16px}.counts .c .v{font-size:30px}}
.plate.navy .slot{border-color:rgba(251,249,245,.6);background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(251,249,245,.28) 5px 6px)}

/* ---------- 11 - figures band (large figures with sources; case pages) ---------- */
.figband{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.fig{padding:18px 14px 20px 0;border-bottom:1px solid var(--hair)}
.fig:nth-child(2n){padding-left:14px;border-left:1px solid var(--hair)}
.fig .fig-v{font-size:clamp(34px,4.6vw,52px);line-height:1;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.fig .fig-v small{font-size:.5em;letter-spacing:0;margin-left:1px}
.fig .l{font-family:var(--sans);font-size:14px;font-weight:600;margin-top:10px;line-height:1.35}
.fig .s{margin-top:8px}
@media (min-width:900px){
  .figband{grid-template-columns:repeat(4,1fr)}
  .fig,.fig:nth-child(2n){padding:28px 24px 28px 0;border-left:0}
  .fig + .fig{padding-left:24px;border-left:1px solid var(--hair)}
}

/* ---------- 12 - the case band (home): text + one plate ---------- */
.case .quote{font-family:var(--serif);font-size:clamp(21px,2.4vw,29px);line-height:1.3;max-width:36ch;text-wrap:pretty;margin-bottom:10px}
.case .qsrc{margin-bottom:24px}
.case .foot{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;margin-top:24px}
.case .foot p{max-width:60ch}
.case-grid{display:grid;gap:24px}
@media (min-width:900px){.case-grid{grid-template-columns:5fr 7fr;gap:64px;align-items:start}}

/* ---------- legacy blocks kept for the interior pages until the content agents rebuild them ---------- */
.svc{border-top:1px solid var(--ink)}
.svc li{display:grid;grid-template-columns:44px 1fr;gap:4px 12px;padding:22px 0;border-bottom:1px solid var(--hair)}
.svc .n{font-family:var(--mono);font-size:15px;color:var(--graphite);padding-top:5px}
.svc h3{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.2;letter-spacing:-.005em}
.svc h3 a{color:inherit;text-decoration:none}
.svc h3 a:hover{text-decoration:underline}
.svc h3 .tier{display:inline-block;vertical-align:middle;font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--graphite);border:1px solid var(--hair);padding:1px 6px;margin-left:8px}
.svc p{grid-column:2;font-size:16px;max-width:62ch;margin-top:4px;text-wrap:pretty}
.svc .tag-on{grid-column:2;font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--graphite);margin-top:8px}
.paths{background:var(--tint)}
.paths .wrap{display:grid}
.path{padding:36px 0}
.path + .path{border-top:1px solid var(--hair)}
.path h2{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2;margin:10px 0 18px}
.path ul{margin-bottom:26px}
.path li{padding:10px 0;border-top:1px solid var(--hair);color:var(--ink);font-size:16.5px;display:grid;grid-template-columns:22px 1fr;text-wrap:pretty}
.path li::before{content:"\2014";color:var(--graphite)}
.path li:last-child{border-bottom:1px solid var(--hair)}
@media (min-width:900px){.paths .wrap{grid-template-columns:1fr 1fr}.path{padding:64px 56px 64px 0}.path + .path{border-top:0;border-left:1px solid var(--hair);padding:64px 0 64px 56px}}
.steps{border-top:1px solid var(--ink)}
.step{display:grid;grid-template-columns:1fr;gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--hair)}
.step .sn{font-family:var(--sans);font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--graphite)}
.step .sf{font-family:var(--mono);font-weight:500;font-size:30px;line-height:1.05;letter-spacing:-.01em;color:var(--ink)}
.step .sf small{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--graphite);letter-spacing:0;margin-left:6px}
.step .st{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.3}
.step .sd{font-size:16px;max-width:58ch;text-wrap:pretty}
.step .src{margin-top:2px}
.eq{font-family:var(--mono);font-size:13.5px;line-height:1.6;color:var(--ink);margin-top:18px;max-width:80ch;text-wrap:pretty;padding:12px 14px;background:var(--tint);overflow-wrap:anywhere}
.eq .fine{font-family:var(--sans);display:block;margin-top:4px}
@media (min-width:600px){.step{grid-template-columns:190px 1fr;align-items:start}.step .sf{grid-column:1;grid-row:1 / span 4;font-size:34px}.step .sn,.step .st,.step .sd,.step .src{grid-column:2}}
.dl{border-top:1px solid var(--ink)}
.dl > div{padding:18px 0;border-bottom:1px solid var(--hair);display:grid;gap:4px}
.dl dt{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.25}
.dl dd{font-size:16px;max-width:60ch;text-wrap:pretty}
.dl dd b{font-weight:600}
@media (min-width:600px){.dl > div{grid-template-columns:220px 1fr;gap:4px 24px;align-items:start}}
.tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;white-space:nowrap;background:var(--tint)}
.t-ACT{color:var(--verm)}.t-PREPARE{color:var(--ink)}.t-WATCH{color:var(--graphite)}
.g{display:inline-block;width:8px;height:8px;flex:0 0 auto}
.g-ACT{background:var(--verm)}
.g-PREPARE{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);border:1.5px solid var(--ink)}
.g-WATCH{border:1.5px solid var(--graphite)}
.due{color:var(--verm);font-weight:600}
.brief{background:var(--white);border:1px solid var(--hair);max-width:640px}
.brief-strip{background:var(--tint);border-bottom:1px solid var(--hair);padding:8px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.brief-strip svg{height:22px;width:auto;display:block}
.brief-strip .smp{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);border:1px solid var(--graphite);padding:2px 6px}
.brief-body{padding:14px 16px 16px}
.brief .im{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-bottom:8px}
.brief h3{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.28;margin-bottom:8px;text-wrap:pretty}
.brief p{font-size:16px;max-width:58ch;text-wrap:pretty}
.brief .bm{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 12px;border-top:1px solid var(--hair);padding-top:8px}
.founder .who{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.2;margin-bottom:4px}
.founder .role{color:var(--graphite);font-family:var(--sans);font-size:14px;margin-bottom:18px;max-width:40ch}
.about .portrait{max-width:280px;border:1px solid var(--hair)}
.pilot .body p{max-width:54ch;text-wrap:pretty}
.pilot .body .fine{margin-top:12px}
.pilot .body .btn{margin-top:22px}

/* ---------- 13 - forms (the full form lives on /contact/ only) ---------- */
.req{background:var(--tint)}
.req .aside p{max-width:40ch;text-wrap:pretty}
.req .aside p + p{margin-top:12px;font-size:15px;color:var(--graphite)}
form.req-form{background:var(--white);border:1px solid var(--hair);padding:20px 16px 24px;max-width:600px;font-family:var(--sans)}
form.req-form h3{font-family:var(--serif);font-weight:600;font-size:22px;margin-bottom:16px}
fieldset{border:0;padding:0;margin:0;min-width:0}
.rg{display:grid;gap:8px;margin:0 0 16px}
.rg legend{font-size:11px;font-weight:600;color:var(--graphite);padding:0;margin-bottom:8px;letter-spacing:.15em;text-transform:uppercase}
.rg label,.ck label{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;cursor:pointer}
.rg input,.ck input{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--ink)}
.f{display:grid;gap:4px;margin-bottom:12px}
.f label{font-size:13px;font-weight:600;color:var(--ink)}
.f input,.f select,.f textarea{border:1px solid var(--graphite);background:var(--paper);padding:0 10px;min-height:44px;border-radius:0;font-size:15.5px;width:100%;font-family:var(--sans)}
.f textarea{padding:10px;min-height:96px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ink)}
.f select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2312181D' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.f .hint{font-size:12.5px;color:var(--graphite);font-weight:400}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ck{margin:6px 0 16px;padding-top:14px;border-top:1px solid var(--hair)}
/* QA N7: the purchase-terms box matches the other form boxes (18px). Its label holds a link, so it is a block with the
   box hung in the left gutter rather than a flex row (a flex row would split the text around the link into columns). */
.terms-ck{display:block;position:relative;padding-left:28px;font-size:14.5px;line-height:1.45;cursor:pointer}
.terms-ck input{position:absolute;left:0;top:2px;width:18px;height:18px;margin:0;accent-color:var(--ink)}
.ck .fine{margin-top:6px;padding-left:28px}
.status{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--verm);min-height:20px}
.status.ok{color:var(--ink)}
.status[hidden]{display:none}
/* the full-brief download request (W-78 to W-85): declarations as a .gate list, the Ukraine question only when asked */
.brief-form .req-brief{margin:0 0 16px;font-size:15px;line-height:1.5}
.brief-form .gate{margin-top:4px}
.brief-form .ua-q[hidden],.brief-form [data-for][hidden]{display:none}
.brief-form .ua-q label{display:inline-flex;margin-right:20px}
.brief-form .terms-ck{margin-top:4px}
.brief-form > .fine{margin-top:8px;font-size:13px;line-height:1.5;color:var(--graphite)}
.brief-form .btn.wide{margin-top:16px}
#full .prose + .brief-form{margin-top:24px}
@media (min-width:900px){.req .two{grid-template-columns:5fr 7fr;gap:72px}}

/* ---------- 404 ---------- */
.nf{padding:56px 0 96px}
.nf .code{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);margin-bottom:10px}

/* ---------- footer: navy, the reversed mark, the legal name, the three links, the standing line ---------- */
footer.ft{background:var(--navy);color:rgba(251,249,245,.82);padding:40px 0 48px;font-family:var(--sans);font-size:13.5px;line-height:1.5}
.touch + footer.ft,.on-navy + footer.ft{border-top:1px solid rgba(251,249,245,.28)}
footer.ft .fine + .fine{margin-top:10px}
footer.ft .notices{margin-top:16px;border-top:1px solid rgba(251,249,245,.28);padding-top:12px}
footer.ft .notices summary{list-style:none;cursor:pointer;display:grid;gap:4px;padding-right:24px;position:relative}
footer.ft .notices summary::-webkit-details-marker{display:none}
footer.ft .notices summary::after{content:"";position:absolute;right:4px;top:8px;width:8px;height:8px;border-right:1.5px solid rgba(251,249,245,.8);border-bottom:1.5px solid rgba(251,249,245,.8);transform:rotate(45deg)}
footer.ft .notices[open] summary::after{transform:rotate(-135deg);top:12px}
footer.ft .notices summary .lbl{color:rgba(251,249,245,.7)}
footer.ft .notices summary .line{font-family:var(--sans);font-size:13.5px;color:var(--white);line-height:1.45;max-width:60ch}
footer.ft .notices summary:hover .line{text-decoration:underline;text-underline-offset:3px}
footer.ft .notices summary:focus-visible{outline:2px solid var(--white);outline-offset:4px}
footer.ft .notices .fine{margin-top:12px}
footer.ft .ft-s1{margin-top:16px;max-width:72ch}
footer.ft .ft-names{margin-top:16px}
footer.ft .ft-copy{margin-top:16px;color:rgba(251,249,245,.7)}
footer.ft .wrap{display:grid;gap:20px}
footer.ft .mark svg{display:block;height:52px;width:auto;max-width:100%}
footer.ft .legal{font-family:var(--serif);font-size:17px;color:var(--white)}
footer.ft .flinks{display:flex;flex-wrap:wrap;gap:6px 20px}
footer.ft .flinks a{color:var(--white);text-decoration:none;border-bottom:1px solid rgba(251,249,245,.4);padding-bottom:1px}
footer.ft .flinks a:hover{border-bottom-color:var(--white)}
footer.ft .standing{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--white)}
footer.ft .fine{color:rgba(251,249,245,.78);max-width:70ch}
footer.ft .fine a{color:rgba(251,249,245,.9)}
@media (min-width:900px){footer.ft{padding:64px 0}footer.ft .wrap{grid-template-columns:auto 1fr;align-items:start;gap:64px}}