/* ── We Answer Every Call — base layer ───────────────────────────────────────
   THE single source of truth for tokens and for the button. Every page loads
   this first; site.css (inner pages) and home.css (homepage) build on top.

   Rules of the house:
     * Colours, faces, spacing and shadows are declared HERE and nowhere else.
       A second :root is how one page ends up with a different green.
     * The pill below is the only button on the estate. Pages may retune it via
       --btn-py / --btn-px, never by restating background or colour.
     * No page may carry a style="" attribute. `make check` fails the build.  */

/* geo brand faces (2026-08-21): Bricolage Grotesque display + Wix Madefor Text body,
   matching the geo homepage. Diatype retired from the shared system. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Wix+Madefor+Text:wght@400;500;600;700&display=swap');
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plex-mono-400.woff2) format("woff2");
  font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plex-mono-500.woff2) format("woff2");
  font-weight:500;font-display:swap}

:root{
  --canvas:#F3F1EC; --canvas-deep:#EAE7E0; --surface:#EAE7E0; --gold:#C9A227; --line:rgba(23,36,28,.10);
  --ink:#17241C; --ink-soft:#4B5A51; --ink-inverse:#EAF0EB;
  --action:#1C7A54; --action-deep:#245642; --action-wash:#E4F2EC;
  --loss:#904532; --loss-wash:#F0E7E5;
  /* text that sits ON a filled action surface, and the muted grey used on ink */
  --on-action:#ffffff; --ink-mute:#9FB0A6;
  /* hairlines derived from the two story colours, and the nav's frosted veil */
  --action-line:rgba(28,122,84,.30); --loss-line:rgba(144,69,50,.30);
  --nav-veil:rgba(243,241,236,.88);
  --radius:16px;
  --font-display:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  --font-body:"Wix Madefor Text",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.3,1);
  /* type scale: small / base / large / subhead — display sizes are fluid clamps */
  --text-xs:.75rem; --text-sm:.9375rem; --text-base:1.0625rem; --text-lg:1.1875rem; --text-xl:1.5rem;
  /* fluid section rhythm */
  --sect:clamp(64px,8vw,96px); --sect-big:clamp(88px,11vw,132px);
  /* spacing scale — every margin/padding utility below draws from this, so
     "a bit more room" is a token change, not a new number in a style attribute */
  --sp-1:8px; --sp-2:12px; --sp-3:18px; --sp-4:24px; --sp-5:34px; --sp-6:56px;
  /* fluid rhythm — the homepage's story sections breathe with the viewport */
  --flow-1:clamp(1.44rem,1.2rem + .5vw,2rem);
  --flow-2:clamp(2.16rem,1.8rem + .75vw,3rem);
  --flow-3:clamp(2.88rem,2.4rem + 1vw,4rem);
  /* layered shadows, ink-tinted, one overhead light */
  --shadow-sm:0 1px 2px rgba(23,36,28,.05),0 2px 8px rgba(23,36,28,.06);
  --shadow-md:0 2px 4px rgba(23,36,28,.04),0 8px 20px rgba(23,36,28,.07),0 24px 48px rgba(23,36,28,.09);
  --shadow-lg:0 4px 8px rgba(23,36,28,.05),0 16px 32px rgba(23,36,28,.09),0 40px 90px rgba(23,36,28,.15);
}
::selection{background:var(--action);color:var(--on-action)}

/* the reset and the page's own typography — shared by every page on the estate */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--canvas);color:var(--ink);font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;line-height:1.5;font-optical-sizing:auto;font-kerning:normal}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--action);outline-offset:3px;border-radius:999px}

/* the brand name may only ever wrap between "We Answer" and "Every Call" */
.nw{white-space:nowrap}

/* line-height MUST stay `normal` here. The body's 1.5 builds a line box whose
   half-leading fights Bricolage Grotesque's asymmetric ascent/descent, which sat
   every pill's label 1.5px high. `normal` uses the font's own metrics and centres
   exactly — measured at 0.00px off at every size. Padding is per-variant so the
   pills keep their old heights. */
.btn{--btn-py:16px;--btn-px:24px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  line-height:normal;
  background:var(--action);color:var(--on-action);font-weight:700;font-size:var(--text-sm);
  padding:var(--btn-py) var(--btn-px);
  border-radius:999px;text-decoration:none;border:0;cursor:pointer;
  transition:background .2s var(--ease),transform .12s var(--ease)}
.btn:hover{background:var(--action-deep)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--canvas)}
.btn.lg{--btn-py:20px;--btn-px:32px;font-size:var(--text-lg)}
/* the two sanctioned variants. Anything else that repaints a pill is drift:
   `make check` fails on a filled button that is not one of these. */
.btn.invert{background:var(--canvas);color:var(--action)}
.btn.invert:hover{background:var(--on-action)}