/* ═══════════════════════════════════════
   BASE.CSS — Tokens · Reset · Typography
   Marin Health Travel
═══════════════════════════════════════ */

:root {
  /* Brand palette — Professional Blue */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;

  /* Keep teal aliases pointing to blue so all existing code just works */
  --teal-50:  #eff6ff;
  --teal-100: #dbeafe;
  --teal-200: #bfdbfe;
  --teal-300: #93c5fd;
  --teal-400: #60a5fa;
  --teal-500: #3b82f6;
  --teal-600: #2563eb;
  --teal-700: #1d4ed8;
  --teal-800: #1e40af;
  --teal-900: #1e3a8a;

  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  --white: #ffffff;

  /* Semantic */
  --primary:       var(--blue-600);
  --primary-dark:  var(--blue-700);
  --primary-light: var(--blue-50);
  --text:          var(--slate-900);
  --text-muted:    var(--slate-500);
  --bg:            var(--white);
  --bg-alt:        var(--slate-50);
  --border:        var(--slate-200);

  /* Type */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Spacing */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;
  --sp-4: 1rem;    --sp-5: 1.25rem; --sp-6: 1.5rem;
  --sp-8: 2rem;    --sp-10: 2.5rem; --sp-12: 3rem;
  --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* Layout */
  --max-w: 1200px;
  --pad:   clamp(1rem, 4vw, 2rem);
  --nav-h: 76px;

  /* Radii */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px;
  --r-xl: 28px; --r-full: 9999px;

  /* Shadows */
  --sh-sm: 0 1px 4px rgba(0,0,0,.06);
  --sh-md: 0 4px 20px rgba(0,0,0,.08);
  --sh-lg: 0 12px 40px rgba(0,0,0,.10);
  --sh-xl: 0 24px 64px rgba(0,0,0,.13);
  --sh-blue: 0 8px 32px rgba(37,99,235,.28);
  --sh-teal: 0 8px 32px rgba(37,99,235,.28);

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --fast: 150ms; --base: 250ms; --slow: 420ms; --slower: 600ms;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:1rem;font-weight:400;
  line-height:1.7;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto;object-fit:cover}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;
  line-height:1.2;color:var(--text)}
h1{font-size:clamp(2.4rem,5vw,3.8rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.6rem)}
h3{font-size:clamp(1.2rem,2.5vw,1.5rem)}
h4{font-size:1.15rem}
p{line-height:1.8}
em{font-style:italic;color:var(--primary)}

/* ── Layout ── */
.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sp-24)}
.section--alt{background:var(--bg-alt)}

/* ── Section header ── */
.section__header{text-align:center;max-width:660px;margin-inline:auto;margin-bottom:var(--sp-16)}
.eyebrow{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--primary);margin-bottom:var(--sp-3)}
.eyebrow--light{color:var(--blue-300)}
.section__title{margin-bottom:var(--sp-4)}
.section__sub{font-size:1.1rem;color:var(--text-muted);line-height:1.8}

/* ── Scroll animations ── */
[data-anim]{opacity:0;transform:translateY(28px);
  transition:opacity var(--slower) var(--ease-out),transform var(--slower) var(--ease-out)}
[data-anim="left"] {transform:translateX(28px)}
[data-anim="right"]{transform:translateX(-28px)}
[data-anim="pop"]  {transform:scale(.9)}
[data-anim].visible{opacity:1;transform:none}

[data-anim="stagger"]>*{opacity:0;transform:translateY(22px);
  transition:opacity var(--slower) var(--ease-out),transform var(--slower) var(--ease-out)}
[data-anim="stagger"].visible>*{opacity:1;transform:none}
[data-anim="stagger"].visible>*:nth-child(1){transition-delay:0ms}
[data-anim="stagger"].visible>*:nth-child(2){transition-delay:80ms}
[data-anim="stagger"].visible>*:nth-child(3){transition-delay:160ms}
[data-anim="stagger"].visible>*:nth-child(4){transition-delay:240ms}
[data-anim="stagger"].visible>*:nth-child(5){transition-delay:320ms}
[data-anim="stagger"].visible>*:nth-child(6){transition-delay:400ms}