/* Mirvo design tokens — every design value lives here.
   Fonts (same link on every page):
   <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400&family=Geist:wght@400;500&family=Geist+Mono:wght@400;600&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── */
  --bg: #F8F7F7;            /* warm off-white page */
  --surface: #FFFFFF;       /* white cards and section panels */
  --surface-2: #F8F7F7;     /* inset panels inside white cards (pricing head, impact cards, FAQ rows) */
  --dark: #161515;          /* footer band, ink buttons */
  --scrim: rgba(0, 0, 0, .4);         /* hero photo shade */
  --scrim-top: rgba(0, 0, 0, .5);    /* hero shade behind the header (top fade only) */
  --scrim-deep: rgba(0, 0, 0, .8);   /* hero shade under the client tiles (bottom fade only) */
  --glass: rgba(255, 255, 255, .24);  /* frosted logo tiles on the hero photo */
  --avatar: #C4C4C4;        /* grey disc behind cut-out portraits */

  /* ── Text ── */
  --text: #161515;          /* ink: headlines, labels, buttons */
  --text-2: #555151;        /* body copy, card lines */
  --muted: #8A8585;         /* second phrase of the two-tone statement headline (large text only) */
  --muted-ink: #6E6969;     /* small muted labels (mono "service included", dates) — 4.5:1 on white */
  --on-dark: #F8F7F7;       /* text on the footer and on photos */
  --on-dark-2: #A9A5A5;     /* footer body copy */

  /* ── Lines ── */
  --line: #ECEAEA;          /* hairlines on light (chip borders, card rules) */
  --line-dark: rgba(255, 255, 255, .14); /* footer column rules */

  /* ── Brand / accent (brand slots — see palette/slots.json) ── */
  --accent: #A4F7D2;        /* mint: header CTA, icon wells, result card, tags */
  --accent-rgb: 164, 247, 210;
  --accent-strong: #4DFFB0; /* vivid mint: CTA band button, newsletter button, footer active link */
  --accent-ink: #0F6B47;    /* mint used as text on light (passes 4.5:1) */
  --pop: #F6CEF0;           /* pink: icon wells, result card, review card, FAQ contact bar, impact panel */
  --pop-soft: #FCE4FF;      /* pale pink: top bar, hero chip */
  --on-accent: #161515;

  /* ── Data / status (forms + chart only) ── */
  --success: #1F9D63; --warning: #C98A1E; --danger: #C83A2E; --info: #3B6FB6;

  /* ── Fonts ── */
  --font-display: "Lora", Georgia, "Times New Roman", serif;               /* headlines, card titles, quotes, stats */
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;        /* body, nav */
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;           /* chips, buttons, labels — always uppercase */

  /* ── Radii ── */
  --r-xs: 8px;    /* logo plates on photos */
  --r-sm: 12px;   /* buttons, icon wells */
  --r: 16px;      /* photos inside cards, inner panels, FAQ rows, hero photo bottom corners */
  --r-lg: 24px;   /* cards and section panels */
  --r-xl: 32px;   /* big white section panels (pricing frame) */
  --r-pill: 32px; /* chips */

  /* ── Spacing / layout ── */
  --container: 1272px;      /* content width */
  --gutter: 24px;           /* minimum page edge on small screens */
  --section: 130px;         /* gap between sections */
  --head-gap: 24px;         /* chip → headline */
  --head-to-content: 60px;  /* headline block → content */
  --gap: 8px;               /* card grid gap (cards sit almost touching) */
  --card-pad: 24px;
  --well: 48px;             /* icon well size */

  /* ── Shadows (flat design) ── */
  --shadow-1: none;
  --shadow-2: 0 20px 50px rgba(22, 21, 21, .14);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .6s;
  --dur-fast: .25s;
}

/* ── Type scale (desktop values from the design; phone sizes in mirvo.css) ──
   Headlines are Lora Regular with tight negative tracking and sentence case; labels and buttons are Geist Mono uppercase. */
.t-display { font-family: var(--font-display); font-weight: 400; font-size: 80px; line-height: 1.08; letter-spacing: -3px; }
.t-h1 { font-family: var(--font-display); font-weight: 400; font-size: 80px; line-height: 1.08; letter-spacing: -3px; }
.t-h2 { font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 1.14; letter-spacing: -2.4px; }
.t-h3 { font-family: var(--font-display); font-weight: 400; font-size: 48px; line-height: 1.3; letter-spacing: -1.2px; }
.t-h4 { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.3; letter-spacing: -1.2px; }
.t-h5 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.4; letter-spacing: -.6px; }
.t-stat { font-family: var(--font-display); font-weight: 400; font-size: 48px; line-height: 1.3; letter-spacing: -1.2px; }
.t-quote { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -.4px; }
.t-lead { font-family: var(--font); font-weight: 400; font-size: 18px; line-height: 1.6; letter-spacing: -.4px; }
.t-body { font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.6; letter-spacing: -.4px; }
.t-small { font-family: var(--font); font-weight: 400; font-size: 14px; line-height: 1.6; letter-spacing: -.2px; }
.t-label { font-family: var(--mono); font-weight: 400; font-size: 16px; line-height: 1.6; text-transform: uppercase; }
.t-btn { font-family: var(--mono); font-weight: 600; font-size: 16px; line-height: 1.6; text-transform: uppercase; }

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }