/* ============================================================
   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);
}
/* display:inline-flex above would otherwise override the [hidden] attribute, so a
   button JS retires (e.g. "+Add more files") would stay on screen. */
.btn[hidden] { display: none; }

.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; }

/* Temporary launch banner. Delete this block together with
   assets/js/welcome-banner.js when the run ends — see that file's header. */
.site-banner {
  background: var(--color-navy);
  color: var(--color-white);
}

.site-banner__text {
  /* Set here, not just on .site-banner: the bare `p` rule above matches this
     element directly and so beats any colour inherited from the parent.
     Same reason .site-footer__tagline sets its own colour. */
  color: var(--color-white);
  margin: 0;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
}

.site-banner__link {
  color: var(--color-white);
  text-decoration: underline;
  white-space: nowrap;
}

/* 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; }
/* With the hero hidden (post-submit) the next section is flush to the sticky
   header, so give the success panel the spacing the hero used to provide. */
.page-hero[hidden] + .section--flush-top { padding-top: var(--space-16); }

/* 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 h3 { font-size: 1.0625rem; margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose p { margin-bottom: var(--space-4); color: var(--color-gray-900); }
.prose p:first-of-type { color: var(--color-gray-500); }
.prose ul { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
.prose li { margin-bottom: var(--space-2); }
.prose strong { color: var(--color-navy); }

/* Policy tables. Wrapped in .table-scroll so a wide table scrolls on its own
   instead of pushing the page sideways on small screens. */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 var(--space-6);
  -webkit-overflow-scrolling: touch;
}
.policy-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin-bottom: var(--space-6);
}
.table-scroll .policy-table { margin-bottom: 0; }
.policy-table th, .policy-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
}
.policy-table thead th {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-500);
  background: var(--color-gray-50);
}
.policy-table tbody th { color: var(--color-navy); font-weight: 600; }
/* Two-column label/value table (contact details) — narrow enough to never scroll. */
.policy-table--kv { min-width: 0; }
.policy-table--kv tbody th { width: 9rem; }

/* 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);
}
/* Attachment slots: one file per row, revealed five at a time. */
.form__fileslots { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.form__fileslot {
  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;
}
/* display:flex above would otherwise override the [hidden] attribute on the slots
   that referral.js keeps back until "More" is clicked. */
.form__fileslot[hidden] { display: none; }
.form__fileslot-label {
  display: flex; align-items: center; gap: var(--space-3);
  flex: 1 1 auto; min-width: 0;
  font-weight: 600;
}
.form__fileslot-label input[type="file"] { font-weight: 400; min-width: 0; }
/* Keep "File 1" on one line when the row squeezes the label against the input. */
.form__fileslot-name { white-space: nowrap; flex: 0 0 auto; }
.form__fileslot-clear {
  color: var(--color-maroon); font-weight: 600; font-size: 0.875rem;
  flex: 0 0 auto;
}
.form__more { margin-top: var(--space-3); }

.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;
}

/* The printable copy offered after a successful submit. The document is rendered by
   the API and shown in an iframe, so its own styles apply inside it and printing it
   never inherits this page's layout. */
.form__receipt {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-gray-200);
  padding-top: var(--space-6);
}

.form__receipt-intro {
  margin: 0 0 var(--space-4);
}

.form__receipt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.form__receipt-view {
  display: block;
  width: 100%;
  height: 60vh;
  min-height: 320px;
  margin-top: var(--space-6);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-card);
  background: var(--color-white);
}

.form__receipt-view[hidden] { display: none; }

/* 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%; }
}