@font-face{font-family:"Clash Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/ClashGrotesk-Regular.woff2") format("woff2")}
@font-face{font-family:"Clash Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/ClashGrotesk-Medium.woff2") format("woff2")}
@font-face{font-family:"Clash Grotesk";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/ClashGrotesk-Semibold.woff2") format("woff2")}
/* Layout concept: light institutional page broken by three deep-navy photographic bands (hero, vision, contribute);
   the logo's own broken arcs, extracted from the mark, are the single animated motif. */
:root{
  --paper:#F3F6F9; --white:#FFFFFF; --line:#D9E2EA; --line-soft:#E6EDF2;
  --ink:#0F2340; --text:#3A4556; --muted:#5D6878;
  --blue:#185497; --sky:#01A5FC; --teal:#13B89F; --green:#14D184;
  --sky-ink:#0A82C8; --teal-ink:#0B8573;
  --navy:#00274E; --navy-2:#0B3A6B; --on-navy:#FFFFFF; --on-navy-soft:#C3D6EA;
  --grad:linear-gradient(115deg,#185497 0%,#01A5FC 32%,#13B89F 67%,#14D184 100%);
  --f:"Clash Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-hero:clamp(2.15rem,1.2rem + 2.9vw,3.25rem);
  --t-h2:clamp(2rem,1.3rem + 2.2vw,3.35rem);
  --t-h3:clamp(1.4rem,1.1rem + .9vw,1.9rem);
  --t-lead:clamp(1.05rem,1rem + .25vw,1.2rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  --header-h:104px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--f);font-size:1.0625rem;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;font-weight:400}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f);color:var(--ink);font-weight:600;letter-spacing:-.01em;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--sky);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1260px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.section{padding-block:clamp(72px,9vw,120px);position:relative}
.section-head{display:grid;gap:1.1rem;max-width:56rem}
.section-head h2{font-size:var(--t-h2);position:relative;padding-bottom:.42em}
/* title signature: a short gradient line with a travelling highlight */
.section-head h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:3px;background:linear-gradient(90deg,#185497,#01A5FC,#13B89F,#14D184);transform-origin:0 50%}
.section-head h2::before{content:"";position:absolute;left:0;bottom:-1px;width:14px;height:5px;border-radius:5px;background:#fff;box-shadow:0 0 10px 2px rgba(1,165,252,.8);opacity:0;animation:scan 6s var(--ease) 1.4s infinite}
@keyframes scan{0%{transform:translateX(0);opacity:0}6%{opacity:.95}30%{transform:translateX(42px);opacity:0}100%{transform:translateX(42px);opacity:0}}
/* on first reveal the title wipes in, then its line draws */
.section-head.pre h2{clip-path:inset(-20% 100% -30% -2%)}
.section-head.pre h2::after{transform:scaleX(0)}
.section-head.in h2{clip-path:inset(-20% -2% -30% -2%);transition:clip-path 1.1s cubic-bezier(.65,0,.25,1) .1s}
.section-head.in h2::after{transform:scaleX(1);transition:transform .9s var(--ease) .7s}
.section-head .intro{font-size:var(--t-lead);max-width:42rem}
.bg-paper{background:var(--paper)}

/* buttons */
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);opacity:0;pointer-events:none}
.btn:hover::after{animation:sheen .9s var(--ease)}
@keyframes sheen{from{left:-40%;opacity:1}to{left:120%;opacity:1}}
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:.7rem;padding:.95rem 1.5rem;border-radius:999px;font:500 1rem/1.2 var(--f);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .3s,border-color .3s,color .3s}
.btn .arr{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .arr{transform:translateX(4px)}
.btn-sky{background:var(--sky);color:var(--navy);font-weight:600}
.btn-sky:hover{background:#2BB5FF;box-shadow:0 14px 30px -14px rgba(1,165,252,.75)}
.btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-soft{background:#E7EEF5;color:var(--navy)}
.btn-soft:hover{background:#fff}

/* reveal (JS adds .pre only to elements starting below the fold) */
.pre{opacity:0;transform:translateY(24px)}
.in{opacity:1;transform:none;transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}

/* ---------- header ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(0)}
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--white);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-header.scrolled{border-bottom-color:var(--line-soft);box-shadow:0 6px 24px -18px rgba(15,35,64,.35)}
.nav-wrap{display:flex;align-items:center;gap:1.5rem;height:var(--header-h)}
.brand{display:block;flex:none;border-radius:8px}
.brand img{height:76px;width:auto;transition:height .35s var(--ease)}
.site-header.scrolled .brand img{height:66px}
.primary-nav{margin-left:auto}
.lang{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:40px;padding:0 1rem;border-radius:999px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:.9375rem;transition:border-color .3s,background .3s}
.lang:hover{border-color:var(--blue);background:var(--paper)}
.primary-nav ul{display:flex;gap:.6rem}
.primary-nav a{position:relative;display:block;padding:.5rem .7rem;text-decoration:none;font-size:.9688rem;color:var(--ink)}
.primary-nav a::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.2rem;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease)}
.primary-nav a:hover::after,.primary-nav a[aria-current="true"]::after{transform:scaleX(1)}
.menu-toggle{display:none;margin-left:auto;width:46px;height:46px;border-radius:999px;border:1.5px solid var(--line);background:var(--white);cursor:pointer;position:relative;color:var(--ink)}
.menu-toggle span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),opacity .2s}
.menu-toggle span:nth-child(1){top:16px}.menu-toggle span:nth-child(2){top:22px}.menu-toggle span:nth-child(3){top:28px}
.site-header.open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-header.open .menu-toggle span:nth-child(2){opacity:0}
.site-header.open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;background:#0A3A6C;color:#fff;overflow:clip;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,72,128,.55) 0%,rgba(4,36,74,.25) 45%,rgba(0,0,0,0) 70%);z-index:-1}
/* image bands: the photo drifts very slowly, follows scroll a little, and its light source breathes */
.media{position:absolute;inset:-7% 0;z-index:-2;pointer-events:none;will-change:transform}
.media-img{position:absolute;inset:0;background-image:var(--img);background-size:cover;background-repeat:no-repeat;background-position:var(--pos,center);animation:drift var(--dur,34s) ease-in-out infinite alternate;will-change:transform}
@keyframes drift{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(var(--dx,-1.2%),var(--dy,.8%),0)}}
.glow{position:absolute;left:var(--gx);top:var(--gy);width:var(--gs,420px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(150,228,255,.5),rgba(1,165,252,.16) 45%,rgba(1,165,252,0) 72%);mix-blend-mode:screen;animation:breathe 7s ease-in-out infinite;pointer-events:none}
.hero .media-img{--pos:right center}.hero .glow{--gx:74.5%;--gy:36%;--gs:min(520px,40vw)}
.vision .media-img{--pos:center 34%}.vision .glow{--gx:53%;--gy:34%;--gs:min(300px,24vw)}
.contribute .media-img{--pos:right top}.contribute .glow{--gx:84%;--gy:24%;--gs:min(460px,34vw)}
@keyframes breathe{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:.85;transform:scale(1.08)}}
.beam{position:absolute;left:53%;right:0;top:var(--by,34%);height:2px;translate:0 -50%;background:linear-gradient(90deg,transparent,rgba(170,235,255,.95),transparent) no-repeat;background-size:22% 100%;animation:beam 5.5s cubic-bezier(.45,0,.2,1) infinite;filter:blur(.4px);mix-blend-mode:screen;pointer-events:none}
@keyframes beam{0%{background-position:-30% 0;opacity:0}12%{opacity:1}80%{opacity:1}100%{background-position:130% 0;opacity:0}}
.hero-inner{min-height:min(760px,calc(100vh - var(--header-h)));display:grid;align-content:center;padding-block:clamp(56px,8vw,96px)}
.hero-copy{display:grid;gap:1.6rem;max-width:34rem}
.hero h1{color:#fff;font-size:var(--t-hero);line-height:1.22;letter-spacing:-.005em}
.hero h1 .l{display:block}
.hero h1 .c1{color:var(--sky)}.hero h1 .c2{color:var(--teal)}.hero h1 .c3{color:var(--green)}
.hero .lede{font-size:var(--t-lead);color:#fff;max-width:31rem;line-height:1.5}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.6rem}
@keyframes rise{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
.hero h1 .l,.hero .lede,.hero .actions{animation:rise .9s var(--ease) both}
.hero h1 .l:nth-child(2){animation-delay:.08s}.hero h1 .l:nth-child(3){animation-delay:.16s}.hero .lede{animation-delay:.24s}.hero .actions{animation-delay:.3s}

.supports{background:var(--paper);padding-block:28px 32px}
.supports p{color:var(--text);font-size:1.0625rem}
.supports ul{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:.6rem}
.supports li{display:flex;align-items:center;gap:.55rem;font-size:1.0625rem;color:var(--ink)}
.supports li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}

/* ---------- about ---------- */
.flow{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,.95fr) 72px minmax(0,1fr) 72px minmax(0,1fr);align-items:stretch}
.flow-col{display:grid;align-content:center;gap:1rem;padding:clamp(18px,2vw,26px);min-width:0}
.flow-col .lbl{font-size:1rem;color:var(--text)}
.flow-col.from{background:var(--paper);border-radius:18px;box-shadow:0 10px 30px -22px rgba(15,35,64,.4)}
.flow-col.from p{font-size:clamp(1.55rem,1.1rem + 1.3vw,2.1rem);line-height:1.15;color:var(--ink);font-weight:500}
.flow-col.into li{font-size:clamp(1.3rem,1.05rem + .7vw,1.65rem);color:var(--ink);font-weight:600;line-height:1.25;display:flex;align-items:center;gap:.7rem}
.flow-col.into li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.flow-col.for li{padding:.55rem 0;border-bottom:1px solid var(--line);color:var(--text)}
.flow-col.for li:last-child{border-bottom:0}
.flow-link{position:relative}
.flow-link svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow-link path{fill:none;stroke:url(#flowGrad);stroke-width:1.5;stroke-dasharray:2 6;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-16}}
.flow-note{background:var(--paper);padding-block:18px;margin-top:clamp(40px,5vw,64px)}
.flow-note p{display:flex;align-items:center;gap:1rem;color:var(--text)}
.flow-note svg{flex:none}

.vision{position:relative;background:var(--navy);color:#fff;padding-top:clamp(220px,26vw,330px);padding-bottom:clamp(48px,6vw,72px);overflow:clip;isolation:isolate}
.vm{display:grid;grid-template-columns:1fr 1fr;position:relative}
.vm::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.35));transform-origin:0 50%;transform:scaleX(var(--vm,1));transition:transform 1.6s var(--ease)}
.vm article{padding:clamp(28px,4vw,52px) clamp(0px,3vw,40px) clamp(8px,2vw,16px) 0;display:grid;gap:.9rem;align-content:start}
.vm article+article{border-left:1px solid rgba(255,255,255,.4);padding-left:clamp(20px,4vw,52px)}
.vm h3{color:#fff;font-size:var(--t-h3)}
.vm p{color:#E6EEF6;max-width:32rem;font-size:1.0625rem}

/* ---------- focus ---------- */
.focus-grid{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.stage{position:sticky;top:calc(var(--header-h) + 24px);height:min(72vh,600px);border-radius:16px;background:var(--white);border:1px solid var(--line-soft);overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage-ticks{position:absolute;left:24px;right:24px;bottom:22px;display:flex;gap:8px;z-index:1}
.stage-ticks span{flex:1;height:3px;border-radius:3px;background:var(--line-soft);overflow:hidden;position:relative}
.stage-ticks span::after{content:"";position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.stage-ticks span.on::after,.stage-ticks span.done::after{transform:scaleX(1)}
.stage-ticks span.done::after{opacity:.35}
.areas{display:grid}
.area{min-height:min(72vh,600px);display:grid;gap:1rem;align-content:center;border-top:1px solid var(--line);padding-block:clamp(24px,4vw,48px);opacity:.38;transition:opacity .6s var(--ease)}
.area:first-child{border-top:0}
.area.active{opacity:1}
.area-canvas{display:none;width:100%;aspect-ratio:16/10;border-radius:14px;background:var(--white);border:1px solid var(--line-soft)}
.area h3{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.4rem);line-height:1.08}
.area p{max-width:30rem;font-size:1.125rem}

/* ---------- research ---------- */
.research{background:radial-gradient(55% 70% at 88% 0%,rgba(19,184,159,.16),rgba(19,184,159,0) 62%),radial-gradient(50% 60% at 0% 100%,rgba(1,165,252,.14),rgba(1,165,252,0) 60%),linear-gradient(165deg,#021B3A 0%,#052C57 55%,#0A3A6C 100%);color:#D6E3F0;overflow:clip}
.research h2,.research h3{color:#fff}
.collections{margin-top:clamp(40px,5vw,64px);display:grid;gap:24px}
.collection{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);transition:border-color .5s var(--ease)}
.collection:hover{border-color:rgba(1,165,252,.45)}
.collection.flip{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.collection.flip .col-info{order:2}
.col-info{padding:clamp(24px,3.5vw,44px);display:grid;gap:1rem;align-content:center;background:rgba(255,255,255,.045)}
.col-info p{color:#CFDDEB}
.col-info h3{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.3rem)}
.col-view{position:relative;min-height:clamp(240px,26vw,340px);overflow:hidden;background:#021B3A}
.col-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:drift 30s ease-in-out infinite alternate;--dx:-1.5%;--dy:.6%}
.collection.flip .col-view img{--dx:1.5%;animation-duration:36s}
.col-view .pending{position:absolute;left:clamp(14px,2vw,22px);bottom:clamp(14px,2vw,22px);right:clamp(14px,2vw,22px);width:max-content;max-width:calc(100% - 28px);padding:.55rem 1rem;border-radius:999px;background:rgba(2,22,48,.62);border:1px solid rgba(255,255,255,.16);color:#E6EEF6;font-size:.9688rem;text-align:left}
.pending{display:flex;align-items:center;gap:.7rem;color:var(--text);text-align:center}
.pending .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);position:relative;flex:none}
.pending .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--teal);animation:ping 2.2s var(--ease) infinite}
@keyframes ping{from{transform:scale(.5);opacity:1}to{transform:scale(1.6);opacity:0}}

/* ---------- capacity ---------- */
.path{margin-top:clamp(40px,5vw,64px);position:relative}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px);position:relative}
.path .track{position:absolute;left:0;right:0;top:21px;height:2px;background:var(--line)}
.path .track::before{content:"";position:absolute;inset:0;right:25%;background:var(--grad);transform-origin:0 50%;transform:scaleX(var(--p,1));transition:transform 1.6s var(--ease)}
.path .track::after{content:"";position:absolute;left:75%;right:0;top:0;height:2px;background:repeating-linear-gradient(90deg,var(--teal) 0 6px,transparent 6px 12px);background-size:24px 2px;animation:march 1.2s linear infinite}
@keyframes march{to{background-position:24px 0}}
.path .runner{position:absolute;top:16px;left:0;width:12px;height:12px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 5px rgba(1,165,252,.2);animation:run 6s var(--ease) infinite}
@keyframes run{0%{left:0;opacity:0}8%{opacity:1}85%{opacity:1}100%{left:calc(100% - 12px);opacity:0}}
.step{position:relative;display:grid;gap:.8rem;align-content:start}
.step .node{width:44px;height:44px;border-radius:50%;background:var(--white);border:1.5px solid var(--line);display:grid;place-items:center;position:relative;z-index:1;transition:border-color .4s,transform .4s var(--ease)}
.step .node svg{width:20px;height:20px}
.step:hover .node{border-color:var(--blue);transform:scale(1.08)}
.step h3{font-size:1.0625rem;font-weight:600;line-height:1.35;max-width:15rem}
.step p{color:var(--text);max-width:15rem}
.step.future .node{border-style:dashed;border-color:var(--teal-ink);background:var(--paper)}
.step.in .node{animation:nodeIn .9s var(--ease) var(--d,0s) both}
@keyframes nodeIn{0%{box-shadow:0 0 0 0 rgba(1,165,252,.45)}100%{box-shadow:0 0 0 14px rgba(1,165,252,0)}}
.serve{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.serve > div{padding:clamp(22px,2.6vw,30px);border-radius:18px;background:var(--white);display:grid;gap:.6rem;align-content:start}
.serve .lbl{color:var(--text)}
.serve li{font-weight:500;color:var(--sky-ink);padding:.6rem 0;border-bottom:1px solid var(--line)}
.serve li:last-child{border-bottom:0}

/* ---------- partnerships ---------- */
.net{margin-top:clamp(40px,5vw,64px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,260px) minmax(0,1fr);grid-template-rows:auto repeat(3,minmax(68px,auto));column-gap:clamp(28px,5vw,72px);row-gap:12px;align-items:stretch}
.net > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.net .lbl{color:var(--text);align-self:end;padding:0 0 .35rem calc(1.15rem + 11px + .9rem);line-height:1.35}
.lbl-l{grid-column:1;grid-row:1}.lbl-r{grid-column:3;grid-row:1}
.node-item[data-side="l"]{grid-column:1}.node-item[data-side="r"]{grid-column:3}
.node-item.r1{grid-row:2}.node-item.r2{grid-row:3}.node-item.r3{grid-row:4}
.hub{grid-column:2;grid-row:2 / span 3;align-self:center}
.node-item{position:relative;z-index:1;min-width:0;display:flex;align-items:center;gap:.9rem;padding:.9rem 1.15rem;border-radius:14px;background:var(--paper);border:1px solid var(--line-soft);font-weight:500;color:var(--ink);line-height:1.35;text-align:left;transition:border-color .35s,transform .35s var(--ease),background .35s}
.node-item span{min-width:0}
.node-item:hover{border-color:var(--c);transform:translateY(-3px);background:var(--white)}
.node-item i{width:11px;height:11px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 20%,transparent);animation:dotBreathe 3.6s ease-in-out infinite}
@keyframes dotBreathe{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 6%,transparent)}}
.hub{position:relative;aspect-ratio:1/1;width:100%;z-index:1}
.hub canvas{position:absolute;inset:0;width:100%;height:100%}
.net-path{fill:none;stroke:url(#netGrad);stroke-width:1.4;opacity:.6}

/* ---------- contribute ---------- */
.contribute{position:relative;background:var(--navy-2);color:#fff;padding-block:clamp(72px,8vw,104px);overflow:clip;isolation:isolate}
.contribute h2{color:#fff;font-size:var(--t-h2)}
.contrib-lists{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);max-width:46rem}
.contrib-lists .lbl{color:var(--on-navy-soft);margin-bottom:.4rem}
.contrib-lists li{font-weight:500;padding:.65rem 0;border-bottom:1px solid rgba(195,214,234,.25);display:flex;align-items:baseline;gap:.75rem;transition:padding .35s var(--ease)}
.contrib-lists li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);flex:none;transform:translateY(-2px)}
.contrib-lists li:hover{padding-left:.35rem}
.contribute .actions{margin-top:clamp(36px,4vw,56px)}

/* ---------- contact ---------- */
.contact-grid{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);gap:clamp(28px,6vw,96px);align-items:start}
.email-block{display:grid;gap:.9rem;padding-top:1rem}
.lbl-sm{color:var(--text)}
.email{font-weight:600;font-size:clamp(1.6rem,1rem + 2.4vw,2.6rem);letter-spacing:-.01em;color:var(--ink);text-decoration:none;line-height:1.15;overflow-wrap:anywhere;background:var(--grad) no-repeat 0 100%/100% 3px;padding-bottom:.15em;transition:background-size .5s var(--ease),color .3s;width:max-content;max-width:100%}
.email:hover{background-size:100% 100%;color:#fff}
.copy{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .95rem;border-radius:999px;border:1px solid var(--line);background:var(--white);font:400 .9375rem var(--f);color:var(--ink);cursor:pointer;width:max-content;transition:border-color .3s}
.copy:hover{border-color:var(--blue)}
.copy.done{border-color:var(--teal-ink);color:var(--teal-ink)}
.info{border-top:1px solid var(--line)}
.info > div{display:grid;gap:.6rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.info .tel{font-weight:600;font-size:1.2rem;color:var(--ink);font-variant-numeric:tabular-nums}
.info .tel a{text-decoration:none;border-bottom:2px solid transparent;transition:border-color .3s}
.info .tel a:hover{border-bottom-color:var(--sky)}
.info address{font-style:normal;color:var(--ink);line-height:1.5}

/* ---------- footer ---------- */
.site-footer{background:var(--white);border-top:1px solid var(--line-soft);padding-block:clamp(36px,4vw,48px) 24px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.foot-logos{display:flex;align-items:center;gap:clamp(18px,2.5vw,32px);min-width:0;flex-wrap:wrap}
.foot-logos .brand img{height:72px;width:auto}
.foot-div{width:1px;height:56px;background:var(--line)}
.foot-logos .mbrsg{height:54px;width:auto;max-width:100%}
.foot-nav ul{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
.foot-nav a{text-decoration:none;color:var(--ink);font-size:1.0625rem}
.foot-nav a:hover{color:var(--blue)}
.foot-bottom{padding-top:18px;font-size:.8125rem;color:var(--muted)}


/* featured publication in the Knowledge Series card */
.col-view.pub{display:block;min-height:0}
.pub .pub-bg{opacity:.32}
.pub-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:clamp(20px,2.6vw,36px);align-items:center;padding:clamp(22px,3vw,40px);background:linear-gradient(90deg,rgba(2,22,48,.55),rgba(2,22,48,.15))}
.pub-cover{display:block;border-radius:6px;overflow:hidden;box-shadow:0 24px 50px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12);transform:perspective(900px) rotateY(-6deg);transform-origin:left center;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.col-view .pub-cover img{position:static;inset:auto;display:block;width:100%;height:auto;object-fit:initial;animation:none}
.pub-cover:hover,.pub-cover:focus-visible{transform:perspective(900px) rotateY(0) translateY(-4px);box-shadow:0 30px 60px -22px rgba(0,0,0,.8),0 0 0 1px rgba(1,165,252,.5)}
.pub-meta{display:grid;gap:.8rem;min-width:0;color:#D6E3F0}
.pub-eyebrow{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:500;font-size:.9375rem}
.pub-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);position:relative;flex:none}
.pub-eyebrow .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--teal);animation:ping 2.2s var(--ease) infinite}
.pub-series{font-size:.875rem;color:#9FB8D0}
.pub-series i,.pub-file i{font-style:normal;opacity:.6;margin-inline:.25rem}
.pub-title{margin:0;font-family:var(--f);font-weight:600;font-size:clamp(1.35rem,1.05rem + .9vw,1.8rem);line-height:1.12;color:#fff;letter-spacing:-.005em}
.pub-sub{color:#CFDDEB;line-height:1.45}
.pub-authors{font-size:1rem;line-height:1.5;color:#CFDDEB}
.pub-stats{margin:.5rem 0 .2rem;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.pub-stats div{border-top:1px solid rgba(255,255,255,.14);padding-top:.5rem;min-width:0}
.pub-stats dt{font-weight:600;font-size:1.2rem;color:#fff;font-variant-numeric:tabular-nums}
.pub-stats dd{margin:0;font-size:.8125rem;line-height:1.4;color:#9FB8D0}
.pub-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:.5rem}
.btn-sm{padding:.7rem 1.15rem;font-size:.9375rem}
.btn .arr.ne{display:inline-block}
.pub-file{font-size:.8125rem;color:#9FB8D0}
@media (max-width:560px){
  .pub-inner{grid-template-columns:1fr}
  .pub-cover{width:150px;transform:none}
}
@media (prefers-reduced-motion:reduce){.pub-cover,.pub-cover:hover{transform:none}}

/* ---------- responsive ---------- */
@media (max-width:960px){
  :root{--header-h:76px}
  .brand img,.site-header.scrolled .brand img{height:56px}
  .menu-toggle{display:block;margin-left:0}
  .lang{margin-left:auto;height:44px}
  .primary-nav{position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--line);margin:0;padding:8px clamp(16px,4vw,40px) 20px;display:none}
  .site-header.open .primary-nav{display:block}
  .primary-nav ul{flex-direction:column;gap:0}
  .primary-nav a{padding:1rem 0;font-size:1.4rem;font-weight:500;border-bottom:1px solid var(--line-soft)}
  .primary-nav a::after{left:0;right:auto;width:40px;bottom:.6rem}
  .hero .media-img{--pos:72% center}
  .hero .glow,.vision .glow,.vision .beam{display:none}
  .hero::before{background:linear-gradient(180deg,rgba(4,36,74,.2) 0%,rgba(4,36,74,.72) 55%,rgba(4,36,74,.9) 100%)}
  .hero-inner{min-height:0;padding-top:clamp(180px,46vw,260px)}
  .flow{grid-template-columns:1fr;gap:0}
  .flow-link{height:40px}
  .flow-link svg{display:none}
  .flow-link::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:repeating-linear-gradient(180deg,var(--sky) 0 3px,transparent 3px 8px)}
  .focus-grid{grid-template-columns:1fr;gap:0}
  .stage{display:none}
  .area{min-height:0;opacity:1;padding-block:32px}
  .area:first-child{border-top:1px solid var(--line)}
  .area-canvas{display:block}
  .collection,.collection.flip{grid-template-columns:1fr}
  .collection.flip .col-info{order:0}
  .net{grid-template-columns:1fr;grid-template-rows:none;row-gap:12px}
  .net .lbl,.net .node-item,.hub{grid-column:1!important;grid-row:auto!important}
  .lbl-l{order:1}.node-item[data-side="l"]{order:2}.hub{order:3}.lbl-r{order:4;margin-top:8px}.node-item[data-side="r"]{order:5}
  .net .lbl{padding-left:0}
  .net > svg{display:none}
  .hub{max-width:230px;justify-self:center;margin-block:8px}
  .hub::before,.hub::after{content:"";position:absolute;left:50%;width:2px;height:20px;background:repeating-linear-gradient(180deg,var(--sky) 0 3px,transparent 3px 7px)}
  .hub::before{top:-20px}.hub::after{bottom:-20px}
  .contact-grid{grid-template-columns:1fr}
  .contribute .media-img{--pos:70% top}
  .contribute .glow{--gx:92%;--gy:16%;--gs:260px}
}
@media (max-width:720px){
  .vm{grid-template-columns:1fr}
  .vm article{padding-right:0}
  .vm article+article{border-left:0;border-top:1px solid rgba(255,255,255,.4);padding-left:0}
  .vision{padding-top:clamp(170px,50vw,240px)}
  .vision .media{bottom:auto;height:360px}
  .vision .media-img{--pos:20% top;background-size:auto 340px}
  .steps{grid-template-columns:1fr;gap:24px}
  .path .track{left:21px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .path .track::before{right:0;bottom:25%;transform-origin:50% 0;transform:scaleY(var(--p,1))}
  .path .track::after{left:0;right:auto;top:75%;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--teal) 0 6px,transparent 6px 12px);animation:none}
  .path .runner{display:none}
  .step{grid-template-columns:44px 1fr;column-gap:16px}
  .step .node{grid-row:span 2}
  .serve,.contrib-lists{grid-template-columns:1fr}
  .contribute::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,58,107,.2),rgba(11,58,107,.75) 40%,rgba(11,58,107,.92));pointer-events:none}
  .contribute .wrap{position:relative}
}
@media (max-width:560px){
  .foot-div{display:none}
  .foot-logos{gap:18px}
  .foot-logos .brand img{height:60px}
  .foot-logos .mbrsg{height:auto;width:100%;max-width:340px}
}
@media (max-width:420px){
  .actions .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .path .runner{display:none}
  .media-img,.col-view img,.glow,.beam,.section-head h2::before,.node-item i{animation:none!important}
  .glow,.beam,.section-head h2::before{display:none}
  .media{transform:none!important}
}