/* ============================================================
   CTP Website v2 — identity pass
   Fraunces display + Inter UI, navy-forward, rounded photo corners,
   warm paper bands, connected "path" steps, accessible focus.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #ffffff;
  font-family: var(--font-sans);
  color: var(--slate-700);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--teal-700); text-decoration: none; }
a:hover { color: var(--teal-600); }

img { max-width: 100%; height: auto; }

[id] { scroll-margin-top: 96px; }

.page { width: 100%; background: #ffffff; overflow-x: clip; }

.container { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* ---- Accessibility primitives ---- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--navy-800);
  color: #ffffff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  transition: top 0.15s ease-out;
}
.skip-link:focus { top: 12px; color: #ffffff; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring), 0 0 0 1.5px var(--teal-600);
  border-radius: 6px;
}

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

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.35s ease-out, border-color 0.35s ease-out;
}

/* Overlay header: on pages that open with a navy hero, the bar starts
   transparent over the hero and solidifies to white glass on scroll.
   The negative margin lets the hero surface extend up behind the bar;
   the hero gets matching top padding so its content doesn't move. */
.site-header.overlay { margin-bottom: calc(-1 * var(--header-h, 79px)); }
.site-header.overlay + main > .hero:first-child,
.site-header.overlay + main > .page-hero:first-child,
.site-header.overlay + main > .error-band:first-child { padding-top: var(--header-h, 79px); }

.site-header.overlay:not(.scrolled):not(:has(.site-nav.open)) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header.overlay:not(.scrolled):not(:has(.site-nav.open)) .nav-link { color: rgba(255,255,255,0.82); }
.site-header.overlay:not(.scrolled):not(:has(.site-nav.open)) .nav-link:hover { background: rgba(255,255,255,0.12); color: #ffffff; }
.site-header.overlay:not(.scrolled):not(:has(.site-nav.open)) .nav-link.active { background: var(--accent); color: var(--on-accent); }
.site-header.overlay:not(.scrolled):not(:has(.site-nav.open)) .nav-toggle {
  background: transparent;
  border-color: rgba(255,255,255,0.28);
  color: #ffffff;
}
.site-header.overlay:not(.scrolled):not(:has(.site-nav.open)) .wm-img:not(.wm-white) { opacity: 0; }
.site-header.overlay:not(.scrolled):not(:has(.site-nav.open)) .wm-white { opacity: 1; }
/* The color circle mark half-disappears on navy — render it solid white
   while the bar is transparent. */
.site-header.overlay:not(.scrolled):not(:has(.site-nav.open)) .brand-mark { filter: brightness(0) invert(1); }

/* Scroll progress: a 2px teal hairline under the bar tracking page
   position (element injected by main.js; scaleX set on scroll). */
.scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--teal-400), var(--accent));
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}

.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; height: 46px; }
.brand-mark { height: 46px; width: 46px; display: block; position: relative; z-index: 2; transition: filter 0.3s ease-out; }

.wm-wrap {
  position: relative;
  overflow: hidden;
  height: 40px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 164px;
  opacity: 1;
  transition: width 0.3s var(--ease-settle), opacity 0.22s ease-out;
}
.wm-img {
  height: 40px;
  width: 208px;
  max-width: none;
  margin-left: -49px;
  display: block;
  transform: translateX(0);
  transition: transform 0.3s var(--ease-settle), opacity 0.3s ease-out;
}
/* White wordmark sits on top of the color one; the overlay header
   cross-fades between them as the bar solidifies. */
.wm-img.wm-white {
  position: absolute;
  top: 0;
  left: -49px;
  margin-left: 0;
  opacity: 0;
}
/* Full logo stays visible at all times (no collapse on scroll). */

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.16s ease-out, color 0.16s ease-out;
  background: transparent;
  color: var(--slate-600);
}
/* v2: quiet hover; the solid teal pill is reserved for the active section */
.nav-link:hover { background: var(--teal-50); color: var(--navy-800); }
.nav-link.active { background: var(--accent); color: #ffffff; }
.nav-link.active:hover { background: var(--teal-600); color: #ffffff; }

.nav-cta {
  margin-left: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--gold-500);
  color: var(--navy-800);
  transition: background 0.16s ease-out;
}
.nav-cta:hover { background: var(--gold-400); color: var(--navy-800); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: #ffffff;
  color: var(--navy-800);
  cursor: pointer;
}

/* -- Nav dropdown (Careers). Opens on hover and on keyboard focus, so it
      needs no JS on desktop; on mobile it renders as an indented list. -- */
/* Careers is a dropdown parent, not a link — it is a <button> so it stays
   keyboard-reachable (focus opens the menu via :focus-within) without
   pretending to lead anywhere. Buttons do not inherit type styles, so reset. */
button.nav-parent {
  border: 0;
  margin: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: inherit;
  cursor: default;
}
.nav-item { position: relative; display: flex; align-items: center; }
.nav-caret { flex: none; transition: transform 0.18s var(--ease-settle); }
/* The caret reports the menu's state, not the pointer's position. .open is
   set by main.js alongside aria-expanded, so what the caret shows and what a
   screen reader is told stay the same thing. */
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret,
.nav-item.open .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  min-width: 216px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(27,42,67,0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.18s ease-out, transform 0.18s var(--ease-settle), visibility 0.18s;
  z-index: 60;
}
/* invisible bridge so the menu survives the gap under the trigger */
.nav-menu::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu,
.nav-item.open .nav-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-menu a {
  padding: 11px 16px;
  border-radius: 11px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy-800);
  white-space: nowrap;
  transition: background 0.16s ease-out, color 0.16s ease-out;
}
.nav-menu a:hover { background: #ffffff; color: var(--teal-700); }
.nav-menu a.active { background: var(--accent); color: #ffffff; }
.nav-menu a.active:hover { background: var(--teal-600); color: #ffffff; }

/* -- "Open positions" CTA row inside a page hero -- */
.page-hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* (schools-map credit is styled with the network map section below) */

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.16s ease-out, color 0.16s ease-out, border-color 0.16s ease-out, transform 0.16s ease-out;
}
.btn:active { transform: translateY(1px); }
.btn .arr { transition: transform 0.18s var(--ease-settle); }
.btn:hover .arr { transform: translateX(3px); }

.btn-lg { font-size: 16px; padding: 15px 28px; }

/* Teal stays the fill -- the brand reserves it for primary CTAs. Only the
   label moves. White on teal-500 measured 2.38:1 against an AA floor of 4.5;
   navy on the same unmodified teal is 6.06:1.
   Hover goes LIGHTER, not darker: teal-600 under navy text is 4.49:1, which
   would make the hover state fail where the resting state passes. teal-400
   takes it to 7.18:1, so hover is now stronger than rest in both senses. */
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--teal-400); color: var(--on-accent); }
.btn-primary:active { background: var(--teal-600); color: #ffffff; }

.btn-navy { background: var(--navy-800); color: #ffffff; }
.btn-navy:hover { background: var(--navy-700); color: #ffffff; }

/* Gold — reserved for the highest-value conversion CTAs */
.btn-gold { background: var(--gold-500); color: var(--navy-800); }
.btn-gold:hover { background: var(--gold-400); color: var(--navy-800); }

.btn-white { background: #ffffff; color: var(--navy-800); }
.btn-white:hover { background: var(--teal-50); color: var(--navy-800); }

.btn-outline {
  background: transparent;
  color: var(--navy-800);
  border: 1.5px solid var(--border-strong);
}
.btn-outline:hover { background: var(--slate-100); color: var(--navy-800); }

.btn-outline-teal {
  background: #ffffff;
  color: var(--navy-800);
  border: 1.5px solid var(--teal-200);
}
.btn-outline-teal:hover { background: var(--teal-100); color: var(--navy-800); }

.btn-ghost-dark {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,0.4);
}
.btn-ghost-dark:hover { background: rgba(255,255,255,0.18); color: #ffffff; }

/* ============================================================
   Shared type & section pieces
   ============================================================ */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-on-light);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal-500);
}
.eyebrow.centered { justify-content: center; }
/* .band-navy is the dark band; .on-dark is a separate opt-in modifier that
   not every dark section carries. join-the-network's quote band is
   .band-navy without .on-dark, so its eyebrow fell through to the light
   default and rendered teal-700 on navy at 3.01:1. Keying off the band
   itself means a dark section cannot be built that forgets this. */
.on-dark .eyebrow,
.band-navy .eyebrow { color: var(--accent-on-dark); }

.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--navy-800);
  text-wrap: balance;
  margin: 0;
}

.section-title { font-size: 52px; line-height: 1.08; }

.band { padding: 104px 0; }
.band-paper { background: var(--paper); }
.band-cool { background: #f4f7fb; }
.band-navy { background: var(--navy-800); color: var(--text-on-dark); position: relative; }

/* Waypoint divider — a small "station" on the Continuum path */
/* The .waypoint seam marker is gone — markup and styles both, from all 12
   places it appeared. It was a dot sitting on a hairline rule drawn across
   the page. The rule read as a horizontal scrollbar between sections, and
   once it was removed the dot had nothing holding it: a lone circle floating
   on a seam, which is worse than no marker at all.

   Sections already change background colour at the boundary. That IS the
   divider, and it needs no ornament on top of it. If a seam ever needs
   marking again, give it a reason to exist rather than restoring this. */

.card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

/* Drawn check icon (replaces emoji ✓) */
.ck {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--teal-600);
}
.check-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate-600);
}

/* Reveal on scroll — choreographed: siblings stagger 60ms apart (--ri set
   by JS), text fades up, cards scale-settle. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease-out, transform 0.6s var(--ease-settle);
  transition-delay: calc(var(--ri, 0) * 60ms);
}
html.js .card[data-reveal],
html.js .step[data-reveal],
html.js .dark-tile[data-reveal],
html.js .value-item[data-reveal] {
  transform: translateY(14px) scale(0.98);
}
html.js [data-reveal].revealed { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition-delay: 0s; }
}

/* ============================================================
   Hero (navy anchor, editorial, rounded photo, halftone dissolve)
   To revert to a teal hero: change this background to var(--teal-500)
   and .hero-title em color to var(--navy-800).
   ============================================================ */
.hero {
  position: relative;
  background: var(--navy-800);
  overflow: hidden;
}
/* The faint 40px grid: every navy hero, the page heroes (Careers, Contact)
   included -- they were the only ones without it (Oct 2026). */
.hero::before,
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
/* Background motif: the official CTP mark outline (assets/ctp-mark-outline.svg,
   stroke thinned for background use). The second layer stays a plain faint
   ring for depth, so the mark reads clearly instead of overlapping itself. */
.hero-arc {
  position: absolute;
  right: -140px;
  top: -180px;
  width: 640px;
  height: 640px;
  background: url('../assets/ctp-mark-outline.svg') center / contain no-repeat;
  opacity: 0.15;
  pointer-events: none;
}
.hero-arc.two {
  right: -240px;
  top: -280px;
  width: 880px;
  height: 880px;
  background: none;
  border: 1.5px solid rgba(0,187,188,0.09);
  border-radius: 50%;
  opacity: 1;
  transform: none;
}

/* Hero fade (option A from _fade-preview.html): a smooth eased gradient —
   the stops follow an easing curve so the navy dissolves into the white
   page with no visible band edges. */
/* --fade-h is the single source of truth for how deep the dissolve is. The
   hero's bottom padding is calculated from it (see .hero-inner below), because
   setting the two independently is exactly how hero text ended up sitting
   inside the gradient on four pages — washed out to near-invisible on
   students.html. Change this number and the clearance follows it. */
.hero, .page-hero { --fade-h: 160px; }
.hero-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--fade-h);
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0)     0%,
    rgba(255,255,255,0.013) 8.1%,
    rgba(255,255,255,0.049) 15.5%,
    rgba(255,255,255,0.104) 22.5%,
    rgba(255,255,255,0.175) 29%,
    rgba(255,255,255,0.259) 35.3%,
    rgba(255,255,255,0.352) 41.2%,
    rgba(255,255,255,0.45)  47.1%,
    rgba(255,255,255,0.55)  52.9%,
    rgba(255,255,255,0.648) 58.8%,
    rgba(255,255,255,0.741) 64.7%,
    rgba(255,255,255,0.825) 71%,
    rgba(255,255,255,0.896) 77.5%,
    rgba(255,255,255,0.951) 84.5%,
    rgba(255,255,255,0.987) 91.9%,
    #ffffff 100%);
}

.hero-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 88px 32px calc(var(--fade-h) + 28px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 72px;
  align-items: center;
}

.hero-title {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: #ffffff;
}
.hero-title em {
  font-style: normal;
  font-weight: 800;
  color: var(--teal-300);
}

.hero-sub {
  margin: 26px 0 0;
  max-width: 540px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-on-dark);
  text-wrap: pretty;
}

.hero-proof {
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-on-dark-muted);
}
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof .tick { width: 5px; height: 5px; border-radius: 50%; background: var(--teal-400); }

.hero-figure { position: relative; }
.hero-photo {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: var(--radius-photo);
  border: 1px solid rgba(255,255,255,0.16);
}
.hero-stamp {
  position: absolute;
  left: -26px;
  bottom: 34px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-modal);
}
.hero-stamp img { width: 56px; height: 56px; }

/* ---- Campus to Continuum lockup (students hero) ---------------------
   The real artwork, not the vector rebuild that stood in for it until the
   transparent original arrived. Two files: -white for dark grounds (used
   here), and the navy-text original for light ones.
   Sized with clamp() because the wordmark is the largest thing on the page
   and has to survive a 320px phone. The width/height attributes on the tag
   carry the intrinsic ratio so nothing shifts while it loads; height:auto
   lets the clamp drive the actual size. */
.c2c-lock {
  margin: 0 0 10px;
  line-height: 0;          /* the img is the whole heading; no half-line below it */
}
.c2c-lock img {
  display: block;
  /* The vw term is generous because this is capped by the grid column at
     desktop, not by the clamp -- see the .map-hero rule. Below 1080px the
     hero stacks and the clamp takes over, so the coefficient has to be large
     enough that the stacked logo does not end up SMALLER than the desktop
     one. That is the bug this replaced: with a 46vw term and a 0.88fr copy
     column, the logo peaked around 1080px and shrank again on wider screens. */
  width: clamp(260px, 52vw, 620px);
  height: auto;            /* width/height on the tag give the ratio; this scales it */
  max-width: 100%;
}

/* Shadow · Clinicals · Careers — gold rules between, as in the brand artwork */
.c2c-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 2.4vw, 20px);
  margin: 4px 0 22px;
  font-size: clamp(12.5px, 2.2vw, 16px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-300);
}
.c2c-tag span + span { position: relative; padding-left: clamp(10px, 2.4vw, 20px); }
.c2c-tag span + span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 1em;
  background: var(--gold-500);
}


/* Audience path cards, overlapping the hero edge */
.path-cards {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: -96px auto 0;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.path-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(27,42,67,0.05), 0 18px 44px rgba(13,21,37,0.14);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.path-card .tag {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.path-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 25px;
  color: var(--navy-800);
}
.path-card p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--slate-600); }
.path-card .btn { margin-top: auto; }

/* ============================================================
   About — editorial numbered values
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: start;
}
.about-intro { position: sticky; top: 120px; }
.about-intro .section-title { margin-bottom: 20px; }
.about-intro p { margin: 0 0 26px; font-size: 16.5px; line-height: 1.65; color: var(--text-muted); }

.value-list { display: flex; flex-direction: column; }
.value-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid var(--paper-line);
}
.value-item:last-child { border-bottom: 1px solid var(--paper-line); }
.value-item .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--teal-500);
  background: linear-gradient(100deg, var(--teal-400) 0%, var(--teal-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.value-item h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 23px;
  color: var(--navy-800);
}
.value-item p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--slate-600); }

/* ============================================================
   Services — bento
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 20px;
}
.bento-major {
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  padding: 36px;
}
.bento-major .photo {
  margin-top: 26px;
  border-radius: 12px;
  overflow: hidden;
  flex: 1;
  min-height: 200px;
}
.bento-major .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bento-minor { padding: 28px 30px; }

.service-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.service-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.service-icon.teal   { background: var(--teal-50);   color: var(--teal-700); }
.service-icon.green  { background: var(--green-bg);  color: var(--green-700); }
.service-icon.blue   { background: var(--blue-bg);   color: var(--blue-700); }
.service-icon.purple { background: var(--purple-bg); color: var(--purple-700); }

.bento h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 21px;
  color: var(--navy-800);
}
.bento p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--slate-600); }
.bento .checks { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

/* ============================================================
   Care settings
   ============================================================ */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.settings-copy .section-title { margin-bottom: 18px; }
.settings-copy > p {
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}

.setting-rows { display: flex; flex-direction: column; gap: 12px; }
.setting-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
}
.setting-row .name { font-size: 16px; font-weight: 600; color: var(--navy-800); }
.setting-row .desc { font-size: 14px; color: var(--text-muted); }
.setting-row.pt  { border-left-color: var(--dept-pt); }
.setting-row.ot  { border-left-color: var(--dept-ot); }
.setting-row.adm { border-left-color: var(--dept-adm); }

.figure-photo { position: relative; }
.figure-photo img {
  display: block;
  width: 100%;
  height: 560px;
  object-fit: cover;
  border-radius: var(--radius-photo);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 2px rgba(27,42,67,0.05), 0 16px 40px rgba(27,42,67,0.10);
}

/* ============================================================
   Quote band
   ============================================================ */
.quote-band { padding: 96px 0; }
.quote-band blockquote { margin: 0; max-width: 880px; margin: 0 auto; text-align: center; }
.quote-band .mark { height: 40px; width: 40px; margin: 0 auto 26px; display: block; }
.quote-band p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 31px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-wrap: balance;
}
.quote-band footer {
  margin-top: 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-300);
}

/* ============================================================
   Partner — how it works (path steps)
   ============================================================ */
.steps-head { max-width: 640px; margin-bottom: 56px; }
.steps-head .section-title { margin-bottom: 16px; }
.steps-head p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-muted); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 8%;
  right: 8%;
  border-top: 2px dashed var(--teal-200);
}
.step { position: relative; }
.step .badge {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--teal-700);
  margin-bottom: 20px;
}
.step h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 21px;
  color: var(--navy-800);
}
.step p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--slate-600); }

/* How It Works on students.html: one row of steps for students, then a
   compact panel for schools (Oct 2026). */
.steps-label {
  margin-bottom: 22px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-700);
}
.steps-aside { margin: 30px 0 0; font-size: 15px; color: var(--slate-600); }
.steps-aside a, .school-steps-foot a { color: var(--teal-700); font-weight: 600; }
.school-steps {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 18px 48px;
  margin-top: 56px;
  padding: 32px 36px;
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
}
.school-steps-head .steps-label { margin-bottom: 10px; }
.school-steps-head h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--navy-800);
}
.school-steps-head p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--slate-600); }
.school-steps-list {
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: sstep;
  display: grid; gap: 16px;
}
.school-steps-list li {
  counter-increment: sstep;
  position: relative;
  padding-left: 46px;
  font-size: 15px; line-height: 1.6; color: var(--slate-600);
}
.school-steps-list li::before {
  content: counter(sstep);
  position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: #ffffff;
  font-size: 13.5px; font-weight: 700;
  color: var(--teal-700);
}
.school-steps-list strong { color: var(--navy-800); }
.school-steps-list a { color: var(--teal-700); font-weight: 600; }
/* CTP x Exxat One, as Exxat's partner examples show it (Oct 2026). The
   Exxat artwork sits on white, untouched, as their brand asks. */
.exxat-lock {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 22px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--paper-line);
}
.exxat-lock img { display: block; height: 38px; width: auto; }
.exxat-lock a img { height: 26px; }
.exxat-lock .x { font-size: 20px; color: var(--slate-400); line-height: 1; }
.exxat-lock a { border-radius: 4px; }
.exxat-lock a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.school-steps-foot { grid-column: 2; margin: 4px 0 0 46px; font-size: 14.5px; color: var(--slate-600); }
@media (max-width: 860px) {
  .school-steps { grid-template-columns: 1fr; padding: 26px 22px; }
  .school-steps-foot { grid-column: 1; margin-left: 0; }
}

.partner-tiles {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.partner-tile {
  padding: 26px 28px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--teal-200);
  box-shadow: var(--shadow-xs);
}
.partner-tile p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--slate-600); }

.partner-cta { margin-top: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.partner-cta .note { font-size: 14px; color: var(--text-muted); }

/* ============================================================
   Careers teaser
   ============================================================ */
.teaser-grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.teaser-grid .figure-photo img { height: 470px; }
.teaser-copy .section-title { margin-bottom: 18px; }
.teaser-copy > p {
  margin: 0 0 26px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}
.teaser-copy .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.teaser-points { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }

/* ============================================================
   CTA panel
   ============================================================ */
.cta-band { padding: 104px 0; }
.cta-panel {
  padding: 84px 48px;
  text-align: center;
  background: var(--navy-800);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
}
.cta-panel::before {
  content: '';
  position: absolute;
  left: -160px;
  bottom: -320px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,187,188,0.25);
  pointer-events: none;
}
.cta-panel .mark { height: 48px; width: 48px; display: block; margin: 0 auto 26px; }
.cta-panel h2 {
  margin: 0 auto 16px;
  max-width: 680px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 50px;
  line-height: 1.08;
  color: #ffffff;
  text-wrap: balance;
}
.cta-panel h2 em { font-style: normal; font-weight: 800; color: var(--teal-300); }
.cta-panel p {
  margin: 0 auto 34px;
  max-width: 540px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--text-on-dark);
}
.cta-panel .ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; position: relative; }

/* ============================================================
   Footer (navy)
   ============================================================ */
.site-footer { background: var(--navy-900); }
.footer-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 32px 44px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 48px;
}
.footer-grid .wordmark { height: 32px; width: auto; display: block; margin-bottom: 18px; }
.footer-grid .blurb { margin: 0; max-width: 320px; font-size: 14px; line-height: 1.65; color: var(--text-on-dark-muted); }
/* Footer sign-off: the official #FeelTheTeal logo, unaltered, as everywhere
   else on the site. Was a line of teal text. 200px keeps it narrower than the
   blurb above it; at that size the "Continuum Therapy Partners" line in the
   artwork is decorative rather than legible, which is why the alt text
   carries it. */
.feel-teal {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  margin: 18px 0 0;
}

.footer-col .heading {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-300);
  margin-bottom: 16px;
}
.footer-col .links { display: flex; flex-direction: column; gap: 10px; }
.footer-col .links a { font-size: 14px; color: var(--text-on-dark-muted); }
.footer-col .links a:hover { color: #ffffff; }
.footer-col address { margin: 0; font-style: normal; font-size: 14px; line-height: 1.8; color: var(--text-on-dark-muted); }
.footer-col address a { color: var(--text-on-dark); font-weight: 500; }
.footer-col address a:hover { color: #ffffff; }

.footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 32px 44px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.footer-bottom span { font-size: 13px; color: var(--text-on-dark-muted); }
.footer-bottom .legal { display: flex; gap: 20px; }
.footer-bottom .legal a { font-size: 13px; color: var(--text-on-dark-muted); }
.footer-bottom .legal a:hover { color: #ffffff; }

/* ============================================================
   Careers page
   ============================================================ */
.hero.compact .hero-inner { padding: 72px 32px calc(var(--fade-h) + 28px); }
.hero.compact .hero-title { font-size: 60px; }
.hero.compact .hero-photo { height: 440px; }

.split {
  display: grid;
  gap: 72px;
  align-items: center;
}
.split.copy-left  { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.split.copy-right { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
.split .section-title { margin-bottom: 22px; }
.split .lead {
  margin: 0 0 26px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}
.split .checks { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.split .checks .check-row { font-size: 16px; }
.split .figure-photo img { height: 500px; }

.pull-quote {
  padding: 24px 28px;
  background: var(--teal-50);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
}
.pull-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.5;
  color: var(--navy-800);
  text-wrap: pretty;
}

.mini-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}
.mini-cards .card { padding: 22px 24px; border-top: 3px solid var(--teal-200); }
.mini-cards p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--slate-600); }
/* Titled variant, used for the clinician themes on careers-why-ltc. The wider
   track stops seven cards collapsing into a ragged four-across. */
.mini-cards.wide { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.mini-cards h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy-800);
}

.voice-grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.band-navy h2.section-title { color: #ffffff; }
.band-navy .lead { color: var(--text-on-dark-muted); font-size: 16px; line-height: 1.65; margin: 0; }
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Dictionary-entry cards on join-the-network. Set like a real dictionary
   entry — heavy headword, italic part of speech — because the joke only
   works if the form is recognisable. */
.define-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 40px;
}
.define-grid.two { max-width: 800px; margin-left: auto; margin-right: auto; }
.define {
  padding: 28px 26px;
  border-radius: var(--radius-photo);
  background: #ffffff;
  border: 1px solid var(--paper-line);
  border-top: 3px solid var(--teal-400);
}
.define-word {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy-800);
}
.define-pos {
  margin-top: 2px;
  font-style: italic;
  font-size: 14px;
  color: var(--teal-700);
}
.define p {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--slate-600);
}

/* closing-line is written for navy bands; this variant sits on paper. */
.closing-line.dark-on-light { color: var(--slate-600); }

/* Registered mark. Superscript at a fixed small size rather than the browser
   default, which raises the line box and nudges the whole line of text. */
.mark-r {
  font-size: 0.55em;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
}

/* Closing line under the independent-ownership tiles on careers-why-ctp. */
.closing-line {
  margin: 32px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-on-dark);
  text-wrap: pretty;
}
.dark-tile {
  padding: 26px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
}
.dark-tile h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: #ffffff;
}
.dark-tile p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-on-dark-muted); }
.dark-tile p + p { margin-top: 10px; }
/* Why CTP, Your Voice: tiles sized to what they say (see the page). */
.voice-intro .lead { margin-top: 18px; }
.voice-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.voice-tile { padding: 28px; }
.voice-path { grid-column: 1 / -1; }
.voice-icon {
  width: 42px; height: 42px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  border-radius: 11px;
  background: rgba(0,187,188,0.14);
  color: var(--teal-300);
}
.voice-direct {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.voice-direct .voice-icon { margin-bottom: 0; }
.voice-direct h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #ffffff; }
.voice-direct p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-on-dark-muted); }
.dark-tile .path-lead { margin-top: 18px; color: #ffffff; font-weight: 600; }
.path-values {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.path-values li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}
.path-values b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: var(--teal-300);
}
.path-values span { font-size: 14.5px; font-weight: 600; color: #ffffff; }
@media (max-width: 900px) {
  .voice-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .path-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A tile whose entire content is one statement has no h3 to carry it — the
   statement IS the heading, so it gets the h3 treatment rather than the muted
   supporting-copy treatment. At 14.5px muted these read as footnotes, which is
   the wrong weight for the four outcomes the section exists to land.
   Tiles that DO have an h3 are untouched; there the <p> really is support. */
.dark-tile > p:only-child {
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  color: #ffffff;
}
/* The card itself was barely visible at 5%/9% white — enough to look like an
   artefact rather than a deliberate panel. */
.dark-tile:has(> p:only-child) {
  background: rgba(255,255,255,0.065);
  border-color: rgba(255,255,255,0.15);
}

/* Our Story "The Result" tiles: each outcome is a direction, so each carries
   a teal up/down badge, and the direction word is set in teal so the four
   read as results at a glance. Arrows say which way, never how far -- there
   are no figures behind these four and the tiles must not imply any. */
.result-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.065);
  border-color: rgba(255,255,255,0.15);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.result-tile:hover { border-color: rgba(0,187,188,0.45); background: rgba(0,187,188,0.08); }
.result-tile p { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 600; color: #ffffff; }
.result-word { color: var(--accent-on-dark); }
.result-dir {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,187,188,0.16);
  border: 1px solid rgba(0,187,188,0.4);
  color: var(--accent-on-dark);
}

.statement-band { padding: 104px 0; text-align: center; }
.statement {
  margin: 0 auto;
  max-width: 860px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 33px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--navy-800);
  text-wrap: balance;
}
.statement em { font-style: normal; color: var(--teal-600); }

/* Transparency · Expertise · Accountability · Leadership spells TEAL, which is
   the whole point of the line, so the initials are picked out. Subtle on
   purpose — it should reward noticing, not shout. */
.eyebrow.teal-acrostic {
  display: block;
  text-align: center;
  text-wrap: balance;
  line-height: 1.9;
}
/* The leading rule mark belongs to the flex layout above; without it the
   line would keep a dangling dash on whichever row wrapped first. */
.eyebrow.teal-acrostic::before { display: none; }
.eyebrow.teal-acrostic b {
  color: var(--teal-500);
  font-weight: 800;
}

/* ---- Network map (join-the-network.html) ----------------------------
   Drawn by js/main.js ("Network map") from the same coarsened facility data
   as the growth map, grouped into areas and joined to their neighbours.
   Text on the left, map on the right; when there is no data the figure stays
   hidden and the text centres on its own, as the section was before. */
.net-map-figure { margin: 44px auto 0; max-width: 660px; }
.net-split { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; align-items: center; }
.net-split .section-intro { text-align: left; max-width: none; margin: 0; }
.net-split .net-map-figure { margin: 0; max-width: none; }
.net-split:has(> .net-map-figure[hidden]) { display: block; }
.net-split:has(> .net-map-figure[hidden]) .section-intro { text-align: center; max-width: 720px; margin: 0 auto; }
.net-split:has(> .net-map-figure[hidden]) .eyebrow { justify-content: center; }
@media (max-width: 900px) {
  .net-split { grid-template-columns: 1fr; gap: 32px; }
  .net-split .section-intro { text-align: center; max-width: 620px; margin: 0 auto; }
  .net-split .eyebrow { justify-content: center; }
}
.net-nodes circle.lg { filter: drop-shadow(0 0 7px rgba(31, 203, 204, 0.75)); }
.net-map {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
}
.net-map image { opacity: 0.7; }
.net-links line {
  stroke: var(--teal-500);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.55;
}
.net-nodes circle {
  /* Bright, saturated teal with a soft glow -- Trent asked for the dots
     brighter (Oct 2026). The bigger dots are the same teal, just larger. */
  fill: var(--teal-400);
  stroke: rgba(255,255,255,0.5);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 5px rgba(31, 203, 204, 0.6));
}

/* ---- The network builds outward (v7) --------------------------------
   The CEO asked to SEE the growth. Links draw from the hub and each node pops
   as its link lands, so the map assembles instead of appearing whole.

   --len and --d are set by js/main.js: --len is the line's own length, so
   every link draws at the same speed (a flat dasharray of 200 made short
   links snap and long ones crawl), and --d is the delay, ordered by distance
   from the busiest node.

   Gated on .revealed, not [data-reveal], so the build plays when the map
   scrolls into view instead of finishing unseen above the fold. */
.net-links line {
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
}
.net-nodes circle {
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}
.net-map-figure.revealed .net-links line {
  animation: net-draw 0.7s var(--ease-settle) var(--d, 0s) forwards;
}
.net-map-figure.revealed .net-nodes circle {
  animation: net-pop 0.45s var(--ease-settle) var(--d, 0s) forwards;
}
/* A slow breath on the larger nodes once the build has finished, so the map
   does not die the moment it finishes drawing. Subtle on purpose. */
.net-map-figure.revealed .net-nodes circle.lg {
  animation: net-pop 0.45s var(--ease-settle) var(--d, 0s) forwards,
             net-breathe 3.4s ease-in-out 2.4s infinite;
}
@keyframes net-draw { to { stroke-dashoffset: 0; } }
@keyframes net-pop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes net-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.85; }
}

/* Anyone who asked for less motion gets the finished map, immediately. */
@media (prefers-reduced-motion: reduce) {
  .net-links line { stroke-dashoffset: 0; }
  .net-nodes circle { transform: none; }
  .net-map-figure.revealed .net-links line,
  .net-map-figure.revealed .net-nodes circle,
  .net-map-figure.revealed .net-nodes circle.lg { animation: none; }
}
/* No JS means no .revealed, so show the finished map rather than an empty one. */
html:not(.js) .net-links line { stroke-dashoffset: 0; }
html:not(.js) .net-nodes circle { transform: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Our Story proof pair (homepage, navy band). Tabular figures so the two
   numbers line up rather than jittering as the counters animate. */
.story-proof {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 56px;
}
.sp-stat { text-align: center; }
/* A stat emptied in the site editor takes no room: the gap beside an empty
   one pushed the savings figure 28px off centre (Oct 2026). */
.sp-stat:empty, .sp-stat:has(> strong:empty:only-child) { display: none; }
.sp-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--teal-300);
  font-variant-numeric: tabular-nums;
}
.sp-stat > span {
  display: block;
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--text-on-dark-muted);
}
.sp-stat > span span { display: inline; font-variant-numeric: tabular-nums; }

/* Leadership roster (homepage): headshot + name + title, clicking through to
   the full bio on about.html. The full profiles live on about.html. */
.leader-roster {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.roster-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 14px 22px;
  border-radius: var(--radius-photo);
  background: #ffffff;
  border: 1px solid var(--paper-line);
  transition: transform 0.18s var(--ease-settle), box-shadow 0.18s ease-out, border-color 0.16s ease-out;
}
.roster-card:hover,
.roster-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--teal-200);
  box-shadow: 0 12px 30px rgba(27,42,67,0.10);
}
.roster-portrait {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(170deg, var(--teal-50) 0%, var(--slate-100) 100%);
  border: 1px solid var(--teal-100);
  color: var(--teal-600);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
}
img.roster-portrait {
  object-fit: cover;
  padding: 0;
  border-color: var(--teal-200);
}
.roster-name {
  margin-top: 14px;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--navy-800);
}
.roster-role {
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 1080px) {
  .leader-roster { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .leader-roster { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .roster-portrait { width: 72px; height: 72px; font-size: 27px; }
  .sp-stat strong { font-size: 42px; }
}

/* Footer social row (design review, Aug 2026). Icon-only, so each link
   carries an aria-label; the 40px box keeps the tap target honest on touch. */
.social-links {
  list-style: none;
  margin: 18px 0 0 -6px; /* the 26px marks sit in 40px tap targets: line the first up with the text */
  padding: 0;
  display: flex;
  gap: 10px;
}
.social-links a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #ffffff;
  opacity: 0.85;
  transition: transform 0.16s ease-out, background 0.16s ease-out, opacity 0.16s ease-out;
}
/* The marks are white (tools/nav.py); hover lifts one to full strength
   rather than recolouring it. */
.social-links a:hover { transform: translateY(-2px); opacity: 1; background: rgba(255,255,255,0.06); }
.social-links a:focus-visible { outline: 2px solid var(--teal-400); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .social-links a:hover { transform: none; } }

/* The colour mark is navy-and-teal, so on a navy ground the navy half
   disappears and the mark reads as a broken shape. Anywhere it sits on navy,
   render it as the solid white mark instead. (Design review, Aug 2026.)
   brightness(0) crushes it to black, invert(1) flips that to pure white — the
   same result as a white asset, without shipping a second file.
   NOT applied to .hero-stamp (white circle). */
.cta-panel .mark,
.quote-band .mark {
  filter: brightness(0) invert(1);
}

/* Benefits table (semantic <table>) */
.section-intro { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-intro .section-title { margin-bottom: 16px; }
.section-intro p { margin: 0; font-size: 17.5px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
.section-intro .note-inline {
  margin-top: 14px;
  font-size: 15px;
  color: var(--text-muted);
}
.section-intro .note-inline strong { color: var(--navy-800); }

.table-scroll { overflow-x: auto; }

.benefits-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.benefits-table th, .benefits-table td { border-bottom: 1px solid var(--border-subtle); }
.benefits-table tr:last-child th, .benefits-table tr:last-child td { border-bottom: none; }

.benefits-table thead th {
  padding: 15px 12px;
  text-align: center;
  vertical-align: top;
}
.benefits-table thead th:first-child {
  text-align: left;
  padding: 16px 22px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.benefits-table .tier { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.benefits-table .tier-sub { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; }

.benefits-table th.col-prn  { background: var(--slate-100); }
.benefits-table th.col-prn .tier { color: var(--navy-800); }
.benefits-table th.col-prn .tier-sub { color: var(--text-muted); }
.benefits-table th.col-part { background: var(--teal-50); }
.benefits-table th.col-part .tier { color: var(--teal-800); }
.benefits-table th.col-part .tier-sub { color: var(--accent-on-light); }
.benefits-table th.col-full { background: var(--teal-500); }
/* The teal column: 2.38:1 for the label and the same for the sub-label.
   Navy on teal reads at 6.06:1 and still marks this as the emphasised tier. */
.benefits-table th.col-full .tier { color: var(--on-accent); }
.benefits-table th.col-full .tier-sub { color: rgba(27,42,67,0.88); }

.benefits-table tbody th {
  padding: 15px 22px;
  text-align: left;
  font-weight: 400;
}
.benefits-table tbody th .name { display: block; font-size: 14.5px; font-weight: 600; color: var(--navy-800); }
.benefits-table tbody th .desc { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }

.benefits-table tbody td {
  text-align: center;
  min-width: 110px;
  height: 56px;
  padding: 8px 12px;
}
.benefits-table tbody td.col-part { background: var(--teal-50); }
.benefits-table tbody td.col-full { background: rgba(0,187,188,0.07); }

.benefits-table .yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,187,188,0.16);
  color: var(--teal-700);
}
.benefits-table .yes svg { width: 13px; height: 13px; }
.benefits-table .no { font-size: 15px; color: var(--text-faint); }

.callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 18px 22px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
}
.callout .title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 6px;
}
.callout p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--slate-600); text-wrap: pretty; }

.benefits-cta { margin-top: 36px; text-align: center; }

/* ============================================================
   Contact page
   ============================================================ */
.page-hero { background: var(--navy-800); position: relative; overflow: hidden; }
.page-hero .hero-arc { right: -200px; top: -320px; }
.page-hero-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 32px calc(var(--fade-h) + 28px);
}
.page-hero h1 { font-size: 54px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: #ffffff; }
.page-hero h1 em { font-style: normal; font-weight: 800; color: var(--teal-300); }
.page-hero p { margin: 20px 0 0; max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--text-on-dark); }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 28px;
  align-items: start;
  margin-top: -44px;
  position: relative;
  z-index: 2;
}

.contact-info { padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.contact-info .item .label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.contact-info .item p, .contact-info .item address {
  margin: 0;
  font-style: normal;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--slate-700);
}
.contact-info .item a { font-weight: 600; }

.contact-form { padding: 36px; }
.contact-form h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 25px;
  color: var(--navy-800);
}
.contact-form .sub { margin: 0 0 26px; font-size: 14.5px; color: var(--text-muted); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--navy-800); }
.form-field .hint { font-weight: 400; color: var(--text-faint); }

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--slate-800);
  padding: 12px 14px;
  background: var(--surface-subtle);
  border: 1.5px solid var(--border-default);
  border-radius: 8px;
  transition: border-color 0.16s ease-out, box-shadow 0.16s ease-out, background 0.16s ease-out;
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-actions { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.form-note { font-size: 13px; color: var(--text-muted); }

/* -- Form validation states --
   The error is carried by the message text, never by colour alone (WCAG
   1.4.1). --red-700 on white is 5.91:1 for the message; --red-500 is 3.83:1
   as a border, over the 3:1 that SC 1.4.11 asks of a non-text indicator. */
.form-field input.invalid,
.form-field select.invalid,
.form-field textarea.invalid {
  border-color: var(--red-500);
  background: var(--red-bg);
}
.form-field input.invalid:focus,
.form-field textarea.invalid:focus {
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px rgba(224,82,77,0.18);
}
.field-error {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 500;
  color: var(--red-700);
}

/* -- Sent confirmation --
   Replaces the form outright. Leaving a still-filled form with a line of
   text above it is what makes people press Send a second time. */
.form-sent {
  background: #ffffff;
  border: 1px solid var(--paper-line);
  border-top: 3px solid var(--teal-500);
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-card);
  padding: var(--sp-8) var(--sp-7);
  text-align: center;
}
.form-sent:focus { outline: none; }
.form-sent h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.02em;
  color: var(--navy-900);
}
.form-sent p { margin: 0 auto; max-width: 46ch; font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--text-body); }
.form-sent .form-sent-alt { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--text-muted); }

.form-status { grid-column: 1 / -1; margin: 0; font-size: 14.5px; font-weight: 500; }
.form-status.ok { color: var(--green-700); }
.form-status.err { color: var(--red-700); }

/* FAQ */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-800);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { flex: none; color: var(--teal-600); transition: transform 0.2s var(--ease-settle); }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item .answer { padding: 0 24px 22px; font-size: 15px; line-height: 1.65; color: var(--slate-600); }
.faq-item .answer p { margin: 0 0 10px; }
.faq-item .answer p:last-child { margin-bottom: 0; }

/* ============================================================
   Utility pages (404 / privacy)
   ============================================================ */
.prose { max-width: 760px; }
/* .prose is sized for blog posts (15.5px). The About Us founding story is
   the closest thing the site has to a manifesto, so it gets a larger,
   centred setting rather than blog-body scale. */
.container.narrow { max-width: 860px; }
.container.narrow .prose { max-width: none; margin: 0 auto; }
.container.narrow .prose p {
  font-size: 17.5px;
  line-height: 1.72;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.container.narrow .prose p:last-child { margin-bottom: 0; }
.prose h1 { font-size: 44px; margin-bottom: 12px; }
.prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 23px;
  color: var(--navy-800);
  margin: 40px 0 12px;
}
.prose p, .prose li { font-size: 15.5px; line-height: 1.7; color: var(--slate-600); }
.prose .meta { font-size: 13.5px; color: var(--text-faint); }

.error-band { padding: 140px 0; text-align: center; }
.error-band .code {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 100px;
  line-height: 1;
  color: var(--teal-500);
  background: linear-gradient(100deg, var(--teal-300) 0%, var(--teal-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.error-band h1 { font-size: 38px; margin: 18px 0 12px; }
.error-band p { margin: 0 0 30px; font-size: 17px; color: var(--text-muted); }

/* ============================================================
   Testimonial marquee (scrolling quote banner)
   ============================================================ */
.marquee-band { padding: 96px 0; background: #ffffff; overflow: hidden; }
.marquee-head { text-align: center; margin-bottom: 44px; padding: 0 32px; }
/* A ticker that continues the section above it (Students, Why LTC) rather
   than opening its own: no heading, or just an eyebrow, and less air. */
.marquee-band.marquee-follows { padding-top: 56px; }
.marquee-follows .marquee-head { margin-bottom: 18px; }
.marquee-wrap { position: relative; overflow: hidden; }
.marquee-wrap::before,
.marquee-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(to right, #ffffff, rgba(255,255,255,0)); }
.marquee-wrap::after { right: 0; background: linear-gradient(to left, #ffffff, rgba(255,255,255,0)); }
.marquee-track {
  display: flex;
  width: max-content;
  padding: 14px 0;
  animation: marqueeScroll 52s linear infinite;
}
/* Second row drifts the opposite direction, slightly faster */
.marquee-row + .marquee-row { margin-top: 14px; }
.marquee-row.reverse .marquee-track { animation: marqueeScrollRev 44s linear infinite; }
.marquee-group { display: flex; align-items: center; gap: 18px; padding-right: 18px; }
@keyframes marqueeScroll { to { transform: translateX(-50%); } }
@keyframes marqueeScrollRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* When JS drives the marquee (smooth hover slow-down + center highlight),
   the CSS animation switches off. */
.marquee-wrap.js-marquee .marquee-track { animation: none; }
.quote-card, .brand-card { transition: box-shadow 0.25s ease-out; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
  .marquee-wrap { overflow-x: auto; }
}
.quote-card {
  width: 400px;
  flex: none;
  background: var(--paper);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px 26px 22px;
}
.quote-card.w-sm { width: 330px; }
.quote-card.w-lg { width: 460px; }
/* Cards stay straight — the center-of-viewport highlight (JS) scales them. */
.quote-card .qc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.quote-card .qc-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(0,187,188,0.14);
  color: var(--teal-700);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.quote-card .who {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-700);
  line-height: 1.4;
}
.quote-card .qm { display: block; color: var(--teal-500); margin-bottom: 10px; }
.quote-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--navy-700); }
/* Variants: navy, teal, gold-tint, plain white */
.quote-card.v-navy { background: var(--navy-700); border-color: var(--navy-700); }
.quote-card.v-navy p { color: rgba(255,255,255,0.93); }
.quote-card.v-navy .who { color: var(--teal-300); }
.quote-card.v-navy .qm { color: var(--teal-400); }
.quote-card.v-navy .qc-avatar { background: rgba(255,255,255,0.12); color: var(--teal-300); }
.quote-card.v-teal { background: var(--teal-600); border-color: var(--teal-600); }
.quote-card.v-teal p { color: #ffffff; }
.quote-card.v-teal .who { color: rgba(255,255,255,0.85); }
.quote-card.v-teal .qm { color: rgba(255,255,255,0.55); }
.quote-card.v-teal .qc-avatar { background: rgba(255,255,255,0.18); color: #ffffff; }
.quote-card.v-gold { background: var(--gold-tint); border-color: #f0dfa4; }
.quote-card.v-gold .qm { color: var(--gold-600); }
.quote-card.v-gold .qc-avatar { background: rgba(224,176,16,0.18); color: #8a6a00; }
.quote-card.v-gold .who { color: #8a6a00; }
.quote-card.v-white { background: #ffffff; box-shadow: 0 6px 20px rgba(27,42,67,0.07); }
/* Brand sticker card mixed into the stream */
.brand-card {
  width: 320px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  min-height: 150px;
  background: var(--navy-800);
  border: 1px solid var(--navy-800);
  border-radius: 16px;
  padding: 24px;
}

/* ============================================================
   Page transitions: cross-fade between pages (View Transitions
   API where supported, gentle fade-in elsewhere)
   ============================================================ */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.26s; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes pageFadeIn { from { opacity: 0; } }
  body { animation: pageFadeIn 0.3s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ============================================================
   Immersive home hero: full-viewport, ambient b-roll video that
   emerges from mid-screen and bleeds to the right edge
   ============================================================ */
.hero-immersive .hero-arc { display: none; }
.hero-immersive { --fade-h: 220px; }
.hero-immersive .hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* copy sits flush left on the container grid, like every other section */
  min-height: calc(84vh - 76px);
  padding-top: 40px;
  padding-bottom: calc(var(--fade-h) + 28px);
  position: relative;
  z-index: 2;
}
/* Copy column stays clear of the media's fade zone so text always sits on
   clean navy, aligned to the same container edge as every other section. */
.hero-immersive .hero-copy { max-width: 560px; }
.hero-immersive .hero-title { font-size: 84px; }
.hero-media {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 52%;
  z-index: 0;
}
.hero-media video,
.hero-media img.fallback {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-media #schools-map { width: 100%; height: 100%; background: var(--navy-800); }
/* z-index lifts the navy fade above Leaflet's tile panes (z 200–400) while
   leaving marker pins (z 600) and popups (z 700) crisp above the fade. */
.hero-media::after { pointer-events: none; z-index: 500; }
/* Left edge dissolves into the navy so the film emerges from mid-screen.
   Eased stops + a fine noise layer on top: the grain dithers the dark
   gradient, which is what actually kills the banding (browsers don't
   dither CSS gradients, and navy-on-navy steps are sub-1/255 apart). */
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(to right,
      rgb(27,42,67) 0%,
      rgba(27,42,67,0.987) 6%,
      rgba(27,42,67,0.951) 12%,
      rgba(27,42,67,0.896) 18%,
      rgba(27,42,67,0.825) 24%,
      rgba(27,42,67,0.741) 30%,
      rgba(27,42,67,0.648) 36%,
      rgba(27,42,67,0.55) 42%,
      rgba(27,42,67,0.45) 48%,
      rgba(27,42,67,0.352) 54%,
      rgba(27,42,67,0.259) 60%,
      rgba(27,42,67,0.175) 66%,
      rgba(27,42,67,0.104) 72%,
      rgba(27,42,67,0.049) 78%,
      rgba(27,42,67,0.013) 84%,
      rgba(27,42,67,0) 90%),
    linear-gradient(rgba(27,42,67,0.2), rgba(27,42,67,0.2)),
    linear-gradient(to top,
      rgba(27,42,67,0.5) 0%,
      rgba(27,42,67,0.42) 8%,
      rgba(27,42,67,0.3) 16%,
      rgba(27,42,67,0.18) 24%,
      rgba(27,42,67,0.08) 30%,
      rgba(27,42,67,0) 38%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 180px 180px, 100% 100%, 100% 100%, 100% 100%;
}
/* ============================================================
   #FeelTheTeal logo -- the official artwork (Oct 2026), replacing the CSS
   recreation (italic text + text-shadow outline + the circle mark) that
   stood in for it.
   One file, used unaltered on every ground -- the client's direction. A
   navy-to-white variant for navy grounds was made and withdrawn: on the
   navy closing panel the navy half of the circle mark sits on navy, and that
   is the intended look. Do not reintroduce a recoloured copy. The artwork is
   already slanted, so the old -3deg rotation is gone.
   The supplied "vectorized" SVG was a 3391x813 PNG in an SVG wrapper (385 KB,
   no paths); these are that PNG at 960px, 38 KB each -- 3x the largest size
   it is shown at.
   ============================================================ */
.ftt-logo { display: inline-block; width: 280px; max-width: 100%; height: auto; }
/* Home's closing panel, where it replaced the "Your partner. Your path."
   headline. .cta-panel centres its text; margin auto centres the image. */
.ftt-lg { display: block; width: 380px; margin: 0 auto 22px; }
/* The other pages' closing panels: above the panel headline, where the old
   "#FEELTHETEAL" hashtag pill was. Smaller than Home's, which IS the headline. */
.ftt-panel { display: block; margin: 0 auto 26px; }
@media (max-width: 640px) {
  .ftt-logo { width: 220px; }
  .ftt-lg { width: 280px; }
}

/* ============================================================
   Job board (careers page)
   ============================================================ */
.job-filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 26px; }
.job-filters select {
  padding: 11px 38px 11px 14px;
  border: 1.5px solid var(--border-subtle);
  border-radius: 10px;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2304605f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-800);
  appearance: none;
  cursor: pointer;
}
.job-filters select:focus-visible { outline: 3px solid #7cc0ff; outline-offset: 1px; }
/* Job search box: matches the filter selects beside it. */
.job-filters input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border-subtle);
  background: #ffffff;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--navy-800);
}
.job-filters input[type="search"]:focus-visible { outline: 3px solid #7cc0ff; outline-offset: 1px; }
.jobs-count { margin: 0 0 12px; font-size: 14px; color: var(--slate-600); font-variant-numeric: tabular-nums; }
.jobs-count:empty { display: none; }
.jobs-count:focus { outline: none; }
/* Job pages: Prev 1 ... 4 5 6 ... 51 Next */
.jobs-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 26px; }
.jobs-pager[hidden] { display: none; }
.jobs-pager .pg {
  min-width: 40px; height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--border-subtle);
  border-radius: 10px;
  background: #ffffff;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.jobs-pager .pg:hover:not(:disabled) { border-color: var(--teal-500); color: var(--teal-700); }
.jobs-pager .pg:focus-visible { outline: 3px solid #7cc0ff; outline-offset: 1px; }
.jobs-pager .pg[aria-current="page"] { background: var(--navy-800); border-color: var(--navy-800); color: #ffffff; cursor: default; opacity: 1; }
.jobs-pager .pg:disabled:not([aria-current]) { opacity: 0.4; cursor: default; }
.jobs-pager .pg-gap { padding: 0 4px; color: var(--slate-600); }
.jobs-pager .pg-jump { display: flex; align-items: center; gap: 8px; margin-left: 14px; font-size: 14px; color: var(--slate-600); }
.jobs-pager .pg-jump input {
  width: 64px; height: 40px;
  padding: 0 8px;
  border: 1.5px solid var(--border-subtle);
  border-radius: 10px;
  font: inherit; font-weight: 600;
  color: var(--navy-800);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.jobs-pager .pg-jump input:focus-visible { outline: 3px solid #7cc0ff; outline-offset: 1px; }
@media (max-width: 640px) {
  .jobs-pager .pg { min-width: 36px; height: 36px; padding: 0 9px; }
  .jobs-pager .pg-step { flex: 1 1 calc(50% - 3px); order: 2; }
  .jobs-pager .pg-jump { order: 3; flex: 1 1 100%; justify-content: center; margin: 8px 0 0; }
  .jobs-pager .pg-jump input { height: 36px; }
}
.jobs-list { display: grid; gap: 14px; }
.jobs-list[hidden] { display: none; }
/* Map view: detail panel on the left, map on the right */
.map-layout { display: grid; grid-template-columns: 340px 1fr; grid-template-rows: 560px; gap: 16px; align-items: stretch; }
.map-layout[hidden] { display: none; }
.job-detail {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.job-detail .jd-empty {
  margin: auto;
  text-align: center;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 220px;
}
/* Scrollable content area: grows to fill the panel, clips overflow so
   the Apply button below always stays pinned to the bottom. */
.job-detail .jd-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.job-detail .jc-title { margin: 0 0 10px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--navy-800); }
.job-detail .jc-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.job-detail .jd-desc { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--slate-600); }
.job-detail .jd-id { margin: 12px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-muted); }
/* Fades the tail of a truncated description into the panel background;
   invisible when the content is short enough to fit without clipping. */
.job-detail .jd-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff 85%);
  pointer-events: none;
}
.job-detail .btn { margin-top: 20px; justify-content: center; flex: none; }
.job-detail { padding: 0; }
.job-detail .jd-empty { padding: 26px; }
.job-detail .jd-head { padding: 22px 22px 14px; border-bottom: 1px solid var(--border-subtle); flex: none; }
.job-detail .jd-head .jc-title { margin: 0; }
.job-detail .jd-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); }
.job-detail .jd-jobs { list-style: none; margin: 0; padding: 0; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; }
.job-detail .jd-job { padding: 16px 22px; border-bottom: 1px solid var(--border-subtle); }
.job-detail .jd-job:last-child { border-bottom: 0; }
.job-detail .jd-job.on { background: var(--teal-50); }
.job-detail .jd-job-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--navy-800); }
.job-detail .jd-job-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; }
.job-detail .jd-job-foot .jd-id { white-space: nowrap; }
.job-detail .jd-job-foot .jd-id { margin: 0; }
.job-detail .jd-job .btn { margin: 0; padding: 9px 16px; font-size: 13.5px; }
.job-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  transition: box-shadow 0.16s ease-out, border-color 0.16s ease-out;
}
.job-card:hover { box-shadow: 0 10px 30px rgba(27,42,67,0.10); border-color: rgba(0,187,188,0.4); }
.job-card .jc-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--navy-800); }
.job-card .jc-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.jc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--teal-50);
  color: var(--teal-800);
}
.jc-chip.loc { background: var(--paper); color: var(--slate-600); border: 1px solid var(--border-subtle); }
.jc-chip.sched { background: var(--gold-tint); color: #8a6a00; }
.jobs-empty {
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 44px 32px;
  text-align: center;
  background: var(--paper);
}
.jobs-empty h2, .jobs-empty h3 { margin: 0 0 10px; font-size: 24px; font-weight: 700; color: var(--navy-800); }
.jobs-empty p { margin: 0 auto 22px; max-width: 480px; font-size: 15px; line-height: 1.6; color: var(--slate-600); }
.jobs-empty-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.jobs-empty .jobs-empty-note { margin: 20px auto 0; font-size: 14px; color: var(--text-muted); }
.jobs-empty .jobs-empty-note a { color: var(--teal-700); font-weight: 600; }
.jobs-none { padding: 26px; text-align: center; color: var(--slate-600); font-size: 15px; }
.jobs-none button {
  border: none; background: none; padding: 0;
  color: var(--teal-700); font-weight: 600; font-size: 15px;
  text-decoration: underline; cursor: pointer;
}

/* ============================================================
   Job board map view + list/map toggle
   ============================================================ */
.view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--paper);
}
.view-toggle button {
  border: none;
  padding: 8px 20px;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-600);
  cursor: pointer;
}
.view-toggle button.active { background: var(--navy-800); color: #ffffff; }
.jobs-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 34px 0 22px; }
.jobs-toolbar[hidden] { display: none; }
.view-toggle[hidden] { display: none; }
/* The filters take the toolbar's width when there is no map toggle beside
   them (the StaffingSoft feed gives no map positions, Oct 2026). */
.jobs-toolbar .job-filters { flex: 1 1 auto; margin: 0; }
.jobs-map {
  position: relative;
  height: 560px;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.jobs-map[hidden] { display: none; }
.job-card .jc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: none; }
.job-card .jc-actions .btn, .job-card .btn-map { white-space: nowrap; }
/* The job's description on StaffingSoft: a quiet link beside Apply Now. */
.jc-details { padding: 6px 8px; border: 0; border-radius: 6px; background: none; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--teal-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; white-space: nowrap; }
.jc-details:hover { color: var(--navy-800); }
.jc-details:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.job-detail .jd-job-actions { display: flex; align-items: center; gap: 6px; }
.job-detail .jd-job-actions .jc-details { font-size: 13.5px; }
/* Each card leads with what differs between jobs -- the shift (never the
   building: towns only), then pay and benefits -- and keeps the description,
   whose requirements are the same on most jobs, behind a toggle (Trent,
   Oct 2026). */
.job-card { flex-wrap: wrap; row-gap: 10px; }
.jc-where { display: flex; align-items: flex-start; gap: 7px; margin: -2px 0 10px; font-size: 14.5px; line-height: 1.45; color: var(--slate-600); }
.jc-where svg { flex: none; margin-top: 2px; color: var(--teal-700); }
.jc-perks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; }
.jc-perks li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--navy-800); }
.jc-perks svg { flex: none; color: var(--teal-500); }
.jc-more { flex: 1 1 100%; width: 100%; }
.jc-panel { max-width: 760px; padding-top: 14px; }
.jc-panel[hidden] { display: none; }
.jc-more h4 { margin: 16px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy-800); }
.jc-more h4:first-child { margin-top: 0; }
.jc-more ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.jc-more li { font-size: 14.5px; line-height: 1.55; color: var(--slate-600); }
.jc-more li::marker { color: var(--teal-500); }
.jc-more .jc-contact { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--teal-50); font-size: 14.5px; line-height: 1.55; color: var(--navy-800); }
.jc-panel > .jc-contact:first-child { margin-top: 0; }
.jc-more .jc-contact + .jc-contact { margin-top: 6px; }
.jc-more .jc-contact a { color: var(--teal-700); font-weight: 600; overflow-wrap: anywhere; }
.jc-more .jc-full { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--teal-700); }
.jc-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--teal-700); text-align: left; cursor: pointer; }
.jc-toggle:hover { color: var(--navy-800); }
.jc-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.jc-toggle svg { flex: none; transition: transform 0.18s ease-out; }
.jc-more.open .jc-toggle svg { transform: rotate(180deg); }
.job-detail .jd-job .jc-where { margin: 0 0 8px; font-size: 13.5px; }
.job-detail .jd-job .jc-perks { margin-top: 10px; gap: 4px 12px; }
.job-detail .jd-job .jc-perks li { font-size: 12.5px; }
.job-detail .jd-job .jc-more { margin-top: 10px; }
.job-detail .jd-job .jc-toggle { font-size: 13.5px; }
.job-detail .jd-job .jc-more li, .job-detail .jd-job .jc-more .jc-contact { font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .jc-toggle svg { transition: none; } }
.job-card .btn-map {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 16px;
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  background: #ffffff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-800);
  cursor: pointer;
  transition: border-color 0.15s ease-out, background 0.15s ease-out;
}
.job-card .btn-map:hover { border-color: var(--teal-500); background: var(--teal-50); }
.job-card .jc-desc {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate-600);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* School map in the students hero (pins over a faded map) */
.school-pin {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--teal-500);
  box-shadow: 0 4px 14px rgba(27,42,67,0.35);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-700);
  overflow: hidden;
  transition: transform 0.16s var(--ease-settle), box-shadow 0.16s ease-out;
}
/* Inset so a square logo doesn't collide with the circular border */
.school-pin img { width: 76%; height: 76%; object-fit: contain; display: block; }
.school-pin span { font-weight: 800; font-size: 11px; letter-spacing: 0.02em; }

/* ============================================================
   Therapy Student Network — schools map
   Plain rectangular card: no rounding, so nothing clips the pins and the
   zoom control sits in its default corner.
   ============================================================ */
/* -- Static outline map in the hero: no tiles, no interaction, no CDN.
      Just the US outline with a logo per partner school. Pin positions are
      Albers-projected and then nudged apart so no logo is hidden — they are
      illustrative, not survey-accurate. The interactive map further down the
      page is the precise one. -- */
.hero-map-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 802;   /* matches us-outline.svg's viewBox */
  container-type: inline-size;
}
/* Students hero. The columns were 0.88fr / 1.12fr, giving the map more of the
   row than a photo would need -- which was right when the lockup was live
   text that could be sized freely. With the real artwork the logo is capped
   by this column, so the narrower copy side was holding the page's main
   heading down to 466px on a 1600px screen. Even columns give it room
   without the map losing anything it needs: the map is illustrative, and its
   19 pins are still legible at this width. */
/* The students hero puts the lockup and the map side by side in one row.
   Inside the normal 1180px container that row has 1116px to share, so with
   the logo at its 620px ceiling the map could never exceed 440px -- every
   adjustment just moved width from one to the other.
   The page is therefore .page.wide (see below), and the ratio is pulled back
   to near-even now the copy side no longer needs a disproportionate share:
   the logo holds at 620px and the map takes the rest. */
.hero.map-hero .hero-inner {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 56px;
}

/* ---- Wide page variant ----
   1320px instead of 1180px, applied to the container AND the hero together.
   Both, or neither: widening only the hero left its content 70px to the left
   of every band below it, which reads as a mistake rather than as a choice.
   Only students.html uses this, because only its hero has two large graphics
   competing for one row. */
.page.wide .container,
.page.wide .hero-inner,
.page.wide .page-hero-inner { max-width: 1320px; }
.map-outline {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 12px 30px rgba(13,21,37,0.4));
}
/* The Students hero's outline map pins (the job map's are .jm-pin, the
   school map's .sm-pin). */
.outline-pin {
  position: absolute;
  width: 32px;                   /* must match PIN in tools/build-student-map.py */
  height: 32px;
  margin: -16px 0 0 -16px;       /* centre on the coordinate */
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--teal-400);
  box-shadow: 0 3px 10px rgba(13,21,37,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.16s var(--ease-settle), box-shadow 0.16s ease-out;
}
.outline-pin img { width: 76%; height: 76%; object-fit: contain; display: block; }
.outline-pin span { font-size: 9px; font-weight: 800; letter-spacing: 0.01em; color: var(--teal-800); }
.outline-pin:hover { transform: scale(1.22); box-shadow: 0 6px 16px rgba(13,21,37,0.6); z-index: 4; }
/* Pins are spaced for a 575px-wide map (PIN/RENDER_W in the generator). Sizing
   them against the container keeps that ratio — and therefore keeps them from
   overlapping — at every width, instead of only the desktop one. */
@supports (width: 1cqw) {
  .outline-pin {
    width: 5.57cqw;
    height: 5.57cqw;
    margin: -2.785cqw 0 0 -2.785cqw;
    border-width: max(1px, 0.35cqw);
  }
  .outline-pin span { font-size: clamp(5px, 1.55cqw, 10px); }
}

/* -- Interactive map, lower on the page -- */
.network-grid { display: grid; grid-template-columns: 1fr 292px; gap: 24px; align-items: stretch; }
.network-map-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  background: #eef2f6;
  min-height: 560px;
}
.network-map-card #schools-map { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The self-drawn school map (main.js, "Find your school"): the site's own
   outline in light slate, cities to orient by, location areas, school pins.
   Pins and labels are counter-scaled (--inv) so they stay one size at any
   zoom; the areas are not, because an area's size is the point. */
.sm { background: #eaf0f6; }
.sm-view { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; outline: none; }
.sm-view:focus-visible { box-shadow: inset 0 0 0 3px var(--teal-500); }
.sm-view.sm-dragging { cursor: grabbing; }
.sm-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; --inv: 1; }
.sm-world.sm-anim { transition: transform 0.32s cubic-bezier(.2,.7,.2,1); }
.sm-land, .sm-land svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sm-land g { fill: #ffffff; stroke: #c9d5e2; stroke-width: 1.1; }
.sm-area {
  position: absolute;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: rgba(0,187,188,0.32);
}
.sm-city {
  position: absolute;
  transform: translate(-3px, -50%) scale(var(--inv));
  transform-origin: 3px 50%;
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  color: #5b6b80;
  white-space: nowrap;
  pointer-events: none;
}
.sm-city i { width: 5px; height: 5px; border-radius: 50%; background: #8696aa; flex: none; }
.sm-city.minor { display: none; }
.sm-close .sm-city.minor { display: flex; }
.sm-pin {
  position: absolute;
  width: 40px; height: 40px;
  margin: 0; padding: 0;
  transform: translate(-50%, -50%) scale(var(--inv));
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--teal-500);
  box-shadow: 0 4px 12px rgba(27,42,67,0.3);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
  color: var(--teal-700); font-size: 10px; font-weight: 800;
}
.sm-pin img { width: 78%; height: 78%; object-fit: contain; }
.sm-pin:hover, .sm-pin:focus-visible { border-color: var(--navy-700); z-index: 2; outline: none; }
.sm-tip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, calc(-100% - 14px));
  padding: 9px 13px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(27,42,67,0.22);
  white-space: nowrap;
  pointer-events: none;
}
.sm-tip .lp-title { font-weight: 700; color: var(--navy-800); font-size: 14px; }
.sm-tip .lp-meta { margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }
.sm-zoom {
  position: absolute; left: 12px; top: 12px; z-index: 6;
  display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(27,42,67,0.16);
}
.sm-zoom button {
  width: 36px; height: 36px; border: 0; padding: 0;
  background: #ffffff; color: var(--navy-800);
  font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer;
}
.sm-zoom button + button { border-top: 1px solid #e3e9f0; }
.sm-zoom button:disabled { color: #b8c3d0; cursor: default; }
.sm-zoom button:focus-visible { outline: 3px solid var(--teal-500); outline-offset: -3px; }
@media (max-width: 640px) { .sm-pin { width: 32px; height: 32px; border-width: 2px; } }
.jm-pins { position: absolute; inset: 0; }
.sm-pin.jm-pin {
  width: 26px; height: 26px;
  background: var(--teal-500);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(27,42,67,0.35);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sm-pin.jm-pin.big { width: 34px; height: 34px; font-size: 12.5px; }
.sm-pin.jm-pin:hover, .sm-pin.jm-pin:focus-visible { background: var(--teal-700); border-color: #ffffff; z-index: 2; }
.sm-pin.jm-pin.on { background: var(--navy-800); border-color: #ffffff; box-shadow: 0 0 0 4px rgba(0,187,188,0.45), 0 4px 12px rgba(27,42,67,0.35); z-index: 3; }
@media (max-width: 640px) {
  .sm-pin.jm-pin { width: 22px; height: 22px; font-size: 10px; border-width: 1.5px; }
  .sm-pin.jm-pin.big { width: 28px; height: 28px; font-size: 11px; }
}
/* Key for the two layers, over the map's bottom-left corner (zoom is top
   left, attribution bottom right). Shown by main.js only when the location
   areas are drawn. */
.map-key {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 1000;
  max-width: calc(100% - 24px);
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 4px 14px rgba(27,42,67,0.16);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--navy-700);
}
.map-key[hidden] { display: none; }
.map-key span { display: inline-flex; align-items: center; gap: 8px; }
.map-key i { width: 14px; height: 14px; flex: none; border-radius: 50%; }
.map-key .mk-school { background: #ffffff; border: 3px solid var(--teal-500); }
.map-key .mk-area { background: rgba(0,187,188,0.45); }
/* On a phone the key would cover a third of the map, so it sits under it. */
@media (max-width: 640px) {
  .network-map-card { display: flex; flex-direction: column; min-height: 0; }
  .network-map-card #schools-map { position: relative; inset: auto; height: 360px; flex: none; }
  .map-key { position: static; max-width: none; border-radius: 0; box-shadow: none; padding: 10px 14px; gap: 6px 14px; font-size: 12px; border-top: 1px solid var(--border-subtle); }
  .map-key i { width: 11px; height: 11px; }
  .map-key .mk-school { border-width: 2px; }
}
.network-side { display: flex; flex-direction: column; gap: 14px; }
.network-stat {
  background: var(--navy-800);
  border-radius: 18px;
  padding: 24px 26px;
  color: #ffffff;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.network-stat.alt { background: var(--teal-500); color: var(--on-accent); }
.network-stat.alt span { color: rgba(27,42,67,0.88); }
.network-stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.network-stat span { margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,0.86); }
.network-note {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
}


/* ============================================================
   Growth footprint (about page)
   ============================================================ */
.growth-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.state-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.state-chip {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--teal-50);
  color: var(--teal-800);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.state-chip.growing {
  background: var(--gold-500);
  color: var(--navy-800);
}
.growth-stats { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 30px; }
.growth-stats .gstat strong { display: block; font-size: 40px; font-weight: 800; letter-spacing: -0.02em; color: var(--teal-600); line-height: 1.1; }
.growth-stats .gstat span { font-size: 13.5px; font-weight: 600; color: var(--slate-600); }
/* .growth-stats is used on three bands: two light, and the student survey band
   on students.html, which is navy. --slate-600 is a dark-on-light colour, so
   on navy those labels were rendering at 1.90:1 — a clear AA failure, and in
   practice all but invisible under "100%" and "86%". The numbers themselves
   were fine; only the labels inherited the wrong end of the palette. */
.on-dark .growth-stats .gstat span { color: var(--text-on-dark-muted); }
.growth-map { margin: 0; position: relative; }
.growth-map img, .growth-map video { display: block; width: 100%; border-radius: 20px; }
.growth-map video { border: 1px solid var(--border-subtle); background: #ffffff; }
.growth-map figcaption { margin-top: 12px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* ============================================================
   Growth map -- drawn by js/main.js from js/network-data.js (Facility
   Platform List, coarsened at deploy). Same component on the Join the
   Network hero and the Our Story footprint: a navy panel, the eastern-US
   outline faint, teal dots popping in month by month.
   ============================================================ */
.net-growth {
  margin: 0;
  position: relative;
  padding: 18px 18px 40px;
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 70% 35%, rgba(0,187,188,0.10), rgba(0,187,188,0) 60%),
    var(--navy-800);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 60px rgba(13,21,37,0.28);
  color: #ffffff;
  overflow: hidden;
}
.hero-figure.net-growth { max-width: 620px; justify-self: end; width: 100%; }
.ng-map { position: relative; aspect-ratio: 960 / 802; }
.ng-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The outline file paints states navy with white borders; quieten both so the
   dots carry the picture. CSS beats the file's presentation attributes. */
.ng-outline path { fill: rgba(255,255,255,0.045); stroke: rgba(255,255,255,0.22); stroke-width: 1; }
.ng-dots { filter: drop-shadow(0 0 6px rgba(0,187,188,0.5)); }
/* Large, translucent dots: each covers about a county, and where sites sit
   close together they merge into a glow rather than a pin per building. */
.ng-dot {
  fill: #2ad4d5;
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}
.ng-dot.on { animation: ng-pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.3) forwards; }
@keyframes ng-pop {
  0%   { opacity: 0;    transform: scale(0); }
  55%  { opacity: 0.95; transform: scale(1.5); }
  100% { opacity: 0.62; transform: scale(1); }
}
.ng-label {
  position: absolute;
  left: 24px; top: 20px;
  display: flex; flex-direction: column;
  pointer-events: none;
}
.ng-count {
  font-size: 46px; font-weight: 800; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-on-dark);
  font-variant-numeric: tabular-nums;
}
.ng-sub { margin-top: 6px; font-size: 14px; font-weight: 600; color: #ffffff; }
.ng-asof { margin-top: 3px; font-size: 12.5px; color: var(--text-on-dark-muted); font-variant-numeric: tabular-nums; }
.ng-legend {
  position: absolute; left: 24px; bottom: 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-on-dark-muted);
}
.ng-legend i { width: 9px; height: 9px; border-radius: 50%; background: #2ad4d5; box-shadow: 0 0 6px rgba(0,187,188,0.8); }
.ng-replay {
  position: absolute; right: 16px; bottom: 9px;
  min-height: 28px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  font: 600 12.5px/1 inherit;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.ng-replay:hover, .ng-replay:focus-visible { background: rgba(0,187,188,0.18); border-color: rgba(0,187,188,0.6); }
@media (max-width: 640px) {
  .net-growth { padding: 12px 12px 38px; border-radius: 18px; }
  .ng-label { left: 16px; top: 14px; }
  .ng-count { font-size: 34px; }
  .ng-legend { left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ng-dot.on { animation: none; opacity: 0.62; transform: none; }
}
/* ============================================================
   University partners (student page)
   ============================================================ */
.uni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
/* Paged carousel: two rows, three columns a page (two on tablet, one on a
   phone), scrolled sideways a page at a time by js/main.js. */
.uni-carousel .uni-grid {
  grid-template-columns: none;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px) / 3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 2px 10px;
  margin: -4px -2px 0;
  overscroll-behavior-x: contain;
}
.uni-carousel .uni-grid::-webkit-scrollbar { display: none; }
.uni-carousel .uni-grid:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 16px; }
.uni-carousel .uni-tile { scroll-snap-align: start; }
.uni-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
.uni-controls[hidden] { display: none; }
.uni-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: #ffffff;
  color: var(--navy-800);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.uni-btn:hover { border-color: var(--accent); color: var(--teal-700); }
.uni-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.uni-dots { display: flex; gap: 8px; }
.uni-dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--slate-300);
  transition: width var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.uni-dots i.on { width: 22px; border-radius: 4px; background: var(--accent); }
@media (max-width: 900px) {
  .uni-carousel .uni-grid { grid-auto-columns: calc((100% - 12px) / 2); }
}
@media (max-width: 560px) {
  .uni-carousel .uni-grid { grid-auto-columns: 100%; grid-template-rows: repeat(3, auto); }
}
.uni-tile {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 14px;
  min-height: 82px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy-800);
  text-align: left;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.uni-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
/* Logo mark; the two schools without a usable logo file get an initials chip */
.uni-tile img { width: 42px; height: 42px; object-fit: contain; flex: none; }
.uni-tile .uni-initials {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  background: var(--teal-50);
  color: var(--teal-800);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
}
.uni-tile.pending {
  border-style: dashed;
  color: var(--text-muted);
  font-weight: 600;
  background: transparent;
}
.uni-note { max-width: 680px; margin: 26px auto 0; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--slate-600); text-wrap: balance; }

/* ============================================================
   Leadership (about page)
   ============================================================ */
/* Five executive profiles stacked down the page, portrait beside the bio,
   alternating sides so the eye zig-zags rather than marching. */
.leader-profiles { display: flex; flex-direction: column; gap: 72px; }
.leader-profile {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}
.leader-profile:nth-child(even) { grid-template-columns: minmax(0, 1fr) 300px; }
.leader-profile:nth-child(even) .leader-portrait { order: 2; }

.leader-portrait { margin: 0; position: relative; }
.leader-portrait img,
.leader-portrait .leader-initials {
  display: block;
  width: 100%;
  height: 340px;
  border-radius: var(--radius-photo);
}
.leader-portrait img { object-fit: cover; filter: saturate(0.88) contrast(1.04); }
.leader-portrait .leader-initials {
  display: grid;
  place-items: center;
  background: linear-gradient(170deg, var(--teal-50) 0%, var(--slate-100) 100%);
  border: 1px solid var(--teal-100);
  color: var(--teal-600);
  font-family: var(--font-display);
  font-size: 76px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
/* teal/navy wash so portraits read as one art-directed set, like the other photos */
.leader-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-photo);
  background: linear-gradient(180deg, rgba(0,187,188,0.06) 0%, rgba(27,42,67,0.13) 100%);
  pointer-events: none;
}
.leader-bio h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--navy-800);
}
.leader-bio .role {
  margin-top: 7px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal-700);
}
/* Credentials, or a second line under the title, as the bios document gives it. */
.leader-bio .creds {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--slate-500);
}
.leader-bio p { margin: 18px 0 0; font-size: 16.5px; line-height: 1.68; color: var(--slate-600); }
.leader-bio p + p { margin-top: 12px; }
.leader-bio .leader-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 20px;
}
.leader-bio .leader-meta span {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--teal-50);
  color: var(--teal-800);
  font-size: 12.5px;
  font-weight: 700;
}

/* Benefit cards (careers industry, about culture, facilities value props) */
.benefit-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.benefit-cards .card { padding: 28px 30px; }
.benefit-cards .card h3 { margin: 0 0 10px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--navy-800); }
.benefit-cards .card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--slate-600); }

/* ============================================================
   Small shared pieces for the multi-page layout
   ============================================================ */
/* Gradient headline accent (e.g. "The Teal.") */
.grad-teal {
  color: var(--teal-300);
  background: linear-gradient(100deg, #8beced 0%, var(--teal-300) 40%, var(--teal-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Centered intro + pillar chips (home "who we are") */
.pillar-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.pillar-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 2px rgba(27,42,67,0.06);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-800);
}
.pillar-chip svg { color: var(--teal-600); flex: none; }

/* Photo strip (about page — three photos in a row) */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
.photo-strip figure { margin: 0; }
.photo-strip img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 18px;
}
.photo-strip figcaption { margin-top: 10px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* Three-up card row (about pillars, students page) */
.trio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.trio-grid .card { padding: 30px 30px 32px; }
.trio-grid .service-head { margin-bottom: 16px; }
.trio-grid .card > p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--slate-600); }

/* ============================================================
   Spacing & rhythm system (replaces one-off inline styles)
   ============================================================ */
/* Band rhythm: default 104px; tight tops follow a hero or dense seam */
.band-tight { padding-top: 88px; }
.band-flush { padding-top: 0; }
.band-slim { padding-top: 60px; padding-bottom: 60px; }
.after-cards { margin-top: 104px; }

/* Hero conventions shared by every page */
.hero .eyebrow, .page-hero .eyebrow { color: var(--teal-300); }
.hero-inner .ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-inner .ctas + .hero-proof { margin-top: 26px; }

/* Section intro paragraph spacing */
.section-intro p { margin-top: 16px; }
.section-intro.spaced { margin-bottom: 44px; }

/* Marquee cards: bottom attribution offset (classic quote-mark layout) */
.quote-card p + .who { margin-top: 14px; }

/* Jobs board spacing */
.jobs-empty { margin-top: 34px; }
.jobs-toolbar .job-filters { margin: 0; }

/* Centered stat rows (students) */
.growth-stats.centered { justify-content: center; gap: 64px; margin-top: 0; }
.growth-stats.centered .gstat { text-align: center; }

/* Statement band's sticker logo offset */
.statement-band .ftt-logo { margin-top: 34px; }

/* Teal emphasis inside light headings */
.em-teal { font-style: normal; color: var(--accent-display); }

/* Teal emphasis inside light BODY text. Not .em-teal: --accent-display is
   3.94:1 on white, which passes only for large headings. Running text needs
   4.5:1, and --accent-on-light is 5.92:1 -- still unmistakably teal. */
.text-teal { color: var(--accent-on-light); }

/* Hero photo slideshow (about.html). The first photo stays in normal flow and
   sets the frame's size; the rest stack on top of it and cross-fade. main.js
   drives .is-active and adds the pause control. */
.hero-slides { position: relative; }
.hero-slides .hero-photo { transition: opacity 1.2s var(--ease-out); }
.hero-slides .hero-photo + .hero-photo {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
}
.hero-slides .hero-photo:first-child:not(.is-active) { opacity: 0; }
.hero-slides .hero-photo.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-slides .hero-photo { transition: none; }
}

/* Home hero background: the same slideshow, full-bleed behind the navy fade
   that .hero-media::after already draws. A slow push-in on the photo on
   screen gives it some of the life the old b-roll had. */
.hero-media .hero-slides { position: absolute; inset: 0; overflow: hidden; }
.hero-media .hero-slides img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  filter: saturate(0.85) contrast(1.05);
  transition: opacity 1.6s var(--ease-out), transform 7.6s linear;
  transform: scale(1);
}
.hero-media .hero-slides img.is-active { opacity: 1; transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .hero-media .hero-slides img { transition: none; transform: none; }
  .hero-media .hero-slides img.is-active { transform: none; }
}

/* ============================================================
   CRAFT PASS — texture, photo grade, motion choreography,
   hover system, micro-detail (see DESIGN-CRITIQUE.md)
   ============================================================ */

/* -- Grain: navy surfaces get a 4%-alpha noise so they read as designed
      material, not flood fills. .page-hero (Careers, Contact) was missing,
      which made those heroes read a shade darker (Oct 2026). -- */
.hero,
.page-hero,
.band-navy,
.cta-panel,
.site-footer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -- Unified photo grade: slight desaturate + teal/navy wash so the photo
      library reads as one art-directed set -- */
.hero-photo,
.figure-photo img,
.photo-strip img,
.bento .photo img {
  filter: saturate(0.85) contrast(1.05);
}
.figure-photo::after,
.photo-strip figure {
  position: relative;
}
.figure-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-photo);
  background: linear-gradient(180deg, rgba(0,187,188,0.08) 0%, rgba(27,42,67,0.16) 100%);
  pointer-events: none;
}
.photo-strip figure::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 250px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,187,188,0.08) 0%, rgba(27,42,67,0.16) 100%);
  pointer-events: none;
}

/* -- Numbered eyebrows for process/sequence sections -- */
.eyebrow[data-num]::before {
  content: attr(data-num);
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--teal-600);
}

/* -- Stat numerals: the site's "big objects" -- */
.growth-stats .gstat strong {
  font-size: 64px;
  background: linear-gradient(100deg, var(--teal-400) 0%, var(--teal-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* -- Micro detail: brand selection + quiet scrollbar -- */
::selection { background: rgba(0,187,188,0.22); color: var(--navy-800); }
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 13px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: #c3cdd9;
    border-radius: 8px;
    border: 3px solid #ffffff;
  }
  ::-webkit-scrollbar-thumb:hover { background: #a9b6c6; }
}

/* -- Smooth same-page anchors; targets clear the sticky header -- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 90px; }

/* -- Hero entrance: copy children rise in sequence on page load -- */
@media (prefers-reduced-motion: no-preference) {
  .hero-inner > div:first-child > *,
  .page-hero-inner > * {
    opacity: 0;
    transform: translateY(16px);
    animation: heroRise 0.65s var(--ease-settle) forwards;
  }
  .hero-inner > div:first-child > :nth-child(1), .page-hero-inner > :nth-child(1) { animation-delay: 0.05s; }
  .hero-inner > div:first-child > :nth-child(2), .page-hero-inner > :nth-child(2) { animation-delay: 0.16s; }
  .hero-inner > div:first-child > :nth-child(3), .page-hero-inner > :nth-child(3) { animation-delay: 0.27s; }
  .hero-inner > div:first-child > :nth-child(4) { animation-delay: 0.38s; }
  .hero-inner > div:first-child > :nth-child(5) { animation-delay: 0.49s; }
  @keyframes heroRise { to { opacity: 1; transform: none; } }
}

/* -- Card hover system: everything interactive answers the pointer -- */
@media (hover: hover) {
  .trio-grid .card,
  .benefit-cards .card,
  .bento-minor,
  .path-card,
  .job-card,
  .uni-tile,
  .dark-tile,
  .partner-tile {
    transition: transform 0.18s var(--ease-settle), box-shadow 0.18s ease-out, border-color 0.18s ease-out;
  }
  .trio-grid .card:hover,
  .benefit-cards .card:hover,
  .bento-minor:hover,
  .path-card:hover,
  .job-card:hover,
  .uni-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(0,187,188,0.45);
    box-shadow: 0 14px 34px rgba(27,42,67,0.10);
  }
  .dark-tile:hover { transform: translateY(-3px); border-color: rgba(0,187,188,0.5); }
  .partner-tile:hover { transform: translateY(-3px); }
}

/* -- Gold sheen: a single light sweep on the primary CTA -- */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -45%;
  width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-gold:hover::after { animation: sheen 0.55s ease-out; }
}
@keyframes sheen {
  0% { left: -45%; opacity: 1; }
  100% { left: 110%; opacity: 1; }
}

/* -- Steps connector draws itself in when the section reveals -- */
html.js .steps::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-settle) 0.15s;
}
html.js .steps.drawn::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  html.js .steps::before { transform: none; }
}

/* -- Hero proof strip: counted numbers styled -- */
.hero-proof strong { font-weight: 800; color: #ffffff; }

/* -- Ambient video: fade in over the graded poster once playing.
      Poster background only where the media is a video (not the map). -- */
.hero-media:has(.hero-video) { background: var(--navy-800) url('../assets/images/team/team-teal-shirts.webp') center / cover no-repeat; }
html.js .hero-video { opacity: 0; transition: opacity 0.8s ease-out; }
html.js .hero-video.playing { opacity: 1; }

/* -- Hero video pause control (WCAG 2.2.2, Level A) --
   Injected by main.js, and deliberately a sibling of .hero-media rather than
   a child: that wrapper is aria-hidden, and a focusable control inside an
   aria-hidden subtree is reachable by Tab but invisible to a screen reader.
   44x44 so it clears SC 2.5.8 with room. Sits quietly at 55% until hovered
   or focused, so it is findable without competing with the headline. */
.hero-video-toggle {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ov-light-4);
  border-radius: 50%;
  background: var(--ov-dark-6);          /* rgba(13,21,37,0.55) */
  color: #ffffff;                        /* 8.9:1 on that plate */
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.hero-video-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.hero-video-toggle:hover,
.hero-video-toggle:focus-visible { opacity: 1; background: rgba(13,21,37,0.75); }
@media (max-width: 640px) {
  .hero-video-toggle { right: var(--sp-3); bottom: var(--sp-3); }
}

/* -- Bento major photo: slow zoom on hover -- */
.bento-major .photo { overflow: hidden; }
.bento-major .photo img { transition: transform 0.7s var(--ease-settle); }
@media (hover: hover) { .bento-major:hover .photo img { transform: scale(1.045); } }

/* -- Map legend chip (students hero) -- */
.map-legend {
  position: absolute;
  right: 36px;
  bottom: 165px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(13,21,37,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  font-weight: 600;
}
.map-legend .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-400); flex: none; }

/* -- Job filters: active filter reads as engaged -- */
.job-filters select.active {
  border-color: var(--teal-500);
  background-color: var(--teal-50);
  color: var(--teal-800);
}

/* -- Benefits table: header follows the scroll -- */
.benefits-table thead th {
  position: sticky;
  top: 76px;
  z-index: 5;
  background: #ffffff;
}

/* -- Map pins drop in -- */
@media (prefers-reduced-motion: no-preference) {
  .school-pin { animation: pinDrop 0.45s var(--ease-settle) both; }
  @keyframes pinDrop {
    from { transform: translateY(-10px) scale(0.8); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
}

/* -- Growth line (about): draws from "9 facilities" toward the map -- */
.growth-line {
  height: 3px;
  margin-top: 30px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal-500), var(--teal-300));
}
html.js .growth-line[data-reveal] { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-settle) 0.2s; opacity: 1; }
html.js .growth-line[data-reveal].revealed { transform: scaleX(1); }


/* -- Segmented audience control (contact form) -- */
.seg-control { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-control label { cursor: pointer; }
.seg-control input {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.seg-control span {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border-subtle);
  background: #ffffff;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-600);
  transition: background 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}
/* Was white on teal-600: 3.21:1. teal-500 with a navy label is 6.06:1 and
   matches .btn-primary, so the one selected control on the contact form
   looks like the same component family as the button below it. */
.seg-control input:checked + span {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: var(--on-accent);
}
.seg-control input:focus-visible + span {
  box-shadow: 0 0 0 3px var(--focus-ring), 0 0 0 1.5px var(--teal-600);
}
.form-label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy-800);
  margin-bottom: 8px;
}
.reply-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--teal-50);
  color: var(--teal-800);
  font-size: 12.5px;
  font-weight: 600;
}
.reply-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500); }

/* -- Reassurance chips (facilities CTA) -- */
.assure-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; position: relative; }
.assure-chips span {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 500;
}

/* ============================================================
   Blog — index cards + article layout
   ============================================================ */

/* -- Category filter row (blog index) -- */
.blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 46px; }
.blog-filter {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: #ffffff;
  color: var(--slate-600);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.blog-filter:hover { background: var(--slate-100); color: var(--navy-800); }
.blog-filter.active { background: var(--navy-800); border-color: var(--navy-800); color: #ffffff; }

/* -- Category chip (cards + article hero) -- */
.post-cat {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--teal-50);
  color: var(--teal-800);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.post-cat.c-facilities { background: var(--blue-bg);   color: var(--blue-700); }
.post-cat.c-students   { background: var(--purple-bg); color: var(--purple-700); }
.post-cat.c-careers    { background: var(--teal-50);   color: var(--teal-800); }
.post-cat.c-news       { background: var(--gold-tint); color: var(--gold-700); }

/* -- Shared post meta line (date · read time) -- */
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 13px; color: var(--text-muted); }
.post-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--slate-300); }

/* -- Featured post (top of the index) -- */
.post-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  overflow: hidden;
  margin-bottom: 30px;
}
.post-featured .pf-media { position: relative; min-height: 360px; }
.post-featured .pf-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}
.post-featured .pf-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,187,188,0.08) 0%, rgba(27,42,67,0.16) 100%);
  pointer-events: none;
}
.post-featured .pf-flag {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--gold-500);
  color: var(--navy-900);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.post-featured .pf-body { padding: 46px 46px 42px; display: flex; flex-direction: column; justify-content: center; }
.post-featured h2 {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: 34px;
  line-height: 1.14;
  color: var(--navy-800);
  text-wrap: balance;
}
.post-featured h2 a { color: inherit; }
.post-featured h2 a:hover { color: var(--teal-700); }
.post-featured .pf-excerpt { margin: 16px 0 24px; font-size: 16.5px; line-height: 1.65; color: var(--slate-600); }
.post-featured .post-meta { margin-bottom: 22px; }

/* -- Post grid + cards -- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-settle), box-shadow var(--dur-slow) var(--ease-out);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.post-card .pc-media { position: relative; }
.post-card .pc-media img {
  display: block;
  width: 100%;
  height: 196px;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}
.post-card .pc-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,187,188,0.08) 0%, rgba(27,42,67,0.16) 100%);
  pointer-events: none;
}
.post-card .pc-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 24px 24px; }
.post-card h3 {
  margin: 14px 0 0;
  font-size: 19.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.28;
  color: var(--navy-800);
}
.post-card h3 a { color: inherit; }
.post-card h3 a:hover { color: var(--teal-700); }
.post-card p { margin: 11px 0 20px; font-size: 14.5px; line-height: 1.62; color: var(--slate-600); }
.post-card .post-meta { margin-top: auto; }

.blog-empty { text-align: center; padding: 40px 0; color: var(--text-muted); font-size: 15.5px; }

/* [hidden] must beat the flex/grid display rules above when filtering */
.post-featured[hidden], .post-card[hidden] { display: none; }

/* -- Article hero additions (sits on .page-hero) -- */
.post-hero .post-cat { background: rgba(0,187,188,0.16); color: var(--teal-200); }
.post-hero h1 { max-width: 840px; margin-top: 18px; font-size: 46px; }
.post-byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.post-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--teal-600);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.post-byline .pb-who { font-size: 15px; font-weight: 600; color: #ffffff; }
.post-byline .pb-meta { margin-top: 3px; font-size: 13px; color: var(--text-on-dark-muted); }

/* -- Article body -- */
.post-article { max-width: 720px; margin: 0 auto; }
.post-lead { margin: 0 0 28px; font-size: 20.5px; line-height: 1.62; color: var(--slate-600); }
.post-body p { margin: 0 0 26px; font-size: 17.5px; line-height: 1.75; color: var(--slate-700); }
.post-body h2 {
  margin: 46px 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 27px;
  line-height: 1.2;
  color: var(--navy-800);
}
.post-body h3 { margin: 34px 0 12px; font-size: 19px; font-weight: 700; color: var(--navy-800); }
.post-body ul { margin: 0 0 26px; padding-left: 22px; }
.post-body li { margin-bottom: 10px; font-size: 17.5px; line-height: 1.7; color: var(--slate-700); }
.post-body a { color: var(--teal-700); text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover { color: var(--teal-800); }
.post-body strong { color: var(--navy-800); font-weight: 650; }

/* -- Image + caption block -- */
.post-figure { margin: 38px 0; }
.post-figure img {
  display: block;
  width: 100%;
  border-radius: 18px;
  filter: saturate(0.85) contrast(1.05);
}
.post-figure figcaption {
  margin-top: 13px;
  padding-left: 14px;
  border-left: 2px solid var(--teal-400);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.post-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.post-gallery img { height: 240px; object-fit: cover; }
.post-gallery figcaption { grid-column: 1 / -1; margin-top: 0; }

/* -- Pull quote block -- */
.post-quote { margin: 42px 0; padding-left: 26px; border-left: 3px solid var(--teal-500); }
.post-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.015em;
  color: var(--navy-800);
}
.post-quote footer { margin-top: 13px; font-size: 14px; color: var(--text-muted); }

/* -- Share row -- */
.post-share {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 50px;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
}
.post-share .label { font-size: 14px; font-weight: 600; color: var(--slate-600); margin-right: 2px; }
.share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: var(--slate-600);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.share-btn:hover { background: var(--navy-800); border-color: var(--navy-800); color: #ffffff; }

/* -- Author card -- */
.author-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 40px;
  padding: 26px 28px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 18px;
}
.author-card .post-avatar { flex: none; width: 52px; height: 52px; font-size: 15px; }
.author-card .ac-name { font-size: 16px; font-weight: 700; color: var(--navy-800); }
.author-card .ac-role { margin-top: 2px; font-size: 13.5px; color: var(--teal-700); font-weight: 600; }
.author-card .ac-bio { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--slate-600); }

/* ============================================================
   Responsive
   ============================================================ */
/* ---- v6 additions (CEO notes, Sep 2026) -----------------------------

   .triad — Therapists / Patients / Stakeholders. These three words are the
   line people quote back, and inside the paragraph they auto-wrapped out of
   the end of the sentence. Own line, always. */
.triad {
  display: block;
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--navy-800);
  text-wrap: balance;
}
.triad strong { font-weight: 700; }

/* .side-by-side — the site editor's "Side by side": boxes of one kind (two
   stat cards) in a row instead of a stack. It wraps back into a stack when
   the row runs out of room, so phones stack by themselves. The boxes keep
   their top margins (their spacing when stacked, and again when wrapped)
   and lose their side ones, which would otherwise centre each box in its
   share of the row (!important: a box's own rule, like .receipt-stat's
   `margin: 36px auto 0`, comes later in this file and would win). Equal heights, so the cards line up. */
.side-by-side { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 0 24px; }
.side-by-side > * { flex: 1 1 260px; min-width: 0; margin-left: 0 !important; margin-right: 0 !important; }

/* .receipt-stat — the appeals success rate, broken out of the compliance
   paragraph so the number carries its own weight. Counts up like the other
   stats; data-decimals keeps the .2 (see js/main.js). */
.receipt-stat {
  margin: 36px auto 0;
  max-width: 360px;
  padding: 28px 30px 24px;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--paper-line);
  border-top: 3px solid var(--teal-400);
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-card);
}
.receipt-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--teal-600);
  font-variant-numeric: tabular-nums;
}
.receipt-stat figcaption {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* .cta-strip — mid-page call to action. Deliberately lighter than the
   .cta-panel that closes the page: one line of copy and the button, in a row,
   so the reader is offered the next step without the page ending twice. */
.cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding: 34px 38px;
  border-radius: var(--radius-photo);
  background: linear-gradient(118deg, var(--navy-800), var(--navy-900));
  color: #ffffff;
}
.cs-copy { max-width: 520px; }
.cta-strip h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-wrap: balance;
}
.cta-strip p {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate-300);
}
.cta-strip .btn { flex: 0 0 auto; text-align: center; }

/* Between 901px and 1100px the full menu still fits with slightly tighter
   spacing: logo + six links measured 931px at the default padding, ~860px
   with this. Before Oct 2026 the menu collapsed at 1120px, a cut-off left
   over from when it had many more links -- the six buttons disappeared on
   ordinary laptop windows they fit in comfortably. */
@media (min-width: 901px) and (max-width: 1100px) {
  .header-inner { padding-left: 20px; padding-right: 20px; }
  .nav-link { padding: 9px 9px; }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 16px 16px;
    background: #ffffff;
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 20px 40px rgba(27,42,67,0.10);
    display: none;
  }
  /* The Aug-2026 restructure took the menu from ~10 links to 25, which is
     taller than a phone screen once the dropdowns flatten out. The panel is
     absolutely positioned off a sticky header, so page scrolling moves it
     rather than revealing its end — it needs its own scroll or the last
     items (Blog, Contact Us) are unreachable. */
  .site-nav.open {
    display: flex;
    max-height: calc(100vh - var(--header-h, 79px));
    max-height: calc(100dvh - var(--header-h, 79px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-link { padding: 12px 14px; font-size: 15px; }
  .nav-cta { margin: 8px 0 0; text-align: center; justify-content: center; display: flex; }
  /* Dropdown flattens into an always-visible indented list on touch */
  .nav-item { display: block; }
  .nav-caret { display: none; }
  .nav-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    margin: 2px 0 6px 14px;
    padding: 6px;
    border-radius: 12px;
    box-shadow: none;
  }
  .nav-menu::before { display: none; }
  .nav-menu a { padding: 10px 14px; font-size: 14.5px; }
}

@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  /* beat .hero.map-hero .hero-inner, which is more specific than the line above */
  .hero.map-hero .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-figure { max-width: 560px; }
  .hero-title { font-size: 56px; }
  .hero.compact .hero-title { font-size: 48px; }
  .section-title { font-size: 40px; }
  .growth-stats .gstat strong { font-size: 52px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-intro { position: static; }
  .settings-grid, .teaser-grid { grid-template-columns: 1fr; gap: 44px; }
  .split.copy-left, .split.copy-right { grid-template-columns: 1fr; gap: 44px; }
  .split.copy-right .figure-photo { order: 2; }
  .voice-grid { grid-template-columns: 1fr; gap: 40px; }
  .bento { grid-template-columns: 1fr; }
  .bento-major { grid-row: auto; }
  .contact-grid { grid-template-columns: 1fr; }
  .figure-photo img { height: 440px; }
  /* Immersive hero: the film becomes a full-bleed backdrop under a heavier tint */
  .hero-immersive .hero-title { font-size: 64px; }
  .hero-media { width: 100%; }
  .hero-media::after {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
      linear-gradient(to right,
        rgba(27,42,67,0.94) 0%,
        rgba(27,42,67,0.905) 20%,
        rgba(27,42,67,0.86) 40%,
        rgba(27,42,67,0.815) 60%,
        rgba(27,42,67,0.77) 80%,
        rgba(27,42,67,0.74) 100%),
      linear-gradient(to top,
        rgba(27,42,67,0.6) 0%,
        rgba(27,42,67,0.45) 10%,
        rgba(27,42,67,0.28) 18%,
        rgba(27,42,67,0.12) 26%,
        rgba(27,42,67,0) 34%);
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 180px 180px, 100% 100%, 100% 100%;
  }
  .hero-watch { position: static; margin-top: 26px; }
  .growth-grid { grid-template-columns: 1fr; gap: 44px; }
  .benefit-cards { grid-template-columns: 1fr; }
  .leader-profiles { gap: 52px; }
  .leader-profile,
  .leader-profile:nth-child(even) { grid-template-columns: 240px minmax(0, 1fr); gap: 34px; }
  .leader-profile:nth-child(even) .leader-portrait { order: 0; }
  .leader-portrait img, .leader-portrait .leader-initials { height: 280px; }
  .leader-bio h3 { font-size: 27px; }
  .job-card { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
  .job-card .jc-more { order: 1; }
  .job-card .jc-actions { order: 2; width: 100%; flex-wrap: nowrap; }
  .job-card .jc-actions > * { flex: 1 1 0; justify-content: center; text-align: center; }
  .map-layout { grid-template-columns: 1fr; grid-template-rows: auto; }
  .job-detail { order: 2; max-height: 460px; }
  .jobs-map { height: 420px; }
  .photo-strip { grid-template-columns: 1fr; }
  .photo-strip img { height: 300px; }
  .post-featured { grid-template-columns: 1fr; }
  .post-featured .pf-media { min-height: 280px; }
  .post-featured .pf-body { padding: 34px 32px 36px; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .post-hero h1 { font-size: 38px; }
  .network-grid { grid-template-columns: 1fr; }
  .network-map-card { min-height: 460px; }
  .network-side { flex-direction: row; }
  .network-stat { padding: 20px 22px; }
  .network-stat strong { font-size: 36px; }
}

@media (max-width: 920px) {
  .path-cards { grid-template-columns: 1fr; }
  .trio-grid { grid-template-columns: 1fr; }
  .quote-card { width: 330px; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .steps::before { display: none; }
  .partner-tiles { grid-template-columns: 1fr; }
  .tile-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .container, .header-inner, .hero-inner, .path-cards,
  .footer-grid, .footer-bottom, .page-hero-inner,
  /* .hero.compact .hero-inner sets side padding with a 32px SHORTHAND at
     specificity 0,3,0, which beats this rule at 0,1,0 -- so on the two pages
     that use it (about, students) the hero sat 12px right of every band
     below it at phone width. Pre-existing; adding the selector here rather
     than unpicking the shorthand, which also carries the --fade-h bottom
     padding that the hero fade depends on. */
  .hero.compact .hero-inner { padding-left: 20px; padding-right: 20px; }
  .band { padding: 72px 0; }
  .cta-band { padding: 72px 0; }
  .hero-inner { padding-top: 56px; }
  /* Shallower dissolve on a phone; the clearance calc follows automatically. */
  .hero, .page-hero { --fade-h: 120px; }
  .hero-immersive { --fade-h: 150px; }
  .hero-title { font-size: 40px; }
  .hero.compact .hero-title { font-size: 36px; }
  .hero-sub { font-size: 16.5px; }
  .hero-photo { height: 360px; }
  .hero.compact .hero-photo { height: 320px; }
  .hero-stamp { width: 68px; height: 68px; left: -8px; bottom: 22px; }
  .hero-stamp img { width: 42px; height: 42px; }
  .section-title { font-size: 30px; }
  .growth-stats .gstat strong { font-size: 42px; }
  .map-legend { display: none; }
  .cta-panel { padding: 56px 24px; }
  .cta-panel h2 { font-size: 34px; }
  .statement { font-size: 25px; }
  .quote-band p { font-size: 24px; }
  .figure-photo img, .split .figure-photo img, .teaser-grid .figure-photo img { height: 340px; }
  .value-item { grid-template-columns: 56px 1fr; gap: 18px; }
  .value-item .num { font-size: 32px; }
  /* portrait stacks above the bio once there's no room beside it */
  .leader-profile,
  .leader-profile:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
  .leader-portrait { max-width: 260px; }
  .leader-portrait img, .leader-portrait .leader-initials { height: 300px; }
  .leader-bio h3 { font-size: 25px; }
  .leader-bio p { font-size: 15.5px; }
  .footer-grid { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 36px; }
  .contact-form, .contact-info { padding: 26px 22px; }
  .hero-immersive .hero-title { font-size: 46px; }
  .hero-immersive .hero-inner { min-height: calc(100vh - 120px); padding-top: 64px; }
  .quote-card, .quote-card.w-sm, .quote-card.w-lg { width: 300px; }
  .growth-stats { gap: 24px; }
  .post-grid { grid-template-columns: 1fr; }
  .post-featured h2 { font-size: 27px; }
  .post-featured .pf-body { padding: 28px 22px 30px; }
  .post-hero h1 { font-size: 31px; }
  .post-lead { font-size: 18.5px; }
  .post-body p, .post-body li { font-size: 16.5px; }
  .post-body h2 { font-size: 23px; margin-top: 38px; }
  .post-quote p { font-size: 20px; }
  .post-gallery { grid-template-columns: 1fr; }
  .author-card { flex-direction: column; gap: 14px; }
  .network-side { flex-direction: column; }
  .network-map-card { min-height: 380px; border-radius: 16px; }
  .network-stat strong { font-size: 32px; }
  .cta-strip { flex-direction: column; align-items: stretch; gap: 24px; padding: 28px 22px; }
  .cta-strip h2 { font-size: 23px; }
  .triad { font-size: 16.5px; }
  .receipt-stat strong { font-size: 52px; }
}


/* Honeypot. Off-screen rather than display:none -- some scrapers skip fields
   that are display:none or visibility:hidden, and the whole point is that a
   bot should find it and fill it in. Kept out of the tab order and out of the
   accessibility tree in the markup, so no real visitor can land on it. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Background scroll lock while the mobile nav drawer is open. */
body.nav-open { overflow: hidden; }

/* ============================================================
   Print
   ============================================================
   Higher value here than it looks. SNF administrators print a vendor page to
   take into a committee meeting, and a clinician prints a job description.
   Printed as it was, every page put the navy hero bands down as solid ink,
   the video poster as a full-page image, and the nav and footer on every
   sheet.

   The treatment is deliberately plain: one column, 11pt, black on white.
   The statistics keep their size, because they are usually the reason the
   page was printed at all. */
@media print {
  /* Chrome and Firefox drop background fills by default; Safari and
     "Background graphics" users keep them. Force white so a navy band never
     prints as a slab of ink either way. */
  *, *::before, *::after {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #000000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html, body { background: #ffffff !important; font-size: 11pt; line-height: 1.4; }

  /* Navigation, decoration and anything that cannot be acted on from paper. */
  .site-header, .site-footer, .skip-link, .hero-media, .hero-fade, .hero-arc,
  .hero-video-toggle, .scroll-progress, .marquee, .net-map-figure, .growth-map,
  .jobs-map, #schools-map, .map-layout, .nav-toggle, .seg-control, .form-actions,
  .cta-panel, .cta-strip, video, iframe {
    display: none !important;
  }

  /* The wordmark, first page only. */
  .page::before {
    content: 'Continuum Therapy Partners';
    display: block;
    font-weight: 700;
    font-size: 13pt;
    letter-spacing: -0.01em;
    margin-bottom: 14pt;
    padding-bottom: 6pt;
    border-bottom: 1pt solid #000000;
  }

  main, .container, .band, section { padding: 0 !important; margin: 0 !important; width: auto !important; }
  .band + .band { margin-top: 16pt !important; }

  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 12pt; }
  h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid; margin-top: 14pt; }
  p, li { orphans: 3; widows: 3; }

  /* Stats are usually the reason the page was printed. */
  .sp-stat strong, .receipt-stat strong, .network-stat strong, .gstat strong { font-size: 18pt !important; }

  .card, .uni-tile, .dark-tile, .step, .value-item, tr, figure, blockquote {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1pt solid #999999 !important;
  }
  tr, .uni-tile { border: none !important; }
  table { border-collapse: collapse; width: 100%; }
  th, td { border: 0.5pt solid #999999 !important; padding: 4pt 6pt !important; }

  /* A printed link is useless without its address. Internal hrefs are
     relative, so they get the domain; mailto:/tel: already read as the
     address itself and would only repeat themselves. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  a[href^="/"]::after,
  a[href$=".html"]::after { content: " (continuumtherapypartners.com/" attr(href) ")"; font-size: 9pt; }
  a[href^="#"]::after, a[href^="mailto"]::after, a[href^="tel"]::after { content: ""; }

  /* Reveal animations never run without a viewport, so unhide everything. */
  [data-reveal], html.js [data-reveal] { opacity: 1 !important; transform: none !important; }

  @page { margin: 16mm 14mm; }
}

/* Set in the site editor: a section hidden on phones (the site's own phone
   breakpoint). It still shows on computers and tablets. */
@media (max-width: 640px) {
  .hide-on-phone { display: none !important; }
}

/* Section spacing, set in the site editor (Spacing: Compact, Normal, Roomy).
   Two classes deep so they win over .band and .band-tight wherever those
   sit in this file; phones get a little less of each. */
.band.band-compact { padding: 64px 0; }
.band.band-roomy { padding: 144px 0; }
@media (max-width: 640px) {
  .band.band-compact { padding: 44px 0; }
  .band.band-roomy { padding: 100px 0; }
}

/* Our Story #FeelTheTeal gallery: columns, so portrait and landscape photos
   sit together whole rather than cropped to one shape. */
.ftt-gallery { columns: 4 220px; column-gap: 14px; }
.ftt-gallery figure {
  margin: 0 0 14px;
  break-inside: avoid;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.ftt-gallery img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .ftt-gallery { columns: 2; column-gap: 10px; } .ftt-gallery figure { margin-bottom: 10px; border-radius: 10px; } }