/* VPS v3 — "Clean Pulse" shared stylesheet
Implements the active design system from the VPS brand kit (brand-v3).
Do not hardcode hex — use tokens. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
/* KEPT FROM LOGO */
--orange:#EF5227;
--orange-600:#C83D18;
--orange-100:#FFE8DF;
--teal:#006A90;
--teal-900:#003A52;
--teal-500:#2D8AAE;
--teal-100:#CFE3EC;
/* NEUTRALS — cool, crisp */
--bg:#FBFBFA;
--surface:#FFFFFF;
--elev:#F5F5F4;
--ink:#0B0F12;
--ink-2:#2A3138;
--ink-3:#5B6670;
--ink-4:#8A939C;
--line:#E5E7EA;
--line-2:#EFF1F3;
--ok:#1F8A5B;
--warn:#B8841E;
--fs:'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--fb:'Inter', ui-sans-serif, system-ui, sans-serif;
--fm:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--r-sm:4px; --r-md:8px; --r-lg:16px; --r-xl:24px; --r-full:999px;
--ease:cubic-bezier(0.2, 0.7, 0.1, 1);
--max:1320px;
--gutter:clamp(20px, 4vw, 48px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--bg);
color:var(--ink);
font-family:var(--fb);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
/* ─ NAV ─ Fixed overlay with progressive scroll fade.
The pill's surface (bg, blur, border, shadow) is driven by --nav-p
(0 at top → 1 after ~120px scroll). No binary toggle — silky crossfade. */
:root{ --nav-p: 0; }
.nav-outer{
position:fixed;top:0;left:0;right:0;z-index:50;
padding:16px var(--gutter) 0;
max-width:100%;margin:0;
pointer-events:none;
}
.nav{
display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:10px 14px 10px 20px;
border-radius:var(--r-full);
max-width:var(--max);margin:0 auto;
pointer-events:auto;
/* progressive pill surface */
background:rgba(255,255,255, calc(0.66 * var(--nav-p)));
backdrop-filter:blur(calc(16px * var(--nav-p))) saturate(calc(1 + 0.12 * var(--nav-p)));
-webkit-backdrop-filter:blur(calc(16px * var(--nav-p))) saturate(calc(1 + 0.12 * var(--nav-p)));
border:1px solid rgba(229,231,234, calc(0.75 * var(--nav-p)));
box-shadow:0 4px 28px -14px rgba(0,0,0, calc(0.14 * var(--nav-p))),
0 1px 0 0 rgba(255,255,255, calc(0.55 * var(--nav-p))) inset;
transform:translateY(calc(-2px * (1 - var(--nav-p))));
transition:transform 360ms var(--ease);
}
/* Dark-hero variant: text + CTA crossfade from light (at top) to ink (once pill is solid). */
body.has-dark-hero .nav__brand{
color:color-mix(in srgb, var(--ink) calc(100% * var(--nav-p)), #fff);
}
body.has-dark-hero .nav ul li a{
color:color-mix(in srgb, var(--ink-2) calc(100% * var(--nav-p)), rgba(255,255,255,.94));
transition:color 200ms var(--ease);
}
body.has-dark-hero .nav ul li a:hover{color:var(--orange)}
body.has-dark-hero .nav__cta{
background:color-mix(in srgb, var(--ink) calc(100% * var(--nav-p)), rgba(255,255,255,.14));
color:#fff;
box-shadow:inset 0 0 0 1px color-mix(in srgb, transparent calc(100% * var(--nav-p)), rgba(255,255,255,.38));
transition:background 200ms var(--ease), box-shadow 200ms var(--ease);
}
body.has-dark-hero .nav__cta:hover{
background:var(--orange);
box-shadow:inset 0 0 0 1px var(--orange);
}
/* Fallback for browsers without color-mix (older Safari < 16.2) */
@supports not (color: color-mix(in srgb, red, blue)) {
body.has-dark-hero .nav__brand{color:#fff}
body.has-dark-hero .nav ul li a{color:rgba(255,255,255,.94)}
body.has-dark-hero .nav__cta{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)}
}
.nav-outer{padding-inline:var(--gutter);max-width:var(--max);margin:0 auto}
.nav__brand{display:flex;align-items:center;gap:10px;font-family:var(--fs);font-weight:500;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.nav__brand svg{width:32px;height:32px}
.nav__brand .dot-logo{display:inline-flex;align-items:center;gap:1px;font-size:18px}
.nav__brand .dot-logo b{font-weight:600}
.nav__brand .dot-logo i{width:6px;height:6px;border-radius:50%;background:var(--orange);display:inline-block;margin:0 1px}
.nav__brand-tag{font-family:var(--fm);font-size:10px;color:var(--ink-4);letter-spacing:.06em;text-transform:uppercase;margin-left:4px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;font-family:var(--fb);font-size:13.5px;font-weight:500;color:var(--ink-2)}
.nav ul li a{transition:color 160ms var(--ease)}
.nav ul li a:hover{color:var(--orange)}
.nav__cta{font-family:var(--fb);font-weight:500;font-size:13px;padding:9px 16px;border-radius:var(--r-full);background:var(--ink);color:#fff;display:inline-flex;align-items:center;gap:6px;transition:background 180ms var(--ease)}
.nav__cta:hover{background:var(--teal-900)}
@media (max-width:820px){
.nav ul{display:none}
.nav{gap:12px}
}
/* ─ BUTTONS ─ */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fb);font-weight:500;font-size:14px;padding:12px 22px;border-radius:var(--r-full);cursor:pointer;transition:all 180ms var(--ease);letter-spacing:-.005em;border:0;white-space:nowrap}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--teal-900)}
.btn-accent{background:var(--orange);color:#fff}
.btn-accent:hover{background:var(--orange-600)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{background:var(--elev)}
.btn-link{padding:0;background:transparent;color:var(--ink);border-bottom:1px solid var(--orange);border-radius:0;padding-bottom:2px}
.btn-on-dark{background:#fff;color:var(--ink)}
.btn-on-dark:hover{background:var(--orange);color:#fff}
.btn-ghost-on-dark{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.btn-ghost-on-dark:hover{background:rgba(255,255,255,.1)}
.btn .arrow{width:14px;height:14px;transition:transform 180ms var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
/* ─ EYEBROW + PULSE DOT ─ */
.eye{font-family:var(--fm);font-size:11px;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px}
.eye::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);animation:pulse 1.4s var(--ease) infinite}
.eye.no-dot::before{display:none}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}
@media (prefers-reduced-motion:reduce){.eye::before{animation:none}}
/* ─ ORANGE DOT LIGATURE — the brand's iconographic device ─ */
.vps{font-family:var(--fs);font-weight:600;letter-spacing:-.015em}
.vps .dot{display:inline-block;width:.3em;height:.3em;border-radius:50%;background:var(--orange);vertical-align:.2em;margin:0 .04em}
/* ─ SECTION SCAFFOLDING ─ */
section.sec{padding:clamp(72px,10vw,128px) 0;border-bottom:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:96px 1fr;gap:32px;margin-bottom:clamp(40px,5vw,64px);align-items:start}
.section-head .num{font-family:var(--fm);font-size:11px;letter-spacing:.08em;color:var(--orange);padding-top:10px;text-transform:uppercase}
.section-head h2{font-family:var(--fs);font-weight:500;font-size:clamp(36px,5vw,60px);line-height:1.02;letter-spacing:-.028em;margin:0 0 18px;max-width:20ch;color:var(--ink)}
.section-head h2 .tint{color:var(--teal-900)}
.section-head h2 .accent{color:var(--orange)}
.section-head h2 .mute{color:var(--ink-4)}
.section-head .desc{font-family:var(--fb);font-size:16px;line-height:1.55;color:var(--ink-3);max-width:62ch;margin:0}
@media (max-width:820px){
.section-head{grid-template-columns:1fr;gap:18px}
.section-head .num{padding-top:0}
}
/* ─ HERO ─ */
.hero{padding:clamp(56px,8vh,96px) 0 clamp(64px,10vh,112px);border-bottom:1px solid var(--line)}
.hero h1{font-family:var(--fs);font-weight:500;font-size:clamp(48px,8vw,112px);line-height:.95;letter-spacing:-.035em;margin:24px 0 32px;max-width:15ch;color:var(--ink)}
.hero h1 .tint{color:var(--teal-900)}
.hero h1 .accent{color:var(--orange)}
.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(32px,5vw,64px);margin-top:36px;align-items:end}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero-lead{font-family:var(--fb);font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--ink-2);max-width:52ch;margin:0;font-weight:400}
.hero-meta{font-family:var(--fm);font-size:12px;letter-spacing:.02em;display:grid;grid-template-columns:auto 1fr;gap:10px 28px;margin:0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero-meta dt{color:var(--orange);text-transform:uppercase;letter-spacing:.08em;margin:0}
.hero-meta dd{color:var(--ink-2);margin:0}
.hero-ctas{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
/* ─ LEDE BLOCK (page-level) ─ */
.lede{font-family:var(--fb);font-size:20px;line-height:1.5;color:var(--ink-2);max-width:54ch}
/* ─ PULL / PRESS QUOTE ─ */
.pull{font-family:var(--fs);font-weight:500;font-style:italic;font-size:clamp(22px,2.6vw,30px);line-height:1.25;color:var(--teal-900);letter-spacing:-.01em;padding-left:20px;border-left:2px solid var(--orange);max-width:40ch}
/* ─ STAT CARDS ─ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.stats{grid-template-columns:1fr}}
.stat-card{display:flex;flex-direction:column;gap:10px;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.stat-card .k{font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);display:inline-flex;align-items:center;gap:8px}
.stat-card .k::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange)}
.stat-card .v{font-family:var(--fs);font-weight:500;font-size:clamp(48px,6vw,80px);line-height:1;letter-spacing:-.025em;color:var(--ink)}
.stat-card .v em{font-style:normal;font-size:.42em;color:var(--orange);font-weight:500;margin-left:.1em}
.stat-card .d{font-family:var(--fb);font-size:13.5px;color:var(--ink-3);line-height:1.5}
/* ─ PILLARS (feature grid) ─ */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.pillars{grid-template-columns:1fr}}
.pillar{padding:36px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);display:flex;flex-direction:column;gap:16px;transition:border-color 180ms var(--ease),transform 180ms var(--ease)}
.pillar:hover{border-color:var(--orange)}
.pillar .k{font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);display:inline-flex;align-items:center;gap:8px}
.pillar .k::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange)}
.pillar__icon{width:40px;height:40px;color:var(--teal-900);margin:4px 0}
.pillar h3{font-family:var(--fs);font-weight:500;font-size:26px;line-height:1.1;letter-spacing:-.018em;margin:0;color:var(--ink)}
.pillar p{font-family:var(--fb);font-size:14.5px;line-height:1.6;color:var(--ink-3);margin:0}
/* ─ TAGS ─ */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:11px;letter-spacing:.04em;padding:5px 10px;border-radius:var(--r-sm);background:var(--elev);color:var(--ink-2);border:1px solid var(--line)}
.tag-accent{background:var(--orange-100);color:var(--orange-600);border-color:transparent}
.tag-teal{background:var(--teal-100);color:var(--teal-900);border-color:transparent}
.tag-dark{background:var(--ink);color:#fff;border-color:transparent}
.tag .dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}
/* ─ TWO-COLUMN EDITORIAL ─ */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:820px){.two-col{grid-template-columns:1fr}}
.two-col p{font-family:var(--fb);font-size:17px;line-height:1.6;color:var(--ink-2);max-width:54ch;margin:0 0 14px}
/* ─ LIST CLEAN (hairline rows) ─ */
.list-clean{list-style:none;margin:0;padding:0}
.list-clean li{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:18px 0;border-top:1px solid var(--line);font-family:var(--fb);font-size:15px;color:var(--ink-2);align-items:baseline}
.list-clean li:first-child{border-top:0}
.list-clean li .k{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;color:var(--ink-4);text-transform:uppercase}
.list-clean li .v{color:var(--ink)}
@media (max-width:640px){.list-clean li{grid-template-columns:1fr;gap:4px}}
/* ─ SPEC TABLE (same pattern, wider) ─ */
.spec-table{border-top:1px solid var(--line)}
.spec-row{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.spec-row dt{font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin:0}
.spec-row dd{margin:0;font-family:var(--fs);font-weight:500;font-size:clamp(18px,1.4vw,22px);line-height:1.35;color:var(--ink);letter-spacing:-.01em}
@media (max-width:640px){.spec-row{grid-template-columns:1fr;gap:4px}}
/* ─ AUDIENCE APP CARDS (colored tiles) ─ */
.aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:820px){.aud-grid{grid-template-columns:1fr}}
.aud{aspect-ratio:auto;padding:44px;border-radius:var(--r-lg);display:flex;flex-direction:column;justify-content:space-between;min-height:380px;overflow:hidden;position:relative;transition:transform 240ms var(--ease)}
.aud:hover{transform:translateY(-2px)}
.aud::after{content:"";position:absolute;right:-80px;bottom:-80px;width:280px;height:280px;border-radius:50%;opacity:.10;transition:opacity 300ms var(--ease)}
.aud:hover::after{opacity:.18}
.aud-teal{background:var(--teal-900);color:#fff}
.aud-teal::after{background:var(--teal-500)}
.aud-orange{background:var(--orange);color:#fff}
.aud-orange::after{background:#fff}
.aud .eye{color:rgba(255,255,255,.85)}
.aud .eye::before{background:#fff}
.aud h3{font-family:var(--fs);font-weight:500;font-size:clamp(28px,3.2vw,40px);line-height:1.05;letter-spacing:-.025em;margin:16px 0 0;max-width:14ch;position:relative;z-index:2}
.aud h3 .acc{color:var(--orange)}
.aud-orange h3 .acc{color:var(--teal-900)}
.aud p{margin:18px 0 0;font-family:var(--fb);font-size:15.5px;line-height:1.6;max-width:40ch;color:rgba(255,255,255,.88);position:relative;z-index:2}
.aud .foot{margin-top:32px;display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:2}
.aud .btn{background:#fff;color:var(--ink)}
.aud .btn:hover{background:var(--ink);color:#fff}
.aud-orange .btn:hover{background:var(--teal-900)}
/* ─ ANATOMICAL GRID OVERLAY ─ */
.anatomical{position:relative}
.anatomical::before{content:"";position:absolute;inset:0;background-image:linear-gradient(0deg, rgba(255,255,255,.04) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);background-size:48px 48px;pointer-events:none;opacity:.9}
/* ─ ARTICLE TILES ─ */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tiles{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);transition:all 180ms var(--ease);min-height:240px}
.tile:hover{border-color:var(--orange);transform:translateY(-2px)}
.tile__type{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);display:inline-flex;align-items:center;gap:8px}
.tile__type::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange)}
.tile__date{font-family:var(--fm);font-size:10.5px;letter-spacing:.04em;color:var(--ink-4);margin-top:6px}
.tile__title{font-family:var(--fs);font-weight:500;font-size:21px;line-height:1.18;letter-spacing:-.015em;color:var(--ink);margin:18px 0 10px;flex:1}
.tile__summary{font-family:var(--fb);font-size:14px;color:var(--ink-3);line-height:1.55;margin:0 0 18px}
.tile__more{margin-top:auto;font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid var(--orange);padding-bottom:2px;align-self:flex-start}
.tile__more::after{content:"→";margin-left:2px;transition:transform 180ms var(--ease)}
.tile:hover .tile__more::after{transform:translateX(3px)}
.tile.is-hidden{display:none}
/* ─ FILTERS ─ */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,48px)}
.filters button{padding:8px 14px;font-family:var(--fm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface);transition:all 160ms var(--ease)}
.filters button:hover{border-color:var(--ink-3);color:var(--ink)}
.filters button.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
/* ─ FEATURED RESOURCE ─ */
.featured{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
@media (max-width:900px){.featured{grid-template-columns:1fr}}
.featured__main{padding:clamp(32px,4vw,56px);border-right:1px solid var(--line)}
@media (max-width:900px){.featured__main{border-right:0;border-bottom:1px solid var(--line)}}
.featured__side{padding:clamp(32px,4vw,56px);background:var(--elev);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.featured__side::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%, var(--orange-100) 0%, transparent 65%);opacity:.55}
.featured h3{font-family:var(--fs);font-weight:500;font-size:clamp(26px,3vw,40px);line-height:1.08;letter-spacing:-.02em;margin:16px 0;color:var(--ink)}
.featured h3 .accent{color:var(--orange)}
.featured h3 .tint{color:var(--teal-900)}
.featured p{font-family:var(--fb);font-size:16px;line-height:1.6;color:var(--ink-3);margin:0 0 24px}
/* ─ MARQUEE (collaborators) ─ */
.marquee{position:relative;overflow:hidden;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:3;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--surface),transparent)}
.marquee__track{display:flex;gap:clamp(48px,5vw,96px);animation:slide 38s linear infinite;width:max-content;align-items:center}
.marquee__item{font-family:var(--fs);font-size:22px;font-weight:500;color:var(--ink-2);letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;gap:12px;transition:color 180ms var(--ease)}
.marquee__item:hover{color:var(--orange)}
.marquee__item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex:0 0 auto}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}
/* ─ CLOSE CTA (dark band) ─ */
.close-cta{background:var(--teal-900);color:#fff;position:relative;overflow:hidden}
.close-cta .anatomical-bg{position:absolute;inset:0;background-image:linear-gradient(0deg, rgba(255,255,255,.045) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);background-size:48px 48px;pointer-events:none}
.close-cta::after{content:"";position:absolute;right:-120px;bottom:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle, var(--orange) 0%, transparent 60%);opacity:.18;pointer-events:none}
.close-cta .wrap{position:relative;z-index:2}
.close-cta .eye{color:rgba(255,255,255,.85)}
.close-cta .eye::before{background:#fff}
.close-cta h2{font-family:var(--fs);font-weight:500;font-size:clamp(40px,6vw,88px);line-height:.98;letter-spacing:-.035em;margin:22px 0;max-width:16ch;color:#fff}
.close-cta h2 .accent{color:var(--orange)}
.close-cta h2 .tint{color:var(--teal-100)}
.close-cta p{font-family:var(--fb);font-size:18px;line-height:1.5;max-width:52ch;color:rgba(255,255,255,.88);margin:0}
.close-cta .actions{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
/* ─ FOOTER ─ */
.foot{padding:56px 0 48px;background:var(--bg);border-top:1px solid var(--line)}
.foot__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,1fr);gap:48px;margin-bottom:48px}
@media (max-width:820px){.foot__top{grid-template-columns:1fr 1fr}}
@media (max-width:500px){.foot__top{grid-template-columns:1fr}}
.foot__col h5{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin:0 0 16px}
.foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-family:var(--fb);font-size:14px;color:var(--ink-2)}
.foot__col a:hover{color:var(--orange)}
.foot__brand{font-family:var(--fs);font-weight:500;font-size:24px;line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin:0 0 10px}
.foot__addr{font-family:var(--fm);font-size:11px;letter-spacing:.04em;color:var(--ink-3);line-height:1.7}
.foot__row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line);font-family:var(--fm);font-size:11px;letter-spacing:.04em;color:var(--ink-4)}
.foot__regulatory{max-width:80ch;margin-top:18px;font-family:var(--fb);font-size:12.5px;line-height:1.55;color:var(--ink-4);letter-spacing:0;text-transform:none}
/* ─ FORM ─ */
.form{display:grid;gap:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.form > label{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.field label .req,.form > label .req{color:var(--orange)}
.field input,.field select,.field textarea{font-family:var(--fb);font-size:14px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%;transition:outline 160ms var(--ease),border-color 160ms var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.field textarea{resize:vertical;min-height:100px}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
@media (max-width:640px){.checks{grid-template-columns:1fr}}
.check{display:flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--fb);font-size:14px;color:var(--ink-2);padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);transition:all 160ms var(--ease)}
.check:hover{border-color:var(--orange-100)}
.check:has(input:checked){background:var(--orange-100);border-color:var(--orange)}
.check input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1px solid var(--line);border-radius:3px;background:var(--surface);cursor:pointer;position:relative;flex:0 0 16px;transition:all 160ms var(--ease)}
.check input:checked{background:var(--orange);border-color:var(--orange)}
.check input:checked::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg)}
.form__privacy{font-family:var(--fb);font-size:12.5px;color:var(--ink-4);line-height:1.5}
.form__submit{justify-self:start;min-width:200px;justify-content:center}
.form__success{padding:40px;border:1px solid var(--orange);border-radius:var(--r-lg);background:var(--orange-100);text-align:center;display:none}
.form__success strong{display:block;font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-600);margin-bottom:10px}
.form__success span{font-family:var(--fs);font-weight:500;font-size:22px;color:var(--ink);line-height:1.3;letter-spacing:-.01em}
.form.is-submitted .form__fields{display:none}
.form.is-submitted .form__success{display:block}
/* ─ PROCESS STEPS ─ */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
@media (max-width:820px){.process{grid-template-columns:1fr}}
.process__step{padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);display:flex;flex-direction:column;gap:14px;position:relative}
.process__step .k{font-family:var(--fm);font-size:11px;letter-spacing:.08em;color:var(--orange);text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.process__step .k::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--orange-100);color:var(--orange-600);font-size:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:600}
.process__step h4{font-family:var(--fs);font-weight:500;font-size:22px;line-height:1.15;letter-spacing:-.015em;margin:0;color:var(--ink)}
.process__step p{font-family:var(--fb);font-size:14.5px;line-height:1.55;color:var(--ink-3);margin:0}
/* ─ TIMELINE ─ */
.timeline{border-top:1px solid var(--line)}
.timeline__row{display:grid;grid-template-columns:180px 1fr;gap:32px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start}
.timeline__year{font-family:var(--fm);font-size:13px;letter-spacing:.06em;color:var(--orange);display:inline-flex;align-items:center;gap:8px}
.timeline__year::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}
.timeline h4{font-family:var(--fs);font-weight:500;font-size:22px;line-height:1.2;letter-spacing:-.015em;margin:0 0 8px;color:var(--ink)}
.timeline p{font-family:var(--fb);font-size:15px;line-height:1.6;color:var(--ink-3);margin:0;max-width:62ch}
@media (max-width:640px){.timeline__row{grid-template-columns:1fr;gap:6px}}
/* ─ LEADERS ─ */
.leaders{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.leaders{grid-template-columns:1fr}}
.leader{padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.leader__avatar{width:48px;height:48px;border-radius:50%;background:var(--orange-100);color:var(--orange-600);display:flex;align-items:center;justify-content:center;font-family:var(--fs);font-weight:600;font-size:18px;margin-bottom:20px}
.leader h3,.leader h4{font-family:var(--fs);font-weight:500;font-size:19px;line-height:1.25;letter-spacing:-.01em;margin:0 0 4px;color:var(--ink)}
.leader__role{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.leader__bio{font-family:var(--fb);font-size:14px;line-height:1.6;color:var(--ink-3);margin-top:12px}
/* ─ BADGES (small metadata pills) ─ */
.badges{display:flex;flex-wrap:wrap;gap:8px}
/* ─ FAQ ─ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:22px 0;cursor:pointer}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:var(--fs);font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1.3;color:var(--ink);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:24px;height:24px;border-radius:50%;background:var(--orange-100);color:var(--orange-600);position:relative;flex:0 0 24px;transition:transform 260ms var(--ease),background 200ms}
.faq summary::before{content:"+";position:absolute;right:calc(24px/2 - 5px + var(--gutter, 0px));font-size:0;width:0}
.faq summary{position:relative}
.faq summary::after{background-image:url("data:image/svg+xml;utf8,");background-size:14px;background-repeat:no-repeat;background-position:center;background-color:var(--orange-100)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:14px 0 0;font-family:var(--fb);font-size:15.5px;line-height:1.65;color:var(--ink-3);max-width:62ch}
/* ─ REVEAL ON SCROLL ─ */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
/* ─ SKIP LINK ─ */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;z-index:100;border-radius:var(--r-md)}
.skip:focus{left:16px;top:16px}