/* division-ir/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:#4FA3E8;
  --teal:#0074C8; --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 */
  /* Investor Relations: the one accent and its derived tones */
  --acc:#0074C8;
  --acc-light:#4FA3E8;
  --acc-soft:rgba(0,116,200,.55);
  --acc-ghost:rgba(0,116,200,.22);
  --acc-glow:0 0 18px rgba(79,163,232,.8), 0 0 44px rgba(79,163,232,.35);
  --acc-ink:#0074C8;
  --band-1:#FFFFFF;
  --band-2:var(--mist);
  --hero-grad:linear-gradient(152deg, #001A3E 0%, #002F6D 54%, #0A4E93 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:clamp(1rem,1.5vw,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}
.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)}
.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 line ============ */
/* IR's device at hero scale: a rising price line, the area beneath it filled with the
   exchange itself. The chart is static SVG markup, so it is complete without JavaScript;
   JS adds the draw-in and the crosshair. Deep market navy ground, white copy left. */
.hero{position:relative; min-height:min(88svh,840px); 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)}
.hero-txt{position:relative; max-width:min(30em,54%)}
.hero h1{color:#fff; font-weight:300; font-size:clamp(2.5rem,4.6vw,4.2rem); line-height:1.06; letter-spacing:-.02em; text-wrap:balance}
.hero h1 em{font-style:normal; font-weight:700; color:var(--acc-light)}
.hero-sub{margin-top:1.3rem; font-size:clamp(1.02rem,1.35vw,1.2rem); line-height:1.6; max-width:30rem; color:#C8D9EC}
.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 beams: the ambient device from the division's own card on the parent site,
   at hero scale, over the photograph and under the copy */
.hero-beams{position:absolute; z-index:1; right:0; bottom:0; width:64%; height:76%; pointer-events:none;
  opacity:.24; background:repeating-linear-gradient(var(--skew), rgba(255,255,255,.9) 0 1px, transparent 1px 14px);
  -webkit-mask-image:linear-gradient(to top, #000 20%, transparent 76%);
  mask-image:linear-gradient(to top, #000 20%, transparent 76%)}
html.js:not(.rm) .hero-beams{animation:irPan 16s linear infinite}
@keyframes irPan{to{background-position:202px 0}}
/* the chart holds the hero's lower right, undistorted (fixed aspect), tape grid behind */
.hero-chart{position:absolute; z-index:1; left:0; right:0; bottom:0; width:100%; aspect-ratio:1440/620; max-height:94%; margin-top:auto}
.hero-chart svg{width:100%; height:100%; display:block}
.grid-l{stroke:rgba(255,255,255,.08); stroke-width:1; vector-effect:non-scaling-stroke}
.chart-line{fill:none; stroke:var(--acc-light); stroke-width:2.5; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(79,163,232,.6))}
.chart-glint{fill:none; stroke:#fff; stroke-width:2.5; vector-effect:non-scaling-stroke; opacity:0;
  stroke-dasharray:26 1174}
html:not(.rm) .chart-glint{animation:irGlint 7s linear 2.2s 3}
html.rm .chart-glint{display:none}
@keyframes irGlint{0%{stroke-dashoffset:1200; opacity:.9} 96%{opacity:.9} 100%{stroke-dashoffset:0; opacity:0}}
/* the last print: a bright marker where the line ends, one finite ring off it on load */
.chart-end{fill:#fff; stroke:var(--acc-light); stroke-width:2}
.chart-end-ring{fill:none; stroke:#fff; stroke-width:1.5; vector-effect:non-scaling-stroke; opacity:0;
  transform-origin:1412px 58px}
html:not(.rm) .chart-end-ring{animation:irEnd 2.6s var(--ease) 2s 3}
@keyframes irEnd{0%{opacity:.85; transform:scale(.2)} 100%{opacity:0; transform:scale(2.6)}}
.chart-area image{opacity:.94}
.chart-dot{fill:#fff; stroke:var(--acc-light); stroke-width:2; opacity:0; transition:opacity .25s ease}
.chart-x{stroke:rgba(255,255,255,.4); stroke-width:1; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .25s ease}
.hero-chart.live .chart-dot,.hero-chart.live .chart-x{opacity:1}
@media (max-width:900px){
  .hero{flex-wrap:wrap; align-content:end; row-gap:0; min-height:min(80svh,720px)}
  .hero-txt{max-width:none}
  .hero-in{padding-bottom:1.2rem}
  .hero-chart{position:relative; width:100%; max-height:none; margin:0}
}

/* ============ TICKER BAND ============ */
/* The market tape, attached to the hero's lower edge. Live quotes are pulled by the
   embedded widget; this page never prints a price of its own. Until the widget is in
   view, online and loaded, the strip lists the names it follows. */
.tick{background:var(--deep); border-top:1px solid rgba(255,255,255,.1)}
.tick-in{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; gap:1.4rem; height:56px}
.tick-l{flex:none; display:flex; align-items:center; gap:.55rem; font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#8FB4DA}
.tick-l i{width:7px; height:7px; background:rgba(143,180,218,.5)}
.tick.on .tick-l i{background:var(--acc-light)}
html.js:not(.rm) .tick.on .tick-l i{animation:tickPulse 2.6s ease-in-out infinite}
@keyframes tickPulse{0%,100%{opacity:1} 50%{opacity:.3}}
.tick-w{flex:1; min-width:0; height:56px; overflow:hidden; position:relative}
.tick-w iframe{display:block; width:100%; border:0}
.tick-fb{display:flex; align-items:center; gap:1.6rem; height:56px; overflow:hidden;
  font-size:.8rem; letter-spacing:.06em; color:#8FB4DA; white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent);
  mask-image:linear-gradient(90deg, #000 88%, transparent)}
.tick-fb span{flex:none; font-weight:500; color:#C8D9EC}
@media (max-width:820px){ .tick-l span{display:none} .tick-in{gap:1rem} }

/* ============ STATEMENT ============ */
.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(79,163,232,.13) 82%, transparent)}
/* the 6px square where the spine takes the message over from the hero's origin node */
.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}
.st-2{margin-top:1.3rem; font-weight:300; font-size:clamp(1.05rem,1.45vw,1.26rem); line-height:1.6; color:var(--ink); max-width:36rem}

/* ============ SERVICES: the listing board ============ */
/* Without JavaScript the eight services read as one photographed stack. With it the index
   becomes a tab list and one service shows at a time (the client asked for the selection to
   appear and disappear); every panel stays in the markup, so nothing is lost to search. */
.services{background:var(--band-2)}
.services .wrap{padding-block:var(--s4)}
.svc-board{display:grid; grid-template-columns:minmax(0,252px) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.6rem); margin-top:clamp(2.6rem,5vw,4rem); align-items:start}
/* the index */
.svc-idx{position:sticky; top:104px; display:flex; flex-direction:column}
.svc-idx a{position:relative; display:block; padding:.72rem 0 .72rem 1.1rem;
  border-top:1px solid var(--line2); font-size:.92rem; line-height:1.35; color:#46566A;
  text-decoration:none; transition:color .3s ease}
.svc-idx a:first-child{border-top:0}
.svc-idx a::before{content:""; position:absolute; left:1px; top:1.02rem; width:5px; height:5px;
  background:#A9B5C2; transition:background .3s ease, width .3s var(--ease), height .3s var(--ease)}
.svc-idx a:hover{color:var(--navy)}
/* the active item is marked by colour and by its square only: bolding it would reflow the
   whole rail the moment a longer string, the Spanish set among them, is set in it */
.svc-idx a.on{color:var(--navy)}
.svc-idx a.on::before{width:9px; height:9px; top:.88rem; left:-1px; background:var(--acc)}
/* the stack */
.svc-col{display:flex; flex-direction:column}
.svc-blk{display:grid; grid-template-columns:minmax(0,252px) 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}
/* the frame takes the height of its block, so a service with five bullets stands taller
   than one with two and the stack is measured by its content, not by a constant image */
.svc-im{position:relative; align-self:stretch; margin:0; overflow:hidden;
  min-height:158px; background:var(--deep)}
.svc-im img{display:block; width:100%; height:100%; object-fit:cover}
/* no hover device here: the block is not a link, and the page's beams belong where they
   have the room to read, in the hero and the about band */
.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}
.svc-blk li{position:relative; padding:.34rem 0 .34rem 1.15rem;
  font-size:.95rem; 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)}
/* the two long services run in two columns so the block closes instead of trailing off */
.svc-blk ul{max-width:38rem}
.svc-blk ul.two{max-width:47rem}
@media (min-width:1120px){ .svc-blk ul.two{columns:2; column-gap:clamp(1.6rem,3vw,2.6rem)} }
.svc-blk ul.two li{break-inside:avoid}
/* the plain statement paragraph only: the lead and the pull quote below carry their own sizes
   and must not be out-specified by this descendant selector */
.svc-blk > div > p:not([class]){margin-top:.9rem; font-size:.97rem; line-height:1.65; color:var(--ink); max-width:36rem}
/* no rule here: a hairline identical to the seven above it would read as a ninth service */
.svc-close{margin-top:clamp(2.2rem,4vw,3.2rem); padding-left:calc(252px + clamp(1.4rem,2.6vw,2.2rem))}
@media (max-width:760px){ .svc-close{padding-left:0} }
/* the pull quote sits under the service name, never over it */
.svc-pull{font-weight:300; font-size:clamp(1.12rem,1.6vw,1.38rem); line-height:1.35;
  color:var(--acc-ink); margin-top:.7rem}
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}
/* the quarter: the one place the content really is a sequence. It keeps the photograph
   column of the other seven, bled to the panel's own edges, so every service name in the
   board sits on the same left edge and the panel is not hollow. */
.qrail{position:relative; border-top:0; padding:0; background:var(--deep); color:#C8D3E2;
  margin-block:clamp(1.9rem,3.2vw,2.6rem)}
.qrail .svc-im{align-self:stretch}
.qr-body{padding:clamp(1.7rem,3vw,2.2rem) clamp(1.5rem,3vw,2rem) clamp(2rem,3.4vw,2.4rem) 0}
.qrail h3{color:#fff}
/* six across leaves each step about ninety pixels wide and shatters the labels one word to a
   line, so the quarter reads three and three */
.qr-track{position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.9rem 0; margin-top:2rem; align-items:start}
/* the rules meet across each row of three, so the quarter reads as a run of steps and not
   as six separate cards, without drawing one continuous line whose even spacing would
   assert that the six steps are evenly spaced in time */
.qr-s{position:relative; padding:.9rem clamp(1.5rem,2.6vw,2.4rem) 0 0;
  border-top:1px solid rgba(79,163,232,.32); font-size:.88rem; line-height:1.55; color:#B5C1D4}
.qr-n{display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem;
  font-size:.78rem; font-weight:700; color:var(--acc-light)}
.qr-n i{flex:none; width:9px; height:9px; background:var(--acc-light)}
html.js:not(.rm) .qr-n i{transform:scale(0); transition:transform .4s var(--ease) calc(.3s + var(--d,0ms))}
html.js:not(.rm) .qr-s{opacity:0; transform:translateY(10px);
  transition:opacity .6s var(--ease) var(--d,0ms), transform .6s var(--ease) var(--d,0ms)}
html.js:not(.rm) .qrail.in .qr-s{opacity:1; transform:none}
html.js:not(.rm) .qrail.in .qr-n i{transform:scale(1)}
@media (max-width:1080px){
  /* the index can only be a tab bar at this width, and a tab bar that scrolls the page is a
     lie, so it goes: every service name is a heading a few hundred pixels below anyway */
  .svc-board{grid-template-columns:1fr; gap:0}
  .svc-idx{display:none}
}
@media (max-width:760px){
  .svc-blk{grid-template-columns:1fr}
  .qr-body{padding-left:clamp(1.5rem,3vw,2rem)}
  /* the photograph is a band here, not the lead: at full bleed it outranks the service */
  .svc-im img{max-height:210px; object-fit:cover}
  .qrail .svc-im img{max-height:170px}
  .qr-track{grid-template-columns:1fr; gap:1.4rem}
  .qr-s{padding-right:0}
}

/* ---- the tabbed board (JS adds .tabs) ---- */
.svc-idx[hidden]{display:none!important}
.svc-board.tabs .svc-idx{position:static}
.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); 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)}
.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}
.svc-desc + .svc-desc{margin-top:.35rem}
.svc-dl{display:grid; gap:1rem; margin-top:1.4rem; max-width:38rem}
.svc-dl > div{position:relative; padding-left:1.15rem}
.svc-dl > div::before{content:""; position:absolute; left:0; top:.66rem; width:7px; height:1px; background:var(--acc)}
.svc-dl dt{font-size:.97rem; font-weight:700; line-height:1.4; color:var(--navy)}
.svc-dl dd{margin-top:.2rem; font-size:.93rem; line-height:1.55; color:var(--ink)}
@media (min-width:1120px){ .svc-dl.two{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem clamp(1.6rem,3vw,2.6rem); max-width:50rem} }
/* one cell holds all eight 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.qrail{background:var(--deep)}
.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:220px}
@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); outline-offset:3px}
.svc-board.tabs .svc-close{padding-left:0}
/* ---- the carousel (JS adds .auto unless motion is reduced) ----
   Each service holds long enough to read, then the next slides in. The bar under the active
   service is the clock; it stops for the pointer on the panel, for keyboard focus, off screen
   and in a background tab. Pause, or choosing a service, stops it until Play is pressed. */
.svc-nav{min-width:0}
.svc-idx button .svc-pg{position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--acc);
  transform:scaleX(0); transform-origin:left; pointer-events:none}
.svc-board.auto .svc-idx button[aria-selected="true"] .svc-pg{animation:svcFill var(--dwell,8s) linear forwards;
  animation-play-state:paused}
.svc-board.auto.run .svc-idx button[aria-selected="true"] .svc-pg{animation-play-state:running}
.svc-board.held .svc-idx button .svc-pg{animation:none; transform:scaleX(0)}
@keyframes svcFill{to{transform:scaleX(1)}}
.svc-play{display:inline-flex; align-items:center; gap:.6rem; min-height:44px; margin-top:1.2rem; padding:0 1rem 0 .9rem;
  font-family:var(--ff); font-size:.86rem; font-weight:700; color:var(--navy); background:transparent;
  border:1px solid var(--line); cursor:pointer; transition:border-color .3s ease}
.svc-play:hover{border-color:var(--navy)}
.svc-play:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
.svc-play::before{content:""; box-sizing:border-box; width:9px; height:11px;
  border-left:3px solid currentColor; border-right:3px solid currentColor}
.svc-play.is-paused::before{width:0; height:0; border-right:0;
  border-left:9px solid currentColor; border-top:5.5px solid transparent; border-bottom:5.5px solid transparent}
.svc-board.tabs.auto .svc-stage{overflow-x:clip; overflow-clip-margin:6px}
html.js:not(.rm) .svc-board.tabs.auto .svc-blk{transition:opacity .28s ease, transform .45s var(--ease), visibility 0s linear .45s}
html.js:not(.rm) .svc-board.tabs.auto .svc-blk:not(.on){transform:translateX(-48px)}
html.js:not(.rm) .svc-board.tabs.auto.back .svc-blk:not(.on){transform:translateX(48px)}
html.js:not(.rm) .svc-board.tabs.auto .svc-blk.on{transform:none;
  transition:opacity .55s var(--ease) .08s, transform .8s var(--ease), visibility 0s}
html.js:not(.rm) .svc-board.tabs.auto .svc-blk.nx{transform:translateX(56px)!important; transition:none!important}
html.js:not(.rm) .svc-board.tabs.auto .svc-blk.pv{transform:translateX(-56px)!important; transition:none!important}
@media (max-width:1080px){ .svc-play{margin-top:.9rem} }
@media (max-width:1080px){
  .svc-board.tabs{gap:1.6rem}
  .svc-board.tabs .svc-idx{display:grid; grid-template-columns:repeat(4,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))}
  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}
}

/* ============ IR 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)}
}

/* ============ NEWSWIRE: the firm's own distribution service ============ */
.nw{background:var(--band-2)}
.nw .wrap{padding-block:var(--s4); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.2rem,5vw,4.5rem); align-items:start}
.nw p{margin-top:1.2rem; font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.7; color:var(--ink); max-width:34rem}
.nw-chips{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem}
.nw-chips span{font-size:.82rem; font-weight:700; color:var(--navy); background:#fff;
  border:1px solid var(--line2); padding:.5rem .85rem}
.nw-go{display:inline-flex; align-items:center; gap:.5rem; margin-top:1.8rem; font-size:.92rem;
  font-weight:700; color:#0062A8; text-decoration:none; border-bottom:2px solid var(--acc);
  padding-bottom:.1em; transition:color .3s ease, border-color .3s ease}
.nw-go:hover{color:var(--navy); border-color:var(--navy)}
.nw-panel{background:#fff; padding:1.6rem 1.7rem 1.2rem}
.nw-panel h3{font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute)}
.nw-panel a{display:block; padding:.95rem 0; border-top:1px solid var(--line2); text-decoration:none}
.nw-panel a:first-of-type{border-top:0}
.nw-panel time{display:block; font-size:.76rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--acc-ink)}
.nw-panel b{display:block; margin-top:.25rem; font-size:.97rem; font-weight:500; line-height:1.45;
  color:var(--navy); transition:color .3s ease}
.nw-panel a:hover b{color:var(--acc-ink)}
@media (max-width:900px){ .nw .wrap{grid-template-columns:1fr} }

/* ============ ABOUT THE DIVISION: navy band ============ */
.about{position:relative; overflow:hidden; background:var(--deep); color:#C8D3E2}
.about::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, var(--deep) 30%, rgba(0,26,62,.86) 58%, rgba(0,26,62,.72))}
.about-beams{position:absolute; z-index:1; right:0; top:0; width:52%; height:100%; pointer-events:none;
  opacity:.16; background:repeating-linear-gradient(var(--skew), rgba(255,255,255,.9) 0 1px, transparent 1px 14px);
  -webkit-mask-image:linear-gradient(to left, #000 30%, transparent);
  mask-image:linear-gradient(to left, #000 30%, transparent)}
html.js:not(.rm) .about-beams{animation:irPan 22s linear infinite}
.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}
/* the city the firm works from, in place of the figures: 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; object-position:50% 60%}
.about-fig::before{content:""; position:absolute; z-index:1; left:-5px; top:-5px; width:10px; height:10px; background:var(--acc-light)}
.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}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr} .about-fig{min-height:0; aspect-ratio:1200/620} }

/* ============ CTA BAND: the market ground returns ============ */
.ctab{position:relative; overflow:hidden; background:var(--hero-grad); color:#fff}
.ctab .wrap{padding-block:var(--s3); position:relative; z-index:1}
.ctab h2{color:#fff}
.ctab-p{margin-top:.9rem; max-width:34rem; color:#C8D9EC}
.ctab .btn{margin-top:1.8rem}
.ctab-fx{position:absolute; right:0; top:0; bottom:0; width:46%; opacity:.55; pointer-events:none}
.ctab-fx svg{width:100%; height:100%; display:block}
/* the band's own line draws in when the band enters view */
html.js:not(.rm) .ctab-fx path{stroke-dasharray:1 1; stroke-dashoffset:1; transition:stroke-dashoffset 1.4s var(--ease) .2s}
html.js:not(.rm) .ctab.in .ctab-fx path{stroke-dashoffset:0}
@media (max-width:900px){ .ctab-fx{width:80%} }
/* the band answers the pointer as the hero does: over the line, a marker rides it with a hairline
   to the floor, and the line brightens */
.ctab-fx{transition:opacity .35s ease}
.ctab-x,.ctab-dot{position:absolute; left:0; top:0; opacity:0; transition:opacity .25s ease; will-change:transform}
.ctab-x{width:1px; bottom:0; top:auto; height:var(--xh,0px); background:rgba(255,255,255,.4); transform-origin:bottom}
.ctab-dot{width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:#fff; border:2px solid var(--acc-light); box-sizing:border-box}
.ctab.live .ctab-fx{opacity:.95}
.ctab.live .ctab-x,.ctab.live .ctab-dot{opacity:1}

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

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

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

/* gradient CTAs (ported from the KokonutUI gradient-button component) */
.btn{transition:background .3s ease, color .3s ease, border-color .3s ease, transform .18s ease, box-shadow .4s ease}
.btn:active{transform:scale(.97)}
.btn.solid{border:1px solid transparent;
  background:linear-gradient(var(--navy), var(--navy)) padding-box,
             linear-gradient(120deg, #0074C8, #4FA3E8 55%, #002F6D) border-box}
.btn.solid:hover{color:#fff;
  background:linear-gradient(var(--blue), var(--blue)) padding-box,
             linear-gradient(120deg, #4FA3E8, #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, #4FA3E8, #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, #4FA3E8 55%, #0074C8) border-box;
  box-shadow:0 10px 26px rgba(79,163,232,.35)}

@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}
  .chart-glint,.chart-end-ring{animation:none!important; opacity:0!important}
  .hero-beams,.about-beams{animation:none!important}
  .svc-blk,.svc-im img{transition:none!important}
  .svc-blk,.qr-s,.qr-n i{opacity:1!important; transform:none!important; transition:none!important}
  .svc-idx button::before{transition:none!important}
  .svc-im::after{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}