/* ==========================================================================
   Suffolk Injury Clinic — section styles

   Lengths are the Figma pixels expressed in rem (1rem = 16px). The root font
   size in style.css scales the whole 1600px frame down to the render width,
   so every number here still reads as the number in the design.
   ========================================================================== */

/* ==========================================================================
   Home — 1. Hero
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* The orange rule under the header is artwork with the line of copy on top.
   It sits over the hero photo rather than above it, so the hero stays exactly
   the height of the 1600x792 artwork. */
.hero__announce {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 1.4375rem;
}

.hero__announce img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__announce p {
  position: relative;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4375rem;
  text-align: center;
  color: var(--navy);
}

.hero__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 49.5rem;
  padding-top: 8.1875rem;
}

.hero__content { width: 46.25rem; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.9375rem;
  line-height: 1.15;
  color: var(--navy);
}

.hero__sub {
  margin-top: 1.1875rem;
  font-size: 2.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
}

/* the Figma sets the orange half a touch further out than a plain space */
.hero__sub .text-orange { margin-left: 0.3125rem; }

/* the orange accent lines all carry the brand gradient (sampled in the Figma) */
.text-orange,
.service-card__tag,
.cta-bar__title span,
.injury-cta__tag,
.how__tag,
.ready__tag,
.hero__injuries h2,
.notice__code,
.notice__tag,
.why-card--ours h3,
.insurance-card__more span {
  background: var(--orange-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero__lead {
  max-width: 43.75rem;
  margin-top: 1.625rem;
  font-size: 1.09375rem;
  font-weight: 500;
  line-height: 1.625rem;
  color: var(--ink);
}

/* the Figma scales the logo strip non-uniformly, so both axes are pinned */
.hero__partners { width: 36.1875rem; height: 4.5rem; margin-top: 2.4375rem; }

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.8125rem;
}

/* both hero buttons are fixed widths in the Figma, not content-sized */
.hero__actions .btn--orange  { width: 17rem; }
.hero__actions .btn--outline { width: 15.625rem; }

.hero__trust {
  display: flex;
  gap: 1.9375rem;
  margin-top: 3.5rem;
}

.hero__trust li {
  display: flex;
  width: 11.1875rem;
  flex-direction: column;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  color: var(--navy);
}

/* see-through over the hero artwork — only the ring is drawn */
/* 64px across with a 2.5px ring in the slice. The slice measures the ring at
   about rgb(86,86,88); this sits a little lighter than that on purpose. */
.hero__trust-icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: 0.15625rem solid rgba(30, 30, 32, 0.34);
  border-radius: 50%;
  background: transparent;
}

.hero__trust-icon svg { width: 1.625rem; height: 1.625rem; }

/* --- Floating "Common Injuries" panel ------------------------------------
   A glass panel: the hero artwork stays visible through it, with the exported
   navy-to-orange gradient laid over at low opacity. */
.hero__injuries {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 20.8125rem;
  margin: 20rem 0 0 auto;
  padding: 1.0625rem 1.25rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.22);
  border-radius: 1.25rem;
  /* the panel reads about rgb(55,68,78) in the slice, against a photo that is
     rgb(12,30,44) to rgb(20,38,52) underneath — 0.14 is the veil that lands
     there; 0.08 left it noticeably darker than the design */
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
  color: var(--white);
}

.hero__injuries-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
}

.hero__injuries h2 {
  margin-bottom: 0.8125rem;
  font-size: 1.125rem;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hero__injuries li {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 2.125rem;
}

.hero__injuries li img { width: 1.3125rem; height: 1.3125rem; flex: none; }

.hero__badge {
  position: absolute;
  right: 1.25rem;
  bottom: 0.6875rem;
  width: 8.0625rem;
  height: auto;
}

/* ==========================================================================
   Home — 2. Auto accident treatment + insurance
   ========================================================================== */
.intro-cards { padding-top: 3.3125rem; }

.intro-cards__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.125rem;
}

/* --- Treatment card ------------------------------------------------------ */
.treat-card {
  display: grid;
  /* the row is pinned so the tall source image cannot stretch the card */
  grid-template-columns: 23.375rem 1fr;
  grid-template-rows: 19.4375rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--navy);
}

.treat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the artwork carries rounded transparent corners — without a light ground
     behind it the navy card shows through as blue notches */
  background: #F6F6F6;
}

.treat-card__body {
  padding: 3.0625rem 2rem 0;
  color: var(--white);
}

.treat-card__body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1.11;
}

.treat-card__body p {
  margin: 0.6875rem 0 1.1875rem;
  max-width: 17.5rem;
  font-size: 1.03125rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}

/* --- Insurance card ------------------------------------------------------ */
.insurance-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.875rem 2rem 0;
  border: 0.0625rem solid var(--line);
  border-radius: 0.75rem;
  background: var(--white);
}

.insurance-card h2 {
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1.2;
  color: var(--navy);
}

.insurance-card__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
}

/* Each logo carries a different amount of empty pixels around the mark, so
   the width is set per logo to land the ink on the Figma measurement. */
.insurance-card__logos img { width: auto; height: auto; }

.insurance-card__logos img[alt="GEICO"]      { width: 10.25rem; }
.insurance-card__logos img[alt="Allstate"]   { width: 10.625rem; }
.insurance-card__logos img[alt="State Farm"] { width: 11.0625rem; }
.insurance-card__logos img[alt="Progressive"]{ width: 12.125rem; }

.insurance-card__logos--last { margin-top: 0.125rem; }

.insurance-card__more {
  margin-top: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--orange);
}

.insurance-card__more span { border-bottom: 0.0625rem solid var(--orange); padding-bottom: 0.125rem; }

/* ==========================================================================
   Shared — "In Pain? Don't Wait!" strip
   ========================================================================== */
.cta-bar { padding: 6.375rem 0 3.125rem; }

.cta-bar__inner {
  display: flex;
  align-items: center;
  gap: 3.875rem;
  height: 7.8125rem;
  padding: 0 2.25rem 0 3.75rem;
  border-radius: 0.75rem;
  background: var(--navy);
}

.cta-bar__title {
  flex: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.15625rem;
  color: var(--white);
}

.cta-bar__text {
  font-size: 0.9375rem;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
}

.cta-bar__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}

.cta-bar__actions .btn--orange { width: 16.125rem; }
.cta-bar__actions .btn--ghost  { width: 16.25rem; }

/* ==========================================================================
   Home — 4. The Care You Need, All in One Place
   ========================================================================== */
.services { padding-top: 5.5rem; }

.services__title { margin-bottom: 5.125rem; text-align: center; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1.8125rem;
  border-radius: 0.75rem;
  background: var(--gray-bg);
  text-align: center;
}

.service-card img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.service-card h3 {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1.2;
  color: var(--navy);
}

.service-card__tag {
  margin-top: 0.5625rem;
  padding: 0 0.5rem;
  font-size: 1.03125rem;
  font-weight: 700;
}

.service-card__text {
  margin: 0.75rem 1.25rem 0;
  font-size: 1.03125rem;
  line-height: 1.5rem;
  color: var(--ink);
}

.service-card .btn--link { margin-top: 2rem; }

/* ==========================================================================
   Home — 5. Why One Practice Beats Four Doctors
   ========================================================================== */
.why {
  margin-top: 6.4375rem;
  padding: 5rem 0 5.9375rem;
  background: var(--gray-bg);
}

.why__inner {
  display: grid;
  grid-template-columns: 49.9375rem 37.625rem;
  gap: 4.4375rem;
  align-items: start;
}

/* 41.25rem is chosen, not arbitrary: the first line measures 39.9rem and
   adding the next word would take it to 42.4rem, so the break lands after
   "team" exactly as the Figma shows. */
.why__lead {
  max-width: 41.25rem;
  margin-top: 1.75rem;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.625rem;
  color: var(--ink);
}

.why__cards {
  display: grid;
  grid-template-columns: 22.5rem 22.5rem;
  gap: 0.625rem;
  margin-top: 3rem;
}

.why-card {
  padding: 1.8125rem 1.5rem 2.25rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.75rem;
  background: var(--gray-card);
}

.why-card--ours {
  border-color: rgba(247, 117, 7, 0.45);
  background: var(--cream);
}

.why-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.why-card__icon { width: 2.875rem; height: 2.875rem; }

.why-card__mark { width: 2.625rem; height: auto; }

.why-card h3 {
  margin: 0.96875rem 0 0.40625rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5625rem;
  line-height: 1.2;
}

/* "Traditional model" stays navy; "Our model" keeps the shared gradient */
.why-card:not(.why-card--ours) h3 { color: var(--navy); }

.why-card p {
  max-width: 17.8125rem;
  font-size: 1.03125rem;
  line-height: 1.625rem;
  color: var(--ink);
}

.why__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3.125rem;
}

.why__img {
  width: 100%;
  margin-top: 0.4375rem;
  height: 41.25rem;
  object-fit: cover;
  border-radius: 0.75rem;
}

/* ==========================================================================
   Home — 6. Common Car Accident Injuries
   ========================================================================== */
.injuries { padding: 7.125rem 0 0; }

.injuries__inner {
  display: grid;
  grid-template-columns: 1fr 25.5rem;
  gap: 3rem;
  align-items: start;
}

.injuries__title { margin-bottom: 3.75rem; text-align: center; }

.injuries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.injury { text-align: center; }

.injury__icon { display: block; width: 11.75rem; margin: 0 auto; }

.injury h3 {
  margin: 1.9375rem 0 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--navy);
}

.injury p {
  max-width: 18rem;
  margin: 0 auto;
  font-size: 1.03125rem;
  line-height: 1.625rem;
  color: var(--ink);
}

.injuries__all { margin: 3.5625rem auto 0; display: flex; width: fit-content; }

/* --- Side call-to-action card -------------------------------------------- */
.injury-cta {
  min-height: 36.125rem;
  padding: 2.25rem 2rem 2.5rem;
  border-radius: 0.75rem;
  background: var(--navy);
  text-align: center;
  color: var(--white);
  /* the orange rule sits on the bottom edge of the card */
  position: relative;
  overflow: hidden;
}

.injury-cta::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7.25rem;
  height: 0.25rem;
  transform: translateX(-50%);
  background: var(--orange-grad);
}

.injury-cta__badge { width: 9.375rem; margin: 0 auto 1.5rem; }

.injury-cta h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.0625rem;
  line-height: 1.25;
}

.injury-cta__tag {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 700;
}

.injury-cta__text {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.injury-cta .btn { margin-top: 1.75rem; }

/* ==========================================================================
   Home — 7. Ready To Start Feeling Better
   ========================================================================== */
.ready { padding-top: 6.25rem; }

.ready__inner {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}

.ready__img { width: 100%; height: auto; }

.ready__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 44rem;
  height: 100%;
  padding: 3.25rem 0 0 2.75rem;
  color: var(--white);
}

.ready__content h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.125rem;
  line-height: 1.2;
}

.ready__tag {
  margin-top: 0.75rem;
  font-size: 1.3125rem;
  font-weight: 700;
}

.ready__text {
  max-width: 35rem;
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}

.ready__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* ==========================================================================
   Home — 8. Real Patients. Real Results.
   ========================================================================== */
.reviews { padding-top: 6.25rem; }

.reviews__title { margin-bottom: 2.75rem; }

.reviews__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}


/* --- Reviews carousel ----------------------------------------------------
   main.js wraps the track and moves it; the rules below only apply once that
   wrapper exists, so with scripts off the four cards stay in the row above.
   ------------------------------------------------------------------------ */
.reviews__carousel { overflow: hidden; }

.reviews__carousel .reviews__track {
  display: flex;
  gap: 1rem;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* the width of each card is written in by main.js from the number on show */
.reviews__carousel .review { flex: none; }

/* the snap between sets, and a drag, must not be animated */
.reviews__carousel .reviews__track.is-jumping { transition: none; }

/* the row can be dragged; pan-y leaves a vertical swipe to the page */
.reviews__carousel { cursor: grab; touch-action: pan-y; }
.reviews__carousel.is-dragging { cursor: grabbing; user-select: none; }
.reviews__carousel img { -webkit-user-drag: none; user-select: none; }

/* the card at the front of the row lifts out of the strip a little */
.reviews__carousel .review.is-active {
  transform: translateY(-0.25rem);
  background: var(--white);
  box-shadow: 0 0.75rem 1.75rem rgba(1, 30, 60, 0.12);
}

.review {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: var(--gray-bg);
}

.review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.review__stars { display: flex; gap: 0.1875rem; }

.review__stars svg { width: 1rem; height: 1rem; }

.review__source { width: 1.625rem; height: 1.625rem; }

.review__quote {
  min-height: 7.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink);
}

.review__person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.review__person img { width: 2.5rem; height: 2.5rem; border-radius: 50%; }

.review__person strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy);
}

.review__person span {
  font-size: 0.8125rem;
  color: rgba(30, 30, 32, 0.7);
}

/* ==========================================================================
   Home — 9. How It Works
   ========================================================================== */
.how {
  margin-top: 6.25rem;
  padding: 5.5rem 0 5.75rem;
  background: var(--gray-bg);
}

.how__title { text-align: center; }

.how__tag {
  margin-top: 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
}

.how__lead {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  text-align: center;
  color: var(--ink);
}

.how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.75rem;
}

.how-step {
  padding: 2.25rem 2rem 2.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.75rem;
  background: transparent;
  text-align: center;
}

/* the numbered badge is part of the exported artwork, so the icon is placed
   whole rather than composed here */
.how-step__icon {
  display: block;
  width: 9rem;
  margin: 0 auto 1.25rem;
}

.how-step__icon img { width: 100%; height: auto; }

.how-step h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--navy);
}

.how-step p {
  margin-top: 0.875rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}

/* The last strip on the page sits directly above the footer */
.how + .cta-bar { padding: 3.5rem 0 3.125rem; }


/* The services grid on its own page sits closer to its heading than on the
   home page, where a full-width strip precedes it. */
.services--page { padding-top: 6rem; }

.services--page .services__title { margin-bottom: 2.625rem; }

/* A service hero carries a two-line strapline, so its copy starts higher. */
.hero--plain.hero--service .hero__inner { padding-top: 12.9375rem; }

.hero__sub--two { line-height: 1.636; }

.hero--plain.hero--service .hero__sub     { margin-top: 0.6875rem; }
/* every service page caps its lead lines at about 595px in the Figma, and
   39rem is the box that produces those breaks — on Chiropractic Care it puts
   the turn after "improve", which 46.25rem was too wide to do. */
.hero--plain.hero--service .hero__lead    { max-width: 39rem; margin-top: 1.625rem; }
.hero--plain.hero--service .hero__actions { margin-top: 3.375rem; }

.people__lead + .people__lead { margin-top: 1.25rem; }

/* the FAQ list runs to the bottom of its section; the strip follows */
.faq + .cta-bar { padding-top: 7.0625rem; }

/* =====================================================================
   Service pages — Common Problems We Help With

   Same card as the home page's injuries grid, four across, under a heading
   that sits left rather than centred.
   ========================================================================== */
.problems { padding: 3.9375rem 0 6.25rem; }

.problems__title { margin-bottom: 3.625rem; }

/* on a service page the grey band follows the problems grid directly */
.problems + .people { margin-top: 0; }

/* the heading is allowed to run wider than the copy beneath it */
/* The heading "A Clearer Path Starts With an Evaluation." needs 856px at 50px
   and the Figma keeps it on one line, with the photo starting at 920 and the
   container ending at 1536 — so the copy column is 858 and the photo 614,
   which fills the container with no gap between them. */
.people--service .people__inner { grid-template-columns: 53.625rem 38.375rem; gap: 0; }

.people--service .people__lead,
.people--service .expect { max-width: 45.3125rem; }

.problems__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.problems .injury h3 { margin: 1.125rem 0 1.25rem; }

.problems .injury p { max-width: 17.5rem; }

/* ==========================================================================
   Service pages — Frequently Asked Questions

   A plain <details> list: open by default on the first item, matching the
   Figma, and it still works with JavaScript off.
   ========================================================================== */
.faq { padding: 5.875rem 0 0; }

.faq__title { margin-bottom: 4.1875rem; text-align: center; }

.faq__list {
  width: 77.5rem;
  max-width: 100%;
  margin: 0 auto;
}

.faq__item {
  border: 0.0625rem solid var(--navy);
  border-radius: 0.75rem;
  background: var(--white);
}

.faq__item + .faq__item { margin-top: 1.75rem; }

/* the open panel is the brand gradient, white type, no border */
.faq__item[open] {
  border-color: transparent;
  background: var(--orange-grad);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4375rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

/* Safari draws its own triangle without this */
.faq__q::-webkit-details-marker { display: none; }

.faq__item[open] .faq__q { color: var(--white); padding-bottom: 0.9375rem; }

.faq__icon { width: 1.875rem; height: 1.875rem; flex: none; }

/* one icon each — the closed sign hides once the panel opens, and vice versa */
.faq__item[open] .faq__icon--plus,
.faq__item:not([open]) .faq__icon--minus { display: none; }

.faq__a {
  margin: 0 1.5rem;
  padding: 0.875rem 0 1.375rem;
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.55);
  font-size: 1.0625rem;
  line-height: 1.625rem;
  color: var(--white);
}

/* ==========================================================================
   Service pages — the expectations card carries running copy, not a list
   ========================================================================== */
.expect__text {
  font-size: 1.0625rem;
  line-height: 1.625rem;
  color: var(--ink);
}

.expect__text + .expect__text { margin-top: 1.25rem; }

.expect__closer {
  margin-top: 1.375rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}

/* =====================================================================
   Inner pages — hero without the floating panel

   The inner heroes reuse the home hero wholesale; they only carry the copy
   column, and it sits lower in the frame because there is less of it.
   ========================================================================== */
.hero--plain .hero__inner { padding-top: 15.6875rem; }

.hero--plain .hero__content { width: 46.25rem; }

.hero--plain .hero__lead    { max-width: 46.25rem; margin-top: 1.28125rem; }
.hero--plain .hero__actions { margin-top: 3.375rem; }

/* ==========================================================================
   About — More Than Treatment (artwork + navy panel)
   ========================================================================== */
.split { padding-top: 4.8125rem; }

/* No fixed row height: the panel is 595px on Chiropractic Care, 530 on both
   Physical Therapy and Acupuncture and 441 on Medical Evaluation in the Figma,
   so the height follows the copy and the photo stretches to match. */
.split__inner {
  position: relative;
  display: grid;
  grid-template-columns: 47.1875rem 44.8125rem;
}

/* Taken out of the row so it cannot set the height: left in the grid the
   photo sized the block by its own aspect ratio, which is what left a stretch
   of empty navy under the copy. Now the panel decides, and the photo covers
   whatever that comes to. */
.split__img {
  position: absolute;
  top: 0;
  bottom: 0;
  /* the container pads by a gutter and an absolute box is placed against the
     padding edge, so left has to match or the photo sits a gutter to the left
     and opens a gap before the panel */
  left: var(--gutter);
  width: 47.1875rem;
  height: 100%;
  object-fit: cover;
  border-radius: 1.25rem 0 0 1.25rem;
}

/* The Figma sets the block in from the panel edge by 47px at the sides, 61 at
   the top and 58 at the foot — the bottom padding is what was missing, which
   is why the copy used to float above a stretch of empty navy. The 20px
   corner is measured off the panel edge in the slice. */
.split__panel {
  padding: 3.8125rem 2.9375rem 3.625rem;
  grid-column: 2;
  border-radius: 0 1.25rem 1.25rem 0;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.9);
}

/* the Figma leaves 29px between the title box and the first line of copy,
   and 26px between paragraphs — both measured off the ink in the slice */
.split__title {
  margin-bottom: 1.8125rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.125rem;
  line-height: 1.08;
  color: var(--white);
}

.split__panel p {
  font-size: 1.09375rem;
  line-height: 1.625rem;
}

.split__panel p + p { margin-top: 1.625rem; }

/* ==========================================================================
   Shared — the insurance card on its own, four logos across
   ========================================================================== */
.insurance { padding-top: 6.125rem; }

.insurance-card--wide { padding: 1.875rem 2rem 1.875rem; }

.insurance-card--wide h2 { margin-bottom: 1.75rem; }

/* The wide card has the whole container to work with, so the logos are set to
   the Figma's own ink widths rather than the smaller ones the half-width card
   on the home page uses. Each width is the ink measurement divided by that
   file's ink-to-canvas ratio, since every logo carries a different amount of
   transparent margin. Gap 8rem lands the ink gaps on the measured 145px. */
.insurance-card--wide .insurance-card__logos { gap: 8rem; }

.insurance-card--wide .insurance-card__logos img[alt="GEICO"]       { width: 12.0625rem; }
.insurance-card--wide .insurance-card__logos img[alt="Allstate"]    { width: 12.6875rem; }
.insurance-card--wide .insurance-card__logos img[alt="State Farm"]  { width: 13.6875rem; }
.insurance-card--wide .insurance-card__logos img[alt="Progressive"] { width: 14.1875rem; }

/* ==========================================================================
   About — We Treat People, Not Just Injuries
   ========================================================================== */
.people {
  margin-top: 6.5625rem;
  padding: 5.75rem 0 6.375rem;
  background: var(--gray-bg);
}

.people__inner {
  display: grid;
  grid-template-columns: 45.3125rem 37.8125rem;
  gap: 8.875rem;
  align-items: start;
}

.people__lead {
  margin-top: 1.4375rem;
  font-size: 1.09375rem;
  line-height: 1.625rem;
  color: var(--ink);
}

.people__img {
  width: 100%;
  height: 44.3125rem;
  object-fit: cover;
  border-radius: 0.75rem;
}

/* --- What You Can Expect From Us ----------------------------------------- */
.expect {
  margin-top: 2.3125rem;
  padding: 2.125rem 1.875rem 3.3125rem;
  border: 0.0625rem solid rgba(247, 117, 7, 0.45);
  border-radius: 0.75rem;
  background: var(--cream);
}

.expect__mark { height: 3.25rem; width: auto; }

.expect__title {
  margin: 1.15625rem 0 0.28125rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5625rem;
  line-height: 1.2;
}

.expect__list dt {
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--ink);
}

.expect__list dd {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5rem;
  color: var(--ink);
}

.expect__list dd + dt { margin-top: 1.28125rem; }
/* ==========================================================================
   Responsive
   ========================================================================== */

/* Above 1200px the whole 1600px frame scales with the root font size, so the
   desktop layout never breaks up. Below that it re-flows in three steps:
   1200 (tablet landscape) -> 900 (tablet portrait) -> 600 (phone).

   Everything pinned to a Figma pixel on desktop — the fixed button widths, the
   two-column cards, the fixed grid rows — is released here. */

/* ==========================================================================
   <= 1200px — tablet landscape
   ========================================================================== */
@media (max-width: 1200px) {

  /* --- Hero -------------------------------------------------------------- */
  /* The strapline no longer fits on one 23px line, so the bar joins the flow.
     It stays position:relative — the artwork inside is absolutely placed, and
     with a static parent it would fill the whole hero instead. */
  .hero__announce {
    position: relative;
    height: auto;
    padding: 0.5rem var(--gutter);
  }

  /* a gradient, so stretching it to the taller bar is fine */
  .hero__announce img { object-fit: fill; }

  .hero__announce p { font-size: 0.8125rem; line-height: 1.4; }

  /* .hero__inner is also the .container, so the gutter has to be repeated
     here — a shorthand with 0 sides would strip it */
  .hero__inner {
    display: block;
    min-height: 0;
    padding: 3.25rem var(--gutter) 3rem;
  }

  .hero__content { width: 100%; }

  .hero__title { font-size: 2.75rem; }
  .hero__sub { font-size: 1.625rem; }

  .hero__lead {
    max-width: 34rem;
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.7;
  }

  .hero__partners {
    width: 100%;
    max-width: 28rem;
    height: auto;
    margin-top: 1.75rem;
  }

  .hero__actions { flex-wrap: wrap; margin-top: 1.75rem; }
  .hero__actions .btn--orange,
  .hero__actions .btn--outline { width: auto; }

  .hero__trust { flex-wrap: wrap; gap: 1.5rem 2rem; margin-top: 2.5rem; }
  .hero__trust li { width: auto; }

  /* On desktop the panel reads dark because the photograph behind it is dark,
     so it keeps the Figma glass untouched — no tint at all. Once the layout
     re-flows it sits over the pale part of the artwork, so a light tint goes
     in: a touch on tablet, lighter still on a phone. */
  .hero__injuries {
    width: 100%;
    max-width: 26rem;
    margin: 2.5rem 0 0;
    background: rgba(3, 24, 44, 0.3);
  }

  .hero__badge { position: static; margin: 1.25rem 0 0 auto; }

  /* --- Treatment + insurance --------------------------------------------- */
  .intro-cards { padding-top: 2.5rem; }
  .intro-cards__grid { grid-template-columns: 1fr; }

  .treat-card {
    grid-template-columns: 40% 1fr;
    grid-template-rows: auto;
    min-height: 17rem;
  }

  .treat-card__body { padding: 2rem 1.75rem; }
  .treat-card__body h2 { font-size: 1.875rem; }
  .treat-card__body p { max-width: none; }

  .insurance-card { padding: 2rem 1.5rem; }
  .insurance-card h2 { font-size: 1.75rem; }
  .insurance-card__logos { flex-wrap: wrap; gap: 1.5rem 2.5rem; }
  .insurance-card__logos img { width: auto; max-width: 8.75rem; }
  .insurance-card__logos--last { margin-top: 1.5rem; }

  /* --- CTA strip --------------------------------------------------------- */
  .cta-bar { padding-top: 3.5rem; }

  .cta-bar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    height: auto;
    padding: 1.75rem;
  }

  .cta-bar__title { font-size: 1.625rem; }
  .cta-bar__text { white-space: normal; }

  .cta-bar__actions { flex-wrap: wrap; margin: 0.75rem 0 0; }
  .cta-bar__actions .btn--orange,
  .cta-bar__actions .btn--ghost { width: auto; }

  /* --- Services ---------------------------------------------------------- */
  .services { padding-top: 3.5rem; }
  .services__title { margin-bottom: 2.25rem; }
  .services__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .service-card h3 { font-size: 1.75rem; }
  .service-card__tag { font-size: 1rem; }

  /* --- Why --------------------------------------------------------------- */
  .why { margin-top: 3.5rem; padding: 3.25rem 0 3.5rem; }
  .why__inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .why__lead { max-width: none; margin-top: 1rem; }
  .why__cards { grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
  .why-card p { max-width: none; }
  .why__actions { flex-wrap: wrap; margin-top: 2rem; }
  /* the artwork leads on a narrow screen — the copy block is long */
  .why__img { order: -1; height: 20rem; margin-top: 0; }

  /* --- Injuries ---------------------------------------------------------- */
  .injuries { padding-top: 3.5rem; }
  .injuries__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .injuries__title { margin-bottom: 2.25rem; }
  .injuries__grid { gap: 1.25rem; }
  .injury__icon { width: 8.75rem; }
  .injury h3 { margin: 1.25rem 0 0.625rem; font-size: 1.5rem; }
  .injuries__all { margin-top: 2.25rem; }
  .injury-cta { min-height: 0; }
  .injury-cta h3 { font-size: 1.75rem; }

  /* --- Ready ------------------------------------------------------------- */
  .ready { padding-top: 3.5rem; }
  .ready__inner { background: var(--navy); }
  .ready__img { display: none; }

  .ready__content {
    position: static;
    width: 100%;
    height: auto;
    padding: 2.25rem;
  }

  .ready__content h2 { font-size: 1.875rem; }
  .ready__text { max-width: none; }
  .ready__actions { flex-wrap: wrap; }

  /* --- Reviews ----------------------------------------------------------- */
  .reviews { padding-top: 3.5rem; }
  .reviews__title { margin-bottom: 1.75rem; font-size: 1.875rem; }
  .reviews__track { grid-template-columns: repeat(2, 1fr); }
  .review__quote { min-height: 0; }

  /* --- How --------------------------------------------------------------- */
  .how { margin-top: 3.5rem; padding: 3.25rem 0 3.5rem; }
  .how__title { font-size: 1.875rem; }
  .how__tag { font-size: 1rem; }
  .how__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
  .how-step { padding: 1.75rem 1.25rem 2rem; }
  .how-step h3 { font-size: 1.25rem; }
  .how + .cta-bar { padding: 2.5rem 0 3rem; }
}

/* ==========================================================================
   <= 900px — tablet portrait
   ========================================================================== */
@media (max-width: 900px) {
  /* the artwork carries its own light wash down the left third only; once the
     copy sits over the photograph itself it needs a scrim to stay readable */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.72) 100%);
  }

  .hero__inner { z-index: 1; }

  /* keep the subject in frame rather than the empty right edge */
  .hero__bg { object-position: 68% top; }

  .hero__title { font-size: 2.25rem; }
  .hero__sub { font-size: 1.375rem; }

  .treat-card { grid-template-columns: 1fr; min-height: 0; }
  .treat-card__img { height: 15rem; }

  .why__cards { grid-template-columns: 1fr; }
  .why__img { height: 17rem; }

  .injuries__grid { grid-template-columns: 1fr 1fr; }
  .injury p { max-width: none; }

  /* three cards in a two-up grid leave the third hanging in the first column —
     let it span the row and centre instead */
  .injury:last-child { grid-column: 1 / -1; }
  .injury:last-child p { max-width: 22rem; margin-left: auto; margin-right: auto; }

  .how__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   <= 600px — phone
   ========================================================================== */
@media (max-width: 600px) {
  .hero__title { font-size: 1.875rem; }
  .hero__sub { font-size: 1.1875rem; }
  .hero__sub .text-orange { margin-left: 0; }
  .hero__lead { font-size: 0.9375rem; }
  .hero__partners { max-width: 100%; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  /* icon beside the label rather than above it — three stacked columns of
     centred text read as a broken list on a narrow screen */
  .hero__trust { flex-direction: column; gap: 1rem; }
  .hero__trust li { flex-direction: row; gap: 0.75rem; text-align: left; }
  .hero__trust-icon { width: 2.75rem; height: 2.75rem; }
  .hero__trust-icon svg { width: 1.125rem; height: 1.125rem; }

  /* lighter again on a phone */
  .hero__injuries {
    max-width: none;
    padding: 1.25rem;
    background: rgba(3, 24, 44, 0.22);
  }
  .hero__badge { width: 7rem; }

  .treat-card__img { height: 12rem; }
  .treat-card__body { padding: 1.75rem 1.25rem; }
  .treat-card__body h2 { font-size: 1.625rem; }
  .treat-card .btn { width: 100%; }

  .insurance-card__logos { gap: 1.25rem 2rem; }
  .insurance-card__logos img { max-width: 7.5rem; }

  .cta-bar__inner { padding: 1.5rem 1.25rem; }
  .cta-bar__title { font-size: 1.4375rem; }
  .cta-bar__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .cta-bar__actions .btn { width: 100%; }

  .services__grid { grid-template-columns: 1fr; }
  .service-card h3 { font-size: 1.5rem; }
  .service-card__tag { padding: 0; font-size: 0.9375rem; }

  .why__actions { flex-direction: column; align-items: stretch; }
  .why__actions .btn { width: 100%; }
  .why__img { height: 14rem; }

  .injuries__grid { grid-template-columns: 1fr; }
  .injury__icon { width: 7.5rem; }
  .injuries__all { width: 100%; justify-content: center; }

  .ready__content { padding: 1.75rem 1.25rem; }
  .ready__content h2 { font-size: 1.625rem; }
  .ready__actions { flex-direction: column; align-items: stretch; }
  .ready__actions .btn { width: 100%; }

  .reviews__track { grid-template-columns: 1fr; }

  .how-step { padding: 1.5rem 1.25rem 1.75rem; }
  .how-step__icon { width: 7rem; }
}

/* ==========================================================================
   <= 600px — centred layout

   On a phone every block is full width, so left-ragged short copy reads as
   accidental. Headings, straplines, buttons and the card blocks centre; the
   long paragraphs and the checklist stay left-aligned, because centred body
   copy is harder to read and a centred list loses its bullet edge.
   ========================================================================== */
@media (max-width: 600px) {

  /* --- Hero -------------------------------------------------------------- */
  .hero__content { text-align: center; }

  .hero__lead,
  .hero__partners { margin-left: auto; margin-right: auto; }

  /* The reassurance rows centre as a block, not row by row: the labels are
     different lengths, so centring each one would stagger the icons. Shrink
     the list to its widest row and auto-margin that. */
  .hero__trust {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .hero__trust li { justify-content: flex-start; }

  .hero__injuries { text-align: left; }

  .hero__badge { margin: 1.25rem 0 0 auto; }

  /* --- Treatment card ---------------------------------------------------- */
  .treat-card__body { text-align: center; }
  .treat-card__body p { margin-left: auto; margin-right: auto; }

  /* --- CTA strip --------------------------------------------------------- */
  .cta-bar__inner { align-items: center; text-align: center; }

  /* --- Why --------------------------------------------------------------- */
  .why .section-title,
  .why__lead { text-align: center; }
  .why__lead { margin-left: auto; margin-right: auto; }

  /* the comparison cards keep their left edge — the copy runs long */
  .why-card { text-align: left; }

  /* --- Ready ------------------------------------------------------------- */
  .ready__content { text-align: center; }
  .ready__text { margin-left: auto; margin-right: auto; }

  /* --- Reviews ----------------------------------------------------------- */
  .reviews__title { text-align: center; }
  /* the quote and the reviewer stay left — that is what makes it read as a
     quotation rather than a caption */

}


/* ==========================================================================
   Medical evaluation — the numbered path
   ========================================================================== */
.steps { margin-top: 1.4375rem; max-width: 45.3125rem; }

.steps dt {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
}

.steps dd {
  font-size: 1.0625rem;
  line-height: 1.625rem;
  color: var(--ink);
}

.steps dd + dt { margin-top: 1.375rem; }

/* The standalone strip, for pages that have no hero to sit it over. */
.announce {
  position: relative;
  height: 1.4375rem;
}

.announce img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.announce p {
  position: relative;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4375rem;
  text-align: center;
  color: var(--navy);
}

/* =====================================================================
   FAQs page — no artwork, just the question list
   ========================================================================== */
.faqs-page { padding: 5.625rem 0 0; }

.faqs-page__title { text-align: center; }

.faqs-page__lead {
  margin: 2rem auto 0;
  max-width: 63rem;
  font-size: 1.0625rem;
  line-height: 1.625rem;
  text-align: center;
  color: var(--ink);
}

.faqs-page .faq__list { margin-top: 5.5rem; }

.faqs-page .faq__item + .faq__item { margin-top: 1.4375rem; }

/* ==========================================================================
   Contact — copy and details beside the form card
   ========================================================================== */
/* The grey runs the whole page in the Figma, from under the header down to
   the footer — not just behind this section — so it belongs to the page, not
   the band. Putting it here is what left the strip below the card white. */
.page-contact main { background: var(--gray-bg); }

.contact { padding: 6.125rem 0 0; }

/* the card sits higher in the frame than the copy beside it */
.contact__content { padding-top: 3.4375rem; }

.contact__inner {
  display: grid;
  grid-template-columns: 53rem 35.0625rem;
  gap: 3.9375rem;
  align-items: start;
}

.contact__lead {
  margin-top: 2.375rem;
  font-size: 1.0625rem;
  line-height: 1.625rem;
  color: var(--ink);
}

.contact__list { margin-top: 2.9375rem; }

.contact__row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.125rem 0;
  border-bottom: 0.0625rem solid var(--line);
}

.contact__row:last-child { border-bottom: 0; }

.contact__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--orange-grad);
}

.contact__icon img {
  width: 1.375rem;
  height: 1.375rem;
  /* the shared contact icons are drawn dark; knocked out they read on orange */
  filter: brightness(0) invert(1);
}

.contact__row h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4375rem;
  line-height: 1.3;
  color: var(--navy);
}

.contact__row p,
.contact__row a {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
}

/* --- The form card -------------------------------------------------------- */
.contact-card {
  padding: 2.3125rem 2.5rem 1.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 1rem;
  background: var(--white);
}

.contact-card__title {
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2rem;
  text-align: center;
  color: var(--navy);
}

/* The form's result line. It is empty until either contact-submit.php
   redirects back with a message (no JavaScript) or main.js writes one in
   after the fetch, and an empty one takes no space. */
.form-status {
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: center;
}

.form-status:empty { display: none; }

.form-status.is-ok {
  border: 0.0625rem solid rgba(23, 133, 66, 0.35);
  background: rgba(23, 133, 66, 0.08);
  color: #0F6B34;
}

.form-status.is-error {
  border: 0.0625rem solid rgba(200, 42, 18, 0.35);
  background: rgba(200, 42, 18, 0.07);
  color: #B4310F;
}

/* Honeypot — off-screen rather than display:none, which some bots skip */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-card.is-sending { opacity: 0.7; }
.contact-card.is-sending .btn { pointer-events: none; }

.contact-card__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* only the stacked fields are spaced: the two inside .contact-card__row sit
   side by side, and the sibling margin was dropping Last Name below First */
.contact-card > .field + .field,
.contact-card__row + .field { margin-top: 1.125rem; }

.field label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
}

.field .req { color: var(--orange); }

.field input,
.field textarea {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
}

.field textarea { height: 7.4375rem; resize: vertical; }

.field input::placeholder,
.field textarea::placeholder { color: #9AA1AC; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--orange);
}

.contact-card .btn {
  width: 100%;
  height: 3.375rem;
  margin-top: 1.625rem;
  text-transform: none;
  font-size: 1.0625rem;
}

.contact-card__note {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  text-align: center;
  color: rgba(30, 30, 32, 0.65);
}

/* card to strip is 122px in the slice, strip to footer 79 */
.contact + .cta-bar { padding-top: 7.625rem; }

.page-contact .cta-bar { padding-bottom: 4.9375rem; }

/* ==========================================================================
   Notice pages — 404 and thank you

   Both are one centred column built from the tokens the rest of the site
   uses, so they read as part of the site rather than as a system page.
   ========================================================================== */
.notice { padding: 5.75rem 0 4.75rem; }

.notice__inner {
  max-width: 50rem;
  margin: 0 auto;
  text-align: center;
}

.notice__code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 8.75rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.notice__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto 1.75rem;
  border: 0.0625rem solid rgba(247, 117, 7, 0.45);
  border-radius: 50%;
  background: var(--cream);
}

.notice__badge img { width: 2.5rem; height: 2.5rem; }

.notice__title { margin-top: 1.25rem; text-wrap: balance; }

.notice__tag {
  margin-top: 0.875rem;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
}

.notice__text {
  max-width: 38rem;
  margin: 1.125rem auto 0;
  text-wrap: pretty;
  font-size: 1.03125rem;
  line-height: 1.625rem;
}

.notice__actions {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2.125rem;
}

.notice__actions .btn--orange { width: 17rem; }
.notice__actions .btn--outline { width: 12.5rem; }

/* the shortcuts back into the site — the same chip the FAQ list uses, laid
   out to wrap on its own rather than in a fixed grid */
.notice__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 3.25rem;
  padding-top: 2.5rem;
  border-top: 0.0625rem solid var(--line);
}

.notice__links a {
  display: block;
  padding: 0.625rem 1.125rem;
  border: 0.0625rem solid var(--line);
  border-radius: 2rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--navy);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.notice__links a:hover { border-color: var(--orange); color: var(--orange); }

/* the notice already ends in generous padding, so the band below it does not
   need the standing gap the home page gives this section */
.how--thanks { margin-top: 0; }

/* ==========================================================================
   Inner-page sections — responsive
   ========================================================================== */
@media (max-width: 1200px) {
  /* .hero--plain is more specific than the .hero__inner reset above, so the
     padding has to be released here too */
  .hero--plain .hero__inner { padding-top: 3.25rem; }
  .hero--plain .hero__content { width: 100%; }
  .hero--plain .hero__lead { max-width: 34rem; margin-top: 1rem; }
  .hero--plain .hero__actions { margin-top: 1.75rem; }

  /* --- More Than Treatment ------------------------------------------------ */
  .split { padding-top: 3rem; }

  .split__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .split__img { position: static; width: 100%; height: 22rem; border-radius: 1.25rem 1.25rem 0 0; }
  .split__panel { grid-column: auto; }

  .split__panel {
    padding: 2.25rem 2rem 2.5rem;
    border-radius: 0 0 1.25rem 1.25rem;
  }

  .split__title { font-size: 2.125rem; }

  /* --- Insurance on its own ------------------------------------------------ */
  .insurance { padding-top: 3.5rem; }
  .insurance-card--wide { padding: 2rem 1.5rem; }
  .insurance-card--wide .insurance-card__logos { flex-wrap: wrap; gap: 1.5rem 2.5rem; }

  /* below the desktop frame the row has to wrap, so the logos go back to the
     smaller widths the half-width card uses */
  .insurance-card--wide .insurance-card__logos img[alt="GEICO"]       { width: 10.25rem; }
  .insurance-card--wide .insurance-card__logos img[alt="Allstate"]    { width: 10.625rem; }
  .insurance-card--wide .insurance-card__logos img[alt="State Farm"]  { width: 11.0625rem; }
  .insurance-card--wide .insurance-card__logos img[alt="Progressive"] { width: 12.125rem; }

  /* --- We Treat People ----------------------------------------------------- */
  .people { margin-top: 3.5rem; padding: 3.25rem 0 3.5rem; }

  .people__inner {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .people__img { order: -1; height: 22rem; }

  .expect { margin-top: 1.75rem; padding: 1.75rem 1.5rem 2rem; }
}

@media (max-width: 900px) {
  .split__img { height: 17rem; }
  .people__img { height: 17rem; }
}

@media (max-width: 600px) {
  .split__title { font-size: 1.75rem; }
  .split__panel { padding: 1.75rem 1.25rem 2rem; }
  .split__img { height: 14rem; }

  .people__img { height: 14rem; }
  .expect { padding: 1.5rem 1.25rem 1.75rem; }
  .expect__title { font-size: 1.375rem; }
}

/* ==========================================================================
   Service, FAQ and contact pages — responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .hero--plain.hero--service .hero__inner { padding-top: 3.25rem; }
  .hero--plain.hero--service .hero__lead { max-width: 34rem; margin-top: 1rem; }
  .hero--plain.hero--service .hero__actions { margin-top: 1.75rem; }
  .hero__sub--two { line-height: 1.35; }

  /* --- Common problems ---------------------------------------------------- */
  .problems { padding: 3rem 0 3.5rem; }
  .problems__title { margin-bottom: 2.25rem; }
  .problems__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.25rem; }
  .problems .injury p { max-width: none; }

  /* --- The wider heading column collapses with everything else ------------ */
  .people--service .people__inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .people--service .people__lead,
  .people--service .expect,
  .steps { max-width: none; }

  /* --- FAQ ---------------------------------------------------------------- */
  .faq { padding-top: 3.25rem; }
  .faq__title { margin-bottom: 2rem; }
  .faq__q { padding: 1.125rem 1.25rem; font-size: 1.375rem; }
  .faq__item[open] .faq__q { padding-bottom: 0.75rem; }
  .faq__item + .faq__item { margin-top: 1rem; }
  .faq__a { margin: 0 1.25rem; padding: 0.75rem 0 1.125rem; }
  .faq + .cta-bar { padding-top: 3.5rem; }

  .faqs-page { padding-top: 3.25rem; }
  .faqs-page .faq__list { margin-top: 2rem; }
  .faqs-page .faq__item + .faq__item { margin-top: 1rem; }

  /* --- Contact ------------------------------------------------------------ */
  .contact { padding-top: 3.25rem; }

  .contact__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .contact__lead { margin-top: 1.25rem; }
  .contact__list { margin-top: 1.75rem; }
  .contact-card { padding: 2rem 1.75rem 2.25rem; }
  .contact + .cta-bar { padding-top: 3.5rem; }
}

@media (max-width: 900px) {
  /* --- Notice pages ------------------------------------------------------ */
  .notice { padding: 3.5rem 0 3rem; }
  .notice__code { font-size: 6rem; }
  .notice__tag { font-size: 1.125rem; }
  .notice__links { margin-top: 2.5rem; padding-top: 2rem; }

  .faq__q { font-size: 1.1875rem; }
}

@media (max-width: 600px) {
  /* --- Notice pages ------------------------------------------------------ */
  .notice__code { font-size: 4.5rem; }
  .notice__badge { width: 4.5rem; height: 4.5rem; margin-bottom: 1.25rem; }
  .notice__badge img { width: 2rem; height: 2rem; }
  .notice__actions { flex-direction: column; align-items: stretch; }
  .notice__actions .btn { width: 100%; }
  .notice__links { gap: 0.5rem; }
  .notice__links a { padding: 0.5rem 0.875rem; font-size: 0.875rem; }

  .hero__sub--two { line-height: 1.3; }

  .problems__grid { grid-template-columns: 1fr; }

  .faq__q { padding: 1rem; font-size: 1.0625rem; gap: 1rem; }
  .faq__icon { width: 1.5rem; height: 1.5rem; }
  .faq__a { margin: 0 1rem; font-size: 1rem; }

  .faqs-page__lead { font-size: 1rem; }

  .contact__row { gap: 1rem; align-items: flex-start; }
  .contact__row h2 { font-size: 1.25rem; }
  .contact__icon { width: 2.5rem; height: 2.5rem; }
  .contact-card { padding: 1.5rem 1.25rem 1.75rem; }
  .contact-card__row { grid-template-columns: 1fr; gap: 0; }
  .contact-card__row .field + .field { margin-top: 1.25rem; }
  .contact-card__title { font-size: 1.625rem; }
}

/* ==========================================================================
   Card hovers

   Every box that reads as a card lifts slightly and warms up under the
   pointer. The movement is 3px and the colour change is small on purpose —
   enough to say "this is a thing", not enough to distract from the page.
   ========================================================================== */
.service-card,
.how-step,
.why-card,
.review,
.insurance-card,
.faq__item {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease, border-color 0.3s ease,
              background-color 0.3s ease;
}

.service-card:hover,
.review:hover {
  transform: translateY(-0.1875rem);
  background: var(--white);
  box-shadow: 0 0.75rem 1.5rem rgba(1, 30, 60, 0.1);
}

.how-step:hover,
.insurance-card:hover {
  transform: translateY(-0.1875rem);
  border-color: rgba(247, 117, 7, 0.45);
  box-shadow: 0 0.75rem 1.5rem rgba(1, 30, 60, 0.09);
}

/* the "ours" card already carries the orange border, so it only lifts */
.why-card:hover {
  transform: translateY(-0.1875rem);
  box-shadow: 0 0.75rem 1.5rem rgba(1, 30, 60, 0.09);
}

/* a closed row only; an open one is already filled with the gradient */
.faq__item:not([open]):hover { border-color: rgba(247, 117, 7, 0.45); }

/* the artwork eases in a touch with the card under it */
.service-card img,
.injury__icon,
.how-step__icon img {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-card:hover img { transform: scale(1.03); }

.injury:hover .injury__icon,
.how-step:hover .how-step__icon img { transform: translateY(-0.25rem); }

@media (prefers-reduced-motion: reduce) {
  .service-card:hover,
  .how-step:hover,
  .why-card:hover,
  .review:hover,
  .insurance-card:hover { transform: none; }

  .service-card:hover img,
  .injury:hover .injury__icon,
  .how-step:hover .how-step__icon img { transform: none; }
}