: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}