/* ==========================================================================
   EGRA shared design system — one source of truth for the content pages.
   Tokens, base, typography, header/nav, footer, buttons and cards.
   Pages link this first, then add only their page-specific rules inline
   (and may override --maxw on :root).
   ========================================================================== */

:root{
  --paper:#F5F6F2; --surface:#FFFFFF; --ink:#17191A; --ink-soft:#4E5358; --ink-faint:#5F666B;
  --line:#DDE3DD; --accent:#159A57; --accent-deep:#0E5C38; --accent-soft:#E7F4EC;
  --deep:#0F2C1F; --deep2:#0A2016; --teal:#56CBC8; --gold:#C98A3C; --coral:#D2603F;
  --on-deep:#FFFFFF; --on-deep-soft:#C3D3CA;
  /* The three contact routes — one colour code used everywhere */
  --route-assoc:#159A57; --route-estate:#0F2C1F; --route-emerg:#D2603F;
  --display:"Space Grotesk",system-ui,Arial,sans-serif; --font:"Inter",system-ui,Arial,sans-serif;
  --maxw:760px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--accent-deep)}
:focus-visible{outline:3px solid #159A57;outline-offset:3px;border-radius:6px}

.band{padding-inline:18px}
.inner{max-width:var(--maxw);margin:0 auto}
main .inner{padding-block:30px 10px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.15;text-wrap:balance;margin:0}

/* ---- Header / primary navigation (one header on every page) ---- */
header.hero{background:var(--deep);color:var(--on-deep);border-bottom:4px solid var(--teal)}
header.hero .inner{padding-block:18px 36px}
nav.nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-block:6px 20px}
nav.nav .brand{margin-right:auto;display:inline-flex;align-items:center}
nav.nav .brand img{height:28px;width:auto;display:block}
nav.nav a.lnk{color:var(--on-deep-soft);text-decoration:none;font:600 14px var(--font);padding:7px 0;min-height:40px;display:inline-flex;align-items:center}
nav.nav a.lnk:hover,nav.nav a.lnk[aria-current="page"]{color:#fff}
nav.nav a.join{color:#fff;background:var(--accent);padding:0 16px;border-radius:3px;font:700 13px var(--display);text-decoration:none;white-space:nowrap;min-height:40px;display:inline-flex;align-items:center}
nav.nav a.join:hover{background:#17ab60}
.eyebrow{font:600 12px var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 12px}
header.hero h1{font-size:clamp(32px,7vw,48px);line-height:1.02;font-weight:700;margin:0 0 14px}
header.hero .lede{font-size:17px;line-height:1.5;color:var(--on-deep);max-width:56ch;margin:0}

/* ---- Footer (one footer on every page) ---- */
footer.band{margin-top:30px;background:var(--deep);color:var(--on-deep-soft);padding-block:30px 44px;font-size:14px}
footer.band .inner{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
footer.band a{color:#DCE6DF}
footer.band strong{color:#fff}

/* ---- Buttons ---- */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font:700 15px var(--display);text-decoration:none;background:var(--accent);color:#fff;border:none;cursor:pointer}
.btn:hover{background:var(--accent-deep)}
.btn.ghost{background:transparent;color:var(--accent-deep);border:1.5px solid var(--line)}

/* ---- Generic surface card ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}