/* Refinement layer (Stage 2). Loads after every page's own styles and only evens out what the pages already do:
   one section rhythm, one type scale per role, one button size, a readable line length and no lone cards.
   Breakpoints: phone below 600px, tablet 600 to 1023px, desktop 1024px and up. */

:root{--sec:56px}
@media(min-width:600px){:root{--sec:72px}}
@media(min-width:1024px){:root{--sec:96px}}

/* ---- Vertical rhythm: the same space between sections on every page ---- */
.pr-sec,.s3{padding-top:var(--sec)!important}
.pr-sec:last-of-type{padding-bottom:var(--sec)!important}
section.dp{padding-top:var(--sec)!important;padding-bottom:var(--sec)!important}
section.dp+section.dp,section.dp+.pr-sec{padding-top:0!important}
.sp-sec{padding:var(--sec) 0 0!important}
.sp-sec:not(:has(~.sp-sec)){padding-bottom:var(--sec)!important}
section.nw{padding-bottom:var(--sec)!important}
/* home: sections were padded top and bottom, which doubled the space between them */
body:has(>.hx)>section:is(.ab,.prg,.evs,.yth,.prt,:not([class])){padding-top:var(--sec)!important;padding-bottom:0!important}
body:has(>.hx)>section.prt{padding-bottom:var(--sec)!important}

/* ---- Type scale ---- */
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
/* page titles: the same size on every inner page */
.sp-hero h1,body.sp .sp-hero h1,.bk3-h h1{font-size:clamp(38px,6vw,68px)!important;line-height:1.02!important}
/* story titles: older and newer stories alike */
.nwa h1{font-size:clamp(32px,4.6vw,52px)!important;line-height:1.08!important}
/* section headings */
.dp h2,.dp-cta h2,.nw-sec h2{font-size:clamp(26px,3.4vw,40px)!important;line-height:1.12!important}
/* headings inside a story */
.nwa-body h2,.ax-body h2{font-size:clamp(23px,2.4vw,28px)!important;line-height:1.25!important}
/* card titles */
:is(.pr-card,.pr-steps>li,.dp-card,.pg-card,.lc-card figcaption,.ires3-s,.vm3-c,.dp-body,.pb-tx,.nc,.pc3,.nw-tx,.ev-b) h3{font-size:clamp(18px,1.6vw,20px)!important;line-height:1.3!important;text-wrap:balance}
/* leads under page and story titles */
.ax-dek,.hx3 .hx3-l,.bk3-h>.w>p{font-size:clamp(18px,1.8vw,21px)!important;line-height:1.5!important}
/* body text: 17px for section copy, 16px inside cards, 15px for compact cards */
:is(.dp-sub,.dp-body p,.pg-faq details p,.sp-w>p,.s3-sub,.lab3-lead p,.dp-split>div>p,.rx-press-g p,.vm3-c p){font-size:17px!important;line-height:1.65!important}
:is(.nw-tx p:not(.nw-meta),.pc3 p,.nums p,.ires3-s p,.pg-card p,.yth-s p,.ct-hd p,.pr-sec p){line-height:1.6!important}
:is(.ev-m,.pb-tx p,.lab3 p,.lc-card figcaption p,.dp-grid.two .dp-card p,.lt-c p){font-size:15px!important;line-height:1.55!important}
.nwa-body{line-height:1.65!important}
/* a comfortable line length (about 70 to 75 characters) */
:is(.dp-body p,.pg-faq details p,.dp-sub,.sp-w>p,.s3-sub,.lc-src){max-width:62ch!important}
.nwa-hd,.nwa-body,.nwa-ph{max-width:680px!important}

/* ---- Buttons: one height and type size ---- */
.btn:not(nav .btn),.sp-btn{height:48px!important;font-size:15px!important}
/* hero slide dots: a 44px tap area around each dot */
.hx-dot{position:relative}
.hx-dot:after{content:"";position:absolute;inset:-6px -2px}
summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #0D3C87;outline-offset:2px}

/* ---- No lone cards ---- */
/* team: an incomplete last row sits centred */
.ldg.ldg-team{display:flex!important;flex-wrap:wrap;justify-content:center}
.ldg.ldg-team>*{flex:0 0 calc((100% - 72px)/4)}
@media(max-width:1023px){.ldg.ldg-team>*{flex-basis:calc((100% - 36px)/3)}}
@media(max-width:700px){.ldg.ldg-team>*{flex-basis:calc((100% - 12px)/2)}}
/* seven sectors on tablets: four, then three centred */
@media(min-width:701px) and (max-width:1199px){
  .sec7:not(.dp-card .sec7){grid-template-columns:repeat(8,minmax(0,1fr))!important}
  .sec7:not(.dp-card .sec7)>li{grid-column:span 2}
  .sec7:not(.dp-card .sec7)>li:nth-child(5){grid-column:2/span 2}
}
/* steps in two columns: an odd last step runs the full width */
@media(min-width:600px) and (max-width:1023px){.pr-steps>li:last-child:nth-child(odd){grid-column:1/-1}}
/* story photo grids: with one photo left over, the first runs the full width instead */
@media(max-width:767px){
  :is(.nwa-body .nwa-grid>div,.nwa-ph)>a:first-child:nth-last-child(2n+1):not(:only-child){grid-column:1/-1;flex-basis:100%!important;aspect-ratio:16/9}
}
@media(min-width:768px){
  :is(.nwa-body .nwa-grid:not(.two)>div,.nwa-ph){grid-template-columns:repeat(6,minmax(0,1fr))!important}
  :is(.nwa-body .nwa-grid:not(.two)>div,.nwa-ph)>a{grid-column:span 2}
  :is(.nwa-body .nwa-grid:not(.two)>div,.nwa-ph)>a:first-child:nth-last-child(3n+1):not(:only-child){grid-column:1/-1;flex-basis:100%!important;aspect-ratio:16/9}
  :is(.nwa-body .nwa-grid:not(.two)>div,.nwa-ph)>a:first-child:nth-last-child(3n+2),:is(.nwa-body .nwa-grid:not(.two)>div,.nwa-ph)>a:first-child:nth-last-child(3n+2)+a{grid-column:span 3;flex-basis:calc((100% - 10px)/2)!important}
}

/* ---- Yellow as an accent, not a fill (pass 5) ---- */
/* home values band: a white band between hairlines, blue words, gold dots */
.vb .vb-band,.vb .vb-band[class]{background:#fff!important;box-shadow:inset 0 1px 0 rgba(22,35,58,.08),inset 0 -1px 0 rgba(22,35,58,.08)!important}
.vb li::after,.vb li:nth-child(n)::after{background:#FFBF37!important;opacity:1}
/* marquee bands: the yellow ones become white pills like the header, with gold stars or dots */
.mb3.mb3-y{background:#fff!important;color:#0D3C87;box-shadow:inset 0 0 0 1px rgba(22,35,58,.08)}
.mb3.mb3-y span:after{color:#E0A100;opacity:1}
.mb3.mb3-y.mb3-s-dot span:after{background:#FFBF37;opacity:1}

/* ---- Contrast: every label at least WCAG AA ---- */
/* green marquee bands: site.css sets --b-green to #1B8247, white text 4.85:1 */
/* IRES stage 3: dark number on the gold circle */
.ires3-s:nth-child(3) .ires3-n{color:#16233A}
/* Impact Labs charts: value labels in the page ink; bars keep their colours */
.lc-cols b{color:#16233A!important}
/* story pull-quote and pillar labels: a deeper gold that reads on cream */
.ax-pq span,.ax-pil span{color:#8A6408}