/* ==================================================================
   OEAC Network — site design system
   Brand colours taken from the live oeacnetwork.com site:
     orange  #f58225   blue  #4f6692
   ================================================================== */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0a0604;
  --bg-2:#150d07;
  --bg-3:#1e1309;
  --fg:#fff5e6;
  /* Secondary text. These carry a lot of 11–12px UI type — chips, dates,
     place lines, stat labels, the build stamp — and at .62/.42 those sat
     near 4.0:1 on the darker panels, i.e. under AA for the size they are
     used at. The two levels now sit close together on purpose: the visual
     hierarchy on those labels comes from size, case and letter-spacing,
     not from making one of them too faint to read. */
  --muted:rgba(255,245,230,.72);
  --muted-2:rgba(255,245,230,.60);

  /* brand orange */
  --orange:#f58225;
  --orange-dark:#e06e15;
  --orange-deep:#b8540c;
  --orange-glow:#ff9d4d;
  --orange-light:#ffab4d;

  /* brand blue (secondary accent from the live site) */
  --blue:#4f6692;
  --blue-light:#7d93bd;
  --blue-deep:#38496b;

  --ok:#4cc38a;
  --warn:#f5b325;
  --bad:#e2564a;

  --glass:rgba(245,130,37,.055);
  --glass-2:rgba(245,130,37,.09);
  --border:rgba(245,130,37,.2);
  --border-2:rgba(245,130,37,.34);

  --grad:linear-gradient(135deg,var(--orange),var(--orange-dark));
  --grad-soft:linear-gradient(180deg,rgba(245,130,37,.09),rgba(0,0,0,0));
  --shadow:0 20px 60px rgba(245,130,37,.16);
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px;
  --nav-h:74px;
  --ff:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Channel tokens.
     These used to be declared *only* inside html[data-theme="light"], so in
     the dark theme `--ink-rgb`, `--fg-rgb` and `--shadow-rgb` were undefined
     and every rule written as rgba(var(--...-rgb),a) produced an invalid
     value that the browser discarded whole. That silently removed the scrim
     behind the donate modal, the command-palette panel shadow and a dozen
     hairline tints — the dark theme looked flatter than it was designed to.
     Declaring them here fixes all of those at once. */
  --ink-rgb:10,6,4;             /* scrims: near-black on the dark page */
  --fg-rgb:255,245,230;         /* text/hairlines on those scrims */
  --shadow-rgb:0,0,0;           /* drop shadows are black on dark */
}

/* scroll-padding keeps the fixed navbar from covering a heading when a
   visitor lands on a deep link such as /#events */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px);-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--fg);font-family:var(--ff);
  line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
/* NOTE: there is deliberately no `cursor:none` anywhere in this stylesheet.
   The site must always show the native pointer. */

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--orange);color:var(--bg)}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--orange),var(--orange-deep));border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--orange-glow)}

/* ============================ layout ============================= */
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 6%}
.wrap-narrow{max-width:940px}
.section{padding:96px 0}
.section-tight{padding:56px 0}
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.g-4{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ============================ loader ============================= */
#loader{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .36s ease,visibility .36s;
  /* FAILSAFE: this is a pure-CSS animation, so it runs on the compositor and cannot be
     blocked by a slow, failed or disabled site.js. Without it, a full-screen z-index:9999
     overlay would sit over the whole site forever if JavaScript never ran, and the site
     would look completely broken. JS normally hides the loader in well under a second;
     this only takes over when JS does not run at all. */
  animation:loader-failsafe .4s ease 2.2s forwards}
#loader.hidden{opacity:0;visibility:hidden}
@keyframes loader-failsafe{to{opacity:0;visibility:hidden}}
/* no-JS visitors should not see a pointless loading screen at all */
@media(prefers-reduced-motion:reduce){
  #loader{animation-delay:1.2s}
}
.loader-logo{font-size:clamp(2.4rem,7vw,3.6rem);font-weight:900;letter-spacing:-2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-light),var(--orange-dark));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;animation:shine 2s linear infinite}
.loader-bar{width:clamp(180px,42vw,280px);height:3px;background:rgba(245,130,37,.15);
  border-radius:3px;overflow:hidden;position:relative}
.loader-bar::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--orange),var(--orange-light));
  transform:translateX(-100%);animation:load 1.6s ease-in-out infinite}
@keyframes load{to{transform:translateX(100%)}}
@keyframes shine{to{background-position:200% center}}
.loader-text{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:4px;
  color:var(--muted);text-transform:uppercase;text-align:center;padding:0 20px}
.loader-percent{font-family:var(--ff-mono);font-size:.82rem;color:var(--orange-light);letter-spacing:2px}

/* The bespoke dot+ring cursor that used to live here has been removed. It
   hid the real pointer with `body.has-custom-cursor{cursor:none}` and then
   drew a JS-driven pair of circles in its place; when the follow loop was
   interrupted the page had *no* usable pointer at all. The site now uses the
   operating system cursor everywhere. */

/* ======================= scroll progress ======================== */
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--orange),var(--orange-light),var(--orange-dark));
  z-index:1200;box-shadow:0 0 18px var(--orange)}

/* ========================= backgrounds ========================== */
#bg-canvas{position:fixed;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none}
.noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.grid-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(245,130,37,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(245,130,37,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 20%,transparent 75%);
  mask-image:radial-gradient(circle at 50% 30%,#000 20%,transparent 75%)}

/* ============================ glass ============================= */
.glass{background:var(--glass);backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--border);border-radius:var(--r)}

/* ============================ navbar ============================ */
.navbar{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:94%;max-width:1300px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:13px 22px;z-index:900;transition:all .35s}
.navbar.scrolled{background:rgba(var(--ink-rgb),.9);border-color:var(--border-2);padding:9px 22px;
  box-shadow:0 12px 40px rgba(var(--shadow-rgb),.5)}
.logo{display:flex;align-items:center;gap:11px;font-size:1.3rem;font-weight:900;letter-spacing:-.5px;flex-shrink:0}
.logo-mark{width:30px;height:30px;border-radius:9px;background:var(--grad);position:relative;
  box-shadow:0 0 22px rgba(245,130,37,.6);flex-shrink:0}
.logo-mark::before{content:'';position:absolute;inset:6px;border-radius:4px;background:var(--bg)}
.logo-mark::after{content:'';position:absolute;inset:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange-light),var(--orange));animation:pulse 2s ease-in-out infinite}
.logo b{color:var(--orange)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.75)}}

.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links > li{position:relative}
.nav-links > li > a{display:flex;align-items:center;gap:5px;padding:9px 13px;border-radius:9px;
  font-size:.87rem;font-weight:500;opacity:.82;transition:.25s;white-space:nowrap}
.nav-links > li > a:hover,.nav-links > li > a.active{opacity:1;color:var(--orange-light);background:var(--glass)}
.nav-links .caret{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.6}

.drop{position:absolute;top:calc(100% + 10px);left:0;min-width:236px;padding:9px;
  background:rgba(16,10,6,.98);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 24px 60px rgba(var(--shadow-rgb),.6);backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.24s}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:9px 13px;border-radius:9px;font-size:.86rem;color:var(--muted);transition:.2s}
.drop a:hover{background:var(--glass-2);color:var(--orange-light);transform:translateX(3px)}
.drop .sep{height:1px;background:var(--border);margin:7px 4px}

.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-toggle{display:none;width:42px;height:42px;border-radius:11px;background:var(--glass);
  border:1px solid var(--border);align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
.nav-toggle span{width:19px;height:1.8px;background:var(--fg);border-radius:2px;transition:.3s}
.nav-toggle.open span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

@media(max-width:1100px){
  .nav-links{position:fixed;top:0;right:-100%;width:min(320px,86vw);height:100vh;
    flex-direction:column;align-items:stretch;gap:2px;padding:96px 20px 40px;
    background:rgba(var(--ink-rgb),.985);border-left:1px solid var(--border);overflow-y:auto;
    transition:right .38s cubic-bezier(.4,0,.2,1);z-index:950}
  .nav-links.open{right:0}
  .nav-links > li > a{padding:13px 15px;font-size:.95rem;justify-content:space-between}
  .drop{position:static;opacity:1;visibility:visible;transform:none;display:none;
    background:rgba(var(--shadow-rgb),.3);border:0;box-shadow:none;margin:2px 0 8px 12px;min-width:0;padding:4px}
  .has-drop.open .drop{display:block}
  .nav-toggle{display:flex}
}

/* ============================ buttons =========================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:12px;border:0;font-size:.9rem;font-weight:600;
  cursor:pointer;transition:.28s;position:relative;overflow:hidden;text-align:center;line-height:1.3}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 34px rgba(245,130,37,.34)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 46px rgba(245,130,37,.52)}
.btn-ghost{background:var(--glass);color:var(--fg);border:1px solid var(--border);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:var(--glass-2);border-color:var(--border-2);transform:translateY(-2px)}
.btn-blue{background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;
  box-shadow:0 10px 30px rgba(79,102,146,.4)}
.btn-blue:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(79,102,146,.55)}
.btn-sm{padding:9px 16px;font-size:.82rem;border-radius:10px}
.btn-lg{padding:16px 34px;font-size:.98rem;border-radius:14px}
.btn-block{width:100%}
.btn[disabled],.btn:disabled{opacity:.5;pointer-events:none}
.btn-danger{background:linear-gradient(135deg,#e2564a,#a8382f);color:#fff}
.btn-ok{background:linear-gradient(135deg,#4cc38a,#2f8f61);color:var(--ok-deep)}
.magnetic{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .28s}

.btn-outline{background:transparent;border:1px solid var(--border-2);color:var(--orange-light)}
.btn-outline:hover{background:var(--glass-2)}

/* ============================ eyebrow =========================== */
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 15px;border-radius:100px;
  background:rgba(245,130,37,.1);border:1px solid var(--border);font-size:.78rem;
  font-weight:500;color:var(--orange-light);width:fit-content}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 10px var(--orange);animation:pulse 1.6s infinite}
.sec-label{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:4px;color:var(--orange-light);
  text-transform:uppercase;margin-bottom:14px}
.sec-title{font-size:clamp(1.85rem,3.7vw,3rem);font-weight:900;letter-spacing:-1.6px;line-height:1.12;max-width:900px}
.sec-title em{font-style:normal;background:linear-gradient(90deg,var(--orange),var(--orange-light));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head{text-align:center;padding:88px 6% 46px}
.sec-head .sec-title{margin:0 auto}
.sec-head p.lead{color:var(--muted);max-width:640px;margin:16px auto 0;font-size:1rem}
.lead{color:var(--muted)}

/* ============================= hero ============================= */
.hero{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:44px;
  padding:calc(var(--nav-h) + 76px) 6% 72px;position:relative}
.hero-title{font-size:clamp(2.3rem,5.2vw,4.6rem);line-height:1.03;font-weight:900;letter-spacing:-2.6px}
.grad-text{background:linear-gradient(90deg,var(--orange),var(--orange-light),var(--orange-dark),var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:300% auto;animation:shine 5s linear infinite}
.hero-sub{margin:24px 0 32px;font-size:1.03rem;color:var(--muted);max-width:540px}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap}
/* Three stats that MUST stay on one line. As a wrapping flex row the third
   figure dropped onto its own line whenever the hero column was narrow, which
   is what made the hero look unfinished. An explicit 3-track grid plus
   nowrap keeps them aligned, and the labels wrap under their own number
   instead of pushing the row apart. */
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;margin-top:54px;max-width:640px}
.hero-stats .stat{min-width:0}
.hero-stats .stat h3{font-size:clamp(1.45rem,2.5vw,2rem);font-weight:900;letter-spacing:-1px;
  white-space:nowrap;
  background:linear-gradient(180deg,#fff,var(--orange-light));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats .stat p{color:var(--muted-2);font-size:.68rem;margin-top:2px;letter-spacing:1.6px;text-transform:uppercase}
@media(max-width:980px){
  .hero-stats{margin-left:auto;margin-right:auto}
  .hero-stats .stat h3{font-size:clamp(1.2rem,4.6vw,1.6rem)}
}
@media(max-width:420px){
  .hero-stats .stat h3{font-size:1.05rem}
  .hero-stats .stat p{font-size:.6rem;letter-spacing:1px}
}
.hero-3d{width:100%;height:min(600px,74vh);position:relative}
.hero-3d canvas{display:block;width:100%;height:100%}
.hero-3d::before{content:'';position:absolute;inset:12%;z-index:-1;
  background:radial-gradient(circle,rgba(245,130,37,.24),transparent 62%);
  filter:blur(48px);animation:pulse 4.5s ease-in-out infinite}
.hero-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:3px;color:var(--muted-2);text-transform:uppercase}
@media(max-width:980px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:calc(var(--nav-h) + 60px)}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-buttons{justify-content:center}
  .eyebrow{margin:0 auto}
  .hero-3d{height:min(420px,52vh)}
  .hero-scroll{display:none}
}

/* ============================= cards ============================ */
.card{background:var(--grad-soft);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:30px 26px;position:relative;overflow:hidden;transition:.36s}
.card::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-light));
  transform:scaleX(0);transform-origin:left;transition:transform .38s}
.card:hover::before{transform:scaleX(1)}
.card:hover{border-color:var(--border-2);transform:translateY(-5px);box-shadow:var(--shadow)}
.card .ico{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(245,130,37,.22),rgba(255,171,77,.08));
  border:1px solid var(--border);margin-bottom:16px;color:var(--orange-light)}
.card .ico svg{width:24px;height:24px}
.card h3{font-size:1.12rem;font-weight:700;margin-bottom:10px;letter-spacing:-.3px}
.card p{color:var(--muted);font-size:.9rem}

/* image card */
.icard{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;transition:.36s;display:flex;flex-direction:column;position:relative}
.icard:hover{transform:translateY(-6px);border-color:var(--border-2);box-shadow:var(--shadow)}
.icard-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--bg-3)}
.icard-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.icard:hover .icard-media img{transform:scale(1.07)}
.icard-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(var(--ink-rgb),.88))}
.icard-media .tag{position:absolute;top:13px;left:13px;z-index:2}
.icard-body{padding:22px;display:flex;flex-direction:column;gap:9px;flex:1}
.icard-body h3{font-size:1.06rem;font-weight:700;letter-spacing:-.3px}
.icard-body p{color:var(--muted);font-size:.88rem;flex:1}
.icard-body .more{color:var(--orange-light);font-size:.84rem;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;margin-top:4px}
.icard-body .more svg{width:15px;height:15px;transition:transform .3s}
.icard:hover .icard-body .more svg{transform:translateX(5px)}

.tag{display:inline-flex;align-items:center;padding:5px 11px;border-radius:100px;
  font-size:.68rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  background:rgba(var(--ink-rgb),.72);border:1px solid var(--border-2);color:var(--orange-light);
  backdrop-filter:blur(10px)}
.tag-blue{background:rgba(79,102,146,.28);border-color:rgba(125,147,189,.5);color:#cfdcf2}

/* ========================= impact counters ====================== */
.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.impact-grid{grid-template-columns:repeat(2,1fr)}}
.impact-card{text-align:center;padding:36px 20px;background:var(--grad-soft);
  border:1px solid var(--border);border-radius:var(--r-lg);transition:.36s;position:relative;overflow:hidden}
.impact-card::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:56%;height:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent);
  opacity:0;transition:opacity .36s}
.impact-card:hover::before{opacity:1}
.impact-card:hover{transform:translateY(-7px);border-color:var(--border-2);box-shadow:var(--shadow)}
.impact-num{font-size:clamp(2rem,4vw,2.9rem);font-weight:900;letter-spacing:-1px;
  background:linear-gradient(180deg,#fff,var(--orange-light));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.impact-lbl{font-size:.74rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:2px;margin-top:5px}
.impact-ico{width:42px;height:42px;margin:0 auto 14px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;background:var(--glass-2);border:1px solid var(--border);
  color:var(--orange-light)}
.impact-ico svg{width:21px;height:21px}

/* ============================ split ============================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split.rev .split-media{order:2}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}.split.rev .split-media{order:0}}
.split-media{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);
  aspect-ratio:4/3;background:var(--bg-3)}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,transparent 45%,rgba(var(--ink-rgb),.72))}
.split-media .badge-float{position:absolute;bottom:18px;left:18px;right:18px;z-index:2;
  display:flex;gap:14px;flex-wrap:wrap}
.float-stat{flex:1;min-width:110px;padding:13px 15px;border-radius:14px;
  background:rgba(var(--ink-rgb),.78);border:1px solid var(--border-2);backdrop-filter:blur(14px)}
.float-stat b{display:block;font-size:1.3rem;font-weight:900;color:var(--orange-light);letter-spacing:-.5px}
.float-stat span{font-size:.68rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:1.4px}

.feature-list{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:26px}
.feature-list li{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--muted)}
.feature-list svg{width:19px;height:19px;color:var(--orange);flex-shrink:0;margin-top:3px}

/* ============================ showcase ========================== */
.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1024px){.showcase{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.showcase{grid-template-columns:1fr}}
.model-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;transition:.36s}
.model-card:hover{border-color:var(--border-2);transform:translateY(-5px);box-shadow:var(--shadow)}
.model-canvas{height:212px;position:relative;background:
  radial-gradient(circle at 50% 62%,rgba(245,130,37,.14),transparent 68%)}
.model-canvas canvas{display:block;width:100%;height:100%}
.model-body{padding:19px 21px 22px;border-top:1px solid var(--border)}
.model-body h4{font-size:.99rem;font-weight:700;margin-bottom:5px}
.model-body p{color:var(--muted);font-size:.84rem}
.model-hint{position:absolute;bottom:9px;right:12px;font-family:var(--ff-mono);font-size:.6rem;
  letter-spacing:1.4px;color:var(--muted-2);text-transform:uppercase;pointer-events:none}

/* ============================== map ============================= */
.map-section{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
@media(max-width:900px){.map-section{grid-template-columns:1fr;gap:32px}}
.map-canvas-wrap{width:100%;height:min(520px,64vh);position:relative;border-radius:var(--r-xl);
  overflow:hidden;border:1px solid var(--border);
  background:radial-gradient(circle at 50% 50%,rgba(245,130,37,.1),transparent 72%)}
.map-canvas-wrap canvas{display:block;width:100%;height:100%}
.province-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
@media(max-width:520px){.province-list{grid-template-columns:1fr}}
.province{display:flex;align-items:center;gap:10px;padding:11px 15px;font-size:.87rem;
  background:var(--glass);border:1px solid var(--border);border-radius:11px;transition:.26s}
.province:hover{background:var(--glass-2);border-color:var(--border-2);transform:translateX(4px)}
.province .pin{width:7px;height:7px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 9px var(--orange);flex-shrink:0}
.province .count{margin-left:auto;font-family:var(--ff-mono);font-size:.68rem;color:var(--muted-2)}

/* ============================ timeline ========================== */
.timeline{position:relative;padding:24px 0;max-width:1040px;margin:0 auto}
.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--orange),var(--orange-light),var(--orange),transparent)}
.tl-item{position:relative;width:50%;padding:16px 42px;opacity:1;transition:.75s ease}
.js .tl-item{opacity:0}
.tl-item.visible{opacity:1;transform:none!important}
.tl-item:nth-child(odd){left:0;text-align:right;transform:translateX(-36px)}
.tl-item:nth-child(even){left:50%;transform:translateX(36px)}
/* without JS, skip the reveal offsets entirely so the timeline reads correctly */
html:not(.js) .tl-item,
html:not(.js) .tl-item:nth-child(odd),
html:not(.js) .tl-item:nth-child(even){opacity:1;transform:none}
.tl-item::after{content:'';position:absolute;top:36px;width:15px;height:15px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 18px var(--orange);border:3px solid var(--bg)}
.tl-item:nth-child(odd)::after{right:-7.5px}
.tl-item:nth-child(even)::after{left:-7.5px}
.tl-year{font-family:var(--ff-mono);font-size:.95rem;color:var(--orange-light);letter-spacing:2px;margin-bottom:8px}
.tl-card{padding:22px;background:var(--glass);border:1px solid var(--border);border-radius:var(--r);
  backdrop-filter:blur(18px);text-align:left}
.tl-card h4{font-size:1.04rem;margin-bottom:7px}
.tl-card p{color:var(--muted);font-size:.87rem}
@media(max-width:820px){
  .timeline::before{left:16px}
  .tl-item,.tl-item:nth-child(odd),.tl-item:nth-child(even){width:100%;left:0;text-align:left;
    padding-left:52px;padding-right:0;transform:translateY(22px)}
  .tl-item::after,.tl-item:nth-child(odd)::after,.tl-item:nth-child(even)::after{left:9px;right:auto}
}

/* ============================ gallery =========================== */
.filter-bar{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:34px}
.filter-btn{padding:8px 17px;border-radius:100px;background:var(--glass);border:1px solid var(--border);
  color:var(--muted);font-size:.8rem;font-weight:600;cursor:pointer;transition:.26s}
.filter-btn:hover{color:var(--fg);border-color:var(--border-2)}
.filter-btn.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 22px rgba(245,130,37,.35)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gallery-grid{grid-template-columns:1fr}}
.g-item{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);
  aspect-ratio:4/3;cursor:pointer;background:var(--bg-3)}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.g-item:hover img{transform:scale(1.08)}
.g-item figcaption{position:absolute;inset:auto 0 0 0;padding:18px 16px 15px;
  background:linear-gradient(180deg,transparent,rgba(var(--ink-rgb),.94));transform:translateY(6px);
  transition:.35s;opacity:.94}
.g-item:hover figcaption{transform:translateY(0);opacity:1}
.g-item figcaption h4{font-size:.94rem;font-weight:700;margin-bottom:3px}
.g-item figcaption p{font-size:.78rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.g-item.hide{display:none}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:5000;background:rgba(var(--ink-rgb),.94);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;padding:5vh 5vw;
  opacity:0;visibility:hidden;transition:.32s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:74vh;border-radius:var(--r);border:1px solid var(--border)}
.lightbox .lb-cap{position:absolute;bottom:3.4vh;left:0;right:0;text-align:center;padding:0 6vw}
.lightbox .lb-cap h4{font-size:1.06rem;margin-bottom:4px}
.lightbox .lb-cap p{color:var(--muted);font-size:.86rem}
.lb-close{position:absolute;top:20px;right:22px;width:42px;height:42px;border-radius:50%;
  background:var(--glass);border:1px solid var(--border);color:var(--fg);font-size:1.1rem;cursor:pointer}
.lb-close:hover{background:var(--orange)}

/* ============================ quotes ============================ */
.quote-card{padding:30px 26px;background:var(--grad-soft);border:1px solid var(--border);
  border-radius:var(--r-lg);display:flex;flex-direction:column;gap:18px;transition:.36s;position:relative}
.quote-card:hover{border-color:var(--border-2);transform:translateY(-5px);box-shadow:var(--shadow)}
.quote-card .mark{font-size:3rem;line-height:.6;color:var(--orange);opacity:.5;font-weight:900}
.quote-card blockquote{font-size:.95rem;color:var(--fg);opacity:.9;flex:1}
.quote-who{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--border)}
.avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.85rem;flex-shrink:0;color:var(--bg-3);
  background:linear-gradient(135deg,var(--orange-light),var(--orange))}
.avatar.blue{background:linear-gradient(135deg,var(--blue-light),var(--blue));color:var(--bg-3)}
.avatar.lg{width:74px;height:74px;font-size:1.4rem}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.quote-who b{display:block;font-size:.9rem}
.quote-who span{font-size:.78rem;color:var(--muted-2)}

/* ============================ advisors ========================== */
.advisor-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:24px;display:flex;flex-direction:column;gap:14px;transition:.36s;position:relative}
.advisor-card:hover{border-color:var(--border-2);transform:translateY(-5px);box-shadow:var(--shadow)}
.advisor-top{display:flex;gap:14px;align-items:center}
.advisor-top h3{font-size:1.02rem;font-weight:700}
.advisor-top .uni{font-size:.78rem;color:var(--muted);margin-top:2px}
.advisor-meta{display:flex;flex-direction:column;gap:7px;font-size:.82rem;color:var(--muted)}
.advisor-meta .row{display:flex;gap:8px;align-items:flex-start}
.advisor-meta .row b{color:var(--orange-light);font-weight:600;flex-shrink:0;min-width:78px;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.8px}
.advisor-actions{display:flex;gap:9px;margin-top:auto;padding-top:6px}
.verified{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;
  color:var(--ok);letter-spacing:.6px;text-transform:uppercase}
.verified svg{width:13px;height:13px}

/* ========================== universities ======================== */
.uni-group{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--glass)}
.uni-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:19px 22px;
  cursor:pointer;transition:.24s;width:100%;background:none;border:0;text-align:left}
.uni-head:hover{background:var(--glass-2)}
.uni-head h3{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:11px}
.uni-count{font-family:var(--ff-mono);font-size:.72rem;color:var(--orange-light);
  padding:4px 11px;border-radius:100px;background:rgba(245,130,37,.12);border:1px solid var(--border)}
.uni-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
.uni-group.open .uni-body{max-height:640px}
.uni-body ul{list-style:none;padding:4px 22px 20px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:680px){.uni-body ul{grid-template-columns:1fr}}
.uni-body li{font-size:.85rem;color:var(--muted);padding-left:17px;position:relative}
.uni-body li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;
  background:var(--orange);opacity:.75}
.chev{width:9px;height:9px;border-right:1.7px solid var(--muted);border-bottom:1.7px solid var(--muted);
  transform:rotate(45deg);transition:.3s;flex-shrink:0}
.uni-group.open .chev{transform:rotate(-135deg)}

/* ============================ steps ============================= */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{padding:28px 24px;background:var(--grad-soft);border:1px solid var(--border);
  border-radius:var(--r-lg);position:relative;transition:.36s}
.step:hover{border-color:var(--border-2);transform:translateY(-5px)}
.step-num{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1rem;background:var(--grad);color:#fff;margin-bottom:15px;
  box-shadow:0 8px 22px rgba(245,130,37,.35)}
.step h4{font-size:1rem;margin-bottom:7px}
.step p{color:var(--muted);font-size:.87rem}

/* ============================= cta ============================== */
.cta-box{max-width:960px;margin:0 auto;padding:72px 40px;border-radius:var(--r-xl);text-align:center;
  background:linear-gradient(135deg,rgba(245,130,37,.12),rgba(184,84,12,.05));
  border:1px solid var(--border-2);position:relative;overflow:hidden;backdrop-filter:blur(18px)}
.cta-box::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;z-index:-1;
  background:conic-gradient(from 0deg,transparent,rgba(245,130,37,.22),transparent 30%);
  animation:rot 9s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.cta-box h2{font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:900;letter-spacing:-1.4px;margin-bottom:16px}
.cta-box p{color:var(--muted);max-width:620px;margin:0 auto 30px;font-size:1.02rem}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============================= forms ============================ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:680px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.72rem;letter-spacing:1.3px;text-transform:uppercase;color:var(--orange-light);font-weight:600}
.field .hint{font-size:.74rem;color:var(--muted-2)}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],
input[type=time],input[type=number],input[type=url],input[type=search],select,textarea{
  width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--border);
  background:rgba(var(--shadow-rgb),.34);font-size:.92rem;outline:none;transition:.24s;font-family:inherit}
textarea{resize:vertical;min-height:110px;line-height:1.6}
input::placeholder,textarea::placeholder{color:rgba(var(--fg-rgb),.28)}
input:focus,select:focus,textarea:focus{border-color:var(--orange);background:rgba(var(--shadow-rgb),.5);
  box-shadow:0 0 0 3px rgba(245,130,37,.14)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffab4d' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
select option{background:var(--bg-2);color:var(--fg)}
.checkline{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--muted)}
.checkline input{width:17px;height:17px;accent-color:var(--orange);margin-top:2px;flex-shrink:0}
.form-note{font-size:.8rem;color:var(--muted-2)}

.panel{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px}
.panel-head{margin-bottom:22px}
.panel-head h3{font-size:1.1rem;font-weight:700;margin-bottom:5px}
.panel-head p{color:var(--muted);font-size:.87rem}

.alert{border-radius:12px;padding:14px 17px;margin-bottom:18px;font-size:.88rem;display:flex;gap:11px;
  align-items:flex-start;border:1px solid}
.alert svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.alert-ok{background:rgba(76,195,138,.11);border-color:rgba(76,195,138,.4);color:#a8e9c4}
.alert-bad{background:rgba(226,86,74,.11);border-color:rgba(226,86,74,.4);color:#ffb3ad}
.alert-warn{background:rgba(245,179,37,.1);border-color:rgba(245,179,37,.4);color:#ffdf9e}
.alert-info{background:rgba(79,102,146,.16);border-color:rgba(125,147,189,.42);color:#cfdcf2}

.pill{display:inline-flex;align-items:center;padding:3.5px 11px;border-radius:100px;
  font-size:.7rem;font-weight:700;letter-spacing:.5px;border:1px solid}
.pill-ok{background:rgba(76,195,138,.14);border-color:rgba(76,195,138,.42);color:#8ee0b6}
.pill-warn{background:rgba(245,179,37,.14);border-color:rgba(245,179,37,.42);color:#ffd98a}
.pill-bad{background:rgba(226,86,74,.14);border-color:rgba(226,86,74,.42);color:#ffa79e}
.pill-muted{background:rgba(var(--fg-rgb),.07);border-color:rgba(var(--fg-rgb),.2);color:var(--muted)}

/* ============================= footer =========================== */
footer{border-top:1px solid var(--border);padding:66px 6% 34px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;max-width:1280px;margin:0 auto}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-brand p{color:var(--muted);font-size:.89rem;margin-top:15px;max-width:330px}
.foot-brand .socials{display:flex;gap:9px;margin-top:19px}
.socials a{width:37px;height:37px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--glass);border:1px solid var(--border);color:var(--muted);transition:.26s}
.socials a:hover{background:var(--grad);border-color:transparent;color:#fff;transform:translateY(-3px)}
.socials svg{width:17px;height:17px}
.foot-col h4{font-size:.76rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:17px;color:var(--orange-light)}
.foot-col a{display:block;color:var(--muted);font-size:.87rem;margin-bottom:10px;transition:.24s}
.foot-col a:hover{color:var(--orange-light);transform:translateX(4px)}
.foot-contact{display:flex;flex-direction:column;gap:11px;font-size:.86rem;color:var(--muted)}
.foot-contact .row{display:flex;gap:9px;align-items:flex-start}
.foot-contact svg{width:15px;height:15px;color:var(--orange);flex-shrink:0;margin-top:4px}
.foot-bottom{max-width:1280px;margin:34px auto 0;padding-top:24px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  color:var(--muted-2);font-size:.82rem}
.foot-values{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:1.4px;color:var(--orange-light)}
/* Build stamp — see includes/config.php for why this is on purpose. */
.foot-build{text-align:center;padding:0 6% 22px;font-family:var(--ff-mono);
  font-size:.66rem;letter-spacing:1.6px;color:var(--muted-2);
  text-transform:uppercase}

/* ---- partner / department marks ---------------------------------- */
.foot-marks{max-width:1280px;margin:30px auto 0;padding:20px 24px;
  border-top:1px solid var(--border);display:flex;align-items:center;
  gap:30px;flex-wrap:wrap}
.foot-marks-label{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted-2)}
.foot-mark{display:flex;align-items:center;gap:13px}
/* A white plate, not a transparent drop: both marks are supplied as
   white-background artwork, and on a dark footer that would show as a
   grey rectangle behind the logo. */
.foot-mark-plate{display:grid;place-items:center;background:#fff;
  border-radius:12px;padding:9px 12px;width:84px;height:66px;flex:none;
  box-shadow:0 2px 10px rgba(var(--shadow-rgb),.35)}
.foot-mark-plate img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block}
.foot-mark-cap{display:flex;flex-direction:column;line-height:1.3}
.foot-mark-cap b{font-size:.86rem;color:var(--fg)}
.foot-mark-cap span{font-size:.74rem;color:var(--muted)}
@media(max-width:620px){
  .foot-marks{gap:16px 22px;padding:18px 20px}
  .foot-mark-plate{width:70px;height:56px;padding:7px 9px}
}

/* ==================== photo journal band (homepage) =================
   Seven fixed tiles. The named grid areas are why the data block in
   content.data.php insists on exactly seven entries — a mismatch would
   leave a hole rather than reflow.
   ================================================================== */
.pband{display:grid;gap:12px;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:170px 170px 170px;
  grid-template-areas:
    "a a a b b c"
    "a a a b b c"
    "d d e f g g"}
.pb-tile{position:relative;display:block;overflow:hidden;border-radius:16px;
  border:1px solid var(--border);background:var(--bg-2);text-decoration:none}
.pb-tile img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
/* The caption sits on a scrim rather than relying on the photograph being
   dark where the text lands, which is not something we control. */
.pb-tile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,4,2,.90) 0%,rgba(6,4,2,.52) 34%,rgba(6,4,2,0) 66%)}
.pb-tile:hover img,.pb-tile:focus-visible img{transform:scale(1.055)}
.pb-tile:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.pb-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px;
  display:flex;flex-direction:column;gap:2px;pointer-events:none}
.pb-cap b{color:#fff;font-size:.9rem;font-weight:800;letter-spacing:-.2px;line-height:1.25;
  text-shadow:0 1px 12px rgba(0,0,0,.75)}
.pb-cap span{color:rgba(255,255,255,.84);font-size:.73rem;line-height:1.3;
  text-shadow:0 1px 10px rgba(0,0,0,.75)}
@media(max-width:900px){
  .pband{grid-template-columns:1fr 1fr;
    grid-template-rows:210px 150px 150px 150px;
    grid-template-areas:"a a" "c b" "d e" "f g"}
}
@media(max-width:620px){
  .pband{gap:9px;grid-template-rows:180px 126px 126px 132px}
  .pb-cap{padding:10px 12px}
  .pb-cap b{font-size:.8rem}
  .pb-cap span{font-size:.66rem}
}
@media(prefers-reduced-motion:reduce){
  .pb-tile img{transition:none}
  .pb-tile:hover img,.pb-tile:focus-visible img{transform:none}
}

/* ================= field-record strip (programme pages) ============
   Multi-column rather than a fixed-ratio grid: a strip like this mixes
   portrait and landscape frames, and forcing one aspect ratio crops the
   subject out of half of them.
   ================================================================== */
.pstrip{columns:3;column-gap:14px}
.ps-tile{break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 14px;border:1px solid var(--border);border-radius:14px;
  overflow:hidden;background:var(--glass)}
.ps-tile img{width:100%;height:auto;display:block}
.ps-tile figcaption{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px;
  border-top:1px solid var(--border)}
.ps-tile figcaption b{font-size:.86rem;color:var(--fg);line-height:1.32;font-weight:700}
.ps-tile figcaption span{font-size:.74rem;color:var(--muted);line-height:1.35}
@media(max-width:900px){.pstrip{columns:2}}
@media(max-width:560px){.pstrip{columns:1}}

/* two-up pairing for narrative photographs
   (About → partners, Community Services → food programme)

   A pair is a grid, not a `.pstrip`. The strip is `columns:3`, so giving it
   only two tiles leaves the third column empty and the block reads as a
   layout accident. Here the two frames are locked to one ratio and cropped to
   fill, which is what makes a pair look deliberate whether the source
   photographs are both landscape, both portrait, or one of each. */
.photo-pair,.partner-pair{display:grid;gap:16px;grid-template-columns:1fr 1fr;
  align-items:start}
.photo-pair .ps-tile,.partner-pair .ps-tile{margin:0}
.photo-pair .ps-tile img,.partner-pair .ps-tile img{aspect-ratio:4/3;object-fit:cover}
@media(max-width:760px){
  .photo-pair,.partner-pair{grid-template-columns:1fr;gap:14px}
}

/* ============================= modal ============================ */
.modal-overlay{position:fixed;inset:0;z-index:4000;background:rgba(var(--shadow-rgb),.86);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:22px;
  opacity:0;visibility:hidden;transition:.34s}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{background:linear-gradient(180deg,var(--bg-2),var(--bg));border:1px solid var(--border-2);
  border-radius:var(--r-xl);padding:40px;max-width:520px;width:100%;position:relative;
  transform:scale(.93);transition:.34s cubic-bezier(.2,.8,.2,1);max-height:90vh;overflow-y:auto}
.modal-overlay.open .modal{transform:scale(1)}
.modal-close{position:absolute;top:17px;right:17px;width:34px;height:34px;border-radius:50%;
  background:var(--glass);border:1px solid var(--border);color:var(--fg);font-size:1.05rem;cursor:pointer;transition:.24s}
.modal-close:hover{background:var(--orange)}
.modal h3{font-size:1.45rem;font-weight:800;margin-bottom:10px;letter-spacing:-.6px}
.modal > p{color:var(--muted);margin-bottom:24px;font-size:.92rem}
.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:22px}
.amount-btn{padding:15px 10px;border:1px solid var(--border);background:var(--glass);color:var(--fg);
  border-radius:12px;font-weight:700;font-size:.93rem;cursor:pointer;transition:.26s}
.amount-btn:hover,.amount-btn.selected{background:var(--grad);border-color:transparent;
  transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,130,37,.4)}

/* ============================ chatbot =========================== */
.chat-fab{position:fixed;right:22px;bottom:22px;z-index:3000;width:60px;height:60px;border-radius:50%;
  border:0;cursor:pointer;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 36px rgba(245,130,37,.5);transition:.3s}
.chat-fab:hover{transform:scale(1.08) translateY(-2px)}
.chat-fab svg{width:26px;height:26px}
.chat-fab .badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;border-radius:10px;
  background:var(--blue);color:#fff;font-size:.68rem;font-weight:700;display:flex;align-items:center;
  justify-content:center;padding:0 5px;border:2px solid var(--bg)}
.chat-fab.hide{transform:scale(0);pointer-events:none}

.chat-panel{position:fixed;right:22px;bottom:22px;z-index:3100;width:min(392px,calc(100vw - 32px));
  height:min(620px,calc(100vh - 44px));display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--bg-2),var(--bg));border:1px solid var(--border-2);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:0 28px 70px rgba(var(--shadow-rgb),.66);
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);
  transition:.32s cubic-bezier(.2,.8,.2,1)}
.chat-panel.open{opacity:1;visibility:visible;transform:none}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;
  background:linear-gradient(135deg,rgba(245,130,37,.18),rgba(79,102,146,.14));
  border-bottom:1px solid var(--border)}
.chat-head .who{flex:1}
.chat-head b{display:block;font-size:.95rem}
.chat-head span{font-size:.74rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.chat-head span::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 8px var(--ok)}
.chat-head button{width:32px;height:32px;border-radius:9px;background:rgba(var(--shadow-rgb),.3);
  border:1px solid var(--border);color:var(--fg);cursor:pointer;transition:.22s}
.chat-head button:hover{background:var(--orange)}
.chat-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:86%;padding:11px 15px;border-radius:14px;font-size:.88rem;line-height:1.6;word-wrap:break-word}
.msg.bot{background:var(--glass-2);border:1px solid var(--border);border-bottom-left-radius:5px;align-self:flex-start}
.msg.user{background:var(--grad);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.msg a{color:var(--orange-light);text-decoration:underline}
.msg.user a{color:#fff}
.msg ul{margin:7px 0 0 17px}
.msg li{margin-bottom:4px}
.msg .ts{display:block;font-size:.66rem;opacity:.5;margin-top:5px}
.msg.typing{align-self:flex-start;background:var(--glass-2);border:1px solid var(--border);
  padding:14px 18px;display:flex;gap:5px}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--orange-light);opacity:.5;
  animation:blink 1.3s infinite}
.msg.typing i:nth-child(2){animation-delay:.18s}
.msg.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat-chips{display:flex;gap:7px;flex-wrap:wrap;padding:0 18px 12px}
.chip{padding:7px 13px;border-radius:100px;background:var(--glass);border:1px solid var(--border);
  color:var(--muted);font-size:.78rem;cursor:pointer;transition:.22s}
.chip:hover{background:var(--glass-2);color:var(--orange-light);border-color:var(--border-2)}
.chat-foot{display:flex;gap:9px;padding:14px 16px;border-top:1px solid var(--border);background:rgba(var(--shadow-rgb),.28)}
.chat-foot input{flex:1;padding:11px 14px;border-radius:11px;border:1px solid var(--border);
  background:rgba(var(--shadow-rgb),.4);outline:none;font-size:.88rem}
.chat-foot input:focus{border-color:var(--orange)}
.chat-foot button{width:44px;height:44px;border-radius:11px;border:0;background:var(--grad);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.24s;flex-shrink:0}
.chat-foot button:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(245,130,37,.45)}
.chat-foot button svg{width:18px;height:18px}

/* ============================ reveal ============================ */
/* Scroll reveals are progressive enhancement: content is visible by default and only
   hidden once the inline <head> script confirms JS is running (html.js). Without JS the
   page is fully readable instead of being a screen of invisible blocks. */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(34px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.2,.8,.2,1)}
.js .reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal,.tl-item{opacity:1!important;transform:none!important;transition:none}
  html{scroll-behavior:auto}
}

/* ============================ helpers =========================== */
.mt-0{margin-top:0}.mt-1{margin-top:12px}.mt-2{margin-top:22px}.mt-3{margin-top:34px}.mt-4{margin-top:48px}
.mb-1{margin-bottom:12px}.mb-2{margin-bottom:22px}.mb-3{margin-bottom:34px}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.84rem}
.mono{font-family:var(--ff-mono)}
.flex{display:flex}.between{justify-content:space-between}.items-center{align-items:center}
.gap-1{gap:10px}.gap-2{gap:18px}
.relative{position:relative}
.nowrap{white-space:nowrap}
.hidden{display:none!important}
.skip-link{position:absolute;left:-9999px;top:0;z-index:10001;padding:13px 20px;background:var(--orange);
  color:#fff;border-radius:0 0 10px 0;font-weight:600}
.skip-link:focus{left:0}

/* =========================== page hero ===========================
   A compact title band shared by every interior page.

   The old version reserved `nav + 74px` of top padding and then dropped a
   raw `icon('chevron-right')` into the breadcrumb. An SVG with a viewBox
   but no width/height is a replaced element that defaults to the full
   width of its container, so in the full-width flex breadcrumb that little
   chevron was laid out ~950px tall. Every page therefore opened with a
   mostly-empty dark band containing one enormous arrow.

   `icon()` now emits width/height and `.breadcrumb svg` pins the size as
   well, so the header can no longer be blown out from either side. The
   band below is deliberately dense: breadcrumb, eyebrow, title, lead and
   an onward-links panel, so there is nothing left to look empty.
   ================================================================= */
.page-hero{position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + 44px) 6% 46px;text-align:center;
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(120% 160% at 50% -35%, rgba(245,130,37,.15), transparent 62%),
    linear-gradient(180deg, rgba(var(--ink-rgb),.5), transparent 80%)}
.ph-inner{position:relative;z-index:2;max-width:1160px;margin:0 auto}

/* decorative rings + glyph — gives the band depth without adding copy */
.ph-deco{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.ph-ring{position:absolute;left:50%;top:50%;border-radius:50%;
  transform:translate(-50%,-50%);border:1px solid rgba(245,130,37,.14)}
.ph-ring-a{width:min(130vw,980px);aspect-ratio:1}
.ph-ring-b{width:min(84vw,620px);aspect-ratio:1;border-color:rgba(79,102,146,.24)}
.ph-glyph{position:absolute;right:2.5%;top:50%;width:150px;height:150px;
  transform:translateY(-50%);color:var(--orange);opacity:.075}
.ph-glyph svg{width:100%;height:100%}

.ph-grid{display:grid;gap:30px;align-items:center}
.ph-main{min-width:0}

.page-hero h1{font-size:clamp(1.9rem,4.2vw,3.2rem);font-weight:900;letter-spacing:-1.6px;
  line-height:1.07;max-width:880px;margin:0 auto}
.page-hero p{color:var(--muted);max-width:680px;margin:16px auto 0;font-size:1.02rem}
.page-hero .sec-label{margin-bottom:12px}

/* breadcrumb ------------------------------------------------------ */
.breadcrumb{display:flex;gap:8px;align-items:center;justify-content:center;
  flex-wrap:wrap;font-size:.78rem;color:var(--muted-2);margin-bottom:16px;
  font-family:var(--ff-mono);letter-spacing:1px}
.breadcrumb a:hover{color:var(--orange-light)}
.breadcrumb svg{width:13px;height:13px;flex:0 0 auto;opacity:.55}
.crumb-sep{display:flex;flex:0 0 auto;color:var(--muted-2);opacity:.7}

/* onward links panel ---------------------------------------------- */
.ph-side{padding:16px 16px 14px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--glass);backdrop-filter:blur(10px);text-align:left}
.ph-side-title{display:block;margin-bottom:10px;font-family:var(--ff-mono);
  font-size:.66rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted-2)}
.ph-side-links{display:flex;flex-direction:column;gap:2px}
.ph-link{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 10px;border-radius:9px;font-size:.86rem;color:var(--fg);
  text-decoration:none;transition:background .18s,color .18s}
.ph-link i{display:flex;opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s}
.ph-link:hover{background:rgba(245,130,37,.10);color:var(--orange-light)}
.ph-link:hover i{opacity:1;transform:none}
.ph-link.is-here{color:var(--orange-light);font-weight:700}
.ph-link.is-here i{opacity:1;transform:none}

/* variants -------------------------------------------------------- */
.ph-left,.page-hero.ph-with-side{text-align:left}
.ph-left .breadcrumb,.page-hero.ph-with-side .breadcrumb{justify-content:flex-start}
.ph-left h1,.page-hero.ph-with-side h1,
.ph-left p,.page-hero.ph-with-side p{margin-left:0;margin-right:0}
.page-hero.ph-left .ph-inner{max-width:1160px}
.ph-narrow .ph-inner{max-width:820px}
.ph-article{padding-bottom:34px}
.ph-article h1{font-size:clamp(1.7rem,3.6vw,2.7rem)}
.ph-404 h1{font-size:clamp(3rem,9vw,5.4rem)}
.ph-404 .ph-glyph{opacity:.14}

@media(min-width:1024px){
  .page-hero.ph-with-side .ph-grid{grid-template-columns:minmax(0,1fr) 300px}
  /* the onward-links panel already gives the right-hand side its interest,
     and the glyph landed behind the eyebrow text when it was pushed inward */
  .page-hero.ph-with-side .ph-glyph{display:none}
}
@media(max-width:1023px){
  .ph-glyph{width:120px;height:120px;right:-34px;opacity:.06}
}

/* ========================= stat strip =========================== */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1100px;margin:0 auto}
@media(max-width:820px){.stat-strip{grid-template-columns:repeat(2,1fr)}}
.stat-strip .item{text-align:center;padding:22px 14px;background:var(--glass);
  border:1px solid var(--border);border-radius:var(--r)}
.stat-strip b{display:block;font-size:1.7rem;font-weight:900;color:var(--orange-light);letter-spacing:-1px}
.stat-strip span{font-size:.72rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:1.6px}

/* ==================================================================
   LIGHT THEME
   ------------------------------------------------------------------
   Same brand orange (#f58225) and blue (#4f6692) as the live site.
   Only the surfaces, text and scrims invert — a warm paper palette so
   the site still reads as Afghan rather than as a generic SaaS white.
   ================================================================== */
html[data-theme="light"]{
  color-scheme:light;

  --bg:#fdf7f0;
  --bg-2:#f7ece0;
  --bg-3:#efe0ce;

  --fg:#2a1a0b;
  /* Secondary text levels, re-measured for cream rather than inherited from
     the dark theme. At .70/.58 these sat around 4.0:1 — under AA for the
     small type that uses them (footer links, place/date lines, labels). */
  --muted:rgba(42,26,11,.86);
  --muted-2:rgba(42,26,11,.78);

  /* LIGHT-THEME ACCENT RAMP
     ----------------------
     `--orange-light` (#ffab4d) is tuned to glow against a near-black page.
     On cream it measures about 2.1:1, which is why light mode looked washed
     out: roughly fifty rules use it for accent text, icons and hairlines, and
     every one of them was below the 3:1 minimum and most below 4.5:1 for body
     text. Darkening the token here fixes all of them at once instead of
     patching each rule, and keeps a single source of truth for the accent.
     #a84e08 clears 4.5:1 even on --bg-2 and --bg-3, which the previous
     #bb5a0c did not (it measured ~3.9:1 on --bg-2, where most of the small
     cap-height labels actually sit). Gradients that end in this token simply
     get a deeper, richer orange, which reads better on a light page anyway. */
  --orange-light:#a84e08;

  --ink-rgb:255,255,255;        /* scrims become light veils */
  --fg-rgb:42,26,11;            /* text on those veils */
  --shadow-rgb:146,94,44;       /* warm shadow instead of black */
  --ok-deep:#dff5e9;
  --panel:#ffffff;
  --panel-2:#fdf6ee;

  --glass:rgba(245,130,37,.075);
  --glass-2:rgba(245,130,37,.13);
  --border:rgba(184,84,12,.19);
  --border-2:rgba(184,84,12,.34);

  --grad-soft:linear-gradient(180deg,rgba(245,130,37,.13),rgba(255,255,255,0));
  --shadow:0 20px 60px rgba(146,94,44,.15);
}

/* darker greens/reds so status text stays legible on light surfaces */
html[data-theme="light"]{
  --ok:#25764f;
  --warn:#a8730a;
  --bad:#c0392b;
}

/* --- text painted over brand tints ---------------------------------
   `#cfdcf2` is tuned to be read on a near-black page. On the cream theme
   the same tint composites to a pale blue-grey, so a pale blue label on
   top of it measured about 1.3:1 — effectively invisible. The light theme
   needs dark ink on the tint instead. */
html[data-theme="light"] .tag-blue,
html[data-theme="light"] .eb-chip.is-online{
  background:rgba(79,102,146,.17);
  border-color:rgba(79,102,146,.44);
  color:#2f4569;
}

/* white on the flat brand orange is 2.6:1 in either theme */
.skip-link{background:var(--orange);color:#2a1503;font-weight:700}

/* --- text that was white-on-dark must flip --- */
/* Every one of these is `background-clip:text` over a gradient that starts at
   #fff for the dark theme. Left alone, the top half of each glyph is painted
   white on a cream page - which is exactly why the impact figures and the
   hero figures were almost invisible in light mode. They need their own
   gradient that stays dark from top to bottom. */
html[data-theme="light"] .hero-stats .stat h3,
html[data-theme="light"] .impact-num{
  background:linear-gradient(180deg,var(--orange-deep),var(--orange-dark));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-theme="light"] .grad-text{
  background:linear-gradient(135deg,var(--orange-dark),var(--orange-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-theme="light"] .sec-title em{
  background:linear-gradient(90deg,var(--orange-dark),var(--orange-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-theme="light"] .loader-logo{
  background:linear-gradient(90deg,var(--orange-dark),var(--orange),var(--orange-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* --- decorative overlays were tuned for a black canvas --- */
html[data-theme="light"] .noise{opacity:.035;mix-blend-mode:multiply}
html[data-theme="light"] .grid-overlay{opacity:.30}
html[data-theme="light"] #bg-canvas{opacity:.5}

/* --- navbar / panels --- */
html[data-theme="light"] .navbar.glass{
  background:rgba(253,247,240,.82);
  border-bottom-color:rgba(184,84,12,.16);
  box-shadow:0 8px 30px rgba(146,94,44,.09);
}
html[data-theme="light"] .drop{
  background:var(--panel);
  box-shadow:0 22px 54px rgba(146,94,44,.20);
}
html[data-theme="light"] #loader{background:var(--bg)}
html[data-theme="light"] .modal{background:var(--panel);box-shadow:0 30px 80px rgba(146,94,44,.28)}
html[data-theme="light"] .chat-panel{background:var(--panel);box-shadow:0 30px 80px rgba(146,94,44,.24)}
html[data-theme="light"] .chat-head{background:linear-gradient(135deg,var(--orange),var(--orange-dark))}
html[data-theme="light"] .chat-head .who b,
html[data-theme="light"] .chat-head .who span,
html[data-theme="light"] .chat-head #chatClose{color:#fff}
html[data-theme="light"] .chat-foot input{background:var(--bg-2)}

/* --- cards, inputs, tables --- */
html[data-theme="light"] .icard,
html[data-theme="light"] .panel,
html[data-theme="light"] .advisor-card,
html[data-theme="light"] .quote-card,
html[data-theme="light"] .impact-card,
html[data-theme="light"] .model-card,
html[data-theme="light"] .tl-card,
html[data-theme="light"] .uni-group{
  background:var(--panel);
  box-shadow:0 2px 8px rgba(146,94,44,.06);
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select{
  background:#fff;border-color:rgba(184,84,12,.26);
}
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus{border-color:var(--orange)}
html[data-theme="light"] ::selection{background:var(--orange);color:#fff}
html[data-theme="light"] .toast{background:var(--panel);box-shadow:0 18px 50px rgba(146,94,44,.24)}
html[data-theme="light"] .cta-box{
  background:linear-gradient(135deg,rgba(245,130,37,.14),rgba(245,130,37,.05));
}

/* --- 3D showcase tiles keep a light stage --- */
html[data-theme="light"] .model-canvas{
  background:radial-gradient(circle at 50% 62%,rgba(245,130,37,.13),transparent 68%);
}
html[data-theme="light"] .map-canvas-wrap{
  background:radial-gradient(circle at 50% 50%,rgba(245,130,37,.10),transparent 72%);
}

/* --- page header band in light mode ------------------------------ */
html[data-theme="light"] .page-hero{
  background:
    radial-gradient(120% 160% at 50% -35%, rgba(245,130,37,.13), transparent 62%),
    linear-gradient(180deg, rgba(247,236,224,.85), transparent 80%);
}
html[data-theme="light"] .ph-ring{border-color:rgba(224,110,21,.16)}
html[data-theme="light"] .ph-ring-b{border-color:rgba(79,102,146,.20)}
html[data-theme="light"] .ph-glyph{color:var(--orange-dark);opacity:.11}
html[data-theme="light"] .ph-side{background:rgba(255,255,255,.62)}
html[data-theme="light"] .ph-link:hover{background:rgba(245,130,37,.13)}

/* ==================================================================
   THEME TOGGLE
   ================================================================== */
.theme-toggle{
  width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;
  border-radius:50%;cursor:pointer;position:relative;
  background:var(--glass);border:1px solid var(--border);
  color:var(--fg);transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.theme-toggle:hover{background:var(--glass-2);border-color:var(--border-2);transform:translateY(-1px)}
.theme-toggle svg{width:18px;height:18px;position:absolute;transition:opacity .28s ease,transform .38s cubic-bezier(.3,.9,.3,1.3)}
.theme-toggle .ico-sun{opacity:0;transform:rotate(-70deg) scale(.5)}
.theme-toggle .ico-moon{opacity:1;transform:none}
html[data-theme="light"] .theme-toggle .ico-sun{opacity:1;transform:none}
html[data-theme="light"] .theme-toggle .ico-moon{opacity:0;transform:rotate(70deg) scale(.5)}
@media(max-width:640px){.theme-toggle{width:34px;height:34px;flex-basis:34px}}

/* ==================================================================
   No-WebGL fallback
   ------------------------------------------------------------------
   The 3D is decoration, never the content. If a device has no WebGL
   (locked-down browser, very old phone, blocked GPU) we show a
   designed still image instead of an empty hole.
   ================================================================== */
html.no-webgl .hero-3d::after,
html.no-webgl .model-canvas::after,
html.no-webgl .map-canvas-wrap::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-position:center;background-repeat:no-repeat;background-size:contain;
}
html.no-webgl .hero-3d::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23f58225' stroke-width='.9' opacity='.55'%3E%3Ccircle cx='120' cy='120' r='82'/%3E%3Cellipse cx='120' cy='120' rx='82' ry='28'/%3E%3Cellipse cx='120' cy='120' rx='82' ry='56'/%3E%3Cellipse cx='120' cy='120' rx='28' ry='82'/%3E%3Cellipse cx='120' cy='120' rx='56' ry='82'/%3E%3C/g%3E%3Cg fill='none' stroke='%234f6692' stroke-width='.8' opacity='.45'%3E%3Cpath d='M120 36 A118 118 0 0 1 196 66'/%3E%3Cpath d='M120 36 A118 118 0 0 0 44 66'/%3E%3C/g%3E%3Ccircle cx='120' cy='96' r='7' fill='%23ffab4d'/%3E%3Ccircle cx='120' cy='96' r='17' fill='none' stroke='%23ffab4d' stroke-width='1.6' opacity='.75'/%3E%3C/svg%3E");
  opacity:.9;
}
html.no-webgl .model-canvas::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23f58225' stroke-width='1.5' opacity='.6'%3E%3Cpath d='M60 22 96 42v36L60 98 24 78V42z'/%3E%3Cpath d='M60 22v76M24 42l36 20 36-20'/%3E%3C/g%3E%3C/svg%3E");
  background-size:110px;
  opacity:.55;
}
html.no-webgl .map-canvas-wrap::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Cpath d='M40 60 L120 30 L210 44 L250 78 L232 130 L150 168 L74 150 L44 112 Z' fill='rgba(245,130,37,.10)' stroke='%23ffab4d' stroke-width='1.6'/%3E%3Cg fill='%23f58225'%3E%3Ccircle cx='150' cy='96' r='5'/%3E%3Ccircle cx='96' cy='82' r='4'/%3E%3Ccircle cx='196' cy='112' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:min(78%, 460px);
  opacity:.85;
}

/* ==================================================================
   EVENT ROWS
   ------------------------------------------------------------------
   Shared by the homepage calendar block and the events page.

   The old homepage block put the date inside a round avatar using a
   hard <br>, mixed a 1.7-stroke pin icon into 11px mono text, and let
   flex decide where the button landed — which is exactly why it read
   as disorganised. This is a real grid: date | thumb? | body | action,
   collapsing to a stacked card on narrow screens.
   ================================================================== */
.eb-board{background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden}
.eb-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:20px 24px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(245,130,37,.07),transparent)}
.eb-head .sec-label{margin-bottom:6px}
.eb-head h3{flex:1;min-width:180px;font-size:1.15rem;font-weight:800;letter-spacing:-.4px}
.eb-count{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted-2)}

.eb-list{display:flex;flex-direction:column}
.eb-row{display:grid;gap:20px;align-items:center;padding:22px 24px;
  grid-template-columns:78px minmax(0,1fr) auto;
  border-bottom:1px solid rgba(245,130,37,.10);
  transition:background .2s ease}
.eb-row.has-thumb{grid-template-columns:78px 132px minmax(0,1fr) auto}
.eb-row:last-child{border-bottom:0}
.eb-row:hover{background:rgba(245,130,37,.045)}

/* De-emphasising a past event.
   This used to be `opacity:.74` on the whole row, which is multiplied into
   the alpha of every descendant — so an 11px chip written as
   rgba(255,245,230,.60) actually painted at .44, and the "Completed" chip,
   the blue "Online" chip, the mono date/place line and its <time> all
   measured between 3.4 and 4.2:1, i.e. under AA for the size they are set
   at. Every one of the last 50 contrast failures on the site came from this
   single declaration.
   Past rows are still clearly de-emphasised, but by *changing colours*: the
   decorative date block loses its orange, the title and place line drop one
   step down the text ladder, and the thumbnail dims (an image, so no text
   contrast is at stake). Nothing multiplies into glyph alpha any more. */
.eb-row.is-past .eb-thumb{opacity:.72}
.eb-row.is-past .eb-when{
  background:rgba(var(--fg-rgb),.045);
  border-color:rgba(var(--fg-rgb),.13)}
.eb-row.is-past .eb-mon,
.eb-row.is-past .eb-dow{color:var(--muted-2)}
.eb-row.is-past .eb-day{color:var(--muted)}
.eb-row.is-past .eb-title{color:var(--muted)}
.eb-row.is-past .eb-desc{color:var(--muted-2)}

/* date block ------------------------------------------------------ */
.eb-when{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:12px 6px;border-radius:14px;line-height:1;
  background:linear-gradient(160deg,rgba(245,130,37,.20),rgba(245,130,37,.05));
  border:1px solid rgba(245,130,37,.30)}
.eb-mon{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--orange-light)}
.eb-day{font-size:1.5rem;font-weight:800;letter-spacing:-1px;color:var(--fg)}
.eb-dow{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted-2)}

.eb-thumb{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--bg-3)}
.eb-thumb img{display:block;width:100%;height:100%;object-fit:cover}

/* body ------------------------------------------------------------ */
.eb-body{min-width:0}
.eb-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px}
.eb-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:100px;font-size:.7rem;font-weight:600;letter-spacing:.3px;
  background:rgba(var(--fg-rgb),.06);border:1px solid rgba(var(--fg-rgb),.14);color:var(--muted)}
.eb-chip svg{width:12px;height:12px;flex:0 0 auto}
.eb-chip.is-online{background:rgba(79,102,146,.20);border-color:rgba(125,147,189,.42);color:#cfdcf2}
.eb-chip.is-when{background:rgba(245,130,37,.15);border-color:rgba(245,130,37,.38);color:var(--orange-light)}
.eb-chip.is-done{background:rgba(var(--fg-rgb),.05);border-color:rgba(var(--fg-rgb),.12);color:var(--muted-2)}

.eb-title{font-size:1.02rem;font-weight:700;letter-spacing:-.3px;margin-bottom:6px;color:var(--fg)}
.eb-desc{font-size:.86rem;color:var(--muted);margin-bottom:10px}
.eb-row.compact .eb-desc{display:none}

.eb-where{display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  font-family:var(--ff-mono);font-size:.76rem;color:var(--muted-2)}
.eb-where .eb-ico{display:flex;color:var(--orange)}
.eb-where .eb-ico svg{width:13px;height:13px;flex:0 0 auto}
/* the "·" between date and place is decorative (aria-hidden), but at .5 on
   top of the already-muted line colour it composited to 2.4:1 in light and
   2.5:1 in dark — visible enough to read as a smudge rather than a divider.
   .78 keeps it subordinate to the text while staying legible. */
.eb-sep{opacity:.78}

/* action ---------------------------------------------------------- */
.eb-cta{display:flex;align-items:center}
.eb-cta .btn{white-space:nowrap}

@media(max-width:900px){
  .eb-row,.eb-row.has-thumb{grid-template-columns:66px minmax(0,1fr)}
  .eb-row.has-thumb .eb-thumb{display:none}
  .eb-cta{grid-column:2;justify-content:flex-start}
  .eb-row{padding:19px 18px}
}
@media(max-width:520px){
  .eb-row,.eb-row.has-thumb{grid-template-columns:minmax(0,1fr)}
  .eb-when{flex-direction:row;align-items:baseline;justify-content:flex-start;
    gap:7px;padding:10px 13px;width:max-content}
  .eb-day{font-size:1.15rem}
  .eb-cta{grid-column:1}
}

/* light theme ----------------------------------------------------- */
html[data-theme="light"] .eb-board{background:rgba(255,255,255,.6)}
html[data-theme="light"] .eb-chip.is-online{color:#38496a}
html[data-theme="light"] .eb-when{
  background:linear-gradient(160deg,rgba(245,130,37,.16),rgba(245,130,37,.04));
}

/* --- empty state -------------------------------------------------- */
.empty-note{display:flex;gap:18px;align-items:flex-start;padding:26px 28px;
  background:var(--bg-2);border:1px dashed var(--border-2);border-radius:var(--r-lg)}
.empty-note>svg{width:30px;height:30px;flex:0 0 auto;color:var(--orange)}
.empty-note b{display:block;font-size:1rem;margin-bottom:5px}
.empty-note p{color:var(--muted);font-size:.88rem}
.empty-note a{color:var(--orange-light);text-decoration:underline;text-underline-offset:3px}

/* screen-reader-only, for labels that are visually implied */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==================================================================
   COMMAND PALETTE  (Ctrl / Cmd + K)
   ================================================================== */
.nav-search{display:inline-flex;align-items:center;gap:8px;height:38px;
  padding:0 10px 0 12px;border-radius:100px;cursor:pointer;font-size:.8rem;
  background:var(--glass);border:1px solid var(--border);color:var(--muted);
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.nav-search:hover{background:var(--glass-2);border-color:var(--border-2);color:var(--fg)}
.nav-search svg{width:15px;height:15px;flex:0 0 auto}
.nav-search-kbd{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.5px;
  padding:3px 6px;border-radius:6px;background:rgba(var(--fg-rgb),.07);
  border:1px solid rgba(var(--fg-rgb),.12);color:var(--muted-2)}
@media(max-width:1250px){.nav-search-label{display:none}}
@media(max-width:900px){
  .nav-search-kbd{display:none}
  .nav-search{padding:0;width:34px;height:34px;justify-content:center}
}

.cmdk{position:fixed;inset:0;z-index:11000;display:flex;align-items:flex-start;
  justify-content:center;padding:11vh 16px 24px}
.cmdk[hidden]{display:none}
.cmdk-backdrop{position:absolute;inset:0;background:rgba(var(--ink-rgb),.74);
  backdrop-filter:blur(6px);animation:cmdk-fade .18s ease}
.cmdk-panel{position:relative;display:flex;flex-direction:column;width:min(660px,100%);
  max-height:74vh;border-radius:18px;overflow:hidden;background:var(--panel);
  border:1px solid var(--border-2);box-shadow:0 40px 100px rgba(var(--shadow-rgb),.6);
  animation:cmdk-rise .22s cubic-bezier(.2,.9,.3,1.05)}
@keyframes cmdk-fade{from{opacity:0}}
@keyframes cmdk-rise{from{opacity:0;transform:translateY(-14px) scale(.98)}}
body.cmdk-open{overflow:hidden}

.cmdk-input{display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid var(--border)}
.cmdk-input>svg{width:19px;height:19px;flex:0 0 auto;color:var(--orange)}
.cmdk-input input{flex:1;min-width:0;background:none;border:0;outline:0;padding:0;
  color:var(--fg);font-family:inherit;font-size:1.02rem}
.cmdk-input input::placeholder{color:var(--muted-2)}
.cmdk-esc{font-family:var(--ff-mono);font-size:.62rem;padding:4px 7px;border-radius:6px;
  background:rgba(var(--fg-rgb),.07);border:1px solid rgba(var(--fg-rgb),.12);
  color:var(--muted-2);cursor:pointer}

.cmdk-status{padding:9px 18px;font-family:var(--ff-mono);font-size:.72rem;
  letter-spacing:.6px;color:var(--muted-2);border-bottom:1px solid var(--border)}

.cmdk-list{flex:1;min-height:0;margin:0;padding:8px;overflow-y:auto;list-style:none}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  cursor:pointer;border-left:2px solid transparent}
.cmdk-item.is-active{background:rgba(245,130,37,.11);border-left-color:var(--orange)}
.cmdk-type{flex:0 0 auto;width:64px;font-family:var(--ff-mono);font-size:.6rem;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--muted-2)}
.cmdk-item.is-active .cmdk-type{color:var(--orange-light)}
.cmdk-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cmdk-text b{font-size:.9rem;font-weight:600;color:var(--fg)}
.cmdk-text>span{font-size:.76rem;color:var(--muted)}
.cmdk-text mark{background:rgba(245,130,37,.28);color:var(--fg);border-radius:3px;padding:0 2px}
.cmdk-go{flex:0 0 auto;font-family:var(--ff-mono);font-size:.72rem;
  color:var(--muted-2);opacity:0}
.cmdk-item.is-active .cmdk-go{opacity:1;color:var(--orange-light)}
.cmdk-empty{padding:26px 18px;text-align:center;color:var(--muted);font-size:.86rem}

.cmdk-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 18px;
  font-size:.72rem;color:var(--muted-2);border-top:1px solid var(--border);
  background:rgba(var(--ink-rgb),.35)}
.cmdk-foot kbd{font-family:var(--ff-mono);font-size:.62rem;padding:2px 5px;
  border-radius:5px;background:rgba(var(--fg-rgb),.07);
  border:1px solid rgba(var(--fg-rgb),.12);margin-right:3px}
.cmdk-all{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  color:var(--orange-light);text-decoration:none;font-weight:600}
.cmdk-all svg{width:13px;height:13px}

/* ==================================================================
   SEARCH PAGE
   ================================================================== */
.search-form{display:flex;gap:10px;max-width:620px;align-items:stretch}
.search-form input{flex:1;min-width:0}
@media(max-width:560px){.search-form{flex-direction:column}}
.search-suggest-title{font-size:1rem;font-weight:700;margin-bottom:12px}
.search-suggest-list{display:flex;flex-wrap:wrap;gap:9px}
.search-suggest-list .chip{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.search-suggest-list .chip svg{width:13px;height:13px;flex:0 0 auto}

.search-count{margin-bottom:22px;font-size:.9rem;color:var(--muted)}
.search-count b{color:var(--fg)}

.search-group{margin-bottom:26px}
.search-group-title{display:flex;align-items:center;gap:10px;margin-bottom:12px;
  padding-bottom:10px;font-size:.95rem;font-weight:700;border-bottom:1px solid var(--border)}
.search-group-ico{display:grid;place-items:center;width:28px;height:28px;
  border-radius:8px;background:rgba(245,130,37,.12);color:var(--orange-light)}
.search-group-ico svg{width:15px;height:15px}
.search-group-n{font-family:var(--ff-mono);font-size:.68rem;color:var(--muted-2);
  padding:2px 7px;border-radius:100px;background:rgba(var(--fg-rgb),.06)}

.search-results{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.search-hit{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:12px;
  background:var(--bg-2);border:1px solid var(--border);text-decoration:none;
  transition:border-color .18s ease,transform .18s ease}
.search-hit:hover{border-color:var(--border-2);transform:translateY(-2px)}
.search-hit-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.search-hit-body b{font-size:.9rem;color:var(--fg)}
.search-hit-body span{font-size:.78rem;color:var(--muted)}
.search-hit-go{display:flex;color:var(--orange-light);opacity:0;transition:opacity .18s ease}
.search-hit:hover .search-hit-go{opacity:1}
.search-hit-go svg{width:15px;height:15px}

/* ==================================================================
   BACK TO TOP (with a scroll-progress ring)
   ================================================================== */
.to-top{position:fixed;right:22px;bottom:106px;z-index:1150;width:44px;height:44px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:var(--glass);border:1px solid var(--border-2);color:var(--fg);
  opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,background .2s ease}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--glass-2)}
.to-top>svg{width:18px;height:18px}
.to-top .ring{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);
  transform:rotate(-90deg);pointer-events:none}
.to-top .ring circle{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round}

/* ==================================================================
   COMMAND PALETTE + SEARCH, light theme
   ================================================================== */
html[data-theme="light"] .cmdk-backdrop{background:rgba(146,94,44,.32)}
html[data-theme="light"] .cmdk-panel{box-shadow:0 40px 100px rgba(146,94,44,.32)}
html[data-theme="light"] .cmdk-foot{background:rgba(247,236,224,.6)}
html[data-theme="light"] .search-hit{background:rgba(255,255,255,.6)}

/* ==================================================================
   PUBLIC IMPACT DASHBOARD
   ------------------------------------------------------------------
   Sized in fixed units on purpose. Every element here has a definite
   height, so a chart can never feed its own size back into the layout
   and grow without bound — which is what made the old decorative SVG
   blow up to the width of the page.
   ================================================================== */
.imp{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}

/* ---------------- chart panel ---------------- */
.imp-board{display:flex;flex-direction:column;gap:16px;padding:22px 22px 18px;
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg)}

.imp-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:100px;align-self:flex-start;
  background:rgba(var(--fg-rgb),.05);border:1px solid var(--border)}
.imp-tab{appearance:none;border:0;cursor:pointer;font:inherit;font-size:.82rem;font-weight:600;
  padding:8px 16px;border-radius:100px;background:none;color:var(--muted);
  transition:background .18s ease,color .18s ease}
.imp-tab:hover{color:var(--fg)}
.imp-tab.is-on{background:var(--grad);color:#fff}
.imp-tab:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.imp-stage{position:relative;height:340px;min-height:340px;overflow:hidden}
#impChart{display:block;width:100%;height:100%}

.imp-loading{position:absolute;inset:0;display:grid;place-items:center;
  background:var(--bg-2);border-radius:var(--r)}
.imp-loading span{width:38px;height:38px;border-radius:50%;
  border:3px solid var(--border-2);border-top-color:var(--orange);
  animation:imp-spin .85s linear infinite}
@keyframes imp-spin{to{transform:rotate(360deg)}}
.imp-stage.is-ready .imp-loading{display:none}
/* if the chart library cannot load we say so rather than spinning forever */
.imp-loading.is-failed{font-size:.85rem;color:var(--muted);text-align:center;padding:0 20px}
.imp-loading.is-failed span{display:none}

.imp-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--border)}
.imp-table{font-size:.8rem}
.imp-table>summary{cursor:pointer;color:var(--orange-light);font-weight:600;
  list-style:none;padding:2px 0}
.imp-table>summary::-webkit-details-marker{display:none}
.imp-table>summary::after{content:' ▾'}
.imp-table[open]>summary::after{content:' ▴'}
.imp-scroll{max-height:260px;overflow:auto;margin-top:12px;
  border:1px solid var(--border);border-radius:var(--r-sm)}
.imp-table table{width:100%;border-collapse:collapse;font-family:var(--ff-mono);font-size:.74rem}
.imp-table th,.imp-table td{padding:7px 12px;text-align:right;white-space:nowrap}
.imp-table thead th{position:sticky;top:0;background:var(--bg-3);color:var(--muted);
  font-weight:600;letter-spacing:.4px}
.imp-table th[scope="row"]{text-align:left;color:var(--fg)}
.imp-table tbody tr+tr th,.imp-table tbody tr+tr td{border-top:1px solid var(--border)}
.imp-table td{color:var(--muted)}

/* ---------------- key figures ---------------- */
.imp-kpis{display:grid;gap:14px;grid-template-rows:repeat(4,1fr)}
.imp-kpi{padding:18px 20px;background:var(--grad-soft);border:1px solid var(--border);
  border-radius:var(--r);display:flex;flex-direction:column;justify-content:center;
  transition:border-color .2s ease,transform .2s ease}
.imp-kpi:hover{border-color:var(--border-2);transform:translateY(-3px)}
.imp-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px}
.imp-kpi-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:rgba(245,130,37,.13);color:var(--orange-light)}
.imp-kpi-ico svg{width:17px;height:17px}
.imp-kpi-delta{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.5px;
  padding:3px 8px;border-radius:100px;background:rgba(var(--fg-rgb),.06);color:var(--muted-2)}
.imp-kpi-delta.up{color:var(--ok);background:rgba(76,195,138,.13)}
.imp-kpi-delta.down{color:var(--bad);background:rgba(226,86,74,.13)}
/* the light theme darkens --ok/--bad, so their tints must follow */
html[data-theme="light"] .imp-kpi-delta.up{background:rgba(37,118,79,.13)}
html[data-theme="light"] .imp-kpi-delta.down{background:rgba(192,57,43,.12)}

/* Solid colour rather than a clipped gradient: the dark theme's gradient
   starts white, which is exactly what made the impact figures vanish on
   cream. One fewer rule to remember to override. */
.imp-kpi-num{font-size:clamp(1.6rem,3.3vw,2.1rem);font-weight:900;letter-spacing:-1px;
  line-height:1.05;color:var(--fg);font-variant-numeric:tabular-nums}
.imp-kpi-lbl{font-size:.86rem;font-weight:600;margin-top:4px;color:var(--fg)}
.imp-kpi-note{font-size:.74rem;color:var(--muted-2);margin-top:2px}

@media(max-width:1024px){
  .imp{grid-template-columns:minmax(0,1fr)}
  .imp-stage{height:300px;min-height:300px}
  .imp-kpis{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
}
@media(max-width:600px){
  .imp-board{padding:16px 14px 14px}
  .imp-tabs{width:100%;justify-content:space-between}
  .imp-tab{flex:1;padding:8px 6px;font-size:.76rem}
  .imp-stage{height:250px;min-height:250px}
  .imp-kpis{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .imp-loading span{animation:none}
  .imp-kpi{transition:none}
}