@import url("https://fonts.googleapis.com/css2?family=Gugi&family=Space+Grotesk:wght@300..700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap");
/* Yada webfonts. Gugi is the logotype face (per Logo Color Guide.pdf).
   Space Grotesk = UI/body. Instrument Serif = editorial display.
   All three are Google Fonts, loaded from the Google Fonts CDN. */

:root{
/* ---- Brand primitives (Logo Color Guide) ---- */
--yada-green:#0B4B2E;
--yada-slate:#364C63;
--yada-black:#000000;
--yada-white:#FFFFFF;

/* ---- Green scale ---- */
--green-50:#EDF4F0;
--green-100:#D3E5DB;
--green-200:#A5CBB8;
--green-300:#6FAC90;
--green-400:#3D8765;
--green-500:#1C6742;
--green-600:#0B4B2E;
--green-700:#093B24;
--green-800:#062A1A;
--green-900:#041A10;

/* ---- Slate scale ---- */
--slate-50:#F1F3F6;
--slate-100:#E0E4EA;
--slate-200:#C2CAD5;
--slate-300:#98A5B6;
--slate-400:#6B7C92;
--slate-500:#4C6079;
--slate-600:#364C63;
--slate-700:#2A3B4D;
--slate-800:#1D2937;
--slate-900:#121A24;

/* ---- Neutrals ---- */
--neutral-0:#FFFFFF;
--neutral-50:#FAFAF9;
--neutral-100:#F4F4F2;
--neutral-200:#E7E7E4;
--neutral-300:#D2D2CE;
--neutral-400:#A3A39E;
--neutral-500:#767671;
--neutral-600:#52524E;
--neutral-700:#3A3A37;
--neutral-800:#232322;
--neutral-900:#141413;
--neutral-950:#0A0A0A;

/* ---- Semantic ---- */
--success:#1C6742;
--warning:#A66A00;
--danger:#9B2C2C;
--info:#364C63;

/* ---- Light theme aliases (default) ---- */
--bg-page:var(--neutral-0);
--bg-subtle:var(--neutral-100);
--bg-inset:var(--neutral-50);
--surface-card:var(--neutral-0);
--surface-raised:var(--neutral-0);
--surface-inverse:var(--green-900);

--text-primary:var(--neutral-950);
--text-body:var(--slate-700);
--text-muted:var(--slate-400);
--text-inverse:var(--neutral-0);
--text-accent:var(--yada-green);
--text-link:var(--yada-green);
--text-link-hover:var(--green-400);

--border-subtle:var(--neutral-200);
--border-default:var(--neutral-300);
--border-strong:var(--slate-300);
--border-accent:var(--yada-green);

--accent-primary:var(--yada-green);
--accent-primary-hover:var(--green-500);
--accent-primary-press:var(--green-700);
--accent-secondary:var(--yada-slate);
--accent-secondary-hover:var(--slate-500);
--focus-ring:var(--green-400);

--overlay-scrim:rgba(4,26,16,.55);
--glass-bg:rgba(255,255,255,.72);
--glass-border:rgba(10,10,10,.08);
}

/* ---- Dark theme ---- */
[data-theme="dark"]{
--bg-page:#07110C;
--bg-subtle:#0C1A13;
--bg-inset:#0A150F;
--surface-card:#0F211A;
--surface-raised:#152B21;
--surface-inverse:var(--neutral-0);

--text-primary:#F2F6F3;
--text-body:#B9C7C0;
--text-muted:#7C8F86;
--text-inverse:var(--neutral-950);
--text-accent:#6FAC90;
--text-link:#6FAC90;
--text-link-hover:#A5CBB8;

--border-subtle:rgba(165,203,184,.12);
--border-default:rgba(165,203,184,.20);
--border-strong:rgba(165,203,184,.32);
--border-accent:#3D8765;

--accent-primary:#1C6742;
--accent-primary-hover:#3D8765;
--accent-primary-press:#093B24;
--accent-secondary:#4C6079;
--accent-secondary-hover:#6B7C92;
--focus-ring:#6FAC90;

--overlay-scrim:rgba(2,10,6,.72);
--glass-bg:rgba(15,33,26,.66);
--glass-border:rgba(165,203,184,.14);
}

:root{
--font-logo:"Gugi",system-ui,sans-serif;
--font-display:"Instrument Serif",Georgia,"Times New Roman",serif;
--font-sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

--text-body-font:var(--font-sans);
--text-heading-font:var(--font-display);

--fs-3xs:11px;
--fs-2xs:12px;
--fs-xs:13px;
--fs-sm:14px;
--fs-base:16px;
--fs-md:18px;
--fs-lg:21px;
--fs-xl:26px;
--fs-2xl:32px;
--fs-3xl:42px;
--fs-4xl:56px;
--fs-5xl:74px;
--fs-6xl:96px;

--lh-tight:1.04; /* @kind other */
--lh-snug:1.18; /* @kind other */
--lh-normal:1.5; /* @kind other */
--lh-relaxed:1.68; /* @kind other */

--fw-light:300; /* @kind other */
--fw-regular:400; /* @kind other */
--fw-medium:500; /* @kind other */
--fw-semibold:600; /* @kind other */
--fw-bold:700; /* @kind other */

--ls-tightest:-0.03em; /* @kind other */
--ls-tight:-0.015em; /* @kind other */
--ls-normal:0; /* @kind other */
--ls-wide:0.04em; /* @kind other */
--ls-widest:0.16em; /* @kind other */
}

:root{
--space-0:0px;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-32:128px;
--space-40:160px;

--gutter:24px;
--gutter-x:32px;
--section-y:120px;
--section-y-sm:72px;
--container-max:1240px;
--container-narrow:760px;
}

:root{
--radius-none:0px;
--radius-xs:2px;
--radius-sm:4px;
--radius-md:8px;
--radius-lg:14px;
--radius-xl:22px;
--radius-pill:999px;

--border-hairline:1px;
--border-thick:2px;
--rule-accent:3px;

--shadow-xs:0 1px 2px rgba(9,59,36,.06);
--shadow-sm:0 2px 6px rgba(9,59,36,.07);
--shadow-md:0 8px 24px -6px rgba(9,59,36,.12);
--shadow-lg:0 24px 60px -18px rgba(9,59,36,.22);
--shadow-inset-hairline:inset 0 0 0 1px var(--border-subtle);
--shadow-focus:0 0 0 3px rgba(61,135,101,.35);

--blur-glass:14px;
--gradient-veil:linear-gradient(180deg,rgba(4,26,16,0) 0%,rgba(4,26,16,.72) 100%); /* @kind other */
--gradient-accent:linear-gradient(135deg,#0B4B2E 0%,#1C6742 55%,#364C63 100%); /* @kind other */
--gradient-hairline:linear-gradient(90deg,transparent,var(--border-default),transparent); /* @kind other */
}

:root{
--dur-instant:90ms; /* @kind other */
--dur-fast:160ms; /* @kind other */
--dur-base:260ms; /* @kind other */
--dur-slow:480ms; /* @kind other */
--dur-reveal:820ms; /* @kind other */

--ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
--ease-out-soft:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in-out-quint:cubic-bezier(.83,0,.17,1); /* @kind other */

--stagger-step:70ms; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--dur-fast:1ms; /* @kind other */
--dur-base:1ms; /* @kind other */
--dur-slow:1ms; /* @kind other */
--dur-reveal:1ms; /* @kind other */
--stagger-step:0ms; /* @kind other */
}}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-regular);color:var(--text-primary);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);margin:0}
h1{font-size:var(--fs-4xl);line-height:var(--lh-tight)}
h2{font-size:var(--fs-3xl);line-height:var(--lh-tight)}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-md);font-family:var(--font-sans);font-weight:var(--fw-medium)}
p{margin:0}
img,svg,iframe,video{max-width:100%}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
.eyebrow{font-family:var(--font-sans);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--text-muted)}
::selection{background:var(--green-200);color:var(--green-900)}


/* Breakpoint token overrides. Because every component sizes from tokens,
   scaling these down is what makes the whole system tablet- and phone-ready.
   Breakpoints: tablet <=1024px, phone <=700px. */

@media(max-width:1024px){:root{
--fs-6xl:64px;
--fs-5xl:52px;
--fs-4xl:42px;
--fs-3xl:34px;
--fs-2xl:28px;
--fs-xl:23px;
--fs-lg:19px;
--fs-md:17px;

--gutter-x:24px;
--section-y:88px;
--section-y-sm:60px;
--space-16:48px;
--space-20:64px;
--space-24:72px;
--space-32:88px;
--space-40:104px;
}}

@media(max-width:700px){:root{
--fs-6xl:44px;
--fs-5xl:38px;
--fs-4xl:32px;
--fs-3xl:27px;
--fs-2xl:23px;
--fs-xl:20px;
--fs-lg:18px;
--fs-md:16px;

--gutter-x:20px;
--section-y:64px;
--section-y-sm:44px;
--space-12:36px;
--space-16:36px;
--space-20:48px;
--space-24:56px;
--space-32:64px;
--space-40:72px;
}}

/* ---- Page layout ---- */
body{margin:0;background:var(--bg-page);color:var(--text-body);font-family:var(--font-sans)}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter-x)}
.sec{padding:var(--section-y) 0}
@media(max-width:1024px){.g3,.g4{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:900px){.split,.g2{grid-template-columns:1fr!important}.hero-img{height:300px!important}.map-card{max-width:none!important;margin-left:0!important}.split-end{flex-direction:column!important;align-items:flex-start!important}}
@media(max-width:700px){.g3,.g4{grid-template-columns:1fr!important}.stats{gap:var(--space-8)!important;flex-wrap:wrap}.btn-row{flex-wrap:wrap}.btn-row>*{flex:1 1 200px}}