:root{
  --navy:#101B2E; --ink:#101B2E; --wedg:#8FAEDC; --paper:#F7F8FA; --slate:#5A6B87;
  --teal:#16305B; --teal-soft:#EAF0FA;
  --line:#DFE5EE; --soft:#EDF0F6; --white:#fff;
  --wrap:1140px; --r:20px;
  --shadow:0 1px 2px rgba(22,48,91,.04),0 8px 24px -6px rgba(22,48,91,.08);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
@font-face{font-family:"Inter";src:url(/fonts/inter.woff2)format("woff2");
 font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:"Newsreader";src:url(/fonts/newsreader.woff2)format("woff2");
 font-weight:200 800;font-display:swap;font-style:normal}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:#101B2E;font-family:var(--sans);
 font-size:18.5px;line-height:1.72;-webkit-font-smoothing:antialiased}
img,svg,picture{max-width:100%}
a{color:var(--navy)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;
 letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.22rem}
p{margin:0 0 1.15em;max-width:62ch}
.lede{font-size:clamp(1.14rem,2vw,1.36rem);line-height:1.62;color:#3C4A63}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.15em;
 text-transform:uppercase;color:var(--teal);margin:0 0 16px;
 display:flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--teal);
 border-radius:2px;flex:0 0 auto}
.head.mid .eyebrow{justify-content:center}
.hero .eyebrow{color:var(--wedg)}
.hero .eyebrow::before{background:var(--wedg)}

/* ---------- header ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:10px 16px;z-index:99;
 border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.2)}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
 backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .bar{display:flex;align-items:center;gap:26px;
 max-width:var(--wrap);margin:0 auto;padding:13px 24px}
.logo{height:38px;width:auto;display:block;flex:0 0 auto}
nav.main{margin-left:auto;display:flex;align-items:center;gap:26px}
nav.main a{color:#3C4A63;text-decoration:none;font-size:.93rem;font-weight:500;
 padding:6px 0;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--navy);border-bottom-color:var(--wedg)}
nav.main a[aria-current]{color:var(--navy);border-bottom-color:var(--navy)}
.navgroup{position:relative}
.navgroup>button{display:inline-flex;align-items:center;gap:6px;background:none;
 border:0;font:inherit;font-size:.93rem;font-weight:500;color:#3C4A63;
 cursor:pointer;padding:6px 0;border-bottom:2px solid transparent}
.navgroup>button svg{width:9px;height:6px;transition:transform .18s;
 opacity:.65}
.navgroup>button:hover{color:var(--navy);border-bottom-color:var(--wedg)}
.navgroup>button.on{color:var(--navy);border-bottom-color:var(--navy)}
.navmenu{position:absolute;top:calc(100% + 14px);left:50%;
 transform:translateX(-50%) translateY(-6px);min-width:250px;background:#fff;
 border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
 padding:8px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s}
.navgroup:hover .navmenu,.navgroup:focus-within .navmenu,
.navgroup.open .navmenu{opacity:1;visibility:visible;
 transform:translateX(-50%) translateY(0)}
.navgroup:hover>button svg,.navgroup.open>button svg{transform:rotate(180deg)}
.navmenu::before{content:"";position:absolute;top:-14px;left:0;right:0;
 height:14px}
nav.main .navmenu a{display:block;padding:10px 14px;border-radius:9px;
 border-bottom:0;font-size:.92rem;white-space:nowrap}
nav.main .navmenu a:hover{background:var(--teal-soft);color:var(--navy);
 border-bottom:0}
nav.main .navmenu a[aria-current]{background:var(--soft);border-bottom:0}
/* .btn inside nav loses to `nav.main a` on specificity — restore it */
nav.main a.btn,nav.main a.btn:hover{color:#fff;border-bottom-color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
 background:var(--navy);color:#fff;text-decoration:none;font-weight:600;
 font-size:.95rem;padding:13px 26px;border-radius:999px;border:1px solid var(--navy);
 transition:background .15s,transform .05s}
.btn:hover{background:#0F2444}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.ghost:hover{background:var(--soft)}
.btn.light{background:#fff;color:var(--navy);border-color:#fff}
.btn.light:hover{background:#E9EEF6}
/* ghost + light together = outlined on a dark ground, not another solid */
.btn.ghost.light{background:transparent;color:#fff;
 border-color:rgba(255,255,255,.5)}
.btn.ghost.light:hover{background:rgba(255,255,255,.13);border-color:#fff}
.btn.lg{padding:15px 28px;font-size:1.02rem}
.navbtn{padding:9px 22px;font-size:.9rem;white-space:nowrap}
.menu{display:none;margin-left:auto;background:none;border:1px solid var(--line);
 border-radius:8px;padding:8px 11px;font-size:1.1rem;cursor:pointer;color:var(--navy)}
@media(max-width:1080px){
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
   flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 18px;
   border-bottom:1px solid var(--line)}
  nav.main.open{display:flex}
  nav.main a{padding:12px 0;border-bottom:1px solid var(--soft)}
  nav.main .btn{margin-top:12px}
  .navgroup{position:static}
  .navgroup>button{width:100%;justify-content:space-between;padding:12px 0;
   border-bottom:1px solid var(--soft)}
  .navmenu{position:static;transform:none;opacity:1;visibility:visible;
   border:0;box-shadow:none;padding:0 0 8px 14px;min-width:0;display:none}
  .navgroup.open .navmenu{display:block;transform:none}
  nav.main .navmenu a{padding:10px 0;border-bottom:0;font-size:.9rem}
  .menu{display:block}
}

/* ---------- picture ---------- */
.pic{display:block;position:relative;overflow:hidden;border-radius:var(--r);
 background:var(--soft)}
.pic img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:var(--ar)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.hero::after{content:"";position:absolute;inset:0;
 background:linear-gradient(103deg,rgba(14,25,44,.97) 0%,rgba(16,30,52,.88) 44%,
 rgba(22,48,91,.46) 100%)}

.hero .inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
 padding:clamp(64px,9vw,116px) 24px}
.hero h1{color:#fff;max-width:16ch}
.hero .lede{color:#C3D2E8;max-width:52ch}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
/* ---------- stat row ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);
 margin-top:52px;border-top:1px solid var(--line)}
.stats.four{grid-template-columns:repeat(4,1fr)}
.stat{padding:26px 30px 4px;border-left:1px solid var(--line)}
.stat:first-child{padding-left:0;border-left:0}
.stat .n{font-family:var(--serif);font-weight:500;letter-spacing:-.03em;
 font-size:clamp(2.3rem,4.4vw,3.2rem);line-height:.95;color:var(--navy);
 display:block;font-variant-numeric:tabular-nums}
.stat .n small{font-size:.42em;letter-spacing:0;font-weight:500;
 margin-left:.15em;color:var(--slate)}
.stat .l{display:block;margin-top:14px;font-size:.72rem;font-weight:700;
 letter-spacing:.13em;text-transform:uppercase;color:var(--navy)}
.stat .d{display:block;margin-top:7px;font-size:.88rem;line-height:1.5;
 color:#5A6B87;max-width:26ch}
.hero .stats{border-top-color:rgba(255,255,255,.2)}
.hero .stat{border-left-color:rgba(255,255,255,.14)}
.hero .stat .n{color:#fff}
.hero .stat .n small{color:var(--wedg)}
.hero .stat .l{color:var(--wedg)}
.hero .stat .d{color:#9FB3CE}
@media(max-width:860px){
  .stats,.stats.four{grid-template-columns:repeat(2,1fr)}
  .stat{padding:22px 18px 4px}
  .stat:nth-child(odd){padding-left:0;border-left:0}
}
@media(max-width:460px){
  .stats,.stats.four{grid-template-columns:1fr}
  .stat{padding:20px 0 4px;border-left:0;
   border-top:1px solid rgba(255,255,255,.12)}
  .stat:first-child{border-top:0}
  .stat .d{max-width:none}
}

/* ---------- sections ---------- */
section{padding:clamp(52px,7vw,88px) 0}
section.tight{padding:clamp(36px,4vw,52px) 0}
section.soft{background:var(--paper)}
section.dark{background:var(--ink);color:#E6EDF7}
section.dark h2,section.dark h3{color:#fff}
section.dark p{color:#B9C8DE}
.head{max-width:60ch;margin-bottom:42px}
.head.mid{margin-left:auto;margin-right:auto;text-align:center}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);
 align-items:center}
.split.rev>*:first-child{order:2}
.split.top{align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}
 .split.rev>*:first-child{order:0}}

.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
 padding:32px 34px;box-shadow:var(--shadow);
 transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-2px);
 box-shadow:0 2px 4px rgba(22,48,91,.05),0 16px 36px -10px rgba(22,48,91,.14)}
.card.soft{background:var(--paper);box-shadow:none}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.rnum{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
 background:var(--teal-soft);color:var(--teal);font-family:var(--serif);
 font-size:1.1rem;font-weight:600;margin-bottom:16px}
.card .markicon{width:26px;height:26px;color:var(--teal);margin-bottom:16px;
 display:block}

.steps{counter-reset:s;display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{counter-increment:s;position:relative;background:#fff;
 border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 26px;
 box-shadow:var(--shadow);transition:transform .18s ease}
.step:hover{transform:translateY(-2px)}
.step::before{content:counter(s);display:grid;place-items:center;
 width:40px;height:40px;border-radius:50%;background:var(--teal-soft);
 color:var(--teal);font-weight:600;font-size:1.15rem;font-family:var(--serif);
 margin-bottom:18px}
section.soft .step{background:#fff}
.step h3{font-size:1.1rem;margin-bottom:.45em}
.step p{font-size:1rem;line-height:1.6;color:#33415B;margin-bottom:0}

table.data{width:100%;border-collapse:collapse;font-size:.95rem;margin:0 0 18px}
table.data th,table.data td{text-align:left;padding:13px 14px;
 border-bottom:1px solid var(--line);vertical-align:top}
table.data th{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;
 color:var(--slate);font-weight:700}
table.data td strong{color:var(--navy)}
table.split-work{width:100%;border-collapse:collapse;margin:0 0 18px}
table.split-work th{text-align:left;padding:12px 16px;font-size:.72rem;
 letter-spacing:.12em;text-transform:uppercase;font-weight:700}
table.split-work th:nth-child(2){color:var(--slate)}
table.split-work th:nth-child(3){color:#fff;background:var(--navy);
 border-radius:8px 8px 0 0}
table.split-work td{padding:14px 16px;border-bottom:1px solid var(--line);
 vertical-align:top;font-size:.95rem}
table.split-work td:first-child{font-weight:600;color:var(--navy);width:30%}
table.split-work td:nth-child(2){color:#5A6B87;width:26%}
table.split-work td:nth-child(3){background:#F1F5FB;color:#33415B}
table.split-work tr:last-child td:nth-child(3){border-radius:0 0 8px 8px}
@media(max-width:700px){
 table.split-work,table.split-work tbody,table.split-work tr,
 table.split-work td{display:block;width:auto}
 table.split-work thead{display:none}
 table.split-work tr{margin-bottom:16px;border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
 table.split-work td{border-bottom:0}
 table.split-work td:first-child{background:var(--navy);color:#fff}
 table.split-work td:nth-child(2)::before{content:"You: ";font-weight:600}
 table.split-work td:nth-child(3)::before{content:"Us: ";font-weight:600;
  color:var(--navy)}
}
/* ---------- "is this you" recognition grid ---------- */
.says{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.says{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.says{grid-template-columns:1fr}}
.say{background:#fff;border:1px solid var(--line);border-radius:18px;
 padding:26px 28px 24px;position:relative;box-shadow:var(--shadow);
 transition:transform .18s ease}
.say:hover{transform:translateY(-2px)}
.say::before{content:"“";position:absolute;top:8px;left:20px;
 font-family:var(--serif);font-size:3.4rem;line-height:1;color:var(--teal);
 opacity:.18}
.say p{margin:0;position:relative;font-size:1.06rem;line-height:1.55;
 color:#33415B}
.saysfoot{text-align:center;margin-top:34px;font-size:1.14rem;
 color:#3C4A63;max-width:56ch;margin-left:auto;margin-right:auto}

/* ---------- case cards ---------- */
.cases{display:grid;gap:20px;grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.cases{grid-template-columns:1fr}}
.case{background:#fff;border:1px solid var(--line);border-radius:var(--r);
 box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.case .top{background:var(--navy);color:#fff;padding:18px 26px}
.case .top span{display:block;font-size:.7rem;font-weight:700;
 letter-spacing:.13em;text-transform:uppercase;color:var(--wedg)}
.case .top h3{margin:6px 0 0;color:#fff;font-size:1.16rem}
.case .body{padding:24px 26px 26px}
.case dl{margin:0}
.case dt{font-size:.7rem;font-weight:700;letter-spacing:.12em;
 text-transform:uppercase;color:var(--teal);margin-bottom:5px}
.case dd{margin:0 0 18px;font-size:.98rem;line-height:1.6;color:#3C4A63}
.case dd:last-child{margin-bottom:0}
.case .risk{background:#FDF3F2;border-left:3px solid #C0524A;padding:12px 16px;
 border-radius:8px;color:#7A342E;font-size:.94rem}

/* ---------- full-width statement band ---------- */
.statement{position:relative;overflow:hidden;background:var(--ink)}
.statement img{position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;opacity:.34}
.statement::after{content:"";position:absolute;inset:0;z-index:1;
 background:radial-gradient(ellipse at center,rgba(16,27,46,.86) 0%,
 rgba(16,27,46,.62) 55%,rgba(16,27,46,.45) 100%)}
.statement .in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
 padding:clamp(64px,9vw,120px) 24px;text-align:center}
.statement p{font-family:var(--serif);font-weight:400;color:#fff;
 font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.25;letter-spacing:-.02em;
 max-width:20ch;margin:0 auto}
.statement span{display:block;margin-top:22px;color:var(--wedg);
 font-size:.95rem;font-family:var(--sans)}

/* ---------- asymmetric contrast: 2 things vs everything else ---------- */
.contrast{display:grid;grid-template-columns:0.85fr 1.15fr;gap:22px;
 align-items:start}
@media(max-width:820px){.contrast{grid-template-columns:1fr}}
.cbox{border-radius:26px;padding:34px 36px;height:100%}
.cbox.you{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.cbox.us{background:linear-gradient(155deg,#1C4173 0%,#101B2E 55%,#12274A 100%);
 color:#fff;box-shadow:0 12px 32px -10px rgba(22,48,91,.35)}
.cbox .cnum{font-family:var(--serif);font-size:3.1rem;line-height:1;
 letter-spacing:-.03em;display:block;margin-bottom:6px}
.cbox.you .cnum{color:var(--teal)}
.cbox.us .cnum{color:#fff}
.cbox .ctitle{display:block;font-size:.74rem;font-weight:700;
 letter-spacing:.13em;text-transform:uppercase;margin-bottom:22px}
.cbox.you .ctitle{color:var(--slate)}
.cbox.us .ctitle{color:var(--wedg)}
.cbox ul{list-style:none;padding:0;margin:0}
.cbox.you li{font-size:1.06rem;font-weight:600;color:var(--navy);
 padding:13px 0;border-top:1px solid var(--line)}
.cbox.you li:first-child{border-top:0;padding-top:0}
.cbox.us li{position:relative;padding:9px 0 9px 26px;font-size:.97rem;
 color:#D3DFEF;border-top:1px solid rgba(255,255,255,.1)}
.cbox.us li:first-child{border-top:0}
.cbox.us li::before{content:"";position:absolute;left:0;top:1.15em;width:12px;
 height:7px;border-left:2px solid #6FD3BE;border-bottom:2px solid #6FD3BE;
 transform:rotate(-45deg)}
.cbox .cfoot{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line);
 font-size:.92rem;line-height:1.5;color:var(--slate)}
.cbox.us .two{columns:2;column-gap:30px}
.cbox.us .two li{break-inside:avoid}
@media(max-width:560px){.cbox.us .two{columns:1}
 .cbox{padding:24px 22px}}

.logos{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.logos span{border:1px solid var(--line);border-radius:999px;padding:10px 20px;background:#fff;
 font-size:.88rem;font-weight:600;color:var(--navy);background:#fff}
.logos span.soon{color:#5A6B87;font-weight:500;border-style:dashed}

/* the never-list: a promise panel, deliberately austere */
.never{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
 gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
 background:#fff;box-shadow:var(--shadow)}
.never li{list-style:none;margin:0;padding:26px 28px;
 border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.never li strong{display:block;font-family:var(--serif);font-weight:500;
 font-size:1.18rem;line-height:1.25;letter-spacing:-.01em;color:var(--navy);
 margin-bottom:9px}
.never li p{margin:0;font-size:.97rem;color:#33415B;max-width:none}
.never li .x{display:inline-flex;align-items:center;justify-content:center;
 width:26px;height:26px;border-radius:50%;background:#FBEDEC;color:#B4453C;
 font-size:1rem;line-height:1;margin-bottom:14px;font-weight:600}

.promise{background:var(--navy);color:#fff;border-radius:var(--r);
 padding:40px 44px;display:grid;grid-template-columns:1.1fr 1fr;gap:36px;
 align-items:center}
.promise h2{color:#fff;margin:0 0 12px}
.promise p{color:#C9D6EA;margin:0;max-width:52ch}
.promise .terms{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.promise .terms li{display:flex;gap:13px;align-items:flex-start;
 font-size:.99rem;color:#E8EEF7}
.promise .terms li span.k{flex:0 0 auto;font-family:var(--serif);
 font-size:1.5rem;line-height:1;color:#fff;min-width:66px}
@media(max-width:860px){.promise{grid-template-columns:1fr;padding:32px 26px}}

.kitgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 gap:20px}
.kitgrid.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.kitgrid.two{grid-template-columns:1fr}}
.kit{border:1px solid var(--line);border-radius:var(--r);background:#fff;
 padding:26px 28px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.kit h3{margin:0 0 8px}
.kit p{font-size:.97rem;color:#33415B;max-width:none;flex:1 1 auto}
.kit .meta{font-size:.79rem;font-weight:700;letter-spacing:.12em;
 text-transform:uppercase;color:var(--teal);margin:0 0 14px}
.kit .dl{margin-top:16px;font-weight:600;font-size:.95rem}

.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
 background:#fff}
.creds div{padding:22px 26px;border-right:1px solid var(--line)}
.creds div:last-child{border-right:0}
.creds strong{display:block;font-family:var(--serif);font-weight:500;
 font-size:1.1rem;color:var(--navy);margin-bottom:6px}
.creds p{margin:0;font-size:.94rem;color:#33415B;max-width:none}

nav.crumbs{font-size:.86rem;color:#5A6B87;padding:14px 0 12px}
nav.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
 align-items:center;gap:7px}
nav.crumbs li{display:flex;align-items:center;gap:7px;margin:0}
nav.crumbs li+li::before{content:"/";color:#B6C0CE}
nav.crumbs a{color:#5A6B87;text-decoration:none;border-bottom:1px solid #D6DEE9}
nav.crumbs a:hover{color:var(--navy);border-bottom-color:var(--navy)}
nav.crumbs [aria-current]{color:#33415B}
.readmore{margin:26px 0 0;padding:20px 24px;background:var(--cream);
 border:1px solid var(--line);border-radius:var(--r);font-size:.98rem}
.readmore p{margin:0;max-width:none}

details.faq{border-bottom:1px solid var(--line);padding:4px 0}
details.faq summary{cursor:pointer;padding:17px 40px 17px 0;font-weight:600;
 position:relative;list-style:none;font-size:1.02rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:6px;top:15px;
 font-size:1.5rem;color:var(--navy);font-weight:400;line-height:1}
details.faq[open] summary::after{content:"\2013"}
details.faq .a{padding:0 40px 20px 0;color:#33415B}
details.faq .a p:last-child{margin-bottom:0}

.note{background:#FFF9E9;border:1px solid #E8D9AE;border-left:4px solid #C9A227;
 border-radius:9px;padding:17px 20px;font-size:.94rem;color:#5E4E1E}
.note strong{color:#4A3D14}
.callout{background:var(--teal-soft);border-radius:var(--r);padding:28px 32px;
 border-left:4px solid var(--teal)}

ul.ticks{list-style:none;padding:0;margin:0 0 18px}
ul.ticks li{position:relative;padding-left:34px;margin-bottom:16px;
 line-height:1.6}
ul.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:17px;
 height:10px;border-left:3px solid var(--teal);border-bottom:3px solid var(--teal);
 transform:rotate(-45deg)}
section.dark ul.ticks li::before{border-color:var(--wedg)}

.embed{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
 background:var(--paper)}
.embed iframe{display:block;width:100%;border:0;min-height:760px}
.embed .fallback{padding:34px;text-align:center;color:var(--slate)}

.channels{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);
 overflow:hidden}
.channel{display:grid;grid-template-columns:190px 1fr;gap:20px;padding:19px 24px;
 border-bottom:1px solid var(--line);align-items:baseline}
.channel:last-child{border-bottom:0}
.channel dt{font-weight:600;color:var(--navy)}
.channel dd{margin:0;color:#33415B}
.channel dd code{background:var(--soft);padding:2px 8px;border-radius:5px;
 font-size:.92em}
@media(max-width:640px){.channel{grid-template-columns:1fr;gap:4px}}

.cta-band{background:linear-gradient(150deg,#1C4173 0%,#101B2E 52%,#12274A 100%);
 color:#fff;border-radius:26px;padding:clamp(38px,5.5vw,60px);text-align:center;
 box-shadow:0 16px 40px -14px rgba(22,48,91,.42)}
.cta-band h2{color:#fff;margin-bottom:.35em}
.cta-band p{color:#C3D2E8;max-width:52ch;margin:0 auto 26px}
.cta-band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#8FA2BE;padding:52px 0 22px;
 font-size:.875rem;position:relative;overflow:hidden}
footer.site::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
 background:linear-gradient(90deg,var(--teal),var(--wedg),var(--navy))}
footer.site .cols{display:grid;grid-template-columns:1.7fr 1fr 1.15fr 1fr;
 gap:24px 34px;padding-bottom:26px;
 border-bottom:1px solid rgba(255,255,255,.11)}
@media(max-width:960px){footer.site .cols{grid-template-columns:1fr 1fr 1fr}
 footer.site .brand{grid-column:1/-1}}
@media(max-width:620px){footer.site .cols{grid-template-columns:1fr 1fr;gap:20px 24px}}
@media(max-width:420px){footer.site .cols{grid-template-columns:1fr}}
footer.site .logo{height:34px;margin-bottom:12px}
footer.site .brand p{margin:0 0 14px;max-width:32ch;line-height:1.55;
 color:#8FA2BE;font-size:.85rem}
footer.site .brand .call{display:inline-block;color:#fff;font-weight:600;
 font-size:1.02rem;letter-spacing:.01em;margin:0 0 4px;text-decoration:none}
footer.site .brand .call:hover{color:var(--wedg)}
footer.site .brand .mail{font-size:.83rem;color:#8FA2BE;text-decoration:none;
 display:block;margin-bottom:0}
footer.site .brand .mail:hover{color:#fff}
/* Names a section for screen readers without drawing it. Used where a card
   grid follows the h1 with no visible heading of its own: without this the
   cards' h3s skip a level, and the outline a screen reader announces has a
   hole in it. */
.vh{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}
footer.site h2{color:var(--wedg);font-family:var(--sans);font-size:.66rem;
 text-transform:uppercase;letter-spacing:.14em;margin:0 0 10px;font-weight:700}
footer.site a{color:#C9D6EA;text-decoration:none;display:block;
 margin-bottom:6px;line-height:1.4}
footer.site a:hover{color:#fff}
footer.site .fine{padding-top:18px;display:flex;justify-content:space-between;
 gap:16px;flex-wrap:wrap;font-size:.78rem;color:#7E92B0}
footer.site .fine a{display:inline;margin:0 0 0 16px;color:#8FA2BE}
footer.site .fine a:hover{color:#fff}

/* ---------------------------------------------------------------------
   Public forms. Used on /refer/ and /contact/. Kept in the site sheet
   rather than inline so the pages need no inline style or script.
   --------------------------------------------------------------------- */
.pform{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:26px 26px 24px;box-shadow:var(--shadow)}
.pform h3{margin:0 0 6px;color:var(--navy)}
.pform .sub{color:var(--slate);font-size:.93rem;margin:0 0 20px}
.pform fieldset{border:0;padding:0;margin:0 0 18px}
.pform legend{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;color:var(--navy);padding:0;margin:0 0 12px}
.frow{display:grid;gap:14px;margin-bottom:14px}
.frow.c2{grid-template-columns:1fr 1fr}
.frow.c3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:640px){.frow.c2,.frow.c3{grid-template-columns:1fr}}
.fld label{display:block;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;color:var(--slate);margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;box-sizing:border-box;
  font:inherit;font-size:.95rem;color:#101B2E;background:#fff;
  border:1px solid #CFD6E2;border-radius:8px;padding:10px 12px;
  transition:border-color .12s,box-shadow .12s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,48,91,.12)}
.fld textarea{resize:vertical;min-height:88px}
.fld .hint{font-size:.8rem;color:var(--slate);margin:5px 0 0}
.fld.check{display:flex;gap:10px;align-items:flex-start}
.fld.check input{width:auto;margin-top:3px}
.fld.check label{text-transform:none;letter-spacing:0;font-size:.92rem;
  font-weight:400;color:#33415B;margin:0}
.filebox{border:2px dashed var(--wedg);border-radius:10px;padding:20px;
  text-align:center;background:#F8FAFD}
.filebox input[type=file]{width:auto;border:0;background:transparent;padding:6px 0}
.filebox .chosen{display:block;margin-top:6px;font-size:.88rem;
  color:var(--navy);font-weight:600}
.ts-holder{margin:16px 0 6px;min-height:66px}
.formnote{margin:14px 0 0;font-size:.92rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.seclist{list-style:none;padding:0;margin:0}
.seclist li{position:relative;padding:0 0 10px 26px;font-size:.92rem;
  color:var(--slate)}
.seclist li::before{content:"";position:absolute;left:2px;top:6px;width:9px;
  height:9px;border-radius:2px;background:var(--teal)}
.seclist li strong{color:var(--navy)}

/* =====================================================================
   Readability and layout corrections, August 2026
   Appended so the original sheet stays legible as the base, and every
   change below is a deliberate override with a reason next to it.
   ===================================================================== */

/* ---- the promise panel -------------------------------------------------
   The terms were laid out with flex and an auto-width key, so "7 days",
   "Same day", "Before" and "1 name" each took their own width and the
   sentences beside them started at four different places. Putting the grid
   on the list rather than on each row makes every key share one column,
   so the descriptions line up. Hairlines between rows so it scans. */
.promise .terms{display:grid;grid-template-columns:max-content 1fr;
 gap:0 22px;margin:0;padding:0;list-style:none}
.promise .terms li{display:contents}
.promise .terms li > span.k{font-family:var(--serif);font-weight:500;
 font-size:1.12rem;line-height:1.45;color:#fff;white-space:nowrap;
 padding:13px 0;border-top:1px solid rgba(255,255,255,.16)}
.promise .terms li > span:not(.k){color:#C9D6EA;font-size:.97rem;
 line-height:1.55;padding:13px 0;border-top:1px solid rgba(255,255,255,.16);
 max-width:46ch}
.promise .terms li:first-child > span{border-top:0;padding-top:0}
@media(max-width:560px){
  .promise .terms{grid-template-columns:1fr;gap:0}
  .promise .terms li > span.k{padding-bottom:2px;border-top:1px solid rgba(255,255,255,.16)}
  .promise .terms li > span:not(.k){padding-top:0;border-top:0}
  .promise .terms li:first-child > span.k{border-top:0}
}

/* ---- small text --------------------------------------------------------
   Uppercase labels at 11.2 to 11.8px were below what is comfortable,
   particularly on a phone held at arm's length by somebody in their
   seventies, which is a large part of who reads this. Nothing goes below
   12.5px now, and the labels get a touch more letterspacing to stay
   legible at the larger size. */
.eyebrow{font-size:.82rem;letter-spacing:.14em}
.stat .l,.stats .l{font-size:.8rem;letter-spacing:.09em}
.cbox .ctitle{font-size:.82rem}
.case .top span{font-size:.8rem}
.fine,footer.site .fine{font-size:.82rem}
.hint,.fine p{font-size:.9rem}
table.data th{font-size:.8rem}

/* ---- measure -----------------------------------------------------------
   Two paragraphs sat at 133 characters a line, which is roughly double
   what is comfortable. Nothing runs past 74. */
p,li,dd{max-width:74ch}
.lede{max-width:60ch}
/* cards and callouts are narrower boxes already, but on a wide screen a
   full-width callout was still running to 133 characters. */
.card p,.card li{max-width:none}
.callout p,.warnbox p,.errbox p{max-width:78ch}
.head p{max-width:68ch}
.head.mid p{margin-left:auto;margin-right:auto}

/* ---- data tables on a phone -------------------------------------------
   A four or five column table cannot fit on a 390px screen and was running
   90px past the edge. Below 720px each row becomes its own small block with
   the column heading printed beside each value, which is readable rather
   than merely reachable. The headings come from data-l attributes written
   into the markup at build time. */
@media(max-width:720px){
  table.data{display:block;border-collapse:separate}
  table.data thead{display:none}
  table.data tbody,table.data tr,table.data td,table.data th{display:block;width:auto}
  table.data tr{border:1px solid var(--line);border-radius:12px;
    padding:6px 4px;margin:0 0 12px;background:#fff}
  table.data td,table.data th{border:0;padding:9px 14px;text-align:left}
  table.data td[data-l]::before,table.data th[data-l]::before{
    content:attr(data-l);display:block;font-size:.72rem;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--slate);
    margin-bottom:3px}
  table.data td+td,table.data th+td{border-top:1px solid var(--soft)}
  table.data tr th:first-child{background:var(--soft);border-radius:8px 8px 0 0;
    font-weight:600;color:var(--navy)}
}

/* ---- rhythm ------------------------------------------------------------
   A little more air between sections on a phone, where everything was
   running together into one long column. */
@media(max-width:720px){
  section{padding-top:44px;padding-bottom:44px}
  .head{margin-bottom:26px}
  h2{margin-bottom:.45em}
  .grid{gap:18px}
}

/* ---- figures -----------------------------------------------------------
   Photos placed through the body of a page, with an optional caption. Used
   on the pages that were previously walls of text. */
figure.shot{margin:34px 0;border-radius:var(--r);overflow:hidden;
 background:var(--soft);box-shadow:var(--shadow)}
figure.shot img{display:block;width:100%;height:auto;aspect-ratio:16/7;
 object-fit:cover}
figure.shot figcaption{font-size:.9rem;color:var(--slate);padding:13px 20px;
 background:#fff;border-top:1px solid var(--line);margin:0}
@media(max-width:720px){figure.shot img{aspect-ratio:3/2}}

figure.inset{margin:0;border-radius:var(--r);overflow:hidden;
 box-shadow:var(--shadow);background:var(--soft)}
figure.inset img{display:block;width:100%;height:auto;aspect-ratio:4/3;
 object-fit:cover}

/* A band that pairs a photo with a short piece of text. */
.band{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.band.rev > figure{order:2}
@media(max-width:860px){.band{grid-template-columns:1fr;gap:24px}
  .band.rev > figure{order:0}}

/* The read-more note under the FAQs and the callouts were both running past
   what is comfortable on a wide screen. */
.readmore p{max-width:70ch}
.callout p,.warnbox p,.errbox p{max-width:68ch}

/* =====================================================================
   ===================  DESIGN SYSTEM v2, August 2026  =================
   =====================================================================

   A full refresh layered over the original sheet. Three things were
   wrong and they were all doing damage at once:

   1. The palette. A single cold navy did the work of a background, a
      brand colour and a text colour, so everything it touched went
      muddy, and the hero in particular read as a grey smear over a
      photograph you could not see.

   2. The type. Newsreader at weight 500 with default tracking is a
      reading face being asked to do a display job. Headlines looked
      thin and wide rather than confident.

   3. The section labels. A hairline dash followed by 11.8px uppercase
      letterspaced to .15em is a pattern from about 2016 and it looked
      like a caption that had lost its picture.

   The palette below is two colours and a set of warm neutrals. Deep
   teal carries every action and accent. Terracotta appears only on
   numbers and only rarely, so it keeps its force. Everything else is
   paper, ink and line.
   ===================================================================== */

@font-face{font-family:"Fraunces";src:url(/fonts/fraunces.woff2)format("woff2");
 font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:"Jakarta";src:url(/fonts/jakarta.woff2)format("woff2");
 font-weight:200 800;font-display:swap;font-style:normal}

:root{
  /* paper and ink */
  --paper:#F7F8FA;          /* warm page base */
  --surface:#FFFFFF;
  --sand:#EDF0F6;           /* soft blocks */
  --line:#DFE5EE;
  --ink:#101B2E;            /* headings */
  --body:#33415B;           /* running text */
  --muted:#5A6B87;

  /* brand */
  --deep:#16305B;           /* primary, deep teal */
  --deep-2:#0F2547;
  --tint:#EAF0FA;           /* teal wash */
  --clay:#31558C;           /* used only on figures, sparingly */
  --clay-tint:#EDF2FA;

  /* legacy names still referenced throughout the old sheet, remapped
     so nothing has to be hunted down and rewritten */
  --navy:#101B2E;
  --teal:#16305B;
  --teal-soft:#EAF0FA;
  --wedg:#8FAEDC;
  --slate:#4F5E70;
  --soft:#EDF0F6;
  --white:#FFFFFF;

  --serif:"Fraunces","Newsreader",Georgia,serif;
  --sans:"Jakarta","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1180px;
  --r:18px;
  --shadow:0 1px 2px rgba(16,27,46,.04),0 12px 32px -12px rgba(16,27,46,.14);
  --shadow-lg:0 2px 4px rgba(16,27,46,.04),0 28px 60px -20px rgba(16,27,46,.20);
}

body{background:var(--paper);color:var(--body);font-family:var(--sans);
 font-size:18px;line-height:1.68;font-feature-settings:"ss01","cv05"}

/* ---- type ---------------------------------------------------------------
   Fraunces is an optical-size variable face. Setting opsz high at display
   sizes tightens the letterforms and sharpens the contrast, which is what
   makes a headline look drawn rather than merely enlarged. */
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);
 font-variation-settings:"opsz" 90,"SOFT" 0,"WONK" 0;
 font-weight:600;letter-spacing:-.022em;line-height:1.08}
h1{font-size:clamp(2.5rem,5.4vw,4rem);font-variation-settings:"opsz" 144;
 letter-spacing:-.03em}
h2{font-size:clamp(1.85rem,3.6vw,2.7rem)}
h3{font-size:1.3rem;line-height:1.25;letter-spacing:-.015em;
 font-variation-settings:"opsz" 40}
h4{font-size:1.05rem}
p{color:var(--body)}
.lede{font-size:clamp(1.2rem,2.1vw,1.42rem);line-height:1.58;color:#3C4A63;
 font-weight:400}
strong,b{font-weight:650;color:#26364F}
a{color:var(--deep)}

/* ---- section labels -----------------------------------------------------
   The dash is gone. A label is now a small tinted chip, which reads as a
   deliberate piece of navigation rather than a stray caption, and holds
   up at a size somebody can actually read. */
.eyebrow{display:inline-flex;align-items:center;gap:8px;
 font-size:.82rem;font-weight:700;letter-spacing:.085em;text-transform:uppercase;
 color:var(--deep);background:var(--tint);border-radius:999px;
 padding:7px 15px 7px 13px;margin:0 0 20px;line-height:1;
 border:1px solid rgba(22,48,91,.10)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;
 background:var(--deep);flex:0 0 auto}
.head.mid .eyebrow{margin-left:auto;margin-right:auto}
.head.mid{text-align:center}
.hero .eyebrow{color:#16305B;background:rgba(255,255,255,.86);
 border-color:rgba(22,48,91,.16)}
.hero .eyebrow::before{background:var(--clay)}

/* ---- buttons ---- */
.btn{font-family:var(--sans);font-weight:650;letter-spacing:-.005em;
 border-radius:999px;background:var(--deep);color:#fff;border:1px solid var(--deep);
 box-shadow:0 1px 2px rgba(22,48,91,.18);transition:.16s ease}
.btn:hover{background:var(--deep-2);border-color:var(--deep-2);
 transform:translateY(-1px);box-shadow:0 6px 18px -6px rgba(22,48,91,.45)}
.btn.ghost{background:transparent;color:var(--deep);border-color:rgba(22,48,91,.28);
 box-shadow:none}
.btn.ghost:hover{background:var(--tint);color:var(--deep-2)}
.btn.light{background:#fff;color:var(--deep);border-color:#fff}
.btn.light:hover{background:#F3F8F6}
.btn.ghost.light{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn.ghost.light:hover{background:rgba(255,255,255,.12)}

/* ---- header ---- */
header.site{background:rgba(253,251,247,.88);border-bottom:1px solid var(--line)}
header.site .bar{padding:15px 24px;gap:30px}
nav.main a{color:#3A4859;font-weight:550}
nav.main a:hover,nav.main .navgroup>button:hover{color:var(--deep)}
nav.main .navgroup>button{font-family:var(--sans);font-weight:550;color:#3A4859}
nav.main a.on,nav.main .navgroup>button.on{color:var(--deep)}
.navbtn{padding:11px 20px}
.navmenu{border-radius:14px;border:1px solid var(--line);
 box-shadow:var(--shadow-lg);background:#fff;padding:8px}
.navmenu a{border-radius:9px;padding:9px 13px}
.navmenu a:hover{background:var(--tint)}

/* ---- surfaces ---- */
section.soft{background:var(--sand)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
 box-shadow:var(--shadow)}
.card.soft{background:var(--sand);box-shadow:none}
.callout{background:var(--tint);border-left:3px solid var(--deep);
 border-radius:0 14px 14px 0}
.cta-band{background:linear-gradient(135deg,#16305B 0%,#16305B 55%,#101B2E 100%);
 border-radius:24px;color:#fff}
.cta-band h2{color:#fff}
.cta-band p{color:#C3D2E8}

/* ---- the hero -----------------------------------------------------------
   Before: a photograph at 34% opacity under a 97% opaque gradient on a dark
   navy ground. The picture was doing nothing but making the panel look
   dirty, and white text on muddy mid-blue is the least legible combination
   on the page.

   Now the type sits on warm paper where it is properly readable, and the
   photograph gets its own space at full strength where it can be seen.
   Note that .bg is a sibling of .inner in the markup, not a child, so the
   grid has to live on .hero itself. */
.hero{background:var(--paper);color:var(--body);overflow:visible;
 display:grid;grid-template-columns:1.04fr .96fr;
 gap:clamp(28px,4.5vw,60px);align-items:center;
 max-width:var(--wrap);margin:0 auto;
 padding:clamp(40px,5vw,72px) 24px clamp(36px,4.5vw,60px)}
.hero::after{display:none}
.hero .inner{position:static;padding:0;max-width:none;margin:0}
.hero h1{color:var(--ink);max-width:13ch}
.hero .lede{color:#3C4A63;max-width:38ch}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

.hero .bg{order:2;position:relative;inset:auto}
.hero .bg::before{content:"";position:absolute;inset:-16px -16px 16px 16px;
 background:var(--tint);border-radius:26px;z-index:0}
.hero .bg img{position:relative;z-index:1;opacity:1;width:100%;height:auto;
 aspect-ratio:4/3.2;object-fit:cover;object-position:50% 35%;
 border-radius:20px;box-shadow:var(--shadow-lg)}

.hero .stats{margin-top:32px;border-top:1px solid var(--line);
 grid-template-columns:repeat(3,auto);gap:0;justify-content:start}
.hero .stat{padding:18px 24px 0 0;border-left:0}
.hero .stat + .stat{padding-left:24px;border-left:1px solid var(--line)}
.hero .stat .n{font-size:clamp(1.6rem,2.6vw,2rem);color:var(--deep)}
.hero .stat .n small{color:var(--muted)}
.hero .stat .l{margin-top:7px;font-size:.82rem;letter-spacing:.09em;color:var(--ink)}
.hero .stat .d{display:none}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:30px}
  .hero .bg{order:-1;margin-bottom:8px}
  .hero .bg::before{inset:-10px -10px 10px 10px}
  .hero .bg img{aspect-ratio:16/10;object-position:50% 30%}
  .hero h1,.hero .lede{max-width:none}
  .hero .stats{grid-template-columns:repeat(3,1fr)}
  .hero .stat{padding:16px 8px 0 0}
  .hero .stat + .stat{padding-left:12px}
}

/* the nav call to action was clipping its own label */
.navbtn{padding:11px 22px;line-height:1.2;white-space:nowrap}
nav.main{gap:22px}

/* ---- stats elsewhere on the site ---- */
.stat .n{color:var(--ink);font-weight:600;font-variation-settings:"opsz" 120}
.stat .l{color:var(--deep);letter-spacing:.1em}
.stat .d{color:var(--muted)}

/* ---- numbers that carry an idea get the one warm colour on the site ---- */
.stats.four .stat .n,.rnum,.cnum{color:var(--clay)}

/* Any page that still carries the light-on-dark hero variants: on the new
   paper hero they would be white on white, so force them back. */
.hero .eyebrow{color:var(--deep)!important;background:var(--tint);
 border-color:rgba(22,48,91,.14)}
.hero .eyebrow::before{background:var(--clay)}
.hero .btn.light{background:var(--deep);color:#fff;border-color:var(--deep)}
.hero .btn.light:hover{background:var(--deep-2);border-color:var(--deep-2)}
.hero .btn.ghost.light{background:transparent;color:var(--deep);
 border-color:rgba(22,48,91,.28)}
.hero .btn.ghost.light:hover{background:var(--tint)}
.btn.lg{padding:15px 28px;font-size:1rem}

/* ---- the offer block ----------------------------------------------------
   Replaces a row of three big abstract numbers, each of which needed a
   sentence underneath to mean anything. Three cards, each with a short
   label, a claim and the qualification, which is how somebody actually
   reads an offer. */
.offer{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:900px){.offer{grid-template-columns:1fr}}
.offer .o{background:var(--surface);border:1px solid var(--line);
 border-radius:var(--r);padding:26px 26px 24px;box-shadow:var(--shadow);
 position:relative;overflow:hidden}
.offer .o::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
 background:var(--deep)}
.offer .ok{display:inline-block;font-size:.82rem;font-weight:700;
 letter-spacing:.11em;text-transform:uppercase;color:var(--deep);
 background:var(--tint);border-radius:999px;padding:5px 11px;margin-bottom:14px}
.offer .o h3{margin:0 0 9px;font-size:1.22rem}
.offer .o p{margin:0;font-size:.95rem;color:var(--body)}

/* The manual fallback on the referral form, folded away so the common case
   is four boxes and an attachment rather than a page of typing. */
.pform details.manual{margin-top:20px;border-top:1px solid var(--line);
 padding-top:16px}
.pform details.manual summary{cursor:pointer;font-size:.92rem;color:var(--deep);
 font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
.pform details.manual summary::-webkit-details-marker{display:none}
.pform details.manual summary::before{content:"+";display:inline-flex;
 align-items:center;justify-content:center;width:20px;height:20px;
 border-radius:50%;background:var(--tint);color:var(--deep);font-weight:700;
 font-size:.9rem;line-height:1}
.pform details.manual[open] summary::before{content:"–"}
.pform .filebox label{display:block;text-transform:none;letter-spacing:0;
 font-size:.95rem;color:#3C4A63;font-weight:400;margin-bottom:10px}

/* ---- reading measure inside disclosure answers -------------------------
   A paragraph inside an open FAQ answer was inheriting the wide 74ch cap
   set for body copy, which at 1440 runs past 100 characters a line. Long
   lines are the single most common reason a page reads as heavy. */
/* ch is unreliable here: the display sans has a wide zero, so 68ch lands
   near 900px. Measure is therefore capped in em, which tracks the font
   actually rendering. Roughly 68 to 74 real characters a line. */
p,li,dd{max-width:37em}
.lede{max-width:34em}
details.faq .a p,details.faq .a li{max-width:38em}
.callout p,.warnbox p,.errbox p,.readmore p{max-width:40em}
.hero p,.cta-band p,.promise p,.head p{max-width:34em}

/* ---- the header call to action ----------------------------------------
   `nav.main a` outranks `.btn` and `.navbtn` on specificity, so the pill
   was inheriting the plain link padding of 6px 0 and the label sat over
   its own edges. Match the selector weight rather than reaching for
   !important. */
nav.main a.btn.navbtn{padding:11px 22px;line-height:1.15;white-space:nowrap;
 border-bottom:0}


/* =====================================================================
   MOTION AND FINISH
   ---------------------------------------------------------------------
   Two rules govern everything below.

   1. Nothing here may hide content. The reveal is declared inside
      @supports (animation-timeline: view()) so a browser without
      scroll driven animations simply renders the page, and the whole
      block is inside prefers-reduced-motion: no-preference so anyone
      who has asked their operating system for less movement gets a
      still page. There is no JavaScript involved, which matters
      because the site ships a Content-Security-Policy with no
      'unsafe-inline'.

   2. Movement is small. 10 to 14 pixels of travel, 1 to 3 pixels of
      hover lift, 500 to 700ms. Anything larger reads as a template.
   ===================================================================== */

html{scroll-padding-top:88px}

/* ---- header ---- */
header.site{backdrop-filter:saturate(1.4) blur(10px);
 -webkit-backdrop-filter:saturate(1.4) blur(10px);
 transition:box-shadow .25s ease,background .25s ease}
nav.main a:not(.btn){position:relative;border-bottom:0!important}
nav.main a:not(.btn)::after,nav.main .navgroup>button::after{
 content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
 background:var(--deep);border-radius:2px;transform:scaleX(0);
 transform-origin:left center;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
nav.main .navgroup>button{position:relative}
nav.main a:not(.btn):hover::after,nav.main a[aria-current]::after,
nav.main .navgroup:hover>button::after{transform:scaleX(1)}
nav.main .navmenu a::after{display:none}

/* ---- focus, for people driving with a keyboard ---- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
 outline:2px solid var(--deep);outline-offset:3px;border-radius:6px}

/* ---- interactive surfaces ---- */
.card,.step,.say,.offer .o,.kit li,.channel{
 transition:transform .28s cubic-bezier(.2,.7,.3,1),
            box-shadow .28s ease,border-color .28s ease}
.card:hover,.step:hover,.say:hover{transform:translateY(-3px);
 box-shadow:0 18px 34px -22px rgba(16,27,46,.42);
 border-color:rgba(22,48,91,.22)}
.btn{transition:transform .16s cubic-bezier(.2,.7,.3,1),
     background .18s ease,box-shadow .22s ease,border-color .18s ease}
.btn:active{transform:translateY(0) scale(.985)}

/* photographs settle very slightly under the cursor, which makes a
   static page feel like it is made of real material */
.pic img,.hero .bg img{transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.pic:hover img{transform:scale(1.035)}

/* ---- disclosure rows ---- */
details.faq summary{transition:color .18s ease,background .18s ease}
details.faq summary::marker,details.faq summary::-webkit-details-marker{
 content:""}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes rise{from{opacity:0;transform:translateY(14px)}
                    to{opacity:1;transform:none}}
    @keyframes fade{from{opacity:0}to{opacity:1}}
    @keyframes frame{from{opacity:0;transform:translateY(16px) scale(.985)}
                     to{opacity:1;transform:none}}

    .card,.step,.say,.callout,.warnbox,.offer .o,.kit li,.channel,
    .head,.stat,.promise,.cta-band,.readmore,section>.wrap>h2,
    .split>div,details.faq{
      animation:rise .62s cubic-bezier(.2,.7,.3,1) both;
      animation-timeline:view();
      animation-range:entry 2% entry 42%}

    .pic,figure.pic{
      animation:frame .8s cubic-bezier(.2,.7,.3,1) both;
      animation-timeline:view();
      animation-range:entry 0% entry 45%}

    /* a grid stagger, so a row of cards arrives as a row rather than
       as four identical objects moving in lockstep */
    .grid>*:nth-child(2),.steps>*:nth-child(2),.says>*:nth-child(2){
      animation-range:entry 5% entry 47%}
    .grid>*:nth-child(3),.steps>*:nth-child(3),.says>*:nth-child(3){
      animation-range:entry 8% entry 52%}
    .grid>*:nth-child(4),.steps>*:nth-child(4),.says>*:nth-child(4){
      animation-range:entry 11% entry 56%}
    .grid>*:nth-child(5),.steps>*:nth-child(5),.says>*:nth-child(5){
      animation-range:entry 14% entry 60%}
    .grid>*:nth-child(n+6),.steps>*:nth-child(n+6),.says>*:nth-child(n+6){
      animation-range:entry 16% entry 62%}

    /* the hero is above the fold, so it plays once on load instead */
    .hero .eyebrow{animation:rise .6s .02s cubic-bezier(.2,.7,.3,1) both}
    .hero h1{animation:rise .7s .08s cubic-bezier(.2,.7,.3,1) both}
    .hero .lede{animation:rise .7s .16s cubic-bezier(.2,.7,.3,1) both}
    .hero .cta{animation:rise .7s .24s cubic-bezier(.2,.7,.3,1) both}
    .hero .stats{animation:rise .7s .32s cubic-bezier(.2,.7,.3,1) both}
    .hero .bg{animation:frame .9s .1s cubic-bezier(.2,.7,.3,1) both}
  }
}

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

/* ---- very small handsets -------------------------------------------
   320 and 360 CSS pixels are still common (an iPhone SE, a Galaxy A
   series in display zoom). At those widths the page chrome, 24px of
   wrap padding plus 26px of card padding on each side, was eating 100
   of 320 pixels and long unbroken strings such as an email address were
   pushing the layout sideways. */
a,dd,li,code,.chosen{overflow-wrap:anywhere}
input[type=file]{max-width:100%}
img,svg,table,pre{max-width:100%}

@media(max-width:420px){
  .wrap{padding:0 16px}
  .pform{padding:20px 16px 18px}
  .card,.say,.step,.callout,.note,.warnbox,.errbox{padding:18px 16px}
  .filebox{padding:16px 14px}
  .channel{padding:16px 16px}
  .promise{padding:26px 18px}
  .cta-band{padding:30px 18px}
  .btn{padding:12px 18px;font-size:.92rem}
  .btn.lg{padding:14px 20px}
  h1{letter-spacing:-.015em}
}
@media(max-width:340px){
  .wrap{padding:0 12px}
  .hero .cta .btn,.cta-band .btn{width:100%}
}

/* grid and flex children default to min-width:auto, so one wide child
   (the Turnstile widget is a fixed 300px iframe) stretches the whole
   column and every sibling with it */
.split>*,.grid>*,.cols>*,.steps>*,.says>*,.frow>*{min-width:0}
@media(max-width:400px){
  .pform{padding:18px 12px 16px}
  .ts-holder{transform:scale(.9);transform-origin:left top;height:74px}
}
@media(max-width:350px){
  .ts-holder{transform:scale(.8);height:66px}
}

@media(max-width:420px){
  .never{grid-template-columns:1fr}
  .never li{padding:20px 16px}
}

/* =====================================================================
   COLOUR CORRECTION
   ---------------------------------------------------------------------
   The v2 palette remapped the shared custom properties, but the original
   sheet also wrote a long tail of literal hex values, most of them cold
   blue greys left over from the navy scheme. Next to the warm paper and
   the deep teal they read as a second, competing palette. Every one of
   them is corrected here onto the v2 scale, tuned to the surface it sits
   on rather than replaced with a single flat grey.
   ===================================================================== */

/* ---- text on light, three steps: body, secondary, quiet ---- */
.lede,.case dd,.pform .filebox label,.saysfoot{color:#3C4A63}
.step p,.channel dd,.never li p,.kit p,.creds p,details.faq .a,
.split-work td,.frow label{color:var(--body)}
nav.crumbs{color:var(--muted)}
nav.crumbs a{color:var(--muted);border-bottom-color:#D6DEE9}
nav.crumbs a:hover{color:var(--deep);border-bottom-color:var(--deep)}
nav.crumbs [aria-current]{color:var(--ink)}
.stat .d,.fine,.logos span.soon,figcaption,.pform .sub,.fld .hint,
table.split-work td:nth-child(2){color:var(--muted)}

/* ---- text on the dark panels ------------------------------------------
   A blue tinted light grey on a near black panel is what made the dark
   sections feel like a different website. These carry a trace of the
   brand teal instead, which is what ties them back to the page. */
footer.site{color:#8FA2BE}
footer.site a{color:#C9D6EA}
footer.site a:hover{color:#fff}
footer.site .brand .mail,footer.site .fine a{color:#8FA2BE}
footer.site .fine{color:#7E92B0}
.promise p,.promise .terms li>span:not(.k){color:#C9D6EA}
.cta-band p{color:#C3D2E8}
section.dark p{color:#B9C8DE}
.cbox.us p,.cbox.us li{color:#D3DFEF}
.hero .lede{color:#3C4A63}

/* ---- surfaces ---- */
table.split-work td:nth-child(3){background:#F1F5FB;color:#26364F}
.filebox{background:#F8FAFD;border-color:#B9C8E2}
.fld input,.fld select,.fld textarea{border-color:#CFD6E2;color:var(--ink)}
.fld input::placeholder,.fld textarea::placeholder{color:#9AA4B4}
.fld input:focus,.fld select:focus,.fld textarea:focus{
 border-color:var(--deep);box-shadow:0 0 0 3px rgba(22,48,91,.14)}
.cbox.us{background:linear-gradient(155deg,#1C4173 0%,#16305B 55%,#12274A 100%);
 box-shadow:0 14px 34px -12px rgba(22,48,91,.42)}
input[type=file]{color:var(--body)}

/* the old navy shadow tint went grey blue against warm paper */
.card,.say,.step,.pform,.navmenu,.stats,figure.shot{
 box-shadow:0 1px 2px rgba(16,27,46,.04),0 14px 34px -16px rgba(16,27,46,.16)}
input[type=file],input[type=file]::file-selector-button{color:var(--body)}
input[type=file]::file-selector-button{background:var(--tint);color:var(--deep);
 border:1px solid rgba(22,48,91,.18);border-radius:999px;padding:8px 14px;
 font:inherit;font-size:.9rem;font-weight:600;margin-right:12px;cursor:pointer}
input[type=file]::file-selector-button:hover{background:#DDE7F6}

/* an eyebrow chip sitting on one of the dark panels inverts, rather than
   keeping the light tint it carries on paper */
.promise .eyebrow,section.dark .eyebrow,.cta-band .eyebrow,.cbox .eyebrow{
 background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20);
 color:#D3DFEF}
.promise .eyebrow::before,section.dark .eyebrow::before,
.cta-band .eyebrow::before,.cbox .eyebrow::before{background:var(--wedg)}

/* ---- on page contents -------------------------------------------------
   A long reference page reads as a wall. A row of chips at the top turns
   it into something a person can enter at the point they came for. */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px;padding:0;list-style:none}
.toc li{margin:0}
.toc a{display:inline-block;font-size:.92rem;font-weight:550;color:var(--navy);
 text-decoration:none;background:var(--surface);border:1px solid var(--line);
 border-radius:999px;padding:8px 15px;transition:.18s ease}
.toc a:hover{background:var(--tint);border-color:rgba(22,48,91,.22);
 transform:translateY(-1px)}
.toclabel{font-size:.82rem;font-weight:700;letter-spacing:.09em;
 text-transform:uppercase;color:var(--muted);margin:0 0 12px}

/* ---- a compact fact strip, for the top of a reference page ---- */
/* Four equal 1fr columns sized every cell the same, so the longest label wrapped
   while the other three sat on one line — "REPORT TO YOUR GP" broke across two
   lines beside three single-line labels and the strip read as lopsided. A
   max-content floor lets each column be at least as wide as its own unwrapped
   label; they still share any remaining space equally, so the strip stays even. */
.facts{display:grid;grid-template-columns:repeat(4,minmax(max-content,1fr));gap:0;
 border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
 background:var(--surface);margin:0 0 8px}
.facts div{padding:20px 22px;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts b{display:block;font-family:var(--serif);font-size:1.6rem;
 font-weight:600;color:var(--navy);line-height:1.1;letter-spacing:-.02em}
.facts span{display:block;margin-top:6px;font-size:.8rem;font-weight:700;
 letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}
 .facts div:nth-child(2){border-right:0}
 .facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:420px){.facts{grid-template-columns:1fr}
 .facts div{border-right:0;border-bottom:1px solid var(--line)}
 .facts div:last-child{border-bottom:0}}

/* ---- a tighter card for lists that used to be bullet points ---- */
.tiles{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.tiles.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.tiles,.tiles.two{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tiles,.tiles.two{grid-template-columns:1fr}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;
 padding:18px 20px;transition:transform .28s cubic-bezier(.2,.7,.3,1),
 box-shadow .28s ease,border-color .28s ease}
.tile:hover{transform:translateY(-3px);border-color:rgba(22,48,91,.20);
 box-shadow:0 14px 30px -20px rgba(16,27,46,.45)}
.tile b{display:block;font-weight:650;color:var(--ink);margin-bottom:5px;
 font-size:1.02rem}
.tile p,.tile span{margin:0;font-size:.96rem;line-height:1.55;color:var(--body);
 max-width:none}

/* two tight sections in a row were stacking their padding and opening a
   gap wide enough to read as a missing block */
section.tight + section.tight{padding-top:0}

@media(max-width:560px){
  .hero .cta,.cta-band .row{display:flex;flex-direction:column;align-items:stretch}
  .hero .cta .btn,.cta-band .row .btn{width:100%}
}

/* ---- the header settles once the page moves --------------------------
   A scroll driven animation rather than a scroll listener, so it costs
   nothing on the main thread and needs no script. Two frames only: at
   rest it is flat on the paper, past 70px it tightens and lifts. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    @keyframes settle{
      from{box-shadow:0 0 0 rgba(16,27,46,0);
           background-color:rgba(247,248,250,.86)}
      to{box-shadow:0 6px 20px -14px rgba(16,27,46,.55);
         background-color:rgba(247,248,250,.96)}
    }
    @keyframes tighten{from{padding-top:15px;padding-bottom:15px}
                       to{padding-top:9px;padding-bottom:9px}}
    header.site{animation:settle linear both;
      animation-timeline:scroll(root block);animation-range:0 70px}
    header.site .bar{animation:tighten linear both;
      animation-timeline:scroll(root block);animation-range:0 70px}
  }
}

/* =====================================================================
   v3 — LAYOUT AND FIGURE CORRECTIONS
   ---------------------------------------------------------------------
   Three faults, all of them mine:

   1. A 1180px column on a 1500px+ screen leaves a third of the display
      empty, so the site reads as a narrow strip rather than as a page
      that fits the monitor it is on. The container is now fluid and the
      gutters scale with the viewport.

   2. Standalone photographs were running full width at 16:7, which at
      this container width is a 480px tall portrait of a stranger sitting
      between two paragraphs. Photographs are support, not subject. They
      are now letterboxed, height capped, and never taller than the text
      they sit next to.

   3. Vertical rhythm was too loose, which reads as empty rather than
      as calm.
   ===================================================================== */

:root{--wrap:1320px}
.wrap{padding:0 clamp(20px,3.5vw,52px)}
@media(min-width:1600px){:root{--wrap:1420px}}

body{font-size:clamp(16.5px,1.02vw,18.5px)}
section{padding:clamp(40px,4.6vw,72px) 0}
section.tight{padding:clamp(28px,3vw,42px) 0}

/* ---- photographs -------------------------------------------------------
   A capped height on every photograph on the site. Nothing decorative is
   allowed to be the tallest thing in the viewport. */
figure.shot{margin:26px auto;max-width:940px;border:1px solid var(--line);
 box-shadow:0 1px 2px rgba(16,27,46,.04),0 18px 40px -28px rgba(16,27,46,.35)}
/* The photos are 3:2. Forcing them into 2.6:1 threw away nearly half the frame
   and cut heads and hands off at the edges. 16:9 trims a little top and bottom
   and leaves the subject intact. */
figure.shot img{aspect-ratio:16/9;max-height:none;object-position:50% 40%}
figure.shot figcaption{font-size:.86rem;padding:11px 18px;color:var(--muted)}
@media(max-width:720px){
  figure.shot{margin:20px 0}
  /* 4:3 on a narrow screen: 16:9 at phone width is a 200px-tall strip. */
  figure.shot img{aspect-ratio:4/3;max-height:none}
}

.pic img{max-height:400px;object-position:50% 40%}
.hero .bg img{max-height:430px}
@media(max-width:860px){.pic img{max-height:300px}}

/* ---- headings carry a mark, so a section starts rather than just
   arriving ---- */
.head h2::after,section>.wrap>h2::after{content:"";display:block;width:44px;
 height:3px;border-radius:2px;background:var(--wedg);margin:18px 0 0}
.head.mid h2::after{margin-left:auto;margin-right:auto}
.cta-band h2::after,.promise h2::after,section.dark h2::after{display:none}

/* ---- wider grids on a wider page ---- */
@media(min-width:1400px){
  .tiles{grid-template-columns:repeat(4,1fr)}
  .tiles.two{grid-template-columns:repeat(2,1fr)}
}

/* =====================================================================
   v4 — THE HERO, AND SOME CHARACTER
   ---------------------------------------------------------------------
   The page was correct and dull. Correct is the floor, not the finish.

   The hero now runs the photograph to the right edge of the screen
   instead of stopping it politely inside the container, which is the
   single move that makes a page look designed rather than assembled.
   Type steps up, the stat rail becomes a real object, and sections stop
   being white rectangles separated by air.
   ===================================================================== */

@media(min-width:1080px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
   align-items:center;gap:clamp(36px,5vw,72px);
   padding-top:clamp(44px,5vw,78px);padding-bottom:clamp(40px,5vw,68px);
   padding-right:0;padding-left:clamp(20px,3.5vw,52px)}
  /* The photograph used to be pulled off the right edge of the viewport. On a
     wide screen that made it enormous, cropped the subject at the bottom and
     ran the picture under the scrollbar. It stays inside the container now and
     keeps the frame's proportions, like every other photograph on the site. */
  .hero .bg{margin-right:0}
  .hero .bg img{border-radius:22px;max-height:none;
   aspect-ratio:4/3.1;height:auto;object-position:50% 34%}
  .hero .bg::before{inset:-18px -18px 18px 18px;border-radius:26px}
  .hero h1{font-size:clamp(3rem,4.4vw,4.4rem);max-width:12ch}
}

/* the stat rail reads as a panel rather than three orphan numbers */
.hero .stats{border:1px solid var(--line);border-radius:16px;
 background:var(--surface);padding:4px 6px;margin-top:34px;
 box-shadow:0 1px 2px rgba(16,27,46,.04),0 16px 36px -28px rgba(16,27,46,.4)}
.hero .stat{padding:16px 20px}
.hero .stat + .stat{padding-left:20px}
.hero .stat .n{color:var(--navy)}

/* ---- sections stop being interchangeable ------------------------------
   soft picks up a hairline top and bottom so a change of colour reads as
   a deliberate band, and the paper tone is warmed very slightly against
   the white cards sitting on it. */
section.soft{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.soft + section.soft{border-top:0}

/* ---- cards get an accent edge on hover, and a quiet one at rest ---- */
.card,.tile{position:relative;overflow:hidden}
.card::before,.tile::before{content:"";position:absolute;left:0;right:0;top:0;
 height:3px;background:var(--wedg);transform:scaleX(0);transform-origin:left;
 transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.card:hover::before,.tile:hover::before{transform:scaleX(1)}

/* the quote cards carry the accent permanently, on the left */
.say{border-left:3px solid var(--wedg)}

/* ---- steps: the number becomes the design element ---- */
.step::before{background:var(--navy);color:#fff;font-family:var(--serif);
 font-weight:600;font-size:1.05rem}

/* ---- a section heading pairs with its eyebrow more tightly ---- */
.head{margin-bottom:clamp(26px,3vw,40px)}
.eyebrow{margin-bottom:16px}

/* ---------- photo caption: a band under the image, not on it ----------
   Text sitting on the photograph covered the subject and fought the picture.
   The caption is a tinted band closing the bottom of the figure instead: same
   card, one piece, with an accent rule and the caption's own small label so it
   reads as designed rather than as leftover alt text. */
figure.shot{position:relative;display:flex;flex-direction:column}
figure.shot figcaption{position:static;margin:0;
 background:linear-gradient(180deg,var(--soft) 0%,var(--paper) 100%);
 border-top:1px solid var(--line);
 padding:14px 20px 15px 34px;
 font-size:.9rem;line-height:1.5;color:var(--ink)}
/* accent rule, vertically centred on the text */
figure.shot figcaption::before{content:"";position:absolute;left:18px;
 width:3px;height:1.5em;margin-top:.06em;border-radius:3px;background:var(--wedg)}

@media(max-width:720px){
  figure.shot figcaption{padding:12px 16px 13px 30px;font-size:.86rem}
  figure.shot figcaption::before{left:15px}
}

/* ---------- page intro: copy left, photograph right ----------
   Full-width heading over a letterboxed strip wasted the width and pushed the
   page content below the fold. The photo also gets a sane 4:3.2 here rather
   than the wide banner ratio, since it is sitting in a column now. */
/* The intro is not always just a heading: some pages carry a stat rail or a
   chip list too. Pin the photograph to the right column across every row and
   let everything else stack in the left one, so an extra block cannot push the
   picture underneath the copy. */
.introsplit>*{grid-column:1;min-width:0}
.introsplit>figure.shot{grid-column:2;grid-row:1/-1;align-self:center}
.introsplit{display:grid;grid-template-columns:1.02fr .98fr;
 gap:clamp(24px,4vw,52px);align-items:center;margin-top:8px}
.introsplit .head{margin-bottom:0}
.introsplit figure.shot{margin:0;max-width:none}
.introsplit figure.shot img{aspect-ratio:4/3.2;max-height:none;object-position:50% 38%}
@media(max-width:900px){
  .introsplit{grid-template-columns:1fr;gap:20px}
  /* The figure is pinned to column 2 and spanned across every row for the
     desktop split. At one column that column does not exist, so the browser
     creates an implicit track for it — and the implicit track takes its width
     out of the text column, collapsing the eyebrow, heading and lede to one
     word per line. Return it to the normal flow. */
  .introsplit>figure.shot{grid-column:1;grid-row:auto;align-self:stretch}
  .introsplit figure.shot img{aspect-ratio:16/10}
}

/* ---------- facts + evidence ----------
   These two sections used to be injected at the edge by the hmr-site-shell
   Worker, out of hmr-css.txt in R2, as a block of !important overrides. They
   are part of the page now, so they are styled here with the same tokens as
   everything else and no !important is needed. */
.hmr-facts{background:var(--soft);padding:clamp(40px,5vw,56px) 0}
.hmr-facts .wrap>p,.gp-evidence .wrap>p{color:var(--slate);max-width:62ch;
 margin:0 0 clamp(24px,3vw,32px)}

.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);
 background:var(--white);border:1px solid var(--line);border-radius:var(--r);
 box-shadow:var(--shadow);overflow:hidden}
.fact-card{padding:24px 20px;border-right:1px solid var(--line)}
.fact-card:last-child{border-right:none}
.fact-num{display:block;font-family:var(--serif);font-weight:600;
 font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.1;color:var(--teal);
 letter-spacing:-.5px;margin:0 0 10px}
/* .8rem = 12.8px: the audit floor is 12.5px and .78rem lands at 12.48px. */
.fact-label{display:block;font-size:.8rem;line-height:1.4;font-weight:700;
 color:var(--navy);text-transform:uppercase;letter-spacing:.09em}
.hmr-facts cite{display:block;margin-top:16px;font-size:.82rem;
 color:var(--slate);font-style:normal}

.gp-evidence{padding:clamp(40px,5vw,56px) 0}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:16px}
.ev-card{background:var(--white);border:1px solid var(--line);
 border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.ev-card h3{font-size:1.1rem;margin:0 0 8px}
.ev-card p{color:var(--slate);font-size:.95rem;line-height:1.55;margin:0}

/* 4 across is too tight below the wide breakpoint; 2x2 keeps the numbers
   readable rather than shrinking them. */
@media(max-width:860px){
  .facts-grid{grid-template-columns:repeat(2,1fr)}
  .fact-card{border-bottom:1px solid var(--line)}
  .fact-card:nth-child(2n){border-right:none}
  .fact-card:nth-last-child(-n+2){border-bottom:none}
}
@media(max-width:480px){
  .facts-grid{grid-template-columns:1fr}
  .fact-card{border-right:none}
  .fact-card:last-child{border-bottom:none}
}

/* ============================================================
   HERO VARIANTS
   ------------------------------------------------------------
   .introsplit (text left / photo right) was used on 18 of 30
   pages, which is what made the site read as a template rather
   than a designed set of pages. The photographs are all distinct
   and mostly apt — it was the identical frame around them that
   flattened everything. These variants give the site a rhythm:

     .introwide  measured column, no photograph. For reference and
                 practice-facing pages where a stock portrait adds
                 nothing. Also fixes the dead right-hand column
                 caused by .head's 60ch cap sitting in a full
                 width .wrap.
     .rev        mirrors .introsplit so consecutive pages in a
                 section do not repeat the same geometry.

   The location pages deliberately keep plain .introsplit: they
   are a series, and consistency is correct there.
   ============================================================ */

/* A document-width column, matching the treatment already used by
   the HMR guide page — the one page on the site that reads well. */
.wrap.measure{max-width:940px}

.introwide{max-width:74ch}
.introwide .head{max-width:none;margin-bottom:0}
.introwide .lede{max-width:64ch}

/* Mirrored split. Source order is unchanged so the heading still
   comes first for screen readers and on mobile. */
.introsplit.rev>.head{grid-column:2}
.introsplit.rev>figure.shot{grid-column:1}

@media(max-width:900px){
  /* Below the split's collapse point both columns stack, so the
     mirrored variant must return to source order or the photo
     would sit above the heading. */
  .introsplit.rev>.head,
  .introsplit.rev>figure.shot{grid-column:1}
}

/* ============================================================
   MOBILE NAVIGATION — reachability
   ------------------------------------------------------------
   The open menu is absolutely positioned at top:100% with no
   height bound. With every group expanded, or on a short
   viewport (a phone held in landscape), the lower items ran off
   the bottom of the screen with no way to scroll to them — the
   page behind scrolled instead. Bound the panel and let it
   scroll on its own.
   ============================================================ */
@media(max-width:1080px){
  nav.main.open{
    max-height:72vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    /* Keep a flick at the end of the list from scrolling the page behind. */
    overscroll-behavior:contain;
  }
  /* Paired with the body class set in nav.js. */
  body.navopen{overflow:hidden}
}
/* Prefer the small viewport unit where supported: on iOS Safari 100vh
   excludes the retracting browser chrome and overestimates the space. */
@supports(height:100svh){
  @media(max-width:1080px){ nav.main.open{max-height:72svh} }
}