/* ============================================================
   Scope Medical — site styles
   1. Design tokens
   2. Reset + base
   3. Typography
   4. Layout utilities
   5. Components (header, footer, buttons, cards, hero, etc.)
   6. Page-specific
   ============================================================ */

/* 1. Design tokens ------------------------------------------- */
:root {
  /* Colors */
  --color-navy:        #0F1D3A;
  --color-navy-light:  #1C2F55;
  --color-blue:        #7DB9DD;
  --color-blue-soft:   #EAF2F9;
  --color-maroon:      #983F3B;
  --color-maroon-dark: #7A2F2B;
  --color-white:       #FFFFFF;
  --color-gray-50:     #F7F8FA;
  --color-gray-200:    #E5E7EB;
  --color-gray-500:    #6B7280;
  --color-gray-900:    #1F2937;

  /* Typography */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing (4px scale) */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-24: 6rem;

  /* Layout */
  --container-max: 1200px;
  --radius-button: 8px;
  --radius-card: 12px;
  --shadow-sm: 0 1px 2px rgba(15,29,58,0.06);
  --shadow-md: 0 8px 24px rgba(15,29,58,0.12);

  /* Motion */
  --transition-base: 150ms ease;
}

/* 2. Reset + base -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-gray-900);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-navy); text-decoration: none; transition: color var(--transition-base); }
a:hover { color: var(--color-maroon); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: 4px;
}
button { font: inherit; cursor: pointer; background: none; border: 0; }
ul { padding-left: 1.25rem; }

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

/* 3. Typography ---------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--color-navy);
  line-height: 1.2;
  font-weight: 700;
}
h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); letter-spacing: -0.015em; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.125rem; }
p { color: var(--color-gray-900); }
.eyebrow {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-maroon);
  margin-bottom: var(--space-3);
}
.lead { font-size: 1.125rem; color: var(--color-gray-500); }
.lead--strong { font-size: 1.25rem; font-weight: 700; color: var(--color-navy); }

/* 4. Layout utilities ---------------------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}
.section { padding: var(--space-16) 0; }
.section--tight { padding: var(--space-10) 0; }
.section--flush-top { padding-top: var(--space-3); }
.section--soft { background: var(--color-gray-50); }
.section--blue { background: var(--color-blue-soft); }
.section--navy { background: var(--color-navy); color: var(--color-white); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--color-white); }
.section--navy p { color: rgba(255,255,255,0.85); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* 5. Components --------------------------------------------- */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-button);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base),
              transform var(--transition-base), box-shadow var(--transition-base);
}
.btn--primary {
  background: var(--color-maroon);
  color: var(--color-white);
}
.btn--primary:hover {
  background: var(--color-maroon-dark);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn--secondary {
  background: transparent;
  color: var(--color-navy);
  border: 2px solid var(--color-navy);
}
.btn--secondary:hover {
  background: var(--color-navy);
  color: var(--color-white);
}
.btn--lg { padding: 1rem 1.75rem; font-size: 1rem; }

/* Site header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.95);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-gray-200);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  gap: var(--space-6);
}
.site-header__logo img { height: 64px; width: auto; }

@media (max-width: 540px) {
  .site-header__logo img { height: 48px; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-nav__link {
  font-weight: 600;
  color: var(--color-navy);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-maroon);
  border-bottom-color: var(--color-maroon);
}

/* Dropdown menus */
.site-nav__item--has-menu { position: relative; }
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.site-nav__chevron { transition: transform var(--transition-base); }
.site-nav__item--has-menu.is-expanded .site-nav__chevron { transform: rotate(180deg); }
.site-nav__item--has-menu.is-expanded > .site-nav__toggle {
  color: var(--color-maroon);
  border-bottom-color: var(--color-maroon);
}

.site-subnav {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 250px;
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-base), transform var(--transition-base),
              visibility var(--transition-base);
}
.site-nav__item--has-menu.is-expanded > .site-subnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-subnav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-button);
  font-weight: 500;
  color: var(--color-navy);
  white-space: nowrap;
}
.site-subnav__link:hover,
.site-subnav__link[aria-current="page"] {
  background: var(--color-blue-soft);
  color: var(--color-maroon);
}

/* Anchored sections clear the sticky header when jumped to */
:target { scroll-margin-top: 96px; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
}
.nav-toggle__bar {
  width: 26px; height: 2px;
  background: var(--color-navy);
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
  }
  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav__list {
    flex-direction: column;
    gap: var(--space-3);
  }
  .site-nav__cta { align-self: flex-start; }

  /* Dropdowns become inline accordions inside the hamburger panel */
  .site-nav__item--has-menu { position: static; }
  .site-nav__toggle { width: 100%; justify-content: space-between; }
  .site-subnav {
    position: static;
    display: none;
    min-width: 0;
    margin: var(--space-2) 0 0;
    padding: 0 0 0 var(--space-4);
    background: transparent;
    border: 0;
    border-left: 2px solid var(--color-gray-200);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .site-nav__item--has-menu.is-expanded > .site-subnav { display: block; }
  .site-subnav__link { white-space: normal; }
}

/* Footer */
.site-footer {
  background: var(--color-navy);
  color: rgba(255,255,255,0.85);
  margin-top: var(--space-24);
}
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: var(--color-blue); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-10);
  padding: var(--space-16) 0 var(--space-10);
}
.site-footer__logo {
  height: 56px; width: auto;
  background: var(--color-white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-4);
}
.site-footer__tagline { font-size: 1rem; margin-bottom: var(--space-4); color: #fff; }
.site-footer__address { font-style: normal; line-height: 1.7; }
.site-footer__heading {
  color: var(--color-white);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}
.site-footer__list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: var(--space-5) 0;
  font-size: 0.875rem;
}
.site-footer__bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
}

@media (max-width: 768px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* Hero — full-bleed Boston skyline */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 560px;
  padding: var(--space-10) 0;
  overflow: hidden;
  background: var(--color-navy);
}

/* Crossfading skyline photos */
.hero__slideshow {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: heroFade 30s linear infinite;
}
/* Delays run 1.5s "early" so slide 1 starts at the top of its hold (already
   fully opaque) instead of fading up from the navy backdrop on first paint. */
.hero__slide:nth-child(1) { animation-delay: -1.5s; }
.hero__slide:nth-child(2) { animation-delay: 6s; }
.hero__slide:nth-child(3) { animation-delay: 13.5s; }
.hero__slide:nth-child(4) { animation-delay: 21s; }
/* Fallback: if CSS animations don't run at all, keep the first photo visible
   so the hero is never a blank dark box. The animation overrides this while active. */
.hero__slide:first-child { opacity: 1; }

/* Dip-free crossfade. The old version faded the outgoing photo out while the
   incoming one faded in, so mid-transition both sat near 50% opacity and the
   navy backdrop showed through the pair -- roughly 25% flat navy at the
   midpoint, read as the whole hero "going dark" every 7.5s. Here the incoming
   photo is raised above the outgoing one and fades in over it while the
   outgoing one holds at full opacity underneath, then cuts to 0 only after it
   is completely covered. Every frame is 100% photo. */
@keyframes heroFade {
  0%      { opacity: 0; z-index: 2; }  /* on top, fading in over the previous photo */
  5%      { opacity: 1; z-index: 2; }  /* ~1.5s fade in */
  25%     { opacity: 1; z-index: 2; }  /* hold; the next slide now starts its cycle */
  25.01%  { opacity: 1; z-index: 1; }  /* hand the top layer to the incoming slide */
  30%     { opacity: 1; z-index: 1; }  /* stay opaque underneath until fully covered */
  30.01%  { opacity: 0; z-index: 0; }  /* hidden cut, invisible behind the new photo */
  100%    { opacity: 0; z-index: 0; }
}

/* Navy overlay — darkest behind the text on the left, for legibility */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(15, 29, 58, 0.62) 0%,
    rgba(15, 29, 58, 0.40) 42%,
    rgba(15, 29, 58, 0.06) 100%
  );
}

.hero__inner {
  width: 100%;
}
.hero__content { max-width: 640px; }
.hero__brand {
  display: block;
  color: var(--color-white);
  font-size: clamp(1.75rem, 2.2vw + 1rem, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: var(--space-2);
  text-shadow: 0 1px 12px rgba(15, 29, 58, 0.45);
}
.hero .eyebrow { color: var(--color-blue); }
.hero__content h1 {
  color: var(--color-white);
  margin-bottom: var(--space-4);
  text-shadow: 0 1px 14px rgba(15, 29, 58, 0.55);
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-6);
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hero__content .lead {
  color: rgba(255, 255, 255, 0.93);
  margin-bottom: var(--space-8);
  max-width: 50ch;
  text-shadow: 0 1px 10px rgba(15, 29, 58, 0.5);
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}

/* Secondary button restyled for the dark skyline */
.hero .btn--secondary {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.7);
}
.hero .btn--secondary:hover {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-white);
}

@media (max-width: 860px) {
  .hero { min-height: 520px; padding: var(--space-12) 0; }
}

/* The site-wide reduced-motion reset near the top of this file neutralizes ALL
   animations (animation-duration: 0.01ms !important; iteration-count: 1). The
   skyline crossfade is opacity-only — no sliding, zooming, or parallax — so it
   doesn't cause the vestibular issues "reduce motion" targets. Re-enable it
   specifically, even under reduce-motion, by restoring its duration and
   iteration count with matching !important and higher specificity. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide {
    animation-duration: 30s !important;
    animation-iteration-count: infinite !important;
  }
}

/* Section head */
.section-head { text-align: center; max-width: 720px; margin: 0 auto var(--space-12); }
.section-head .lead { margin-top: var(--space-3); }

/* Card grid */
.card-grid { display: grid; gap: var(--space-6); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
}

/* Service card */
.service-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.service-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-blue-soft); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.service-card__body ul { padding-left: 1.125rem; color: var(--color-gray-500); }
.service-card__body li { margin-bottom: 0.25rem; }
.service-card__link {
  margin-top: auto;
  font-weight: 600;
  color: var(--color-maroon);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.service-card__link:hover { color: var(--color-maroon-dark); gap: var(--space-3); }

/* Feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.feature { text-align: left; }
.feature__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-button);
  background: var(--color-blue-soft);
  color: var(--color-navy);
  margin-bottom: var(--space-4);
}
.feature__icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.125rem; margin-bottom: var(--space-2); }
.feature p { color: var(--color-gray-500); }

@media (max-width: 860px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* Method card (scheduling methods) */
.method-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.method-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.method-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--color-blue-soft);
  color: var(--color-navy);
  border-radius: var(--radius-button);
  margin-bottom: var(--space-2);
}
.method-card__icon svg { width: 22px; height: 22px; }
.method-card h3 { font-size: 1.125rem; }
.method-card p { color: var(--color-gray-500); margin-bottom: var(--space-2); }
.method-card__link {
  margin-top: auto;
  font-weight: 600;
  color: var(--color-maroon);
}

/* CTA strip */
.cta-strip {
  background: var(--color-navy);
  color: var(--color-white);
}
.cta-strip__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-12) clamp(1rem, 4vw, 2rem);
}
.cta-strip h2 { color: var(--color-white); margin-bottom: var(--space-2); }
.cta-strip p { color: rgba(255,255,255,0.85); max-width: 44ch; }
.cta-strip__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; flex-shrink: 0; }
.cta-strip__actions .btn { white-space: nowrap; }
.cta-strip__phone { color: var(--color-blue); font-weight: 600; }
.cta-strip__phone:hover { color: var(--color-white); }

@media (max-width: 860px) {
  .cta-strip__inner { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* 6. Page-specific ------------------------------------------ */

/* Page hero (used by all non-home pages) */
.page-hero {
  padding: var(--space-16) 0 var(--space-10);
  background:
    linear-gradient(180deg, var(--color-blue-soft), transparent);
  text-align: left;
}
.page-hero .lead { margin-top: var(--space-3); max-width: 56ch; }

/* Services group */
.services-group {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-10);
  align-items: start;
}
.services-group__head h2 { margin-bottom: var(--space-3); }
.services-group__head p { color: var(--color-gray-500); }
.service-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-6);
}
.service-list li {
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-button);
  color: var(--color-gray-900);
}

@media (max-width: 860px) {
  .services-group { grid-template-columns: 1fr; gap: var(--space-6); }
  .service-list { grid-template-columns: 1fr; }
}

/* Method card large modifier (schedule + referral pages) */
.method-card--lg { padding: var(--space-8); gap: var(--space-3); }
.method-card__head { display: flex; align-items: center; gap: var(--space-3); }
.method-card__head .method-card__icon { margin-bottom: 0; flex-shrink: 0; }
.method-card__head h2 { margin-bottom: 0; }
.method-card--lg h2 { margin-bottom: var(--space-2); font-size: 1.5rem; }
.method-card--lg .btn { align-self: flex-start; margin-top: var(--space-2); }

/* About intro */
.about-intro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
.about-intro p { margin-bottom: var(--space-4); color: var(--color-gray-900); }
/* First paragraph reads as a lede -- same colour as the body copy around it,
   just slightly larger. It used to be the only dark paragraph in the section,
   which made the text visibly change colour after it. */
.about-intro p:first-of-type { font-size: 1.0625rem; }
.stat-list {
  list-style: none; padding: 0;
  display: grid; gap: var(--space-4);
}
.stat-list li {
  padding: var(--space-5);
  background: var(--color-blue-soft);
  border-radius: var(--radius-card);
  display: grid; gap: var(--space-1);
}
.stat-list strong { color: var(--color-navy); font-size: 1.0625rem; }
.stat-list span { color: var(--color-gray-500); }

/* Full-width group banner (breaks out of .container) */
.team-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: var(--space-6);
}
.team-banner img {
  width: 100%;
  aspect-ratio: 21 / 7;
  object-fit: cover;
  display: block;
}

/* Photo card grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.team-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.team-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.team-card__body { padding: var(--space-4); }
.team-card h3 { font-size: 1.125rem; margin-bottom: var(--space-1); }
.team-card__title { color: var(--color-gray-500); margin-bottom: var(--space-3); }
.team-card__actions { display: flex; align-items: center; gap: var(--space-4); }
.team-card__bio-toggle {
  font: inherit;
  font-weight: 600;
  color: var(--color-maroon);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.team-card__bio-toggle:hover { color: var(--color-maroon-dark); }
.team-card__email {
  display: inline-flex;
  color: var(--color-navy);
}
.team-card__email:hover { color: var(--color-maroon); }

/* Inline-expand bio panel: spans the full grid width, opens after its card */
.team-bio {
  grid-column: 1 / -1;
  background: var(--color-blue-soft);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.team-bio[hidden] { display: none; }
.team-bio h3 { font-size: 1.125rem; margin-bottom: var(--space-1); }
.team-bio__title { color: var(--color-maroon); font-weight: 600; margin-bottom: var(--space-3); }
.team-bio p { color: var(--color-gray-900); max-width: 62ch; }

@media (max-width: 860px) {
  .about-intro { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-10);
  align-items: start;
}
.contact-card {
  background: var(--color-blue-soft);
  padding: var(--space-8);
  border-radius: var(--radius-card);
}
.contact-card h2 { margin-bottom: var(--space-3); font-size: 1.5rem; }
.contact-address { font-style: normal; line-height: 1.7; margin-bottom: var(--space-5); color: var(--color-gray-900); }
.contact-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.contact-list li { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-3); }
.contact-list strong { color: var(--color-navy); }

.directory-table {
  width: 100%;
  border-collapse: collapse;
}
.directory-table th, .directory-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
}
.directory-table th {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-500);
  background: var(--color-gray-50);
}

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .directory-table th:first-child, .directory-table td:first-child { display: none; }
}

/* Prose (privacy etc.) */
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.25rem; margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose p { margin-bottom: var(--space-4); color: var(--color-gray-900); }
.prose p:first-of-type { color: var(--color-gray-500); }

/* Service list 3-column variant (Who We Serve) */
.service-list--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .service-list--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .service-list--3 { grid-template-columns: 1fr; } }
.who-we-serve__outcomes {
  max-width: 64ch;
  margin: var(--space-8) auto 0;
  text-align: center;
  color: var(--color-gray-500);
}

/* Testimonials */
.testimonial-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.testimonial {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--color-maroon);
  position: relative;
}
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: -0.25rem;
  left: var(--space-5);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-blue);
  font-family: Georgia, serif;
  opacity: 0.5;
}
.testimonial blockquote {
  margin: 0;
  color: var(--color-gray-900);
  font-size: 0.9375rem;
  line-height: 1.6;
  position: relative;
}
@media (max-width: 1024px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .testimonial-grid { grid-template-columns: 1fr; } }

/* Process steps (legal/case-prep workflow) */
.process-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.process-step {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--color-maroon);
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: var(--space-4);
}
.process-step h3 { font-size: 1.25rem; margin-bottom: var(--space-3); }
.process-step p  { color: var(--color-gray-500); }
@media (max-width: 860px) { .process-steps { grid-template-columns: 1fr; } }

.legal-contact {
  margin-top: var(--space-10);
  text-align: center;
}
.legal-contact p { color: var(--color-gray-500); margin-bottom: var(--space-4); }
.legal-contact__actions {
  display: inline-flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* Footer credentials / badges */
.site-footer__badges {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: var(--space-6) 0;
}
.site-footer__badges .container {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.site-footer__badges-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.65);
}
.site-footer__badges-list {
  list-style: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.site-footer__badges-list img {
  height: 84px;
  width: auto;
  background: var(--color-white);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-button);
  filter: none;
  transition: transform var(--transition-base);
}
.site-footer__badges-list img:hover { transform: translateY(-2px); }

/* Prominent certification badges (privacy page) */
.trust-badges {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  flex-wrap: wrap;
}
.trust-badges img {
  height: 180px;
  width: auto;
  background: var(--color-white);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

/* 7. Forms (referral) --------------------------------------- */
.form { max-width: 820px; }
.form__group {
  border: 1px solid var(--color-gray-200);
  border-top: 3px solid var(--color-maroon);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  margin-bottom: var(--space-10);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.form__group legend {
  font-weight: 700;
  color: var(--color-navy);
  font-size: 1.25rem;
  padding: 0 var(--space-2);
}
.form__hint { color: var(--color-gray-500); font-size: 0.9375rem; margin-bottom: var(--space-4); }
.form__hint kbd {
  display: inline-block;
  padding: 0.1em 0.45em;
  border: 1px solid var(--color-gray-200);
  border-bottom-width: 2px;
  border-radius: var(--radius-button);
  background: var(--color-gray-50);
  color: var(--color-navy);
  font-family: var(--font-sans);
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.4;
}
.form__subhead {
  font-weight: 600; color: var(--color-navy);
  margin: var(--space-5) 0 var(--space-2);
}
.form__row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); }
.form__field { flex: 1 1 220px; font-weight: 600; font-size: 0.9375rem; color: var(--color-gray-900); }
.form__field--full { flex-basis: 100%; }
.form__field--sm { flex: 0 1 120px; }
/* Label text + asterisk stay inline on the first line; the control sits below it. */
.form__field > input, .form__field > select, .form__field > textarea { display: block; margin-top: var(--space-1); }
.req { color: var(--color-maroon); }

.form input[type="text"], .form input[type="tel"], .form input[type="email"],
.form select, .form textarea {
  font: inherit;
  font-weight: 400;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-button);
  background: var(--color-white);
  color: var(--color-gray-900);
  width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(125,185,221,0.35);
}
.form textarea { resize: vertical; }
.form input:invalid:not(:placeholder-shown), .form select:invalid {
  /* only flagged after JS marks them; keep native subtle */
}
.form .form__field--error input,
.form .form__field--error select,
.form .form__field--error textarea { border-color: var(--color-maroon); }
/* Inline per-field validation message, shown directly under the offending control. */
.form__field-error {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-maroon);
  font-size: 0.8125rem;
  font-weight: 600;
}

.form__inline-q { font-weight: 600; font-size: 0.9375rem; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; flex: 1 1 220px; }
.form__choices { display: inline-flex; gap: var(--space-4); font-weight: 400; }
.form__choices label, .form__checks label { font-weight: 400; display: inline-flex; align-items: center; gap: var(--space-2); }
.form__row--questions { align-items: center; }

/* A follow-up field that depends on a Yes/No answer in the same question group
   (e.g. Interpreter needed? -> Language). It's nested inside the question's
   .form__inline-q and stays hidden until the answer warrants it. The wrap to a
   new line, the indent, and the arrow connector show it belongs to the question
   above rather than reading as an unrelated field. */
.form__inline-q--haschild { align-items: flex-start; }
.form__conditional {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-left: var(--space-4);
  font-weight: 600;
  font-size: 0.9375rem;
}
.form__conditional[hidden] { display: none; }
.form__conditional::before {
  content: "\21B3"; /* down-and-right arrow connector */
  color: var(--color-gray-500);
  font-weight: 400;
}
.form__conditional-label { white-space: nowrap; }
.form__conditional > input { margin-top: 0; flex: 1 1 160px; }

.form__checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-4);
  font-size: 0.9375rem;
  margin-bottom: var(--space-4);
}

.form input[type="file"] {
  font: inherit;
  padding: var(--space-3);
  border: 1px dashed var(--color-gray-200);
  border-radius: var(--radius-button);
  width: 100%;
  background: var(--color-gray-50);
}
.form__filelist { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.form__filelist li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-blue-soft);
  border-radius: var(--radius-button);
  font-size: 0.875rem;
}
.form__filelist button {
  color: var(--color-maroon); font-weight: 600; font-size: 0.875rem;
}

.form__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
/* display:flex above would otherwise override the [hidden] attribute the submit
   handler sets on success, leaving the buttons visible on the confirmation view. */
.form__actions[hidden] { display: none; }

.form__errors {
  background: #fdecea; border: 1px solid var(--color-maroon);
  color: var(--color-maroon-dark); border-radius: var(--radius-button);
  padding: var(--space-4); margin-bottom: var(--space-4);
}
.form__errors ul { margin: var(--space-2) 0 0; }

.form__success {
  background: var(--color-blue-soft);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  text-align: center;
}

/* Honeypot — kept in the layout flow but invisible/untabbable to humans */
.form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* Rich-text (Quill) editors */
.form__richtext-label { display: block; margin-bottom: var(--space-1); }
.form__richtext { background: var(--color-white); }
.form__richtext:empty { display: none; }
/* Quill mounts on the #editor element itself (it becomes .ql-container) and
   inserts .ql-toolbar as a preceding sibling — so target the toolbar through
   the field wrapper and the container as a compound selector on one element. */
.form__field .ql-toolbar.ql-snow,
.form__richtext.ql-container.ql-snow { border-color: var(--color-gray-200); }
.form__field .ql-toolbar.ql-snow {
  border-top-left-radius: var(--radius-button);
  border-top-right-radius: var(--radius-button);
}
.form__richtext.ql-container.ql-snow {
  border-bottom-left-radius: var(--radius-button);
  border-bottom-right-radius: var(--radius-button);
  /* Override Quill's default height:100%, which overflows and overlaps the next
     field when the editor sits inside a flex .form__row. */
  height: auto;
  min-height: 8rem;
  font-family: var(--font-sans);
  font-size: 1rem;
}
.form__field--error .ql-toolbar.ql-snow,
.form__field--error .ql-container.ql-snow { border-color: var(--color-maroon); }

@media (max-width: 540px) {
  .form__checks { grid-template-columns: 1fr; }
  .form__field--sm { flex-basis: 100%; }
}