/* Miranda homepage sections, extracted from the approved homepage by tools/extract_home.py. Do not edit here. */
/* ============ HERO: the diagonal seam ============ */
.hero{position:relative; min-height:min(94svh,900px); display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(160deg, var(--night) 0%, var(--deep) 55%, #013064 100%); color:#fff}
.hero-ph{position:absolute; top:0; bottom:0; right:0; width:57%;
  clip-path:polygon(24% 0, 100% 0, 100% 100%, 0 100%)}
.hero-ph img{width:100%; height:100%; object-fit:cover; object-position:80% 50%}
.hero-ph::after{content:""; position:absolute; inset:0;
  background:linear-gradient(104deg, rgba(0,26,62,.85) 0%, rgba(0,34,79,.42) 34%, rgba(0,34,79,.12) 70%)}
.hero-ph::before{content:""; position:absolute; top:0; bottom:0; left:24%; width:2px; transform:skewX(-14deg);
  transform-origin:top; background:linear-gradient(180deg, var(--cyan), rgba(96,208,228,0) 85%); z-index:1; opacity:.85}
#lines{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; mix-blend-mode:screen; opacity:.9}
.hero-in{position:relative; z-index:2; width:100%; max-width:var(--max); margin-inline:auto;
  padding:7.5rem var(--gut) clamp(3rem,8vh,5.5rem)}
.hero h1{color:#fff; font-weight:300; font-size:clamp(2.4rem,4.6vw,4rem); line-height:1.08; letter-spacing:-.018em; max-width:16ch}
.hero h1 b{font-weight:700}
.hero h1 em{font-style:normal; font-weight:700; color:var(--cyan)}
.hero .lede{margin-top:1.5rem; font-weight:300; font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.55;
  max-width:30rem; color:rgba(255,255,255,.94)}
.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)}
html.js:not(.rm) .hero-ph{clip-path:polygon(115% 0, 100% 0, 100% 100%, 130% 100%)}
html.js.ld:not(.rm) .hero-ph{clip-path:polygon(24% 0, 100% 0, 100% 100%, 0 100%); transition:clip-path 1.3s var(--ease) .18s}
.hero-cred{position:absolute; right:var(--gut); bottom:.9rem; z-index:2; font-size:.68rem; color:rgba(255,255,255,.6)}
@media (max-width:900px){
  .hero{min-height:0; display:block}
  .hero-ph{position:relative; width:100%; height:46svh; clip-path:none!important}
  .hero-ph::before{display:none}
  .hero-in{padding-top:2.2rem}
  .hero h1{max-width:none}
}

/* ============ REPORTS: carousel ============ */
.reports{border-bottom:1px solid var(--line2)}
.reports .wrap{padding-block:clamp(1.9rem,3.2vw,2.7rem)}
.rep-h{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-bottom:1.7rem; flex-wrap:wrap}
.rep-h h2{font-size:1.35rem; font-weight:700; letter-spacing:0}
.rep-ctl{display:flex; align-items:center; gap:1.4rem}
.rep-ctl > a{font-size:.92rem; font-weight:700; text-decoration:none; color:var(--blue); white-space:nowrap}
.car-btn{position:relative; width:40px; height:40px; flex:none; border:1px solid var(--line); background:none;
  -webkit-appearance:none; appearance:none; cursor:pointer; color:var(--navy); font-family:var(--ff);
  font-size:1.05rem; line-height:1; transition:background .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease}
.car-btn:hover{background:var(--navy); color:#fff; border-color:var(--navy)}
.car-btn[disabled]{opacity:.3; pointer-events:none}
.car{position:relative}
.rep-track{display:flex; gap:1.7rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain}
.rep-track::-webkit-scrollbar{display:none}
.rep{flex:0 0 clamp(248px,25vw,352px); scroll-snap-align:start; text-decoration:none; color:inherit; display:block}
.rep .th{display:block; position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--deep)}
.rep .th img{width:100%; height:100%; object-fit:cover; filter:grayscale(.3); transition:transform .7s var(--ease)}
.rep .th::after{content:""; position:absolute; inset:0; background:var(--navy); opacity:.35; mix-blend-mode:multiply}
.rep .th::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--dc); z-index:1}
.rep:hover .th img{transform:scale(1.045)}
.rtag{position:absolute; left:0; bottom:0; z-index:2; font-size:.64rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#fff; background:var(--dc); padding:.38em .7em}
.rep b{display:block; margin-top:.8rem; color:var(--navy); font-size:.97rem; line-height:1.35}
.rep:hover b{color:var(--blue)}
.rep small{display:block; margin-top:.35rem; font-size:.8rem; color:var(--mute)}
.car-prog{height:2px; background:var(--line2); margin-top:1.2rem; overflow:hidden}
.car-prog i{display:block; height:100%; width:0%; background:var(--blue); transition:width .35s var(--ease)}
@media (max-width:720px){ .rep{flex-basis:80vw} }

/* ============ WHAT WE OFFER: division card grid, two per row ============ */
.offer{background:linear-gradient(180deg, #E7EEF6, #DDE7F2)}
.offer .wrap{padding-block:var(--s4)}
.offer .hd p{margin-top:1rem; max-width:42rem}
.dgrid{margin-top:clamp(2.2rem,4.5vw,3.4rem); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.7rem}
.dcard{position:relative; overflow:hidden; background:#fff; border:1px solid rgba(0,46,109,.12);
  box-shadow:0 16px 36px rgba(0,20,50,.08); scroll-margin-top:86px}
.dcard::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:3;
  background:linear-gradient(90deg, var(--navy), var(--dc) 62%)}
.dcard::after{content:attr(data-wm); content:attr(data-wm) / ""; position:absolute; right:.14em; bottom:-.17em; z-index:0; pointer-events:none;
  font-weight:300; font-size:7.5rem; line-height:1; letter-spacing:-.03em; color:rgba(0,46,109,.05)}
.dcard figure{position:relative; overflow:hidden; height:212px}
.dcard figure img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.15);
  transition:transform .8s var(--ease)}
.dcard:hover figure img{transform:scale(1.05)}
.dcard figure::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(104deg, var(--ov), rgba(0,34,79,.08) 58%)}
/* the card body is a column so every Read more can be pushed to the same
   bottom-left position, whatever the length of the copy above it */
.dcard{display:flex; flex-direction:column}
.dcard figure{flex:none}
.dc-b{position:relative; z-index:2; padding:1.5rem 1.7rem 1.7rem; flex:1; display:flex; flex-direction:column}
.dc-b .dsv{margin-bottom:0}
/* align-self keeps the logo at its natural width; a column flex parent would
   otherwise stretch it across the card */
.dcard .dlg{height:34px; width:auto; max-width:100%; margin-bottom:1.15rem; display:block; align-self:flex-start}
.dcard h3{font-size:clamp(1.4rem,1.9vw,1.75rem); font-weight:300; letter-spacing:-.012em; color:var(--navy); line-height:1.12}
.dcard .dp{margin-top:.7rem; font-size:.97rem; line-height:1.55}
.dsv{list-style:none; margin-top:1.05rem; border-top:1px solid var(--line)}
.dsv li{position:relative; padding:.52rem 0 .52rem 1.4rem; border-bottom:1px solid var(--line); font-size:.92rem}
.dsv li::before{content:""; position:absolute; left:0; top:1em; width:8px; height:8px; background:var(--dc)}
.enter{display:inline-flex; align-self:flex-start; align-items:center; gap:.55rem; margin-top:auto; padding-top:1.3rem; font-size:.82rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--navy); text-decoration:none}
.enter:hover{color:var(--blue)}
/* per-division ambience: glow + one device per card, over the photograph */
.fx{position:absolute; left:0; right:0; top:0; height:212px; z-index:2; pointer-events:none; overflow:hidden}
.fx > *{position:absolute}
.fxg{top:-55%; right:-14%; width:72%; height:170%; border-radius:50%;
  background:radial-gradient(closest-side, var(--dc), transparent 72%); opacity:.28; filter:blur(26px)}
html.js:not(.rm) .dcard.in .fxg{animation:glow 12s ease-in-out infinite alternate}
@keyframes glow{from{transform:scale(.94)} to{transform:scale(1.08) translateY(5%)}}
.fx-rip{right:-52px; bottom:-110px; width:290px; height:290px}
.fx-rip circle{fill:none; stroke:#fff; stroke-width:1.3; opacity:0; transform-origin:50% 50%}
html.js:not(.rm) .dcard.in .fx-rip circle{animation:rip 7s var(--ease) infinite}
html.js:not(.rm) .dcard.in .fx-rip circle:nth-child(2){animation-delay:1.8s}
html.js:not(.rm) .dcard.in .fx-rip circle:nth-child(3){animation-delay:3.6s}
@keyframes rip{0%{transform:scale(.45); opacity:0} 22%{opacity:.55} 100%{transform:scale(1.25); opacity:0}}
.fx-lines{right:0; bottom:0; width:64%; height:72%; opacity:.3;
  background:repeating-linear-gradient(104deg, rgba(255,255,255,.9) 0 1px, transparent 1px 14px);
  -webkit-mask-image:linear-gradient(to top, #000 25%, transparent);
  mask-image:linear-gradient(to top, #000 25%, transparent)}
html.js:not(.rm) .dcard.in .fx-lines{animation:pan 16s linear infinite}
@keyframes pan{to{background-position:202px 0}}
.fx-wave{left:0; width:100%; bottom:-4px; height:64px}
.fx-wave path{fill:none; stroke:#fff; stroke-width:1.2; stroke-dasharray:10 8; opacity:.5}
html.js:not(.rm) .dcard.in .fx-wave path{animation:wav 13s linear infinite}
html.js:not(.rm) .dcard.in .fx-wave path:nth-child(2){animation-duration:19s; opacity:.28}
@keyframes wav{to{stroke-dashoffset:-190}}
.fx-bars{right:16px; bottom:0; display:flex; align-items:flex-end; gap:7px; height:52%}
.fx-bars i{position:static; width:9px; height:100%; background:rgba(255,255,255,.65); transform-origin:bottom; transform:scaleY(.18)}
html.js:not(.rm) .dcard.in .fx-bars i{animation:bar 4.2s var(--ease) infinite alternate}
html.js:not(.rm) .dcard.in .fx-bars i:nth-child(2){animation-delay:.45s}
html.js:not(.rm) .dcard.in .fx-bars i:nth-child(3){animation-delay:.9s}
html.js:not(.rm) .dcard.in .fx-bars i:nth-child(4){animation-delay:1.35s}
html.js:not(.rm) .dcard.in .fx-bars i:nth-child(5){animation-delay:1.8s}
html.js:not(.rm) .dcard.in .fx-bars i:nth-child(6){animation-delay:2.25s}
@keyframes bar{from{transform:scaleY(.15)} to{transform:scaleY(.9)}}
.fx-radar{right:-80px; top:-100px; width:320px; height:320px; border-radius:50%; opacity:.6;
  background:conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.85) 55deg, rgba(255,255,255,0) 100deg)}
.fx-ring{right:-80px; top:-100px; width:320px; height:320px; border-radius:50%; border:1.5px solid rgba(255,255,255,.7); opacity:.6}
.fx-ring::after{content:""; position:absolute; inset:19%; border:1px solid rgba(255,255,255,.7); border-radius:50%; opacity:.8}
html.js:not(.rm) .dcard.in .fx-radar{animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fx-orb{right:-60px; top:50%; width:300px; height:300px; margin-top:-150px}
.fx-orb i{position:absolute; border:1.5px solid rgba(255,255,255,.65); border-radius:50%}
.fx-orb i:nth-child(1){inset:0}
.fx-orb i:nth-child(2){inset:17%}
.fx-orb b{position:absolute; display:block}
.fx-orb b:nth-of-type(1){inset:0}
.fx-orb b:nth-of-type(2){inset:17%}
.fx-orb b::after{content:""; position:absolute; top:-4px; left:50%; margin-left:-4px; width:9px; height:9px;
  border-radius:50%; background:rgba(255,255,255,.9)}
html.js:not(.rm) .dcard.in .fx-orb b:nth-of-type(1){animation:spin 22s linear infinite}
html.js:not(.rm) .dcard.in .fx-orb b:nth-of-type(2){animation:spin 32s linear infinite reverse}
/* pointer response: the cursor is the signal entering the division (fine pointers only).
   Elements are created by JS inside the aria-hidden .fx layer; ambient devices keep running. */
.fx-pt{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.fx-pt .rip{position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1.3px solid #fff; border-radius:50%; opacity:0; will-change:transform,opacity}
.fx-pt .png{position:absolute; width:36px; height:36px; margin:-18px 0 0 -18px;
  border:1px solid rgba(255,255,255,.85); border-radius:50%; opacity:0; will-change:transform,opacity}
.fx-pt .dot{position:absolute; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:#fff; opacity:0; will-change:opacity}
.fx-glint{position:absolute; left:0; top:0; width:190px; height:190px; margin:-95px 0 0 -95px;
  border-radius:50%; opacity:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.5), transparent 70%);
  transition:opacity .35s ease; will-change:transform}
.dcard.pt .fx-glint{opacity:.22}
/* while the pointer drives the bars, the ambient loop yields to it */
html.js:not(.rm) .dcard.pt .fx-bars i{animation:none; transition:transform .16s ease-out}
html.rm .fx-pt, html.rm .fx-glint{display:none}

html.js:not(.rm) .dcard{opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease) var(--d,0ms), transform .8s var(--ease) var(--d,0ms)}
html.js:not(.rm) .dcard.in{opacity:1; transform:none}
@media (max-width:900px){
  .dgrid{grid-template-columns:1fr; gap:1.3rem}
  .dcard figure{height:180px}
  .fx{height:180px}
}

/* ============ SITUATIONS: the switchboard ============ */
.sits{position:relative; overflow:hidden;
  background:radial-gradient(90rem 42rem at 88% -12%, rgba(0,116,200,.28), transparent 62%), var(--night); color:#fff}
.sits .wrap{position:relative; z-index:1; padding-block:var(--s4)}
.sits-bg{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.55}
.sits-bg path{fill:none; stroke:url(#spGrad); stroke-linecap:round}
.sits-bg .sp1 path{stroke-width:1.1; stroke-dasharray:340 280}
.sits-bg .sp2 path{stroke-width:.6; stroke-dasharray:200 340; opacity:.6}
html.js:not(.rm) .sits.in .sits-bg path{animation:spflow 30s linear infinite}
html.js:not(.rm) .sits.in .sits-bg .sp1 path:nth-child(2){animation-duration:38s}
html.js:not(.rm) .sits.in .sits-bg .sp1 path:nth-child(3){animation-duration:26s; animation-delay:-8s}
html.js:not(.rm) .sits.in .sits-bg .sp1 path:nth-child(4){animation-duration:44s; animation-delay:-16s}
html.js:not(.rm) .sits.in .sits-bg .sp2 path:nth-child(2){animation-duration:34s; animation-delay:-6s}
html.js:not(.rm) .sits.in .sits-bg .sp2 path:nth-child(3){animation-duration:48s; animation-delay:-20s}
html.js:not(.rm) .sits.in .sits-bg .sp2 path:nth-child(4){animation-duration:28s; animation-delay:-12s}
@keyframes spflow{to{stroke-dashoffset:-620}}
.sits h2{color:#fff}
.sits .sub{margin-top:1rem; color:rgba(255,255,255,.85); max-width:40rem}
.swb{margin-top:3rem; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,5vw,5rem); align-items:start}
.swb-stage{position:relative; min-height:16.5rem}
.swb-s{position:absolute; inset:0; opacity:0; transform:translateY(14px); filter:blur(8px); pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease)}
.swb-s.on{opacity:1; transform:none; filter:none; pointer-events:auto}
.swb-si{display:grid; grid-template-columns:150px minmax(0,1fr); gap:1.7rem; align-items:start}
.swb-im{display:block; position:relative; overflow:hidden; aspect-ratio:4/5; clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%)}
.swb-im img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.25)}
.swb-im::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(0,26,62,.55), rgba(0,26,62,.12))}
.swb-im::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--dl); z-index:1}
.swb-s blockquote{font-weight:300; font-style:italic; font-size:clamp(1.4rem,2.5vw,2rem); line-height:1.28; color:#fff; max-width:22ch; text-wrap:balance}
.swb-s .fm{margin-top:1.2rem; font-size:.98rem; line-height:1.55; color:rgba(255,255,255,.88); max-width:32rem}
.swb-s .fm b{color:var(--dl); font-weight:700}
.swb-s .fm .and{color:rgba(255,255,255,.72); font-weight:400}
.swb-cta{margin-top:2rem; display:flex; flex-wrap:wrap; gap:.8rem}
.swb-prog{height:2px; background:rgba(255,255,255,.16); margin-top:2rem; max-width:24rem}
.swb-prog i{display:block; height:100%; width:0; background:var(--cyan)}
html.js:not(.rm) .swb-prog i.run{width:100%; transition:width 6s linear}
.swb-rail{display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.22)}
.swb-r{display:grid; grid-template-columns:12px minmax(0,1fr) auto; align-items:baseline; gap:.9rem; width:100%;
  background:none; border:0; -webkit-appearance:none; appearance:none; border-bottom:1px solid rgba(255,255,255,.14);
  cursor:pointer; text-align:left; font-family:var(--ff); padding:.9rem .5rem; transition:background .3s ease}
.swb-r i{width:10px; height:10px; border:1px solid var(--dl); background:var(--dl); transform:translateY(1px); transition:box-shadow .3s ease}
.swb-r b{font-size:1rem; font-weight:700; color:rgba(255,255,255,.82); transition:color .3s ease}
.swb-r span{font-size:.82rem; color:rgba(255,255,255,.5)}
.swb-r:hover b{color:#fff}
.swb-r.on{background:rgba(255,255,255,.07)}
.swb-r.on i{box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.swb-r.on b{color:#fff}
@media (max-width:960px){
  .swb{grid-template-columns:1fr; gap:2.2rem}
  .swb-stage{min-height:21rem}
  .swb-si{grid-template-columns:96px 1fr; gap:1.1rem}
  .swb-r span{display:none}
}
html:not(.js) .swb-stage{min-height:0}
html:not(.js) .swb-s{position:relative; opacity:1; transform:none; filter:none; margin-bottom:2.4rem}
html:not(.js) .swb-rail,html:not(.js) .swb-prog{display:none}
html.rm .swb-prog{display:none}

/* ============ ABOUT: the convergence loom ============ */
.about{position:relative; color:#fff; overflow:hidden; background:var(--deep)}
.about > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 62%; filter:saturate(.42) brightness(.76); will-change:transform; transform:scale(1.08)}
.about-glow{position:absolute; top:-22%; right:-8%; width:52%; height:95%; border-radius:50%; z-index:1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(96,208,228,.6), transparent 70%); filter:blur(42px); opacity:.2}
html.js:not(.rm) .about.in .about-glow{animation:glow 14s ease-in-out infinite alternate}
.about::after{content:""; position:absolute; inset:0; background:linear-gradient(var(--skew), rgba(0,18,44,.96) 0%, rgba(0,22,52,.88) 52%, rgba(0,26,60,.6) 100%)}
.about .wrap{position:relative; z-index:1; padding-block:var(--s3) var(--s4)}
.about h2{color:#fff}
.about h2 .wm{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.09em; margin-bottom:-.09em}
.about h2 .wm > span{display:inline-block}
html.js:not(.rm) .about h2 .wm > span{transform:translateY(112%); transition:transform .9s var(--ease) var(--wd,0ms)}
html.js:not(.rm) .about.in h2 .wm > span{transform:none}
.about .st{margin-top:1.3rem; font-weight:300; font-size:clamp(1.05rem,1.45vw,1.26rem); line-height:1.6; color:rgba(255,255,255,.95); max-width:36rem}
.about .st .hl{color:var(--cyan)}
/* convergence band: six strands into one line */
.conv-band{position:relative; height:clamp(168px,23vh,244px); margin-bottom:2.6rem}
.conv{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible}
.conv path{fill:none; stroke-width:1.4; vector-effect:non-scaling-stroke}
.conv .strand{opacity:.85}
.conv .pulse{stroke-width:2; stroke-dasharray:.07 2; stroke-dashoffset:.07; opacity:0}
html.js:not(.rm) .about.live:not(.mo-scrub) .conv .pulse,
html.js:not(.rm) .about.live.drawn .conv .pulse{animation:convPulse 9.6s linear var(--pd,0s) infinite}
@keyframes convPulse{
  0%{stroke-dashoffset:.07; opacity:0}
  1.5%{opacity:.9}
  14%{opacity:.9}
  16%{stroke-dashoffset:-1; opacity:0}
  100%{stroke-dashoffset:-1; opacity:0}
}
.conv-dot{position:absolute; top:0; width:6px; height:6px; margin-left:-3px; background:var(--oc,var(--cyan))}
.conv-lbl{position:absolute; top:11px; font-size:.55rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.52); white-space:nowrap}
.conv-node{position:absolute; left:-4px; bottom:-5px; width:10px; height:10px; background:var(--cyan);
  box-shadow:0 0 18px rgba(96,208,228,.85), 0 0 44px rgba(96,208,228,.4)}
/* content fed by the converged line */
.about-grid{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,5vw,5rem)}
.spine{position:absolute; left:0; top:-2.6rem; bottom:0; width:1px; transform-origin:top; pointer-events:none;
  background:linear-gradient(180deg, var(--cyan), rgba(96,208,228,.13) 82%, transparent)}
.about-l{padding-left:clamp(1.4rem,2.5vw,2.4rem)}
.stats{margin-top:2.6rem; display:flex; gap:clamp(1.6rem,4vw,3.4rem); flex-wrap:wrap}
.stats > div::before{content:""; display:block; width:2.2rem; height:1px; background:var(--cyan); margin-bottom:.85rem; transform-origin:left}
html.js:not(.rm) .stats > div::before{transform:scaleX(0); transition:transform .8s var(--ease) var(--sd,0ms)}
html.js:not(.rm) .about.in .stats > div::before{transform:scaleX(1)}
.stats b{display:block; font-size:clamp(2rem,3.4vw,2.9rem); font-weight:300; line-height:1; color:var(--cyan)}
.stats > div > span{display:block; margin-top:.45rem; font-size:.85rem; color:rgba(255,255,255,.85); max-width:9.5rem}
.stats b span{font:inherit; color:inherit}
.tk{display:flex; gap:5px; align-items:center; margin-top:.6rem; height:8px}
.tk u{display:block; width:6px; height:6px; text-decoration:none; background:var(--tc,var(--cyan))}
html.js:not(.rm) .tk u{transform:scale(0); transition:transform .45s var(--ease) var(--td,0ms)}
html.js:not(.rm) .about.in .tk u{transform:scale(1)}
.tk em{font-style:normal; font-size:.56rem; font-weight:700; letter-spacing:.12em; color:rgba(255,255,255,.6); margin-right:.3rem}
.tk.tly{display:block; width:9rem; max-width:100%; height:8px; transform-origin:left;
  background:repeating-linear-gradient(90deg, rgba(96,208,228,.7) 0 1px, transparent 1px 4px)}
html.js:not(.rm) .tk.tly{transform:scaleX(0); transition:transform 1.2s var(--ease) .15s}
html.js:not(.rm) .about.in .tk.tly{transform:scaleX(1)}
.difs{display:flex; flex-direction:column; gap:1.5rem; align-self:center}
.difs > div{position:relative; padding-left:1.3rem}
.difs .dr{position:absolute; left:0; top:.2rem; bottom:.2rem; width:1px; background:rgba(255,255,255,.35); transform-origin:top; transition:background .35s ease}
html.js:not(.rm) .difs .dr{transform:scaleY(0); transition:transform .7s var(--ease) var(--d,0ms), background .35s ease}
html.js:not(.rm) .about.in .difs .dr{transform:scaleY(1)}
html.js:not(.rm) .about .stag:not(.in) > *{transform:translateX(-16px)}
.difs b{display:block; font-size:1.06rem; color:#fff}
.difs p{margin-top:.3rem; font-weight:300; font-size:.95rem; color:rgba(255,255,255,.94); max-width:34rem}
@media (hover:hover){
  .difs > div:hover .dr{background:var(--cyan)}
  html.js:not(.rm) .difs b,html.js:not(.rm) .difs p{transition:transform .35s var(--ease)}
  html.js:not(.rm) .difs > div:hover b,html.js:not(.rm) .difs > div:hover p{transform:translateX(4px)}
}
.about-cred{position:absolute; right:var(--gut); bottom:.8rem; z-index:1; font-size:.68rem; color:rgba(255,255,255,.55)}
@media (max-width:960px){ .conv-lbl{display:none} }
@media (max-width:900px){ .about-grid{grid-template-columns:1fr; gap:2.4rem} .conv-band{height:150px; margin-bottom:2.2rem} }

/* ============ CLIENTS: the register ============ */
.clients{background:var(--mist)}
.clients .wrap{padding-block:var(--s4)}
.reg{margin-top:2.4rem; border-top:1px solid var(--line2)}
.reg-r{position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1.28fr);
  gap:1.6rem 3rem; align-items:baseline; padding:1.55rem 0 1.5rem 1.5rem;
  border-bottom:1px solid var(--line2)}
/* the rule at the left edge is the only ornament, and it draws itself in */
.reg-r::before{content:""; position:absolute; left:0; top:1.7rem; bottom:1.6rem; width:2px;
  background:var(--rc); transform-origin:top}
.reg-r > b{display:block; font-family:var(--dis); font-weight:500; letter-spacing:-.015em;
  font-size:clamp(1.14rem, 1.45vw, 1.34rem); line-height:1.24; color:var(--navy)}
.reg-r > p{font-size:.985rem; line-height:1.62; color:var(--body); max-width:34rem}
html.js:not(.rm) .reg:not(.in) .reg-r::before{transform:scaleY(0)}
html.js:not(.rm) .reg .reg-r::before{transition:transform .8s var(--ease) var(--rd, 0ms)}
html.js:not(.rm) .reg:not(.in) .reg-r > b,
html.js:not(.rm) .reg:not(.in) .reg-r > p{opacity:0; transform:translateY(9px)}
html.js:not(.rm) .reg .reg-r > b,
html.js:not(.rm) .reg .reg-r > p{
  transition:opacity .7s var(--ease) var(--rd, 0ms), transform .7s var(--ease) var(--rd, 0ms)}
@media (max-width:820px){
  .reg-r{grid-template-columns:1fr; gap:.5rem; padding:1.3rem 0 1.25rem 1.15rem}
  .reg-r > p{max-width:none}
}

/* ============ INTELLIGENCE ============ */
.intel .wrap{padding-block:var(--s4); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2.4rem,6vw,6rem); align-items:center}
.intel .sub{margin-top:1.1rem; max-width:34rem}
.intel blockquote{margin-top:1.8rem; font-weight:300; font-style:italic; font-size:clamp(1.2rem,1.9vw,1.55rem); line-height:1.45; color:var(--navy); max-width:30rem}
.intel blockquote em{font-style:italic; color:var(--blue)}
.intel .msrc{margin-top:.8rem; font-size:.85rem; color:var(--mute)}
/* coverage-by-topic chart (Bklit chart grammar: clip reveal, their easing) */
.intel-vis{position:relative}
.imock{position:relative; z-index:2; width:min(74%,318px); margin:0 auto -2.8rem; background:#fff;
  border:1px solid var(--line); transform:rotate(-3deg); overflow:hidden;
  box-shadow:0 26px 54px rgba(0,20,50,.18)}
html.js:not(.rm) .intel-vis.in .imock{animation:imfloat 7s ease-in-out infinite alternate}
@keyframes imfloat{from{transform:rotate(-3deg) translateY(0)} to{transform:rotate(-2.2deg) translateY(-6px)}}
.im-top{background:var(--navy); color:#fff; padding:.95rem 1.2rem .85rem}
.im-mast{display:block; font-weight:700; font-size:1.02rem; letter-spacing:-.01em}
.im-kick{display:block; margin-top:.15rem; font-size:.58rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan)}
.im-body{padding:1.15rem 1.2rem 1.3rem}
.im-issue{display:block; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute)}
.im-rule{display:block; height:2px; background:var(--navy); margin:.6rem 0 1rem}
.im-ct{display:block; font-size:.58rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue)}
.im-toc{list-style:none; margin-top:.7rem}
.im-toc > li{display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:.5rem;
  font-size:.76rem; font-weight:700; color:var(--navy); padding-top:.55rem}
.im-toc > li i{height:1px; background:var(--line); transform:translateY(-3px)}
.im-toc > li em{font-style:normal; font-size:.66rem; font-weight:700; color:var(--mute); font-variant-numeric:tabular-nums}
.im-toc > li.im-sk{display:block; padding-top:.4rem}
.im-l{display:block; height:6px; width:var(--w,100%); background:var(--mist); margin-bottom:.34rem}
.im-foot{display:block; margin-top:1.1rem; padding-top:.7rem; border-top:1px solid var(--line2);
  font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mute)}
.ipanel{position:relative; z-index:1; background:var(--deep); color:#fff; padding:clamp(1.8rem,3vw,2.6rem); padding-top:3.6rem}
.ipanel b{font-size:1.15rem}
.ipanel .ip-sub{margin-top:.5rem; font-size:.93rem; color:rgba(255,255,255,.88)}
.sub-form{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem}
.sub-form input{flex:1 1 13rem; min-width:0; font-family:var(--ff); font-size:.95rem; padding:.85rem 1rem;
  color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.6)}
.sub-form input::placeholder{color:rgba(255,255,255,.65)}
.sub-form input:focus{outline:2px solid var(--cyan); border-color:transparent}
.ipanel .ip-note{margin-top:1rem; font-size:.8rem; color:rgba(255,255,255,.75)}
.ipanel .ip-note a{color:var(--cyan)}
@media (max-width:960px){ .intel .wrap{grid-template-columns:1fr} }

/* ============ PEOPLE ============ */
.people .wrap{padding-block:var(--s3)}
.ppl{margin-top:1.8rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:1.6rem 2.4rem}
.pgrp.lead{grid-column:1 / -1}
.pgrp > h3{display:flex; align-items:center; gap:.55rem; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute); padding-bottom:.5rem}
.pgrp > h3::before{content:""; width:8px; height:8px; background:var(--gc,var(--blue)); flex:none}
.pp{display:grid; grid-template-columns:1fr; gap:0}
.pgrp.lead .pp li{border-top:0; border-bottom:1px solid var(--line2); padding-bottom:1rem}
.pgrp.lead .pav{width:66px; height:66px; font-size:1.35rem}
.pp li{list-style:none; display:flex; align-items:center; gap:1rem; padding:.7rem 0; border-top:1px solid var(--line2)}
.pav{flex:none; width:58px; height:58px; display:grid; place-items:center; color:#fff; font-weight:300;
  font-size:1.2rem; letter-spacing:.05em; background:linear-gradient(135deg, var(--navy), var(--blue));
  border-bottom:3px solid var(--pc, var(--cyan))}
.pin{display:flex; flex-direction:column; min-width:0}
.pp b{display:block; color:var(--navy); font-size:.98rem}
.pp .pin span{font-size:.82rem; color:var(--mute)}
.pp-note{margin-top:1.4rem; font-size:.85rem; color:var(--mute)}

/* ============ CONTACT ============ */
.contact{background:var(--night); color:#fff}
.contact h2{color:#fff}
.contact .wrap{padding-block:var(--s4); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.4rem,6vw,6rem)}
.contact .sub{margin-top:1.1rem; max-width:34rem; color:rgba(255,255,255,.92)}
/* 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} }
.cways{margin-top:2.2rem; display:flex; flex-direction:column}
.cways a{display:flex; flex-wrap:wrap; gap:.3rem 1.4rem; align-items:baseline; text-decoration:none; padding:.95rem 0; border-top:1px solid rgba(255,255,255,.22)}
.cways .l{font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7); min-width:7rem}
.cways .v{font-size:1.12rem; font-weight:700; color:#fff}
.cways a:hover .v{color:var(--cyan)}
.office{margin-top:2rem; font-style:normal; font-size:.95rem; color:rgba(255,255,255,.88); line-height:1.65}
.office b{display:block; color:#fff}
.fnote{margin-top:1.6rem; font-size:.82rem; color:rgba(255,255,255,.7)}
.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} }

/* r12 home: start */
/* SF1: every division photograph sits under a transparent wash of that division's logo colour (--dc).
   Multiply keeps the photo's shadows and detail; the photo is part-desaturated first so the wash reads as
   one colour per card, and a light navy fall-off on the left keeps the white devices legible. */
.dcard figure{isolation:isolate}
.dcard figure img{filter:grayscale(.55) contrast(1.04)}
.dcard figure::after{background:linear-gradient(104deg, rgba(0,34,79,.20), rgba(0,34,79,0) 64%), var(--wash, var(--dc));
  mix-blend-mode:multiply; opacity:var(--wo, .92)}
/* per-card balance: IR's deep blue is eased off; the pale PA slate and the Partnerships grey are taken a step
   deeper and lighter respectively (same hue as the logo) so all six washes carry the same visual weight */
#d-ir{--wo:.78}
#d-intel{--wash:#97A8C2}
#d-jv{--wash:#A9ABAE; --wo:.74}
/* Partnerships: a hub (Miranda) joined to four partner nodes. Square nodes, thin white links, one pulse
   at a time travelling in from a partner. Replaces the orbit circles, which read like Media and Public Affairs. */
.fx-net{right:0; top:0; height:100%; width:min(330px, 80%)}
@media (max-width:900px){ .fx-net{width:min(250px, 64%); opacity:.9} }
.fx-net svg{display:block; width:100%; height:100%; overflow:visible}
.fx-net .nl{fill:none; stroke:rgba(255,255,255,.55); stroke-width:1.2}
.fx-net .nr{fill:none; stroke:rgba(255,255,255,.32); stroke-width:1; stroke-dasharray:3 5}
.fx-net .nn{fill:rgba(255,255,255,.16); stroke:rgba(255,255,255,.85); stroke-width:1.3}
.fx-net .nh{fill:rgba(255,255,255,.92)}
.fx-net .nf{fill:none; stroke:rgba(255,255,255,.5); stroke-width:1}
.fx-net .np{fill:none; stroke:#fff; stroke-width:2.2; stroke-dasharray:9 100; stroke-dashoffset:9; opacity:0}
.fx-net .ng{fill:none; stroke:#fff; stroke-width:1.2; opacity:0; transform-box:fill-box; transform-origin:50% 50%}
html.js:not(.rm) .dcard.in .fx-net .np{animation:netp 7s cubic-bezier(.45,0,.25,1) infinite}
html.js:not(.rm) .dcard.in .fx-net .np:nth-of-type(2){animation-delay:1.75s}
html.js:not(.rm) .dcard.in .fx-net .np:nth-of-type(3){animation-delay:3.5s}
html.js:not(.rm) .dcard.in .fx-net .np:nth-of-type(4){animation-delay:5.25s}
html.js:not(.rm) .dcard.in .fx-net .ng{animation:netg 1.75s ease-out infinite; animation-delay:.9s}
@keyframes netp{0%{stroke-dashoffset:9; opacity:0} 6%{opacity:.95} 46%{opacity:.95} 52%{stroke-dashoffset:-100; opacity:0} 100%{stroke-dashoffset:-100; opacity:0}}
@keyframes netg{0%{transform:scale(1); opacity:.55} 100%{transform:scale(2.3); opacity:0}}
@media (prefers-reduced-motion:reduce){ .fx-net .np,.fx-net .ng{animation:none!important; opacity:0!important} }
/* r12 copy: the bold run in the Miranda Intelligence paragraph */
.intel .sub b{font-weight:700; color:var(--navy)}
.ipanel .ip-note a{white-space:nowrap}
/* r12 home: end */