/* ==========================================================================
   CAREFINITY — SECTIONS  (v2)
   --------------------------------------------------------------------------
   Page-level composition: hero, trust strip, stats, services, steps, FAQ,
   consultation, CTA, page heroes, contact and the legal layout.
   ========================================================================== */

/* ==========================================================================
   HOME HERO — headline on the left, care finder on the right
   ========================================================================== */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4.5rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  background: var(--c-cream);
  overflow: hidden;
  isolation: isolate;
}

/* Photograph behind the hero, veiled so the copy stays readable. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img, .hero__bg video { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, var(--c-cream) 6%, rgba(251, 248, 243, .93) 38%, rgba(251, 248, 243, .55) 62%, rgba(251, 248, 243, .3) 100%),
    linear-gradient(to top, var(--c-cream) 2%, transparent 34%);
}
@media (max-width: 900px) {
  .hero__bg::after {
    background:
      linear-gradient(to bottom, rgba(251, 248, 243, .9) 0%, rgba(251, 248, 243, .96) 45%, var(--c-cream) 70%);
  }

  /* A landscape video becomes excessively zoomed when it covers the hero's
     full stacked height on phones. Keep it behind the copy only, shift the
     crop toward the people, then fade cleanly into the finder below. */
  .hero__bg--video { background: var(--c-cream); }
  .hero__bg--video video {
    height: min(760px, 90svh);
    object-position: 68% center;
  }
  .hero__bg--video::after {
    background:
      linear-gradient(to bottom, rgba(251, 248, 243, .18) 0%, rgba(251, 248, 243, .32) 48%, var(--c-cream) 92%),
      linear-gradient(90deg, rgba(251, 248, 243, .88) 0%, rgba(251, 248, 243, .66) 62%, rgba(251, 248, 243, .34) 100%);
  }
}

.hero .blob { z-index: -1; }
.hero .blob--teal { width: 38vw; height: 38vw; max-width: 480px; max-height: 480px; top: -14%; left: -12%; }
.hero .blob--lav  { width: 30vw; height: 30vw; max-width: 380px; max-height: 380px; bottom: -18%; right: 34%; }

.hero__grid {
  display: grid;
  gap: var(--gap-split);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr minmax(420px, 480px); }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.45rem 1rem 0.45rem 0.6rem;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--c-white);
  border: 1px solid var(--c-border-warm);
  box-shadow: var(--sh-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-teal-dark);
}
.hero__badge svg { width: 18px; height: 18px; color: var(--c-lavender-deep); }

.hero__title { font-size: var(--fs-display); margin-bottom: var(--sp-5); }
.hero__title .accent {
  display: block;
  color: var(--c-teal);
  font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 60;
}

.hero__sub { font-size: var(--fs-lead); color: var(--c-text); max-width: 46ch; margin-bottom: var(--sp-4); }
.hero__text { color: var(--c-muted); max-width: 52ch; margin-bottom: var(--sp-7); }
.hero__actions { margin-bottom: var(--sp-7); }

.hero__reassure { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.hero__reassure li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-muted);
}
.hero__reassure li::before {
  content: "";
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--c-teal-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2 4.2 8.4 11 1.6' stroke='%23087C80' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
}

/* Floating reassurance card over the hero media on wide screens. */
.hero__float {
  display: none;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: var(--sh-lift);
  max-width: 300px;
}
.hero__float svg { width: 26px; height: 26px; color: var(--c-lavender-deep); flex: none; }
.hero__float strong { display: block; font-family: var(--font-heading); font-size: var(--fs-sm); color: var(--c-heading); }
.hero__float span { font-size: var(--fs-xs); color: var(--c-muted); }

.hero__media { position: relative; }
.hero__curve { display: none; }

/* --------------------------------------------------------------------------
   Hero decoration.

   Rings that breathe outward from behind the care finder, and two dashed
   orbits carrying a small dot each. No labels, nothing to read — it is light
   and movement only, which is why it can sit behind the card without ever
   competing with the headline or the questions.

   Everything is a true circle centred on the card, sized in percentages of
   it, so the whole arrangement scales with the layout and needs no
   per-breakpoint positioning.
   -------------------------------------------------------------------------- */
.hero__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* The care finder has to sit above the decoration. */
.hero__media > .care-finder,
.hero__media > figure,
.hero__media > .hero__float { position: relative; z-index: 1; }

.hero__decor span,
.hero__decor i {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
}

/* Ripples — three circles expanding and fading, one after another. */
.hero__pulse {
  width: 100%;
  aspect-ratio: 1;
  border: 1.5px solid var(--c-teal);
  opacity: 0;
  animation: cf-ripple 7.5s var(--ease-out) infinite;
}
.hero__pulse:nth-of-type(2) { animation-delay: 2.5s; border-color: var(--c-lavender-deep); }
.hero__pulse:nth-of-type(3) { animation-delay: 5s; }

@keyframes cf-ripple {
  0%   { transform: translate(-50%, -50%) scale(.72); opacity: 0; }
  12%  { opacity: .4; }
  100% { transform: translate(-50%, -50%) scale(1.34); opacity: 0; }
}

/* Orbits — a dashed circle turning, with a lit dot riding on it. */
.hero__orbit {
  width: 116%;
  aspect-ratio: 1;
  border: 1.5px dashed var(--c-teal);
  opacity: .32;
  animation: cf-orbit 34s linear infinite;
}
.hero__orbit--2 {
  width: 138%;
  border-style: solid;
  border-color: var(--c-lavender);
  opacity: .38;
  animation-duration: 52s;
  animation-direction: reverse;
}

@keyframes cf-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero__orbit-dot {
  top: -8px;
  left: 50%;
  width: 15px;
  height: 15px;
  margin-left: -7.5px;
  background: var(--c-teal);
  box-shadow: 0 0 0 7px rgba(8, 124, 128, .16), var(--sh-btn);
  animation: cf-pulse 3.4s var(--ease-in-out) infinite;
}
.hero__orbit--2 .hero__orbit-dot {
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  top: -6px;
  background: var(--c-lavender-deep);
  box-shadow: 0 0 0 6px rgba(199, 164, 216, .22);
  animation-duration: 4.6s;
}

@media (max-width: 900px) {
  /* Tighter on a phone so the arcs stay behind the card rather than
     sweeping across the copy above it. */
  .hero__orbit { width: 108%; }
  .hero__orbit--2 { width: 124%; }
  .hero__orbit-dot { width: 12px; height: 12px; margin-left: -6px; top: -6px; }
  .hero__orbit--2 .hero__orbit-dot { width: 9px; height: 9px; margin-left: -4.5px; top: -5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__pulse { display: none; }
  .hero__orbit, .hero__orbit-dot { animation: none; }
}

/* ==========================================================================
   TRUST STRIP — infinite marquee of short reassurances
   ========================================================================== */
.trust-strip {
  padding-block: var(--sp-6);
  background: var(--c-teal-darker);
  color: var(--c-on-teal);
  overflow: hidden;
}
.trust-strip__track {
  display: flex;
  width: max-content;
  animation: cf-marquee 42s linear infinite;
}
.trust-strip:hover .trust-strip__track { animation-play-state: paused; }
.trust-strip__inner { display: flex; align-items: center; }
.trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-inline: var(--sp-8);
  white-space: nowrap;
}
.trust-strip__item svg { width: 22px; height: 22px; color: var(--c-lavender); flex: none; }
.trust-strip__item h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-white);
}
.trust-strip__item p { font-size: var(--fs-xs); color: var(--c-on-teal-muted); }
.trust-strip__item::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-lavender);
  opacity: .6;
  margin-left: var(--sp-8);
}

@media (prefers-reduced-motion: reduce) {
  .trust-strip__track { animation: none; width: 100%; }
  .trust-strip__inner { flex-wrap: wrap; justify-content: center; gap: var(--sp-4); }
  .trust-strip__inner:nth-child(2) { display: none; }
  .trust-strip__item::after { display: none; }
}

/* ==========================================================================
   STATS — animated counters
   ========================================================================== */
.stats {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  text-align: center;
}
.stat {
  padding: var(--sp-6) var(--sp-4);
  border-radius: var(--r-card);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--sh-card);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.stat:hover { transform: translateY(-5px); box-shadow: var(--sh-lift); }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: var(--fw-semi);
  line-height: 1;
  color: var(--c-teal);
  letter-spacing: var(--ls-tight);
}
.stat__label {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.stat__note { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-muted); }

/* ==========================================================================
   GRIDS + SPLITS
   ========================================================================== */
.grid { display: grid; gap: var(--gap-grid); }
@media (min-width: 620px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 620px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px)  { .grid--6 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .grid--6 { grid-template-columns: repeat(3, 1fr); } }

.split { display: grid; gap: var(--gap-split); align-items: center; }
@media (min-width: 940px) {
  .split--media-lead   { grid-template-columns: 1fr 1fr; }
  .split--content-lead { grid-template-columns: 1fr 1fr; }
  .split--reverse .media, .split--reverse figure { order: 2; }
}
.split__content > * + * { margin-top: var(--sp-4); }
.split__content h2 { margin-bottom: var(--sp-2); }

/* Layered image pair used in the about/intro blocks. */
.media-stack { position: relative; padding-bottom: var(--sp-12); padding-right: var(--sp-10); }
.media-stack .blob { width: 60%; height: 60%; }
.media-stack .blob--lav  { top: -6%; left: -8%; }
.media-stack .blob--teal { bottom: 4%; right: -6%; }
.media-stack__main { position: relative; z-index: 1; }
.media-stack__inset {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 2;
  width: 46%;
  max-width: 230px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 6px solid var(--c-cream);
  box-shadow: var(--sh-lift);
}
.media-stack__inset img { width: 100%; height: 100%; object-fit: cover; }

.mini-quote {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--c-lavender-light);
  color: var(--c-lavender-deep);
}
.mini-quote svg { width: 20px; height: 20px; }
.mini-quote p { font-family: var(--font-display); font-size: 1.05rem; font-style: italic; color: #5A3B6E; }

.inline-facts { display: grid; gap: var(--sp-5); }
@media (min-width: 560px) { .inline-facts { grid-template-columns: 1fr 1fr; } }
.inline-facts h3 { margin-bottom: var(--sp-2); font-size: var(--fs-h4); }
.inline-facts p { font-size: var(--fs-sm); color: var(--c-muted); }

.check-list { display: grid; gap: var(--sp-3); }
.check-list li {
  position: relative;
  padding-left: var(--sp-8);
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-teal-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2 4.2 8.4 11 1.6' stroke='%23087C80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
}
.check-list--lav li::before {
  background: var(--c-lavender-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2 4.2 8.4 11 1.6' stroke='%238E63A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
}

.section-cta { margin-top: clamp(2rem, 1.5rem + 1.6vw, 3rem); display: flex; justify-content: center; }
.section-cta--spaced { margin-top: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); }

/* ==========================================================================
   FEATURE LIST — "why choose us"
   ========================================================================== */
.feature-list { display: grid; gap: var(--sp-4); }
.feature-item {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.feature-item:hover {
  transform: translateX(6px);
  border-color: var(--c-teal-tint);
  box-shadow: var(--sh-card);
}
.feature-item:hover .icon-tile { transform: scale(1.08); }
.feature-item__body h3 { margin-bottom: var(--sp-2); font-size: var(--fs-h4); }
.feature-item__body p { font-size: var(--fs-sm); color: var(--c-muted); }

/* ==========================================================================
   STEPS — "how it works"
   ========================================================================== */
.steps { display: grid; gap: var(--gap-grid); counter-reset: step; }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  position: relative;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  border-radius: var(--r-card);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--sh-lift); }

.step__num {
  position: absolute;
  top: calc(-1 * var(--sp-5));
  left: var(--sp-6);
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--c-teal);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: var(--fw-semi);
  box-shadow: var(--sh-btn);
  transition: transform var(--t-base) var(--ease-spring);
}
.step:nth-child(even) .step__num { background: var(--c-lavender-deep); }
.step:hover .step__num { transform: scale(1.1) rotate(-6deg); }
.step h3 { margin: var(--sp-5) 0 var(--sp-3); }
.step p { font-size: var(--fs-sm); color: var(--c-muted); }

/* Connector line between the three steps on wide screens. */
@media (min-width: 780px) {
  .steps { position: relative; }
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--sp-5) + 29px);
    left: calc(var(--sp-6) + 58px + var(--sp-3));
    right: calc(-1 * var(--gap-grid) - var(--sp-3));
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--c-border-strong) 0 7px, transparent 7px 14px);
  }
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  border-radius: var(--r-card);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--sh-card);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.quote-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lift); }
.quote-card__mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: .6;
  color: var(--c-lavender);
}
.quote-card__text { font-size: var(--fs-lead); line-height: 1.6; color: var(--c-heading); font-family: var(--font-display); }
.quote-card__meta { margin-top: auto; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-muted); }

/* ==========================================================================
   CONSULTATION
   ========================================================================== */
.consult {
  display: grid;
  gap: var(--gap-split);
  align-items: center;
  padding: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  border-radius: var(--r-xl);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--sh-card);
}
@media (min-width: 940px) { .consult { grid-template-columns: 1.25fr 1fr; } }
.consult__content > * + * { margin-top: var(--sp-4); }
.consult__note { font-size: var(--fs-xs); color: var(--c-muted-light); max-width: 52ch; }
.consult__aside {
  padding: var(--sp-6);
  border-radius: var(--r-md);
  background: var(--c-teal-light);
}
.consult__aside h3 { margin-bottom: var(--sp-4); }
.calendly-embed { margin-top: var(--sp-8); border-radius: var(--r-lg); overflow: hidden; background: var(--c-white); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-layout { display: grid; gap: var(--gap-split); align-items: start; }
@media (min-width: 940px) { .faq-layout { grid-template-columns: 0.85fr 1.15fr; } }
@media (min-width: 940px) {
  .faq-layout__aside { position: sticky; top: calc(var(--header-h) + var(--sp-8)); }
}
.faq-help {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  border-radius: var(--r-md);
  background: var(--c-lavender-light);
  border: 1px solid #E7DAEE;
}
.faq-help h3 { margin-bottom: var(--sp-2); color: #3F2A50; }
.faq-help p { font-size: var(--fs-sm); color: #5A3B6E; margin-bottom: var(--sp-5); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band { background: var(--c-cream); }
.cta-band__inner {
  position: relative;
  padding: clamp(2.5rem, 1.8rem + 3.4vw, 5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--c-teal-darker), var(--c-teal) 62%, #0A8E93);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cta-band__inner::before,
.cta-band__inner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.cta-band__inner::before {
  width: 32rem; height: 32rem;
  top: -55%; right: -12%;
  background: radial-gradient(circle, rgba(199, 164, 216, .35), transparent 65%);
  animation: cf-drift 20s var(--ease-in-out) infinite;
}
.cta-band__inner::after {
  width: 26rem; height: 26rem;
  bottom: -50%; left: -8%;
  background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 65%);
  animation: cf-drift-alt 24s var(--ease-in-out) infinite;
}
.cta-band__inner h2 { margin-bottom: var(--sp-4); max-width: 20ch; margin-inline: auto; }
.cta-band__inner p { max-width: 58ch; margin-inline: auto; margin-bottom: var(--sp-8); }

/* ==========================================================================
   PAGE HERO — inner pages
   ========================================================================== */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.6rem + 4vw, 5rem));
  padding-bottom: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  background: var(--c-cream);
  overflow: hidden;
  isolation: isolate;
}
.page-hero .blob--lav {
  width: 34vw; height: 34vw;
  max-width: 430px; max-height: 430px;
  top: -16%; right: -8%;
  z-index: -1;
}
.page-hero__inner { max-width: 60ch; }
.page-hero__grid { display: grid; gap: var(--gap-split); align-items: center; }
@media (min-width: 940px) {
  .page-hero--with-media .page-hero__inner { max-width: none; }
  .page-hero__grid { grid-template-columns: 1.1fr 0.9fr; }
}
.page-hero h1 { margin-bottom: var(--sp-5); }
.page-hero__lead { font-size: var(--fs-lead); color: var(--c-muted); max-width: 58ch; }
.page-hero__lead + .page-hero__lead { margin-top: var(--sp-4); }
.page-hero__copy .btn-row { margin-top: var(--sp-8); }

/* ==========================================================================
   SERVICES PAGE
   ========================================================================== */
.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--sh-card);
}
.jump-nav a {
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--c-cream);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
  text-decoration: none;
  transition: all var(--t-base) var(--ease);
}
.jump-nav a:hover { background: var(--c-teal); color: var(--c-white); transform: translateY(-2px); }

.service-detail { scroll-margin-top: calc(var(--header-h) + var(--sp-8)); }
.service-detail + .service-detail { margin-top: clamp(3.5rem, 2.4rem + 4.4vw, 7rem); }
.service-detail__eyebrow {
  margin: var(--sp-4) 0 var(--sp-2);
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-lavender-deep);
}
.service-detail h2 { margin-bottom: var(--sp-4); }
.service-detail__intro { color: var(--c-muted); margin-bottom: var(--sp-6); }

.callout {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  border-radius: var(--r-xl);
  background: var(--c-lavender-light);
  border: 1px solid #E7DAEE;
}
@media (min-width: 820px) { .callout { grid-template-columns: 1fr auto; gap: var(--sp-8); } }
.callout h2 { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem); color: #3F2A50; }
.callout p { margin-top: var(--sp-3); color: #5A3B6E; font-size: var(--fs-sm); max-width: 58ch; }

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-layout { display: grid; gap: var(--gap-split); align-items: start; }
@media (min-width: 940px) { .contact-layout { grid-template-columns: 0.8fr 1.2fr; } }

.contact-info { display: grid; gap: var(--sp-6); }
.contact-info__card {
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border-radius: var(--r-card);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--sh-card);
}
.contact-info__list { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
.contact-info__item { display: flex; gap: var(--sp-4); }
.contact-info__item h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-1); }
.contact-info__item p, .contact-info__item address { font-size: var(--fs-sm); color: var(--c-muted); }
.contact-info__item a { color: var(--c-teal-dark); font-weight: var(--fw-medium); text-decoration: none; }
.contact-info__item a:hover { text-decoration: underline; }

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal-layout { display: grid; gap: var(--gap-split); align-items: start; }
@media (min-width: 940px) { .legal-layout { grid-template-columns: 260px 1fr; } }

.legal-toc {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
}
@media (min-width: 940px) {
  .legal-toc {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
    max-height: calc(100vh - var(--header-h) - var(--sp-12));
    overflow-y: auto;
  }
}
.legal-toc h2 {
  margin-bottom: var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}
.legal-toc ol { display: grid; gap: var(--sp-1); }
.legal-toc a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-decoration: none;
  transition: all var(--t-base) var(--ease);
}
.legal-toc a:hover { background: var(--c-teal-light); color: var(--c-teal-dark); }

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-8);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.legal-meta strong { color: var(--c-navy); }

.notice-banner {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-lavender-light);
  border: 1px solid #E7DAEE;
  border-left: 4px solid var(--c-lavender-deep);
}
.notice-banner svg { flex: none; width: 22px; height: 22px; color: var(--c-lavender-deep); margin-top: 2px; }
.notice-banner h2, .notice-banner h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #3F2A50;
  margin: 0 0 var(--sp-2);
  text-transform: none;
  letter-spacing: normal;
}
.notice-banner p { font-size: var(--fs-xs); line-height: 1.7; color: #5A3B6E; }

/* ==========================================================================
   COMPOSITION HOOKS
   ========================================================================== */
.callout + .notice-banner { margin-top: var(--sp-8); }
.notice-banner + .prose   { margin-top: var(--sp-10); }

.contact-info .faq-help { margin-top: 0; }
.contact-info__card > h2 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); }
.form-panel__head h2 { font-size: clamp(1.4rem, 1.25rem + 0.7vw, 1.75rem); }

@media (min-width: 1024px) {
  .hero__float { display: flex; }
}

/* ==========================================================================
   MOBILE
   --------------------------------------------------------------------------
   The layout is fluid down from the desktop composition, but a phone needs
   more than narrower columns: the display type has to come down, the media
   stack has to stop reserving space for an inset that no longer fits, and
   anything that could reach past the viewport has to be pinned back.
   ========================================================================== */

/* Nothing inside a grid or flex track may refuse to shrink. This is what
   stops a long word, a wide button label or an image blowing the column out
   and giving the whole page a sideways scroll. */
.container,
.container > *,
.split > *,
.grid > *,
.hero__grid > *,
.contact-layout > *,
.legal-layout > *,
.faq-layout > *,
.consult > *,
.site-footer__main > * { min-width: 0; }

.btn, .card, .step, .quote-card, .feature-item,
.accordion__trigger, .cf-option__box { max-width: 100%; }

/* Long unbroken strings — an email address, a URL pasted into content. */
.footer-contact a,
.contact-info__item a,
.prose a,
.nav-drawer__contact a { overflow-wrap: anywhere; }

@media (max-width: 1023px) {
  /* The care finder moves under the copy, so give it the full column. */
  .hero__media { width: 100%; }
  .hero { padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem); }
}

@media (max-width: 900px) {
  /* The inset image needs the room more than the offset does. */
  .media-stack { padding-right: var(--sp-6); padding-bottom: var(--sp-10); }
  .media-stack__inset { width: 42%; max-width: 180px; border-width: 5px; }

  .consult__aside { order: -1; }
}

@media (max-width: 720px) {
  :root {
    --fs-display: clamp(2.1rem, 1.4rem + 3.4vw, 2.9rem);
    --fs-h1:      clamp(1.9rem, 1.35rem + 2.6vw, 2.6rem);
    --fs-h2:      clamp(1.55rem, 1.25rem + 1.8vw, 2.1rem);
    --section-y:  clamp(3.25rem, 2.4rem + 3.4vw, 4.5rem);
  }

  /* Two columns of links read better than one long stack. */
  .site-footer__main { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__main > .footer-col:last-child { grid-column: 1 / -1; }

  .care-finder { border-radius: var(--r-lg); }
  .cta-band__inner { border-radius: var(--r-lg); }

  .btn--lg { min-height: 54px; padding-inline: var(--sp-6); font-size: var(--fs-sm); }
}

@media (max-width: 560px) {
  /* An inset that small stops being legible; drop it and let the main
     picture have the whole frame. */
  .media-stack { padding-right: 0; padding-bottom: 0; }
  .media-stack__inset { display: none; }

  .hero__reassure { gap: var(--sp-2) var(--sp-4); }
  .hero__badge { font-size: 0.75rem; }

  .icon-tile { width: 52px; height: 52px; }
  .icon-tile svg { width: 24px; height: 24px; }

  .accordion__trigger { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); }
  .accordion__panel p { padding-inline: var(--sp-5); padding-bottom: var(--sp-5); }

  .step { padding: var(--sp-7) var(--sp-5) var(--sp-5); }
  .step__num { width: 50px; height: 50px; font-size: 1.15rem; }

  .form-alt { flex-direction: column; align-items: flex-start; }

  .legal-meta { gap: var(--sp-1) var(--sp-4); }

  /* Cards and panels get their corners back a notch so they do not eat the
     narrow column. */
  .card, .form-panel, .contact-info__card, .quote-card, .consult { border-radius: var(--r-md); }
  .media { border-radius: var(--r-md); }
}

@media (max-width: 460px) {
  .site-footer__main { grid-template-columns: 1fr; }
  .site-footer__brand, .site-footer__main > .footer-col:last-child { grid-column: auto; }

  .site-footer__bottom { flex-direction: column; align-items: flex-start; }

  .care-finder__nav { flex-wrap: wrap; }
  .care-finder__nav .btn--primary { margin-left: 0; width: 100%; }
  .care-finder__back { order: 2; }

  .jump-nav { padding: var(--sp-4); }
  .social-row a { width: 40px; height: 40px; }
}