:root{
--ink:#03072C;--blue:#031D96;--signal:#064BEE;--cyan:#48E2E2;
--paper:#fff;--mist:#F2F4F8;--silver:#D9DEE7;--steel:#8A93A6;--slate:#4A5468;--graphite:#1B2233;
--f:'IBM Plex Sans',system-ui,sans-serif;--m:'IBM Plex Mono',monospace;
--gut:clamp(24px,5vw,80px);--max:1280px;
/* ================= ADD YOUR PHOTOGRAPHS HERE =================
   1. Make a folder called  images  next to this HTML file.
   2. Drop your licensed JPGs in, named as below.
   3. Delete the word  none  and uncomment the matching line.

   --ph-hero:     url('../images/hero.jpg');       full-bleed behind the headline
   --ph-stakes:   url('../images/stakes.jpg');     behind the five questions
   --ph-operate:  url('../images/operate.jpg');    beside "how we operate"
   --ph-research: url('../images/research.jpg');   beside the Index
   --ph-close:    url('../images/close.jpg');      behind the closing CTA

   BENTO CARDS are set on each card element instead. Find the div with
   class "bx big1" and add:   style="--img:url('../images/infrastructure.jpg')"
   Each card's brief hides itself automatically once an image is set.
   ============================================================== */
       
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);font-size:16px;line-height:26px;font-weight:300;color:var(--slate);background:var(--paper);-webkit-font-smoothing:antialiased}
.w{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;line-height:14px}
h1{font-size:clamp(38px,5.4vw,68px);line-height:1.02;font-weight:600;letter-spacing:-.03em;color:var(--paper)}
h2{font-size:clamp(28px,3.4vw,44px);line-height:1.08;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
h3{font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
p.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.5;font-weight:300}
a{color:inherit;text-decoration:none}
section{padding:clamp(72px,10vw,148px) 0}
.dark{background:var(--ink);color:var(--silver)}
.dark h2,.dark h3{color:var(--paper)}
.mist{background:var(--mist)}
.eyebrow{color:var(--blue);margin-bottom:18px}
.dark .eyebrow{color:var(--cyan)}
.headwrap{max-width:62ch}.headwrap p{margin-top:22px}

/* wordmark (interim, typographic) */
.brand{display:inline-block;line-height:0}
.brand img{height:26px;width:auto;display:block}
footer .brand img{height:30px}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--ink);
border-bottom:1px solid rgba(255,255,255,.13)}
.nav-in{max-width:1460px;margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;
gap:clamp(18px,2.4vw,38px);height:66px}
.nav-l{display:flex;gap:clamp(14px,2vw,30px);align-items:center}
.nav-l>li{list-style:none;position:relative;height:66px;display:flex;align-items:center}
.nav-l>li>a,.nav-l>li>button.has{font-size:13.5px;color:rgba(255,255,255,.78);font-weight:400;display:flex;align-items:center;gap:7px}
.nav-l>li>button.has{font:inherit;font-size:13.5px;background:none;border:0;padding:0;margin:0;height:66px;cursor:default;text-align:left}
.nav-l>li>a:hover,.nav-l>li:hover>a,.nav-l>li:hover>button.has,.nav-l>li>button.has:focus-visible{color:var(--cyan)}
.nav-l>li>.has::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;
border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.dd{position:absolute;top:66px;left:-18px;min-width:262px;background:var(--ink);
border:1px solid rgba(255,255,255,.15);padding:8px 0;opacity:0;visibility:hidden;
transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
.nav-l>li:hover .dd,.nav-l>li:focus-within .dd{opacity:1;visibility:visible;transform:none}
.dd a{display:flex;gap:11px;padding:10px 20px;font-size:13px;color:rgba(255,255,255,.76);line-height:19px}
.dd a:hover{background:rgba(255,255,255,.07);color:var(--cyan)}
.dd a i{font-style:normal;font-family:var(--m);font-size:11px;color:var(--steel);padding-top:2px}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-ar{font-size:13px;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.22);padding:6px 13px}
.nav-ar:hover{color:var(--cyan);border-color:var(--cyan)}
.nav-cta{font-size:13px;font-weight:500;color:#fff;border:1px solid rgba(255,255,255,.34);padding:10px 18px;white-space:nowrap}
.nav-cta:hover{background:var(--signal);border-color:var(--signal)}
.burger{display:none;width:34px;height:34px;border:1px solid rgba(255,255,255,.28);background:none;
cursor:pointer;padding:0;position:relative}
.burger span{position:absolute;left:8px;right:8px;height:1px;background:#fff;transition:.2s}
.burger span:nth-child(1){top:11px}.burger span:nth-child(2){top:16px}.burger span:nth-child(3){top:21px}
.burger.x span:nth-child(1){top:16px;transform:rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){top:16px;transform:rotate(-45deg)}
.mob{display:none;position:fixed;top:66px;left:0;right:0;bottom:0;background:var(--ink);z-index:55;
overflow-y:auto;padding:12px var(--gut) 40px}
.mob.open{display:block}
.mob h5{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);
font-weight:600;margin:26px 0 10px}
.mob a{display:block;padding:11px 0;font-size:16px;color:rgba(255,255,255,.82);
border-bottom:1px solid rgba(255,255,255,.1)}
.mob .cta{margin-top:28px;background:var(--signal);color:#fff;text-align:center;
padding:15px;border:none;font-weight:500}
@media(max-width:1120px){.nav-l,.nav-ar{display:none}.burger{display:block}}
@media(max-width:520px){.nav-cta{display:none}}

/* photo slot */
.ph{position:relative;background:var(--mist);border:1px solid var(--silver);overflow:hidden;
background-size:cover;background-position:center}
.ph::before{content:"";position:absolute;inset:0;
background-image:repeating-linear-gradient(45deg,var(--silver) 0 1px,transparent 1px 11px);opacity:.85}
.ph .brief{position:relative;padding:20px;font-family:var(--m);font-size:11px;line-height:18px;color:var(--slate)}
.ph .brief b{display:block;color:var(--ink);font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.ph .brief em{font-style:normal;color:var(--blue)}
.ph.filled::before,.ph.filled .brief{display:none}

/* hero */
.hero{position:relative;background:var(--ink);min-height:min(92vh,880px);display:flex;align-items:center;overflow:hidden;padding:clamp(112px,15vh,156px) 0 clamp(104px,13vh,132px);
background-image:var(--ph-hero);background-size:cover;background-position:center}
.hero-art{position:absolute;inset:0}
.hero-art svg{width:100%;height:100%;display:block}
.hero-art .vp{fill:#16307E;opacity:.30}
.hero-art .vp2{fill:#2A55C8;opacity:.34}
.hero-art .cab{fill:#080F45;stroke:#223BAE;stroke-width:.7;opacity:.94}
.hero-art .cab.dim{fill:#0B1354;stroke:#3050C6;stroke-width:.65;opacity:.8}
.hero-art .cab.far{fill:#070D3E;stroke:#1E2F92;stroke-width:.5;opacity:.6}
.hero-art .cab.far.dim{opacity:.42}
.hero-art .top{fill:#101B62;stroke:#223BAE;stroke-width:.6;opacity:.72}
.hero-art .top.dim{fill:#131E6E;stroke:#3050C6;opacity:.6}
.hero-art .top.far{fill:#080E44;stroke:#17257A;stroke-width:.5;opacity:.34}
.hero-art .top.far.dim{opacity:.3}
.hero-art .vent{stroke:#48E2E2;stroke-width:.5;opacity:.11}
.hero-art .vent.dim{opacity:.085}
.hero-art .fl{stroke:#48E2E2;stroke-width:.6;opacity:.16}
.hero-art .cl{stroke:#48E2E2;stroke-width:.5;opacity:.09}
.hero-art .lt{stroke:#48E2E2;stroke-width:2.2;opacity:.3}
.hero-art .led{fill:#48E2E2;opacity:0;animation:led var(--d) linear var(--t) infinite}
.hero-art .led.dim{fill:#7FB6E8}
@keyframes led{0%,96.6%{opacity:0}97.1%,99.2%{opacity:.95}100%{opacity:0}}
.hero-art .dtick{stroke:#48E2E2;stroke-width:1.2;opacity:.5}
.hero-art .dlab{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:#48E2E2;opacity:.55}
@media(prefers-reduced-motion:reduce){.hero-art .led{animation:none;opacity:.4}}

.hero-art .g{stroke:var(--cyan);stroke-width:.6;opacity:.15}
.hero-art .r{fill:#0A1150;stroke:var(--blue);stroke-width:.8;opacity:.6}
.hero-art .e{stroke:var(--cyan);stroke-width:1;opacity:.3}
.hero-art .v{stroke:var(--cyan);stroke-width:.5;opacity:.12}
.hero-art .lt{stroke:var(--cyan);stroke-width:2.4;opacity:.28}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(3,7,44,.90) 0%,rgba(3,7,44,.80) 42%,rgba(3,7,44,.32) 82%)}
.hero .w{position:relative;z-index:2}

.hero h1{max-width:none}
.hero .sub{max-width:58ch;margin-top:clamp(20px,3vh,28px);color:rgba(255,255,255,.82);font-size:clamp(16px,1.5vw,19px);line-height:1.6}
.btns{display:flex;gap:14px;margin-top:42px;flex-wrap:wrap}
.b1{background:var(--signal);color:#fff;padding:15px 28px;font-size:14px;font-weight:500}
.b1:hover{background:var(--cyan);color:var(--ink)}
.b2{border:1px solid rgba(255,255,255,.36);color:#fff;padding:15px 28px;font-size:14px;font-weight:500}
.b2:hover{border-color:var(--cyan);color:var(--cyan)}
.kicker{margin-top:clamp(26px,4vh,38px);padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
font-size:clamp(14px,1.5vw,17px);line-height:1.5;color:rgba(255,255,255,.62);max-width:46ch;font-weight:300}
.kicker span{color:var(--cyan);font-weight:500}
.hero-note{position:absolute;bottom:0;left:0;right:0;z-index:2;border-top:1px solid rgba(255,255,255,.13)}
.hero-note .w{padding:16px var(--gut);display:flex;gap:clamp(16px,3vw,44px);align-items:center;flex-wrap:wrap}
.hero-note b{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.7)}
.hero-note b i{font-style:normal;color:var(--cyan);margin-right:8px;font-family:var(--m);letter-spacing:0}
.hero-note em{margin-left:auto;font-style:normal;font-family:var(--m);font-size:10px;letter-spacing:.06em;color:rgba(255,255,255,.28)}
@media(max-width:760px){.hero-note{position:static;border-top:none}.hero-note .w{padding-top:0}.hero-note em{display:none}}

/* 02 layers */
.layers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--silver);border:1px solid var(--silver);margin-top:62px}
.lay{background:var(--paper);padding:34px 26px 30px;transition:background .25s}
.lay:hover{background:var(--mist)}
.lay .n{font-family:var(--m);font-size:12px;color:var(--steel)}
.lay svg{width:100%;height:92px;margin:18px 0 20px;display:block}
.lay h3{font-size:17px;line-height:23px;margin-bottom:9px}
.lay p{font-size:14px;line-height:22px}
.ln{stroke:var(--blue);fill:none;stroke-width:1.2}
.ln-d{stroke:var(--steel);fill:none;stroke-width:1;stroke-dasharray:3 4}
.ln-c{stroke:var(--cyan);fill:none;stroke-width:2}
.fl{fill:var(--mist);stroke:var(--blue);stroke-width:1.2}
@media(max-width:1000px){.layers{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.layers{grid-template-columns:1fr}}

/* 03 prove it */
.prove{background:var(--ink);color:#fff}
.qs{margin-top:56px;border-top:1px solid rgba(255,255,255,.15)}
.q{border-bottom:1px solid rgba(255,255,255,.15);padding:30px 0;display:flex;gap:28px;align-items:baseline;
transition:padding .3s,background .3s}
.q:hover{background:rgba(255,255,255,.03);padding-left:16px}
.q .n{font-family:var(--m);font-size:12px;color:var(--cyan);min-width:26px}
.q p{font-size:clamp(19px,2.2vw,29px);line-height:1.28;font-weight:300;color:#fff;letter-spacing:-.015em;max-width:24ch}
.q span{margin-left:auto;font-size:13px;line-height:20px;color:rgba(255,255,255,.5);max-width:24ch;text-align:right;font-family:var(--m)}
@media(max-width:820px){.q{flex-wrap:wrap}.q span{text-align:left;margin-left:54px;margin-top:10px}}
.prove-foot{margin-top:46px;font-size:15px;line-height:24px;color:rgba(255,255,255,.72);max-width:56ch}

/* 04 chain */
.chain{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center;margin-top:60px}
.ringwrap svg{width:100%;display:block;margin:0 auto;overflow:visible}
.ring-base{fill:none;stroke:var(--blue);stroke-width:26}
.ring-hi{fill:none;stroke:var(--cyan);stroke-width:26;opacity:0;transition:opacity .35s}
.ring-hi.act{opacity:1}
.node{fill:var(--mist);stroke:var(--blue);stroke-width:3;transition:fill .3s,stroke .3s}
.node.act{fill:var(--cyan);stroke:var(--cyan)}
.ring-t{font-family:var(--f);font-size:16px;font-weight:600;fill:var(--ink);letter-spacing:-.01em}
.ring-n{font-family:var(--m);font-size:12px;fill:var(--steel)}
.ring-q{font-family:var(--f);font-size:21px;font-weight:600;fill:var(--ink);letter-spacing:-.02em}
.ring-s{font-family:var(--f);font-size:15px;font-weight:300;fill:var(--slate)}
.ring-r{stroke:var(--cyan);stroke-width:2}
.links{border-top:1px solid var(--silver)}
.lk{border-bottom:1px solid var(--silver);padding:22px 0;display:flex;gap:20px;cursor:pointer}
.lk .n{font-family:var(--m);font-size:12px;color:var(--steel);padding-top:4px;min-width:22px}
.lk h3{font-size:18px;margin-bottom:6px}.lk p{font-size:14px;line-height:22px}
.lk .qq{color:var(--ink);font-weight:400;font-size:15px;line-height:23px;margin-bottom:8px}
.lk:hover h3{color:var(--signal)}
.lk.on{border-left:2px solid var(--cyan);padding-left:16px;background:var(--mist)}
.loop{margin-top:26px;font-size:14px;line-height:22px;border-left:2px solid var(--cyan);padding-left:16px}
@media(max-width:900px){.chain{grid-template-columns:1fr}}

/* 05 what we do */
.eng{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--silver);border:1px solid var(--silver);margin-top:56px}
.en{background:var(--paper);padding:30px 28px;display:flex;gap:22px;transition:background .25s}
.en:hover{background:var(--mist)}
.en .n{font-family:var(--m);font-size:12px;color:var(--steel);padding-top:3px}
.en h3{font-size:17px;margin-bottom:7px}
.en p{font-size:14px;line-height:22px}
.en .out{margin-top:12px;font-family:var(--m);font-size:11px;line-height:18px;color:var(--blue);
border-left:2px solid var(--cyan);padding-left:12px}
@media(max-width:820px){.eng{grid-template-columns:1fr}}

/* 06 operate */
.op{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,84px);align-items:start;margin-top:56px}
.op .ph{min-height:340px;background-image:var(--ph-operate)}
.three{border-top:1px solid rgba(255,255,255,.16)}
.three>div{border-bottom:1px solid rgba(255,255,255,.16);padding:22px 0}
.three h3{font-size:17px;margin-bottom:7px}
.three p{font-size:14px;line-height:22px;color:rgba(255,255,255,.68)}
.dontclaim{margin-top:60px;border:1px solid rgba(72,226,226,.4);padding:clamp(28px,4vw,44px)}
.dontclaim .lbl{color:var(--cyan);margin-bottom:16px}
.dontclaim h3{font-size:clamp(20px,2.4vw,30px);line-height:1.2;letter-spacing:-.02em;max-width:26ch;margin-bottom:18px}
.dontclaim p{font-size:15px;line-height:25px;color:rgba(255,255,255,.7);max-width:62ch}
@media(max-width:900px){.op{grid-template-columns:1fr}}

/* 08 technology selection */
.sel{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--silver);
border:1px solid var(--silver);margin-top:56px}
.sel>div{background:var(--paper);padding:clamp(28px,3vw,36px)}
.sel .n{font-family:var(--m);font-size:12px;color:var(--steel);margin-bottom:14px}
.sel h3{font-size:18px;margin-bottom:10px}
.sel p{font-size:14.5px;line-height:24px}
.cont{margin-top:clamp(40px,5vw,60px);border-left:2px solid var(--cyan);padding-left:24px;max-width:74ch}
.cont .lbl{color:var(--blue);display:block;margin-bottom:12px}
.cont p{font-size:16px;line-height:27px}
@media(max-width:860px){.sel{grid-template-columns:1fr}}

/* 08 research */
.res{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,88px);align-items:center;margin-top:56px}
.res .ph{min-height:330px;background-image:var(--ph-research)}
.tags{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap}
.tag{font-family:var(--m);font-size:11px;letter-spacing:.08em;border:1px solid var(--silver);padding:5px 11px}
.tag.c{border-color:var(--cyan);color:var(--blue)}
@media(max-width:900px){.res{grid-template-columns:1fr}}

/* 09 close */
.close{position:relative;background:var(--ink);overflow:hidden;padding:clamp(80px,11vw,164px) 0;
background-image:var(--ph-close);background-size:cover;background-position:center right}
.close::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 24%,rgba(3,7,44,.4) 100%)}
.close .w{position:relative;z-index:2}
.close h2{color:#fff;max-width:14ch}
.close p{max-width:50ch;margin-top:22px;color:rgba(255,255,255,.78)}
.ident{margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
font-size:clamp(17px,1.9vw,23px);line-height:1.35;color:var(--cyan);font-weight:300;max-width:30ch;letter-spacing:-.01em}
.close-brief{position:absolute;right:var(--gut);bottom:24px;z-index:2;font-family:var(--m);font-size:11px;
line-height:17px;color:rgba(255,255,255,.4);max-width:30ch;text-align:right}
@media(max-width:900px){.close-brief{display:none}}

/* footer */
footer{background:var(--graphite);color:var(--steel);padding:64px 0 40px;font-size:13px;line-height:21px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
footer h4{color:#fff;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:16px}
footer li{list-style:none;margin-bottom:9px}
footer a:hover{color:var(--cyan)}
.fbot{margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:800px){.fgrid{grid-template-columns:1fr 1fr}}

.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ===== O/X meaning section ===== */
.ox{position:relative;background:var(--ink);color:var(--silver);overflow:hidden}
.wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;
font-weight:600;letter-spacing:-.05em;line-height:.78;font-size:clamp(180px,30vw,460px);
color:rgba(255,255,255,.045);pointer-events:none;user-select:none;z-index:0}
.wm b{font-weight:600;font-size:1.42em;color:rgba(72,226,226,.10);line-height:0}
.ox .w{position:relative;z-index:1}
.ox h2{color:#fff;max-width:17ch}
.does{font-family:var(--m);font-size:13px;letter-spacing:.06em;color:var(--cyan);margin-bottom:20px}
.ox h2.two{font-size:clamp(30px,4.4vw,58px);line-height:1.04;letter-spacing:-.035em;max-width:none}
.ox h2.two em{font-style:normal;color:var(--cyan)}
.decode{margin-top:clamp(22px,3vw,32px);max-width:58ch;font-size:clamp(16px,1.6vw,19px);
line-height:1.55;color:rgba(255,255,255,.72);font-weight:300}
.oxdef{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.14);margin-top:52px}
.oxdef>div{background:var(--ink);padding:clamp(26px,3.4vw,40px)}
.oxdef .gl{width:clamp(46px,5.4vw,68px);height:clamp(46px,5.4vw,68px);display:block;
margin-bottom:20px;fill:none;stroke-width:8;overflow:visible}
.oxdef .o .gl{stroke:var(--cyan)}
.oxdef .x .gl{stroke:var(--steel)}
.oxdef h3{font-size:19px;color:#fff;margin-bottom:8px}
.oxdef p{font-size:15px;line-height:24px;color:rgba(255,255,255,.68)}
.oxdef p em{font-style:normal;color:var(--cyan)}
.oxbody{margin-top:clamp(48px,6vw,72px)}
.oxlede{font-size:clamp(25px,3.6vw,46px);line-height:1.14;font-weight:300;letter-spacing:-.025em;
color:#fff;max-width:22ch}
.oxcols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);
margin-top:clamp(28px,3.5vw,44px);padding-top:clamp(24px,3vw,34px);
border-top:1px solid rgba(255,255,255,.14)}
.oxcols p{font-size:15px;line-height:26px;color:rgba(255,255,255,.7);max-width:44ch}
@media(max-width:820px){.oxcols{grid-template-columns:1fr;gap:18px}.oxlede{max-width:none}}
.solve{margin-top:clamp(34px,4.5vw,56px);font-size:clamp(26px,3.6vw,46px);line-height:1.05;
font-weight:600;letter-spacing:-.03em;color:#fff}
.solve em{font-style:normal;color:var(--cyan)}
.xlab{margin-top:clamp(52px,6vw,76px);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
font-weight:600;color:var(--cyan);margin-bottom:20px}
.xlist{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.14)}
.xlist>div{background:var(--ink);padding:clamp(26px,3vw,36px)}
.xlist .m{font-family:var(--m);font-size:16px;color:var(--steel);margin-bottom:14px}
.xlist h4{font-size:18px;line-height:24px;color:#fff;font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
.xlist p{font-size:14.5px;line-height:24px;color:rgba(255,255,255,.66)}
@media(max-width:900px){.oxdef{grid-template-columns:1fr}.xlist{grid-template-columns:1fr}}

/* ===== board pane ===== */
.gwrap{display:grid;grid-template-columns:min(340px,42vw) 1fr;gap:clamp(32px,6vw,80px);align-items:center;margin-top:52px}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--silver);
border:1px solid var(--silver);aspect-ratio:1}
.cell{background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.cell:hover{background:var(--mist)}
.cell svg{width:52%;height:52%;overflow:visible}
.cx{stroke:var(--steel);stroke-width:7;fill:none}
.co{stroke:var(--blue);stroke-width:7;fill:none}
.dash{stroke-dasharray:var(--L);stroke-dashoffset:var(--L);animation:dr .34s cubic-bezier(.3,1,.4,1) forwards}
.dash.d2{animation-delay:.15s}
@keyframes dr{to{stroke-dashoffset:0}}
.gstat{margin-top:20px;font-family:var(--m);font-size:12px;color:var(--steel);min-height:20px}
.gbtn{margin-top:14px;border:1px solid var(--silver);background:none;font-family:var(--f);
font-size:13px;font-weight:500;padding:9px 16px;color:var(--slate);cursor:pointer}
.gbtn:hover{border-color:var(--signal);color:var(--signal)}
.gcopy h3{font-size:clamp(20px,2.4vw,28px);line-height:1.15;letter-spacing:-.02em;margin-bottom:16px}
.gcopy p{font-size:16px;line-height:27px}.gcopy p+p{margin-top:16px}
.gcopy .note{margin-top:22px;border-left:2px solid var(--cyan);padding-left:16px;font-size:15px;line-height:25px;color:var(--ink)}
.pain{list-style:none;margin:22px 0 0;border-top:1px solid var(--silver)}
.pain li{font-size:15px;line-height:23px;color:var(--ink);font-weight:300;
padding:11px 0 11px 26px;border-bottom:1px solid var(--silver);position:relative}
.pain li::before{content:"\00d7";position:absolute;left:0;top:10px;font-family:var(--m);
font-size:15px;color:var(--steel)}
.relief{margin-top:30px;border-left:2px solid var(--cyan);padding:6px 0 6px 22px}
.relief .lbl{color:var(--blue);margin-bottom:12px;display:block}
.relief p{font-size:16px;line-height:27px}
.relief .big{margin-top:0;font-size:clamp(19px,2.1vw,25px);line-height:1.28;
font-weight:600;letter-spacing:-.02em;color:var(--ink)}
@media(max-width:820px){.gwrap{grid-template-columns:1fr}.board{max-width:320px}}

/* ===== the gap ===== */
.gap3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--silver);
border:1px solid var(--silver);margin-top:56px}
.gap3>div{background:var(--paper);padding:clamp(28px,3vw,36px)}
.gap3>div.us{background:var(--ink)}
.gap3 .lbl{color:var(--blue);margin-bottom:14px;display:block}
.gap3>div.us .lbl{color:var(--cyan)}
.gap3 h3{font-size:18px;margin-bottom:10px}
.gap3>div.us h3{color:#fff}
.gap3 p{font-size:14.5px;line-height:24px}
.gap3>div.us p{color:rgba(255,255,255,.72)}
.gap3 .trade{margin-top:16px;padding-top:14px;border-top:1px solid var(--silver);
font-size:13px;line-height:21px;color:var(--steel)}
.gap3>div.us .trade{border-color:rgba(255,255,255,.18);color:var(--cyan)}
@media(max-width:900px){.gap3{grid-template-columns:1fr}}

/* ===== the method ===== */
.method{margin-top:clamp(48px,6vw,72px);border:1px solid var(--silver);background:var(--mist);
padding:clamp(30px,4vw,48px)}
.method .lbl{color:var(--blue);display:block;margin-bottom:14px}
.method h3{font-size:clamp(22px,2.8vw,34px);line-height:1.1;letter-spacing:-.025em;margin-bottom:10px}
.method>p{font-size:16px;line-height:27px;max-width:64ch}
.method>p em{font-style:normal;font-weight:500;color:var(--ink)}
.msteps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--silver);
border:1px solid var(--silver);margin-top:32px}
.msteps>div{background:var(--paper);padding:24px 22px}
.msteps .n{font-family:var(--m);font-size:12px;color:var(--steel);margin-bottom:10px}
.msteps h4{font-size:16px;color:var(--ink);font-weight:600;margin-bottom:7px}
.msteps p{font-size:13.5px;line-height:22px}
.mfoot{margin-top:26px;border-left:2px solid var(--cyan);padding-left:18px;font-size:15px;
line-height:25px;color:var(--ink);max-width:66ch}
@media(max-width:900px){.msteps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.msteps{grid-template-columns:1fr}}

/* ===== mega menu ===== */
.dd.mega{position:fixed;left:0;right:0;top:66px;min-width:0;border-left:none;border-right:none;padding:0}
.mega-in{max-width:1460px;margin:0 auto;padding:34px var(--gut) 38px;
display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(20px,3vw,52px)}
.mcol>a.head{display:block;font-size:14px;font-weight:600;color:#fff;padding:0 0 10px;
border-bottom:1px solid rgba(255,255,255,.18);margin-bottom:10px;letter-spacing:-.01em}
.mcol>a.head:hover{color:var(--cyan)}
.mcol>a.head i{font-style:normal;font-family:var(--m);font-size:11px;color:var(--cyan);margin-right:9px;letter-spacing:0}
.mcol .sub{display:block;padding:7px 0;font-size:13px;line-height:19px;color:rgba(255,255,255,.66)}
.mcol .sub:hover{color:var(--cyan)}
.mega-foot{border-top:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
.mega-foot .w{padding:14px var(--gut);max-width:1460px;font-family:var(--m);font-size:11.5px;
color:rgba(255,255,255,.5);display:flex;gap:10px;align-items:center}
.mega-foot .w b{color:var(--cyan);font-weight:500}
@media(max-width:1120px){.dd.mega{display:none}}

/* grouped items inside a standard dropdown */
.dd .grp{font-weight:600;color:#fff}
.dd .grp:hover{color:var(--cyan)}
.dd .sub2{padding-left:38px;font-size:12.5px;color:rgba(255,255,255,.62)}
.dd .ddrule{display:block;height:1px;background:rgba(255,255,255,.15);margin:9px 20px}
.mob a.ind{padding-left:20px;font-size:14.5px;color:rgba(255,255,255,.66)}

.mcol .head.grouplbl{color:var(--cyan);font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:default}
.mcol .head.grouplbl:hover{color:var(--cyan)}

/* ===== section 02 rebuild ===== */
.ox h2.two{font-size:clamp(25px,4.2vw,58px);line-height:1.02;letter-spacing:-.035em;max-width:none}
.ox h2.two span{white-space:nowrap}
.ox h2.two span{display:block}
.ox h2.two .xline{font-size:1.55em;line-height:.98;margin-top:.05em}
.ox h2.two em{font-style:normal;color:var(--cyan)}
.oxdef p strong{font-weight:500;color:#fff}
.axiom{margin:clamp(40px,5vw,62px) 0 clamp(28px,3.4vw,40px);display:flex;align-items:center;gap:clamp(16px,3vw,36px)}
.axiom span{flex:none;font-size:clamp(15px,1.8vw,21px);line-height:1.3;font-weight:500;color:#fff;letter-spacing:-.015em;text-align:center}
.axiom span em{font-style:normal;color:var(--cyan)}
.axiom i{flex:1;height:1px;background:rgba(255,255,255,.22)}
@media(max-width:700px){.axiom i{display:none}.axiom{justify-content:center}}
.analogy{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.analogy .mk{font-family:var(--m);font-size:clamp(46px,7vw,104px);line-height:.8;color:rgba(72,226,226,.28);letter-spacing:-.04em}
.analogy p{font-family:var(--m);font-size:clamp(13.5px,1.35vw,16px);line-height:1.85;color:rgba(255,255,255,.72);max-width:70ch}
.analogy p+p{margin-top:16px}
.analogy p b{color:#fff;font-weight:500}
@media(max-width:700px){.analogy{grid-template-columns:1fr}}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(148px,1fr);gap:2px;margin-top:clamp(30px,4vw,44px)}
.bx{position:relative;overflow:hidden;background:#080E3A;padding:clamp(20px,2.2vw,30px);
display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;
background-image:var(--img,none);background-size:cover;background-position:center;
transition:background-color .45s cubic-bezier(.22,1,.36,1)}
.bx::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.5;
background-image:repeating-linear-gradient(45deg,rgba(72,226,226,.16) 0 1px,transparent 1px 14px);
transition:opacity .45s,transform .6s cubic-bezier(.22,1,.36,1)}
.bx::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(3,7,44,.15) 0%,rgba(3,7,44,.82) 62%,rgba(3,7,44,.95) 100%);transition:background .45s}
.bx:hover{background-color:#0B1666}
.bx:hover::before{opacity:.9;transform:scale(1.08)}
.bx:hover::after{background:linear-gradient(180deg,rgba(4,14,90,.25) 0%,rgba(3,10,70,.86) 55%,rgba(3,10,70,.96) 100%)}
.bx .tag{position:absolute;top:clamp(16px,1.8vw,24px);right:clamp(16px,1.8vw,24px);
font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);opacity:.75}
.bx .motif{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%) scale(1);
width:min(46%,150px);opacity:.4;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .45s;pointer-events:none}
.bx:hover .motif{transform:translate(-50%,-64%) scale(1.14);opacity:.85}
.bx .motif path,.bx .motif circle,.bx .motif rect,.bx .motif ellipse{fill:none;stroke:var(--cyan);stroke-width:2.2;vector-effect:non-scaling-stroke}
.bx h4{position:relative;font-size:clamp(16px,1.65vw,21px);line-height:1.16;font-weight:600;color:#fff;letter-spacing:-.02em;max-width:16ch}
.bx p{position:relative;font-size:13.5px;line-height:21px;color:rgba(255,255,255,.78);max-width:40ch;
margin-top:0;max-height:0;opacity:0;overflow:hidden;
transition:max-height .45s cubic-bezier(.22,1,.36,1),opacity .35s,margin-top .45s}
.bx:hover p{max-height:200px;opacity:1;margin-top:12px}
.bx.big1{grid-column:1/3;grid-row:1/3}
.bx.s1{grid-column:3;grid-row:1}
.bx.s2{grid-column:4;grid-row:1}
.bx.big2{grid-column:3/5;grid-row:2/4}
.bx.s3{grid-column:1;grid-row:3}
.bx.s4{grid-column:2;grid-row:3}
.bx.big1 .motif,.bx.big2 .motif{width:min(34%,190px)}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(150px,auto)}
 .bx.big1,.bx.big2,.bx.s1,.bx.s2,.bx.s3,.bx.s4{grid-column:auto;grid-row:auto}
 .bx.big1,.bx.big2{grid-column:1/3}
 .bx p{max-height:200px;opacity:1;margin-top:12px}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bx.big1,.bx.big2{grid-column:1}}
@media(prefers-reduced-motion:reduce){.bx,.bx::before,.bx::after,.bx .motif,.bx p{transition:none}}

/* ===== methodology ring ===== */
.method3{display:grid;grid-template-columns:1fr minmax(250px,360px) 1fr;
gap:clamp(20px,3vw,52px);align-items:center;margin-top:clamp(36px,5vw,60px)}
.method3 svg{width:100%;height:auto;display:block;overflow:visible}
.mcolL{display:flex;flex-direction:column;gap:clamp(24px,3.4vw,48px);text-align:right}
.mcolR{display:flex;flex-direction:column;gap:clamp(24px,3.4vw,48px)}
.pill{cursor:default}
.pill .n{font-family:var(--m);font-size:12px;color:var(--steel);margin-bottom:6px}
.pill h3{font-size:clamp(17px,1.8vw,21px);line-height:1.18;letter-spacing:-.02em;margin-bottom:4px;transition:color .25s}
.pill .claim{font-size:13px;line-height:20px;color:var(--blue);font-weight:500;margin-bottom:10px}
.pill ul{list-style:none}
.pill li{font-size:13.5px;line-height:21px;color:var(--slate);padding:3px 0}
.mcolL .pill li{padding-right:15px;position:relative}
.mcolL .pill li::after{content:"";position:absolute;right:0;top:12px;width:7px;height:1px;background:var(--cyan)}
.mcolR .pill li{padding-left:15px;position:relative}
.mcolR .pill li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:1px;background:var(--cyan)}
.pill.on h3{color:var(--signal)}
.ring-base{fill:none;stroke:var(--silver);stroke-width:26}
.ring-hi{fill:none;stroke:var(--blue);stroke-width:26;opacity:.25;transition:opacity .3s,stroke .3s}
.ring-hi.act{opacity:1;stroke:var(--cyan)}
.node{fill:var(--mist);stroke:var(--blue);stroke-width:3;transition:fill .3s,stroke .3s}
.node.act{fill:var(--cyan);stroke:var(--cyan)}
.rnum{font-family:var(--m);font-size:13px;fill:var(--steel)}
.rc{font-family:var(--f);font-size:16px;font-weight:600;fill:var(--ink);letter-spacing:-.01em}
.rs{font-family:var(--f);font-size:12.5px;font-weight:300;fill:var(--slate)}
@media(max-width:940px){
 .method3{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
 .mcolL{text-align:left;order:2}.method3 .ringwrap2{order:1;max-width:320px;margin:0 auto}.mcolR{order:3}
 .mcolL .pill li{padding-right:0;padding-left:15px}
 .mcolL .pill li::after{display:none}
 .mcolL .pill li{position:relative}
 .mcolL .pill li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:1px;background:var(--cyan)}
}

/* ===== stakes strip ===== */

.slbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--blue);margin-bottom:18px}
.srow{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2.2vw,28px)}
.srow>div{border-left:2px solid var(--cyan);padding-left:13px}
.srow b{display:block;font-size:13.5px;line-height:20px;font-weight:400;color:var(--ink)}
.srow i{display:block;margin-top:8px;font-style:normal;font-family:var(--m);font-size:10.5px;
letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
@media(max-width:1000px){.srow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.srow{grid-template-columns:1fr}}

/* ===== independence block inside why-us ===== */
.indep{margin-top:clamp(44px,5.5vw,72px);border-top:1px solid var(--silver);padding-top:clamp(30px,4vw,44px)}
.indep h3{font-size:clamp(24px,3.2vw,40px);line-height:1.08;letter-spacing:-.028em;margin-bottom:18px}
.indep p{font-size:16px;line-height:27px;max-width:70ch}
.indep p+p{margin-top:14px}

/* ===== instrument ring ===== */
.hair{fill:none;stroke:var(--silver);stroke-width:1}
.hair.faint{stroke:var(--silver);opacity:.5}
.tk{stroke:var(--steel);stroke-width:1;opacity:.55}
.tk.mj{stroke:var(--blue);stroke-width:1.4;opacity:.8}
.ring-draw{fill:none;stroke:var(--blue);stroke-width:26;opacity:.16;
stroke-dasharray:943;stroke-dashoffset:943;transition:stroke-dashoffset 1.6s cubic-bezier(.32,0,.16,1)}
.ring-draw.go{stroke-dashoffset:0}
@keyframes xfade{0%,58%{opacity:.9}72%,100%{opacity:0}}
@keyframes ofade{0%,62%{opacity:0}76%,94%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.ring-draw{transition:none;stroke-dashoffset:0}}

/* ===== stakes over photo ===== */
#board .stakes{position:relative;margin-top:clamp(30px,4vw,44px);border:none;overflow:hidden;padding:clamp(28px,3.6vw,44px);background-color:#03072C;background-image:var(--ph-stakes,none);background-size:cover;background-position:center}
#board .stakes::before{content:"";position:absolute;inset:0;
background-image:repeating-linear-gradient(45deg,rgba(72,226,226,.10) 0 1px,transparent 1px 16px)}
#board .stakes::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,44,.86),rgba(3,7,44,.94))}
#board .stakes>*{position:relative;z-index:2}
#board .stakes .slbl{color:var(--cyan)}
#board .stakes .srow>div{border-left:2px solid var(--cyan)}
#board .stakes .srow b{color:#fff}
#board .stakes .srow i{color:rgba(255,255,255,.5)}
.stakebrief{position:absolute;right:clamp(20px,2.4vw,30px);bottom:14px;z-index:2;
font-family:var(--m);font-size:10px;line-height:16px;color:rgba(255,255,255,.28);max-width:34ch;text-align:right}
@media(max-width:900px){.stakebrief{display:none}}

.entry{margin-top:clamp(20px,2.6vw,30px);font-size:15px;line-height:25px;color:var(--slate);
max-width:72ch;font-family:var(--m);font-size:13.5px;line-height:24px}
.entry b{color:var(--blue);font-weight:500}
.en h3 .flag{display:inline-block;margin-left:9px;vertical-align:middle;font-family:var(--m);
font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--blue);
border:1px solid var(--silver);padding:2px 7px}

/* ===== WHAT-WE-DO COMPONENTS (namespaced .wwd) ===== */
.wwd *{margin:0;padding:0;box-sizing:border-box}
.wwd a{color:inherit;text-decoration:none}
.wwd button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.wwd .w{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wwd section{padding:clamp(56px,7vw,110px) 0}
.wwd h1,.wwd h2,.wwd h3,.wwd h4{color:var(--ink);font-weight:600;letter-spacing:-.02em}
.wwd h2{font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.025em}
.wwd .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;line-height:14px}
.wwd .lede{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--slate);max-width:60ch;font-weight:300}
.wwd .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.wwd .rv.in{opacity:1;transform:none}
.wwd :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* breadcrumb */
.wwd .crumb{border-bottom:1px solid var(--silver);padding:16px 0;font-family:var(--m);font-size:12px;color:var(--steel)}
.wwd .crumb a:hover{color:var(--signal)}
.wwd .crumb span{color:var(--ink)}
/* hero */
.wwd .hero{background:var(--ink);color:#fff;padding:clamp(64px,8vw,116px) 0 clamp(44px,5vw,72px);position:relative;overflow:hidden}
.wwd .hero::before{content:"";position:absolute;inset:0;background-image:var(--pg-hero,none);background-size:cover;background-position:center right;opacity:.5}
.wwd .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 30%,rgba(3,7,44,.45) 100%)}
.wwd .hero .w{position:relative;z-index:3}
.wwd .hero h1{color:#fff;font-size:clamp(33px,4.8vw,62px);line-height:1.02;letter-spacing:-.035em;max-width:16ch}
.wwd .hero .lbl{color:var(--cyan);margin-bottom:22px}
.wwd .hero .sub{margin-top:22px;max-width:52ch;font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:rgba(255,255,255,.74)}
.wwd .facts{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap;font-family:var(--m);font-size:11px;letter-spacing:.13em;color:rgba(255,255,255,.62)}
.wwd .facts b{color:var(--cyan);font-weight:500}
.wwd .netline{position:absolute;right:-4%;top:0;height:100%;width:52%;opacity:.85;pointer-events:none;z-index:2}
.wwd .netline path{stroke-dasharray:var(--L,900);stroke-dashoffset:var(--L,900);animation:draw 2.2s cubic-bezier(.4,0,.2,1) .3s forwards}
.wwd .netline circle{opacity:0;animation:pop .5s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}
@media(max-width:900px){.wwd .netline{display:none}}
/* decisions */
.wwd .dec{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--silver);border:1px solid var(--silver);margin-top:44px}
.wwd .dec>div{background:var(--paper);padding:clamp(24px,2.6vw,34px)}
.wwd .dec .n{font-family:var(--m);font-size:12px;color:var(--steel);margin-bottom:14px}
.wwd .dec h3{font-size:19px;line-height:26px;margin-bottom:14px}
.wwd .dec p{font-size:15px;line-height:25px;color:var(--ink);border-left:2px solid var(--cyan);padding-left:14px}
@media(max-width:860px){.wwd .dec{grid-template-columns:1fr}}
/* ============ THE BLAST RADIUS ============ */
.wwd .blast{background:var(--ink);color:#fff}
.wwd .blast h2{color:#fff}
.wwd .blast .lede{color:rgba(255,255,255,.7)}
.wwd .evs{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.wwd .ev{font-family:var(--m);font-size:11px;letter-spacing:.09em;padding:11px 15px;
border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.72);transition:all .22s;line-height:14px}
.wwd .ev:hover{border-color:rgba(72,226,226,.7);color:#fff}
.wwd .ev.act{background:var(--cyan);border-color:var(--cyan);color:var(--ink);font-weight:500}
.wwd .brwrap{display:grid;grid-template-columns:1.5fr .82fr;gap:1px;background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.15);margin-top:22px}
.wwd .copies{background:#040A38;padding:clamp(20px,2.4vw,30px)}
.wwd .tier{margin-bottom:16px}
.wwd .tier:last-child{margin-bottom:0}
.wwd .tl{display:flex;align-items:center;gap:12px;font-family:var(--m);font-size:9.5px;letter-spacing:.16em;
color:rgba(255,255,255,.34);margin-bottom:9px}
.wwd .tl::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
.wwd .crow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wwd .cpy{position:relative;overflow:hidden;background:#071046;border:1px solid rgba(72,226,226,.2);
padding:13px 15px 14px;transition:border-color .4s ease,background .4s ease,opacity .4s ease}
.wwd .cpy .n{font-family:var(--m);font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.4);margin-bottom:6px}
.wwd .cpy h4{color:#fff;font-size:14.5px;line-height:19px;letter-spacing:-.01em;font-weight:500;margin-bottom:4px}
.wwd .cpy .sub{font-size:11.5px;line-height:16px;color:rgba(255,255,255,.42)}
.wwd .cpy .sv{display:block;margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.1);
font-family:var(--m);font-size:9.5px;letter-spacing:.13em;color:rgba(255,255,255,.3);min-height:14px}
.wwd .cpy .rs{display:block;margin-top:5px;font-size:11.5px;line-height:16px;color:rgba(255,255,255,.5);min-height:16px}
/* the wave: staggered by tier so a pulse sweeps down the stack */
.wwd .cpy{transition-delay:calc(var(--t) * 90ms)}
.wwd .cpy .sv,.wwd .cpy .rs{transition:color .4s ease;transition-delay:calc(var(--t) * 90ms)}
.wwd .cpy.safe{border-color:var(--cyan);background:#08175A}
.wwd .cpy.safe .sv{color:var(--cyan)}
.wwd .cpy.safe .rs{color:rgba(255,255,255,.72)}
.wwd .cpy.cond{border-color:rgba(6,75,238,.9);background:#061043}
.wwd .cpy.cond .sv{color:#6E9BFF}
.wwd .cpy.cond .rs{color:rgba(255,255,255,.62)}
.wwd .cpy.lost{border-color:rgba(255,255,255,.12);background:#050B2E;opacity:.55}
.wwd .cpy.lost .sv{color:var(--steel)}
.wwd .cpy.lost h4{color:rgba(255,255,255,.55)}
.wwd .cpy.lost::after{content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 7px)}
.wwd .bpanel{background:var(--ink);position:relative}
.wwd .bstick{position:sticky;top:clamp(18px,7vh,72px);padding:clamp(22px,2.6vw,32px)}
.wwd .bhud{font-family:var(--m);font-size:11px;letter-spacing:.13em;color:var(--cyan);
padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.15);margin-bottom:20px;
display:flex;justify-content:space-between;gap:12px}
.wwd .bhud .cnt{color:#fff}
.wwd .bhud .cnt b{color:var(--cyan);font-weight:500}
.wwd .bname{font-size:clamp(19px,2vw,25px);line-height:1.22;color:#fff;font-weight:400;letter-spacing:-.02em;margin-bottom:14px}
.wwd .bdesc{font-size:13.5px;line-height:22px;color:rgba(255,255,255,.58)}
.wwd .bverd{margin-top:22px;font-size:14px;line-height:23px;color:#fff;
border-left:2px solid var(--cyan);padding-left:16px}
.wwd .bverd.idle{color:rgba(255,255,255,.45);border-left-color:rgba(255,255,255,.2)}
.wwd .meter{display:flex;gap:4px;margin-top:18px}
.wwd .meter i{flex:1;height:3px;background:rgba(255,255,255,.16);transition:background .45s ease}
.wwd .meter i.on{background:var(--cyan)}
.wwd .meter i.cnd{background:var(--signal)}
.wwd .mleg{display:flex;gap:16px;margin-top:10px;font-family:var(--m);font-size:9.5px;letter-spacing:.12em}
.wwd .mleg span{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.4)}
.wwd .mleg span::before{content:"";width:9px;height:2px;background:currentColor}
.wwd .mleg .s{color:var(--cyan)}
.wwd .mleg .c{color:#6E9BFF}
@media(max-width:1000px){.wwd .brwrap{grid-template-columns:1fr}
.wwd .bstick{position:static}}
@media(max-width:620px){.wwd .crow{grid-template-columns:1fr}}
/* ============ THE MAP ============ */
.wwd .map{background:var(--ink);color:#fff}
.wwd .map h2{color:#fff}
.wwd .map .lede{color:rgba(255,255,255,.7)}
.wwd .mapwrap{display:grid;grid-template-columns:1.35fr .85fr;gap:1px;background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.15);margin-top:44px}
.wwd .stage{background:#040A38;position:relative;min-height:clamp(420px,44vw,540px);overflow:hidden}
.wwd .stage svg{position:absolute;inset:0;width:100%;height:100%}
.wwd .zone{position:absolute;font-family:var(--m);font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.34);pointer-events:none}
.wwd .nd{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;
border:1px solid rgba(72,226,226,.5);background:#071046;display:grid;place-items:center;
font-family:var(--m);font-size:11px;color:rgba(255,255,255,.72);transition:all .25s;z-index:2}
.wwd .nd::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(72,226,226,.16);
transform:scale(.7);opacity:0;transition:all .3s}
.wwd .nd:hover,.wwd .nd:focus-visible{border-color:var(--cyan);color:#fff;transform:translate(-50%,-50%) scale(1.14)}
.wwd .nd:hover::after,.wwd .nd:focus-visible::after{transform:scale(1);opacity:1}
.wwd .nd.seen{background:#0B1A63;border-color:rgba(72,226,226,.8)}
.wwd .nd.on{background:var(--cyan);color:var(--ink);border-color:var(--cyan);font-weight:500;
box-shadow:0 0 0 6px rgba(72,226,226,.16)}
.wwd .nd.ok{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.wwd .nd.ok::before{content:"✓";font-size:13px}
.wwd .nd.ok span{display:none}
.wwd .pulse{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(72,226,226,.35)}50%{box-shadow:0 0 0 10px rgba(72,226,226,0)}}
.wwd .panel{background:var(--ink);padding:clamp(24px,2.8vw,36px);display:flex;flex-direction:column}
.wwd .hud{font-family:var(--m);font-size:11px;letter-spacing:.13em;color:var(--cyan);
padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.15);margin-bottom:22px;
display:flex;justify-content:space-between;gap:12px}
.wwd .hud .cnt{color:#fff}
.wwd .pz{font-family:var(--m);font-size:11px;letter-spacing:.13em;color:var(--steel);margin-bottom:12px}
.wwd .pq{font-size:clamp(18px,1.9vw,23px);line-height:1.32;color:#fff;font-weight:300;letter-spacing:-.015em;min-height:5em}
.wwd .pq.idle{color:rgba(255,255,255,.42);font-size:17px;line-height:1.5}
.wwd .pw{margin-top:16px;font-size:13.5px;line-height:22px;color:rgba(255,255,255,.55);min-height:4.4em}
.wwd .mark{margin-top:auto;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);display:flex;gap:10px;flex-wrap:wrap}
.wwd .mark button{font-family:var(--m);font-size:11px;letter-spacing:.1em;padding:11px 16px;
border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.8);transition:all .2s}
.wwd .mark button:hover{border-color:var(--cyan);color:#fff}
.wwd .mark button.y.act{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.wwd .mark button.n.act{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:#fff}
.wwd .mark[hidden]{display:none}
.wwd .verdict{margin-top:34px;font-size:15px;line-height:25px;color:var(--cyan);max-width:64ch;
border-left:2px solid var(--cyan);padding-left:18px}
@media(max-width:900px){.wwd .mapwrap{grid-template-columns:1fr}
.wwd .stage{min-height:400px}}
/* ============ STAGES ============ */
.wwd .stg{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--silver);border:1px solid var(--silver);margin-top:44px}
.wwd .st{background:var(--paper);position:relative;aspect-ratio:3/4;overflow:hidden;text-align:left;display:block;width:100%}
.wwd .st .img{position:absolute;inset:0;background-size:cover;background-position:center;
background-color:var(--mist);transition:transform .6s cubic-bezier(.22,1,.36,1),filter .4s}
.wwd .st:nth-child(1) .img{background-image:var(--ph-stage-1)}
.wwd .st:nth-child(2) .img{background-image:var(--ph-stage-2)}
.wwd .st:nth-child(3) .img{background-image:var(--ph-stage-3)}
.wwd .st:nth-child(4) .img{background-image:var(--ph-stage-4)}
.wwd .st .img::after{content:attr(data-brief);position:absolute;inset:0;display:grid;place-items:start center;
text-align:center;padding:22% 20px 0;font-family:var(--m);font-size:10.5px;line-height:17px;letter-spacing:.08em;
color:var(--steel);background:repeating-linear-gradient(45deg,#EDF0F5 0 12px,#F2F4F8 12px 24px)}
.wwd .st .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,44,0) 34%,rgba(3,7,44,.9) 100%);
transition:background .4s}
.wwd .st .cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2vw,24px);z-index:2}
.wwd .st .n{font-family:var(--m);font-size:11px;letter-spacing:.14em;color:var(--cyan);margin-bottom:7px}
.wwd .st h3{color:#fff;font-size:20px;margin-bottom:0}
.wwd .st .rev{max-height:0;overflow:hidden;opacity:0;transition:max-height .45s cubic-bezier(.22,1,.36,1),opacity .35s,margin .45s}
.wwd .st .rev p{font-size:13.5px;line-height:21px;color:rgba(255,255,255,.82);margin-top:9px}
.wwd .st:hover .img,.wwd .st:focus-visible .img,.wwd .st.open .img{transform:scale(1.05)}
.wwd .st:hover .veil,.wwd .st:focus-visible .veil,.wwd .st.open .veil{background:linear-gradient(180deg,rgba(3,7,44,.28) 0%,rgba(3,7,44,.94) 62%)}
.wwd .st:hover .rev,.wwd .st:focus-visible .rev,.wwd .st.open .rev{max-height:180px;opacity:1}
.wwd .st .hint{position:absolute;top:14px;right:14px;font-family:var(--m);font-size:9.5px;letter-spacing:.1em;
color:var(--ink);background:rgba(255,255,255,.82);border:1px solid var(--silver);padding:4px 8px;
z-index:3;opacity:1;transition:opacity .3s}
.wwd .st:hover .hint,.wwd .st.open .hint{opacity:0}
@media(max-width:900px){.wwd .stg{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.wwd .stg{grid-template-columns:1fr}
.wwd .st{aspect-ratio:16/10}}
/* deliverable strip */
.wwd .dstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--silver);
border:1px solid var(--silver);border-top:none}
.wwd .dstrip>div{background:var(--mist);padding:18px 20px}
.wwd .dstrip .k{font-family:var(--m);font-size:10px;letter-spacing:.13em;color:var(--steel);margin-bottom:6px}
.wwd .dstrip .v{font-size:14.5px;line-height:21px;color:var(--ink);font-weight:400}
@media(max-width:760px){.wwd .dstrip{grid-template-columns:1fr 1fr}}
/* ===== v4 SECTION SHELL (boundary / partner / pillar only) ===== */
.wwd .sec{padding:clamp(56px,7vw,110px) 0}
.wwd .sec.dark{background:var(--ink);color:#fff}
.wwd .sec.dark h2{color:#fff}
.wwd .sec.dark .lede{color:rgba(255,255,255,.66)}
.wwd .sec.tint{background:var(--mist)}
/* ===== SCROLLY (boundary) ===== */
.wwd .scrolly{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,90px);margin-top:clamp(30px,5vw,64px);align-items:start}
.wwd .pin{position:sticky;top:0;height:100vh;display:grid;align-content:center;justify-items:center}
.wwd .track{min-width:0}
.wwd .stp{min-height:74vh;display:flex;flex-direction:column;justify-content:center;padding:34px 0;opacity:.26;transition:opacity .55s ease}
.wwd .stp.act{opacity:1}
.wwd .stp .n{font-family:var(--m);font-size:11px;letter-spacing:.15em;color:var(--steel);margin-bottom:16px}
.wwd .sec.dark .stp .n{color:var(--cyan)}
.wwd .stp h3{font-size:clamp(23px,2.9vw,36px);line-height:1.12;margin-bottom:18px;letter-spacing:-.03em}
.wwd .sec.dark .stp h3{color:#fff}
.wwd .stp p{font-size:clamp(15px,1.5vw,17px);line-height:1.62;max-width:44ch}
.wwd .sec.dark .stp p{color:rgba(255,255,255,.68)}
.wwd .stp .kick{margin-top:22px;font-size:14.5px;line-height:24px;color:var(--ink);border-left:2px solid var(--cyan);padding-left:16px;max-width:42ch}
.wwd .sec.dark .stp .kick{color:rgba(255,255,255,.92)}
.wwd .dia{width:100%;max-width:520px;height:auto;overflow:visible}
.wwd .dia .g{opacity:0;transition:opacity .6s ease}
.wwd .dia .g.on{opacity:1}
.wwd .dia .base{opacity:.55}
@media(max-width:900px){.wwd .scrolly{grid-template-columns:1fr;gap:0}
.wwd .pin{position:static;height:auto;margin-bottom:26px}
.wwd .stp{min-height:0;opacity:1;padding:26px 0;border-top:1px solid var(--silver)}
.wwd .sec.dark .stp{border-top-color:rgba(255,255,255,.16)}}
/* ===== PARTNER ===== */
.wwd .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);margin-top:clamp(32px,4vw,52px);align-items:start}
.wwd .pgrid p{font-size:15.5px;line-height:26px}
.wwd .vs{border-top:1px solid var(--silver);padding-top:22px}
.wwd .vs .k{font-family:var(--m);font-size:10.5px;letter-spacing:.13em;color:var(--steel);margin-bottom:10px}
.wwd .vs .v{font-size:24px;color:var(--ink);font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.wwd .vs .v.alt{color:var(--signal)}
.wwd .vs .ph{color:var(--steel);font-weight:400;font-size:17px;border:1px dashed var(--silver);padding:4px 12px;display:inline-block}
.wwd .vs p{font-size:14px;line-height:22px}
.wwd .vsrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.wwd details.gates{margin-top:30px;border-top:1px solid var(--silver);padding-top:20px}
.wwd details.gates summary{font-family:var(--m);font-size:11px;letter-spacing:.1em;color:var(--signal);cursor:pointer;list-style:none}
.wwd details.gates summary::-webkit-details-marker{display:none}
.wwd details.gates summary::before{content:"+ ";color:var(--cyan)}
.wwd details.gates[open] summary::before{content:"\2013 "}
.wwd .gg{margin-top:20px;display:grid;gap:16px}
.wwd .gg>div{display:grid;grid-template-columns:78px 1fr;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--silver)}
.wwd .gg .n{font-family:var(--m);font-size:10.5px;color:var(--steel);padding-top:3px}
.wwd .gg h4{font-size:15px;margin-bottom:4px}
.wwd .gg p{font-size:13.5px;line-height:21px}
@media(max-width:820px){.wwd .pgrid,.wwd .vsrow{grid-template-columns:1fr}}
/* ===== PILLAR ===== */
.wwd .pil{margin-top:clamp(32px,4vw,54px)}
.wwd .prow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px)}
.wwd .pcard{border-top:2px solid var(--ink);padding-top:24px;transition:border-color .25s;display:block}
.wwd .pcard.here{border-top-color:var(--cyan)}
.wwd .pcard:not(.here):hover{border-top-color:var(--signal)}
.wwd .pcard .n{font-family:var(--m);font-size:11px;letter-spacing:.14em;color:var(--steel);margin-bottom:12px}
.wwd .pcard.here .n{color:var(--signal)}
.wwd .pcard h3{font-size:clamp(20px,2.2vw,26px);margin-bottom:10px;letter-spacing:-.025em}
.wwd .pcard p{font-size:15px;line-height:25px;max-width:38ch}
.wwd .pcard .go{margin-top:14px;font-family:var(--m);font-size:11px;letter-spacing:.11em;color:var(--signal)}
.wwd .pwide{margin-top:clamp(30px,4vw,52px);padding-top:28px;border-top:1px solid var(--silver);
display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,52px);align-items:center}
.wwd .pwide .n{font-family:var(--m);font-size:11px;letter-spacing:.14em;color:var(--signal);white-space:nowrap}
.wwd .pwide h3{font-size:clamp(21px,2.3vw,28px);margin-bottom:8px;letter-spacing:-.025em}
.wwd .pwide p{font-size:15px;line-height:25px;max-width:62ch}
.wwd .pwide .go{font-family:var(--m);font-size:11px;letter-spacing:.11em;color:var(--signal);white-space:nowrap}
@media(max-width:820px){.wwd .prow{grid-template-columns:1fr;gap:34px}
.wwd .pwide{grid-template-columns:1fr;gap:14px}}
/* faq accordion */
.wwd .faq details{border-bottom:1px solid var(--silver)}
.wwd .faq details:first-of-type{border-top:1px solid var(--silver)}
.wwd .faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
font-size:17px;font-weight:500;color:var(--ink);transition:color .2s}
.wwd .faq summary::-webkit-details-marker{display:none}
.wwd .faq summary:hover{color:var(--signal)}
.wwd .faq summary::after{content:"";position:absolute;right:6px;top:33px;width:13px;height:13px;
border-right:1.5px solid var(--steel);border-bottom:1.5px solid var(--steel);
transform:rotate(45deg);transition:transform .3s}
.wwd .faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--signal)}
.wwd .faq .a{padding:0 0 26px;font-size:15px;line-height:26px;max-width:76ch;
animation:slide .35s cubic-bezier(.22,1,.36,1)}
@keyframes slide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.wwd .faq h2{margin-bottom:34px}
/* cta */
.wwd .cta{position:relative;background:var(--ink);overflow:hidden;background-image:var(--pg-close,none);
background-size:cover;background-position:center right}
.wwd .cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 26%,rgba(3,7,44,.45) 100%)}
.wwd .cta .w{position:relative;z-index:2}
.wwd .cta h2{color:#fff;max-width:15ch}
.wwd .cta p{margin-top:18px;max-width:50ch;color:rgba(255,255,255,.76)}
.wwd .btn{display:inline-block;margin-top:30px;background:var(--cyan);color:var(--ink);font-weight:500;font-size:15px;
padding:15px 30px;transition:transform .2s}
.wwd .btn:hover{transform:translateY(-2px)}
.wwd .ctafoot{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
font-family:var(--m);font-size:11px;line-height:19px;color:rgba(255,255,255,.45);max-width:56ch}
@media(prefers-reduced-motion:reduce){.wwd .rv{opacity:1;transform:none;transition:none}
.wwd .netline path{animation:none;stroke-dashoffset:0}
.wwd .netline circle{animation:none;opacity:1}
.wwd .pulse{animation:none}
.wwd .st .img{transition:none}
.wwd .faq .a{animation:none}
.wwd .stp{opacity:1}}
/* ---- reset baseline rules that would bleed into .wwd pages ---- */
.wwd{padding-top:67px}
@media(max-width:1120px){.wwd{padding-top:62px}}
.wwd .hero{min-height:0;display:block;align-items:initial;
padding:clamp(64px,8vw,116px) 0 clamp(44px,5vw,72px);background-image:none}
.wwd .hero::before{background-image:var(--pg-hero,none)}
.wwd .hero .sub{max-width:52ch;margin-top:22px;color:rgba(255,255,255,.74);
font-size:clamp(16px,1.6vw,19px);line-height:1.55}
.wwd .hero h1{max-width:16ch}
.wwd .vs .ph{position:static;background:none;overflow:visible}
.wwd .cta{padding:clamp(56px,7vw,110px) 0;background-image:var(--pg-close,none)}

/* ---- breadcrumb, inside the hero ---- */
.wwd .bcr{font-family:var(--m);font-size:12px;line-height:16px;color:rgba(255,255,255,.42);
margin-bottom:clamp(24px,3vw,34px)}
.wwd .bcr a{transition:color .2s}
.wwd .bcr a:hover{color:var(--cyan)}
.wwd .bcr span{color:rgba(255,255,255,.78)}

/* ---- page views ---- */
.pv{display:none}
.pv.on{display:block}
.wwd .crow1{grid-template-columns:1fr}
.wwd .prow3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
@media(max-width:900px){.wwd .prow3{grid-template-columns:1fr;gap:32px}}
.wwd .bfields{margin-top:20px;display:grid;gap:14px}
.wwd .bf{border-top:1px solid rgba(255,255,255,.14);padding-top:11px}
.wwd .bf .k{font-family:var(--m);font-size:9.5px;letter-spacing:.13em;color:var(--cyan);margin-bottom:5px}
.wwd .bf p{font-size:13px;line-height:20px;color:rgba(255,255,255,.66)}
.wwd .bf.warn .k{color:#8A93A6}
.wwd .meter.hide{display:none}
#nyi{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:9999;
background:var(--ink);color:#fff;font-family:var(--m);font-size:11px;letter-spacing:.1em;
padding:12px 18px;border:1px solid rgba(72,226,226,.5);opacity:0;pointer-events:none;
transition:opacity .3s,transform .3s}
#nyi.on{opacity:1;transform:translate(-50%,0)}
.wwd .mleg.hide{display:none}

/* ---- LADDER ---- */
.wwd .rungs{background:#040A38;padding:clamp(22px,2.6vw,34px);display:grid;gap:0}
.wwd .rng{position:relative;display:grid;grid-template-columns:56px 1fr;gap:20px;
padding:18px 0 20px;border-top:1px solid rgba(255,255,255,.1);text-align:left;width:100%;transition:opacity .35s}
.wwd .rng:first-child{border-top:none}
.wwd .rng .num{font-family:var(--m);font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.32);
padding-top:4px;transition:color .3s}
.wwd .rng h4{color:rgba(255,255,255,.62);font-size:17px;line-height:23px;font-weight:500;letter-spacing:-.015em;transition:color .3s}
.wwd .rng .d{font-size:12.5px;line-height:19px;color:rgba(255,255,255,.34);margin-top:5px;transition:color .3s}
.wwd .rng .bar{position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .35s}
.wwd .rng:hover h4{color:#fff}
.wwd .rng.pass .num{color:var(--cyan)}
.wwd .rng.pass h4{color:rgba(255,255,255,.8)}
.wwd .rng.pass .bar{background:rgba(72,226,226,.35)}
.wwd .rng.here{padding-left:18px}
.wwd .rng.here .bar{background:var(--cyan)}
.wwd .rng.here .num{color:var(--cyan)}
.wwd .rng.here h4{color:#fff;font-size:19px}
.wwd .rng.here .d{color:rgba(255,255,255,.7)}
.wwd .rng.above{opacity:.4}
@media(max-width:620px){.wwd .rng{grid-template-columns:46px 1fr;gap:12px}
.wwd .rng .num{font-size:9.5px;letter-spacing:.06em}}

/* ---- ATTACK PATH ---- */
.wwd .path{background:#040A38;padding:clamp(22px,2.6vw,34px)}
.wwd .pst{position:relative;display:grid;grid-template-columns:74px 1fr;gap:18px;padding:0 0 22px}
.wwd .pst:last-child{padding-bottom:0}
.wwd .pst .t{font-family:var(--m);font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.34);
padding-top:14px;text-align:right;transition:color .4s}
.wwd .pst .bod{position:relative;padding-left:26px}
.wwd .pst .bod::before{content:"";position:absolute;left:0;top:16px;width:11px;height:11px;
border:1px solid rgba(255,255,255,.28);border-radius:50%;background:#040A38;transition:all .45s;z-index:2}
.wwd .pst .bod::after{content:"";position:absolute;left:5px;top:27px;bottom:-22px;width:1px;
background:rgba(255,255,255,.14);transition:background .45s}
.wwd .pst:last-child .bod::after{display:none}
.wwd .pst .stg2{font-family:var(--m);font-size:9.5px;letter-spacing:.14em;color:rgba(255,255,255,.3);
padding-top:12px;transition:color .4s}
.wwd .pst h4{color:rgba(255,255,255,.55);font-size:15px;line-height:21px;font-weight:400;margin-top:4px;transition:color .4s}
.wwd .pst .gate{margin-top:7px;display:inline-block;font-family:var(--m);font-size:9px;letter-spacing:.12em;
padding:3px 8px;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.34);transition:all .4s}
.wwd .pst.lit .t{color:var(--cyan)}
.wwd .pst.lit .stg2{color:var(--cyan)}
.wwd .pst.lit h4{color:#fff}
.wwd .pst.lit .bod::before{border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 0 5px rgba(72,226,226,.14)}
.wwd .pst.lit .bod::after{background:rgba(72,226,226,.4)}
.wwd .pst.lit .gate.no{border-color:rgba(255,255,255,.5);color:#fff}
.wwd .pst.lit .gate.yes{border-color:var(--cyan);color:var(--cyan)}
.wwd .pst.lit .gate.na{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.4)}
@media(max-width:620px){.wwd .pst{grid-template-columns:56px 1fr;gap:10px}}

@media(prefers-reduced-motion:reduce){
.wwd .pst,.wwd .pst .bod::before,.wwd .pst .bod::after,.wwd .rng,.wwd .rng .bar,
.wwd .cpy,.wwd .cpy .sv,.wwd .cpy .rs,.wwd .meter i{transition:none}
.wwd .cpy{transition-delay:0s}
#nyi{transition:none}
}

/* ---- shared: option chips scroll on small screens ---- */
@media(max-width:620px){.wwd .evs{gap:6px}.wwd .ev{font-size:10px;padding:9px 11px}}

/* ================= RESEARCH: lighter rhythm ================= */
.rsh section{padding:clamp(62px,8vw,126px) 0}
.rsh .lede{font-size:clamp(17px,1.75vw,21px);line-height:1.52;max-width:46ch;color:var(--slate)}
.rsh h2{font-size:clamp(27px,3.2vw,41px);max-width:18ch}

/* breadcrumb inside a light hero */
.rsh .lite .bcr{color:var(--steel)}
.rsh .lite .bcr a:hover{color:var(--signal)}
.rsh .lite .bcr span{color:var(--ink)}

/* light hero */
.rsh .lite{background:var(--paper);border-bottom:1px solid var(--silver);
padding:clamp(52px,7vw,104px) 0 clamp(38px,5vw,60px);position:relative}
.rsh .lite .lbl{color:var(--signal);margin-bottom:20px}
.rsh .lite h1{color:var(--ink);font-size:clamp(33px,5vw,64px);line-height:1.02;
letter-spacing:-.035em;max-width:15ch}
.rsh .lite .sub{margin-top:22px;max-width:47ch;font-size:clamp(17px,1.7vw,20px);
line-height:1.5;color:var(--slate);font-weight:300}
.rsh .meta{margin-top:34px;padding-top:18px;border-top:1px solid var(--silver);
display:flex;gap:clamp(16px,3vw,42px);flex-wrap:wrap;
font-family:var(--m);font-size:11px;letter-spacing:.13em;color:var(--steel)}
.rsh .meta b{color:var(--signal);font-weight:500}
.rsh .hero .meta{border-top-color:rgba(255,255,255,.16);color:rgba(255,255,255,.6)}
.rsh .hero .meta b{color:var(--cyan)}

/* one big statement, nothing else in the section */
.rsh .big{font-size:clamp(25px,3.1vw,40px);line-height:1.16;letter-spacing:-.03em;
color:var(--ink);max-width:21ch;font-weight:600}
.rsh .big+p{margin-top:26px;max-width:48ch;font-size:16.5px;line-height:27px}
.rsh .dark .big{color:#fff}
.rsh .dark p{color:rgba(255,255,255,.7)}

/* three short points, no boxes */
.rsh .pts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);margin-top:clamp(36px,5vw,60px)}
.rsh .pts>div{border-top:2px solid var(--ink);padding-top:20px}
.rsh .pts .n{font-family:var(--m);font-size:11px;letter-spacing:.14em;color:var(--signal);margin-bottom:12px}
.rsh .pts h3{font-size:19px;line-height:25px;margin-bottom:10px;letter-spacing:-.02em}
.rsh .pts p{font-size:15px;line-height:25px;max-width:34ch}
.rsh .dark .pts>div{border-top-color:var(--cyan)}
.rsh .dark .pts h3{color:#fff}
.rsh .dark .pts p{color:rgba(255,255,255,.66)}
@media(max-width:860px){.rsh .pts{grid-template-columns:1fr;gap:34px}}

/* item list */
.rsh .lst{margin-top:clamp(30px,4vw,52px)}
.rsh .lst>*{display:grid;grid-template-columns:150px 1fr 104px;gap:clamp(16px,3vw,40px);
align-items:baseline;padding:26px 0;border-top:1px solid var(--silver);transition:background .2s}
.rsh .lst>*:last-child{border-bottom:1px solid var(--silver)}
.rsh .lst a:hover{background:var(--mist)}
.rsh .lst .k{font-family:var(--m);font-size:10.5px;letter-spacing:.13em;color:var(--steel);padding-top:4px}
.rsh .lst h3{font-size:clamp(18px,1.9vw,22px);line-height:1.25;letter-spacing:-.022em;margin-bottom:7px}
.rsh .lst a:hover h3{color:var(--signal)}
.rsh .lst p{font-size:14.5px;line-height:23px;max-width:56ch;color:var(--slate)}
.rsh .lst .go{font-family:var(--m);font-size:10.5px;letter-spacing:.11em;color:var(--signal);text-align:right}
.rsh .lst .soon{color:var(--steel)}
@media(max-width:760px){.rsh .lst>*{grid-template-columns:1fr;gap:8px}.rsh .lst .go{text-align:left}}

/* unfilled content marker */
.rsh .slot{font-family:var(--m);font-size:.82em;letter-spacing:.06em;color:var(--steel);
border:1px dashed var(--silver);padding:2px 8px;display:inline-block;max-width:100%;
white-space:normal;overflow-wrap:anywhere}
.rsh .dark .slot{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.55)}

/* maturity band */
.rsh .band{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--silver);
border:1px solid var(--silver);margin-top:clamp(34px,5vw,56px)}
.rsh .lv{background:var(--paper);padding:22px 18px 26px;text-align:left;transition:background .25s;position:relative}
.rsh .lv::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:transparent;transition:background .25s}
.rsh .lv .n{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;color:var(--steel);margin-bottom:12px}
.rsh .lv h3{font-size:17px;line-height:22px;letter-spacing:-.02em;color:var(--ink)}
.rsh .lv:hover{background:var(--mist)}
.rsh .lv.on{background:var(--ink)}
.rsh .lv.on::after{background:var(--cyan)}
.rsh .lv.on .n{color:var(--cyan)}
.rsh .lv.on h3{color:#fff}
@media(max-width:820px){.rsh .band{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.rsh .band{grid-template-columns:1fr}}

.rsh .lvp{border:1px solid var(--silver);border-top:none;background:var(--mist);
padding:clamp(26px,3.4vw,42px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(26px,4vw,60px)}
.rsh .lvp .q{font-size:clamp(19px,2.1vw,26px);line-height:1.28;letter-spacing:-.025em;color:var(--ink);max-width:22ch}
.rsh .lvp .rows{display:grid;gap:14px;align-content:start}
.rsh .lvp .r{border-top:1px solid var(--silver);padding-top:11px}
.rsh .lvp .r .k{font-family:var(--m);font-size:9.5px;letter-spacing:.13em;color:var(--signal);margin-bottom:5px}
.rsh .lvp .r p{font-size:14px;line-height:22px}
@media(max-width:820px){.rsh .lvp{grid-template-columns:1fr;gap:24px}}

/* readiness self-assessment */
.rsh .quiz{margin-top:clamp(32px,4vw,54px);display:grid;grid-template-columns:1.3fr .8fr;
gap:1px;background:var(--silver);border:1px solid var(--silver)}
.rsh .qs2{background:var(--paper);padding:clamp(20px,2.6vw,32px)}
.rsh .qi{display:grid;grid-template-columns:1fr 168px;gap:20px;align-items:center;
padding:16px 0;border-top:1px solid var(--silver)}
.rsh .qi:first-child{border-top:none}
.rsh .qi p{font-size:15px;line-height:23px;color:var(--ink);max-width:52ch}
.rsh .qi .bs{display:flex;gap:6px}
.rsh .qi button{flex:1;font-family:var(--m);font-size:10px;letter-spacing:.09em;padding:9px 4px;
border:1px solid var(--silver);color:var(--steel);transition:all .18s}
.rsh .qi button:hover{border-color:var(--signal);color:var(--signal)}
.rsh .qi button.y.on{background:var(--cyan);border-color:var(--cyan);color:var(--ink);font-weight:500}
.rsh .qi button.m.on{background:var(--signal);border-color:var(--signal);color:#fff}
.rsh .qi button.n.on{background:var(--ink);border-color:var(--ink);color:#fff}
.rsh .qp{background:var(--ink);position:relative}
.rsh .qstick{position:sticky;top:clamp(80px,12vh,120px);padding:clamp(22px,2.6vw,32px)}
.rsh .qp .hd{font-family:var(--m);font-size:11px;letter-spacing:.13em;color:var(--cyan);
padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.15);margin-bottom:20px;
display:flex;justify-content:space-between;gap:10px}
.rsh .qp .hd span:last-child{color:#fff}
.rsh .qp .score{font-size:clamp(38px,5vw,60px);line-height:1;letter-spacing:-.04em;color:#fff;font-weight:600}
.rsh .qp .score small{font-size:.42em;color:rgba(255,255,255,.45);font-weight:300;letter-spacing:0}
.rsh .qp .lvn{font-family:var(--m);font-size:11px;letter-spacing:.13em;color:var(--cyan);margin-top:16px}
.rsh .qp .lvd{margin-top:12px;font-size:14px;line-height:23px;color:rgba(255,255,255,.72);max-width:34ch}
.rsh .bars{display:flex;gap:4px;margin-top:22px}
.rsh .bars i{flex:1;height:3px;background:rgba(255,255,255,.16);transition:background .4s}
.rsh .bars i.on{background:var(--cyan)}
.rsh .bars i.mid{background:var(--signal)}
.rsh .qreset{margin-top:22px;font-family:var(--m);font-size:10px;letter-spacing:.11em;
color:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.24);padding-bottom:2px}
.rsh .qreset:hover{color:#fff}
@media(max-width:900px){.rsh .quiz{grid-template-columns:1fr}.rsh .qstick{position:static}
.rsh .qi{grid-template-columns:1fr;gap:12px}.rsh .qi .bs{max-width:260px}}

/* subscribe form */
.rsh .form{margin-top:clamp(30px,4vw,48px);max-width:520px}
.rsh .form label{display:block;font-family:var(--m);font-size:10.5px;letter-spacing:.13em;
color:var(--steel);margin-bottom:8px}
.rsh .form input,.rsh .form select{width:100%;font-family:var(--f);font-size:16px;font-weight:300;
padding:14px 16px;border:1px solid var(--silver);background:var(--paper);color:var(--ink);margin-bottom:20px}
.rsh .form input:focus,.rsh .form select:focus{outline:none;border-color:var(--signal)}
.rsh .form .note{font-size:13.5px;line-height:22px;color:var(--steel);margin-top:6px}

/* quiet strip */
.rsh .strip{background:var(--mist);border-top:1px solid var(--silver);border-bottom:1px solid var(--silver)}
.rsh .strip .w{display:grid;grid-template-columns:1fr auto;gap:clamp(22px,4vw,56px);align-items:center}
.rsh .strip h3{font-size:clamp(20px,2.2vw,27px);letter-spacing:-.025em;margin-bottom:8px}
.rsh .strip p{font-size:15px;line-height:24px;max-width:52ch}
.rsh .strip .btn{margin-top:0;white-space:nowrap}
@media(max-width:760px){.rsh .strip .w{grid-template-columns:1fr;gap:22px}}

/* ============================================================
   WHAT WE DO - COLOUR, TAKEN FROM THE HOME PAGE
   The dark sections here were already right. The light ones were
   running on ink and silver alone, which is why the pages read as
   grey between the navy bands. Home colours its light sections
   four ways and this reuses all four. No new tokens.

     .eyebrow / .gap3 .lbl   blue eyebrows and micro-labels
     .srow > div             a 2px cyan rule down the left of a quote
     .en:hover               mist panels that lift to paper on hover
     .gap3 > div.us          one navy cell inside an otherwise light grid
   ============================================================ */

/* --- pillar and service cards ------------------------------- */
/* Was a black hairline over bare page. Now a mist panel with a
   blue rule; inside a tint section it inverts to paper so the
   card still separates from the field, as .gap3 does on home. */
.wwd .pcard{background:var(--mist);border-top-color:var(--blue);
padding:24px clamp(20px,2.1vw,28px) 26px;
transition:background .25s,border-color .25s,transform .25s}
.wwd .sec.tint .pcard{background:var(--paper)}
.wwd .pcard p{max-width:34ch}
.wwd .pcard .n{color:var(--blue)}
.wwd .pcard h3{transition:color .25s}
.wwd .pcard .claim{font-size:13px;line-height:20px;color:var(--blue);font-weight:500;margin-bottom:10px}
.wwd .pcard:not(.here):hover{border-top-color:var(--signal);transform:translateY(-3px)}
.wwd .pcard:not(.here):hover h3{color:var(--signal)}
.wwd .pcard .go{color:var(--signal)}

/* the card for the page you are already on: home's one navy cell */
.wwd .pcard.here,.wwd .sec.tint .pcard.here{background:var(--ink);border-top-color:var(--cyan)}
.wwd .pcard.here .n{color:var(--cyan)}
.wwd .pcard.here h3{color:#fff}
.wwd .pcard.here p{color:rgba(255,255,255,.7)}

/* --- decision cards ----------------------------------------- */
/* The cyan rule was already on the paragraph; give it the mist
   block behind it so the rule reads as an accent, not a stray line. */
.wwd .dec .n{color:var(--blue)}
.wwd .dec p{background:var(--mist);padding:14px 16px 14px 14px}

/* --- engagement strip --------------------------------------- */
.wwd .dstrip .k{color:var(--blue)}

/* --- vendor disclosure -------------------------------------- */
/* Held vs alternative, carried by the rule rather than by position. */
.wwd .vs{border-top:2px solid var(--blue)}
.wwd .vsrow .vs:nth-child(2){border-top-color:var(--cyan)}
.wwd .vs .k{color:var(--blue)}
.wwd .gg .n{color:var(--signal)}

/* --- faq ---------------------------------------------------- */
.wwd .faq summary::after{border-color:var(--blue)}
.wwd .faq details[open] summary{color:var(--signal)}
.wwd .faq .a{border-left:2px solid var(--cyan);padding-left:18px}

/* --- stage strip -------------------------------------------- */
/* Photo slots are empty in this export, so the placeholder is what
   is actually on screen. Tint it rather than leaving it neutral. */
.wwd .st .img::after{color:var(--blue);
background:repeating-linear-gradient(45deg,#E7ECF6 0 12px,#F2F4F8 12px 24px)}
/* --- two-up pillar grid ------------------------------------- */
/* Was an inline grid-template-columns, which outranked the .prow3
   media query and left the second column off-screen on a phone. */
.wwd .prow2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.wwd .prow2{grid-template-columns:1fr;gap:32px}}
/* --- breadcrumb sits under the nav, not adrift below it ------ */
/* The hero opened on clamp(64px,8vw,116px) of top padding, so on a
   wide screen the crumb started 116px below the nav with nothing in
   between. Take that off the top and give most of it back under the
   crumb, so the headline keeps its position and the hero its height. */
.wwd .hero{padding-top:clamp(22px,2.2vw,34px)}
.wwd .bcr{margin-bottom:clamp(30px,4.4vw,58px)}
/* ============================================================
   RESEARCH - breadcrumb and colour
   These pages carry .rsh alongside .wwd, so the crumb rule above
   already reached them; the light hero keeps its own padding and
   still needed the same trim. Colour follows the same four home
   idioms used for what-we-do, kept lighter to match the section
   comment above: research runs a light rhythm on purpose.
   ============================================================ */

/* crumb sits under the nav in the light hero too */
.rsh .lite{padding-top:clamp(22px,2.2vw,34px)}

/* three-up point cards - blue rule and a panel, as .wwd .pcard.
   The dark variant keeps its cyan rule and stays unpanelled. */
.rsh .pts>div{border-top-color:var(--blue);background:var(--mist);
padding:22px clamp(18px,1.9vw,26px) 26px}
.rsh .sec.tint .pts>div{background:var(--paper)}
.rsh .dark .pts>div{background:none;padding:20px 0 0;border-top-color:var(--cyan)}
.rsh .pts h3{transition:color .25s}

/* listing rows - blue keys, and a hover that is visible on tint,
   where the mist hover was landing on a mist field */
.rsh .lst .k{color:var(--blue)}
.rsh .lst a{transition:background .2s}
.rsh .sec.tint .lst a:hover{background:var(--paper)}

/* the single-statement section is the emptiest on these pages.
   Home marks a statement with a cyan rule (.srow, .kick); the
   trailing paragraph takes the same indent so the two stay aligned. */
.rsh .big{border-left:3px solid var(--cyan);padding-left:clamp(18px,2vw,30px)}
.rsh .big+p{padding-left:clamp(18px,2vw,30px)}
.rsh .dark .big{border-left-color:var(--cyan)}
/* signal blue on ink is near-unreadable; home uses cyan for a
   micro-label on navy (.wwd .sec.dark .stp .n, .wwd .st .n) */
.rsh .dark .pts .n{color:var(--cyan)}
/* Research heroes are navy across the section now, so the pending
   slots inside one need the dark treatment .rsh .dark .slot already
   defines - steel on ink is not readable. */
.rsh .hero .slot{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.55)}

/* ============================================================
   AUDIT FIXES
   Contrast, measure and headline wrapping. No copy is changed;
   these only alter colour values and widths.
   ============================================================ */

/* --- 6. contrast ------------------------------------------- */
/* --steel (#8A93A6) is 3.09:1 on paper and 2.80:1 on mist, under
   the 4.5:1 AA floor. It passes on the dark footer (5.14:1), so
   only the light-background uses move. --slate is the same family
   at 7.61:1 / 6.91:1. */
.wwd .gg .n,.wwd .stp .n,.wwd .vs .ph,.wwd .pz,
.rsh .lv .n,.rsh .form .note,.rsh .lst .soon,.rsh .slot,
.pill .n,.en .n,.lay .n,.lk .n,.sel .n,.msteps .n,.gstat,.xlist .m{color:var(--slate)}
/* the dark-section variants keep their own lighter colours */
.wwd .sec.dark .stp .n{color:var(--cyan)}
.rsh .dark .slot{color:rgba(255,255,255,.55)}
.rsh .hero .slot{color:rgba(255,255,255,.55)}
/* rgba(255,255,255,.42) is 3.98:1 on ink; .50 clears AA at 5.25:1 */
.wwd .bcr{color:rgba(255,255,255,.55)}
.wwd .pq.idle{color:rgba(255,255,255,.55)}
.wwd .bverd.idle{color:rgba(255,255,255,.55)}

/* --- 3. line length ---------------------------------------- */
/* p.loop had no max-width and set to a 163-character measure */
.loop{max-width:62ch}

/* --- 1. research statement sections ------------------------ */
/* .big was capped at 21ch and its paragraph at 48ch, leaving the
   section 46% filled. Widened to a normal measure and paired with
   the paragraph so the block reads as one column. */
.rsh .big{max-width:30ch}
.rsh .big+p{max-width:62ch}
@media(min-width:1000px){
  .rsh .big{font-size:clamp(28px,3.4vw,44px)}
}

/* --- 2. section rhythm ------------------------------------- */
/* .rsh section gave 126px but .wwd .sec won at 110px on tinted
   bands, so the rhythm shifted depending on the tint. */
.rsh .sec{padding:clamp(62px,8vw,126px) 0}

/* --- 4. headline wrapping ---------------------------------- */
/* 16ch was set for short headlines; the sentence-length ones ran
   to five lines. Widen the cap and let the balancer even them up. */
.wwd .hero h1{max-width:22ch;text-wrap:balance}
.rsh .lite h1,.wwd .hero h1,h1,h2{text-wrap:balance}
.wwd h2,.rsh h2{text-wrap:balance}

/* --- placeholder annotations, now that the slots are filled ----
   The hero note's "photo slot - set --ph-hero" hint was only hidden
   under 760px, so it shipped visible on desktop. The stage tiles
   printed "PHOTO SLOT --ph-stage-N" over a hatch for the same reason.
   Both are build aids; restore them by removing this block if a slot
   is ever emptied again. .ph briefs already self-hide via .filled. */
.hero-note em{display:none}
.wwd .st .img::after{content:none}

/* --- stakes panel: let the photograph read ---------------------
   The overlay was rgba(3,7,44,.86)->.94, which hid the slot image
   almost completely. Eased to .58->.86: the five questions still
   clear AA against it (white on #0B1038 = 15.6:1) and the room
   behind them is now visible. .stakebrief was only hidden under
   900px, so the slot note shipped on desktop. */
#board .stakes::after{background:linear-gradient(180deg,rgba(3,7,44,.74),rgba(3,7,44,.88))}
.stakebrief,.close-brief{display:none}

/* --- stray diagonal hatch ---------------------------------------
   .ph::before paints a 45-degree silver hatch as the empty-photo
   placeholder. The vendor slots reuse the .ph class for a dashed
   text chip; .wwd .vs .ph clears the element background but not the
   pseudo-element, so the hatch was showing inside them. */
.wwd .vs .ph::before{content:none}

/* --- service cards carry a photograph ---------------------------
   The cards were text-only. Each now leads with an image band, so
   the pillar and service grids read as cards rather than a list.
   Horizontal padding moves from the card to its children so the
   image can bleed to the card edge; --img is set per card. */
.wwd .pcard{padding:0 0 24px;overflow:hidden}
.wwd .pcard::before{content:"";display:block;aspect-ratio:16/10;
background-color:#0A1140;background-image:var(--img,none);
background-size:cover;background-position:center;
transition:transform .6s cubic-bezier(.22,1,.36,1)}
.wwd .pcard:hover::before{transform:scale(1.05)}
.wwd .pcard>*{padding-left:clamp(18px,1.9vw,24px);padding-right:clamp(18px,1.9vw,24px)}
.wwd .pcard .n{padding-top:20px}
.wwd .pcard p{max-width:none}
/* the "you are here" card stays navy; dim its image so it reads as current */
.wwd .pcard.here::before{opacity:.42}

/* ============================================================
   THE BOUNDARY BAND
   Was flat navy: a small diagram floating in a void on the left,
   three short blocks spread over ~220vh on the right. The diagram
   now sits in a framed panel with a photograph behind it, the band
   carries the brand watermark the home page already uses, and the
   scroll length is about 10% shorter.
   ============================================================ */
.wwd .sec.dark.bnd{position:relative;overflow:hidden}
.wwd .sec.dark.bnd>*{position:relative;z-index:1}
.wwd .sec.dark.bnd .wm{z-index:0;font-size:clamp(140px,22vw,330px);color:rgba(255,255,255,.035)}
.wwd .sec.dark.bnd .wm b{color:rgba(72,226,226,.075)}

/* the diagram gets a panel, and the photograph sits inside it */
.wwd .sec.dark.bnd .dframe{width:100%;max-width:640px;
padding:clamp(20px,2.6vw,36px);
border:1px solid rgba(72,226,226,.20);
background-image:linear-gradient(180deg,rgba(5,12,66,.80),rgba(3,8,46,.88)),var(--pg-boundary,none);
background-size:cover;background-position:center;
box-shadow:0 26px 70px rgba(0,0,0,.32)}
.wwd .sec.dark.bnd .dia{max-width:none}

/* roughly 10% off the scroll length of the band */
.wwd .sec.dark.bnd .stp{min-height:64vh;padding:28px 0}
.wwd .sec.dark.bnd .pin{height:90vh}
@media(max-width:900px){
  .wwd .sec.dark.bnd .stp{min-height:0;padding:24px 0}
  .wwd .sec.dark.bnd .pin{height:auto}
  .wwd .sec.dark.bnd .dframe{max-width:560px;margin:0 auto}
}
/* ============================================================
   BOUNDARY AS A SELECTOR  (preview - this page only)
   The scroll version ran ~2200px for three short blocks. Here the
   three moves are buttons: pick one, the diagram lights the matching
   row and the body swaps. Copy is untouched - the buttons are built
   at runtime from each step's own .n and h3.
   ============================================================ */
.wwd .sec.dark.bnd .bsel{display:grid;grid-template-columns:1.02fr .98fr;
gap:clamp(28px,4.5vw,68px);margin-top:clamp(26px,3.5vw,46px);align-items:start}
.wwd .sec.dark.bnd .bsel .pin{position:static;height:auto;display:block}
.wwd .sec.dark.bnd .bsel .track{min-width:0}
.wwd .sec.dark.bnd .bsel .stp{display:none;min-height:0;opacity:1;padding:0;border:none}
.wwd .sec.dark.bnd .bsel .stp.act{display:block;animation:bfade .34s cubic-bezier(.22,1,.36,1)}
.wwd .sec.dark.bnd .bsel .stp .n,
.wwd .sec.dark.bnd .bsel .stp h3{display:none}
.wwd .sec.dark.bnd .bsel .stp p{font-size:clamp(15px,1.5vw,17px);line-height:1.62;max-width:46ch;
color:rgba(255,255,255,.72)}
@keyframes bfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* the three buttons */
.wwd .btabs{display:grid;gap:9px;margin-bottom:clamp(22px,2.6vw,32px)}
.wwd .btab{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;
width:100%;text-align:left;padding:15px 17px;
border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.025);
transition:background .25s,border-color .25s,transform .25s}
.wwd .btab .k{grid-column:1;font-family:var(--m);font-size:10px;letter-spacing:.14em;
color:rgba(255,255,255,.5);transition:color .25s}
.wwd .btab .t{grid-column:1;font-size:clamp(16px,1.7vw,19px);line-height:1.25;font-weight:600;
letter-spacing:-.02em;color:rgba(255,255,255,.78);transition:color .25s}
.wwd .btab .mk{grid-column:2;grid-row:1/3;width:9px;height:9px;border-radius:50%;
border:1px solid rgba(255,255,255,.34);transition:all .25s}
.wwd .btab:hover{border-color:rgba(72,226,226,.55);transform:translateX(3px)}
.wwd .btab:hover .t{color:#fff}
.wwd .btab.on{background:rgba(72,226,226,.09);border-color:var(--cyan)}
.wwd .btab.on .k{color:var(--cyan)}
.wwd .btab.on .t{color:#fff}
.wwd .btab.on .mk{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 0 5px rgba(72,226,226,.15)}
/* move 02 is the one that is deliberately not ours - mark it in steel */
.wwd .btab.alt.on{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.42)}
.wwd .btab.alt.on .k{color:#C6CEDC}
.wwd .btab.alt.on .mk{background:var(--steel);border-color:var(--steel);box-shadow:0 0 0 5px rgba(138,147,166,.16)}
@media(max-width:900px){
  .wwd .sec.dark.bnd .bsel{grid-template-columns:1fr;gap:26px}
  .wwd .sec.dark.bnd .bsel .pin{margin-bottom:4px}
}
/* the band is now half the height, so the watermark is rescaled to suit */
.wwd .sec.dark.bnd-sel .wm{font-size:clamp(110px,15vw,220px);color:rgba(255,255,255,.03)}
.wwd .sec.dark.bnd-sel .wm b{color:rgba(72,226,226,.06)}
.wwd .sec.dark.bnd-sel{padding:clamp(52px,6vw,92px) 0}
/* keep the two columns visually level */
.wwd .sec.dark.bnd-sel .bsel{align-items:stretch}
.wwd .sec.dark.bnd-sel .bsel .dframe{height:100%;display:grid;align-content:center}
.wwd .sec.dark.bnd .bsel .stp .kick{margin-top:20px}

/* ============================================================
   GLOW BORDER - "Talk to our team"
   Vanilla port of the Originkit component. That component spun a conic
   gradient behind a masked frame with a rAF loop; the same result here
   needs no JS, because the button is a fixed size: a conic-gradient
   square large enough to cover the box at every rotation, spun by a CSS
   animation, with an inset ink fill punched over the middle so only the
   1px ring shows.

   The square is 200px against the button's 141px diagonal. The component
   notes why that margin matters: a square sized to exactly the diagonal
   puts its edge on the corners, and shaves them at the rotations where
   that edge runs closest.

   Stops follow the component's comet() maths at tailLength 60, single
   tail: glow 0, tail 61, base 122, base 157, tail 289, glow 360 - which
   also means both ends land on glowColor, so there is no hard step at the
   wrap. baseColor is the button's original border tone, so at rest it
   reads exactly as before.
   ============================================================ */
.nav-cta{position:relative;isolation:isolate;overflow:hidden;border-color:transparent}
.nav-cta::before{content:"";position:absolute;left:50%;top:50%;
width:200px;height:200px;margin:-100px 0 0 -100px;z-index:-2;
background:conic-gradient(from 0deg at 50% 50%,
  #48E2E2 0deg,
  rgba(72,226,226,.45) 61deg,
  rgba(255,255,255,.34) 122deg,
  rgba(255,255,255,.34) 157deg,
  rgba(72,226,226,.45) 289deg,
  #48E2E2 360deg);
animation:navGlowSpin 6s linear infinite;will-change:transform}
/* the fill that leaves only the ring showing */
.nav-cta::after{content:"";position:absolute;inset:1px;z-index:-1;background:var(--ink)}
.nav-cta:hover::before{animation-duration:1.5s}
.nav-cta:hover::after{background:var(--signal)}
.nav-cta:hover{background:transparent;border-color:transparent}
@keyframes navGlowSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .nav-cta::before{animation:none}
}

/* what-we-do heroes run without a breadcrumb: restore the air the crumb used to hold */
.wwd .hero.nocrumb{padding-top:clamp(48px,5vw,78px)}

/* mobile:begin  generated by tools/mobile -- edit tools/mobile/mobile.css */
/* Mobile refinements. Injected into every page by tools/mobile/apply.py.
   Edit this file and re-run; never edit the copy inside a page.

   Every selector below came from measuring all 54 English pages at 390px and
   320px with tools/mobile/audit.mjs, not from guesswork. Everything except the
   text-size-adjust line sits inside a max-width query, so desktop rendering is
   byte-identical.

   What the audit found, and what each part fixes:
     1. type as small as 9px on a phone            -> floored at 12px
     2. controls as small as 30px, the menu at 34  -> 44px minimum
     3. contact fields at 15px, which makes iOS
        zoom the page on focus, and 34px tall      -> 16px and 48px
     4. two headings whose text genuinely clipped  -> allowed to wrap
   The decorative bleed the audit also reported (.wm watermarks, .plane and
   .lay texture layers, the "atmosphere only" .field) is intentional and is
   left alone. */

/* iOS inflates body text after a rotate unless this is pinned. */
html{-webkit-text-size-adjust:100%}

/* ---- 0. no sideways drag, whatever the device --------------------------
   Measured at 320/360/390/414/428/540/768/900/1024/1121/1280/1440 in both
   languages, with the menu open and closed and with a real scrollbar, nothing
   in this export overflows. A phone can still differ from that: if the Google
   font fails to load the fallback metrics are wider, and a long unbroken
   string (a URL, an ISO reference) can push a column out.

   This makes that impossible rather than unlikely. It does not hide a layout
   bug from the tooling -- scrollWidth still reports the real content width, so
   audit.mjs keeps catching genuine overflow. */
@media (max-width:900px){
  html,body{overflow-x:hidden;max-width:100%}
  img,svg,video,iframe,canvas{max-width:100%;height:auto}
  table{max-width:100%}
  /* break a long unbroken token rather than let it set the column width */
  p,li,dd,dt,td,th,figcaption,blockquote,
  h1,h2,h3,h4,h5,h6,.lede,.sub,.small,.lead{overflow-wrap:anywhere}
}

@media (max-width:640px){

/* ---- 1. type floor ---------------------------------------------------
   The 9-11.5px micro-labels read fine on a desktop at arm's length and sit
   under the comfortable floor on a phone. Tracking is pulled in slightly on
   the uppercase ones so they still fit the rows they sit in at 12px. */
.lbl,.eyebrow,.slbl,.mono,.chip,.pill,.label,.out,.go,.cnt,.hint,.tl,
.zone,.pnum,.pz,.sub,.slot,.flag,.stg2,.loc,.tag,.k,.ph,.n,
.cvg-key,.cvg-hint,.ph__brief,.xlab,.lead-mark__t,.ctafoot,
.lvn,.mnext,.qreset,.jb,.ev,.num,
.fgrid h4,.foot__grid h4,#mob h5,
.brief b,.brief em,.hero-note b,.meta b,.note .slot,b .slot,
.srow i,.here i,.form label,.cvg-tab span,.cvg-n span,
.bhud span,.hud span,.k span,.cap .n,
.mleg .s,.mleg .l,.mleg .c,.st .hint,.btab .k,
#qdone,#qlv,
table.clock th,table.offers th,
.facts span b,.meta span b,.hero-note b,.lst .k span,.bhud span,
.qs2 .bs button,.bs button.y,.bs button.m,.cvg-n span{font-size:12px!important}
.qstick .hd span,.qp .hd span{font-size:12px!important}

.lbl,.eyebrow,.slbl,.chip,.label,.fgrid h4,.foot__grid h4,
.cvg-key,.xlab,.hero-note b,.mleg .s,.mleg .l,.mleg .c,
.slbl{letter-spacing:.11em!important}

/* the hero strip and the blast-radius legend are single rows of tracked
   uppercase; at 12px they no longer fit a 320px column, so they wrap */
/* the homepage hero is a flex row and the note strip, which is absolutely
   positioned on desktop, becomes a flex sibling on mobile. Without a full-width
   basis it sat beside the headline and ran off the right edge. */
.hero{flex-wrap:wrap}
.hero-note{flex:1 1 100%;width:100%;min-width:0}
.hero-note .w{row-gap:8px;flex-wrap:wrap}
/* a flex item defaults to min-width:auto, so these kept their full single-line
   width and pushed the row past the column even though the row wraps */
.hero-note b,.hero-note em{min-width:0;white-space:normal}
.hero-note em{margin-left:0}
/* the events filter pills sit in a div carrying an inline display:flex with
   no wrap, so the row can only be reached through the parent */
.cmp .band div:has(> .pill){flex-wrap:wrap;row-gap:8px}

/* the events filter row is the same shape */
.evbar,.evfilters,.sec .filters{flex-wrap:wrap;row-gap:10px}
.evbar>*,.evfilters>*,.sec .filters>*{min-width:0}
.mleg{flex-wrap:wrap;row-gap:8px}
.bstick{min-width:0;overflow-x:auto}

/* ---- 2. touch targets ------------------------------------------------
   44px is the smallest reliable target on both platforms. The menu button is
   the first thing a phone visitor touches and was 34x34. */
.burger{width:44px!important;height:44px!important}
.burger span{left:13px;right:13px}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:26px}
.burger.x span:nth-child(1),.burger.x span:nth-child(3){top:21px}

/* the wordmark keeps its drawn size; the link around it gets a full row */
.brand{display:inline-flex!important;align-items:center;min-height:44px}

/* controls that sit in normal flow: grow the box, leave the padding rhythm */
button.y,button.m,button.n,button.yes,button.no,button.ev,button.jb,
button.st,button.rng,button.btab,button.gbtn,button.qreset,button.mnext,
button.cvg-tab,.cvg-tab,.btn--sm,a.btn--sm,button.btn--sm{min-height:44px!important}

/* a standalone arrow link behaves as a button, so it gets a row too --
   but one sitting inside prose must stay inline or it breaks the sentence */
a.small{display:inline-flex;align-items:center;min-height:44px}
.rsh .qi button,.wwd .mark button,.wwd .bs button{min-height:44px!important}
p a.small,li a.small,span a.small{display:inline;min-height:0}

/* diagram nodes are placed by transform and must keep their drawn size, so
   the touch area is grown around them instead */
.wwd .nd::before{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;
transform:translate(-50%,-50%)}

/* ---- 3. form fields --------------------------------------------------
   Under 16px, iOS zooms the whole page when a field takes focus and does not
   zoom back out. The subscribe form already used 16px; the contact form did
   not. 48px is also a comfortable row to hit. */
input,select,textarea{font-size:16px!important}
.cmp .cform .cf,.cform .cf{height:48px!important;font-size:16px!important}
.cmp .cform .cf--area,.cform .cf--area{font-size:16px!important;height:auto!important}

/* ---- 4. headings that clipped ---------------------------------------
   Two cases where text was genuinely lost, not decoration bleeding out. */

/* "Orvix does two things." sets its lines nowrap. The longest needs 328px;
   a 360px phone gives the column 312px and a 320px phone gives 272px. */
.ox h2.two span{white-space:normal}

/* the eight-copy storage stack is a grid item, and a grid item defaults to
   min-width:auto, so its content set a track wider than the 272px column a
   320px phone gives it and pushed the whole page sideways. Letting the item
   shrink fixes the page; the dense stack itself then scrolls in its own box
   rather than being silently cut. */
.brwrap>*,.bpanel>*,.copies>*{min-width:0}
.copies,.bpanel{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

/* the engagement breadcrumb ran 11px past a 272px column at 320px */
.hero__copy .label,.hero__copy p.label{white-space:normal}

}

/* Narrow phones: the hero display sizes are set for a 390px column and the
   longest single words in them do not fit a 320px one. */
@media (max-width:380px){
.cmp .band.ink h1,.cmp .band.ink.hero-ink h1{font-size:38px;line-height:41px}
.ox h2.two .xline{font-size:1.35em}
}
/* mobile:end */