/* =========================================================
   IBEX Technology Group — shared styles for every page.
   Color schemes are defined first. To switch schemes, edit
   SITE_THEME in assets/theme.js; to fine-tune one, edit its hex values here.
   Each scheme sets six surfaces: head (top ribbon), hero, light, alt,
   dark (feature sections) and foot (footer).
   ========================================================= */

:root,[data-theme="navy"]{
  --glow:#3FD0D4;
  --head-bg:#071633; --head-fg:#E6EDF7; --head-head:#FFFFFF; --head-muted:#A3B6D6; --head-line:#1D3863; --head-accent:#8DB8FF; --head-on-accent:#061330; --head-signal:#4F9BFF; --head-card:rgba(255,255,255,.05); --head-field:#071633; --head-scheme:dark;
  --hero-bg:#071633; --hero-fg:#E6EDF7; --hero-head:#FFFFFF; --hero-muted:#A3B6D6; --hero-line:#1D3863; --hero-accent:#8DB8FF; --hero-on-accent:#061330; --hero-signal:#4F9BFF; --hero-card:rgba(255,255,255,.05); --hero-field:#071633; --hero-scheme:dark;
  --light-bg:#FFFFFF; --light-fg:#18233A; --light-head:#0A1A3D; --light-muted:#53617B; --light-line:#DFE6F1; --light-accent:#1C4FB0; --light-on-accent:#FFFFFF; --light-signal:#2563EB; --light-card:#FFFFFF; --light-field:#FFFFFF; --light-scheme:light;
  --alt-bg:#F3F6FB; --alt-fg:#18233A; --alt-head:#0A1A3D; --alt-muted:#53617B; --alt-line:#DAE2EE; --alt-accent:#1C4FB0; --alt-on-accent:#FFFFFF; --alt-signal:#2563EB; --alt-card:#FFFFFF; --alt-field:#FFFFFF; --alt-scheme:light;
  --dark-bg:#0B2150; --dark-fg:#E6EDF7; --dark-head:#FFFFFF; --dark-muted:#AABCDB; --dark-line:#24427A; --dark-accent:#8DB8FF; --dark-on-accent:#061330; --dark-signal:#4F9BFF; --dark-card:rgba(255,255,255,.045); --dark-field:#0B2150; --dark-scheme:dark;
  --foot-bg:#050F26; --foot-fg:#A3B6D6; --foot-head:#FFFFFF; --foot-muted:#8499BC; --foot-line:#172C52; --foot-accent:#8DB8FF; --foot-on-accent:#050F26; --foot-signal:#4F9BFF; --foot-card:rgba(255,255,255,.05); --foot-field:#050F26; --foot-scheme:dark;
}
[data-theme="midnight"]{
  --glow:#3FD0D4;
  --head-bg:#061330; --head-fg:#DCE6F5; --head-head:#FFFFFF; --head-muted:#9FB3D3; --head-line:#1B3157; --head-accent:#7FB0FF; --head-on-accent:#061330; --head-signal:#5C9DFF; --head-card:rgba(255,255,255,.05); --head-field:#061330; --head-scheme:dark;
  --hero-bg:#061330; --hero-fg:#DCE6F5; --hero-head:#FFFFFF; --hero-muted:#9FB3D3; --hero-line:#1B3157; --hero-accent:#7FB0FF; --hero-on-accent:#061330; --hero-signal:#5C9DFF; --hero-card:rgba(255,255,255,.05); --hero-field:#061330; --hero-scheme:dark;
  --light-bg:#0A1B3D; --light-fg:#DCE6F5; --light-head:#FFFFFF; --light-muted:#9FB3D3; --light-line:#20385F; --light-accent:#7FB0FF; --light-on-accent:#061330; --light-signal:#5C9DFF; --light-card:rgba(255,255,255,.05); --light-field:#081733; --light-scheme:dark;
  --alt-bg:#0D2147; --alt-fg:#DCE6F5; --alt-head:#FFFFFF; --alt-muted:#A3B7D6; --alt-line:#24406B; --alt-accent:#7FB0FF; --alt-on-accent:#061330; --alt-signal:#5C9DFF; --alt-card:rgba(255,255,255,.05); --alt-field:#0A1B3D; --alt-scheme:dark;
  --dark-bg:#112A5A; --dark-fg:#DCE6F5; --dark-head:#FFFFFF; --dark-muted:#A9BDDB; --dark-line:#2B4A7E; --dark-accent:#7FB0FF; --dark-on-accent:#061330; --dark-signal:#5C9DFF; --dark-card:rgba(255,255,255,.05); --dark-field:#112A5A; --dark-scheme:dark;
  --foot-bg:#040D22; --foot-fg:#9FB3D3; --foot-head:#FFFFFF; --foot-muted:#8095B8; --foot-line:#172B4F; --foot-accent:#7FB0FF; --foot-on-accent:#040D22; --foot-signal:#5C9DFF; --foot-card:rgba(255,255,255,.05); --foot-field:#040D22; --foot-scheme:dark;
}
[data-theme="royal"]{
  --glow:#6FE3E0;
  --head-bg:#0F3480; --head-fg:#EEF3FC; --head-head:#FFFFFF; --head-muted:#C3D3EF; --head-line:#2B4F9B; --head-accent:#CFE0FF; --head-on-accent:#0F3480; --head-signal:#8EC5FF; --head-card:rgba(255,255,255,.07); --head-field:#0F3480; --head-scheme:dark;
  --hero-bg:#0F3480; --hero-fg:#EEF3FC; --hero-head:#FFFFFF; --hero-muted:#C3D3EF; --hero-line:#2B4F9B; --hero-accent:#CFE0FF; --hero-on-accent:#0F3480; --hero-signal:#8EC5FF; --hero-card:rgba(255,255,255,.07); --hero-field:#0F3480; --hero-scheme:dark;
  --light-bg:#FFFFFF; --light-fg:#182233; --light-head:#0F3480; --light-muted:#52607A; --light-line:#DCE3F0; --light-accent:#1A47A8; --light-on-accent:#FFFFFF; --light-signal:#1A47A8; --light-card:#FFFFFF; --light-field:#FFFFFF; --light-scheme:light;
  --alt-bg:#EEF3FC; --alt-fg:#182233; --alt-head:#0F3480; --alt-muted:#52607A; --alt-line:#D6E0F2; --alt-accent:#1A47A8; --alt-on-accent:#FFFFFF; --alt-signal:#1A47A8; --alt-card:#FFFFFF; --alt-field:#FFFFFF; --alt-scheme:light;
  --dark-bg:#123C91; --dark-fg:#EEF3FC; --dark-head:#FFFFFF; --dark-muted:#C6D5F0; --dark-line:#3359A8; --dark-accent:#CFE0FF; --dark-on-accent:#0F3480; --dark-signal:#8EC5FF; --dark-card:rgba(255,255,255,.07); --dark-field:#123C91; --dark-scheme:dark;
  --foot-bg:#0A2659; --foot-fg:#C3D3EF; --foot-head:#FFFFFF; --foot-muted:#A9BDE3; --foot-line:#22427F; --foot-accent:#CFE0FF; --foot-on-accent:#0A2659; --foot-signal:#8EC5FF; --foot-card:rgba(255,255,255,.05); --foot-field:#0A2659; --foot-scheme:dark;
}
[data-theme="light"]{
  --glow:#2BA3B5;
  --head-bg:#FFFFFF; --head-fg:#18202B; --head-head:#14284A; --head-muted:#56637A; --head-line:#DDE3EB; --head-accent:#1F3A68; --head-on-accent:#FFFFFF; --head-signal:#1F3A68; --head-card:#FFFFFF; --head-field:#FFFFFF; --head-scheme:light;
  --hero-bg:#F5F7FA; --hero-fg:#18202B; --hero-head:#14284A; --hero-muted:#56637A; --hero-line:#DDE3EB; --hero-accent:#1F3A68; --hero-on-accent:#FFFFFF; --hero-signal:#1F3A68; --hero-card:#FFFFFF; --hero-field:#FFFFFF; --hero-scheme:light;
  --light-bg:#FFFFFF; --light-fg:#18202B; --light-head:#14284A; --light-muted:#56637A; --light-line:#DDE3EB; --light-accent:#1F3A68; --light-on-accent:#FFFFFF; --light-signal:#1F3A68; --light-card:#FFFFFF; --light-field:#FFFFFF; --light-scheme:light;
  --alt-bg:#F5F7FA; --alt-fg:#18202B; --alt-head:#14284A; --alt-muted:#56637A; --alt-line:#DDE3EB; --alt-accent:#1F3A68; --alt-on-accent:#FFFFFF; --alt-signal:#1F3A68; --alt-card:#FFFFFF; --alt-field:#FFFFFF; --alt-scheme:light;
  --dark-bg:#14284A; --dark-fg:#EEF2F8; --dark-head:#FFFFFF; --dark-muted:#B4C3DA; --dark-line:#2E4A78; --dark-accent:#A9C1E6; --dark-on-accent:#14284A; --dark-signal:#7DB0F5; --dark-card:rgba(255,255,255,.05); --dark-field:#14284A; --dark-scheme:dark;
  --foot-bg:#0F1F3A; --foot-fg:#B4C3DA; --foot-head:#FFFFFF; --foot-muted:#9FB0C4; --foot-line:#2E4A78; --foot-accent:#A9C1E6; --foot-on-accent:#0F1F3A; --foot-signal:#7DB0F5; --foot-card:rgba(255,255,255,.05); --foot-field:#0F1F3A; --foot-scheme:dark;
}
[data-theme="navy-gold"]{
  --glow:#E8C77E;
  --head-bg:#0B1F44; --head-fg:#E6EDF7; --head-head:#FFFFFF; --head-muted:#A9BCD9; --head-line:#22406E; --head-accent:#C9A86A; --head-on-accent:#0B1F44; --head-signal:#E0C27F; --head-card:rgba(255,255,255,.05); --head-field:#0B1F44; --head-scheme:dark;
  --hero-bg:#0B1F44; --hero-fg:#E6EDF7; --hero-head:#FFFFFF; --hero-muted:#A9BCD9; --hero-line:#22406E; --hero-accent:#C9A86A; --hero-on-accent:#0B1F44; --hero-signal:#E0C27F; --hero-card:rgba(255,255,255,.05); --hero-field:#0B1F44; --hero-scheme:dark;
  --light-bg:#FFFFFF; --light-fg:#1A2433; --light-head:#0B1F44; --light-muted:#55627A; --light-line:#DCE3EE; --light-accent:#8A6A2E; --light-on-accent:#FFFFFF; --light-signal:#8A6A2E; --light-card:#FFFFFF; --light-field:#FFFFFF; --light-scheme:light;
  --alt-bg:#F4F5F8; --alt-fg:#1A2433; --alt-head:#0B1F44; --alt-muted:#55627A; --alt-line:#DCE1EA; --alt-accent:#8A6A2E; --alt-on-accent:#FFFFFF; --alt-signal:#8A6A2E; --alt-card:#FFFFFF; --alt-field:#FFFFFF; --alt-scheme:light;
  --dark-bg:#0F2A57; --dark-fg:#E6EDF7; --dark-head:#FFFFFF; --dark-muted:#AFC2DE; --dark-line:#2A4979; --dark-accent:#C9A86A; --dark-on-accent:#0B1F44; --dark-signal:#E0C27F; --dark-card:rgba(255,255,255,.05); --dark-field:#0F2A57; --dark-scheme:dark;
  --foot-bg:#081733; --foot-fg:#A9BCD9; --foot-head:#FFFFFF; --foot-muted:#8EA3C4; --foot-line:#1D3561; --foot-accent:#C9A86A; --foot-on-accent:#081733; --foot-signal:#E0C27F; --foot-card:rgba(255,255,255,.05); --foot-field:#081733; --foot-scheme:dark;
}
[data-theme="steel"]{
  --glow:#8FD3E8;
  --head-bg:#1E2A38; --head-fg:#E3E9F0; --head-head:#FFFFFF; --head-muted:#A7B4C4; --head-line:#334457; --head-accent:#B9C6D6; --head-on-accent:#1E2A38; --head-signal:#8FB8E8; --head-card:rgba(255,255,255,.05); --head-field:#1E2A38; --head-scheme:dark;
  --hero-bg:#1E2A38; --hero-fg:#E3E9F0; --hero-head:#FFFFFF; --hero-muted:#A7B4C4; --hero-line:#334457; --hero-accent:#B9C6D6; --hero-on-accent:#1E2A38; --hero-signal:#8FB8E8; --hero-card:rgba(255,255,255,.05); --hero-field:#1E2A38; --hero-scheme:dark;
  --light-bg:#FFFFFF; --light-fg:#1B222B; --light-head:#1E2A38; --light-muted:#58636F; --light-line:#DDE2E8; --light-accent:#3A5372; --light-on-accent:#FFFFFF; --light-signal:#3A5372; --light-card:#FFFFFF; --light-field:#FFFFFF; --light-scheme:light;
  --alt-bg:#F2F4F6; --alt-fg:#1B222B; --alt-head:#1E2A38; --alt-muted:#58636F; --alt-line:#D9DFE6; --alt-accent:#3A5372; --alt-on-accent:#FFFFFF; --alt-signal:#3A5372; --alt-card:#FFFFFF; --alt-field:#FFFFFF; --alt-scheme:light;
  --dark-bg:#253446; --dark-fg:#E3E9F0; --dark-head:#FFFFFF; --dark-muted:#AEBACA; --dark-line:#3A4D63; --dark-accent:#B9C6D6; --dark-on-accent:#1E2A38; --dark-signal:#8FB8E8; --dark-card:rgba(255,255,255,.05); --dark-field:#253446; --dark-scheme:dark;
  --foot-bg:#161F2A; --foot-fg:#A7B4C4; --foot-head:#FFFFFF; --foot-muted:#8996A6; --foot-line:#2B3848; --foot-accent:#B9C6D6; --foot-on-accent:#161F2A; --foot-signal:#8FB8E8; --foot-card:rgba(255,255,255,.05); --foot-field:#161F2A; --foot-scheme:dark;
}
[data-theme="teal"]{
  --glow:#9AF0E4;
  --head-bg:#0B2B33; --head-fg:#E2EEF0; --head-head:#FFFFFF; --head-muted:#A2BEC3; --head-line:#1D4650; --head-accent:#5FC4B8; --head-on-accent:#0B2B33; --head-signal:#7FE0D3; --head-card:rgba(255,255,255,.05); --head-field:#0B2B33; --head-scheme:dark;
  --hero-bg:#0B2B33; --hero-fg:#E2EEF0; --hero-head:#FFFFFF; --hero-muted:#A2BEC3; --hero-line:#1D4650; --hero-accent:#5FC4B8; --hero-on-accent:#0B2B33; --hero-signal:#7FE0D3; --hero-card:rgba(255,255,255,.05); --hero-field:#0B2B33; --hero-scheme:dark;
  --light-bg:#FFFFFF; --light-fg:#16242A; --light-head:#0B2B33; --light-muted:#52656B; --light-line:#DAE5E7; --light-accent:#15796F; --light-on-accent:#FFFFFF; --light-signal:#15796F; --light-card:#FFFFFF; --light-field:#FFFFFF; --light-scheme:light;
  --alt-bg:#F0F5F6; --alt-fg:#16242A; --alt-head:#0B2B33; --alt-muted:#52656B; --alt-line:#D5E2E4; --alt-accent:#15796F; --alt-on-accent:#FFFFFF; --alt-signal:#15796F; --alt-card:#FFFFFF; --alt-field:#FFFFFF; --alt-scheme:light;
  --dark-bg:#0F3640; --dark-fg:#E2EEF0; --dark-head:#FFFFFF; --dark-muted:#A8C4C9; --dark-line:#245561; --dark-accent:#5FC4B8; --dark-on-accent:#0B2B33; --dark-signal:#7FE0D3; --dark-card:rgba(255,255,255,.05); --dark-field:#0F3640; --dark-scheme:dark;
  --foot-bg:#07222A; --foot-fg:#A2BEC3; --foot-head:#FFFFFF; --foot-muted:#86A3A9; --foot-line:#18404A; --foot-accent:#5FC4B8; --foot-on-accent:#07222A; --foot-signal:#7FE0D3; --foot-card:rgba(255,255,255,.05); --foot-field:#07222A; --foot-scheme:dark;
}

/* Surfaces pick up the active scheme */
.s-head{--bg:var(--head-bg);--fg:var(--head-fg);--head:var(--head-head);--muted:var(--head-muted);--line:var(--head-line);--accent:var(--head-accent);--on-accent:var(--head-on-accent);--signal:var(--head-signal);--card:var(--head-card);--field:var(--head-field);--scheme:var(--head-scheme);background:var(--bg);color:var(--fg);color-scheme:var(--scheme)}
.s-hero{--bg:var(--hero-bg);--fg:var(--hero-fg);--head:var(--hero-head);--muted:var(--hero-muted);--line:var(--hero-line);--accent:var(--hero-accent);--on-accent:var(--hero-on-accent);--signal:var(--hero-signal);--card:var(--hero-card);--field:var(--hero-field);--scheme:var(--hero-scheme);background:var(--bg);color:var(--fg);color-scheme:var(--scheme)}
.s-light{--bg:var(--light-bg);--fg:var(--light-fg);--head:var(--light-head);--muted:var(--light-muted);--line:var(--light-line);--accent:var(--light-accent);--on-accent:var(--light-on-accent);--signal:var(--light-signal);--card:var(--light-card);--field:var(--light-field);--scheme:var(--light-scheme);background:var(--bg);color:var(--fg);color-scheme:var(--scheme)}
.s-alt{--bg:var(--alt-bg);--fg:var(--alt-fg);--head:var(--alt-head);--muted:var(--alt-muted);--line:var(--alt-line);--accent:var(--alt-accent);--on-accent:var(--alt-on-accent);--signal:var(--alt-signal);--card:var(--alt-card);--field:var(--alt-field);--scheme:var(--alt-scheme);background:var(--bg);color:var(--fg);color-scheme:var(--scheme)}
.s-dark{--bg:var(--dark-bg);--fg:var(--dark-fg);--head:var(--dark-head);--muted:var(--dark-muted);--line:var(--dark-line);--accent:var(--dark-accent);--on-accent:var(--dark-on-accent);--signal:var(--dark-signal);--card:var(--dark-card);--field:var(--dark-field);--scheme:var(--dark-scheme);background:var(--bg);color:var(--fg);color-scheme:var(--scheme)}
.s-foot{--bg:var(--foot-bg);--fg:var(--foot-fg);--head:var(--foot-head);--muted:var(--foot-muted);--line:var(--foot-line);--accent:var(--foot-accent);--on-accent:var(--foot-on-accent);--signal:var(--foot-signal);--card:var(--foot-card);--field:var(--foot-field);--scheme:var(--foot-scheme);background:var(--bg);color:var(--fg);color-scheme:var(--scheme)}

/* ---------- Base ---------- */
:root{--serif:"Spectral",Georgia,"Times New Roman",serif;--sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--wrap:1200px;
  --r-sm:8px;--r:14px;--r-lg:20px;--ease:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0;color:var(--head)}
p{margin:0 0 1em}
::selection{background:color-mix(in srgb,var(--accent,#9EC0F2) 35%,transparent)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.measure{max-width:68ch}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 16px;background:var(--accent);color:var(--on-accent);border-radius:var(--r-sm)}
.skip:focus{left:16px;top:16px}

/* Reading progress */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--head-signal),var(--glow),var(--head-accent));box-shadow:0 0 12px var(--glow)}

/* ---------- Top ribbon ---------- */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  transition:box-shadow .35s var(--ease),background .35s var(--ease)}
.site-header.scrolled{box-shadow:0 10px 30px -10px rgba(2,8,24,.55);background:color-mix(in srgb,var(--bg) 92%,transparent)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px;transition:min-height .35s var(--ease)}
.scrolled .nav{min-height:66px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--head);flex-shrink:0}
.brand-logo{height:46px;width:auto;transition:height .35s var(--ease),transform .5s var(--ease-out)}
.scrolled .brand-logo{height:40px}
.brand:hover .brand-logo{transform:rotate(-4deg) scale(1.04)}
.brand-name{font-family:var(--serif);font-size:1.2rem;line-height:1.2;letter-spacing:.01em}
.nav-links{position:relative;display:flex;list-style:none;margin:0;padding:0;gap:2px}
.nav-links a{position:relative;display:block;padding:10px 14px;font-size:.92rem;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;border-radius:var(--r-sm);transition:color .25s,background .25s}
.nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--signal));transform:scaleX(0);transition:transform .35s var(--ease-out)}
.nav-links a:hover{color:var(--head);background:color-mix(in srgb,var(--fg) 6%,transparent)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--head)}

/* ---------- Hero (home) ---------- */
.hero,.page-hero{position:relative;overflow:hidden;isolation:isolate}
/* drifting light behind the hero */
.hero::before,.page-hero::before{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 42% at 78% 30%,color-mix(in srgb,var(--signal) 30%,transparent),transparent 70%),
    radial-gradient(34% 40% at 12% 85%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),
    radial-gradient(30% 30% at 45% 10%,color-mix(in srgb,var(--signal) 12%,transparent),transparent 70%);
  will-change:transform;animation:drift 22s ease-in-out infinite alternate}
.hero::after,.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,transparent 0 119px,color-mix(in srgb,var(--fg) 6%,transparent) 119px 120px),
    repeating-linear-gradient(0deg,transparent 0 119px,color-mix(in srgb,var(--fg) 4%,transparent) 119px 120px);
  -webkit-mask-image:radial-gradient(80% 70% at 60% 40%,#000 20%,transparent 80%);mask-image:radial-gradient(80% 70% at 60% 40%,#000 20%,transparent 80%)}
.hero .wrap,.page-hero .wrap{position:relative;z-index:1}
.hero{padding:120px 0 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;padding-bottom:104px}
.kicker,.page-hero .crumbs{display:inline-flex;align-items:center;gap:10px}
.kicker{color:var(--accent);font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:26px;
  padding:7px 14px 7px 12px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:999px;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 0 var(--signal);animation:pulse 2.4s infinite}
.hero h1{font-size:clamp(2.3rem,4.4vw,3.85rem);max-width:20ch;letter-spacing:-.02em;line-height:1.08}
.grad{background:linear-gradient(100deg,var(--head) 0%,var(--head) 40%,var(--accent) 75%,var(--signal) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{margin-top:28px;max-width:62ch;font-size:1.14rem;color:color-mix(in srgb,var(--fg) 92%,var(--head))}
.hero .lede + p{max-width:62ch;color:var(--muted)}
.tenets{margin:30px 0 40px;font-weight:600;font-size:.92rem;color:var(--accent)}
.tenets.chips{display:flex;flex-wrap:wrap;gap:8px}
.tenets.chips span{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;font-size:.84rem;font-weight:600;color:var(--head);
  background:color-mix(in srgb,var(--fg) 6%,transparent);border:1px solid color-mix(in srgb,var(--fg) 12%,transparent)}
.tenets.chips span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.infra{position:relative;border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg) 70%,#000 30%)}
.infra .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-top:24px;padding-bottom:24px;font-size:.9rem;color:var(--muted)}
.infra strong{color:var(--head);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}
.infra span{display:inline-flex;align-items:center;gap:9px}
.infra span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal)}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding:96px 0 88px}
.crumbs{font-size:.86rem;color:var(--muted);margin-bottom:26px;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--fg) 6%,transparent);border:1px solid color-mix(in srgb,var(--fg) 10%,transparent)}
.crumbs a{color:var(--muted);text-decoration:none;transition:color .2s}
.crumbs a:hover{color:var(--head)}
.crumbs span[aria-hidden]{margin:0 2px;opacity:.6}
.crumbs [aria-current]{color:var(--accent);font-weight:600}
.page-hero h1{font-size:clamp(2.2rem,4.2vw,3.5rem);max-width:22ch;letter-spacing:-.02em;line-height:1.1}
.page-hero .lede{margin-top:26px;max-width:64ch;font-size:1.13rem}
.page-hero .btns{margin-top:36px}

/* ---------- Buttons & links ---------- */
.btns{display:flex;flex-wrap:wrap;gap:14px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;font:inherit;font-weight:600;font-size:.95rem;text-decoration:none;
  border:1px solid var(--accent);border-radius:var(--r-sm);cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease-out),translate .3s var(--ease-out),box-shadow .35s var(--ease-out),background .25s,color .25s,border-color .25s}
.btn::after{content:"→";display:inline-block;transition:transform .35s var(--ease-out)}
.btn:hover::after{transform:translateX(4px)}
.btn-solid{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--signal)));color:var(--on-accent);border-color:transparent;
  box-shadow:0 8px 24px -10px color-mix(in srgb,var(--accent) 80%,transparent)}
.btn-solid::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease-out)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px color-mix(in srgb,var(--accent) 90%,transparent)}
.btn-solid:hover::before{transform:translateX(120%)}
.btn-ghost{background:color-mix(in srgb,var(--fg) 3%,transparent);color:var(--head);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.btn-ghost:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:36px;font-weight:600;color:var(--accent);text-decoration:none;padding-bottom:3px;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .4s var(--ease-out),gap .3s}
.more::after{content:"→"}
.more:hover{gap:14px;background-size:0 1px;background-position:100% 100%}

/* ---------- Sections ---------- */
.section{position:relative;padding:112px 0}
.section.s-dark{overflow:hidden;isolation:isolate}
.section.s-dark::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(50% 60% at 100% 0%,color-mix(in srgb,var(--signal) 14%,transparent),transparent 70%),
             radial-gradient(40% 50% at 0% 100%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%)}
.section.s-alt{background-image:radial-gradient(color-mix(in srgb,var(--accent) 14%,transparent) 1px,transparent 1px);background-size:26px 26px;background-position:-13px -13px}
.section.s-alt > .wrap{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.section > .wrap > .eyebrow::before,.section > .wrap > div > .eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--signal))}
h2.title{font-size:clamp(1.95rem,3.6vw,2.9rem);max-width:24ch;margin-bottom:26px;letter-spacing:-.015em;line-height:1.12}
.intro{color:var(--muted);font-size:1.06rem}
.closing{position:relative;margin-top:60px;padding:22px 26px 22px 30px;border-radius:var(--r);font-family:var(--serif);font-size:1.25rem;line-height:1.5;max-width:66ch;color:var(--head);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 85%)}
.closing::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--signal))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}

/* Card surface shared by mandates, columns, paths, lists */
.mandate,.col,.path,.env-list li,.grid-2x2 .col{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s}
.s-light .mandate,.s-light .col,.s-light .path,.s-alt .mandate,.s-alt .col,.s-alt .path{box-shadow:0 1px 2px rgba(11,31,68,.04),0 8px 24px -16px rgba(11,31,68,.18)}
.mandate::before,.col::before,.path::before,.env-list li::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--signal) 14%,transparent),transparent 45%)}
.mandate:hover,.col:hover,.path:hover,.env-list li:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 24px 48px -24px color-mix(in srgb,var(--accent) 55%,rgba(2,8,24,.6))}
.mandate:hover::before,.col:hover::before,.path:hover::before,.env-list li:hover::before{opacity:1}
.mandate > *,.col > *,.path > *,.env-list li > *{position:relative}

/* Mandates */
.mandates{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.mandate{padding:34px 30px 26px;overflow:hidden}
.mandate::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--signal));transform-origin:0 50%;transform:scaleX(.18);transition:transform .7s var(--ease-out)}
.mandate:hover::after{transform:scaleX(1)}
.mandate h3{font-size:1.8rem;letter-spacing:-.01em}
.mandate .sub{display:inline-block;color:var(--accent);font-weight:600;font-size:.86rem;margin:10px 0 18px;padding:4px 11px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.mandate h4{font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:24px 0 10px;color:var(--muted)}
.mandate ul{margin:0;padding:0;list-style:none}
.mandate li{position:relative;margin-bottom:8px;padding-left:24px}
.mandate li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

/* Columns */
.cols{display:grid;gap:24px;margin-top:56px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.col{padding:28px 26px 22px}
.col h3{font-size:1.28rem;margin-bottom:12px}
.col p{color:var(--muted);font-size:.97rem}
.col p:last-child{margin-bottom:0}
.col .n{display:inline-grid;place-items:center;width:52px;height:52px;margin-bottom:20px;border-radius:12px;font-family:var(--serif);font-size:1.35rem;line-height:1;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);transition:background .4s,color .4s,transform .5s var(--ease-out)}
.col:hover .n{background:var(--accent);color:var(--on-accent);transform:rotate(-6deg) scale(1.05)}
.col .eyebrow{font-size:.72rem;margin-bottom:12px}

/* Pipeline: a vertical timeline whose rail fills as you scroll */
.pull{position:relative;font-family:var(--serif);font-size:1.5rem;line-height:1.4;padding:4px 0 4px 26px;margin-top:34px;color:var(--head)}
.pull::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--signal))}
.pipeline{position:relative;list-style:none;margin:0;padding:0;counter-reset:step}
.pipeline::before,.pipeline::after{content:"";position:absolute;left:23px;top:28px;bottom:28px;width:2px;border-radius:2px}
.pipeline::before{background:var(--line)}
.pipeline::after{background:linear-gradient(180deg,var(--accent),var(--signal));transform-origin:50% 0;transform:scaleY(var(--fill,1));transition:transform .2s linear}
.pipeline li{position:relative;z-index:1;display:grid;grid-template-columns:48px 1fr;gap:22px;padding:18px 0}
.pipeline li::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font-family:var(--serif);font-size:1.25rem;color:var(--accent);
  background:var(--bg);border:2px solid color-mix(in srgb,var(--accent) 45%,var(--line));transition:background .4s,color .4s,box-shadow .4s,border-color .4s}
.pipeline li > div{padding:16px 20px;border-radius:var(--r);border:1px solid transparent;transition:background .4s,border-color .4s,transform .5s var(--ease-out)}
.pipeline li:hover > div{background:var(--card);border-color:var(--line);transform:translateX(6px)}
.pipeline li.lit::before,.pipeline li:hover::before{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 16%,transparent)}
.pipeline h3{font-size:1.2rem;margin-bottom:6px}
.pipeline p{color:var(--muted);font-size:.97rem;margin:0}
.pipeline li.focus h3{color:var(--accent)}
.pipeline li.focus > div{background:color-mix(in srgb,var(--accent) 8%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}

/* Lists */
.env-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.env-list li{padding:26px 28px 26px 30px;overflow:hidden}
.env-list li::after{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--accent),var(--signal))}
.env-list h3{font-size:1.3rem;margin-bottom:8px}
.env-list p{color:var(--muted);margin:0;font-size:.98rem}
.ticks{list-style:none;padding:0;margin:20px 0}
.ticks li{padding:13px 0 13px 36px;border-bottom:1px solid var(--line);position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:14px;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.ticks li::after{content:"";position:absolute;left:7px;top:20px;width:8px;height:5px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

/* Risk */
.statement{font-family:var(--serif);line-height:1.25;font-size:clamp(1.6rem,2.8vw,2.2rem);margin:38px 0 0;
  background:linear-gradient(100deg,var(--accent),var(--signal) 60%,var(--head));-webkit-background-clip:text;background-clip:text;color:transparent}
.grid-2x2{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* Pathways */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:56px}
.path{padding:42px;overflow:hidden}
.path::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--signal))}
.path .tag{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;padding:5px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.path h3{font-size:1.7rem;margin-bottom:18px}
.path p{color:var(--muted)}
.path .btn{margin-top:14px}

/* Access + form */
.access{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:start}
.note{color:var(--muted);font-style:italic}
form{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px;box-shadow:0 30px 60px -36px rgba(11,31,68,.45)}
form::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--accent),var(--signal))}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:18px}
label{display:block;font-size:.86rem;font-weight:600;margin-bottom:7px;color:var(--head)}
.req{color:#D9534F}
input,select,textarea{width:100%;padding:13px 15px;font:inherit;font-size:.98rem;border:1px solid color-mix(in srgb,var(--fg) 20%,transparent);background:var(--field);color:var(--fg);border-radius:10px;
  transition:border-color .25s,box-shadow .25s}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--fg) 35%,transparent)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
input:user-invalid,select:user-invalid{border-color:#D9534F}
textarea{min-height:120px;resize:vertical}
.hint{font-size:.8rem;color:var(--muted);margin-top:5px}
form .btn{width:100%;margin-top:4px}
.form-status{margin-top:14px;font-size:.95rem}
.hp{position:absolute;left:-9999px}
.form-done{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);border-top:3px solid var(--accent);padding:40px}
.form-done h3{font-size:1.6rem;margin-bottom:10px}

/* Closing CTA */
.cta{text-align:center}
.cta .wrap{display:flex;flex-direction:column;align-items:center}
.cta .eyebrow::before{display:none}
.cta h2{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:20ch;margin-bottom:28px;letter-spacing:-.02em}
.cta .intro{margin-left:auto;margin-right:auto}
.cta .final{font-family:var(--serif);font-size:1.3rem;color:var(--accent);margin:30px 0 38px}
.cta .btns{justify-content:center}
.section.cta::before{background:radial-gradient(50% 70% at 50% 0%,color-mix(in srgb,var(--signal) 22%,transparent),transparent 70%),
  radial-gradient(40% 60% at 50% 110%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%)}

/* Footer */
footer{position:relative;padding:80px 0 32px;font-size:.93rem}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.6}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.foot h4{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:11px}
.foot a{text-decoration:none;transition:color .2s}
.foot ul a{display:inline-block;transition:color .2s,transform .3s var(--ease-out)}
.foot ul a:hover{transform:translateX(4px)}
.foot a:hover{color:var(--head)}
.foot .brand{margin-bottom:18px}
.foot > div:first-child > a:last-child{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;transition:border-color .25s,color .25s,background .25s}
.foot > div:first-child > a:last-child:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.copy{border-top:1px solid var(--line);margin-top:56px;padding-top:24px;color:var(--muted)}
.to-top{position:fixed;right:20px;bottom:20px;z-index:40;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--signal));color:var(--on-accent);text-decoration:none;font-weight:700;
  box-shadow:0 12px 28px -10px rgba(2,8,24,.6);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s,transform .35s var(--ease-out)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}

/* ---------- Execution gate illustration ---------- */
.gate{position:relative;margin:0;padding:24px 24px 18px;border-radius:var(--r-lg);
  background:linear-gradient(160deg,color-mix(in srgb,var(--fg) 8%,transparent),color-mix(in srgb,var(--fg) 2%,transparent));
  border:1px solid color-mix(in srgb,var(--fg) 14%,transparent);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7),inset 0 1px 0 color-mix(in srgb,var(--fg) 12%,transparent)}
.gate::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,color-mix(in srgb,var(--signal) 70%,transparent),transparent 35%,transparent 65%,color-mix(in srgb,var(--glow) 55%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:.8}
.gate-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.gate-title{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--head)}
.gate-title::before{content:"";width:8px;height:8px;border-radius:50%;background:#3DDC97;box-shadow:0 0 0 0 #3DDC97;animation:pulse-g 2s infinite}
.gate-state{font-size:.78rem;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted);transition:all .3s}
.gate-state.on{color:var(--on-accent);background:var(--signal);border-color:var(--signal);box-shadow:0 0 20px -2px var(--signal)}
.gate canvas{width:100%;height:260px;display:block}
.gate-read{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.gate-read div{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--fg) 5%,transparent);border:1px solid color-mix(in srgb,var(--fg) 8%,transparent)}
.gate-read b{display:block;margin-top:4px;font-family:var(--serif);font-weight:500;font-size:1.35rem;letter-spacing:0;text-transform:none;color:var(--head);font-variant-numeric:tabular-nums}
.gate-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:.76rem;color:var(--muted)}
.gate-legend i{display:inline-block;width:14px;height:8px;margin-right:6px;vertical-align:middle;border-radius:2px}
.gate-legend .sw-band{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.gate-legend .sw-edge{background:var(--signal)}
.gate-note{font-size:.72rem;color:var(--muted);margin:10px 0 0;opacity:.85}

/* ---------- Page hero with illustration ---------- */
.page-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.ill-fig{margin:0}
.ill-fig figcaption{font-size:.74rem;color:var(--muted);margin-top:10px}
.page-hero .ill-fig .ill{border-radius:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.inline-ill{margin:36px 0 0}

/* ---------- Illustrations (follow the active color scheme) ---------- */
.ill{width:100%;height:auto;display:block}
.ill .bg{fill:var(--card);stroke:var(--line);rx:16px}
.ill .sb{fill:var(--bg)}
.ill .ln{stroke:var(--line);fill:none}
.ill .mu{fill:var(--muted)}
.ill .mus{stroke:var(--muted);fill:none}
.ill .ac{fill:var(--accent)}
.ill .acs{stroke:var(--accent);fill:none}
.ill .fa{fill:var(--accent);fill-opacity:.16}
.ill .sg{fill:var(--signal)}
.ill .sgs{stroke:var(--signal);fill:none}
.ill .hd{fill:var(--head)}
.ill text{font-family:var(--sans);font-size:12px;fill:var(--muted)}
.ill text.h{fill:var(--head);font-weight:600;font-size:13px}
.ill text.big{fill:var(--head);font-family:var(--serif);font-size:18px}
.ill text.s{fill:var(--signal);font-weight:600}
.ill text.a{fill:var(--accent);font-weight:600}
.ill text.oa{fill:var(--on-accent);font-weight:600}
.ill text.tab{font-variant-numeric:tabular-nums}

/* ---------- Motion ---------- */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-4%,3%,0) scale(1.06)}100%{transform:translate3d(3%,-2%,0) scale(1.02)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--signal) 70%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes pulse-g{0%{box-shadow:0 0 0 0 rgba(61,220,151,.7)}70%{box-shadow:0 0 0 8px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  /* Page-load moment for the hero */
  .hero-copy > *,.page-hero-copy > *{animation:rise .9s var(--ease-out) both}
  .hero-copy > *:nth-child(2),.page-hero-copy > *:nth-child(2){animation-delay:.1s}
  .hero-copy > *:nth-child(3),.page-hero-copy > *:nth-child(3){animation-delay:.2s}
  .hero-copy > *:nth-child(4),.page-hero-copy > *:nth-child(4){animation-delay:.3s}
  .hero-copy > *:nth-child(n+5),.page-hero-copy > *:nth-child(n+5){animation-delay:.4s}
  .gate,.page-hero .ill-fig{animation:fade-in 1.1s .35s var(--ease-out) backwards}
  .infra{animation:rise .9s .6s var(--ease-out) both}
  .hero-copy > h1.words,.page-hero-copy > h1.words{animation:none}
  h1.words .w{animation:word .8s var(--ease-out) both;animation-delay:calc(.15s + var(--i) * .06s)}
  @keyframes word{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}

  /* Scroll reveal (classes are added by site.js, so nothing hides without it) */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0s)}
  .reveal.in{opacity:1;transform:none}
  .reveal.in:is(.mandate,.col,.path,li):hover{transform:translateY(-6px)}
  .reveal.in:is(.mandate,.col,.path,li){transition:opacity .9s var(--ease-out) var(--d,0s),transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- Color picker (preview only: shows on your computer or with ?preview) ---------- */
.cp{position:fixed;left:16px;bottom:16px;z-index:90;font-family:var(--sans);color:#18202B}
.cp button{font:inherit;cursor:pointer}
.cp-toggle{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#FFFFFF;color:#18202B;border:1px solid #C9D2DE;box-shadow:0 6px 20px rgba(0,0,0,.25);font-weight:600;font-size:.88rem}
.cp-toggle i{width:14px;height:14px;border-radius:50%;background:conic-gradient(#0B1F44 0 25%,#9EC0F2 0 50%,#C9A86A 0 75%,#5FC4B8 0)}
.cp-panel{position:absolute;left:0;bottom:52px;width:300px;max-width:calc(100vw - 32px);background:#FFFFFF;border:1px solid #C9D2DE;box-shadow:0 18px 40px rgba(0,0,0,.3);padding:16px}
.cp-title{font-weight:700;font-size:.92rem;margin:0 0 10px}
.cp-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cp-list button{display:flex;align-items:center;gap:8px;padding:8px;background:#F4F6F9;border:1px solid transparent;color:#18202B;font-size:.85rem;text-align:left}
.cp-list button:hover{border-color:#C9D2DE}
.cp-list button[aria-pressed="true"]{border-color:#18202B;background:#FFFFFF;font-weight:600}
.cp-sw{display:inline-flex;flex-shrink:0;width:26px;height:18px;border:1px solid rgba(0,0,0,.15)}
.cp-sw b{flex:1}
.cp-note{font-size:.78rem;color:#56637A;margin:12px 0 0;line-height:1.45}
.cp-note code{background:#EEF1F5;padding:1px 4px;font-size:.78rem}
.cp :focus-visible{outline:2px solid #1F4A8F;outline-offset:2px}
@media print{.cp{display:none}}

/* ---------- v2 refinements ---------- */
.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}

/* Hero: cursor light + node network + cyan glow in the drifting light */
.hero,.page-hero{background-image:radial-gradient(520px circle at var(--hx,72%) var(--hy,32%),color-mix(in srgb,var(--signal) 13%,transparent),transparent 62%)}
.hero::before,.page-hero::before{background:
  radial-gradient(38% 42% at 78% 30%,color-mix(in srgb,var(--signal) 30%,transparent),transparent 70%),
  radial-gradient(30% 36% at 92% 78%,color-mix(in srgb,var(--glow) 16%,transparent),transparent 70%),
  radial-gradient(34% 40% at 10% 88%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),
  radial-gradient(30% 30% at 45% 8%,color-mix(in srgb,var(--signal) 12%,transparent),transparent 70%)}
.net{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 35%,#000 100%)}

.net.on{opacity:.9}

/* Headline words */
h1.words .w{display:inline-block}
h1.words .hl{background:linear-gradient(100deg,var(--accent),var(--glow));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}

/* Infrastructure ticker */
.infra .wrap.has-ticker{flex-wrap:nowrap;gap:32px}
.infra .wrap.has-ticker strong{flex-shrink:0;padding-right:28px;border-right:1px solid var(--line)}
.ticker{position:relative;display:flex;flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-row{display:flex;flex-shrink:0;gap:48px;padding-right:48px;animation:ticker 38s linear infinite}
.ticker:hover .ticker-row{animation-play-state:paused}
.ticker span{white-space:nowrap}
@keyframes ticker{to{transform:translateX(-100%)}}

/* Gradients blend into the glow tone */
.closing::before,.pull::before,.env-list li::after{background:linear-gradient(180deg,var(--accent),var(--glow))}
.mandate::after,.path::after,form::before{background:linear-gradient(90deg,var(--accent),var(--signal),var(--glow))}
.section > .wrap > .eyebrow::before,.section > .wrap > div > .eyebrow::before{background:linear-gradient(90deg,var(--accent),var(--glow))}
.statement{background:linear-gradient(100deg,var(--accent),var(--glow) 55%,var(--head));-webkit-background-clip:text;background-clip:text}
.pipeline::after{background:linear-gradient(180deg,var(--accent),var(--signal),var(--glow))}
.to-top{background:linear-gradient(135deg,var(--accent),var(--glow))}

/* Section titles: a short accent rule draws in under h2 when revealed */
h2.title{position:relative;padding-bottom:20px}
h2.title::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--glow));transform-origin:0 50%;transition:transform 1s .25s var(--ease-out)}
h2.title.reveal::after{transform:scaleX(0)}
h2.title.reveal.in::after{transform:scaleX(1)}

/* Dark sections: a thin light travels along the top edge */
.section.s-dark::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--glow),var(--signal),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:sweep 7s linear infinite;opacity:.7}
@keyframes sweep{from{background-position:-50% 0}to{background-position:150% 0}}

/* ---------- Partnership dialog ---------- */
html.modal-open{overflow:hidden}
.modal{width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:22px;background:var(--bg);color:var(--fg);
  box-shadow:0 40px 100px -30px rgba(2,8,24,.75);overflow:auto;overscroll-behavior:contain}
.modal::backdrop{background:rgba(4,12,32,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal[open]{animation:modal-in .45s var(--ease-out)}
.modal[open]::backdrop{animation:fade .35s ease}
.modal.closing{animation:modal-out .22s ease forwards}
.modal.closing::backdrop{animation:fade .22s ease reverse forwards}
.modal-inner{position:relative;padding:44px 44px 36px}
.modal-inner::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--signal),var(--glow))}
.modal h2{font-size:clamp(1.7rem,3vw,2.2rem);margin-bottom:12px;letter-spacing:-.015em}
.modal-lede{color:var(--muted);max-width:56ch;margin-bottom:28px}
.modal form{padding:0;border:0;border-radius:0;box-shadow:none;background:none}
.modal form::before{display:none}
.modal-close{position:absolute;right:18px;top:18px;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--head);
  font-size:1.5rem;line-height:1;cursor:pointer;transition:transform .35s var(--ease-out),background .25s,border-color .25s}
.modal-close:hover{transform:rotate(90deg);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.modal .form-done{border:0;padding:8px 0 0;background:none}
@keyframes modal-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes modal-out{to{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Risk profile cards */
.risk{border:0;padding:0;margin:0 0 26px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.risk legend{float:left;grid-column:1/-1;width:100%;padding:0;margin-bottom:10px;font-size:.86rem;font-weight:600;color:var(--head)}
.risk-opt{position:relative;display:block;margin:0;cursor:pointer;font-weight:400}
.risk-opt input{position:absolute;opacity:0;width:1px;height:1px}
.risk-card{display:flex;flex-direction:column;gap:8px;height:100%;padding:18px 16px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);
  transition:border-color .25s,box-shadow .3s,transform .35s var(--ease-out),background .25s}
.risk-card b{font-family:var(--serif);font-weight:500;font-size:1.08rem;line-height:1.25;color:var(--head);padding-right:22px}
.risk-card small{font-size:.82rem;line-height:1.45;color:var(--muted)}
.risk-opt:hover .risk-card{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.risk-opt input:focus-visible + .risk-card{outline:2px solid var(--accent);outline-offset:2px}
.risk-opt input:checked + .risk-card{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--card));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent),0 14px 30px -18px var(--accent)}
.risk-opt input:checked + .risk-card::after{content:"";position:absolute;right:14px;top:14px;width:20px;height:20px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;animation:pop .35s var(--ease-out)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.risk-meter{display:flex;gap:4px;margin-bottom:4px}
.risk-meter i{width:22px;height:6px;border-radius:3px;background:var(--line)}
.risk-meter[data-level="1"] i:nth-child(-n+1){background:#22A06B}
.risk-meter[data-level="2"] i:nth-child(-n+2){background:#E2A93B}
.risk-meter[data-level="3"] i:nth-child(-n+3){background:#E5484D}


/* Shown after an inquiry opens the visitor's email app */
.mail-help{display:grid;gap:6px;margin-top:4px;padding:16px 18px;border-radius:12px;font-size:.9rem;line-height:1.5;color:var(--fg);
  background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);animation:rise .5s var(--ease-out)}
.mail-help b{color:var(--head)}
.mail-alt{color:var(--muted);font-size:.84rem}
.mail-alt a,.mail-alt button{color:var(--accent);font:inherit;font-weight:600;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav{flex-direction:column;align-items:stretch;gap:2px;min-height:0;padding-top:12px}
  .scrolled .nav{min-height:0}
  .brand-logo,.scrolled .brand-logo{height:38px}
  .nav-links{overflow-x:auto;scrollbar-width:none;margin:0 -24px;padding:0 10px 4px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 36px),transparent);
            mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 36px),transparent)}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{padding:12px 14px}
  html{scroll-padding-top:130px}
}
@media (max-width:980px){
  .hero-grid,.page-hero-grid,.mandates,.cols-3,.paths,.split,.access,.foot{grid-template-columns:1fr}
  .cols-4{grid-template-columns:1fr 1fr}
  .split,.access{gap:52px}
  .section{padding:84px 0}
  .hero-grid{gap:48px;padding-bottom:80px}
  .gate canvas{height:220px}
  .page-hero .ill-fig{max-width:520px}
}
@media (max-width:560px){
  .cols-4,.grid-2x2,.row{grid-template-columns:1fr}
  .hero{padding:72px 0 0}
  .hero-grid{padding-bottom:64px}
  .page-hero{padding:64px 0 60px}
  .section{padding:72px 0}
  .path,form,.form-done{padding:26px}
  .mandate{padding:28px 24px 22px}
  .brand-name{font-size:1.05rem}
  .btns .btn{width:100%}
  .gate{padding:18px 16px 14px}
  .gate-read b{font-size:1.1rem}
  .gate-read div{padding:10px}
  .closing{font-size:1.12rem;padding:18px 18px 18px 24px}
  .kicker{font-size:.72rem;letter-spacing:.1em}
  .modal-inner{padding:36px 20px 26px}
  .risk{grid-template-columns:1fr}
  .infra .wrap.has-ticker{flex-direction:column;align-items:stretch;gap:12px}
  .infra .wrap.has-ticker strong{padding-right:0;border-right:0;font-size:.72rem}
}