/* ============================
   Waypoint Succession — Styles
   ============================ */

:root {
  --color-navy-900: #0E1830;
  --color-navy-800: #16234A;
  --color-navy-700: #1E2E5C;
  --color-navy-600: #2A3E78;
  --color-white: #FFFFFF;
  --color-cream: #F4F5F4;
  --color-cream-2: #E9EBE9;
  --color-ink: #1A1E2A;
  --color-body: #3A3F4E;
  --color-muted: #6B7180;
  --color-border: #DDE1DE;
  --color-border-dark: rgba(255,255,255,0.14);
  --color-accent: #2F5D42;
  --color-accent-light: #4F9270;
  --color-accent-dark: #1F3E2C;

  --font-display: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --container-w: 1180px;
  --container-w-narrow: 760px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 2px 10px rgba(14,24,48,0.06);
  --shadow-md: 0 12px 32px rgba(14,24,48,0.10);
  --shadow-lg: 0 24px 60px rgba(14,24,48,0.16);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-body);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
ul, ol { padding: 0; margin: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Layout helpers ---------- */
.container { max-width: var(--container-w); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-w-narrow); }
.section { padding: 96px 0; }
.section-muted { background: var(--color-cream); }
/* A couple of self-contained "featured moment" sections get the same framed,
   rounded-card treatment as the hero, echoing it without applying it to
   every section (which would flatten the full-bleed sections' impact). */
#about, .section-referral {
  margin: 24px 20px;
  border-radius: 28px;
  overflow: hidden;
}
#about.section { padding-top: 40px; padding-bottom: 40px; }
#why-us.section { padding-top: 56px; }
.section-navy { background: var(--color-navy-800); color: rgba(255,255,255,0.88); }
.section-navy .criteria-card { color: var(--color-ink); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin: 0 0 14px;
}
.eyebrow-light { color: var(--color-accent-light); }
.hero-eyebrow-gold { color: #E0A855; }
.eyebrow-center { text-align: center; }

.section-title { font-size: clamp(28px, 4vw, 40px); margin-bottom: 20px; }
.section-title-light { color: var(--color-white); }
.section-lead {
  font-size: 18px;
  color: var(--color-muted);
  max-width: 640px;
  margin: 0 auto 48px;
}
.section-navy .section-lead { color: rgba(255,255,255,0.7); }
#why-us .section-lead, #process .section-lead { max-width: 820px; }
[class*="eyebrow-center"] + .section-title,
.eyebrow-center ~ .section-title { text-align: center; }
.section > .container > .eyebrow-center,
.section-title.reveal { text-align: center; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--color-navy-900); color: #fff;
  padding: 12px 20px; z-index: 1000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
  min-height: 48px;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--color-accent-light); outline-offset: 2px; }
.btn-primary { background: var(--color-navy-800); color: #fff; }
.btn-primary:hover { background: var(--color-navy-700); }
.btn-accent { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: var(--color-accent-dark); box-shadow: var(--shadow-md); }
.btn-small { padding: 10px 20px; font-size: 14px; min-height: 40px; }
.btn-wide { width: 100%; }

/* Secondary hero action: a plain underlined link with an arrow, not a second
   boxed button, so the hero has one clear call to action rather than a
   generic pair of buttons side by side. */
.btn-text-light {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; border-radius: 0; background: none; box-shadow: none;
  padding: 4px 0 6px; min-height: 0;
  color: #fff; font-weight: 600; font-size: 15px;
  border-bottom: 1.5px solid rgba(255,255,255,0.45);
}
.btn-text-light:hover { border-bottom-color: #fff; transform: none; }
.btn-text-light svg { transition: transform 180ms var(--ease); }
.btn-text-light:hover svg { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
/* backdrop-filter lives on a pseudo-element, not .site-header itself, because a
   filter/backdrop-filter on an ancestor creates a new containing block for its
   position:fixed descendants (like the mobile .main-nav panel), which would
   otherwise position itself relative to this ~64px header instead of the viewport. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 260ms var(--ease);
}
/* Unscrolled, the header has no background of its own so it reads as part of
   the hero video underneath it; scrolling past the hero fades in a solid bar
   so navigation stays reachable for the rest of the page. */
.site-header.scrolled::before, .site-header.menu-open::before { opacity: 1; }
.site-header.scrolled { border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.header-inner {
  padding: 36px 48px 20px;
  transition: padding 220ms var(--ease);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
/* The roomier top padding lets the header sit a little lower into the hero
   video; once solid (scrolled, or the mobile menu open) it tightens back up
   into a normal compact bar instead of carrying that same tall gap. */
.site-header.scrolled .header-inner, .site-header.menu-open .header-inner { padding: 14px 48px; }
.header-inner .brand { justify-self: start; }
.header-inner .main-nav { justify-self: center; }
.header-inner .header-actions { justify-self: end; }
.brand-logo {
  height: 46px; width: auto;
  /* Sitting this close to the hero's rounded corner means part of the logo can
     land over the page-background peeking through the curve rather than the
     video; the drop-shadow keeps it legible against either. */
  filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(14,24,48,0.45));
  transition: filter 220ms var(--ease);
}
.site-header.scrolled .brand-logo, .site-header.menu-open .brand-logo { filter: none; }
.main-nav ul {
  display: flex; gap: 4px;
  background: var(--color-cream); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 6px;
}
.main-nav a {
  display: block; font-size: 14px; font-weight: 600; color: var(--color-navy-800);
  padding: 8px 16px; border-radius: 999px;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a:active { background: var(--color-navy-800); color: #fff; box-shadow: var(--shadow-sm); }
.header-actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; background: none; border: none; border-radius: 8px;
}
.nav-toggle span { width: 22px; height: 2px; background: #fff; margin: 0 auto; transition: transform 200ms var(--ease), opacity 200ms var(--ease), background-color 220ms var(--ease); }
.site-header.scrolled .nav-toggle span, .site-header.menu-open .nav-toggle span { background: var(--color-navy-800); }
.nav-toggle:focus-visible { outline: 2px solid var(--color-accent); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
/* An inset, rounded-corner card rather than a full-bleed hero, so the page
   background shows as a frame around it instead of the hero touching every
   edge of the viewport. */
.hero {
  position: relative; min-height: 80vh; min-height: 80dvh;
  display: flex; align-items: center;
  color: #fff; overflow: hidden;
  margin: 20px 20px 12px;
  border-radius: 28px;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-video { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.hero-media-abstract { background: radial-gradient(120% 100% at 15% 20%, var(--color-navy-600) 0%, var(--color-navy-800) 45%, var(--color-navy-900) 100%); }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,24,48,0.75) 0%, rgba(14,24,48,0.55) 45%, rgba(14,24,48,0.88) 100%);
}
.hero-content { position: relative; z-index: 1; padding-top: 112px; padding-bottom: 48px; max-width: 760px; }

/* ---------- Hero route animation ---------- */
.hero-route {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  width: 100%; height: 42%; pointer-events: none;
}
.hero-route.hero-route-full { height: 100%; top: 0; bottom: auto; }
.route-seg { stroke: rgba(255,255,255,0.4); stroke-width: 2.5; stroke-dasharray: 10 9; fill: none; }
.marker-ring { fill: #16234A; stroke: var(--color-accent-light); stroke-width: 2.5; }
.marker-ring-fill { fill: var(--color-accent); stroke: var(--color-accent-light); stroke-width: 2.5; }
.marker-halo { fill: none; stroke: var(--color-accent-light); stroke-width: 1.5; opacity: 0.5; }
.marker-dot { fill: var(--color-accent-light); }

@media (prefers-reduced-motion: no-preference) {
  .route-seg-1 { stroke-dasharray: 620; stroke-dashoffset: 620; animation: route-draw 1s ease-out 0.3s forwards; }
  .route-seg-2 { stroke-dasharray: 500; stroke-dashoffset: 500; opacity: 0; animation: route-draw 0.9s ease-out 1.3s forwards; }
  .route-seg-3 { stroke-dasharray: 560; stroke-dashoffset: 560; opacity: 0; animation: route-draw 1s ease-out 2.2s forwards; }
  .route-marker { opacity: 0; transform-box: fill-box; transform-origin: center; animation: route-pop 0.5s ease-out forwards; }
  .route-marker-1 { animation-delay: 0.3s; }
  .route-marker-2 { animation-delay: 1.3s; }
  .route-marker-3 { animation-delay: 2.2s; }
  .route-marker-final { animation: route-pop 0.5s ease-out 3.2s forwards, route-pulse 2.2s ease-in-out 3.8s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .route-seg { stroke-dashoffset: 0; opacity: 1; }
  .route-marker { opacity: 1; }
}
@keyframes route-draw { to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes route-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes route-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.hero-title { font-size: clamp(34px, 5.5vw, 60px); font-weight: 800; letter-spacing: -0.03em; color: #fff; margin-bottom: 22px; }
/* "Waypoint" and "Endpoint" share the -point suffix; only the contrasting
   half (Way- vs End-) is styled, so the typography argues the headline's
   point before the sentence is even finished. */
.hero-title .hl-way { color: var(--color-accent-light); }
.hero-title .hl-end { color: rgba(255,255,255,0.32); }
.hero-sub { font-size: 19px; color: rgba(255,255,255,0.88); max-width: 560px; margin-bottom: 32px; }
/* A single underline for emphasis, drawn with one gentle, restrained arc
   rather than a perfectly ruler-straight line, so it reads as a subtle
   human touch without looking like an obvious wave. */
.hand-underline { position: relative; display: inline-block; }
.hand-underline-svg {
  position: absolute; left: -3%; bottom: -0.14em; width: 106%; height: 0.4em;
  pointer-events: none; overflow: visible;
}
.hand-underline-svg path { fill: none; stroke: #E0A855; stroke-width: 3; stroke-linecap: round; }

/* ---------- Copyright bar ---------- */
.copyright-bar { background: var(--color-navy-900); padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.copyright-bar p { margin: 0; font-size: 13px; color: rgba(255,255,255,0.5); text-align: left; }
.copyright-bar .copyright-inner {
  max-width: none; margin: 0; padding-left: 64px; padding-right: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.back-to-top {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); text-decoration: none;
  flex: none; transition: color 0.15s ease;
}
.back-to-top:hover, .back-to-top:focus-visible { color: #fff; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.scroll-cue {
  position: absolute; bottom: 28px; right: 28px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.75); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.scroll-cue svg { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------- Marquee ---------- */
.marquee-section { background: var(--color-white); padding: 14px 0 24px; overflow: hidden; border-bottom: 1px solid var(--color-border); }
.marquee-label {
  font-family: var(--font-mono);
  text-align: center; color: var(--color-muted); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 24px; font-weight: 500;
  padding: 0 24px;
}
.marquee-track-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track {
  display: flex; gap: 16px; width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee-track-wrap.is-paused .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .marquee-track [aria-hidden="true"] { display: none; }
}
.logo-card {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  width: 190px;
  height: 100px;
  box-sizing: border-box;
  overflow: hidden;
}
.logo-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.logo-card img { width: 100%; height: 100%; object-fit: contain; }
/* Per-logo scale correction: several source files carry different amounts of
   built-in whitespace around the mark, so a uniform box makes them read as
   inconsistent sizes. These nudge each one to a matching visual weight. */
.logo-card.logo-zoom-140 img { transform: scale(1.1); }
.logo-card.logo-zoom-115 img { transform: scale(1.15); }
.logo-card.logo-zoom-82 img { transform: scale(0.82); }
.logo-card.logo-zoom-118 img { transform: scale(1.18); }
.logo-card.logo-zoom-92 img { transform: scale(0.92); }

/* ---------- Who We Are ---------- */
.who-intro { text-align: left; }
.who-intro .eyebrow { text-align: center; max-width: none; font-size: 12px; }
.who-intro p { font-size: 17px; }
.text-link {
  color: inherit; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: rgba(47,93,66,0.35);
  transition: text-decoration-color 160ms var(--ease);
}
.text-link:hover, .text-link:focus-visible { text-decoration-color: currentColor; }
#who-we-are.section { padding-top: 56px; padding-bottom: 64px; }
#who-we-are .section-title { font-size: clamp(24px, 3.2vw, 32px); }
.who-stats {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 36px;
}
.who-stat { position: relative; z-index: 1; text-align: center; }
.who-stat-num {
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 10px;
  line-height: 1; margin-bottom: 10px;
}
.who-stat-blue {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(26px, 2.4vw, 36px); color: var(--color-navy-600);
}
.who-stat-black {
  font-family: var(--font-body); font-weight: 500; letter-spacing: normal;
  font-size: clamp(17px, 1.8vw, 20px); color: var(--color-muted);
}
.who-stat-caption { font-size: 12px; color: var(--color-muted); line-height: 1.5; white-space: nowrap; }

/* Backer rows: a static, arrow-navigated strip per sector (not a moving
   marquee — that's already the investor-logo strip's job) so 20+ people
   don't have to be crammed into one busy static grid at once. */
.who-photos { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.who-photos-label {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.who-photos-label .li-badge {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px; background: #0A66C2; flex: none;
}
.who-photos-label .li-badge::before {
  content: "";
  position: absolute;
  inset: -8px;
}
.who-photos-label .li-badge {
  --tt-shift: 0px;
}
.who-photos-label .li-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(calc(-50% + var(--tt-shift))) translateY(4px);
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  max-width: calc(100vw - 24px);
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(14,24,48,0.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease), transform 150ms var(--ease);
  z-index: 20;
}
.who-photos-label .li-badge:focus-visible::after,
.who-photos-label .li-badge.is-active::after {
  opacity: 1;
  transform: translateX(calc(-50% + var(--tt-shift))) translateY(0);
}
@media (hover: hover) {
  .who-photos-label .li-badge:hover::after {
    opacity: 1;
    transform: translateX(calc(-50% + var(--tt-shift))) translateY(0);
  }
}
.backer-row { margin-bottom: 14px; }
.backer-row:last-of-type { margin-bottom: 8px; }
.backer-group-label { font-size: 14px; font-weight: 700; color: var(--color-ink); margin-bottom: 10px; }
.backer-track-wrap { overflow: hidden; }
/* Every card shares the row equally (flex: 1 1 0) so the whole list always
   fits in one line regardless of count, instead of overflowing into a
   scrollable strip. */
.backer-track { display: flex; gap: 14px; }
.backer-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.face-avatar {
  position: relative; border-radius: 50%; overflow: hidden;
  width: 44px; height: 44px; border: 2px solid var(--color-white); box-shadow: var(--shadow-sm);
  margin-bottom: 6px; display: block;
}
.face-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face-avatar img.avatar-top { object-position: center top; }
.backer-credential { font-size: 12px; color: var(--color-muted); line-height: 1.3; overflow-wrap: break-word; }
.who-photos-more { font-size: 13px; color: var(--color-muted); font-style: italic; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.pillar h3 { display: flex; align-items: center; gap: 8px; font-size: 19px; color: var(--color-navy-600); margin-bottom: 6px; }
.pillar-icon { flex-shrink: 0; color: var(--color-navy-600); }
.pillar p { font-size: 14.5px; color: var(--color-muted); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr; }
.about-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.about-avatar-wrap { position: relative; flex-shrink: 0; display: block; }
.about-avatar {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: center 2%;
  box-shadow: var(--shadow-sm); display: block;
}
.about-linkedin {
  position: absolute; bottom: -2px; right: -2px; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: #0A66C2; border-radius: 50%; border: 2px solid var(--color-cream);
}
.about-heading .eyebrow { margin-bottom: 0; }
.about-eyebrow-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.about-heading h2 { margin-bottom: 0; font-size: clamp(28px, 3.2vw, 36px); }
.role-tag { color: var(--color-accent-dark); font-weight: 700; margin-bottom: 20px; font-size: 15px; }
.bio-short p, .bio-long p { font-size: 16.5px; margin-bottom: 1.3em; }
.link-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; color: var(--color-navy-800);
  font-weight: 700; font-size: 15px; padding: 12px 0; margin-top: 4px;
  border-bottom: 2px solid var(--color-accent);
}
.link-toggle svg { transition: transform 200ms var(--ease); }
.link-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.bio-long { margin-top: 8px; }
.about-credentials-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.about-credentials-pill {
  display: inline-block; padding: 2px 10px;
  border: 1px solid var(--color-border); border-radius: 999px;
  background: var(--color-white); font-size: 11px; font-weight: 500;
  color: var(--color-navy-600); line-height: 1.6;
}

.life-photos { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.life-photos-label {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted);
  margin-bottom: 16px;
}
.life-photos-grid { display: flex; justify-content: space-between; }
/* The swipe-hint chevron only makes sense where these strips actually
   scroll (mobile); the mobile media query switches this back on. */
.scroll-hint { display: none; }
.life-photo { display: flex; flex-direction: column; flex: none; width: 110px; margin: 0; }
/* A Polaroid-style mat: thin on top/sides, noticeably thicker at the
   bottom, is what actually reads as a "printed, framed keepsake" rather
   than a photo with a colored border. */
.photo-frame {
  background: #FDFCF9; padding: 4% 4% 8%; border: 1px solid var(--color-border);
  box-shadow: 0 6px 14px rgba(14,24,48,0.16), 0 2px 4px rgba(14,24,48,0.08);
  margin-bottom: 8px;
}
.life-photo img {
  display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover;
}
.life-photo figcaption { font-size: 12.5px; color: var(--color-muted); line-height: 1.35; }

/* ---------- Why Us ---------- */
.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.compare-card {
  background: var(--color-cream); border-radius: var(--radius-lg); padding: 32px 28px;
  border: 1px solid var(--color-border);
}
.compare-card ul { display: flex; flex-direction: column; gap: 14px; }
.compare-card li {
  font-size: 15px; padding-left: 22px; position: relative; color: var(--color-muted);
}
.compare-card li::before { content: "\2013"; position: absolute; left: 0; color: var(--color-muted); }
.compare-tag {
  font-family: var(--font-mono);
  font-weight: 500; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-navy-800); margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 2px solid var(--color-border);
}
.compare-card-featured {
  background: var(--color-navy-800); border-color: var(--color-navy-800);
  transform: scale(1.03); box-shadow: var(--shadow-lg);
}
.compare-card-featured li { color: rgba(255,255,255,0.85); }
.compare-card-featured li::before { color: var(--color-accent-light); }
.compare-tag-accent { color: var(--color-accent-light); border-bottom-color: rgba(255,255,255,0.18); }

/* ---------- Process / Criteria (navy section) ---------- */
.process-subsection { margin-top: 64px; }
.process-subsection:first-of-type { margin-top: 8px; }
.subsection-title-light { color: #fff; font-size: clamp(28px, 4vw, 40px); text-align: center; margin-bottom: 10px; }
.criteria-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; }
.criteria-card {
  background: var(--color-white); border-radius: var(--radius-md); padding: 28px 24px;
  box-shadow: var(--shadow-md);
}
.criteria-card { text-align: center; }
.crit-icon {
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
  width: 48px; height: 48px; border-radius: 50%; background: rgba(47,93,66,0.1); color: var(--color-accent);
}
.criteria-card h3 { font-size: 18px; margin-bottom: 10px; }
.criteria-card p { font-size: 14.5px; color: var(--color-muted); line-height: 1.5; }

.process-timeline {
  position: relative;
  display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 32px; margin-top: 36px;
}
/* the route line connecting each waypoint marker's center; only drawn at the
   5-across desktop layout, since a wrapped/stacked grid can't share one line */
.process-timeline::before {
  content: "";
  position: absolute;
  top: 22px; left: 10%; right: 10%;
  border-top: 2px dashed rgba(255,255,255,0.25);
  z-index: 0;
}
.process-step { text-align: left; padding: 0 4px; }
.process-index {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 20px;
  background: var(--color-navy-800); border: 2.5px solid var(--color-accent);
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16px;
  z-index: 1;
}
/* the small orbiting dot, echoing the ring + dot in the Waypoint mark */
.process-index::after {
  content: "";
  position: absolute; bottom: -2px; right: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-navy-800);
}
.process-step h4 { color: #fff; font-size: 17px; margin-bottom: 8px; text-align: center; }
.process-step p { font-size: 14.5px; color: rgba(255,255,255,0.65); text-align: center; }

.confidentiality-note {
  margin-top: 44px; display: flex; align-items: flex-start; gap: 14px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md); padding: 22px 26px; max-width: 720px; margin-left: auto; margin-right: auto;
}
.confidentiality-note svg { flex: none; color: var(--color-accent-light); margin-top: 2px; }
.confidentiality-note p { font-size: 14.5px; color: rgba(255,255,255,0.75); }

/* ---------- Promise ---------- */
.promise-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.promise-card {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 30px 26px;
}
.promise-num { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; color: var(--color-accent); font-size: 24px; }
.promise-card h3 { font-size: 18px; margin-top: 10px; }
.promise-card p { font-size: 15px; color: var(--color-muted); }
@media (min-width: 769px) {
  .promise-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Referral ---------- */
.section-referral {
  background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent));
  color: #fff; padding: 72px 0;
}
.referral-grid { max-width: var(--container-w); margin: 0 auto; padding: 0 24px; }
.referral-content h2 { color: #fff; font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 18px; max-width: none; }
.referral-lede { font-size: 17px; color: rgba(255,255,255,0.92); margin-bottom: 36px; max-width: none; }
.referral-steps { position: relative; display: flex; flex-direction: column; gap: 16px; margin-bottom: 36px; }
/* vertical route line linking the three waypoint markers, mirroring the
   horizontal one in the process timeline above */
.referral-steps::before {
  content: "";
  position: absolute;
  left: 16px; top: 17px; bottom: 17px;
  border-left: 2px dashed rgba(255,255,255,0.4);
  z-index: 0;
}
.referral-step { position: relative; display: flex; align-items: flex-start; gap: 16px; }
.referral-step-num {
  position: relative;
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 2px solid rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-display); font-size: 14px;
  color: var(--color-accent-dark); z-index: 1;
}
.referral-step-num::after {
  content: "";
  position: absolute; bottom: -2px; right: -1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent-dark);
  box-shadow: 0 0 0 2px #fff;
}
.referral-step p { margin: 0; padding-top: 6px; font-size: 16px; }
.section-referral .btn-accent { background: var(--color-navy-800); }
.section-referral .btn-accent:hover { background: var(--color-navy-900); }
.section-referral .eyebrow-light { color: rgba(255,255,255,0.85); }

/* ---------- Why-us / Who-we-are shared bits ---------- */

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--color-cream); border-radius: var(--radius-md); padding: 4px 24px;
  border: 1px solid var(--color-border);
}
.faq-item summary {
  cursor: pointer; padding: 20px 0; font-weight: 700; font-size: 16.5px; color: var(--color-ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 22px; color: var(--color-accent); flex: none; font-weight: 400;
  transition: transform 200ms var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 10px; padding-bottom: 0; color: var(--color-muted); font-size: 15px; line-height: 1.55; }
.faq-item p:last-of-type { margin-bottom: 0; padding-bottom: 22px; }
.faq-item summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; min-height: 640px; }
.contact-info {
  background: var(--color-navy-900); color: rgba(255,255,255,0.9);
  padding: 96px 64px; display: flex; flex-direction: column; justify-content: center;
}
.contact-info h2 { color: #fff; font-size: clamp(28px, 3.4vw, 38px); }
.contact-lede { font-size: 16.5px; color: rgba(255,255,255,0.72); margin-bottom: 40px; max-width: 440px; }
.contact-detail { display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px; }
.contact-label { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent-light); font-weight: 500; }
.contact-detail a, .contact-detail span { font-size: 17px; color: #fff; }
.contact-detail a:hover { color: var(--color-accent-light); }

/* same navy as .contact-info so the section reads as one continuous block
   flowing into the footer below, instead of a light/dark split */
.contact-form-wrap { background: var(--color-navy-900); padding: 96px 64px; display: flex; align-items: center; border-left: 1px solid rgba(255,255,255,0.1); }
.contact-form { width: 100%; max-width: 480px; margin: 0 auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,0.85); margin-bottom: 8px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 13px 16px; font-family: var(--font-body); font-size: 15px;
  border: 1.5px solid transparent; border-radius: var(--radius-sm); background: #fff;
  color: var(--color-ink); transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
  min-height: 48px;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field select {
  padding-left: 14px; padding-right: 40px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%23334033' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(47,93,66,0.35);
}
.form-note { font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 20px; }
.form-status { margin-top: 8px; font-size: 14.5px; font-weight: 600; min-height: 0; }
.form-status:empty { margin-top: 0; }
.form-status.success { color: #8FE0AE; }
.form-status.error { color: #FF9C94; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-navy-900); color: rgba(255,255,255,0.7); padding: 72px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 56px; }
.footer-logo { height: 42px; filter: brightness(0) invert(1); margin-bottom: 16px; }
.footer-brand p { font-size: 14.5px; max-width: 280px; }
.footer-nav { display: flex; flex-direction: column; gap: 12px; }
.footer-nav a:hover { color: #fff; }
.footer-contact { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; }
.footer-contact a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 22px 24px; font-size: 13px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 550ms var(--ease), transform 550ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================
   Responsive
   ============================ */
@media (max-width: 1023px) {
  .who-stats { grid-template-columns: 1fr; gap: 44px; max-width: 420px; margin-left: auto; margin-right: auto; }
  .life-photos-grid { grid-template-columns: repeat(3, 1fr); }
  .criteria-grid { grid-template-columns: repeat(2, 1fr); }
  .process-timeline { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .process-timeline::before { display: none; }
  .compare-grid { grid-template-columns: 1fr; }
  .compare-card-featured { transform: none; order: -1; }
  .contact-grid { grid-template-columns: 1fr; min-height: 0; }
  .contact-info, .contact-form-wrap { padding: 64px 32px; }
  /* Both blocks' full padding stacks at the seam between them (same navy
     color, so it reads as one long gap rather than two boxes), on top of
     the email block's own margin; tighten that seam so it matches the
     ~64px used above "Get in Touch". */
  .contact-info { padding-bottom: 32px; }
  .contact-info .contact-detail { margin-bottom: 0; }
  .contact-form-wrap { padding-top: 32px; padding-bottom: 40px; }
  .copyright-bar .copyright-inner { padding-left: 32px; padding-right: 32px; }
  .contact-form-wrap { border-left: none; border-top: 1px solid rgba(255,255,255,0.1); }
}

@media (max-width: 768px) {
  .section { padding: 72px 0; }
  /* Grid sizing got unpredictable once the nav went out-of-flow for its own
     mobile treatment (an empty "auto" track computing to 0 rather than
     ceding its space), so mobile drops the desktop 3-column grid for a
     plain flex row: logo left, hamburger right, both flush to the same
     inset the hero text below uses, so they read as aligned. */
  .header-inner { display: flex; justify-content: space-between; align-items: center; position: relative; padding-left: 34px; padding-right: 34px; }
  .header-inner .brand, .header-inner .header-actions { justify-self: unset; }
  /* .site-header.scrolled/.menu-open reset padding via shorthand at higher
     specificity, which would otherwise snap the logo back out of alignment
     with the hero text the moment you scroll or open the menu. */
  .site-header.scrolled .header-inner, .site-header.menu-open .header-inner { padding-left: 34px; padding-right: 34px; }
  /* At this width, flex:1 1 0 forces all ~10-15 backer cards per row into
     one squeezed line; let the row scroll horizontally instead, with each
     card at a fixed, legible width. */
  .backer-track-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .backer-track { gap: 20px; padding-bottom: 4px; }
  .backer-card { flex: 0 0 84px; min-width: 84px; }
  /* A small chevron inline with each strip's own label, signaling there's
     more to swipe to without sitting on top of the strip itself. */
  .backer-group-label, .life-photos-label { display: flex; align-items: center; justify-content: space-between; }
  .scroll-hint {
    position: relative;
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-sm); border: none; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-navy-800); font: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .scroll-hint::before {
    content: "";
    position: absolute;
    inset: -7px;
  }
  .scroll-hint:active { background: var(--color-bg-alt, #F4F2ED); }
  /* A compact dropdown anchored under the hamburger, sized to its content
     rather than the full screen, so the page stays visible and scrollable
     behind it instead of being blocked by a full-screen takeover. */
  .header-inner .main-nav {
    position: absolute; top: calc(100% + 8px); left: 50%; right: auto; bottom: auto;
    width: max-content; max-width: calc(100vw - 68px); max-height: 70vh;
    overflow-y: auto;
    opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.98); pointer-events: none;
    transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  }
  .main-nav.is-open { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; }
  /* Same pill row as desktop (.main-nav ul/a base rules), just wrapped in
     the compact dropdown container instead of sitting inline in the header. */
  /* At this width the pill's natural size nearly fills the space between
     the two 34px insets, so it reads as centered on the page rather than
     hanging off the hamburger that opened it; tightening it down leaves a
     clearly asymmetric gap that reads as right-anchored. */
  .main-nav a { white-space: nowrap; padding: 8px 11px; font-size: 13px; }
  .nav-toggle { display: flex; }
  .header-actions .btn-small { display: none; }
  .pillars { grid-template-columns: 1fr; }
  /* A 2-col grid made every row as tall as its longest caption, so rows with
     short captions next to long ones looked jagged and half-empty. A
     swipeable single row (like the backers strip) gives each photo more
     room and sidesteps uneven row heights entirely. */
  .life-photos-grid {
    display: flex; align-items: flex-start; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; margin: 0 -34px; padding-left: 34px; padding-right: 34px;
  }
  .life-photo { flex: 0 0 26vw; max-width: 100px; margin: 0; }
  .criteria-grid { grid-template-columns: 1fr; }
  .process-timeline { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero { margin: 10px 10px 16px; border-radius: 18px; min-height: 74vh; min-height: 74dvh; }
  .hero-content { padding-top: 84px; }
  #about, .section-referral { margin: 12px 10px; border-radius: 18px; }
  .section-referral { padding: 60px 0; }
  .scroll-cue { display: none; }
}

@media (min-width: 1441px) {
  .container { max-width: 1320px; }
}