/* division-esg/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 */
  /* ESG: the one accent and its derived tones. #0AA5B5 is 3:1 on white, so it never sets text
     on a light ground; --acc-ink carries accent text there (5:1 on mist). */
  --acc:#0AA5B5;
  --acc-light:#4FD1DC;
  --acc-soft:rgba(10,165,181,.55);
  --acc-ghost:rgba(10,165,181,.2);
  --acc-ink:#05707B;
  --tnight:#022A2E; --tdeep:#043C42;
  /* the report figures' filled cell */
  --st-in:#0AA5B5;
  --band-1:#FFFFFF;
  --band-2:var(--mist);
  --hero-grad:linear-gradient(152deg, #022A2E 0%, #043C42 55%, #064E56 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 three pillars ============ */
/* The headline names the division's three subjects, one to a line, and a photograph stands
   for each: the Chapultepec forest below the Reforma towers, the Zocalo from above, an empty
   boardroom. At rest the panels share the division's teal; the pillar in focus opens wider,
   in full colour, and underlines its words in the headline. The focus steps through the three
   on its own until the reader points at a panel or a word, then follows the reader. The
   markup already holds the first pillar in focus, 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(--tnight)}
.hero-in{position:relative; z-index:2; width:100%; max-width:var(--max); margin-inline:auto;
  padding:clamp(3rem,9vh,6rem) var(--gut)}
/* the text layer spans the hero, so it lets the pointer through to the panels beside it */
.hero-in{pointer-events:none}
.hero-txt{max-width:min(35rem,41%); 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 h1 .ln{display:block}
.hero h1 .w{text-decoration-line:underline; text-decoration-color:transparent; text-decoration-thickness:.06em;
  text-underline-offset:.17em; transition:text-decoration-color .6s var(--ease)}
.hero[data-on="e"] .w-e,.hero[data-on="s"] .w-s,.hero[data-on="g"] .w-g{text-decoration-color:var(--acc)}
.hero-sub{margin-top:1.4rem; font-size:clamp(1.02rem,1.35vw,1.2rem); line-height:1.6; max-width:30rem; color:#CFEFF1}
.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)}
.pillars{position:absolute; z-index:1; top:0; right:0; bottom:0; width:52%; display:flex; gap:4px}
.pl{position:relative; flex:1 1 0; min-width:0; margin:0; overflow:hidden; background:#04363B;
  transition:flex-grow .9s var(--ease)}
.pl img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.08); transition:filter .9s var(--ease), transform 1.4s var(--ease)}
/* the division's teal laid over each photograph at rest, lifted from the one in focus */
.pl::after{content:""; position:absolute; inset:0; background:#067C88; mix-blend-mode:multiply; opacity:.94;
  transition:opacity .9s var(--ease); pointer-events:none}
.pl-e img{object-position:62% 0}
.pl-s img{object-position:72% 42%}
.pl-g img{object-position:50% 60%}
.hero[data-on="e"] .pl-e,.hero[data-on="s"] .pl-s,.hero[data-on="g"] .pl-g{flex-grow:2.3}
.hero[data-on="e"] .pl-e img,.hero[data-on="s"] .pl-s img,.hero[data-on="g"] .pl-g img{filter:none}
.hero[data-on="e"] .pl-e::after,.hero[data-on="s"] .pl-s::after,.hero[data-on="g"] .pl-g::after{opacity:0}
/* on load the three photographs rise into place, one after another: the hero's one motion */
html.js:not(.rm) .pl{clip-path:inset(100% 0 0 0)}
html.js:not(.rm) .pl img{transform:scale(1.12)}
html.js.ld:not(.rm) .pl{clip-path:inset(0 0 0 0);
  transition:clip-path 1.2s var(--ease) var(--lo,0ms), flex-grow .9s var(--ease)}
html.js.ld:not(.rm) .pl img{transform:none}
@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}
  .pillars{position:relative; width:100%; height:clamp(220px,62vw,360px); gap:3px}
  .pl-e img{object-position:62% 20%}
}

/* ============ 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(10,165,181,.13) 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}
.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 2025 EDITION: the market in figures ============ */
.figs{background:var(--band-1)}
.figs .wrap{padding-block:var(--s4)}
.figs-sub{margin-top:1.1rem; max-width:40rem; font-size:clamp(1.02rem,1.35vw,1.16rem); line-height:1.65; color:var(--ink)}
.fg{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr); gap:clamp(1.8rem,4vw,4rem);
  margin-top:clamp(2.2rem,4vw,3rem); align-items:start}
.fn{font-weight:300; font-size:clamp(2.8rem,4.6vw,4.2rem); line-height:1; letter-spacing:-.02em; color:var(--acc-ink)}
.fcap{margin-top:.55rem; font-size:.98rem; line-height:1.5; color:var(--ink); max-width:19rem}
/* a hundred cells, one per report: filled where the standard is followed */
.u100{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:2px; margin-top:1.1rem; max-width:200px}
.u100 i,.u24 i{display:block; aspect-ratio:1}
.u100 i.f,.u24 i.f{background:var(--st-in)}
.u100 i.e{box-shadow:inset 0 0 0 1px rgba(0,46,109,.22)}
/* the 24 in two rows filled column-first, so the 14 that also set targets are one run and the
   10 that do not are the rest; the 14 is anchored to its own run by a bracket */
.f24w{max-width:396px}
.u24box{width:240px; max-width:100%}
.u24{display:grid; grid-template-rows:repeat(2,auto); grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  gap:2px; margin-top:1.1rem}
.u24 i.e{box-shadow:inset 0 0 0 1px rgba(0,46,109,.22)}
.b14{width:calc((100% - 22px) * 7 / 12 + 12px); margin-top:.7rem}
.fcap2{min-height:3em}
.b14-r{display:block; height:7px; border:1px solid var(--acc-ink); border-top:0}
.b14 .fn{margin-top:.8rem; font-size:clamp(2.2rem,3.6vw,3.2rem)}
.b14 .fcap{width:max-content; max-width:min(19rem, 70vw)}
.fg-rank{margin-top:clamp(2.2rem,4vw,3rem); padding-top:1.5rem; border-top:1px solid var(--line); display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr); gap:clamp(1.8rem,4vw,4rem); align-items:start}
.fg-rank .fcap{margin-top:0; max-width:26rem}
.rank{list-style:none; counter-reset:rk}
.rank li{counter-increment:rk; display:grid; grid-template-columns:1.8rem minmax(0,1fr); align-items:baseline;
  padding:.18rem 0; font-size:1.06rem; color:var(--navy)}
.rank li:first-child{padding-top:0}
.rank li::before{content:counter(rk); font-weight:300; font-size:1.25rem; color:var(--acc-ink)}
.fsrc{margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; align-items:baseline;
  font-size:.86rem; color:var(--mute)}
.fsrc a{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}
.fsrc a:hover{color:var(--navy); border-color:var(--navy)}
html.js:not(.rm) .figs .u100 i,html.js:not(.rm) .figs .u24 i{opacity:0; transform:scale(.4);
  transition:opacity .45s var(--ease) calc(var(--i) * 9ms), transform .45s var(--ease) calc(var(--i) * 9ms)}
html.js:not(.rm) .figs.in .u100 i,html.js:not(.rm) .figs.in .u24 i{opacity:1; transform:none}
@media (max-width:900px){ .fg{grid-template-columns:repeat(2,minmax(0,1fr))} .fg > :last-child{grid-column:1/-1} }
@media (max-width:820px){ .fg-rank{grid-template-columns:1fr} }
@media (max-width:520px){ .fcap2{min-height:0} }

/* ============ SERVICES: the listing board ============ */
/* The Investor Relations board, so the divisions read as one firm. Without JavaScript the nine
   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 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 img{max-height:210px} }
/* ---- 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 nine 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}
}

/* ============ REPORTING IN MEXICO: the one timeline ============ */
.tl{background:var(--band-2)}
.tl .wrap{padding-block:var(--s4)}
.tl-row{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(1.4rem,2.6vw,2.4rem);
  margin-top:clamp(2.4rem,4vw,3.2rem); list-style:none}
.tl-row::before{content:""; position:absolute; left:0; right:0; top:6px; height:1px; background:rgba(0,46,109,.24); transform-origin:left}
.tl-row li{position:relative; padding-top:1.9rem; display:flex; flex-direction:column}
/* the node says only whether a milestone has arrived: filled, or still ahead */
.tl-row li::before{content:""; position:absolute; top:0; left:0; width:13px; height:13px; background:var(--mist)}
.tl-row li.past::before{background:var(--acc)}
.tl-row li.ahead::before{box-shadow:inset 0 0 0 1px var(--acc-ink)}
.tl-d{display:block; font-size:1.02rem; font-weight:700; color:var(--navy)}
.tl-row p{margin-top:.55rem; font-size:.97rem; line-height:1.6; color:var(--ink); text-wrap:pretty}
.tl-row a{margin-top:auto; padding-top:.9rem; font-size:.9rem; font-weight:700; line-height:1.4; color:var(--acc-ink);
  text-decoration:none; align-self:flex-start}
.tl-row a:hover{text-decoration:underline; text-underline-offset:3px}

html.js:not(.rm) .tl-row::before{transform:scaleX(0); transition:transform 1.4s var(--ease) .1s}
html.js:not(.rm) .tl.in .tl-row::before{transform:scaleX(1)}
html.js:not(.rm) .tl-row li{opacity:0; transform:translateY(12px); transition:opacity .6s var(--ease) var(--d,0ms), transform .6s var(--ease) var(--d,0ms)}
html.js:not(.rm) .tl.in .tl-row li{opacity:1; transform:none}
@media (max-width:1100px){
  .tl-row{grid-template-columns:1fr; row-gap:2rem}
  .tl-row::before{left:6px; right:auto; top:0; bottom:0; width:1px; height:auto; transform-origin:top}
  html.js:not(.rm) .tl-row::before{transform:scaleY(0)}
  html.js:not(.rm) .tl.in .tl-row::before{transform:scaleY(1)}
  .tl-row li{padding:0 0 0 2.2rem}
  .tl-row p{max-width:36rem}
}
/* ============ ESG NEWS: the division's own published work ============ */
.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} }

/* the division's dates read as dates, not as labels */
.ins-d{letter-spacing:0; text-transform:none; font-size:.86rem; color:var(--acc-ink)}

/* ============ 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 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 WAVES: the ESG card's two dashed lines, carried through the page ============ */
/* The homepage's ESG card runs two dashed white waves across its lake. Here the same lines run
   across the hero's photographs, along the foot of every service photo, over the About lake and
   along the contact band. They answer the pointer: the hero's lines part around it, the others
   swell and lift beneath it. The dashes drift only while a set is on screen. Without JavaScript
   the lines are drawn and still; with reduced motion they stay still and do not respond. */
.fxw{position:absolute; left:0; width:100%; pointer-events:none; z-index:1}
.fxw path{fill:none; stroke:#fff; stroke-width:1.2; stroke-dasharray:10 8; vector-effect:non-scaling-stroke; opacity:.5}
.fxc{bottom:-4px; height:120px}
/* over the duotone photographs the card's lines need a little more weight to be seen */
.fxc path{stroke-width:1.4; opacity:.78}
.fxc path:nth-child(2){opacity:.5}
.ctab .fxc path{stroke-width:1.2; opacity:.5}
.ctab .fxc path:nth-child(2){opacity:.28}
.about-fig .fxc{bottom:0}
.fxh{top:0; height:100%}
.fxh path{stroke-width:1.3}
.fxh path:nth-child(1){opacity:.46} .fxh path:nth-child(2){opacity:.56} .fxh path:nth-child(3){opacity:.64}
.fxh path:nth-child(4){opacity:.72} .fxh path:nth-child(5){opacity:.64} .fxh path:nth-child(6){opacity:.56}
.fxh path:nth-child(7){opacity:.46}
@keyframes fxwv{to{stroke-dashoffset:-180}}
html.js:not(.rm) .fxw.run path{animation:fxwv 13s linear infinite}
html.js:not(.rm) .fxw.run path:nth-child(2n){animation-duration:19s}
html.js:not(.rm) .fxw.run path:nth-child(3n){animation-duration:23s; animation-direction:reverse}
/* the hero's lines arrive once the photographs have risen; the photographs drift with the pointer */
html.js:not(.rm) .pillars .fxh{opacity:0}
html.js.ld:not(.rm) .pillars .fxh{opacity:1; transition:opacity 1.6s ease 1.1s}
html.js:not(.rm) .pillars .pl img{scale:1.06}
.ctab .fxc{z-index:0}
.about-fig .fxc{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)}

/* ---- the report grids answer the pointer: cells near it swell and brighten, like water under a hand ---- */
html.js:not(.rm) .figs .fg.pt .u100 i,html.js:not(.rm) .figs .fg.pt .u24 i{transition:transform .25s var(--ease), filter .25s ease, opacity .45s var(--ease)}

/* ---- the timeline fills with the teal up to today as the reader reaches it ---- */
.tl-row::after{content:""; position:absolute; left:0; top:5px; height:3px; width:var(--tw,0px); background:var(--acc);
  transform-origin:left; transform:scaleX(var(--tp,1))}
@media (max-width:900px){
  .tl-row::after{top:0; left:5px; width:3px; height:var(--th,0px); transform-origin:top; transform:scaleY(var(--tp,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}
  .figs .u100 i,.figs .u24 i,.tl-row li,.tl-row::before{opacity:1!important; transform:none!important; transition:none!important}
  .pl,.pl img{clip-path:none!important; transform:none!important}
  .fxw path{animation:none!important}
}


/* ============ HERO r12: the teal banner and the waves (12 Oct 2026) ============
   Like the Media and IR heroes, the hero is one band in the division's colour: the logo's teal,
   deepened just enough for white copy to read. The Popocatepetl photograph is toned into the same
   teal (esght, made from esgh by r12_esg_tone.py) and fades into the banner from its left edge, so
   the band runs through it unbroken. Over its sky run the homepage ESG card's waves, drawn in a
   canvas that spans the hero; without JS the banner and photograph stand on their own. */
.hero{background:linear-gradient(118deg, #07798C 0%, #067286 50%, #05667B 100%)}
.hero{min-height:min(88svh,840px)}
.hph{position:absolute; z-index:0; top:0; right:0; bottom:0; width:58%; margin:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.4) 18%, #000 44%);
  mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.4) 18%, #000 44%)}
.hph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 30%}
.hwv{position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; pointer-events:none}
.hero-sub{color:#EAF8F9}
html.js:not(.rm) .hph{opacity:0; transform:translateX(28px)}
html.js.ld:not(.rm) .hph{opacity:1; transform:none; transition:opacity 1.4s var(--ease) .1s, transform 1.8s var(--ease) .1s}
@media (max-width:900px){
  .hero{min-height:0}
  .hph{position:relative; width:100%; height:clamp(240px,68vw,400px);
    -webkit-mask-image:linear-gradient(180deg, transparent 0, rgba(0,0,0,.45) 16%, #000 42%);
    mask-image:linear-gradient(180deg, transparent 0, rgba(0,0,0,.45) 16%, #000 42%)}
  .hph img{object-position:58% 22%}
  html.js:not(.rm) .hph{transform:translateY(18px)}
}
/* on a phone the photograph is cropped in on the volcano */
@media (max-width:600px){ .hph img{inset:auto; left:-25%; top:-3%; width:150%; max-width:none; height:auto; object-fit:fill} }
@media (prefers-reduced-motion:reduce){ .hph{opacity:1!important; transform:none!important; transition:none!important} }

/* ============ INTRO v5 ============ */
.st-in p + p{margin-top:1.2rem}
.st-2{font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.65; color:var(--ink); max-width:46rem}

/* ============ SERVICES v5: Media's card grid, name only, each opening its pop-up ============ */
.svc-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(2rem,2.6vw,2.6rem) clamp(1.4rem,2.2vw,2.2rem);
  margin-top:clamp(2.4rem,5vw,3.8rem)}
.svc-card{display:flex; flex-direction:column}
.svc-ph{margin:0; overflow:hidden; background:var(--navy)}
.svc-ph img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.svc-card h3{margin-top:1.2rem; margin-bottom:auto; font-weight:300; font-size:clamp(1.3rem,1.7vw,1.55rem); line-height:1.15;
  letter-spacing:-.012em; color:var(--navy)}
.svc-card .btn{margin-top:1.3rem; align-self:flex-start; padding:.8rem 1.2rem; font-size:.92rem}
/* the division's wave: each photograph rises into its frame behind a wave edge, one after the other.
   Armed by JS only while the section is still below the fold, so no render ships a blank frame. */
html.js:not(.rm) .services.pr .svc-ph img{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 300' preserveAspectRatio='none'%3E%3Cpath d='M0 106Q12.5 94 25 106T50 106T75 106T100 106V300H0Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 300' preserveAspectRatio='none'%3E%3Cpath d='M0 106Q12.5 94 25 106T50 106T75 106T100 106V300H0Z'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 300%; mask-size:100% 300%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}
html.js:not(.rm) .services.pr .svc-ph{background:transparent}
html.js:not(.rm) .services.pr:not(.in) .svc-ph img{-webkit-mask-position:0 0; mask-position:0 0}
html.js:not(.rm) .services.pr.in .svc-ph img{-webkit-mask-position:0 100%; mask-position:0 100%;
  transition:-webkit-mask-position 1.3s var(--ease) calc(.2s + var(--d,0ms)), mask-position 1.3s var(--ease) calc(.2s + var(--d,0ms))}
@media (max-width:1100px){ .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.6rem 1.8rem} }
@media (max-width:600px){ .svc-grid{grid-template-columns:1fr; gap:2.4rem} .svc-ph img{aspect-ratio:16/9} }

dialog.pol.sd{width:min(62rem,calc(100vw - 2rem)); max-height:min(88vh,54rem); background:var(--navy); color:#C9D6E8}
.sd .pol-in{padding:clamp(1.8rem,4vw,3rem) clamp(1.3rem,4vw,3rem) clamp(2rem,4vw,3rem)}
.sd .pol-x{color:#B5C1D4}
.sd .pol-x:hover{color:#fff}
.sd-hd{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.3rem,3vw,2.2rem); align-items:center; padding-right:2.2rem}
.sd-ph{position:relative; display:block; width:clamp(84px,10vw,120px); aspect-ratio:1}
.sd-ph img{width:100%; height:100%; object-fit:cover}
.sd-ph::after{content:""; position:absolute; inset:8px -8px -8px 8px; border:1.5px solid var(--acc); z-index:-1}
.sd h2{color:#fff; font-weight:300; font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.1; letter-spacing:-.014em}
.sd-hd p{margin-top:.6rem; font-size:1rem; line-height:1.6; color:#C9D6E8; max-width:40rem}
.sd-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(1.8rem,4vw,3.4rem); margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.sd-list > div{padding:1rem 0 1.05rem; border-top:1px solid rgba(182,194,214,.18)}
.sd-list dt{font-size:1rem; font-weight:700; line-height:1.35; color:#fff; transition:color .25s ease}
.sd-list dd{margin-top:.3rem; font-size:.92rem; line-height:1.55; color:#AEBBD0}
@media (hover:hover){ .sd-list > div:hover dt{color:var(--acc-light)} }
html:not(.rm) dialog.sd[open]{animation:sdIn .45s var(--ease)}
html:not(.rm) dialog.sd[open] .sd-list > div{animation:sdItem .5s var(--ease) both; animation-delay:calc(.14s + var(--d,0ms))}
@keyframes sdIn{from{opacity:0; transform:translateY(14px)}}
@keyframes sdItem{from{opacity:0; transform:translateY(8px)}}
@media (max-width:700px){
  .sd-list{grid-template-columns:1fr}
  .sd-hd{grid-template-columns:1fr; padding-right:1.6rem}
}
@media (prefers-reduced-motion: reduce){
  .svc-ph img{clip-path:none!important; -webkit-mask-image:none!important; mask-image:none!important; transition:none!important}
  dialog.sd[open],dialog.sd[open] .sd-list > div{animation:none!important}
}
/* 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}