/* division-public-affairs/index.src.html, extracted by tools/extract_divisions.py. Do not edit here. */
/* ============ TOKENS ============ */
:root{
  --navy:#002F6D; --deep:#00224F; --night:#001A3E; --blue:#0074C8; --bright:#39B5E6; --cyan:#4FD1DC;
  --teal:#0AA5B5; --violet:#7C7CCE; --royal:#5E7FD0;
  --mist:#E9EEF0; --ink:#33404F; --mute:#5B6B7C; --line:rgba(0,46,109,.16); --line2:rgba(0,46,109,.09);
  --ff:'Orkney','Hanken Grotesk',system-ui,sans-serif;
  --gut:clamp(1.25rem,4.5vw,4rem); --max:1360px;
  --s3:clamp(2.6rem,5vw,4rem); --s4:clamp(4rem,8vw,7rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --skew:104deg; /* the M's own diagonal */
  /* Public Affairs: the homepage card's slate. #7E93B0 marks squares and rules on light grounds
     (3.1:1 on white); #B5C1D4 does it on the dark bands; --acc-ink carries accent text on light
     grounds (6.5:1 on white, 5.6:1 on mist). */
  --acc:#7E93B0;
  --acc-light:#B5C1D4;
  --acc-soft:rgba(126,147,176,.55);
  --acc-ghost:rgba(126,147,176,.2);
  --acc-ink:#4A5F7E;
  --tnight:#121A26; --tdeep:#1E2A3B;
  --band-1:#FFFFFF;
  --band-2:var(--mist);
  --hero-grad:linear-gradient(152deg, #121A26 0%, #1E2A3B 55%, #2A3A52 100%);
  /* r12: the hero's one slate (sampled from the client's p23 example); white 5.7:1, #E8EDF3 4.8:1 */
  --hslate:#586881; --hslate-0:rgba(88,104,129,0);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; overflow-x:clip}
/* anchor targets land clear of the sticky header */
section[id]{scroll-margin-top:90px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{font-family:var(--ff); font-size:1.02rem; line-height:1.6; color:var(--ink); background:#fff;
  -webkit-font-smoothing:antialiased; overflow-x:clip; touch-action:manipulation}
h1,h2,h3{color:var(--navy); letter-spacing:0; text-wrap:balance; font-weight:700}
h2{font-weight:300; font-size:clamp(2rem,3.8vw,3.2rem); line-height:1.1; letter-spacing:-.016em}
p{text-wrap:pretty}
a{color:var(--blue)}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.skip{position:fixed; top:0; left:-200%; z-index:900; background:var(--navy); color:#fff; padding:.8rem 1.2rem; text-decoration:none}
.skip:focus-visible{left:0}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
.dkbg :focus-visible{outline-color:var(--cyan)}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* reveals: visible by default; .js gates them off pre-view */
.io{opacity:1; transform:none}
html.js:not(.rm) .io:not(.in){opacity:0; transform:translateY(16px)}
html.js:not(.rm) .io{transition:opacity .8s var(--ease), transform .8s var(--ease)}
html.js:not(.rm) .stag > *{transition:opacity .7s var(--ease) var(--d,0ms), transform .7s var(--ease) var(--d,0ms)}
html.js:not(.rm) .stag:not(.in) > *{opacity:0; transform:translateY(14px)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--ff); font-size:.98rem; font-weight:700;
  padding:.95rem 1.5rem; text-decoration:none; border:1px solid var(--navy); color:var(--navy); background:transparent;
  cursor:pointer; transition:background .3s ease, color .3s ease, border-color .3s ease}
.btn:hover{background:var(--navy); color:#fff}
.btn.solid{background:var(--navy); color:#fff}
.btn.solid:hover{background:var(--blue); border-color:var(--blue)}
.btn.inv{border-color:#fff; color:#fff}
.btn.inv:hover{background:#fff; color:var(--navy)}
.btn.inv.solid{background:#fff; color:var(--navy); border-color:#fff}
.btn.inv.solid:hover{background:var(--cyan); border-color:var(--cyan)}
.arw{display:inline-block; transition:transform .35s var(--ease)}
.btn:hover .arw,a:hover .arw{transform:translateX(5px)}

/* ============ HEADER: white, sticky ============ */
.hdr{position:sticky; top:0; z-index:600; background:#fff; border-bottom:1px solid var(--line2)}
.hdr-in{max-width:1500px; margin-inline:auto; padding:.95rem var(--gut); display:flex; align-items:center; gap:2rem}
.lg{display:flex; flex:none; position:relative}
.lg img{height:36px; width:auto; display:block}
.nav{display:flex; align-items:center; gap:1.7rem; margin-left:auto}
.nav > a,.nav button{font-family:var(--ff); font-size:.98rem; font-weight:500; color:var(--navy); text-decoration:none;
  background:none; border:0; -webkit-appearance:none; appearance:none; cursor:pointer; padding:.35rem 0;
  transition:color .3s ease}
.nav > a:hover,.nav button:hover{color:var(--blue)}
.lang{display:flex; gap:.7rem; padding-left:1.4rem; border-left:1px solid var(--line); font-size:.9rem}
.lang b{color:var(--navy); font-weight:700}
.lang a{color:var(--mute); text-decoration:none; font-weight:400}
.nav > a.back{font-weight:400; color:var(--mute)}
.nav > a.back:hover{color:var(--acc-ink)}
.hdr .btn{padding:.7rem 1.15rem; font-size:.9rem}
.burger{display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:.5rem; z-index:660}
.burger i{display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; transition:transform .3s ease, opacity .3s ease, background .3s ease}
.mnav-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mnav-open .burger i:nth-child(2){opacity:0}
.mnav-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none}
@media (max-width:1319px){
  .nav{display:none}
  .burger{display:block}
  .lg img{height:30px}
  .mnav{display:none; position:fixed; inset:0; z-index:560; background:#fff; padding:6rem var(--gut) 3rem; overflow:auto; overscroll-behavior:contain}
  .mnav-open .hdr{background:rgba(255,255,255,.98)}
  .mnav-open .mnav{display:block}
  .mnav a{display:block; font-size:1.35rem; font-weight:700; color:var(--navy); text-decoration:none;
    padding:.75rem 0; border-bottom:1px solid var(--line2)}
  .mnav a.sm{font-size:1rem; font-weight:400; color:var(--ink)}
  .mnav .mlang{margin-top:1.6rem; font-size:.95rem; color:var(--mute)}
  .mnav .mlang b{color:var(--navy)}
  .mnav .mlang a{display:inline; border:0; padding:0 0 0 .8rem; font-size:.95rem; font-weight:400; color:var(--mute)}
}


/* ============ HERO: the Palacio Nacional ============ */
/* The Palacio Nacional at night beside the copy's solid panel. It wipes in on load, then the traffic on the
   wet road streams past as a long exposure while the palace stays still. All motion stays inside the frame. */
.hero{--pl:max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); --pw:50%;
  position:relative; min-height:min(90svh,860px); display:flex; flex-direction:column; overflow:hidden;
  color:#fff; background:var(--hslate); isolation:isolate}
/* the copy's panel: one solid colour, full height, flush to the left edge */
.hero::before{content:""; position:absolute; z-index:1; top:0; bottom:0; left:0; width:var(--pw); background:var(--hslate)}
.hv-media{position:absolute; top:0; bottom:0; right:0; left:var(--pw); z-index:0; overflow:hidden; background:var(--hslate);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.hv-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 50%; display:block}
/* r12: the photograph sits in the panel's slate. A screen of #454C59 lifts the toned night sky (about #1A283E)
   onto the panel colour while the facade and the lit road stay lighter than it, so the Palacio still reads;
   a short feather on the seam side carries the panel into the frame. The radar svg itself is unchanged. */
.hv-media::before{content:""; position:absolute; inset:0; z-index:1; background:#454C59; mix-blend-mode:screen; pointer-events:none}
.hv-media::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, var(--hslate) 0, var(--hslate-0) 26%)}
/* the hero radar: the About section's, held in the photograph's bottom-right corner */
.hv-media .rd{position:absolute; inset:0; width:100%; height:100%}
.hv-media .rd.rdc .rd-r{opacity:.2}
.hv-media .rd.rdc .rd-bm{opacity:.05}
.hv-media .rd.rdc .rd-l{opacity:.55}
.hv-media .rd.rdc .rd-c{opacity:.7}
.hv-media .rd .rd-col{opacity:.55}
/* load: the photograph wipes in from the right on a slanted edge; the copy is already in place */
html.js:not(.rm) .hv-media{clip-path:polygon(115% 0,100% 0,100% 100%,130% 100%)}
html.js.ld:not(.rm) .hv-media{clip-path:polygon(0 0,100% 0,100% 100%,0 100%); transition:clip-path 1.3s var(--ease) .18s}
.hero-in{position:relative; z-index:2; flex:1; display:flex; align-items:center; width:100%; max-width:var(--max); margin-inline:auto;
  padding:clamp(3rem,9vh,6rem) var(--gut); pointer-events:none}
.hero-txt{max-width:min(34rem, calc(50vw - var(--pl) - 3.5rem)); pointer-events:auto}
.hero h1{color:#fff; font-weight:300; font-size:clamp(2rem,2.6vw,2.6rem); line-height:1.14; letter-spacing:-.02em; max-width:19em; text-wrap:balance}
.hero-sub{margin-top:1.4rem; font-size:clamp(1.02rem,1.35vw,1.2rem); line-height:1.6; max-width:30rem; color:#E8EDF3}
.hero-cta{margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:.9rem}
/* narrower screens: the photograph on top, the panel below it at full width */
@media (max-width:900px){
  .hero{min-height:0; background:var(--hslate)}
  .hv-media::after{background:linear-gradient(0deg, var(--hslate) 0, var(--hslate-0) 22%)}
  .hero::before{display:none}
  .hv-media{position:relative; left:0; height:clamp(300px,82vw,520px); flex:none}
  .hero-in{padding-top:2.2rem}
  .hero-txt{max-width:none}
}

/* ============ STATEMENT: purpose and the three branches ============ */
.statement{background:var(--band-1)}
.statement .wrap{padding-block:var(--s3)}
.st-in{position:relative; padding-left:clamp(1.4rem,2.5vw,2.4rem)}
.spine{position:absolute; left:0; top:0; bottom:0; width:1px; pointer-events:none;
  background:linear-gradient(180deg, var(--acc), rgba(126,147,176,.16) 82%, transparent)}
.spine::before{content:""; position:absolute; top:0; left:-2.5px; width:6px; height:6px; background:var(--acc)}
.st-1{font-weight:300; font-size:clamp(1.6rem,2.9vw,2.5rem); line-height:1.22; letter-spacing:-.014em;
  color:var(--navy); max-width:26em; text-wrap:balance}
.mkts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.4rem,3vw,3rem);
  margin-top:clamp(1.8rem,3vw,2.4rem); max-width:62rem; list-style:none}
.st-2{margin-top:1.1rem; max-width:40rem; font-size:clamp(1.02rem,1.35vw,1.18rem); line-height:1.65; color:var(--ink)}
.mkts li{position:relative; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:clamp(1.02rem,1.3vw,1.14rem); line-height:1.6; color:var(--ink)}
.mkts li::before{content:""; position:absolute; top:-4px; left:0; width:7px; height:7px; background:var(--acc)}
@media (max-width:760px){ .mkts{grid-template-columns:1fr} }
/* the three branches of government, set as the statement's own marks */
.mkts.br3{grid-template-columns:repeat(3,minmax(0,1fr)); max-width:52rem}
.br3 li{font-weight:300; font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.2; letter-spacing:-.01em; color:var(--navy)}
.br3 + .st-2{margin-top:clamp(1.8rem,3vw,2.4rem)}
@media (max-width:520px){ .mkts.br3{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem} .br3 li{font-size:1.08rem} }

/* ============ SERVICES: the listing board ============ */
/* The Investor Relations board, so the divisions read as one firm. Without JavaScript the five
   services read as one photographed stack; with it the index becomes a tab list and one
   service shows at a time. Every panel stays in the markup, so nothing is lost to search. */
.services{background:var(--band-2)}
.services .wrap{padding-block:var(--s4)}
.sv-intro{margin-top:1.2rem; max-width:44rem; font-size:clamp(1.02rem,1.35vw,1.18rem); line-height:1.65; color:var(--ink)}
.svc-board{display:grid; grid-template-columns:minmax(0,252px) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.6rem); margin-top:clamp(2.4rem,4vw,3.4rem); align-items:start}
.svc-idx{display:flex; flex-direction:column}
.svc-col{display:flex; flex-direction:column; min-width:0}
.svc-blk{display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:clamp(1.4rem,2.6vw,2.2rem);
  padding:clamp(1.9rem,3.2vw,2.6rem) 0; border-top:1px solid rgba(0,46,109,.24); scroll-margin-top:104px}
.svc-blk:first-child{border-top:0; padding-top:0}
.svc-im{position:relative; align-self:stretch; margin:0; overflow:hidden; min-height:158px; background:var(--tnight)}
.svc-im .rd,.about-fig .rd{position:absolute; inset:0; width:100%; height:100%}
.svc-blk .sv-d{margin-top:1rem; max-width:34rem; font-size:1.02rem; line-height:1.65; color:var(--ink)}
.svc-im img{display:block; width:100%; height:100%; object-fit:cover}
.svc-blk h3{font-weight:300; font-size:clamp(1.35rem,2vw,1.75rem); line-height:1.14; letter-spacing:-.012em; color:var(--navy)}
.svc-blk ul{list-style:none; margin-top:1rem; max-width:38rem}
.svc-blk li{position:relative; padding:.34rem 0 .34rem 1.15rem; font-size:.97rem; line-height:1.55; color:var(--ink)}
.svc-blk li::before{content:""; position:absolute; left:0; top:.92rem; width:7px; height:1px; background:var(--acc-ink)}
.svc-close{margin-top:clamp(2.2rem,4vw,3.2rem)}
html.js:not(.rm) .svc-blk{opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
html.js:not(.rm) .svc-blk.in{opacity:1; transform:none}
@media (max-width:1080px){ .svc-board{grid-template-columns:1fr; gap:0} .svc-idx{display:none} }
@media (max-width:760px){ .svc-blk{grid-template-columns:1fr} .svc-im{aspect-ratio:1000/640; min-height:0!important} }
/* ---- the tabbed board (JS adds .tabs) ---- */
.svc-idx[hidden]{display:none!important}
.svc-idx button{position:relative; display:block; width:100%; text-align:left; font-family:var(--ff);
  padding:.8rem .4rem .8rem 1.1rem; border:0; border-top:1px solid var(--line2); background:none;
  font-size:.95rem; line-height:1.35; color:#46566A; cursor:pointer; transition:color .3s ease}
.svc-idx button:first-child{border-top:0}
.svc-idx button::before{content:""; position:absolute; left:1px; top:1.12rem; width:5px; height:5px;
  background:#A9B5C2; transition:background .3s ease, width .3s var(--ease), height .3s var(--ease), top .3s var(--ease), left .3s var(--ease)}
.svc-idx button:hover{color:var(--navy)}
.svc-idx button:focus-visible{outline:2px solid var(--acc-ink); outline-offset:2px}
.svc-idx button[aria-selected="true"]{color:var(--navy)}
.svc-idx button[aria-selected="true"]::before{width:9px; height:9px; top:.98rem; left:-1px; background:var(--acc)}
/* one cell holds all five panels, so the board keeps the height of the longest and nothing
   below it moves when the service changes */
.svc-board.tabs .svc-stage{display:grid}
.svc-board.tabs .svc-blk{grid-area:1/1; border-top:0; padding:0; margin:0; background:#fff}
.svc-board.tabs .svc-blk > div{padding:clamp(1.8rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) clamp(2rem,3.4vw,2.7rem) 0}
.svc-board.tabs .svc-im{min-height:300px}
@media (min-width:761px){ .svc-board.tabs .svc-blk > div{align-self:center} }
html.js .svc-board.tabs .svc-blk:not(.on){opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s ease, visibility 0s linear .28s}
html.js:not(.rm) .svc-board.tabs .svc-blk{transform:none}
html.js:not(.rm) .svc-board.tabs .svc-blk.on{transition:opacity .5s var(--ease) .1s, visibility 0s}
.svc-blk:focus-visible{outline:2px solid var(--acc-ink); outline-offset:3px}
@media (max-width:1080px){
  .svc-board.tabs{gap:1.6rem}
  .svc-board.tabs .svc-idx{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
    border-top:1px solid var(--line2); border-left:1px solid var(--line2)}
  .svc-board.tabs .svc-idx button{border:0; border-right:1px solid var(--line2); border-bottom:1px solid var(--line2);
    padding:.85rem .8rem .85rem 1.7rem; font-size:.9rem; background:#fff}
  .svc-board.tabs .svc-idx button::before{left:.75rem}
  .svc-board.tabs .svc-idx button[aria-selected="true"]::before{left:.6rem}
}
@media (max-width:760px){
  .svc-board.tabs .svc-idx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-board.tabs .svc-idx button:last-child:nth-child(odd){grid-column:1/-1}
  html.js .svc-board.tabs .svc-blk:not(.on){display:none}
  .svc-board.tabs .svc-blk > div{padding:1.5rem clamp(1.2rem,4.5vw,1.6rem) 1.8rem}
  .svc-board.tabs .svc-im{min-height:0}
}

/* ============ REPORTS: the live site's four downloads ============ */
/* Miranda's own covers rest in grey under a slate multiply, like the team's portraits, and
   return to colour under the pointer or focus. The whole card is the link. */
.reports{background:var(--band-1)}
.reports .wrap{padding-block:var(--s4)}
.rp-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.4rem,2.4vw,2rem); margin-top:clamp(2rem,3.4vw,2.8rem); list-style:none}
.rp{position:relative; display:flex; flex-direction:column; height:100%; border-top:1px solid var(--line); padding-top:1.1rem}
.rp::before{content:""; position:absolute; top:-4px; left:0; width:7px; height:7px; background:var(--acc)}
.rp .ph{position:relative; display:block; overflow:hidden; margin:0; background:var(--tnight)}
.rp .ph::after{content:""; position:absolute; inset:0; background:rgba(30,42,59,.22); mix-blend-mode:multiply; transition:opacity .5s ease}
.rp img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; filter:grayscale(1) contrast(1.04); transition:filter .5s ease}
.rp h3{margin-top:1.1rem; font-weight:700; font-size:1.08rem; line-height:1.3; color:var(--navy)}
.rp h3 a{color:inherit; text-decoration:none}
.rp h3 a::after{content:""; position:absolute; inset:0}
.rp h3 a:focus-visible{outline:none}
.rp:focus-within{outline:2px solid var(--acc-ink); outline-offset:6px}
.rp p{margin-top:.5rem; font-size:.95rem; line-height:1.6; color:var(--ink)}
.rp:hover img,.rp:focus-within img{filter:none}
.rp:hover .ph::after,.rp:focus-within .ph::after{opacity:0}
.rp:hover h3{color:var(--acc-ink)}
@media (max-width:1080px){ .rp-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .rp-grid{grid-template-columns:1fr} }

/* ============ ABOUT THE DIVISION: deep slate band ============ */
.about{position:relative; overflow:hidden; background:var(--tnight); color:#C9D1DD}
.about .wrap{position:relative; z-index:2; padding-block:var(--s4)}
.about h2{color:#fff}
.about-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(2.4rem,6vw,6rem); align-items:stretch}
.about-txt h2{margin-bottom:2rem}
.about-txt p{font-size:clamp(1.02rem,1.35vw,1.18rem); line-height:1.7; max-width:38rem}
.about-txt p + p{margin-top:1.2rem}
.about-txt .ab-dl{margin-top:1.8rem; font-size:.95rem; line-height:1.6}
.ab-dl a{margin-left:.35rem; font-weight:700; color:#fff; text-decoration:none; border-bottom:2px solid var(--acc-light); padding-bottom:.08em}
.ab-dl a:hover{color:var(--acc-light)}
/* two short lists from the live site, then the photograph: the division's square marks its corner */
.ab-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem clamp(1.6rem,3vw,2.8rem); margin-top:2.2rem}
.ab-one{list-style:none; margin-top:2rem; max-width:34rem}
.ab-one li{position:relative; padding:.6rem 0 .6rem 1.1rem; border-top:1px solid rgba(255,255,255,.14); font-size:.98rem; line-height:1.5}
.ab-one li::before{content:""; position:absolute; left:0; top:1.12rem; width:5px; height:5px; background:var(--acc-light)}
.ab-one a{color:#fff; font-weight:700; text-decoration:none; border-bottom:2px solid var(--acc-light); padding-bottom:.08em}
.ab-one a:hover{color:var(--acc-light)}
.ab-cols h3{font-size:1rem; font-weight:700; color:#fff}
.ab-cols ul{list-style:none; margin-top:.7rem}
.ab-cols li{position:relative; padding:.5rem 0 .5rem 1.1rem; border-top:1px solid rgba(255,255,255,.14); font-size:.97rem; line-height:1.5}
.ab-cols li::before{content:""; position:absolute; left:0; top:1.02rem; width:5px; height:5px; background:var(--acc)}
@media (max-width:560px){ .ab-cols{grid-template-columns:1fr} }
@media (max-width:900px){ .about-fig{aspect-ratio:auto; min-height:clamp(220px,60vw,340px)} }
.about-fig{position:relative; margin:0; min-height:340px}
.about-fig img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.about-fig::before{content:""; position:absolute; z-index:1; left:-5px; top:-5px; width:10px; height:10px; background:var(--acc-light)}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr} .about-fig{min-height:0; aspect-ratio:1250/600} }

/* ============ CTA BAND ============ */
.ctab{position:relative; overflow:hidden; background:var(--hero-grad); color:#fff}
.ctab .wrap{padding-block:var(--s3); position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,1fr) auto; gap:1.6rem 4rem; align-items:center}
.ctab h2{color:#fff}
.ctab .btn{justify-self:start}
@media (max-width:820px){ .ctab .wrap{grid-template-columns:1fr} }


/* ============ POP-UP ============ */
.talk-sub{margin-top:.8rem}
.tform{margin-top:1.4rem}
.talk-ways{margin-top:1.2rem; font-size:.86rem; color:var(--mute)}
.mast.m7{grid-template-columns:repeat(7,minmax(0,1fr)); gap:1.6rem 1.1rem}
.mast.m7 li{position:relative}
/* seven names in seven columns: the profile link sits on the photograph's corner, clear of the name */
.mast.m7 .ph .li{position:absolute; z-index:1; right:0; bottom:0}
.mast.m7 b{font-size:.92rem}
.mast.m7 li:hover img{filter:none}
.mast.m7 li:hover .ph::after{opacity:0}
@media (max-width:1100px){ .mast.m7{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:560px){ .mast.m7{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ============ TEAM: the two leads, then the analysts ============ */
.prof{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2.2rem,5vw,4.5rem); margin-top:2.4rem; list-style:none}
.prof li{display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:clamp(1.2rem,2.2vw,1.8rem); align-items:start}
.prof .ph{position:relative; display:block; overflow:hidden; margin:0}
.prof .ph::after{content:""; position:absolute; inset:0; background:rgba(0,47,109,.18); mix-blend-mode:multiply; transition:opacity .5s ease}
.prof img{aspect-ratio:4/5; width:100%; height:auto; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.05); transition:filter .5s ease}
.prof li:hover img{filter:none}
.prof li:hover .ph::after{opacity:0}
.prof .li{position:absolute; z-index:1; right:0; bottom:0; width:30px; height:30px; display:grid;
  place-content:center; background:var(--navy); color:#fff; transition:background .3s ease}
.prof .li svg{width:15px; height:15px; fill:currentColor; display:block}
.prof .li:hover{background:var(--blue)}
.prof b{display:block; font-size:1.3rem; font-weight:700; line-height:1.25; color:var(--navy)}
.prof .role{display:block; margin-top:.25rem; font-size:.9rem; font-weight:500; color:var(--acc-ink)}
.prof p{margin-top:.9rem; font-size:.95rem; line-height:1.65; color:var(--ink); max-width:34rem}
html.js:not(.rm) .prof li{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease) var(--d,0ms), transform .6s var(--ease) var(--d,0ms)}
html.js:not(.rm) .team.in .prof li{opacity:1; transform:none}
@media (max-width:1100px){ .prof{grid-template-columns:1fr} }
.prof + .prof{margin-top:clamp(2.6rem,4.4vw,3.6rem); padding-top:clamp(2.2rem,3.6vw,2.8rem); border-top:1px solid var(--line)}
.prof + .mast{margin-top:clamp(2.6rem,4.4vw,3.6rem); padding-top:clamp(2rem,3.4vw,2.6rem); border-top:1px solid var(--line)}
.mast.m4 img{aspect-ratio:4/5}
.prof + .mast.m4{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:820px){ .prof + .mast.m4{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:480px){ .prof + .mast.m4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .prof li{grid-template-columns:minmax(0,120px) minmax(0,1fr)} .prof b{font-size:1.15rem} }
/* ============ TEAM: the masthead ============ */
.team{background:var(--band-1)}
.team .wrap{padding-block:var(--s4)}
.team-sub{margin-top:1.2rem; max-width:40rem; font-size:clamp(1.02rem,1.35vw,1.18rem); line-height:1.65; color:var(--ink)}
.mast.m4{grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.8rem 1.5rem}
.mast.m4 li:hover img{filter:none}
.mast.m4 li:hover .ph::after{opacity:0}
.mast.m4 li{position:relative}
.mast .li{position:absolute; right:0; bottom:-2px; width:30px; height:30px; display:grid;
  place-content:center; background:var(--navy); color:#fff; transition:background .3s ease}
.mast .li svg{width:15px; height:15px; fill:currentColor; display:block}
.mast .li:hover{background:var(--acc)}
.team-note{margin-top:1.4rem; font-size:.8rem; color:var(--mute)}
.join{margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--line); font-size:1rem; color:var(--ink)}
.join b{color:var(--navy)}
.join a{color:var(--acc-ink); font-weight:700; text-decoration:none; border-bottom:2px solid var(--acc); padding-bottom:.1em;
  transition:color .3s ease, border-color .3s ease}
.join a:hover{color:var(--navy); border-color:var(--navy)}
@media (max-width:820px){ .mast.m4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .mast.m4{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* the heading sits on the masthead rule: the rule runs edge to edge behind the word, white knockout behind the text */
.team-hd{position:relative}
.team-hd h2{position:relative; z-index:1; display:inline-block; padding-right:1.4rem; background:var(--band-1)}
.mast-rule{position:absolute; left:0; right:0; top:58%; height:1px; transform-origin:left;
  background:linear-gradient(90deg, var(--acc), var(--acc) 40%, var(--acc-soft) 70%, rgba(79,163,232,.25))}
.mast{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1.6rem 1.2rem; margin-top:2.2rem; list-style:none}
/* one plate for twelve studio backgrounds: grayscale under a navy multiply, colour returning under the pointer */
.mast .ph{position:relative; display:block; overflow:hidden; margin:0}
.mast .ph::after{content:""; position:absolute; inset:0; background:rgba(0,47,109,.18); mix-blend-mode:multiply; transition:opacity .5s ease}
.mast img{aspect-ratio:3/4; width:100%; height:auto; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.05); transition:filter .5s ease}
.mast b{display:block; margin-top:.65rem; font-size:.98rem; font-weight:700; line-height:1.3; color:var(--navy)}
.mast span{display:block; margin-top:.15rem; font-size:.8rem; line-height:1.35; color:var(--mute)}
html.js:not(.rm) .mast-rule{transform:scaleX(0); transition:transform 1.1s var(--ease)}
html.js:not(.rm) .mast li{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease) var(--d,0ms), transform .6s var(--ease) var(--d,0ms)}
html.js:not(.rm) .team.in .mast-rule{transform:scaleX(1)}
html.js:not(.rm) .team.in .mast li{opacity:1; transform:none}
@media (max-width:820px){ .mast{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:480px){ .mast{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem .9rem} }
@media (max-width:420px){ .mast{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ============ CONTACT ============ */
.contact{background:var(--band-2); color:var(--ink)}
.contact h2{color:var(--navy)}
.contact .wrap{padding-block:var(--s4); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.4rem,6vw,6rem); align-items:center}
.contact .sub{margin-top:1.1rem; max-width:34rem; color:var(--ink)}
/* r13: social links, white square tiles with navy brand glyphs (Font Awesome Free 6 brand icons, CC BY 4.0,
   fontawesome.com). 34px tiles; the ::after widens each hit area to 44px. Colour change only on hover. */
.soc{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0 0 1.6rem; padding:0}
.soc a{position:relative; display:flex; align-items:center; justify-content:center; width:34px; height:34px; background:#fff; color:var(--navy); box-shadow:inset 0 0 0 1px var(--line); transition:background-color .2s ease, color .2s ease}
.soc a::after{content:""; position:absolute; inset:-5px}
.soc svg{display:block; width:18px; height:18px; fill:currentColor}
.soc a:hover{background:var(--navy); color:#fff}
.dkbg .soc a{box-shadow:none}
.dkbg .soc a:hover{background:var(--cyan); color:var(--navy)}
.ty .soc{margin:clamp(2.4rem,4.4vw,3.4rem) 0 0}
.ty .soc + .cways{margin-top:1.6rem}
html.rm .soc a{transition:none}
@media (prefers-reduced-motion:reduce){ .soc a{transition:none} }
/* the left column takes the homepage's register: hairline rows with a 2px accent rule that draws in */
.cways{margin-top:2.2rem; display:flex; flex-direction:column}
.cways a,.office{position:relative; padding:.95rem 0 .95rem 1.15rem; border-top:1px solid var(--line2)}
.cways a::before,.office::before{content:""; position:absolute; left:0; top:1rem; bottom:1rem; width:2px; background:var(--acc); transform-origin:top}
.cways a{display:flex; flex-wrap:wrap; gap:.3rem 1.4rem; align-items:baseline; text-decoration:none}
.cways .l{font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); min-width:7rem}
.cways .v{font-size:1.12rem; font-weight:700; color:var(--navy); transition:color .3s ease}
.cways a:hover .v{color:var(--blue)}
.office{margin-top:0; font-style:normal; font-size:.98rem; color:var(--ink); line-height:1.65; border-bottom:1px solid var(--line2)}
.office b{display:block; color:var(--navy)}
html.js:not(.rm) .cways a::before,html.js:not(.rm) .office::before{transform:scaleY(0); transition:transform .8s var(--ease) var(--rd,0ms)}
html.js:not(.rm) .contact .in .cways a::before,html.js:not(.rm) .contact .in .office::before{transform:scaleY(1)}
.cform{background:#fff; padding:clamp(1.6rem,3vw,2.4rem); color:var(--ink); align-self:start}
.field{margin-bottom:1.15rem}
.field label{display:block; font-size:.8rem; font-weight:700; color:var(--navy); margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%; font-family:var(--ff); font-size:.98rem; color:var(--ink);
  background:#fff; border:1px solid rgba(0,46,109,.4); padding:.85rem 1rem}
.field select{background-color:#fff; color:var(--ink)}
.field textarea{min-height:6.5rem; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue); border-color:transparent}
.f-help{margin-top:.4rem; font-size:.8rem; color:var(--mute)}
.f-after{margin-top:1rem; font-size:.82rem; color:var(--mute)}
@media (max-width:960px){ .contact .wrap{grid-template-columns:1fr} }

/* ============ FOOTER ============ */
.ft{background:var(--deep); color:#B5C1D4}
.ft .wrap{padding-block:3.4rem 2.4rem}
.ft-top{display:grid; grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,.8fr)); gap:2.5rem}
.ft .lg2 img{height:42px; width:auto; display:block}
.ft p{font-size:.9rem; margin-top:1rem; max-width:24rem}
.ft h3{color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.9rem}
.ft ul{list-style:none; display:flex; flex-direction:column; gap:.45rem}
.ft a{color:#B5C1D4; text-decoration:none; font-size:.92rem; display:inline-block; padding:.15rem 0}
.ft a:hover{color:#fff}
.ft a[hreflang]{text-decoration:underline; text-underline-offset:3px}
.ft-btm{margin-top:2.8rem; padding-top:1.6rem; border-top:1px solid rgba(182,194,214,.18);
  display:flex; flex-wrap:wrap; gap:1rem 3rem; justify-content:space-between; font-size:.82rem}
.ft-btm address{font-style:normal; line-height:1.6}
.ft-btm .ft-cr{flex-basis:100%; max-width:none; margin-top:0; font-size:.68rem; line-height:1.55; color:rgba(181,193,212,.48)}
.ft .ft-cr a{display:inline; padding:0; font-size:inherit; color:inherit; text-decoration:underline; text-underline-offset:2px}
.ft .ft-cr a:hover{color:#B5C1D4}
@media (max-width:900px){ .ft-top{grid-template-columns:1fr 1fr} }

/* ============ CONSENT: banner and policies ============ */
.ckb{position:fixed; left:0; right:0; bottom:0; z-index:800; background:var(--night); color:#C8D3E2;
  border-top:2px solid var(--blue); box-shadow:0 -14px 40px rgba(0,16,40,.3);
  transform:translateY(101%); transition:transform .55s var(--ease)}
.ckb.up{transform:none}
.ckb[hidden]{display:none}
.ckb-in{max-width:var(--max); margin-inline:auto; padding:1.15rem var(--gut) 1.25rem;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.9rem 2.4rem; align-items:center}
.ckb p{font-size:.9rem; line-height:1.55; max-width:46rem}
.ckb-l{margin-top:.5rem; display:flex; gap:1.2rem; font-size:.8rem}
.ckb-a{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-end}
.ckb-a button{font-family:inherit; font-size:.82rem; font-weight:700; letter-spacing:.02em; cursor:pointer;
  padding:.72em 1.25em; border:1px solid rgba(200,211,226,.42); background:transparent; color:#DCE5F0;
  transition:background .25s ease, color .25s ease, border-color .25s ease}
.ckb-a button:hover{border-color:#fff; color:#fff}
.ckb-a button.solid{background:var(--blue); border-color:var(--blue); color:#fff}
.ckb-a button.solid:hover{background:var(--bright); border-color:var(--bright)}
.lnk{font-family:inherit; font-size:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px}
.ckb .lnk{color:#9FB4CE}
.ckb .lnk:hover{color:#fff}
.ckb-pref{grid-column:1/-1; display:none; border-top:1px solid rgba(200,211,226,.16); margin-top:.4rem; padding-top:1rem}
.ckb.open .ckb-pref{display:block}
.ckb-pref label{display:flex; gap:.7rem; align-items:flex-start; padding:.5rem 0; font-size:.86rem}
.ckb-pref input{margin-top:.28rem; width:1rem; height:1rem; flex:none; appearance:none; -webkit-appearance:none;
  border:1px solid rgba(200,211,226,.55); background:transparent; display:inline-grid; place-content:center; cursor:pointer}
.ckb-pref input::before{content:""; width:.55rem; height:.55rem; background:var(--bright); transform:scale(0); transition:transform .15s ease}
.ckb-pref input:checked::before{transform:scale(1)}
.ckb-pref input:disabled{border-color:rgba(200,211,226,.3); cursor:default}
.ckb-pref input:disabled::before{background:rgba(200,211,226,.55)}
.ckb-pref span b{display:block; color:#fff; font-weight:700}
.ckb-pref span i{font-style:normal; color:#93A7C0}
@media (max-width:820px){
  .ckb-in{grid-template-columns:1fr}
  .ckb-a{justify-content:flex-start}
}
dialog.pol{width:min(46rem,calc(100vw - 2rem)); max-height:min(80vh,44rem); margin:auto; border:0; padding:0; color:var(--ink);
  background:#fff; box-shadow:0 30px 80px rgba(0,20,50,.35); border-top:3px solid var(--acc)}
dialog.pol::backdrop{background:rgba(0,26,62,.62)}
.pol-in{padding:2.2rem clamp(1.4rem,4vw,2.6rem) 2.4rem; overflow:auto; max-height:inherit}
.pol h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.pol p{margin-top:1rem; font-size:.95rem; line-height:1.68; max-width:38rem}
.pol .upd{margin-top:1.7rem; padding-top:1rem; border-top:1px solid var(--line2);
  font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:var(--mute)}
.pol-x{position:absolute; top:.65rem; right:.65rem; width:2.4rem; height:2.4rem; cursor:pointer;
  border:0; background:none; color:var(--mute); font-size:1.5rem; line-height:1; font-family:inherit}
.pol-x:hover{color:var(--navy)}
/* the consent block sits on the white form panel */
.consent{grid-column:1/-1; margin:.4rem 0 .3rem; padding-top:1rem; border-top:1px solid var(--line2)}
.consent label{display:flex; gap:.75rem; align-items:flex-start; padding:.4rem 0; font-size:.85rem; line-height:1.5;
  color:var(--ink); cursor:pointer}
.consent input{margin-top:.22rem; width:1rem; height:1rem; flex:none; appearance:none; -webkit-appearance:none;
  border:1px solid var(--navy); background:#fff; display:inline-grid; place-content:center; cursor:pointer}
.consent input::before{content:""; width:.55rem; height:.55rem; background:var(--blue); transform:scale(0); transition:transform .15s ease}
.consent input:checked::before{transform:scale(1)}
.consent .lnk{color:var(--blue); font-weight:700}
.consent .req{color:#B0402E; font-weight:700}
@media (prefers-reduced-motion:reduce){ .ckb{transition:none} }

/* gradient CTAs (ported from the KokonutUI gradient-button component) */
.btn{transition:background .3s ease, color .3s ease, border-color .3s ease, transform .18s ease, box-shadow .4s ease}
.btn:active{transform:scale(.97)}
.btn.solid{border:1px solid transparent;
  background:linear-gradient(var(--navy), var(--navy)) padding-box,
             linear-gradient(120deg, #0074C8, #60D0E4 55%, #002F6D) border-box}
.btn.solid:hover{color:#fff;
  background:linear-gradient(var(--blue), var(--blue)) padding-box,
             linear-gradient(120deg, #60D0E4, #0074C8 55%, #0074C8) border-box;
  box-shadow:0 10px 26px rgba(30,124,214,.32)}
.btn.inv.solid{border:1px solid transparent; color:var(--navy);
  background:linear-gradient(#fff, #fff) padding-box,
             linear-gradient(120deg, #60D0E4, #FFFFFF 45%, #0074C8) border-box}
.btn.inv.solid:hover{color:var(--navy);
  background:linear-gradient(var(--cyan), var(--cyan)) padding-box,
             linear-gradient(120deg, #FFFFFF, #60D0E4 55%, #0074C8) border-box;
  box-shadow:0 10px 26px rgba(79,163,232,.35)}


/* buttons on this page: the header CTA keeps its border (the nav link reset was removing it), and
   the white button warms to blue on hover, never to the division teal */
.nav > a.btn.hcta{border:1px solid var(--navy); padding:.7rem 1.15rem; color:var(--navy)}
.nav > a.btn.hcta:hover{color:#fff; background:var(--navy)}
.btn.inv.solid{background:linear-gradient(#fff, #fff) padding-box,
  linear-gradient(120deg, #FFFFFF, #CFE3F5 45%, #0074C8) border-box}
.btn.inv.solid:hover{color:#fff; background:linear-gradient(var(--blue), var(--blue)) padding-box,
  linear-gradient(120deg, #FFFFFF, #0074C8 55%, #002F6D) border-box; box-shadow:0 10px 26px rgba(0,116,200,.3)}
/* the shared contact band centres its columns; on this page the heading sits level with the form */
.contact .wrap{align-items:start}

/* ============ THE RADAR: the Public Affairs card's sweep, carried through the page ============ */
/* The homepage card turns a white beam round two rings, and pings where the cursor goes. Here
   the rings sit over the hero's Senate, every service photograph and the About photograph: the
   photograph rests toned in slate and the beam, as it sweeps, shows it in colour for a moment
   before it fades back. With a mouse the centre drifts toward the cursor and leaves a ping ring;
   on touch only the sweep runs. Along the CTA band the rings and beam are the card's own white.
   Without JavaScript, and with reduced motion, one lit wedge stands still. */
.rd{display:block; overflow:hidden}
.rd-r{fill:none; stroke:#fff; stroke-width:1.5; vector-effect:non-scaling-stroke; opacity:.12}
.rd-r2{opacity:.12}
.rd-bm{opacity:.07}
.rd-l{fill:none; stroke:#fff; stroke-width:1.5; vector-effect:non-scaling-stroke; opacity:.8}
.rd-c{fill:#fff}
.rd-p circle{fill:none; stroke:#fff; stroke-width:1.5; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center}
.rd-p circle.dot{fill:#fff; stroke:none}
.rdw{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.rdw .rd-r{opacity:.08}
.rdw .rd-r2{opacity:.08}
.rdw .rd-bm{opacity:.16}
.rdw .rd-l{opacity:.4}
.ctab .wrap{z-index:1}
@media (prefers-reduced-motion:reduce){
  html .io,html .stag > *,html .hl{opacity:1!important; transform:none!important; transition:none!important}
  .mast img,.mast .ph::after,.arw,.btn,.nav > a,.cways .v{transition:none!important}
  .prof li,.prof img,.prof .ph::after,.hero-fig{opacity:1!important; transform:none!important; transition:none!important}
}


/* ============ v2 (1 Oct 2026) ============ */
.svc-desc{margin-top:.8rem; font-size:clamp(1rem,1.2vw,1.08rem); line-height:1.6; color:var(--ink); max-width:38rem}
.qrail .svc-desc{color:#C8D3E2}
/* ---- the carousel (JS adds .auto unless motion is reduced) ----
   Each service holds long enough to read, then the next slides in. The bar under the active
   service is the clock; it stops for the pointer on the panel, for keyboard focus, off screen
   and in a background tab. Pause, or choosing a service, stops it until Play is pressed. */
.svc-nav{min-width:0}
.svc-idx button .svc-pg{position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--acc);
  transform:scaleX(0); transform-origin:left; pointer-events:none}
.svc-board.auto .svc-idx button[aria-selected="true"] .svc-pg{animation:svcFill var(--dwell,8s) linear forwards;
  animation-play-state:paused}
.svc-board.auto.run .svc-idx button[aria-selected="true"] .svc-pg{animation-play-state:running}
.svc-board.held .svc-idx button .svc-pg{animation:none; transform:scaleX(0)}
@keyframes svcFill{to{transform:scaleX(1)}}
.svc-play{display:inline-flex; align-items:center; gap:.6rem; min-height:44px; margin-top:1.2rem; padding:0 1rem 0 .9rem;
  font-family:var(--ff); font-size:.86rem; font-weight:700; color:var(--navy); background:transparent;
  border:1px solid var(--line); cursor:pointer; transition:border-color .3s ease}
.svc-play:hover{border-color:var(--navy)}
.svc-play:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
.svc-play::before{content:""; box-sizing:border-box; width:9px; height:11px;
  border-left:3px solid currentColor; border-right:3px solid currentColor}
.svc-play.is-paused::before{width:0; height:0; border-right:0;
  border-left:9px solid currentColor; border-top:5.5px solid transparent; border-bottom:5.5px solid transparent}
.svc-board.tabs.auto .svc-stage{overflow-x:clip; overflow-clip-margin:6px}
html.js:not(.rm) .svc-board.tabs.auto .svc-blk{transition:opacity .28s ease, transform .45s var(--ease), visibility 0s linear .45s}
html.js:not(.rm) .svc-board.tabs.auto .svc-blk:not(.on){transform:translateX(-48px)}
html.js:not(.rm) .svc-board.tabs.auto.back .svc-blk:not(.on){transform:translateX(48px)}
html.js:not(.rm) .svc-board.tabs.auto .svc-blk.on{transform:none;
  transition:opacity .55s var(--ease) .08s, transform .8s var(--ease), visibility 0s}
html.js:not(.rm) .svc-board.tabs.auto .svc-blk.nx{transform:translateX(56px)!important; transition:none!important}
html.js:not(.rm) .svc-board.tabs.auto .svc-blk.pv{transform:translateX(-56px)!important; transition:none!important}
@media (max-width:1080px){ .svc-play{margin-top:.9rem} }
/* ============ MIRANDA INTELLIGENCE: the firm's published reports ============ */
.ins{background:var(--band-1)}
.ins .wrap{padding-block:var(--s4)}
.ins-hd{display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}
.ins-all{font-size:.92rem; font-weight:700; color:var(--acc-ink); text-decoration:none;
  border-bottom:2px solid var(--acc); padding-bottom:.1em; transition:color .3s ease, border-color .3s ease}
.ins-all:hover{color:var(--navy); border-color:var(--navy)}
.ins-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.8rem,4vw,3.4rem); margin-top:clamp(2rem,4vw,3rem)}
.ins-f{display:block; text-decoration:none; color:inherit}
.ins-ph{display:block; overflow:hidden; position:relative}
.ins-ph img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:transform .7s var(--ease)}
.ins-f:hover .ins-ph img,.ins-c:hover .ins-ph img{transform:scale(1.045)}
.ins-ph img{filter:grayscale(1) contrast(1.05)}
/* r13: the reports are Miranda Intelligence's own remote covers, toned in the page's navy like the photographs before them */
.ins-ph::after{content:""; position:absolute; inset:0; background:var(--navy); mix-blend-mode:multiply; opacity:.35; pointer-events:none}
.ins-d{display:block; margin-top:1.1rem; font-size:.78rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute)}
.ins-f h3{margin-top:.5rem; font-weight:300; font-size:clamp(1.5rem,2.3vw,2rem); line-height:1.16;
  letter-spacing:-.014em; color:var(--navy); transition:color .3s ease}
.ins-f:hover h3,.ins-c:hover b{color:var(--acc-ink)}
.ins-f p{margin-top:.8rem; font-size:.98rem; line-height:1.65; color:var(--ink); max-width:34rem}
.ins-r{display:inline-flex; align-items:center; gap:.5rem; margin-top:1.1rem; font-size:.9rem;
  font-weight:700; color:var(--acc-ink)}
.ins-list{display:flex; flex-direction:column}
.ins-c{display:grid; grid-template-columns:132px minmax(0,1fr); gap:1.15rem; align-items:start;
  padding:1.05rem 0; border-top:1px solid var(--line2); text-decoration:none; color:inherit}
.ins-c:first-child{border-top:0; padding-top:0}
.ins-c .ins-d{margin-top:0}
.ins-c b{display:block; margin-top:.3rem; font-size:1rem; font-weight:500; line-height:1.4;
  color:var(--navy); transition:color .3s ease}
html.js:not(.rm) .ins-c{opacity:0; transform:translateY(12px);
  transition:opacity .6s var(--ease) var(--d,0ms), transform .6s var(--ease) var(--d,0ms)}
html.js:not(.rm) .ins.in .ins-c{opacity:1; transform:none}
@media (max-width:900px){
  .ins-grid{grid-template-columns:1fr}
  .ins-c{grid-template-columns:104px minmax(0,1fr)}
}


/* ============ ABOUT THE DIVISION: deep teal band ============ */
.about{position:relative; overflow:hidden; background:var(--tnight); color:#BFE3E6}
.about .wrap{position:relative; z-index:2; padding-block:var(--s4)}
.about h2{color:#fff}
.about-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(2.4rem,6vw,6rem); align-items:stretch}
.about-txt h2{margin-bottom:2rem}
.about-txt p{font-size:clamp(1.02rem,1.35vw,1.18rem); line-height:1.7; max-width:38rem}
.about-txt p + p{margin-top:1.2rem}
.about-txt .ab-dl{margin-top:1.8rem; font-size:.95rem; line-height:1.6}
.ab-dl a{margin-left:.35rem; font-weight:700; color:#fff; text-decoration:none; border-bottom:2px solid var(--acc-light); padding-bottom:.08em}
.ab-dl a:hover{color:var(--acc-light)}
/* the lake in the same park as the hero: the division's square marks the corner */
.about-fig{position:relative; margin:0; min-height:340px}
.about-fig img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.about-fig::before{content:""; position:absolute; z-index:1; left:-5px; top:-5px; width:10px; height:10px; background:var(--acc-light)}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr} .about-fig{min-height:0; aspect-ratio:1250/600} }

/* ============ CTA BAND ============ */
.ctab{position:relative; overflow:hidden; background:var(--hero-grad); color:#fff}
.ctab .wrap{padding-block:var(--s3); position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,1fr) auto; gap:1.6rem 4rem; align-items:center}
.ctab h2{color:#fff}
.ctab .btn{justify-self:start}
@media (max-width:820px){ .ctab .wrap{grid-template-columns:1fr} }
.ins-hd{align-items:flex-end}
.ins-in{max-width:44rem}
.ins-in p{margin-top:1rem; font-size:clamp(1.02rem,1.35vw,1.18rem); line-height:1.65; color:var(--ink)}
.ins-in h2 + p{margin-top:1.2rem}
#reports{scroll-margin-top:110px}
/* the H1 is now the division's name, set at the size the ESG and Global Research titles use */
.hero h1{font-size:clamp(2.3rem,3.4vw,3.4rem); line-height:1.12}
/* eight items and two buttons: never wrapped, a little closer together below 1500px */
.nav > a,.nav .lang{white-space:nowrap}
@media (max-width:1499px){ .nav{gap:1.15rem} .nav > a{font-size:.94rem} }
/* the radar, held in the bottom-right corner and kept faint: only a quarter of each turn crosses the
   frame, so the beam passes now and then instead of circling over the photograph */
.rd.rdc .rd-r{opacity:.06}
.rd.rdc .rd-bm{opacity:.05}
.rd.rdc .rd-l{opacity:.32}
.rd.rdc .rd-c{opacity:.5}
.rdw.rdc .rd-bm{opacity:.08}
.rdw.rdc .rd-l{opacity:.24}
/* one header for every Miranda page (3 Oct 2026): the same logo size, bar height, link size and link
   spacing on each page. Spacing tightens below 1440px, and every page switches to the menu at 1319px */
.hdr-in{min-height:78px}
.lg img{height:36px}
.nav{gap:1.7rem}
.nav > a,.nav .lang{white-space:nowrap}
.nav > a,.nav button{font-size:.98rem}
@media (max-width:1439px){ .nav{gap:1.15rem} }
@media (max-width:1319px){ .lg img{height:30px} }
/* one hero heading for every division (6 Oct 2026): the same size, weight, line height and tracking on
   each page, 60px at 1440px; the colour stays with each page's hero */
.hero h1{font-size:clamp(2.4rem,4.17vw,3.75rem); font-weight:300; line-height:1.08; letter-spacing:-.02em}