/* ═══════════════════════════════════════
   Drift & Detail — styles.css
   Palette: Navy / Blue / Yellow / Orange / Red / Green
═══════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ── */
:root {
  --navy:   #0a2a4e;
  --ocean:  #0a2a4e;
  --sky:    #1a7dd9;
  --foam:   #d6e8f7;
  --sand:   #ede8df;
  --accent: #1a7dd9;
  --mint:   #0a2a4e;
  --cream:  #f5efe4;
  --ink:    #050709;
  --muted:  #5a6a7a;
  --rule:   #d8d2c8;
  --yellow: #ffb800;
  --orange: #f26b1f;
  --red:    #e82e14;
  --green:  #2e8b3d;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}

/* ── Utility ── */
.serif { font-family: 'Libre Baskerville', Georgia, serif; }
.coral { color: var(--accent); }
.mint  { color: var(--mint); }
.ocean { color: var(--ocean); }

/* ── SVG icon helpers ── */
.badge-icon { display: flex; align-items: center; justify-content: center; }
.badge-icon svg { color: var(--yellow); }
.pricing-col-icon { margin-bottom: 0.75rem; color: var(--orange); }
.step-icon svg { color: #fff; }
.stat-icon svg { color: var(--yellow); }
.service-list li svg { flex-shrink: 0; color: var(--green); }