/* ============================================================
   Kairos Infrastructure Partners — design system
   Palette and rules per KAIROS-BRAND-GUIDE.md.
   No gradients, no glassmorphism, no shadows, max 4px radius.
   ============================================================ */

:root{
  --navy:#1B2A4A;
  --brass:#8B7355;        /* decorative: rules, large text, on-navy */
  --brass-text:#7A6449;   /* small text: 5.61:1 on white (brand brass is 4.49:1, fails AA) */
  --warm-gray:#F5F5F0;
  --body-text:#4A4A4A;
  --muted:#6B6B6B;        /* 5.33:1 (brand #999 is 2.85:1, fails AA) */
  --border-light:#E8E8E8;
  /* Intake tokens. --border-light is 1.23:1 on white and cannot serve as a
     control boundary under WCAG 1.4.11 (3:1); --ef-rule is 3.84:1 on white
     and 3.51:1 on --warm-gray, compliant on both grounds a control here ever
     sits on, and quiet enough to sit beside --border-light everywhere else.
     It was #8A8A8A: 3.45:1 on white but 3.16:1 on the warm-gray of the ONE
     row the user has committed to, 0.16 above the boundary. #828282 puts
     real headroom under the checked lane row and the Back hover.
     TO SETTLE CENTRALLY, NOT HERE: the 1.4.11 failure of --border-light is
     site-wide, and these four are scoped to this block so the rest of the
     site's ruling is untouched until --ef-rule is promoted to a named
     control-boundary token and the three error colours are added to the
     system.
     --ef-err 8.31:1, --ef-err-text 9.85:1 on white and 9.23:1 on --ef-err-bg.
     --ef-navy-soft is the in-flight submit fill: a darkened navy rather than
     opacity, which would drop the white label below 4.5:1. 8.90:1. */
  --ef-rule:#828282;
  --ef-err:#8B2E2E;
  --ef-err-text:#7A2626;
  --ef-err-bg:#FDF6F6;
  --ef-navy-soft:#3A4A6B;
  --white:#fff;
  /* Camp A grid: the ceiling must NOT engage inside the laptop range, so the
     gutter stays a constant px value and every section shares one left edge.
     Benchmark: Arup 1920/32, Brookfield 1608/32, EQT 1664/32. */
  --maxw:1600px;
  --gutter:48px;
  --cols:12;
  --colgap:24px;
  --nav-h:80px;
  /* vertical padding ladder — two tokens, ratio 1 : 0.64 : 0.50 (Blackstone 1:0.60:0.50) */
  --pad-y:112px;
  --pad-y-tight:72px;
}

/* ---------- fonts (self-hosted, subset to latin) ---------- */
@font-face{font-family:Inter;src:url(../fonts/inter/inter-v20-latin-300.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter/inter-v20-latin-regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter/inter-v20-latin-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter/inter-v20-latin-600.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant/cormorant-garamond-v21-latin-600.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.7;
  color:var(--body-text);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- focus: always visible, never removed ---------- */
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:2px}
.on-navy :focus-visible,.hero :focus-visible{outline-color:#fff}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:200;text-decoration:none}
.skip:focus{left:8px;top:8px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* 12-column grid. Asymmetric blocks MUST span integer columns — the benchmark
   found Brookfield's 794px block is exactly 7 of 12 columns, never an fr ratio. */
.g12{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--colgap)}
.c-4{grid-column:span 4}.c-5{grid-column:span 5}.c-6{grid-column:span 6}
.c-7{grid-column:span 7}.c-8{grid-column:span 8}.c-12{grid-column:1/-1}
.start-6{grid-column:6/span 7}.start-7{grid-column:7/span 6}
@media(max-width:900px){.c-4,.c-5,.c-6,.c-7,.c-8,.start-6,.start-7{grid-column:1/-1}}

/* Full bleed: break the container to true 100vw. Benchmark says >=2 per page. */
.bleed{width:100vw;margin-left:calc(50% - 50vw);max-width:none}
section{padding:var(--pad-y) 0}

.bg-warm{background:var(--warm-gray)}
.bg-navy{background:var(--navy);color:#fff}
.bg-navy p{color:rgba(255,255,255,.82)}
.bg-navy h2,.bg-navy h3{color:#fff}

/* ---------- type ---------- */
h1,h2,h3,h4{color:var(--navy);margin:0 0 .6em;font-weight:500;line-height:1.2}
h1{font-size:clamp(34px,5vw,56px);font-weight:300;letter-spacing:-.02em;line-height:1.14;max-width:16em}
h2{font-size:clamp(26px,3.4vw,40px);font-weight:300;letter-spacing:-.015em;max-width:18em}
h3{font-size:clamp(18px,2vw,22px);font-weight:500;letter-spacing:-.005em}
p{margin:0 0 1em;max-width:70ch}
a{color:inherit}
strong{font-weight:600;color:var(--navy)}
.bg-navy strong{color:#fff}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-text);margin:0 0 18px}
.bg-navy .eyebrow{color:var(--brass);filter:brightness(1.5)}
.rule{width:64px;height:1px;background:var(--brass);border:0;margin:0 0 32px}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.6;color:var(--body-text);max-width:60ch}
.bg-navy .lede{color:rgba(255,255,255,.82)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--border-light)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand .mark{flex-shrink:0}
.brand .name{font-family:"Cormorant Garamond",Georgia,serif;font-size:25px;font-weight:600;color:var(--navy);letter-spacing:.01em}
.brand .sub{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500}
@media(max-width:900px){.brand .sub{display:none}}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav-links a{font-size:14.5px;color:var(--body-text);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav-links a:hover{color:var(--navy);border-bottom-color:var(--brass)}
.nav-links a[aria-current=page]{color:var(--navy);font-weight:500;border-bottom-color:var(--brass)}
.btn{display:inline-block;background:var(--navy);color:#fff;padding:13px 26px;border-radius:4px;font-size:13px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;border:1px solid var(--navy);cursor:pointer}
.btn:hover{background:#16233d}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn-ghost:hover{background:#fff;color:var(--navy)}
.btn-light{background:#fff;color:var(--navy);border-color:#fff}
.btn-light:hover{background:var(--warm-gray)}
.navtoggle{display:none;background:none;border:1px solid var(--border-light);border-radius:4px;padding:9px;cursor:pointer;color:var(--navy)}
@media(max-width:880px){
  .nav-links{display:none}.navtoggle{display:block}
  .nav-links.open{display:flex;position:absolute;left:0;right:0;top:var(--nav-h);flex-direction:column;
    align-items:flex-start;gap:0;background:#fff;border-bottom:1px solid var(--border-light);padding:8px 24px 20px}
  .nav-links.open li{width:100%;padding:11px 0;border-bottom:1px solid var(--border-light)}
  .nav-links.open li:last-child{border:0;padding-top:16px}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;
  min-height:clamp(600px,88vh,900px);display:flex;align-items:center;padding:96px 0}
.hero::after{content:"";position:absolute;inset:0;background:var(--navy);opacity:.64;z-index:0}
.hero>.wrap{position:relative;z-index:1}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero h1{color:#fff;max-width:15em}
.hero .lede{color:rgba(255,255,255,.84);max-width:56ch;margin-bottom:38px}
.hero .rule{background:var(--brass)}

/* ---------- layout helpers ---------- */
.grid{display:grid;gap:44px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.g2,.g3{grid-template-columns:1fr;gap:34px}}
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,11fr);gap:56px;align-items:start}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:24px}}
.card{border:1px solid var(--border-light);border-radius:4px;padding:34px}
/* photography and diagrams never carry radius */
figure.media,figure.media *,.gapfig svg,.bleed img,.bleed picture{border-radius:0!important}
.bg-navy .card{border-color:rgba(255,255,255,.18)}
.tiles{display:grid;gap:1px;background:var(--border-light);
  border:1px solid var(--border-light);border-radius:4px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.tiles.n2{grid-template-columns:repeat(2,1fr)}
.tiles.n3{grid-template-columns:repeat(3,1fr)}
.tiles.n4{grid-template-columns:repeat(2,1fr)}
.tiles.n5{grid-template-columns:repeat(5,1fr)}
.tiles.n6{grid-template-columns:repeat(3,1fr)}
.tiles.n5 p{font-size:14.5px}
@media(max-width:1100px){.tiles.n5{grid-template-columns:repeat(3,1fr)}.tiles.n6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.tiles.n2,.tiles.n3,.tiles.n4,.tiles.n5,.tiles.n6{grid-template-columns:1fr}}
.tiles>div{background:#fff;padding:28px}
.bg-warm .tiles>div{background:var(--warm-gray)}
.tiles h3{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-text);margin-bottom:12px}
.tiles p{font-size:15.5px;margin:0;line-height:1.6}
hr.sec{border:0;border-top:1px solid var(--border-light);margin:0}
.statement{font-size:clamp(24px,3.1vw,36px);font-weight:300;line-height:1.3;color:var(--navy);letter-spacing:-.015em;max-width:20ch}
.bg-navy .statement{color:#fff}

/* ---------- the gap diagram ---------- */
.gapfig{margin:0;padding:0}
.gapfig svg{width:100%;height:auto;max-width:760px;display:block;margin:0 auto}
.gapcap{text-align:center;font-size:clamp(20px,2.4vw,28px);font-weight:300;color:var(--navy);margin-top:36px;letter-spacing:-.01em}
.bg-navy .gapcap{color:#fff}

/* ---------- ordered / numbered lists ---------- */
ol.numbered{counter-reset:n;list-style:none;padding:0;margin:0;display:grid;gap:26px}
ol.numbered>li{counter-increment:n;padding-left:52px;position:relative}
ol.numbered>li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--brass-text)}
ul.plain{list-style:none;padding:0;margin:0 0 1.15em;display:grid;gap:13px}
ul.plain>li{padding-left:20px;position:relative;max-width:68ch}
ul.plain>li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:1px;background:var(--brass)}

/* ---------- form ---------- */
.lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px;margin:0 0 34px;padding:0;list-style:none}
.lane{position:relative}
.lane input{position:absolute;opacity:0;width:1px;height:1px}
.lane label{display:block;border:1px solid var(--border-light);border-radius:4px;padding:20px;cursor:pointer;height:100%;background:#fff}
.lane label:hover{border-color:var(--brass)}
.lane input:focus-visible+label{outline:3px solid var(--navy);outline-offset:2px}
.lane input:checked+label{border-color:var(--navy);border-width:2px;padding:19px}
.lane .lt{display:block;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--navy);margin-bottom:9px}
.lane .ld{display:block;font-size:14.5px;line-height:1.55;color:var(--body-text)}
.field{margin-bottom:22px}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;border:1px solid #CFCFCF;border-radius:4px;padding:13px 14px;
  font:inherit;font-size:16px;color:var(--body-text);background:#fff}
.field textarea{resize:vertical;min-height:132px}
.field .hint{font-size:13.5px;color:var(--muted);margin:7px 0 0}
[role=status],[role=alert]{border-radius:4px;padding:18px 20px;margin-bottom:24px}
[role=status]:not(:empty){border:1px solid var(--navy);background:var(--warm-gray)}
[role=alert]:not(:empty){border:1px solid #8B2E2E;background:#FDF6F6;color:#7A2626}

/* ---------- footer ---------- */
.foot{background:#fff;border-top:1px solid var(--border-light);padding:64px 0 40px}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;margin-bottom:52px}
@media(max-width:880px){.foot .cols{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.foot .cols{grid-template-columns:1fr}}
.foot h3{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--navy);margin-bottom:16px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.foot a{font-size:15px;color:var(--body-text);text-decoration:none}
.foot a:hover{color:var(--navy);text-decoration:underline}
.foot .fine{border-top:1px solid var(--border-light);padding-top:26px;font-size:13px;color:var(--muted);max-width:88ch}
.foot .fine p{font-size:13px;color:var(--muted);margin:0 0 10px;max-width:none}
.foot .name{font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;font-weight:600;color:var(--navy);display:block;margin-bottom:4px}
.foot .sub{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:14px}

/* ============================================================
   DENSITY COMPONENTS — boxes, figures, stat blocks, comparisons.
   Added to remove dead space and give the eye structure to land on.
   ============================================================ */

/* two-column body text for long passages — fills the measure, keeps 68ch readability */
.prose2{columns:2;column-gap:56px;max-width:none}
.prose2 p{max-width:none;break-inside:avoid}
@media(max-width:880px){.prose2{columns:1}}

/* wide prose: heading sits left, body fills the rest — kills the dead right column */
.leadin{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--colgap);align-items:start}
.leadin>.k{grid-column:span 4}
.leadin>.k+*{grid-column:6/span 7}
.leadin>.k h2{margin-bottom:0}
.leadin>.k figure.media{margin-top:24px}
@media(max-width:880px){.leadin{grid-template-columns:1fr;gap:18px}.leadin>.k,.leadin>.k+*{grid-column:1/-1}}

/* stat blocks */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--border-light);
  border:1px solid var(--border-light);border-radius:4px;overflow:hidden;margin:34px 0}
.stats>div{background:#fff;padding:26px 24px}
.bg-warm .stats>div{background:var(--warm-gray)}
.bg-navy .stats{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.18)}
.bg-navy .stats>div{background:var(--navy)}
.stats .n{display:block;font-size:clamp(28px,3.4vw,40px);font-weight:300;color:var(--navy);letter-spacing:-.02em;line-height:1.05}
.bg-navy .stats .n{color:#fff}
.stats .l{display:block;font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brass-text);margin-top:12px;line-height:1.45}
.bg-navy .stats .l{color:var(--brass);filter:brightness(1.5)}

/* comparison / definition table */
.compare{width:100%;border-collapse:collapse;margin:30px 0;font-size:15.5px}
.compare th,.compare td{text-align:left;vertical-align:top;padding:15px 18px;border:1px solid var(--border-light)}
.compare th{background:var(--warm-gray);color:var(--navy);font-weight:600;font-size:12px;
  letter-spacing:.11em;text-transform:uppercase}
.compare td:first-child{width:34%;color:var(--navy);font-weight:500}
.bg-warm .compare th{background:#fff}
.tablewrap{overflow-x:auto;margin:30px 0}

/* bordered figure box with a rule label */
.figbox{border:1px solid var(--border-light);border-radius:4px;padding:30px;margin:30px 0;background:#fff}
.bg-warm .figbox{background:#fff}
.bg-navy .figbox{background:transparent;border-color:rgba(255,255,255,.2)}
.figbox>.lbl{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-text);margin:0 0 16px}
.figbox p:last-child{margin-bottom:0}

/* dense definition rows — a framework without a table */
.rows{display:grid;gap:0;border-top:1px solid var(--border-light);margin:28px 0}
.rows>div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,11fr);gap:32px;
  padding:20px 0;border-bottom:1px solid var(--border-light)}
.bg-navy .rows,.bg-navy .rows>div{border-color:rgba(255,255,255,.18)}
.rows .t{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-text);line-height:1.5}
.bg-navy .rows .t{color:var(--brass);filter:brightness(1.5)}
.rows p{margin:0;font-size:15.5px;max-width:none}
@media(max-width:760px){.rows>div{grid-template-columns:1fr;gap:8px;padding:16px 0}}

/* tier / step ladder */
.ladder{display:grid;gap:14px;margin:32px 0}
.ladder>div{border:1px solid var(--border-light);border-left:3px solid var(--brass);border-radius:4px;padding:24px 26px;background:#fff}
.bg-warm .ladder>div{background:#fff}
.ladder .t{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.ladder p{margin:0;max-width:none;font-size:15.5px}

/* image slot placeholder — visible structure, never a grey "Image:" box */
.imgslot{width:100%;border:1px solid var(--border-light);border-radius:0;background:var(--warm-gray)}
figure.media{margin:0}
figure.media img,figure.media picture{width:100%;height:auto;border-radius:0;display:block}
figure.media figcaption{font-size:13.5px;color:var(--muted);margin-top:10px}

/* ============================================================
   CORRECTIONS — from the 8-dimension inspection against BENCHMARK.md.
   Appended deliberately: the cascade guarantees these land, where an
   earlier chained find/replace silently no-op'd.
   ============================================================ */

/* [hero/grid CRITICAL] .hero{display:flex} made .wrap a shrink-to-fit flex item,
   so the H1 sat 252px right of the page spine. All 7 reference sites show delta 0. */
.hero > .wrap{width:100%;max-width:var(--maxw);flex:1 1 auto}

/* [cadence/completeness CRITICAL] the vertical padding ladder and gutter step-down.
   Benchmark ratio 1 : 0.64 : 0.50 (Blackstone 1:0.60:0.50). Pages were growing
   +26% to +99% on mobile against a peer norm of +4% to +10%. */
@media (max-width:1024px){
  :root{--gutter:32px;--pad-y:72px;--pad-y-tight:48px;--colgap:20px}
}
@media (max-width:760px){
  :root{--gutter:24px;--pad-y:56px;--pad-y-tight:40px;--colgap:16px}
  body{font-size:16px}
}
section.tight{padding:var(--pad-y-tight) 0}

/* [hero CRITICAL] .pagehead had ZERO rules — five of six pages had no governed
   opening. Height was 99.1% explained by word count (r=0.991). Now vh-governed. */
.sec-pagehead{min-height:clamp(340px,52vh,560px);display:flex;align-items:center;
  padding:var(--pad-y) 0}
.sec-pagehead h1{max-width:16em}
@media (max-width:760px){.sec-pagehead{min-height:clamp(260px,40vh,420px)}}

/* [type CRITICAL] body leading 1.7 was the loosest in the entire reference set
   (median 1.47). Leading now sits on a 4px grid — EQT and Black & Veatch are 100% on 4px. */
body{line-height:1.5}
p,li{line-height:1.6}
h1{line-height:1.08}
h2{line-height:1.14}
h3{line-height:1.3}
.lede{line-height:1.5}
.gapcap{line-height:1.15}        /* inherited 1.7 and rendered at 47.6px leading */
.statement{line-height:1.2}

/* [type CRITICAL] seven text sizes were doing the work of two (median step 1.063
   against a reference 1.167). Collapsed to a real scale. */
:root{--t-xs:13px;--t-sm:15px;--t-base:17px;--t-lg:20px}
.tiles p,.rows p,.ladder p,.card p{font-size:var(--t-sm)}
.foot a,.foot .fine p{font-size:var(--t-sm)}
figure.media figcaption{font-size:var(--t-xs)}

/* [cta CRITICAL] zero transitions on every CTA; 300ms is present on 100% of the
   14 reference sites. And hover was a 1.10:1 shade nudge — the references invert. */
.btn,.btn-light,.btn-ghost,.nav-links a,.foot a,.textlink{
  transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.btn:hover{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn-light:hover{background:transparent;color:#fff;border-color:#fff}

/* [cta] Tier 2 — the missing text-link tier. Five filled buttons per page against
   a target of one; the other asks belong here. */
.textlink{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-sm);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);
  text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:3px;min-height:44px}
.textlink:hover{color:var(--brass-text);border-bottom-color:var(--navy)}
.bg-navy .textlink{color:#fff;border-bottom-color:var(--brass)}
.bg-navy .textlink:hover{color:var(--brass);border-bottom-color:#fff}

/* [hero] scrim was 0.64 and retained only 39.3% of the photograph's luminance.
   At 0.55 contrast still passes and materially more of the image survives. */
.hero::after{opacity:.55}
.hero img.bg,.hero picture img{object-position:50% 35%}
@media (max-width:760px){.hero img.bg,.hero picture img{object-position:60% 40%}}

/* [grid CRITICAL] the centred CTA was the one block off the spine (x=534 at 1512).
   Everything resolves to the gutter now. */
section .wrap[style*="center"]{text-align:left !important}
section .wrap[style*="center"] .statement,
section .wrap[style*="center"] > div{margin-left:0 !important;margin-right:0 !important}
.statement{max-width:24ch}

/* [imagery CRITICAL] single-side edge bleed — the technique the benchmark names as
   the highest-craft move, and we had zero. Image escapes the left or right edge. */
.bleed-l{width:calc(50vw + 50% - var(--colgap));margin-left:calc(50% - 50vw);max-width:none}
.bleed-r{width:calc(50vw + 50% - var(--colgap));max-width:none}
@media (max-width:880px){
  .bleed-l,.bleed-r{width:100vw;margin-left:calc(50% - 50vw);max-width:none}
}
figure.media img{display:block;width:100%;height:auto}
figure.media.tall img{aspect-ratio:3/4;object-fit:cover}
figure.media.wide img{aspect-ratio:21/9;object-fit:cover}
figure.media.pano img{aspect-ratio:2.6/1;object-fit:cover}

/* [cadence] Dense definition lists ran one-per-row, making a single section
   4-5x the height of its neighbours (the-gap CV 0.62, ratio 4.7x). Many-item
   lists now use the full container width instead of growing vertically. */
.rows.many{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:56px;row-gap:0;border-top:1px solid var(--border-light)}
.rows.many>div{grid-template-columns:minmax(0,5fr) minmax(0,9fr);gap:20px;padding:16px 0}
.bg-navy .rows.many{border-color:rgba(255,255,255,.18)}
@media (max-width:1024px){.rows.many{grid-template-columns:1fr;column-gap:0}}

.tiles.n8,.tiles.n9,.tiles.n10{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.tiles.n8,.tiles.n9,.tiles.n10{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.tiles.n8,.tiles.n9,.tiles.n10{grid-template-columns:1fr}}

/* [cadence] tighter mobile rhythm — the ladder alone left pages +26% over desktop */
@media (max-width:760px){
  :root{--pad-y:48px;--pad-y-tight:32px}
  .rows>div{padding:14px 0}
  .tiles>div{padding:20px}
  .card{padding:24px}
  h1{font-size:clamp(30px,8vw,38px)}
  h2{font-size:clamp(23px,6vw,30px)}
  .lede{font-size:17px}
}

/* [cadence] The pagehead image rendered at its natural 1.51 ratio across the full
   container, making the opening section 2042px against a ~580px page median — the
   single largest driver of CV 0.61 on /the-gap and 0.52 on /markets.
   A panoramic crop is also what the reference set uses for a page-opening band. */
.sec-pagehead figure.media{margin-top:36px;width:100vw;margin-left:calc(50% - 50vw);max-width:none}
.sec-pagehead figure.media img{aspect-ratio:3.2/1;object-fit:cover;object-position:50% 45%}
@media (max-width:880px){.sec-pagehead figure.media img{aspect-ratio:2/1}}
.sec-pagehead{display:block;padding-bottom:0}
.sec-pagehead > .wrap{padding-bottom:var(--pad-y-tight)}

/* [cadence] a 16-item tile block still ran 1452px. Denser cells at high counts. */
.tiles.n8>div,.tiles.n9>div,.tiles.n10>div{padding:20px 18px}
.tiles.n8 p,.tiles.n9 p,.tiles.n10 p{font-size:14px;line-height:1.5}
.tiles.n8 h3,.tiles.n9 h3,.tiles.n10 h3{font-size:11px;margin-bottom:8px}

/* ============================================================
   HERO TYPE — from the completed benchmark hero dimension.
   H1 56px was below the 70px median and below 6 of 9 references.
   Weight 300 at 56px was "too light to command, too small to be
   deliberate". Tracking -0.020em was tighter than 7 of 9 — the
   capital firms sit 0.000 to -0.010em. Leading 1.14 vs median 1.05.
   ============================================================ */
.hero h1{font-size:clamp(38px,5.4vw,68px);font-weight:300;letter-spacing:-0.01em;line-height:1.05;max-width:15em}
h1{font-size:clamp(34px,4.6vw,60px);letter-spacing:-0.01em;line-height:1.06}
h2{letter-spacing:-0.008em}

/* headline must stay pinned near 24vh as the hero grows — the benchmark warns
   that letting it drift to centre puts Kairos in the design-led camp it cannot
   support without imagery of its own projects. */
.hero{align-items:flex-start}
.hero > .wrap{padding-top:clamp(96px,22vh,200px);padding-bottom:64px}

/* flat scrim, benchmark range 0.40–0.50 (Bechtel 0.40, Arup 0.50) */
.hero::after{opacity:.48}

/* ---- charts ---- */
.chart{margin:32px 0 0;padding:0}
.chart svg{width:100%;height:auto;display:block;max-width:760px}
.bg-navy .chart text{fill:#fff}
figure.chart{border:0}

/* ---- explanatory diagrams: these replace the editorial photography ---- */
.dia{margin:34px 0 0}
.dia svg{width:100%;height:auto;display:block}
.dia.bleed-wide{width:100vw;margin-left:calc(50% - 50vw);max-width:none;padding:0 var(--gutter)}
@media (max-width:760px){.dia{margin-top:24px}}

/* charts and diagrams always take the full content measure — never a narrow grid
   column, which was rendering them at thumbnail size */
.leadin .chart,.leadin .dia,.leadin>.k .chart,.leadin>.k .dia{grid-column:1/-1;width:100%;max-width:none}
.leadin>.k>.chart,.leadin>.k>.dia{display:none}   /* if it landed in the label column, suppress the dupe */
section .chart,section .dia{grid-column:1/-1;width:100%}
.chart svg{max-width:100%}
.chart,.dia{clear:both}
.subhead{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brass-text);margin:28px 0 12px;max-width:none}

/* ============================================================
   ENGAGE INTAKE — /engage/start
   The form is the page.

   There is no masthead, no hero and no lede band. The page opens on a
   running head — the firm's line as the h1 on the left at 17px/400
   sentence case, the step position as a folio at the container's right
   edge — then a hairline, then step 1. At 1440x900 the first counterparty
   row sits ~200px below the top of <main> and the whole of step 1,
   Continue included, is inside the first viewport.

   26px/400 above 25px/300 was not a hierarchy, it was two headline scales
   competing. Demoting the h1 to a running head makes the question the
   reader has to answer the largest thing on the page, which is what an
   intake is for. But 12.5px/600 uppercase took that too far: it made the
   firm's line the same type as "STEP 1 OF 4" and as the step names, five
   uppercase micro-cap items in one 32px band separated only by hue. The
   h1 keeps its running-head JOB and gets its own voice back.

   The sheet is one grid inside the site container: an 880px main column,
   a gutter, then a 280px note column pushed flush right. The top rule,
   the step folio, the contents list and the actions rule all resolve
   against the same two edges — ONE left edge, level with the nav brand,
   and the container's own right edge, level with the nav and the footer.
   The note column used to stop 112px short of that right edge, so both
   rules overshot the last column of content on every step.

   The note column carries the contents list of the four questions and
   nothing else, so it costs the form zero vertical pixels. The step's
   framing sentence stays IN FLOW inside its own fieldset at every width.
   It used to be copied into the column and hidden here, which serialized
   it — and the four contents entries — in front of the heading they
   explain at >=1181px. The list is now authored after .ef-steps and
   placed by grid, so reading order and visual order agree at every width
   with no `order` declaration in this file.

   Every colour is a shipped token except four this block introduces:
   --ef-rule (control boundaries; --border-light is 1.23:1 and cannot
   legally serve as one under 1.4.11) and three error colours the system
   does not ship. Both gaps belong in the design system; they are scoped
   here so the rest of the site is untouched until that call is made.
   No gradients, no shadows, no blur, no pills, brass stays a hairline.
   Contrast figures are computed, not guessed.
   ============================================================ */
.ef-shell{padding:30px 0 var(--pad-y)}

.ef-doc{
  max-width:none;margin:0;
  --ef-main:880px;      /* the form's measure */
  --ef-note:280px;      /* the note column's measure */
  --ef-note-min:230px;  /* below this the form yields width, not the notes */
  --ef-gap:72px}

/* ---------- the sheet ----------
   The running head and the form share one grid, so they share one pair of
   edges. It resolves against the site container rather than a bespoke
   width: the two horizontal rules that bracket the form — the running
   head's and the actions row's — run from the page's left edge to its
   right, exactly like the nav's and the footer's. The COLUMNS stay
   measured: 880px of form, 280px of note held at the right edge of the
   second track, so the note column never grows into the slack. Its 230px
   floor means that when the viewport does get tight it is the form that
   yields width — 802px at 1200 — rather than the orienting device losing
   its lines. */
.ef-mast,.ef{
  display:grid;
  grid-template-columns:minmax(0,var(--ef-main)) minmax(var(--ef-note-min),1fr);
  column-gap:var(--ef-gap)}

/* ---------- the running head ----------
   ~37px including its rule. The h1 is the firm's line; the step position
   is a folio at the container's right edge. No eyebrow: the nav already
   carries "Engage Kairos" with aria-current, and repeating it 40px lower
   said nothing twice. No tick rail either — four aria-hidden segments at
   1.23:1 were a picture of text that is already on the page, and the one
   element here that read as product onboarding furniture. */
.ef-mast{position:relative;align-items:baseline;margin:0;padding:0 0 14px;
  border-bottom:1px solid var(--border-light)}
/* Brass as a mark, never a fill: a 44px segment anchoring the left edge.
   It is on the page at first paint, before any lane is chosen. */
.ef-mast::after{content:"";position:absolute;left:0;bottom:-1px;
  width:44px;height:1px;background:var(--brass)}
/* The h1 is a running head by JOB — one band, zero vertical cost to the
   form — not by being set at toolbar scale. 17px/400 sentence case reads
   as the firm's line at a glance and stays well under the 25px/300 step
   question, so the thing the reader must answer is still the largest type
   on the page. --navy is 14.22:1. */
.ef-title{margin:0;max-width:none;font-size:17px;font-weight:400;
  letter-spacing:-.004em;line-height:1.3;color:var(--navy)}
/* The step position as a folio at the right edge: different size, weight,
   case AND colour from the h1, so the row separates in one fixation.
   --muted is 5.33:1 on white. */
.ef-state{margin:0;max-width:none;font-size:12.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.35;
  color:var(--muted);white-space:nowrap;text-align:right}
/* No step machine, no step position. Expressed in CSS, never as an
   attribute, so the no-JS path needs no scripted cleanup. */
html:not(.js-ef) .ef-state{display:none}

/* ---------- form ---------- */
.ef{margin:26px 0 0}
.ef-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0}

/* ---------- the note column ----------
   Authored AFTER .ef-steps and placed here by grid — grid placement does
   not depend on source order, so the paint is identical and a screen
   reader no longer meets four inert question names before the heading of
   the step it is on.

   justify-self:end anchors it flush to the container's right edge, which
   is where the two rules bracketing the form end. Left to stretch across
   a minmax(230px,1fr) track it stopped at 1280 while both rules ran to
   1392, so they overshot the last column of content by 112px on every
   step. The width is explicit rather than margin-left:auto, because an
   auto margin on a grid item also switches it to fit-content and collapses
   the column to the width of its longest entry (134px). max-width:100%
   keeps it inside the track at the 230px floor, where the form yields
   width and the orienting device does not. */
.ef-rail{grid-column:2;grid-row:1;min-width:0;
  width:var(--ef-note);max-width:100%;justify-self:end}
/* The list owns its own optical alignment — its first entry sits on the
   step heading's cap line — so .ef-rail stays pure grid placement. */
.ef-toc{padding-top:7px}
/* Hidden without the step machine: a contents list of four sections that
   are all already on screen is furniture. */
html:not(.js-ef) .ef-rail{display:none}
.ef-toc-list{list-style:none;margin:0;padding:0}
/* Weight, colour and a brass hairline. No marker segments, no travelling
   bar, no done/current/todo scale, and no underline — underline on a
   non-interactive <li> is the web's link convention offered where there
   is nothing to click. Both states are real, readable values: --muted
   5.33:1, --navy 14.22:1. */
.ef-toc-i{position:relative;margin:0 0 9px;padding-left:16px;font-size:14px;
  line-height:1.45;color:var(--muted)}
.ef-toc-i[aria-current="step"]{color:var(--navy);font-weight:600}
.ef-toc-i[aria-current="step"]::before{content:"";position:absolute;left:0;
  top:.62em;width:8px;height:1px;background:var(--brass)}
/* The framing sentence renders where it is authored — in flow, inside the
   fieldset it explains — at every width and in both paths. */
.ef-note{max-width:60ch;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* ---------- steps ---------- */
.ef-steps{grid-column:1;grid-row:1;min-width:0}
.ef-step{border:0;margin:0;padding:0;min-width:0}
.ef-step[hidden]{display:none}
/* `display` is deliberately NOT set on the legend: overriding it is a
   documented way to lose a fieldset's accessible name in some engine/AT
   pairs. Width and box metrics are safe. */
.ef-legend{padding:0;margin:0;width:100%;max-width:100%}
.ef-h{font-size:clamp(21px,2.2vw,25px);font-weight:300;letter-spacing:-.012em;
  line-height:1.24;color:var(--navy);margin:0 0 20px;max-width:24ch}
/* Focused programmatically on advance, so :focus — :focus-visible does not
   match a scripted focus and the ring would never appear. Nothing in this
   stylesheet removes an outline. */
.ef-h:focus{outline:3px solid var(--navy);outline-offset:6px;border-radius:2px}
/* Step 3's category. The scales here were inverted: "The constraint." at
   25px/300 sat above the question the reader actually has to answer at
   19px/400, and "constraint" appeared four times at once — h1, h2, h3,
   contents entry. The legend h2 stays, because a fieldset needs a legend
   and steps 2 and 4 have one, but it is set as a running head so it reads
   as the category label it is and the question takes the headline scale.
   --muted is 5.33:1. */
.ef-h--cat{font-size:12.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.35;color:var(--muted);
  margin:0 0 14px;max-width:none}
/* The framing sentence is a lede, in flow, in the group it explains. */
.ef-step .ef-note{margin:0 0 24px}
.ef-main{min-width:0}

/* ---------- counterparty: a ruled schedule, not four cards ----------
   296px for four options, three of the four on a single line, and it reads
   as a term sheet rather than a product picker. Every rule here — outer border
   and internal dividers alike — is --ef-rule at 3.84:1. At --border-light
   the four rows merged into one slab and the only line separating adjacent
   selectable options computed to 1.23:1. */
.ef-lanes{display:grid;gap:1px;background:var(--ef-rule);
  border:1px solid var(--ef-rule);border-radius:4px;overflow:hidden}
.ef-lane{position:relative;background:#fff}
/* The radio is a full-size transparent box over the cell, not a 1px point
   in its corner: scroll-into-view, screen magnifiers and any AT that
   tracks the focus rectangle then track the row a sighted user sees
   (878x78 at 1440, never smaller than 878x57). It takes no pointer
   events — the <label for> is the
   click target, which is what keeps :hover on the whole row honest.
   opacity:0 also makes the input's own focus ring transparent, so the
   visible ring is the one drawn on the label and there is never a double
   outline. No outline is ever removed to achieve that. */
.ef-lane input{position:absolute;left:0;top:0;width:100%;height:100%;
  margin:0;opacity:0;pointer-events:none}
.ef-lane label{display:grid;
  grid-template-columns:14px minmax(0,262px) minmax(0,1fr);
  gap:4px 20px;align-items:start;
  padding:18px 22px;cursor:pointer;
  border-left:3px solid transparent}
/* Hover must never borrow the checked state's fill, or a hovered row and
   the chosen one look identical. */
.ef-lane input:not(:checked)+label:hover .ef-box{border-color:var(--navy)}
.ef-lane input:not(:checked)+label:hover .ef-lane-t{color:var(--navy)}
/* :focus-visible for the mouse, plus the scripted case: the validator
   focuses a radio by script, which :focus-visible does not match, and
   aria-invalid="true" is exactly and only that case. outline-offset:-6px
   keeps the ring clear of the 3px brass selection rule at the row's left
   edge, which a -3px offset sat directly on top of. */
.ef-lane input:focus-visible+label,
.ef-lane input[aria-invalid="true"]:focus+label{
  outline:3px solid var(--navy);outline-offset:-6px}
/* Selection carried by three cues, only one of which is colour: the
   indicator fills, the name gains an underline, a brass rule marks the
   row. It survives 1.4.1 with no colour perception at all. */
.ef-lane input:checked+label{border-left-color:var(--brass);
  background:var(--warm-gray)}
.ef-lane input:checked+label .ef-box{background:var(--navy);
  border-color:var(--navy)}
.ef-lane input:checked+label .ef-lane-t{text-decoration:underline;
  text-underline-offset:3px}
/* KNOWN DEVIATION, FLAGGED FOR SIGN-OFF — the brief's "max radius 4px on
   UI" is an absolute, and this is 50%. The reasoning: a square mark says
   "pick as many as apply" on the one control that reconfigures steps 2
   and 3, and a filled square inside a square is the indeterminate-checkbox
   glyph. The 4px cap plainly governs UI chrome — panels, inputs, buttons —
   rather than the intrinsic shape of a control whose meaning is carried by
   its shape. That is an argument, not an authority: it belongs to whoever
   wrote the absolute, not to a comment in a stylesheet. Raised in the
   submission rather than absorbed here. */
.ef-box{width:14px;height:14px;margin-top:4px;border-radius:50%;
  border:1px solid var(--ef-rule);background:#fff}
.ef-lane-t{font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--navy);line-height:1.5}
.ef-lane-d{font-size:14px;line-height:1.5;color:var(--body-text)}

/* ---------- fields ---------- */
.ef-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:40px}
.ef-field{margin:0 0 26px;max-width:560px}
.ef-grid>.ef-field{max-width:none;min-width:0}
/* Two fields in one row desynchronize the moment one hint wraps and its
   neighbour does not — an 18px offset between sibling inputs at 900px.
   Subgrid ties label, hint, control and error to shared row tracks, so
   the controls line up regardless of how the copy above them wraps. */
@supports (grid-template-rows:subgrid){
  .ef-grid>.ef-field{display:grid;grid-row:span 4;grid-template-rows:subgrid}
}
/* Email spans the row so it is not sitting in a half cell with a hole
   beside it, but it is capped at exactly one column — calc(50% - 20px) is
   the track width for a 2-column grid with a 40px gap — so its right edge
   lands on Name's. A 520px cap put a THIRD vertical edge in a 200px-tall
   block: Name at 468, Organization at 928, Email at 569. Two edges is what
   a two-column schedule has; three is a mistake. */
.ef-grid--contact>#f-email{grid-column:1/-1;max-width:calc(50% - 20px)}
.ef-label{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy);line-height:1.5;margin:0 0 6px}
/* Both states are marked, in words, before the field is answered. Marking
   only the optional half leaves the required half with no visible
   instruction at all (3.3.2). */
.ef-opt,.ef-req{font-weight:400;letter-spacing:.02em;text-transform:none;
  font-size:12.5px}
.ef-opt{color:var(--muted)}
.ef-req{color:var(--brass-text)}

/* The constraint question is an h3 AND the textarea's real <label for>. It
   supplies the third heading level, puts the approved per-lane copy on the
   control being answered, and retires "Your answer". It is set at the step
   heading's own scale — the whole layout argument was that the question the
   reader must answer is the largest thing on the page, and on the one step
   where the question IS the step it was being outranked by its own category
   label. 40ch keeps the longest approved question to two lines. */
.ef-q{margin:0 0 12px;max-width:40ch;
  font-size:clamp(21px,2.2vw,25px);font-weight:300;letter-spacing:-.012em;
  line-height:1.24;color:var(--navy)}
.ef-q label{font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer}
/* The required mark must not be set at headline scale beside the question. */
.ef-q .ef-req{font-size:12.5px;letter-spacing:.02em;font-weight:400;
  vertical-align:.28em}

.ef-ctl{display:block;width:100%;max-width:100%;min-width:0;min-height:48px;
  font:inherit;font-size:16px;color:var(--navy);background:#fff;
  border:1px solid var(--ef-rule);border-radius:4px;padding:11px 13px}
.ef-ctl:hover{border-color:var(--navy)}
.ef-ctl:focus{outline:3px solid var(--navy);outline-offset:2px;
  border-color:var(--navy)}
/* Taller and narrower. 780px was a ~95-character measure for prose on a page
   that holds 40ch headings, 60ch ledes and 64ch hints — the wide shallow box
   nobody chooses. 600px is ~72 characters at 16px Inter, and the height is
   what "one paragraph is enough" actually looks like. */
.ef-ctl--area{min-height:190px;max-width:600px;line-height:1.65;padding:13px;
  resize:vertical}
/* The invalid boundary is weight plus colour, and the padding compensates
   so nothing reflows when it appears. */
.ef-ctl[aria-invalid="true"]{border-color:var(--ef-err);border-width:2px;
  padding:10px 12px}
.ef-ctl--area[aria-invalid="true"]{padding:12px}

/* The hint sits ABOVE its control. Guidance printed underneath a field is
   guidance that arrives after the answer has been committed. */
.ef-hint{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0 0 9px;
  max-width:64ch}
.ef-hint:empty{display:none}
/* The inline mark is a word; the role=alert box carries the sentence. The
   two used to print the identical sentence twice inside one viewport. */
.ef-err{font-size:13.5px;line-height:1.5;font-weight:500;
  color:var(--ef-err-text);margin:7px 0 0}
.ef-err:empty{display:none}
.ef-err--group{margin-top:14px}

/* The honeypot: clipped, out of the tab order, and deliberately NOT inside
   an aria-hidden wrapper — a focusable control in an aria-hidden subtree is
   the thing axe flags, and it is the worse defect. It stays exposed to a
   screen reader browsing by form field, which is the accepted cost of a
   honeypot, so its label says plainly what to do with it. */
.ef-trap{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- live regions ----------
   Both are in the DOM on first paint and neither is ever torn down and
   re-created, which is the most common reason a live region silently stops
   announcing. The alert collapses to zero height rather than display:none.
   It sits with the button that triggers it, not at the top of the form
   where the 81px sticky nav covered it. */
.ef-alert{grid-column:1;grid-row:2;margin:0;padding:0;border:0;height:0;
  overflow:hidden;max-width:64ch}
.ef-alert:not(:empty){height:auto;overflow:visible;margin:26px 0 0;
  padding:13px 16px;border:1px solid var(--ef-err);border-left-width:3px;
  border-radius:2px;background:var(--ef-err-bg);color:var(--ef-err-text);
  font-size:14.5px;font-weight:500;line-height:1.5}

/* ---------- actions ---------- */
.ef-actions{grid-column:1/-1;grid-row:3;margin-top:34px;padding-top:22px;
  border-top:1px solid var(--border-light);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.ef-back,.ef-next,.ef-submit{font:inherit;font-size:12.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;min-height:48px;
  padding:14px 30px;border-radius:4px;cursor:pointer}
.ef-next,.ef-submit{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.ef-next:hover,.ef-submit:hover{background:#fff;color:var(--navy)}
.ef-back{background:transparent;color:var(--navy);border:1px solid var(--ef-rule)}
.ef-back:hover{border-color:var(--navy);background:var(--warm-gray)}
.ef-back:focus-visible,.ef-next:focus-visible,.ef-submit:focus-visible{
  outline:3px solid var(--navy);outline-offset:2px}
/* In flight: a darkened navy rather than opacity. Dimming the fill drops
   the white label below 4.5:1; --ef-navy-soft holds it at 8.90:1. */
.ef-submit[aria-disabled="true"],.ef-submit:disabled{
  background:var(--ef-navy-soft);border-color:var(--ef-navy-soft);color:#fff;
  cursor:default}
.ef-submit:disabled:hover{background:var(--ef-navy-soft);color:#fff}
.ef-back[hidden],.ef-next[hidden],.ef-submit[hidden]{display:none}

/* ---------- progressive enhancement ----------
   Three states, all expressed here, none as a `hidden` attribute in source.

   1. No script at all (no .js-ef): four fieldsets, one native POST, Send.
   2. Script present, machine not yet run (.js-ef without .ef--js): step 1
      and Continue only, so a slow parse never paints four fieldsets and
      then collapses to one.
   3. Machine running (.ef--js): [hidden] governs, set at runtime.

   If the machine throws, its catch removes .ef--js and .js-ef and the page
   falls all the way back to state 1. Nothing here hides the actions row:
   a primary control that is invisible during parse is worse than one that
   changes its label. */
.ef:not(.ef--js) .ef-back,
.ef:not(.ef--js) .ef-next{display:none}
html.js-ef .ef:not(.ef--js) .ef-step+.ef-step{display:none}
html.js-ef .ef:not(.ef--js) .ef-back,
html.js-ef .ef:not(.ef--js) .ef-submit{display:none}
html.js-ef .ef:not(.ef--js) .ef-next{display:inline-block}
.ef:not(.ef--js) .ef-step+.ef-step{margin-top:46px}
/* The divider between fieldsets on the no-JS path is drawn INSIDE the
   legend, not as a border-top on the fieldset: a fieldset's border box is
   interrupted by its legend, so the old rule left a hairline running off
   to the right of "The position." */
.ef:not(.ef--js) .ef-step+.ef-step .ef-legend::before{
  content:"";display:block;height:1px;background:var(--border-light);
  margin:0 0 38px}

@media(forced-colors:active){
  .ef-ctl{border-color:CanvasText}
  .ef-lanes{background:CanvasText;border-color:CanvasText}
  .ef-box{border-color:CanvasText;background:Canvas}
  .ef-lane input:checked+label .ef-box{background:Highlight;border-color:Highlight}
  .ef-lane input:checked+label{border-left-color:Highlight;background:Canvas;
    forced-color-adjust:none}
  .ef-lane input:focus+label{outline:3px solid CanvasText;outline-offset:-6px}
  .ef-mast::after{background:CanvasText}
  .ef-alert:not(:empty){border:1px solid CanvasText}
  .ef-submit[aria-disabled="true"],.ef-submit:disabled{background:GrayText;
    border-color:GrayText}
}

/* ---------- narrow ----------
   Below the width at which a 280px note column still fits, the column is
   display:none — NOT clipped. Clipped, it stayed in the accessibility tree,
   so a phone or 400%-zoom user heard "The four questions — The counterparty,
   The position, The constraint, Who is writing" before the step heading on
   every one of the four steps, with no visual counterpart at all: AT-only
   content, duplicating four headings, in exactly the width band a zoom user
   lives in. Nothing is lost by removing it — the step's framing sentence has
   always rendered in flow, and the step position is still in the folio. */
@media(max-width:1180px){
  .ef-mast,.ef{display:block}
  .ef-mast{display:flex;flex-wrap:wrap;align-items:baseline;
    justify-content:space-between;gap:6px 20px}
  .ef-rail{display:none}
  .ef-alert:not(:empty){max-width:none}
}
@media(max-width:900px){
  .ef-grid{grid-template-columns:minmax(0,1fr)}
  .ef-grid--contact>#f-email{max-width:none}
  .ef-lane label{grid-template-columns:14px minmax(0,1fr);gap:6px 16px}
  .ef-lane-d{grid-column:2}
}
@media(max-width:640px){
  .ef-shell{padding:22px 0 var(--pad-y-tight)}
  .ef-h{margin-bottom:16px}
  .ef-lane label{padding:15px 16px;gap:6px 13px}
  .ef-back,.ef-next,.ef-submit{flex:1 1 100%;text-align:center;padding:14px 18px}
}