/* Metric-matched fallbacks: until the web fonts arrive, text sets at the same widths, so lines do not rewrap when they swap in (CLS).
   Ratios measured against Arial / Liberation Sans (metric twins): Dela Gothic One 123.3% of Arial Bold; Figtree 400, 600, 800 at 99.8%, 94.4%, 96.8%. */
@font-face { font-family: "Dela Fallback"; font-weight: 400; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); size-adjust: 123.3%; }
@font-face { font-family: "Figtree Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans-Regular"); size-adjust: 99.8%; }
@font-face { font-family: "Figtree Fallback"; font-weight: 500 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); size-adjust: 94.4%; }
@font-face { font-family: "Figtree Fallback"; font-weight: 700 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); size-adjust: 96.8%; }
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display: clamp(2.4rem, 4.4vw + 0.55rem, 5.1rem);
  --text-section: clamp(2.2rem, 3.4vw + 0.9rem, 4.4rem);
  --text-page: clamp(2.3rem, 3.6vw + 0.7rem, 4.6rem);
  --text-prose-h: clamp(1.6rem, 1.2vw + 1.1rem, 2.2rem);
  --text-title: clamp(1.3rem, 0.8vw + 0.95rem, 1.75rem);
  --text-lead: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
  --text-row: clamp(1.8rem, 3.2vw + 0.4rem, 3.6rem);
  --text-mega: clamp(2.6rem, 6vw + 0.4rem, 7rem);
  --text-figure: clamp(3rem, 5vw + 1rem, 5.5rem);
  --text-stamp: 0.875rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(50% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 104px; --section-gap: 136px; --section-gap-l: 168px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  /* the chrome: site.js keeps these in sync with the rendered header and phone bar */
  --header-h: calc(75px + env(safe-area-inset-top));
  --bar-h: 0px;
  --bar-reserve: 0px;

  /* brand, read from the logo files */
  --color-green: #00CA72;          /* the hand icon: a ground, never small text on paper */
  --color-green-ink: #007A44;      /* green that may carry text on light grounds */
  --color-navy: #132E6E;           /* the wordmark: the ink of the whole page */
  --color-navy-deep: oklch(24% 0.075 266);
  /* Collage's two playful clash colours and its mint */
  --color-flamingo: oklch(76% 0.165 352);
  --color-lemon: oklch(93% 0.165 103);
  --color-mint: oklch(91% 0.09 158);

  --color-paper: oklch(97.6% 0.012 160); --color-paper-2: oklch(94.5% 0.02 160); --color-paper-3: oklch(90.5% 0.03 160);
  --color-sticker: oklch(99.2% 0.004 160);
  --color-ink: var(--color-navy); --color-ink-2: oklch(34% 0.09 266); --color-muted: oklch(44% 0.07 266);
  --color-on-dark: oklch(98.5% 0.006 160); --color-on-dark-2: oklch(87% 0.03 250);
  --color-rule: color-mix(in oklab, var(--color-navy) 22%, transparent);
  --color-accent: var(--color-green-ink); --color-accent-ink: var(--color-sticker); --color-focus: var(--color-navy); --color-focus-dark: var(--color-lemon);
  --color-shadow: oklch(22% 0.08 266 / 0.28);

  /* the trace: thick navy paths, small green pulses with a navy ring */
  --wire: var(--color-navy);
  --pulse: var(--color-green);

  --font-display: "Dela Gothic One", "Dela Fallback", "Arial Black", ui-sans-serif, sans-serif;
  --font-body: "Figtree", "Figtree Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: var(--font-body);
  --radius-card: 22px; --radius-pill: 999px; --radius-box: 14px; --rule-hair: 1px; --rule-fat: 3px;
  --shadow-card: 0 10px 24px -8px var(--color-shadow);
  /* the hard edge belongs to the filled lemon Book a Consultation alone; everything else is soft or flat */
  --shadow-hard: 0 2px 0 color-mix(in oklab, var(--color-navy) 30%, transparent), 0 10px 18px -10px var(--color-shadow);
  --shadow-soft: 0 8px 16px -10px var(--color-shadow);
  --tracking-display: -0.01em;
}