/* ==========================================================================
   ClearPath RN Care Advocacy
   Brand colors live here. Change them once and the whole site follows.
   ========================================================================== */
:root {
  --navy-900: #13253b;
  --navy: #1f3a5c;
  --navy-700: #2c4d75;
  --navy-100: #e5ebf2;

  --sage: #86a182;
  --sage-600: #6a8866;
  --sage-700: #4d6a4a;
  --sage-200: #d3dfcf;
  --sage-100: #e6eee3;
  --sage-50: #f1f5ef;

  --cream: #f8f6f1;
  --white: #ffffff;
  --ink: #1b2a3a;
  --muted: #4b5b6c;
  --line: #e2e4dd;

  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(19, 37, 59, 0.06), 0 18px 40px -16px rgba(19, 37, 59, 0.22);
  --container: 1160px;
  --header-h: 76px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* standard drawer/sheet curve */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);      /* accelerate out, for closing */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Land each section flush under the sticky header (header height + its 1px bottom border) */
  scroll-padding-top: calc(var(--header-h) + 1px);
  -webkit-text-size-adjust: 100%;
  /* Stops iOS Safari's double-tap zoom (e.g. tapping the menu button twice); pinch-zoom still works */
  touch-action: manipulation;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--navy); text-underline-offset: 3px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--navy-900);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 4.3rem); }
h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
h3 { font-size: 1.45rem; }

:focus-visible { outline: 3px solid var(--sage-600); outline-offset: 3px; border-radius: 4px; }

.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
@media (min-width: 720px) {
  .container { width: min(100% - 64px, var(--container)); }
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--navy); color: #fff; padding: 0.75rem 1rem; border-radius: 8px;
}
.skip-link:focus { top: 12px; }

.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { text-align: center; margin-inline: auto; }
.section-head .lead { margin-bottom: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.65rem;
  margin-bottom: 1rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage-700);
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--sage);
}
.lead { font-size: 1.22rem; color: var(--muted); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 54px; padding: 0.8rem 1.6rem;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-size: 1.05rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn .icon { width: 20px; height: 20px; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-900); }
.btn-secondary { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-secondary:hover { background: var(--navy); color: #fff; }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--sage-100); }
.btn-outline-light { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
@media (max-width: 519px) {
  .btn-row { flex-direction: column; }
}

/* Let grid columns shrink below their content's natural width on small phones */
.hero-grid > *, .gap-grid > *, .about-grid > *, .partners-inner > *, .contact-grid > * { min-width: 0; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; }
/* The header's background (and bottom border) live on this layer, so the mobile menu tray
   can sit between it and the page and slide out from underneath the header bar. */
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -1px; z-index: -1;
  /* Solid, not frosted: a blur would have to be redrawn every frame while the tray slides beneath it */
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.site-header.scrolled::before { border-bottom-color: var(--line); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--navy); }
.brand-mark { width: 54px; height: 34px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--navy);
}
.brand-sub {
  margin-top: 4px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--sage-700);
}
.brand-light, .brand-light .brand-name { color: #fff; }
.brand-light .brand-sub { color: var(--sage-200); }

.nav-toggle {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--navy); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.nav-toggle:hover { border-color: var(--sage-200); box-shadow: 0 2px 8px -2px rgba(19, 37, 59, 0.12); }

/* Hamburger: three bars stacked on the center line, offset with transforms so they can rotate into an X */
.burger { position: relative; display: block; width: 20px; height: 14px; }
.burger span {
  position: absolute; left: 0; top: 6px;
  width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 0.4s var(--ease-out), opacity 0.2s ease;
}
.burger span:nth-child(1) { transform: translateY(-6px); }
.burger span:nth-child(3) { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(1) { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(3) { transform: rotate(-45deg); }

.site-nav ul { list-style: none; }

/* ---- Mobile tray ---- */
@media (max-width: 959px) {
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 0.5rem 16px 1.75rem;
    background: var(--cream);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 28px 48px -16px rgba(19, 37, 59, 0.28), 0 4px 10px -4px rgba(19, 37, 59, 0.08);
    /* Tucked up behind the header bar (z-index below the header's background layer). The extra
       64px lifts the shadow (which reaches ~60px below the tray) out of sight too, so the whole
       thing, contents and shadow, moves as one piece and nothing pops in or out. */
    z-index: -2;
    visibility: hidden;
    transform: translateY(calc(-100% - 64px));
    will-change: transform; /* ready on the GPU before the first frame */
  }
  .site-nav.open { visibility: visible; transform: none; }
  /* Transitions exist only while the menu button is being used (script.js adds .animating),
     so page load, rotation, or resizing across the breakpoint never visibly slides the tray.
     Opening decelerates into place; closing accelerates away behind the header. */
  .site-nav.animating { transition: transform 0.3s var(--ease-exit), visibility 0s linear 0.3s; }
  .site-nav.animating.open { transition: transform 0.45s var(--ease-sheet), visibility 0s; }

  .site-nav ul {
    display: flex; flex-direction: column;
    /* Scrolls only if the menu is taller than the screen (phones in landscape) */
    max-height: calc(100vh - var(--header-h) - 2.25rem);
    max-height: calc(100dvh - var(--header-h) - 2.25rem);
    overflow-y: auto; overscroll-behavior: contain;
  }

  .site-nav a:not(.btn) {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.05rem 0.25rem;
    font-size: 1.2rem; font-weight: 500; color: var(--navy-900); text-decoration: none;
    border-bottom: 1px solid var(--line);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s;
  }
  .site-nav a:not(.btn)::after {
    content: ""; flex: none; width: 18px; height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a8866' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.25s var(--ease-out);
  }
  .site-nav a:not(.btn):hover, .site-nav a:not(.btn):active { color: var(--sage-700); }
  .site-nav a:not(.btn):hover::after, .site-nav a:not(.btn):active::after { transform: translateX(4px); }

  .site-nav .btn { width: 100%; margin-top: 1.5rem; }
  .site-nav .nav-call { padding-top: 1rem; text-align: center; font-size: 0.95rem; color: var(--muted); }
  .site-nav .nav-call a {
    display: inline; padding: 0; border: 0;
    font-size: inherit; font-weight: 600; color: var(--navy); text-decoration: underline;
  }
  .site-nav .nav-call a::after { content: none; }
}
@media (min-width: 720px) and (max-width: 959px) {
  .site-nav { padding-inline: 32px; }
}

/* Invisible layer behind the open tray: tapping outside the menu closes it.
   Deliberately no dim color. iOS Safari (26+) recolors its toolbar to match anything dark at the
   screen edges, and it snaps rather than fades, so the tray's shadow provides the separation instead. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 40;
  visibility: hidden;
  touch-action: none; /* keeps iOS from scrolling the page behind the open menu */
}
.nav-open .nav-scrim { visibility: visible; }
.nav-open { overflow: hidden; }
.nav-open .site-header::before { border-bottom-color: var(--line); }

/* ---- Desktop nav ---- */
@media (min-width: 960px) {
  .nav-toggle, .nav-scrim, .site-nav .nav-call { display: none; }
  .site-nav ul { display: flex; align-items: center; gap: 0.15rem; }
  .site-nav a:not(.btn) {
    position: relative; display: block;
    padding: 0.5rem 0.85rem;
    font-size: 1rem; font-weight: 500; color: var(--muted); text-decoration: none;
    transition: color 0.2s;
  }
  /* Underline that draws in from the left on hover */
  .site-nav a:not(.btn)::after {
    content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.2rem;
    height: 2px; border-radius: 2px; background: var(--sage);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.35s var(--ease-out);
  }
  .site-nav a:not(.btn):hover { color: var(--navy); }
  .site-nav a:not(.btn):hover::after { transform: scaleX(1); }
  .site-nav .btn { margin-left: 0.75rem; min-height: 46px; padding: 0.6rem 1.25rem; font-size: 1rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(9rem, 17vw, 14rem);
  background:
    radial-gradient(ellipse 60% 70% at 88% 18%, var(--sage-100), transparent 70%),
    var(--cream);
}
.hero-grid { position: relative; z-index: 1; display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; }
}

.hero-tagline {
  margin-bottom: 1.1rem;
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  color: var(--sage-700);
}
.hero h1 em { font-style: italic; color: var(--sage-700); }
.hero .lead { max-width: 34rem; margin-bottom: 2rem; }

.hero-trust {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  margin-top: 2rem;
  font-size: 0.98rem; font-weight: 600; color: var(--navy);
}
.hero-trust li { display: flex; align-items: center; gap: 0.5rem; }
.hero-trust li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sage);
}
@media (max-width: 519px) {
  .hero-trust {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    padding-top: 1.25rem; border-top: 1px solid var(--line);
    font-size: 0.9rem; line-height: 1.25; text-align: center;
  }
  .hero-trust li { flex-direction: column; justify-content: flex-start; padding-inline: 0.4rem; }
  .hero-trust li + li { border-left: 1px solid var(--line); }
}

.hero-visual { position: relative; max-width: 440px; width: 100%; margin-inline: auto; }
.hero-visual::before {
  content: ""; position: absolute; inset: 7% -5% 12% 9%;
  border-radius: 28px; background: var(--sage-200);
  transform: rotate(4deg);
}
@media (max-width: 519px) {
  .hero-visual::before { inset: 6% -6px 10% 8%; transform: rotate(3deg); }
}
.update-card {
  position: relative;
  padding: 1.6rem;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow);
}
.update-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; }
.update-head p { margin: 0; line-height: 1.3; }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: #fff;
}
.avatar svg { width: 30px; height: 19px; }
.update-from { font-weight: 700; font-size: 1rem; color: var(--navy-900); }
.update-time { font-size: 0.85rem; color: var(--muted); }
.update-title {
  margin-bottom: 0.5rem;
  font-family: var(--font-serif); font-size: 1.35rem; font-weight: 500; line-height: 1.25;
  color: var(--navy-900);
}
.update-body { font-size: 1rem; line-height: 1.6; color: var(--muted); }
.update-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.75rem; border-radius: 999px;
  background: var(--sage-100); color: var(--sage-700);
  font-size: 0.85rem; font-weight: 600;
}
.tag .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.card-note {
  position: relative; margin: 1.1rem 0 0; text-align: center;
  font-size: 0.85rem; font-style: italic; color: var(--muted);
}

.hero-bridge {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: clamp(120px, 15vw, 220px);
  fill: none; stroke: var(--sage); stroke-width: 1.6; stroke-linecap: round;
  opacity: 0.6; pointer-events: none;
}
.hero-bridge path { vector-effect: non-scaling-stroke; }
.hero-bridge .deck { stroke: var(--navy); stroke-width: 2.4; opacity: 0.35; }

/* Phones get a single, complete arch instead of a cropped slice of the wide bridge */
.hero-bridge-sm { display: none; }
@media (max-width: 719px) {
  .hero-bridge-lg { display: none; }
  .hero-bridge-sm { display: block; height: 150px; }
  .hero, .contact { padding-bottom: 11rem; }
}

/* ---------- The gap ---------- */
.gap { background: #fff; }
.gap-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) {
  .gap-grid { grid-template-columns: 1fr 1fr; gap: 4.5rem; }
}
.worry-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1.5rem 0 1.75rem; }
.worry-list li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--cream); border-radius: var(--radius-sm);
  font-size: 1rem; font-weight: 500; line-height: 1.4;
}
.worry-list li::before {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: 0.42em;
  border-radius: 50%; background: var(--sage);
}
.gap-answer {
  margin: 0;
  font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 1.85rem); font-style: italic;
  color: var(--navy);
}

.bridge-figure {
  margin: 0; padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--sage-50); border: 1px solid var(--sage-100); border-radius: 26px;
}
.bridge-svg { width: 100%; height: auto; fill: none; stroke-linecap: round; }
.bridge-svg .arch { stroke: var(--sage); stroke-width: 5; }
.bridge-svg .hangers { stroke: var(--sage); stroke-width: 2.5; }
.bridge-svg .deck { stroke: var(--navy); stroke-width: 6; }
.bridge-svg circle { fill: var(--navy); }

.bridge-labels {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 0.75rem;
  margin-top: 0.5rem;
}
.bridge-end {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  font-size: 0.95rem; font-weight: 600; line-height: 1.3; color: var(--navy-900);
}
.bridge-end-right { align-items: flex-end; text-align: right; }
.end-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--navy); border: 1px solid var(--line);
}
.end-icon .icon { width: 22px; height: 22px; }
.bridge-center {
  align-self: start; margin-top: -0.4rem;
  padding: 0.45rem 1rem; border-radius: 999px;
  background: var(--navy); color: #fff;
  font-size: 0.92rem; font-weight: 700; white-space: nowrap;
}
@media (max-width: 519px) {
  .bridge-labels { grid-template-columns: 1fr 1fr; }
  .bridge-center { grid-column: 1 / -1; order: -1; justify-self: center; margin: 0 0 0.25rem; }
}

/* ---------- About ---------- */
.about-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 5fr 7fr; gap: 5rem; }
}
.portrait-wrap { position: relative; max-width: 260px; width: 100%; margin-inline: auto; padding-bottom: 2rem; }
@media (min-width: 900px) {
  .portrait-wrap { max-width: 340px; }
}
.portrait {
  display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: 28px;
  background: linear-gradient(160deg, var(--sage-100), var(--sage-200));
  color: var(--navy);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait-mark { width: 45%; height: auto; aspect-ratio: 64 / 40; opacity: 0.85; }
.portrait-caption {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: max-content; max-width: min(calc(100% + 3rem), calc(100vw - 32px));
  padding: 0.9rem 1.4rem; border-radius: 16px;
  background: #fff; box-shadow: var(--shadow); text-align: center; line-height: 1.35;
}
.portrait-caption strong { display: block; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; color: var(--navy-900); }
.portrait-caption span { font-size: 0.9rem; color: var(--muted); }

.credentials { list-style: none; display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.5rem; }
.credentials li {
  padding: 0.45rem 0.95rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 0.93rem; font-weight: 600; color: var(--navy);
}

/* ---------- Services ---------- */
.services { background: #fff; }
.services-grid { display: grid; gap: 0.9rem; }
@media (min-width: 680px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (min-width: 1040px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Phones: compact row (icon beside text). Wider screens: stacked card. */
.service-card {
  display: grid; grid-template-columns: 48px 1fr; column-gap: 1rem; align-items: start;
  padding: 1.25rem;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
}
.service-icon {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--sage-100); color: var(--sage-700);
}
.service-card h3 { margin: 0.1rem 0 0.3rem; font-size: 1.2rem; }
.service-card p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--muted); }
@media (min-width: 680px) {
  .service-card { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 1.9rem); }
  .service-icon { width: 54px; height: 54px; margin-bottom: 1.1rem; border-radius: 15px; }
  .service-icon .icon { width: 27px; height: 27px; }
  .service-card h3 { margin: 0 0 0.4rem; font-size: 1.35rem; }
}

/* ---------- How it works ---------- */
.steps-wrap { position: relative; }
.steps-bridge { display: none; }
.steps { list-style: none; position: relative; display: grid; gap: 1.5rem; }
.steps::before {
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px;
  width: 2px; background: var(--sage-200);
}
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1.25rem; }
.step-num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--font-serif); font-size: 1.55rem; font-weight: 500;
  box-shadow: 0 0 0 7px var(--cream);
}
.step h3 { margin: 0.7rem 0 0.35rem; font-size: 1.35rem; }
.step p { margin: 0; font-size: 1.02rem; color: var(--muted); }

@media (min-width: 900px) {
  .steps-bridge {
    display: block; position: absolute; top: 0; left: 0;
    width: 100%; height: 80px;
    fill: none; stroke: var(--sage); stroke-width: 2; stroke-linecap: round;
  }
  .steps-bridge path { vector-effect: non-scaling-stroke; }
  .steps-bridge .deck { stroke: var(--sage-200); stroke-width: 3; }
  .steps { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .steps::before { display: none; }
  .step {
    grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 0;
    padding: 32px 1rem 0; text-align: center;
  }
  .step h3 { margin-top: 1.25rem; }
}

/* ---------- Partners (slim band) ---------- */
.partners {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background: #fff; border-top: 1px solid var(--line);
}
.partners-inner { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 900px) {
  .partners-inner { grid-template-columns: 1fr auto; gap: 4rem; }
}
.partners .eyebrow { margin-bottom: 0.6rem; }
.partners-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-serif); font-size: clamp(1.4rem, 2.6vw, 1.75rem); line-height: 1.2;
  color: var(--navy-900);
}
.partners-inner > div > p:last-child { margin: 0; max-width: 44rem; color: var(--muted); }

/* ---------- Service area ---------- */
.area h2 { font-size: clamp(1.75rem, 4.2vw, 2.9rem); }
.area-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
  max-width: 920px; margin-inline: auto;
}
@media (min-width: 760px) {
  .area-grid { grid-template-columns: 1fr auto 1fr; gap: 0.5rem; align-items: center; }
}
.area-card {
  height: 100%; padding: 1.25rem 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  text-align: center;
}
.area-icon {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 0.75rem; border-radius: 50%;
  background: var(--navy); color: #fff;
}
.area-card h3 { margin-bottom: 0.25rem; font-size: 1.15rem; }
.area-card p { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--muted); }
@media (min-width: 760px) {
  .area-card { padding: 2rem; }
  .area-icon { width: 52px; height: 52px; margin-bottom: 1rem; }
  .area-card h3 { font-size: 1.45rem; }
  .area-card p { font-size: 1rem; }
}
.area-bridge {
  display: none; width: 120px; height: 60px;
  fill: none; stroke: var(--sage); stroke-width: 2.5; stroke-linecap: round;
}
.area-bridge .deck { stroke: var(--navy); stroke-width: 3.5; }
@media (min-width: 760px) {
  .area-bridge { display: block; }
}
.area-note { max-width: 640px; margin: 1.75rem auto 0; text-align: center; color: var(--muted); }
.area-note strong { color: var(--navy-900); }

/* ---------- Contact ---------- */
.contact {
  position: relative; overflow: hidden;
  padding-bottom: clamp(9rem, 16vw, 13rem);
  background: var(--navy); color: #fff;
}
.contact-grid { position: relative; z-index: 1; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4.5rem; }
}
.contact h2 { color: #fff; }
.contact .eyebrow { color: var(--sage-200); }
.contact .lead { margin: 0; color: rgba(255, 255, 255, 0.8); }

.contact-card {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: #fff; color: var(--ink); border-radius: 24px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}
.contact-card-head {
  display: flex; align-items: center; gap: 0.9rem;
  padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line);
}
.contact-card-head p { margin: 0; line-height: 1.3; }
.contact-mark { width: 54px; height: 34px; flex: none; color: var(--navy); }
.contact-name { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; color: var(--navy-900); }
.contact-role { font-size: 0.93rem; color: var(--muted); }
.contact-actions { display: grid; gap: 0.75rem; }
.contact-actions .btn { overflow-wrap: anywhere; }
.fine-print { margin: 1.25rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }

.contact-bridge { opacity: 1; stroke: rgba(255, 255, 255, 0.14); }
.contact-bridge .deck { stroke: rgba(255, 255, 255, 0.22); opacity: 1; }

/* ---------- Footer ---------- */
.site-footer {
  padding: 3rem 0 2.25rem;
  background: var(--navy-900); color: rgba(255, 255, 255, 0.72);
  font-size: 0.97rem;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; gap: 1.5rem; }
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: 1fr auto; align-items: end; gap: 3rem; }
  .footer-contact { text-align: right; }
}
.footer-tagline { margin: 1rem 0 0; font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--sage-200); }
.footer-contact p { margin: 0 0 0.4rem; }
.footer-contact p:last-child { margin-bottom: 0; }
.footer-bottom {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem; color: rgba(255, 255, 255, 0.55);
}
.footer-bottom p:last-child { margin-bottom: 0; }
.disclaimer { max-width: 60rem; }

/* ---------- 404 ---------- */
.not-found {
  display: grid; place-items: center; min-height: 100vh; padding: 2rem 16px;
  text-align: center;
}
.not-found .brand-mark { width: 96px; height: 60px; margin: 0 auto 1.5rem; color: var(--navy); }
.not-found p { color: var(--muted); margin-bottom: 2rem; }