@import url("/assets/fonts/fonts.css");
/* IQSR website — shared stylesheet v2
   Tokens, type scale, layout and components. Container queries on .site
   drive the responsive layout: <=1100px tablet (nav collapses), <=720px phone. */

:root{
  --navy:#084281; --navy-900:#052B55; --navy-700:#0A3A70; --navy-100:#DCE6F2; --navy-050:#EEF3F9;
  --teal:#0E6A6A; --red:#C81116; --red-050:#FBEDED;
  --ink:#16202E; --ink-2:#3B4759; --ink-3:#586477;
  --rule:#D6DDE6; --rule-strong:#9AA8BA; --field:#76839A;
  --paper:#FFFFFF; --stone:#F3F6FA; --stone-2:#E6ECF3;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --measure:68ch; --wrap:1240px; --radius:2px;
}

.site{container:site / inline-size; font-family:var(--sans); font-size:17px; line-height:1.65; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; animation:iq-fade .35s ease-out both}
@keyframes iq-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.site{animation:none}.site *{transition:none !important}}
.site *, .site *::before, .site *::after{box-sizing:border-box}
.site img{max-width:100%; display:block}
.site h1,.site h2,.site h3,.site h4,.site p,.site ul,.site ol,.site dl,.site dd,.site figure{margin:0}
.site ul,.site ol{padding:0}
.site a{color:var(--navy)}
.site a:hover{color:var(--navy-900)}
.site a:focus-visible,.site button:focus-visible,.site input:focus-visible,.site select:focus-visible,.site textarea:focus-visible{outline:2px solid var(--navy); outline-offset:3px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 48px}
.sec{padding:var(--s9) 0}
.sec--tight{padding:var(--s8) 0}
.sec--stone{background:var(--stone)}
.sec--rule{border-top:1px solid var(--rule)}
.split{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--s8)}
.split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split--side{grid-template-columns:minmax(0,1fr) 340px}
.grid-auto{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px,100%),1fr)); gap:var(--s6) var(--s7)}
.stack{display:flex; flex-direction:column}
.row{display:flex; flex-wrap:wrap; align-items:center}

/* ---------- type ---------- */
.eyebrow{display:flex; align-items:center; gap:10px; font:500 12px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--teal)}
.eyebrow::before{content:""; width:20px; height:2px; background:var(--navy); flex:none}
.eyebrow--accent::before{background:var(--red)}
.h-display{font:600 60px/1.06 var(--serif); letter-spacing:-.015em; color:var(--navy); text-wrap:balance}
.h1{font:600 48px/1.1 var(--serif); letter-spacing:-.012em; color:var(--navy); text-wrap:balance}
.h2{font:600 36px/1.16 var(--serif); letter-spacing:-.008em; color:var(--navy); text-wrap:balance}
.h3{font:600 23px/1.3 var(--serif); color:var(--navy)}
.h4{font:600 17px/1.4 var(--sans); color:var(--ink)}
.sub{font:600 19px/1.35 var(--sans); color:var(--teal)}
.lede{font-size:21px; line-height:1.55; color:var(--ink-2); max-width:60ch; text-wrap:pretty}
.prose p{max-width:var(--measure); text-wrap:pretty}
.prose p + p{margin-top:1em}
.small{font-size:14.5px; line-height:1.55}
.muted{color:var(--ink-3)}
.mono{font-family:var(--mono)}
.label{font:500 11.5px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums lining-nums}
.bullets{list-style:none; display:flex; flex-direction:column; gap:10px}
.bullets li{position:relative; padding-left:22px; max-width:var(--measure)}
.bullets li::before{content:""; position:absolute; left:2px; top:.72em; width:8px; height:1.5px; background:var(--navy)}

/* ---------- utility strip + header ---------- */
.util{background:var(--navy-900); color:#fff; font:500 12.5px/1.4 var(--sans)}
.util .wrap{display:flex; align-items:center; gap:24px; min-height:36px}
.util a{color:#fff; text-decoration:none}
.util a:hover{color:#fff; text-decoration:underline}
.util .iso{display:flex; align-items:center; gap:8px; font:500 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.util .iso::before{content:""; width:7px; height:7px; background:var(--red); flex:none}
.util .util-r{margin-left:auto; display:flex; gap:24px}
.hdr{background:#fff; border-bottom:1px solid var(--rule)}
.hdr .wrap{display:flex; align-items:center; gap:32px; min-height:84px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.brand img{width:42px; height:auto}
.brand-name{display:flex; flex-direction:column; font:700 19px/1.1 var(--serif); color:var(--navy)}
.brand-name small{font:500 11px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:5px}
.nav{display:flex; gap:28px; margin-left:auto}
.nav a{font:500 15px/1 var(--sans); color:var(--ink); text-decoration:none; padding:33px 0 31px; border-bottom:2px solid transparent; transition:color .12s, border-color .12s}
.nav a:hover{color:var(--navy); border-bottom-color:var(--rule-strong)}
.nav a[aria-current="page"]{color:var(--navy); border-bottom-color:var(--navy)}
.menu-btn{display:none; margin-left:auto; align-items:center; gap:10px; min-height:44px; padding:0 14px; background:#fff; border:1px solid var(--field); border-radius:var(--radius); font:600 14px var(--sans); color:var(--navy); cursor:pointer}
.mmenu{background:#fff; border-bottom:1px solid var(--rule)}
.mmenu ul{list-style:none}
.mmenu a{display:flex; justify-content:space-between; align-items:center; min-height:56px; padding:0 20px; border-bottom:1px solid var(--rule); font:600 17px/1.2 var(--sans); color:var(--ink); text-decoration:none}
.mmenu a[aria-current="page"]{color:var(--navy)}
.mmenu a[aria-current="page"]::after{content:"Current"; font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--teal)}
.mmenu .mmenu-foot{padding:20px; display:flex; flex-direction:column; gap:6px; font-size:15px; color:var(--ink-2); background:var(--stone)}
.menu-btn svg{width:18px; height:18px}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative; overflow:hidden; background:var(--stone); border-bottom:1px solid var(--rule)}
.phero::after{content:""; position:absolute; inset:0 0 0 46%; background:url(/assets/contours.svg) right center / cover no-repeat; pointer-events:none}
.phero .wrap{position:relative; z-index:1; padding-top:var(--s8); padding-bottom:var(--s8)}
.phero .h1{margin-top:20px; max-width:18ch}
.phero .lede{margin-top:20px}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; font:500 12px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.crumbs a{color:var(--ink-3); text-decoration:none}
.crumbs a:hover{color:var(--navy); text-decoration:underline}
.coord{position:absolute; z-index:1; right:48px; bottom:20px; font:500 11px/1 var(--mono); letter-spacing:.08em; color:var(--ink-3)}

/* ---------- buttons + links ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 22px; border:1.5px solid var(--navy); border-radius:var(--radius); font:600 15px/1 var(--sans); text-decoration:none; cursor:pointer; transition:background .12s, color .12s, border-color .12s}
.btn svg{width:16px; height:16px}
.btn--primary{background:var(--navy); color:#fff}
.btn--primary:hover{background:var(--navy-900); border-color:var(--navy-900); color:#fff}
.btn--secondary{background:transparent; color:var(--navy)}
.btn--secondary:hover{background:var(--navy-050); color:var(--navy-900)}
.btn--inverse{background:#fff; color:var(--navy); border-color:#fff}
.btn--inverse:hover{background:var(--navy-050); color:var(--navy-900)}
.btn--ghost-inverse{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)}
.btn--ghost-inverse:hover{background:rgba(255,255,255,.1); color:#fff}
.btn[disabled]{background:var(--stone-2); border-color:var(--stone-2); color:var(--ink-3); cursor:not-allowed}
.more{display:inline-flex; align-items:center; gap:8px; font:600 15px/1.4 var(--sans); color:var(--navy); text-decoration:none; border-bottom:1px solid var(--navy-100); padding-bottom:2px; transition:border-color .12s}
.more:hover{border-bottom-color:var(--navy)}
.more svg{width:14px; height:14px}
.prose a, a.inline{color:var(--navy); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}

/* ---------- figures row ---------- */
.figs{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:var(--s6)}
.fig{border-top:2px solid var(--navy); padding-top:var(--s4)}
.fig-n{font:600 40px/1.05 var(--serif); color:var(--navy); font-variant-numeric:lining-nums; letter-spacing:-.01em}
.fig-l{margin-top:10px; font-size:14.5px; line-height:1.45; color:var(--ink-2)}

/* ---------- tables ---------- */
.tbl-box{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tbl{width:100%; border-collapse:collapse; font-size:15px; line-height:1.5}
.tbl th{background:var(--navy); color:#fff; text-align:left; font:600 13px/1.35 var(--sans); letter-spacing:.02em; padding:12px 16px; vertical-align:bottom}
.tbl td{padding:14px 16px; border-bottom:1px solid var(--rule); vertical-align:top}
.tbl tbody tr:hover td{background:var(--navy-050)}
.tbl .t-year{white-space:nowrap; font-family:var(--mono); font-size:13.5px; color:var(--ink-2)}
.tbl .t-title{font-weight:600; color:var(--ink)}
.tbl .t-scale{color:var(--ink-2)}
.tbl caption{caption-side:bottom; text-align:left; padding-top:12px; font-size:13.5px; color:var(--ink-3)}
.kv{width:100%; border-collapse:collapse; font-size:15.5px}
.kv th{width:36%; text-align:left; font:500 12px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:14px 16px 14px 0; border-bottom:1px solid var(--rule); vertical-align:top}
.kv td{padding:14px 0; border-bottom:1px solid var(--rule); color:var(--ink); vertical-align:top}

/* ---------- tags, chips, notices ---------- */
.tag{display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border:1px solid var(--rule); background:#fff; font:500 13.5px/1.2 var(--sans); color:var(--ink-2); border-radius:var(--radius)}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.notice{display:flex; gap:14px; padding:16px 20px; background:var(--navy-050); border:1px solid var(--navy-100); font-size:15px; line-height:1.55; color:var(--ink-2)}
.notice strong{color:var(--navy)}
.review{display:flex; align-items:center; gap:12px; padding:12px 16px; border:1.5px dashed var(--red); background:var(--red-050); color:#8E0B0F; font:600 12.5px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase}
.tbs{color:#8E0B0F; background:var(--red-050); padding:0 4px; font-family:var(--mono); font-size:.86em; letter-spacing:.02em; white-space:nowrap}

/* ---------- photo placeholder ---------- */
.ph{position:relative; display:flex; align-items:flex-end; aspect-ratio:3/2; background:var(--stone-2); border:1px dashed var(--rule-strong); overflow:hidden}
.ph::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, transparent 0 14px, rgba(8,66,129,.045) 14px 15px)}
.ph span{position:relative; margin:14px; padding:6px 9px; background:#fff; font:500 11px/1.45 var(--mono); letter-spacing:.04em; color:var(--ink-2); max-width:calc(100% - 28px)}
.ph--square{aspect-ratio:1/1}
.ph--portrait{aspect-ratio:4/5}
.ph--wide{aspect-ratio:21/9}

/* ---------- timeline ---------- */
.tl{list-style:none; display:flex; flex-direction:column}
.tl li{display:grid; grid-template-columns:150px minmax(0,1fr); gap:0 36px}
.tl-year{text-align:right; font:600 20px/1.3 var(--serif); color:var(--navy); padding-top:1px; font-variant-numeric:lining-nums}
.tl-body{position:relative; padding:0 0 40px 32px; border-left:1px solid var(--rule-strong)}
.tl li:last-child .tl-body{padding-bottom:0}
.tl-body::before{content:""; position:absolute; left:-7px; top:7px; width:13px; height:13px; background:#fff; border:2px solid var(--navy); border-radius:50%}
.tl-body--key::before{background:var(--red); border-color:var(--red)}
.tl-body h3{font:600 18px/1.4 var(--sans); color:var(--ink)}
.tl-body p{margin-top:6px; color:var(--ink-2); max-width:62ch}

/* ---------- facts sidebar ---------- */
.facts{background:var(--stone); border-top:3px solid var(--navy); padding:24px 24px 8px}
.facts h2{font:600 12px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--navy); margin-bottom:8px}
.facts dl{display:flex; flex-direction:column}
.facts dl > div{padding:14px 0; border-top:1px solid var(--rule)}
.facts dt{font:500 11.5px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.facts dd{margin-top:4px; font-size:15.5px; line-height:1.5; color:var(--ink)}
.facts dd strong{font:600 26px/1.15 var(--serif); color:var(--navy); display:block}

/* ---------- form ---------- */
.form{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 24px}
.field{display:flex; flex-direction:column; gap:8px}
.field--full{grid-column:1 / -1}
.field label{font:600 14.5px/1.3 var(--sans); color:var(--ink)}
.field label .req{color:var(--red); margin-left:2px}
.field .hint{font-size:13.5px; color:var(--ink-3)}
.field input,.field select,.field textarea{width:100%; min-height:48px; padding:12px 14px; border:1px solid var(--field); border-radius:var(--radius); background:#fff; font:16px/1.4 var(--sans); color:var(--ink)}
.field textarea{min-height:168px; resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--ink-3)}
.field--error input{border-color:var(--red); border-width:1.5px}
.field .err{font-size:13.5px; color:#A50E12; font-weight:600}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-2)}
.consent input{width:20px; height:20px; margin-top:2px; accent-color:var(--navy); flex:none}

/* ---------- tile map ---------- */
.tmap{display:grid; grid-template-columns:repeat(9, minmax(0,1fr)); grid-auto-rows:1fr; gap:5px; max-width:540px}
.tile{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font:600 12px/1 var(--mono); letter-spacing:.04em; color:var(--ink-3); background:#fff; border:1px solid var(--field)}
.tile--on{background:var(--navy); border-color:var(--navy); color:#fff}

/* ---------- org chart ---------- */
.org{display:flex; flex-direction:column; align-items:center; gap:0}
.org-node{width:min(420px,100%); padding:14px 18px; background:#fff; border:1px solid var(--rule-strong); border-top:3px solid var(--navy); text-align:center}
.org-node b{display:block; font:600 16px/1.35 var(--sans); color:var(--navy)}
.org-node span{display:block; margin-top:4px; font-size:13.5px; line-height:1.45; color:var(--ink-2)}
.org-link{width:1px; height:28px; background:var(--rule-strong)}
.org-row{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; width:100%; max-width:1000px; position:relative; padding-top:28px; border-top:1px solid var(--rule-strong)}
.org-row .org-node{width:100%}

/* ---------- footer ---------- */
.ftr{background:var(--stone-2); border-top:3px solid var(--navy); color:var(--ink-2); font-size:15px; line-height:1.6}
.ftr .wrap{padding-top:var(--s8); padding-bottom:var(--s6)}
.ftr-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr); gap:var(--s7)}
.ftr h2{font:600 12px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--navy); margin-bottom:14px}
.ftr ul{list-style:none; display:flex; flex-direction:column; gap:6px}
.ftr a{color:var(--ink); text-decoration:none}
.ftr a:hover{color:var(--navy); text-decoration:underline}
.ftr-legal{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--rule-strong); font-size:13.5px; color:var(--ink-3)}
.ftr-legal a{color:var(--ink-2)}

/* ---------- tablet ---------- */
@container site (max-width: 1100px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .figs{grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:var(--s6)}
  .split--side{grid-template-columns:minmax(0,1fr) 300px}
  .ftr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ftr-grid > :first-child{grid-column:1 / -1}
}

/* ---------- phone ---------- */
@container site (max-width: 720px){
  .site{font-size:16.5px}
  .wrap{padding:0 20px}
  .sec{padding:56px 0}
  .sec--tight{padding:44px 0}
  .h-display{font-size:38px; line-height:1.1}
  .h1{font-size:34px; line-height:1.14}
  .h2{font-size:28px; line-height:1.2}
  .h3{font-size:21px}
  .lede{font-size:18.5px}
  .split,.split--even,.split--side{grid-template-columns:minmax(0,1fr); gap:var(--s6)}
  .util .wrap{min-height:34px; gap:12px}
  .util .util-r .u-tel,.util .u-cin{display:none}
  .hdr .wrap{min-height:68px; gap:12px}
  .brand img{width:34px}
  .brand-name{font-size:16px}
  .brand-name small{font-size:9.5px; letter-spacing:.08em}
  .menu-btn{padding:0 12px}
  .phero::after{inset:0 0 0 30%; opacity:.6}
  .phero .wrap{padding-top:40px; padding-bottom:44px}
  .coord{display:none}
  .figs{grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 20px}
  .fig-n{font-size:32px}
  .tl li{grid-template-columns:minmax(0,1fr)}
  .tl-year{text-align:left; padding:0 0 6px 32px; border-left:1px solid var(--rule-strong); position:relative}
  .tl-body::before{top:-27px}
  .tl-body{padding-bottom:32px}
  .form{grid-template-columns:minmax(0,1fr)}
  .tmap{gap:3px}
  .tile{font-size:9.5px}
  .org-row{grid-template-columns:minmax(0,1fr); border-top:0; padding-top:0; gap:12px}
  .ftr-grid{grid-template-columns:minmax(0,1fr); gap:var(--s6)}
  .tbl--stack thead{display:none}
  .tbl--stack tr{display:block; padding:16px 0; border-bottom:1px solid var(--rule)}
  .tbl--stack td{display:block; border:0; padding:3px 0}
  .tbl--stack tbody tr:hover td{background:transparent}
  .tbl--stack td[data-label]::before{content:attr(data-label); display:block; font:500 10.5px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
  .tbl--stack .t-title{font-size:16px}
  .kv th{width:auto; display:block; border:0; padding:14px 0 2px}
  .kv td{display:block; padding:0 0 14px}
  .kv tr{display:block; border-bottom:1px solid var(--rule)}
}

/* ---------- build additions (static site) ---------- */
html,body{margin:0; background:var(--paper)}
.mmenu[hidden]{display:none}
@container site (min-width: 1101px){ .mmenu{display:none} }
.person--noimg{grid-template-columns:minmax(0,1fr)}
@container site (max-width: 720px){ .person--noimg{grid-template-columns:minmax(0,1fr)} }
.skip{position:absolute; left:-9999px; top:0; z-index:10; background:#fff; padding:10px 14px; font:600 15px var(--sans); color:var(--navy)}
.skip:focus{left:12px; top:12px}
/* button text must beat the generic .site a colour */
.site a.btn--primary,.site a.btn--primary:hover,.site a.btn--ghost-inverse,.site a.btn--ghost-inverse:hover{color:#fff}
.site a.btn--inverse,.site a.btn--secondary{color:var(--navy)}
.site a.btn--inverse:hover,.site a.btn--secondary:hover{color:var(--navy-900)}
/* several boards set .split columns inline; the phone layout must still stack them */
@container site (max-width: 720px){ .split{grid-template-columns:minmax(0,1fr) !important; gap:var(--s6) !important} }
[hidden]{display:none !important}

/* ---------- photo banners and bands (navy overlay, white text) ---------- */
.phero.has-img{background:var(--navy-900) var(--bg) right center / cover no-repeat; border-bottom:0}
.phero.has-img::after{inset:0; opacity:1; background:linear-gradient(90deg, rgba(5,43,85,.94) 0%, rgba(5,43,85,.82) 42%, rgba(5,43,85,.38) 100%)}
.phero.has-img .h1{color:#fff}
.phero.has-img .lede{color:#E3EAF3}
.phero.has-img .crumbs,.phero.has-img .crumbs a,.phero.has-img .coord{color:#C9D6E6}
.phero.has-img .crumbs a:hover{color:#fff}
.phero.has-img .eyebrow{color:#C9D6E6}
.phero.has-img .eyebrow::before{background:var(--red)}
.band-img{position:relative; background:var(--navy-900) var(--bg) center / cover no-repeat; color:#fff}
.band-img::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,43,85,.92) 0%, rgba(5,43,85,.84) 55%, rgba(5,43,85,.66) 100%)}
.band-img > .wrap{position:relative; z-index:1}
.band-img .h2,.band-img .fig-n{color:#fff}
.band-img .eyebrow,.band-img .sub{color:#C9D6E6}
.band-img .eyebrow::before{background:var(--red)}
.band-img .fig{border-top-color:rgba(255,255,255,.75)}
.band-img .fig-l{color:#DCE6F2}
.band-img .more,.site .band-img a.more{color:#fff; border-bottom-color:rgba(255,255,255,.45)}
.band-img .more:hover{border-bottom-color:#fff}
.band-img [style*="border-top: 2px solid var(--navy)"]{border-top-color:rgba(255,255,255,.75) !important}
.band-img p[style*="var(--serif)"]{color:#fff !important}
@container site (max-width: 720px){
  .phero.has-img::after{inset:0; opacity:1; background:rgba(5,43,85,.86)}
  .band-img::before{background:rgba(5,43,85,.88)}
}