/* Maven Clinic — shared design system
   Extracted: 2026-05-14 from https://www.mavenclinic.com/ (live)
   Voice: empowering, convenient, compassionate. Evidence-based, hopeful, plain-spoken.
   ────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..700,0..100&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ─── Brand palette (production-extracted) ─── */
  --mav-green: #00856F;
  --mav-green-deep: #013126;
  --mav-forest: #035748;
  --mav-mint: #58EDA2;
  --mav-mint-soft: #71D1B5;
  --mav-cream: #EDE9E3;
  --mav-cappuccino: #D8D2CA;
  --mav-coral: #FF4D66;
  --mav-amber: #FFC728;
  --mav-ink: #263633;
  --mav-slate: #64726F;
  --mav-mist: #DEE3E3;
  --mav-paper: #F5FFF9;
  --mav-white: #FFFFFF;
  --mav-cream-soft: #F8F5F0;
  --mav-bone: #FAF8F5;

  /* ─── Semantic tokens ─── */
  --bg: var(--mav-white);
  --ink: var(--mav-ink);
  --accent: var(--mav-green);
  --on-accent: var(--mav-white);
  --primary: var(--mav-green-deep);
  --on-primary: var(--mav-white);
  --cta: var(--mav-green);
  --on-cta: var(--mav-white);
  --border: var(--mav-mist);
  --hairline: rgba(38, 54, 51, 0.10);
  --footer-bg: var(--mav-green-deep);
  --footer-fg: var(--mav-white);

  /* Text tokens — palette-toggle overrides these for dark surfaces.
     `--mav-green-deep` keeps its role as a dark background fill (footer,
     hero--deep, app-cta, dual-cta--green) while text tokens flip light. */
  --mav-text-display: var(--mav-green-deep);    /* headlines on light sections */
  --mav-text-ghost: var(--mav-green-deep);      /* ghost-btn text + border on light */
  --mav-scrim-soft: rgba(237, 233, 227, 0.6);   /* image bottom fade matches cream bg */

  /* ─── Type ─── */
  --font-display: 'Domaine Display', 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ─── Scale ─── */
  --fs-display: clamp(44px, 6.4vw, 76px);
  --fs-h1: clamp(36px, 4.8vw, 56px);
  --fs-h2: clamp(28px, 3.6vw, 40px);
  --fs-h3: clamp(20px, 2vw, 26px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-chip: 13px;
  --lh-display: 1.08;
  --lh-h1: 1.12;
  --lh-h2: 1.2;
  --lh-body: 1.6;

  /* ─── Spacing ─── */
  --section: 112px;
  --section-tight: 80px;
  --gutter: 32px;
  --gap: 24px;
  --container: 1240px;
  --container-slim: 980px;
  --container-narrow: 720px;

  /* ─── Radius ─── */
  --radius-pill: 999px;
  --radius-card: 24px;
  --radius-card-lg: 32px;
  --radius-form: 14px;

  /* ─── Shadows / motion ─── */
  --shadow-card: 0 1px 0 rgba(0,0,0,0.04);
  --shadow-hover: 0 18px 40px rgba(1, 49, 38, 0.10);
  --shadow-pop: 0 10px 30px rgba(1, 49, 38, 0.16);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ─── Reset / base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--mav-green-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mav-green); }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 32px 0; }
button { font: inherit; }

::selection { background: var(--mav-mint); color: var(--mav-green-deep); }

/* ─── Type ─── */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  color: var(--mav-text-display);
  margin: 0;
}
.display strong, h1.display strong, .h1 strong, h1 strong, h2 strong {
  color: var(--mav-green);
  font-weight: inherit;
}
.display em, h1 em, h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--mav-green);
}
.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.018em;
  color: var(--mav-text-display);
  margin: 0;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.012em;
  color: var(--mav-green-deep);
  margin: 0;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.008em;
  color: var(--mav-green-deep);
  margin: 0;
}
.lede {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--mav-ink);
  max-width: 64ch;
  margin: 0;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mav-green);
  margin: 0;
}
.meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--mav-slate);
  letter-spacing: 0.04em;
}
.serif-em { font-family: var(--font-display); font-style: italic; font-weight: 400; }

/* Light text variants for dark backgrounds */
.on-dark, .on-dark .display, .on-dark .h1, .on-dark .h2, .on-dark .h3 { color: var(--mav-white); }
.on-dark .lede { color: rgba(255,255,255,0.85); }
.on-dark .eyebrow { color: var(--mav-mint); }
.on-dark a { color: var(--mav-mint); }
.on-dark a:hover { color: var(--mav-white); }
.on-dark strong { color: var(--mav-mint); }

/* ─── Layout ─── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container-slim { max-width: var(--container-slim); margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 32px; }

.section { padding-block: var(--section); }
.section-tight { padding-block: var(--section-tight); }
.section-cream { background: var(--mav-cream); }
.section-cream-soft { background: var(--mav-cream-soft); }
.section-paper { background: var(--mav-paper); }
.section-green { background: var(--mav-green); color: var(--mav-white); }
.section-green-deep { background: var(--mav-green-deep); color: var(--mav-white); }

/* Margin utilities */
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.mt-56 { margin-top: 56px; }
.mt-64 { margin-top: 64px; }
.mt-md { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 120ms var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--green {
  background: var(--mav-green);
  color: var(--mav-white);
  border-color: var(--mav-green);
}
.btn--green:hover { background: var(--mav-forest); border-color: var(--mav-forest); color: var(--mav-white); }

.btn--green-deep {
  background: var(--mav-green-deep);
  color: var(--mav-white);
  border-color: var(--mav-green-deep);
}
.btn--green-deep:hover { background: #000d09; border-color: #000d09; color: var(--mav-white); }

.btn--ghost {
  background: transparent;
  color: var(--mav-text-ghost);
  border-color: var(--mav-text-ghost);
}
.btn--ghost:hover { background: var(--mav-text-ghost); color: var(--mav-cream); }

.btn--ghost-light {
  background: transparent;
  color: var(--mav-white);
  border-color: var(--mav-white);
}
.btn--ghost-light:hover { background: var(--mav-white); color: var(--mav-green-deep); }

.btn--mint {
  background: var(--mav-mint);
  color: var(--mav-green-deep);
  border-color: var(--mav-mint);
}
.btn--mint:hover { background: var(--mav-mint-soft); border-color: var(--mav-mint-soft); }

.btn--white {
  background: var(--mav-white);
  color: var(--mav-green-deep);
  border-color: var(--mav-white);
}
.btn--white:hover { background: var(--mav-cream); border-color: var(--mav-cream); }

.btn--small { padding: 10px 20px; font-size: 13px; }
.btn--large { padding: 18px 36px; font-size: 16px; }
.btn--block { width: 100%; }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── Pills & chips ─── */
.subtitle-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 14px;
  background: transparent;
  border: 1px solid var(--mav-green);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--mav-green);
  letter-spacing: 0.01em;
}
.subtitle-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mav-green);
  animation: mavPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.subtitle-pill--mint {
  border-color: var(--mav-mint-soft);
  color: var(--mav-green-deep);
}
.subtitle-pill--mint .dot { background: var(--mav-mint); }
.subtitle-pill--light {
  border-color: rgba(255,255,255,0.5);
  color: var(--mav-white);
}
.subtitle-pill--light .dot { background: var(--mav-mint); }

@keyframes mavPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--mav-paper);
  color: var(--mav-green-deep);
}
.chip--green { background: var(--mav-green); color: var(--mav-white); }
.chip--mint { background: var(--mav-mint); color: var(--mav-green-deep); }
.chip--cream { background: var(--mav-cream); color: var(--mav-green-deep); }
.chip--coral { background: var(--mav-coral); color: var(--mav-white); }
.chip--ghost { background: transparent; border: 1px solid var(--mav-mist); color: var(--mav-ink); }

/* ─── Marketing nav (homepage simulation) ─── */
.mk-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.mk-nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mk-nav-brand img { height: 24px; width: auto; }
.mk-nav-links {
  display: flex; gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.mk-nav-links a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--mav-green-deep);
  text-decoration: none;
}
.mk-nav-links a:hover { color: var(--mav-green); }
.mk-nav-cta { display: flex; gap: 10px; align-items: center; }

/* ─── Announcement bar ─── */
.announcement {
  background: var(--mav-cream);
  padding: 12px 32px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--mav-green-deep);
  border-bottom: 1px solid var(--hairline);
}
.announcement a {
  color: var(--mav-green);
  text-decoration: none;
  font-weight: 600;
  margin-left: 6px;
}
.announcement a:hover { text-decoration: underline; }

/* ─── Hero pill ─── */
.hero-pill {
  padding: clamp(80px, 9vw, 140px) 0 clamp(80px, 9vw, 120px);
  position: relative;
  background: var(--mav-cream);
  overflow: hidden;
}
.hero-pill .container {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-pill .copy { position: relative; z-index: 2; }
.hero-pill .display { max-width: 14ch; margin-top: 24px; }
.hero-pill .lede { margin-top: 24px; max-width: 46ch; }
.hero-pill .cta-row { margin-top: 36px; }
.hero-pill .image-wrap {
  position: relative;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--mav-mist);
}
.hero-pill .image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-pill .image-wrap::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, var(--mav-scrim-soft));
  pointer-events: none;
}

/* Variant: hero on green */
.hero-pill--green { background: var(--mav-green); color: var(--mav-white); }
.hero-pill--green .display, .hero-pill--green .h1 { color: var(--mav-white); }
.hero-pill--green .display strong { color: var(--mav-mint); }
.hero-pill--green .lede { color: rgba(255,255,255,0.86); }
.hero-pill--green .subtitle-pill {
  border-color: rgba(255,255,255,0.5);
  color: var(--mav-white);
}
.hero-pill--green .subtitle-pill .dot { background: var(--mav-mint); }

/* Variant: hero on green-deep */
.hero-pill--deep { background: var(--mav-green-deep); color: var(--mav-white); }
.hero-pill--deep .display, .hero-pill--deep .h1 { color: var(--mav-white); }
.hero-pill--deep .display strong { color: var(--mav-mint); }
.hero-pill--deep .lede { color: rgba(255,255,255,0.82); }

/* ─── Hero stats ─── */
.hero-stats {
  padding: clamp(80px, 9vw, 120px) 0 clamp(56px, 7vw, 96px);
  background: var(--mav-cream);
}
.hero-stats .display { max-width: 22ch; }
.stats-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid var(--hairline);
}
.stats-strip .stat-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: var(--mav-green);
  letter-spacing: -0.02em;
}
.stats-strip .stat-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--mav-slate);
  margin-top: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* ─── Stats bar (inline) ─── */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 40px;
  background: var(--mav-paper);
  border-radius: var(--radius-card);
}
.stats-bar .stat {
  padding-left: 20px;
  border-left: 2px solid var(--mav-green);
}
.stats-bar .stat-num {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
  color: var(--mav-green-deep);
}
.stats-bar .stat-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--mav-slate);
  margin-top: 8px;
  line-height: 1.4;
}

/* ─── Services grid ─── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.service-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  background: var(--mav-white);
  border: 1px solid var(--hairline);
  overflow: hidden;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.service-card .img {
  aspect-ratio: 5 / 4;
  background: var(--mav-mist);
  overflow: hidden;
}
.service-card .img img { width: 100%; height: 100%; object-fit: cover; }
.service-card .body { padding: 28px 24px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.service-card .h3 { font-size: 22px; }
.service-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--mav-ink);
  margin: 0;
  flex: 1;
}
.service-card .learn-more {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--mav-green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  letter-spacing: 0.01em;
}
.service-card .learn-more:hover { gap: 10px; color: var(--mav-forest); }

/* ─── Trust bar (logos) ─── */
.trust-bar {
  padding: 64px 0;
  background: var(--mav-white);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.trust-bar .label {
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--mav-slate);
  letter-spacing: 0.04em;
  margin-bottom: 32px;
}
.trust-bar .logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 56px 72px;
}
.trust-bar .logo-mark {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--mav-slate);
  opacity: 0.6;
}

/* ─── Industry cards ─── */
.industry-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.industry-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--mav-green-deep);
  display: block;
  text-decoration: none;
  color: var(--mav-white);
  transition: transform 240ms var(--ease);
}
.industry-card:hover { transform: translateY(-4px); color: var(--mav-white); }
.industry-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.industry-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(1, 49, 38, 0.85));
  pointer-events: none;
}
.industry-card .body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px;
  z-index: 1;
}
.industry-card .h3 { color: var(--mav-white); font-size: 22px; margin-bottom: 6px; }
.industry-card p {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  margin: 0 0 14px;
  line-height: 1.4;
}
.industry-card .arrow {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--mav-mint);
  color: var(--mav-green-deep);
  font-size: 16px;
}

/* ─── Service detail (split row) ─── */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.service-detail--reverse { grid-template-columns: 1fr 1fr; }
.service-detail--reverse .copy { order: 2; }
.service-detail--reverse .image { order: 1; }
.service-detail .image {
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--mav-mist);
}
.service-detail .image img { width: 100%; height: 100%; object-fit: cover; }
.service-detail .h2 { max-width: 14ch; }
.service-detail .lede { margin-top: 20px; }
.service-detail .features-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.service-detail .features-list li {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--mav-ink);
  padding: 12px 0 12px 32px;
  border-top: 1px solid var(--hairline);
  position: relative;
}
.service-detail .features-list li:last-child { border-bottom: 1px solid var(--hairline); }
.service-detail .features-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 16px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--mav-mint);
  background-image: radial-gradient(circle at center, var(--mav-green) 0 4px, transparent 5px);
}

/* ─── Pull quote ─── */
.pull-quote {
  padding: clamp(64px, 8vw, 112px) 0;
  background: var(--mav-cream);
}
.pull-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.2;
  color: var(--mav-green-deep);
  margin: 0;
  max-width: 22ch;
  letter-spacing: -0.012em;
}
.pull-quote .attr {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.pull-quote .attr-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--mav-mist);
  overflow: hidden;
}
.pull-quote .attr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pull-quote .attr-text { font-family: var(--font-body); font-size: 14px; line-height: 1.4; }
.pull-quote .attr-name { font-weight: 600; color: var(--mav-green-deep); }
.pull-quote .attr-role { color: var(--mav-slate); }

/* ─── Outcomes / stats card grid ─── */
.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.outcome-card {
  padding: 36px 32px;
  background: var(--mav-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}
.outcome-card .stat-num {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 68px);
  color: var(--mav-green);
  line-height: 1;
  letter-spacing: -0.02em;
}
.outcome-card .stat-desc {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mav-ink);
}

/* ─── Two-column title/body ─── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: start;
}
.two-col .h2 { max-width: 14ch; }
.two-col .body p {
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 18px;
}
.two-col .body p:last-child { margin-bottom: 0; }

/* ─── Changemakers grid (team) ─── */
.changemakers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.changemaker {
  display: flex;
  flex-direction: column;
}
.changemaker .portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--mav-mist);
  margin-bottom: 16px;
}
.changemaker .portrait img { width: 100%; height: 100%; object-fit: cover; }
.changemaker .name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--mav-green-deep);
  margin: 0 0 4px;
}
.changemaker .role {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--mav-slate);
  letter-spacing: 0.02em;
}

/* ─── Resource cards ─── */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.resource-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.resource-card .img {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--mav-mist);
  margin-bottom: 20px;
  transition: transform 200ms var(--ease);
}
.resource-card:hover .img { transform: translateY(-4px); }
.resource-card .img img { width: 100%; height: 100%; object-fit: cover; }
.resource-card .meta-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.resource-card .title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  color: var(--mav-green-deep);
  margin: 0;
  letter-spacing: -0.008em;
}

/* ─── Final CTA ─── */
.final-cta {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--mav-green);
  color: var(--mav-white);
  text-align: center;
}
.final-cta .display { max-width: 18ch; margin: 0 auto; color: var(--mav-white); }
.final-cta .display strong { color: var(--mav-mint); }
.final-cta .lede { max-width: 56ch; margin: 24px auto 0; color: rgba(255,255,255,0.86); }
.final-cta .cta-row { justify-content: center; margin-top: 36px; }

.final-cta--deep { background: var(--mav-green-deep); }
.final-cta--cream { background: var(--mav-cream); color: var(--mav-green-deep); }
.final-cta--cream .display { color: var(--mav-green-deep); }
.final-cta--cream .display strong { color: var(--mav-green); }
.final-cta--cream .lede { color: var(--mav-ink); }

/* ─── Demo form ─── */
.demo-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 480px;
  margin: 32px auto 0;
}
.demo-form input, .demo-form select {
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--mav-mist);
  border-radius: var(--radius-form);
  background: var(--mav-white);
  color: var(--mav-ink);
  font-weight: 500;
}
.demo-form input::placeholder { color: var(--mav-slate); }
.demo-form input:focus, .demo-form select:focus {
  outline: 2px solid var(--mav-green);
  outline-offset: -1px;
  border-color: var(--mav-green);
}
.demo-form button { grid-column: 1 / -1; }
.demo-form input.full { grid-column: 1 / -1; }

/* ─── Newsletter ─── */
.newsletter {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin-top: 24px;
}
.newsletter input {
  flex: 1;
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--mav-mist);
  border-radius: var(--radius-pill);
  background: var(--mav-white);
  color: var(--mav-ink);
}
.on-dark .newsletter input { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: var(--mav-white); }
.on-dark .newsletter input::placeholder { color: rgba(255,255,255,0.5); }

/* ─── FAQ accordion ─── */
.faq-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}
.faq-list li {
  border-top: 1px solid var(--hairline);
  padding: 24px 0;
}
.faq-list li:last-child { border-bottom: 1px solid var(--hairline); }
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--mav-green-deep);
  cursor: pointer;
  gap: 24px;
  line-height: 1.3;
}
.faq-q .toggle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--mav-paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--mav-green);
  flex-shrink: 0;
}
.faq-a {
  margin-top: 16px;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mav-ink);
}

/* ─── App store CTA ─── */
.app-cta {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}
.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--mav-green-deep);
  color: var(--mav-white);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
}
.app-badge .label {
  display: flex; flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}
.app-badge .label small { font-size: 10px; font-weight: 500; opacity: 0.7; }
.app-badge .label span { font-weight: 600; font-size: 14px; }
.app-badge:hover { background: var(--mav-green); color: var(--mav-white); }

/* App CTA section grid — copy + phone image, stacks on mobile */
.app-cta-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}
.app-cta-row .image {
  aspect-ratio: 5/4;
  border-radius: 32px;
  overflow: hidden;
}
.app-cta-row .image img {
  width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 768px) {
  .app-cta-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ─── Tabs (audience selector) ─── */
.tabs {
  display: inline-flex;
  padding: 6px;
  background: var(--mav-paper);
  border-radius: var(--radius-pill);
  gap: 4px;
}
.tabs .tab {
  padding: 10px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--mav-slate);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease);
  border: 0;
  background: transparent;
  white-space: nowrap;
}
.tabs .tab:hover { color: var(--mav-green-deep); }
.tabs .tab.is-active {
  background: var(--mav-green);
  color: var(--mav-white);
}
.tabs--dark { background: rgba(255,255,255,0.08); }
.tabs--dark .tab { color: rgba(255,255,255,0.7); }
.tabs--dark .tab:hover { color: var(--mav-white); }
.tabs--dark .tab.is-active { background: var(--mav-mint); color: var(--mav-green-deep); }
.tabs-panel { margin-top: 40px; }

/* ─── Value pillars (careers values, etc.) ─── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 56px;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  background: var(--hairline);
}
.value-cell {
  background: var(--mav-white);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: -1px -1px 0 0;
}
.value-cell .num {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--mav-green);
  letter-spacing: 0.02em;
}
.value-cell .name {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  color: var(--mav-green-deep);
  letter-spacing: -0.012em;
  margin: 0;
}
.value-cell p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mav-ink);
  margin: 0;
}

/* ─── Globe / coverage block ─── */
.globe-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(48px, 6vw, 72px) 0;
}
.globe-block .copy .stat-num {
  font-family: var(--font-display);
  font-size: clamp(96px, 12vw, 168px);
  color: var(--mav-green);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
}
.globe-block .copy .stat-label {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 32px);
  color: var(--mav-green-deep);
  margin: 20px 0 0;
  line-height: 1.2;
  max-width: 16ch;
}
.globe-block .copy p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--mav-slate);
  max-width: 44ch;
  margin: 20px 0 0;
  line-height: 1.6;
}
.globe-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 620px;
  justify-self: end;
}
@media (max-width: 768px) {
  .globe-block { grid-template-columns: 1fr; gap: 32px; }
  .globe-visual { justify-self: center; max-width: 360px; }
}
.globe-visual img.globe-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.globe-visual .dot {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--mav-green);
  box-shadow: 0 0 0 4px rgba(0, 133, 111, 0.20);
  animation: globeDotPulse 2.4s ease-in-out infinite;
  z-index: 2;
}
.globe-visual .dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--mav-mint);
  z-index: -1;
  opacity: 0.4;
  animation: globeDotRing 2.4s ease-in-out infinite;
}
@keyframes globeDotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.85); }
}
@keyframes globeDotRing {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ─── Awards row ─── */
.awards-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  padding: 56px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  align-items: center;
}
.award-cell {
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--mav-slate);
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.award-cell strong {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--mav-green-deep);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}

/* ─── Pillar features (icon grid) ─── */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--hairline);
}
.pillar {
  padding: 36px 24px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pillar:last-child { border-right: none; }
.pillar .pillar-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mav-mint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mav-green-deep);
  font-family: var(--font-display);
  font-size: 18px;
}
.pillar .name {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--mav-green-deep);
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.pillar p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mav-ink);
  margin: 0;
}

/* ─── Jobs grid (careers listings) ─── */
.jobs-grid {
  margin-top: 48px;
}
.jobs-dept {
  border-top: 1px solid var(--hairline);
  padding: 32px 0 24px;
}
.jobs-dept-head {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--mav-green-deep);
  margin: 0 0 18px;
  letter-spacing: -0.012em;
}
.job-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-body);
  text-decoration: none;
  color: var(--mav-ink);
  transition: padding-left 200ms var(--ease);
}
.job-row:hover {
  padding-left: 12px;
  color: var(--mav-green-deep);
}
.job-row .role {
  font-size: 16px;
  font-weight: 600;
  color: var(--mav-green-deep);
}
.job-row .place {
  font-size: 13px;
  color: var(--mav-slate);
}
.job-row .arrow {
  font-size: 18px;
  color: var(--mav-green);
}

/* ─── Dual CTA cards (member vs employer access) ─── */
.dual-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.dual-cta-card {
  padding: 48px 40px;
  border-radius: var(--radius-card-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 360px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 240ms var(--ease);
}
.dual-cta-card:hover { transform: translateY(-4px); }
.dual-cta-card .h2 { margin: 0; max-width: 16ch; }
.dual-cta-card p { font-size: 16px; line-height: 1.55; margin: 0; max-width: 40ch; flex: 1; }
.dual-cta-card .btn { align-self: flex-start; margin-top: 12px; }
.dual-cta-card--cream { background: var(--mav-cream); color: var(--mav-green-deep); }
.dual-cta-card--green { background: var(--mav-green); color: var(--mav-white); }
.dual-cta-card--green .h2 { color: var(--mav-white); }
.dual-cta-card--green .h2 em { color: var(--mav-mint); }
.dual-cta-card--green p { color: rgba(255,255,255,0.86); }

/* ─── Product slider (UI tabs with screen art) ─── */
.product-slider {
  background: var(--mav-cream);
  padding: clamp(56px, 8vw, 96px) 0;
  overflow: hidden;
}
.product-slider .slider-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 40px;
}
.product-slider .slider-head .h2 { max-width: 22ch; }
.product-slider-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.product-slider-tabs .ps-tab {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--mav-white);
  border: 1px solid var(--hairline);
  color: var(--mav-green-deep);
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.product-slider-tabs .ps-tab:hover { border-color: var(--mav-green); }
.product-slider-tabs .ps-tab.is-active {
  background: var(--mav-green);
  color: var(--mav-white);
  border-color: var(--mav-green);
}
.product-slider-track {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 48px;
  align-items: center;
  background: var(--mav-white);
  border-radius: var(--radius-card-lg);
  padding: 48px;
  border: 1px solid var(--hairline);
}
.product-slider-copy .h3 { font-size: 28px; line-height: 1.2; max-width: 18ch; margin: 0; }
.product-slider-copy p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--mav-ink);
  margin: 16px 0 0;
  max-width: 44ch;
}
.product-slider-copy .checklist {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.product-slider-copy .checklist li {
  padding: 8px 0 8px 28px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mav-ink);
  position: relative;
}
.product-slider-copy .checklist li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 8px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mav-mint);
  color: var(--mav-green-deep);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}
.product-slider-screen {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--mav-paper);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(1, 49, 38, 0.12), 0 8px 20px rgba(1, 49, 38, 0.08);
}
.product-slider-screen img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.product-slider-meta {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--mav-slate);
}
.product-slider-meta .dot-sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--mav-slate);
  align-self: center;
  opacity: 0.5;
}

/* ─── Slider / press-coverage row ─── */
.press-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.press-card {
  padding: 32px;
  background: var(--mav-paper);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.press-card .outlet {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--mav-green-deep);
  letter-spacing: 0.02em;
}
.press-card .headline {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.3;
  color: var(--mav-green-deep);
  margin: 0;
  letter-spacing: -0.008em;
}
.press-card .date {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--mav-slate);
  letter-spacing: 0.04em;
}

/* Mobile collapse for new patterns */
@media (max-width: 1024px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar-grid { grid-template-columns: repeat(3, 1fr); }
  .pillar { border-bottom: 1px solid var(--hairline); }
  .pillar:nth-child(3n) { border-right: none; }
  .awards-row { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .globe-block { grid-template-columns: 1fr; gap: 40px; }
  .globe-visual { max-width: 480px; margin: 0 auto; }
  .dual-cta-grid { grid-template-columns: 1fr; }
  .press-row { grid-template-columns: 1fr; }
  .product-slider-track { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
  .product-slider .slider-head { grid-template-columns: 1fr; align-items: start; }
  .product-slider-copy .h3 { font-size: 24px; }
}
@media (max-width: 720px) {
  .values-grid { grid-template-columns: 1fr; }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar { border-right: none; }
  .awards-row { grid-template-columns: 1fr 1fr; gap: 32px; padding: 32px 0; }
  .job-row { grid-template-columns: 1fr; gap: 6px; }
  .job-row .arrow { display: none; }
  .tabs { flex-wrap: wrap; }
  .dual-cta-card { padding: 32px 24px; min-height: 280px; }
  .product-slider-track { padding: 24px; gap: 24px; }
  .product-slider-tabs { gap: 6px; }
  .product-slider-tabs .ps-tab { padding: 8px 14px; font-size: 12px; }
  .product-slider-screen { aspect-ratio: 4 / 5; }
}

/* ─── Footer ─── */
.mk-footer {
  background: var(--mav-green-deep);
  color: var(--mav-white);
  padding: 80px 0 40px;
}
.mk-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 56px;
}
.mk-footer-brand img {
  height: 28px; width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 24px;
}
.mk-footer-brand p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
  margin: 0 0 24px;
  max-width: 36ch;
}
.mk-footer-col h4 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mav-mint);
  margin: 0 0 16px;
}
.mk-footer-col ul { list-style: none; margin: 0; padding: 0; }
.mk-footer-col li { margin-bottom: 10px; }
.mk-footer-col a {
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
}
.mk-footer-col a:hover { color: var(--mav-mint); }
.mk-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}
.mk-footer-bottom .legal {
  display: flex; gap: 24px;
}
.mk-footer-bottom .legal a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}
.mk-footer-bottom .legal a:hover { color: var(--mav-mint); }

/* ─── Mobile responsive ─── */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-cards { grid-template-columns: repeat(2, 1fr); }
  .stats-strip { grid-template-columns: repeat(3, 1fr); }
  .changemakers-grid { grid-template-columns: repeat(3, 1fr); }
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .outcomes-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .hero-pill .container { grid-template-columns: 1fr; gap: 48px; }
  .hero-pill .image-wrap { aspect-ratio: 5/4; }
  .service-detail { grid-template-columns: 1fr; gap: 40px; }
  .service-detail--reverse .copy { order: 1; }
  .service-detail--reverse .image { order: 2; }
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .mk-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root {
    --section: 72px;
    --section-tight: 48px;
  }
  .container, .container-slim, .container-narrow { padding: 0 20px; }
  .services-grid { grid-template-columns: 1fr; }
  .industry-cards { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 24px; padding-top: 32px; margin-top: 40px; }
  .changemakers-grid { grid-template-columns: repeat(2, 1fr); }
  .resource-grid { grid-template-columns: 1fr; }
  .outcomes-grid { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: 1fr; padding: 24px; }
  .demo-form { grid-template-columns: 1fr; }
  .newsletter { flex-direction: column; }
  .mk-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .mk-footer-bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
  .mk-nav-links { display: none; }
  .mk-nav-cta .btn--small { display: none; }
  .mk-nav-cta .btn:last-child { display: inline-flex; }
  .hero-pill .lede { font-size: 17px; }
  .pull-quote blockquote { font-size: 26px; }
  .stats-strip .stat-num { font-size: 36px; }
  .industry-card { aspect-ratio: 4 / 3; }
  .trust-bar .logos { gap: 36px 48px; }
  .trust-bar .logo-mark { font-size: 18px; }
}

/* ============================================================
   DS chrome — DS-only pages (index, design-system, sections)
   Convention matches rtz-hope / tommys: .ds-nav + .ds-hero + .ds-section
   ============================================================ */

.ds-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-body);
}
.ds-nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.ds-nav-brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  color: var(--mav-green);
  text-decoration: none;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 12px;
}
.ds-nav-brand small {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mav-ink);
  opacity: 0.55;
}
.ds-nav-tabs {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 4px;
}
.ds-nav-tabs a {
  display: block;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mav-ink);
  opacity: 0.6;
  text-decoration: none;
  border-radius: 6px;
  transition: background 150ms var(--ease), color 150ms var(--ease), opacity 150ms var(--ease);
}
.ds-nav-tabs a:hover { background: var(--mav-paper); opacity: 1; }
.ds-nav-tabs a.active {
  background: var(--mav-green);
  color: var(--mav-white);
  opacity: 1;
}

.ds-hero {
  padding: 80px 0 56px;
  background: var(--mav-white);
  border-bottom: 1px solid var(--hairline);
}
.ds-hero .container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.ds-hero .display { max-width: 18ch; }
.ds-hero .eyebrow { color: var(--mav-green); margin-bottom: 16px; }
.ds-hero .lede {
  font-size: 19px; line-height: 1.55;
  color: var(--mav-ink);
  max-width: 64ch;
  margin: 24px 0 0;
}
.ds-hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.ds-hero .rule {
  display: inline-block;
  width: 56px; height: 3px;
  background: var(--mav-green);
  border-radius: 2px;
}

.ds-section {
  padding-block: 72px;
  border-top: 1px solid var(--hairline);
}
.ds-section .container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.ds-section .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.18;
  color: var(--mav-green-deep);
  margin: 0 0 8px;
  letter-spacing: -0.012em;
}
.ds-section .h2 em { font-style: italic; font-weight: 400; color: var(--mav-green); }

/* spec-table (used on overview index.html) */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 15px;
}
.spec-table thead th {
  text-align: left;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mav-ink); opacity: 0.7;
  padding: 14px 16px;
  border-bottom: 1px solid var(--mav-mist);
}
.spec-table tbody td {
  padding: 18px 16px;
  border-bottom: 1px solid var(--hairline);
  color: var(--mav-ink);
  line-height: 1.55;
  vertical-align: top;
}
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  background: var(--mav-paper);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--mav-green-deep);
}

.mark-thin {
  box-shadow: inset 0 -2px 0 var(--mav-green);
  background: transparent;
  color: inherit;
  padding: 0 2px;
  text-decoration: none;
}

/* ============================================================
   Pattern catalog (sections.html)
   ============================================================ */

.pattern-toc {
  position: sticky;
  top: 60px;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
  padding: 18px 0;
}
.pattern-toc .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}
.pattern-toc .label {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mav-ink); opacity: 0.6;
  flex-shrink: 0;
}
.pattern-toc .links {
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
}
.pattern-toc .links a {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  color: var(--mav-ink);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
  white-space: nowrap;
}
.pattern-toc .links a:hover {
  color: var(--mav-green);
  border-bottom-color: var(--mav-green);
}

.pattern-section {
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: 132px;
}
.pattern-section:last-child { border-bottom: none; }
.pattern-section .container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.pattern-section h3.pattern-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--mav-green-deep);
  margin: 0 0 8px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pattern-section h3.pattern-name code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px; font-weight: 600;
  background: var(--mav-paper);
  color: var(--mav-green-deep);
  padding: 4px 10px;
  border-radius: 4px;
}
.pattern-section .pattern-desc {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--mav-ink);
  max-width: 64ch;
  margin: 0 0 28px;
  line-height: 1.65;
}
.pattern-section .preview {
  background: var(--mav-white);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.pattern-section .preview.bg-cream { background: var(--mav-cream); }
.pattern-section .preview.bg-paper { background: var(--mav-paper); }
.pattern-section .preview.bg-green-deep { background: var(--mav-green-deep); color: var(--mav-white); }
.pattern-section .preview > .section,
.pattern-section .preview > .hero-pill,
.pattern-section .preview > .pull-quote,
.pattern-section .preview > .final-cta,
.pattern-section .preview > .hero-stats {
  padding-block: 64px;
}

.pill-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--mav-mint);
  color: var(--mav-green-deep);
}
.pill-tag--ghost { background: transparent; border: 1px solid var(--mav-mist); color: var(--mav-ink); }
.pill-tag--green { background: var(--mav-green); color: var(--mav-white); }
.pill-tag--coral { background: var(--mav-coral); color: var(--mav-white); }

/* ============================================================
   Foundations page (design-system.html)
   ============================================================ */

/* Swatch grid */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.swatch {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--mav-white);
}
.swatch .chip-color {
  height: 100px;
  border-bottom: 1px solid var(--hairline);
}
.swatch .body {
  padding: 14px 14px 16px;
}
.swatch .name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--mav-green-deep);
  margin: 0;
}
.swatch .hex {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--mav-slate);
  margin-top: 4px;
}
.swatch .note {
  font-size: 11px;
  color: var(--mav-slate);
  margin-top: 8px;
  line-height: 1.4;
}

/* Type specimen */
.type-specimen {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
  align-items: baseline;
}
.type-specimen:first-of-type { border-top: none; padding-top: 0; }
.type-specimen .label {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mav-slate);
}
.type-specimen .label small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-top: 6px;
  color: var(--mav-slate);
  opacity: 0.7;
}
.type-specimen .specimen { color: var(--mav-green-deep); }
.type-specimen .specimen.display { font-family: var(--font-display); font-size: 56px; line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; }
.type-specimen .specimen.h1 { font-family: var(--font-display); font-size: 40px; line-height: 1.1; font-weight: 400; letter-spacing: -0.018em; }
.type-specimen .specimen.h2 { font-family: var(--font-display); font-size: 32px; line-height: 1.15; font-weight: 400; letter-spacing: -0.012em; }
.type-specimen .specimen.h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.25; font-weight: 400; }
.type-specimen .specimen.lede { font-family: var(--font-body); font-size: 19px; line-height: 1.55; color: var(--mav-ink); }
.type-specimen .specimen.body { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--mav-ink); }
.type-specimen .specimen.eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mav-green); }
.type-specimen .specimen.button { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--mav-green-deep); }

/* Radius demo */
.radius-demo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.radius-cell {
  background: var(--mav-paper);
  border: 1px solid var(--hairline);
  aspect-ratio: 5 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.radius-cell .label-md {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700;
  color: var(--mav-green-deep);
}
.radius-cell .label-sm {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px; color: var(--mav-slate);
}
.r-form { border-radius: var(--radius-form); }
.r-card { border-radius: var(--radius-card); }
.r-card-lg { border-radius: var(--radius-card-lg); }
.r-pill { border-radius: var(--radius-pill); }

/* Voice anchors block */
.voice-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.voice-list li {
  padding: 20px 24px;
  border-left: 3px solid var(--mav-green);
  background: var(--mav-paper);
  border-radius: 0 12px 12px 0;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.3;
  color: var(--mav-green-deep);
  letter-spacing: -0.008em;
}
.voice-list li small {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mav-slate);
  font-style: normal;
}

/* Forbidden list */
.forbidden-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.forbidden-list li {
  padding: 16px 20px;
  background: var(--mav-bone);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mav-ink);
  position: relative;
  padding-left: 44px;
}
.forbidden-list li::before {
  content: "✕";
  position: absolute;
  left: 16px; top: 16px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mav-coral);
  color: var(--mav-white);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 1024px) {
  .swatch-grid { grid-template-columns: repeat(3, 1fr); }
  .voice-list { grid-template-columns: 1fr; }
  .forbidden-list { grid-template-columns: 1fr; }
  .type-specimen { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  .swatch-grid { grid-template-columns: repeat(2, 1fr); }
  .radius-demo { grid-template-columns: repeat(2, 1fr); }
  .ds-nav-inner { padding: 12px 20px; gap: 12px; row-gap: 8px; }
  .ds-nav-tabs { gap: 2px; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .ds-nav-tabs a { padding: 5px 8px; font-size: 10px; letter-spacing: 0.10em; }
  .ds-nav-brand { font-size: 16px; }
  .ds-nav-brand small { font-size: 9px; letter-spacing: 0.14em; }
  .spec-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 0 20px; }
  .spec-table { min-width: 540px; font-size: 14px; }
  .spec-table tbody td, .spec-table thead th { padding: 14px 12px; }
  .icon-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}