/* Guardian Research v2 — dark theme for the home and institutions pages.
   Brand: ink #111418, paper #F2F3F1, royal blue #1633D6. Font: Geist (self-hosted, variable 100–900). */

@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/Geist.woff2") format("woff2")}

:root{
  --bg:#07090D; --bg-2:#0C1018; --ink:#111418; --paper:#F2F3F1; --paper-2:#C9CDD3; --mute:#8A93A3;
  --blue:#1633D6; --blue-hi:#5B78FF; --blue-soft:#9DB0FF; --line:rgba(157,176,255,.32); --line-2:rgba(242,243,241,.12);
  --sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,0,1);
  --gutter:clamp(16px,4.5vw,64px);
  --max:1240px;
}
*{box-sizing:border-box}
html{overflow-x:clip;color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--paper);font-family:var(--sans);font-size:1.0625rem;line-height:1.55;
  min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}
.skip{position:absolute;left:var(--gutter);top:-3rem;background:var(--paper);color:var(--ink);padding:.5rem .8rem;z-index:100;text-decoration:none}
.skip:focus{top:.6rem}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* diagonal light streaks (whole page) */
.streaks{position:fixed;inset:-20% -10%;z-index:0;pointer-events:none;opacity:.55;
  background:
    repeating-linear-gradient(115deg, transparent 0 90px, rgba(91,120,255,.045) 90px 120px, transparent 120px 230px),
    repeating-linear-gradient(115deg, transparent 0 170px, rgba(242,243,241,.025) 170px 182px, transparent 182px 320px);
  animation:drift 40s linear infinite}
@keyframes drift{to{transform:translate3d(-230px,0,0)}}
body>*:not(.streaks):not(.gr-pop):not(.skip):not(.top){position:relative;z-index:1}

/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:76px;transition:height .4s var(--ease)}
.top.scrolled{background:rgba(7,9,13,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.top.scrolled .wrap{height:62px}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;font-weight:700;font-size:1.25rem;letter-spacing:-.02em;white-space:nowrap}
.brand img{width:30px;height:30px;border-radius:6px;background:var(--paper)}
.brand span{font-weight:300}
.top nav{display:flex;align-items:center;gap:.5rem}
.navlink{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--paper-2);padding:.55rem .7rem;position:relative}
.navlink::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.25rem;height:2px;background:var(--blue-hi);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.navlink:hover{color:var(--paper)}
.navlink:hover::after,.navlink[aria-current]::after{transform:scaleX(1)}
@media (max-width:640px){.navlink.hide-sm{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:52px;padding:.9rem 1.5rem;
  font:600 .82rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;
  position:relative;overflow:hidden;isolation:isolate;transition:color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-solid{background:var(--blue);color:#fff;box-shadow:0 10px 40px -12px rgba(22,51,214,.8)}
.btn-solid::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn-solid:hover::before{transform:translateX(120%)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 16px 48px -12px rgba(22,51,214,.95)}
.btn-line{color:var(--paper);border-color:var(--line)}
.btn-line::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--ease)}
.btn-line:hover{color:var(--ink);border-color:var(--paper)}
.btn-line:hover::before{transform:scaleY(1)}
.btn-sm{min-height:40px;padding:.6rem 1rem;font-size:.7rem}
.btns{display:flex;flex-wrap:wrap;gap:.8rem}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px 0 72px;overflow:hidden}
.hero-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 42%,rgba(22,51,214,.42),transparent 70%),radial-gradient(30% 30% at 50% 45%,rgba(91,120,255,.25),transparent 70%);
  animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}
#globe{position:absolute;left:50%;top:44%;width:min(92vw,820px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:.95}
.hero-floor{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(to bottom,transparent,var(--bg) 85%);pointer-events:none}
.hero-inner{position:relative;display:grid;justify-items:center;gap:1.6rem;width:100%;max-width:70rem}
.kicker{font-size:.72rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--blue-soft);display:inline-flex;align-items:center;gap:.8rem}
.kicker::before,.kicker::after{content:"";width:28px;height:1px;background:var(--line)}
.hero h1{max-width:15ch;font-size:clamp(2.5rem,6.6vw,5.9rem);line-height:.98;letter-spacing:-.045em;font-weight:200;text-wrap:balance}
.w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(8px);animation:rise 1.1s var(--ease) forwards;animation-delay:calc(var(--i) * 90ms + 150ms)}
h1 .b{font-weight:800;letter-spacing:-.05em}
h1 .m{font-weight:400}
h1 .accent{background:linear-gradient(100deg,var(--paper) 0%,var(--blue-soft) 45%,var(--blue-hi) 70%,var(--paper) 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:rise 1.1s var(--ease) forwards,sheen 7s ease-in-out 1.6s infinite}
@keyframes rise{to{opacity:1;transform:none;filter:none}}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:500;line-height:1.5;color:var(--paper);max-width:46ch;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.fade{opacity:0;transform:translateY(14px);animation:rise 1s var(--ease) forwards;animation-delay:var(--d,1s)}
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:22px;height:36px;border:1px solid var(--line);border-radius:12px}
.scrollcue::after{content:"";position:absolute;left:50%;top:7px;width:2px;height:7px;margin-left:-1px;background:var(--blue-soft);border-radius:2px;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* bracket pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.6vw,2.2rem);padding-block:clamp(2.5rem,8vh,5rem)}
.pillar{position:relative;text-align:center;padding:2.4rem 1.2rem;border-block:1px solid var(--line);transition:background .5s var(--ease)}
.pillar::before,.pillar::after{content:"";position:absolute;top:-14px;bottom:-14px;width:14px;border:1px solid var(--line);transition:transform .5s var(--ease),border-color .5s var(--ease)}
.pillar::before{left:0;border-right:0}
.pillar::after{right:0;border-left:0}
.pillar:hover{background:rgba(22,51,214,.08)}
.pillar:hover::before{transform:translateX(-8px);border-color:var(--blue-hi)}
.pillar:hover::after{transform:translateX(8px);border-color:var(--blue-hi)}
.pillar b{display:block;font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:700;letter-spacing:.32em;color:var(--blue-hi);text-indent:.32em}
.pillar span{display:block;margin-top:.35rem;font-size:.82rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--paper)}
@media (max-width:760px){.pillars{grid-template-columns:1fr;gap:2.2rem}}

/* marquee */
.band{border-block:1px solid var(--line-2);overflow:hidden;padding-block:1.1rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.band-track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.band:hover .band-track{animation-play-state:paused}
.band-track span{display:inline-flex;align-items:center;gap:1.6rem;padding-right:1.6rem;font-size:clamp(1.1rem,2vw,1.6rem);font-weight:200;letter-spacing:-.01em;white-space:nowrap;color:var(--paper-2)}
.band-track span::after{content:"";width:7px;height:7px;background:var(--blue-hi);transform:rotate(45deg)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* section head */
.sec{padding-block:clamp(4rem,12vh,7.5rem)}
.sec-head{display:grid;gap:.9rem;margin-bottom:clamp(2rem,5vh,3rem)}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1;letter-spacing:-.04em;font-weight:200}
.sec-head h2 strong{font-weight:800}
.label{font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--blue-soft)}

/* doors */
.doors{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1rem,2vw,1.5rem)}
.door{--mx:50%;--my:50%;position:relative;display:grid;align-content:space-between;gap:2.4rem;min-height:340px;padding:clamp(1.6rem,3vw,2.6rem);
  border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));text-decoration:none;overflow:hidden;isolation:isolate;
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.door::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(22,51,214,.38),transparent 60%)}
a.door:hover{border-color:var(--line);transform:translateY(-4px)}
a.door:hover::before{opacity:1}
.door-num{font-size:.72rem;font-weight:600;letter-spacing:.3em;color:var(--mute)}
.door h3{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:.98;letter-spacing:-.045em;font-weight:200}
.door h3 strong{font-weight:800}
.door p{color:var(--paper-2);max-width:40ch;margin-top:.9rem}
.door-cta{display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-soft)}
a.door:hover .door-cta .arr{transform:translateX(5px)}
.door-cta .arr{transition:transform .35s var(--ease)}
.door.soon{background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px)}
.door.soon h3{color:var(--mute)}
.chip{display:inline-flex;align-items:center;gap:.55rem;justify-self:start;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:.5rem .8rem;border:1px solid var(--line);color:var(--paper-2)}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--blue-hi);box-shadow:0 0 0 0 rgba(91,120,255,.7);animation:ping 2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(91,120,255,.7)}100%{box-shadow:0 0 0 10px rgba(91,120,255,0)}}
@media (max-width:860px){.doors{grid-template-columns:1fr}.door{min-height:260px}}

/* channels strip */
.channels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem)}
.channel{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;padding:1.6rem 1.8rem;border:1px solid var(--line-2);text-decoration:none;transition:background .4s var(--ease),border-color .4s var(--ease)}
.channel:hover{background:rgba(22,51,214,.12);border-color:var(--line)}
.channel strong{display:block;font-size:1.6rem;font-weight:700;letter-spacing:-.03em}
.channel small{display:block;color:var(--paper-2);font-size:.95rem;margin-top:.2rem}
.channel .round{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);transition:background .4s var(--ease),transform .4s var(--ease)}
.channel:hover .round{background:var(--blue);border-color:var(--blue);transform:rotate(-45deg)}
@media (max-width:760px){.channels{grid-template-columns:1fr}}

/* footer */
.foot{border-top:1px solid var(--line-2);padding-block:2.4rem 2.8rem;margin-top:auto}
.foot .wrap{display:grid;gap:1.4rem}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.2rem}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.foot-links a{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-decoration:none}
.foot-links a:hover{color:var(--paper)}
.note{font-size:.82rem;color:var(--mute);max-width:84ch;line-height:1.55}
.copy{font-size:.78rem;color:var(--mute)}

/* reveal on scroll (only when JS is running) */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--rd,0ms)}
.js [data-reveal].in{opacity:1;transform:none}

/* individuals pop-up (works without JS via :target) */
.gr-pop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--gutter);visibility:hidden;opacity:0;transition:opacity .35s var(--ease),visibility 0s linear .35s}
.gr-pop:target,.gr-pop.open{visibility:visible;opacity:1;transition:opacity .35s var(--ease)}
.gr-scrim{position:absolute;inset:0;background:rgba(3,5,9,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.gr-card{position:relative;width:min(100%,40rem);max-height:calc(100svh - 2 * var(--gutter));overflow:auto;padding:clamp(1.5rem,4vw,2.6rem);display:grid;gap:1.15rem;
  background:linear-gradient(180deg,#0E1320,#090C12);border:1px solid var(--line);box-shadow:0 40px 120px -30px rgba(22,51,214,.55);
  transform:translateY(16px) scale(.98);transition:transform .45s var(--ease)}
.gr-pop:target .gr-card,.gr-pop.open .gr-card{transform:none}
.gr-card h2{font-size:clamp(1.9rem,4.4vw,2.7rem);line-height:1;letter-spacing:-.04em;font-weight:200;padding-right:2.5rem}
.gr-card h2 strong{font-weight:800}
.gr-x{position:absolute;top:.9rem;right:.9rem;width:2.5rem;height:2.5rem;display:grid;place-items:center;font-size:1.5rem;line-height:1;text-decoration:none;color:var(--paper);border:1px solid var(--line-2);transition:border-color .3s,transform .3s var(--ease)}
.gr-x:hover{border-color:var(--paper);transform:rotate(90deg)}
.opt{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.35rem 1.2rem;padding:1.25rem 1.35rem;text-decoration:none;border:1px solid var(--line);transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.opt strong{font-size:1.5rem;font-weight:700;letter-spacing:-.03em}
.opt small{grid-column:1;color:var(--paper-2);font-size:.95rem}
.opt .go{grid-column:2;grid-row:1 / span 2;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.opt:hover{transform:translateY(-2px);border-color:var(--paper)}
.opt-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.opt-primary small{color:rgba(255,255,255,.82)}
.opt-primary:hover{background:#1E3FF0;border-color:#1E3FF0}
.fine{font-size:.82rem;color:var(--mute);line-height:1.5}
@media (max-width:520px){.opt{grid-template-columns:1fr}.opt .go{grid-column:1;grid-row:auto}}
body.lock{overflow:hidden}

/* coming soon page */
.cs{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px 0 80px;overflow:hidden}
.cs .hero-inner{gap:1.5rem}
.cs h1{font-size:clamp(3rem,9vw,7.5rem);line-height:.95;letter-spacing:-.05em;font-weight:200}
.cs h1 strong{font-weight:800}
.cs p{color:var(--paper-2);max-width:44ch}

/* stagger helpers (CSP forbids inline style attributes) */
.i0{--i:0}.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}.i6{--i:6}
.d0{--d:.1s}.d1{--d:1.05s}.d2{--d:1.25s}
.rd1{--rd:120ms}.rd2{--rd:240ms}
.pt0{padding-top:0}

/* small screens */
.hero .btns,.cs .btns{justify-content:center}
@media (max-width:520px){
  .top .wrap{height:64px}
  .brand{font-size:1.05rem;gap:.5rem}
  .brand img{width:26px;height:26px}
  .top .brand span{display:none}
  .top nav{gap:.35rem}
  .top .btn-sm{min-height:36px;padding:.5rem .7rem;font-size:.64rem;letter-spacing:.1em}
  .hero .btns .btn,.cs .btns .btn{width:100%}
  .foot .btns{width:100%}
  .foot .btns .btn{flex:1}
}