/* division-research/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 */
  /* Global Research: the one accent and its derived tones. #39B5E6 is 2.35:1 on white, so it
     never sets text on a light ground; --acc-ink carries accent text there (5.1:1 on mist). */
  --acc:#39B5E6;
  --acc-light:#39B5E6;
  --acc-soft:rgba(57,181,230,.55);
  --acc-ghost:rgba(57,181,230,.2);
  --acc-ink:#0A6A94;
  --tnight:#051F33; --tdeep:#0A2E48;
  --band-1:#FFFFFF;
  --band-2:var(--mist);
  --hero-grad:linear-gradient(152deg, #051F33 0%, #0A2E48 55%, #0F4263 100%);
}
*{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 skyline ============ */
/* Torre Reforma stands on the right, toned into the division's blue. Along its foot runs the
   homepage card's row of bars; each bar is a window onto the same photograph in colour. At rest
   the bars breathe slowly, as they do on the card; under the pointer they rise, highest nearest
   it. The markup already holds a resting skyline, so the hero is complete without JS. */
.hero{position:relative; min-height:min(86svh,800px); display:flex; align-items:center; overflow:hidden;
  color:#fff; background:var(--hero-grad)}
.hero-in{position:relative; z-index:2; width:100%; max-width:var(--max); margin-inline:auto;
  padding:clamp(3rem,9vh,6rem) var(--gut); pointer-events:none}
.hero-txt{max-width:min(35rem,42%); pointer-events:auto}
.hero h1{color:#fff; font-weight:300; font-size:clamp(2.3rem,3.4vw,3.4rem); line-height:1.12; letter-spacing:-.02em}
.hero-sub{margin-top:1.4rem; font-size:clamp(1.02rem,1.35vw,1.2rem); line-height:1.6; max-width:30rem; color:#CFE6F3}
.hero-cta{margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:.9rem}
html.js:not(.rm) .hl{opacity:0; transform:translateY(18px)}
html.js.ld:not(.rm) .hl{opacity:1; transform:none; transition:opacity 1s var(--ease) var(--lo,0ms), transform 1s var(--ease) var(--lo,0ms)}
/* the photograph meets the ground on the M's own diagonal */
.hero-fig{position:absolute; z-index:1; top:0; right:0; bottom:0; width:54%; margin:0; background:var(--tdeep);
  clip-path:polygon(12% 0, 100% 0, 100% 100%, 0 100%)}
.hero-fig .gb{position:absolute; inset:0; width:100%; height:100%}
html.js:not(.rm) .hero-fig{opacity:0}
html.js.ld:not(.rm) .hero-fig{opacity:1; transition:opacity 1.2s var(--ease) .15s}
@media (max-width:900px){
  .hero{flex-direction:column; align-items:stretch; min-height:0}
  .hero-in{padding-bottom:2.2rem}
  .hero-txt{max-width:none}
  .hero-fig{position:relative; width:100%; height:clamp(260px,72vw,440px); clip-path:none}
}

/* ============ STATEMENT: purpose and the two markets ============ */
.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(57,181,230,.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} }

/* ============ SERVICES: the listing board ============ */
/* The Investor Relations board, so the divisions read as one firm. Without JavaScript the six
   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 .gb,.about-fig .gb{position:absolute; inset:0; width:100%; height:100%}
.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 six 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}
}

/* ============ ABOUT THE DIVISION: deep teal band ============ */
.about{position:relative; overflow:hidden; background:var(--tnight); color:#BFDDEE}
.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-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: two profiles ============ */
.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} }
@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(3,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 BARS: the Global Research card's skyline, carried through the page ============ */
/* The homepage card raises a row of white bars under the cursor. Here the same bars stand along
   the foot of the hero's tower, of every service photograph and of the About photograph: the
   photograph rests toned in the division's blue and each bar is a window onto it in colour, with
   a white cap. Under the pointer the bars rise, highest nearest it, and settle when it leaves; the
   hero's also breathe while on screen. Along the CTA band they are the card's own white bars.
   Without JavaScript the resting skyline is drawn; with reduced motion it stays still. */
.gb{display:block; overflow:hidden}
.gb-cap{fill:none; stroke:#fff; stroke-width:2; vector-effect:non-scaling-stroke; opacity:.92}
.gbw{position:absolute; left:0; bottom:0; width:100%; height:100%; pointer-events:none; z-index:0}
.gbw .gb-fill{fill:#fff; opacity:.14}
.gbw .gb-cap{opacity:.62}
.ctab .wrap{z-index:1}
/* ---- the scroll-led services board: wide screens with JS and motion allowed (JS adds .scr) ----
   The index and the stage hold still under the header while the reader scrolls through the
   board, and each stretch of scroll brings on the next service. The index squares sit on a rail
   that fills as the reader moves down it; the services still to come wait, faded, until reached. */
.svc-board.scr > .svc-idx,.svc-board.scr > .svc-col{position:sticky; top:var(--pin,120px)}
/* held still, the stage gives the photograph more of the screen */
.svc-board.scr .svc-blk{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.svc-board.scr .svc-im{min-height:clamp(300px, calc(100svh - 340px), 470px)}
.svc-board.scr .svc-idx button{z-index:1; transition:color .3s ease, opacity .6s var(--ease)}
.svc-board.scr .svc-idx button.done::before{background:var(--acc-ink)}
.svc-board.scr .svc-idx button.pend{opacity:max(.34, calc(1 - var(--pd,1) * .2))}
.svc-board.scr .svc-idx button.pend:hover,.svc-board.scr .svc-idx button.pend:focus-visible{opacity:1}
.svc-rail{position:absolute; z-index:0; left:3px; width:1px; background:rgba(0,46,109,.2); pointer-events:none}
.svc-rail i{position:absolute; left:-1px; top:0; width:3px; height:100%; background:var(--acc); transform-origin:top; transform:scaleY(0)}

@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}
/* ============ REPORTS: the division's published research ============ */
.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-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-d{letter-spacing:0; text-transform:none; font-size:.86rem; color:var(--acc-ink)}
/* placeholder slots until the reports feed is wired: plain mist panels, no hover, no fake links */
.ins-ph0{display:grid; place-items:center; aspect-ratio:16/9; background:var(--mist); outline:1px dashed rgba(0,46,109,.22); outline-offset:-1px}
.ins-ph0 i{font-style:normal; font-size:.78rem; color:var(--mute)}
.ins-c .ins-ph0 i{font-size:.66rem}
.ins-tbd h3,.ins-tbd b,.ins-tbd p{color:var(--mute)}
.ins-tbd .ins-r{color:var(--mute)}
.ins .mast + .join{margin-top:2.6rem}
/* 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}

/* ============ r12 (12 Oct 2026): the hero in the logo blue ============ */
/* The client asked for the Media and IR heroes' flow: one colour through the whole banner. The ground
   is the logo's own blue (#39B5E6); Torre Reforma is cut out of its sky and stands in it, toned navy;
   copy turns navy (6.6:1 on this blue). The bars keep their job as windows onto the colour photograph
   and gain a white body, so the row reads across the open blue as on the homepage card. */
.hero{background:var(--acc); color:var(--deep)}
.hero h1{color:var(--deep)}
.hero-sub{color:var(--deep)}
.hero :focus-visible{outline-color:var(--deep)}
.hero-fig{background:none; clip-path:none; width:58%}
.hero .gb-fill{fill:#fff; opacity:.42}
.hero .gb-cap{opacity:1}
@media (max-width:900px){ .hero-fig{width:100%} }