@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300..700&family=Instrument+Sans:wght@400;500;600&display=swap');

:root {
  --cream-50:#F9F1DD; --cream-100:#F1E5D1; --cream-200:#E8D9BF; --cream-300:#DFC9A6;
  --taupe-400:#C3A57D; --taupe-500:#8F7355; --taupe-600:#6E523A;
  --ink-700:#3A2A1C; --ink-800:#2E2014; --ink-900:#241810;
  --ink-950:#1C1916; --ink-925:#252220; --ink-875:#2B2724;
  --sand-400:#E3B987; --sand-500:#C88855; --terra-600:#B04A2E; --terra-700:#8E3920;
  --olive-500:#7A7A4D; --olive-700:#4D4E2B;
  --amber-500:#C89B70; --amber-400:#D9AE84;

  --bg:var(--cream-100); --bg-raised:var(--cream-50); --bg-sunken:var(--cream-200);
  --surface:var(--cream-50); --surface-alt:var(--cream-200);
  --fg:var(--ink-800); --fg-strong:var(--ink-900); --fg-muted:var(--taupe-600); --fg-subtle:var(--taupe-500);
  --border:var(--cream-300); --border-strong:var(--taupe-400); --rule:var(--sand-500);
  --accent:var(--terra-600); --accent-hover:var(--terra-700); --accent-soft:var(--sand-400);
  --focus-ring:rgba(176,74,46,0.4);

  --font-serif:"Source Serif 4", Georgia, serif;
  --font-sans:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-eyebrow:500 12px/1.2 var(--font-sans);
  --text-body-lg:400 19px/1.55 var(--font-sans);
  --text-body:400 16px/1.6 var(--font-sans);
  --text-body-sm:400 14px/1.55 var(--font-sans);
  --text-label:500 13px/1.4 var(--font-sans);
  --text-caption:400 12px/1.45 var(--font-sans);

  --dur-fast:160ms; --dur-base:280ms;
  --ease-out:cubic-bezier(0.22,1,0.36,1);

  --grain-opacity:0.45;
  --grain-opacity-nested:0.25;
  --grain-opacity-strong:0.6;
}

html, body { margin:0; padding:0; scroll-behavior:smooth; background:var(--bg); color:var(--fg); font:var(--text-body); -webkit-font-smoothing:antialiased; }
* { box-sizing: border-box; }
a { color: var(--accent); text-underline-offset:3px; }

.section-ink {
  --bg:var(--ink-950); --bg-raised:var(--ink-925); --surface:var(--ink-925); --surface-alt:var(--ink-875);
  --fg:#D9CDB8; --fg-strong:#F3E9D4; --fg-muted:#8F826B; --fg-subtle:#6B5F4C;
  --border:#3A342D; --border-strong:#554C40; --rule:var(--amber-500);
  --accent:var(--amber-500); --accent-hover:var(--amber-400);
  background:var(--bg); color:var(--fg);
}

/* ---- Paper grain texture ---- */
.paper-grain, .paper-grain-nested, .paper-grain-strong, .paper-grain-dark { position: relative; }
.paper-grain > *, .paper-grain-nested > *, .paper-grain-strong > *, .paper-grain-dark > * { position: relative; z-index: 1; }
.paper-grain::before, .paper-grain-nested::before, .paper-grain-strong::before, .paper-grain-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(62,53,40,0.06) 1px, transparent 1px),
    radial-gradient(rgba(62,53,40,0.035) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  z-index: 0;
}
.paper-grain::before        { opacity: var(--grain-opacity); }
.paper-grain-nested::before { opacity: var(--grain-opacity-nested); }
.paper-grain-strong::before { opacity: var(--grain-opacity-strong); }
.paper-grain-dark::before {
  opacity: var(--grain-opacity-nested);
  mix-blend-mode: screen;
  background-image:
    radial-gradient(rgba(245,235,215,0.05) 1px, transparent 1px),
    radial-gradient(rgba(245,235,215,0.03) 1px, transparent 1px);
}

/* ---- Navigation ---- */
.nav-hamburger {
  display: none;
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 8px;
}

/* ---- Section divider (Rule between hero and first section) ---- */
.section-divider {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ===== TABLET (max-width: 768px) ===== */
@media (max-width: 768px) {
  /* Nav */
  .nav-links { display: none !important; }
  .nav-hamburger { display: flex; align-items: center; justify-content: center; }
  .nav-cta-desktop { display: none !important; }
  .nav-header-inner { padding-left: 20px !important; padding-right: 20px !important; }

  /* Section padding */
  section {
    padding: 52px 20px !important;
  }

  /* Responsive grids — single column */
  .g {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Stats grids — 2 columns on tablet */
  .g-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  /* Form grids — single column */
  .g-form {
    grid-template-columns: 1fr !important;
  }

  /* Make all form children span full width */
  .g-form > label,
  .g-form > div,
  .g-form > button {
    grid-column: 1 / -1 !important;
  }

  /* Footer layout */
  .footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 32px !important;
  }

  .footer-cols {
    flex-direction: column !important;
    gap: 28px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Hero padding */
  .hero-section {
    padding: 80px 20px 64px !important;
  }

  /* Contact TwoPaths items — reset padding/border when stacked */
  .g-path-item {
    padding: 0 !important;
    border-left: none !important;
    border-bottom: 1px solid var(--cream-300);
    padding-bottom: 32px !important;
  }
  .g-path-item:last-child {
    border-bottom: none;
    padding-bottom: 0 !important;
  }

  /* Hide ledger diagram arrow on mobile */
  .g-arrow {
    display: none !important;
  }

  /* Onboarding timeline — 2-column layout on mobile (number+time | content) */
  li.g {
    grid-template-columns: auto 1fr !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
  }
  li.g > div:last-child {
    grid-column: 1 / -1 !important;
  }

  /* Tab bar horizontal scroll */
  .tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  /* Programs detail definition list — stack label/value */
  dl > div {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  /* Contact TwoPaths — remove side padding/border when stacked */
  .g > div[style*="borderLeft"] {
    border-left: none !important;
  }

  /* Blockquote sizing */
  blockquote {
    font-size: clamp(20px, 4vw, 28px) !important;
    padding: 24px !important;
  }

  /* Flex containers that wrap CTA buttons */
  div[style*="justifySelf: 'end'"] {
    justify-self: start !important;
  }

  /* Rule divider matches section gutters on tablet */
  .section-divider {
    padding: 0 20px !important;
  }
}

/* ===== PHONE (max-width: 480px) ===== */
@media (max-width: 480px) {
  section {
    padding: 40px 16px !important;
  }

  .hero-section {
    padding: 64px 16px 48px !important;
  }

  .nav-header-inner { padding-left: 16px !important; padding-right: 16px !important; }

  .g {
    gap: 24px !important;
  }

  .g-stats {
    grid-template-columns: 1fr !important;
  }

  /* Stats items — remove left borders when single column */
  .g-stats > div {
    border-left: none !important;
    padding: 24px 0 !important;
  }

  /* Footer tighter */
  .footer-inner {
    gap: 24px !important;
  }

  footer {
    padding: 32px 16px !important;
  }

  /* Cards and bordered boxes — reduce padding */
  .g > div[style*="padding: 32"] {
    padding: 20px !important;
  }

  /* Rule divider matches section gutters on phone */
  .section-divider {
    padding: 0 16px !important;
  }
}