:root {
  --mint:       #38BB9C;
  --teal:       #00849F;
  --navy:       #005F88;
  --mint-10:    rgba(56,187,156,0.10);
  --mint-20:    rgba(56,187,156,0.20);
  --mint-25:    rgba(56,187,156,0.25);
  --teal-10:    rgba(0,132,159,0.10);
  --white:      #ffffff;
  --off-white:  #f0f5f7;
  --bg:         #f0f5f7;
  --bg-alt:     #e4eef2;
  --rule:       #c8dae2;
  --ink:        #0b1a24;
  --ink-soft:   #2a3f4f;
  --ink-muted:  #5e7a8a;
  --footer-bg:  #071018;

  --grad-hero:  linear-gradient(135deg, #005F88 0%, #00849F 50%, #38BB9C 100%);
  --grad-dark:  linear-gradient(135deg, #005F88, #00849F);
  --grad-bar:   linear-gradient(90deg, #38BB9C, #00849F);

  --font-head:  'Creato Display', 'Cera Pro', system-ui, sans-serif;
  --font-body:  'Cera Pro', system-ui, sans-serif;

  --fs-h1:      clamp(2.2rem, 4vw, 3.4rem);
  --fs-h2:      clamp(1.7rem, 3vw, 2.4rem);
  --fs-h3:      1.2rem;
  --fs-body:    1rem;
  --fs-small:   0.82rem;
  --fs-label:   0.72rem;

  --radius:     4px;
  --radius-md:  8px;
  --radius-lg:  12px;

  --transition: 0.22s ease;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm:  0 2px 8px rgba(11, 26, 36, 0.06);
  --shadow-md:  0 8px 24px rgba(11, 26, 36, 0.08);
  --shadow-lg:  0 20px 48px rgba(11, 26, 36, 0.12);
  --shadow-mint:0 16px 40px rgba(56, 187, 156, 0.25);

  --container:  1200px;
  --container-wide: 1400px;

  --nav-h:      72px;
}