/* ============================================================
   SIGNAL — HOMEPAGE
   Recovery telemetry: graphite console hero,
   gauge tiles, plotted care curve,
   coverage switch. Graphics carry it; type supports.
   NOTE: .sec-words__*, .careplan__*, .sec-hero__dateline are
   also consumed by /what-we-treat/ (full Translator) and the
   condition pages (mini Translator) — keep those class names.
   ============================================================ */

/* section heads on the homepage get breathing room before content */
.sec-words .head, .sec-services .head, .sec-team .head,
.sec-firstvisit .head, .sec-coverage .head,
.sec-faq .head, .sec-location .head { margin-bottom: var(--sp-head); }

/* ============================================================
   HERO — the front panel
   ============================================================ */
.sec-hero {
  position: relative;
  overflow: hidden;
  color: var(--paper-on-espresso);
  padding: calc(var(--nav-h) + clamp(4.5rem, 11vh, 8.5rem)) 0 clamp(4.5rem, 10vh, 8rem);
  background:
    radial-gradient(120% 90% at 82% 0%, var(--espresso-2), var(--espresso) 60%);
}
.sec-hero__photo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, hsl(240 8% 7% / 0.92) 0%, hsl(240 8% 7% / 0.8) 45%, hsl(240 8% 7% / 0.5) 100%),
    url(/images/hero1.webp) center 30% / cover no-repeat;
  pointer-events: none;
}
@media (max-width: 1100px) {
  .sec-hero__photo {
    background:
      linear-gradient(hsl(240 8% 7% / 0.82), hsl(240 8% 7% / 0.82)),
      url(/images/hero1.webp) 60% 30% / cover no-repeat;
  }
}
.sec-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(2.25rem, 5vh, 3.5rem);
}
.sec-hero__lede { max-width: 40em; }

/* dateline: status chip (light default for interior reuse) */
.sec-hero__dateline {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.55em 0.9em;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  color: var(--ink-soft);
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}
.sec-hero__dateline .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.22);
  animation: dot-pulse 2.4s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.22); }
  50% { box-shadow: 0 0 0 6px hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .sec-hero__dateline .dot { animation: none; }
}
.sec-hero .sec-hero__dateline {
  border-color: hsl(240 6% 100% / 0.22);
  color: var(--paper-on-espresso-dim);
  background: hsl(240 6% 100% / 0.04);
}
.sec-hero .sec-hero__dateline .dot { background: var(--accent-hot); }

.sec-hero h1 {
  color: #fff;
  font-size: clamp(1.625rem, 0.7475rem + 3.51vw, 3.575rem); /* 65% of --fs-display */
  margin-bottom: clamp(1.1rem, 2.5vh, 1.6rem);
  max-width: 11em;
}
.sec-hero h1 em {
  font-style: normal;
  color: var(--accent-lift);
}
.sec-hero__dek {
  color: var(--paper-on-espresso-dim);
  margin-bottom: clamp(1.5rem, 3.5vh, 2.25rem);
}
.sec-hero__cta {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 3.5vh, 2.25rem);
}
.sec-hero__cta .tlink { color: var(--paper-on-espresso); }
.sec-hero__cta .tlink:hover { color: var(--accent-lift); }
.sec-hero__proof {
  display: flex;
  align-items: center;
  gap: 0.9em;
  flex-wrap: wrap;
}
.sec-hero__stars { color: var(--accent-lift); letter-spacing: 0.14em; font-size: 0.8rem; }
.sec-hero__proof .mono { color: var(--paper-on-espresso-dim); }
.sec-hero__proof a { color: var(--paper-on-espresso); text-underline-offset: 3px; }
.sec-hero__proof a:hover { color: var(--accent-lift); }


/* ============================================================
   IN BRIEF — gauge tiles
   ============================================================ */
.sec-brief {
  background: var(--paper);
  border-bottom: var(--frame);
  padding: clamp(2.25rem, 4vw, 3.5rem) 0;
}
.sec-brief__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.sec-brief__cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "arc num" "arc cap";
  column-gap: 1.1rem;
  row-gap: 0.15rem;
  align-items: center;
  align-content: center;
  min-width: 0;
}
.sec-brief__arc { grid-area: arc; }
.sec-brief__num { grid-area: num; align-self: end; }
.sec-brief__cap { grid-area: cap; align-self: start; }
.sec-brief__cell:not(:first-child) { padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: var(--frame); }
.sec-brief__arc { width: 62px; height: 62px; flex: none; }
.sec-brief__arc .arcval {
  stroke: var(--accent);
  stroke-dasharray: var(--arc, 60) 100;
  stroke-dashoffset: var(--arc, 60);
  stroke-linecap: round;
  transition: stroke-dashoffset 1100ms var(--ease-press) 250ms;
}
.sec-brief__cell.is-in .arcval { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .sec-brief__arc .arcval { stroke-dashoffset: 0 !important; transition: none !important; }
}
html.no-js .sec-brief__arc .arcval { stroke-dashoffset: 0; }
.sec-brief__num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.sec-brief__num .star { color: var(--accent); font-size: 0.75em; }
.sec-brief__cap {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .sec-brief__row { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .sec-brief__cell:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 480px) {
  .sec-brief__arc { width: 50px; height: 50px; }
}

/* ============================================================
   SAY IT IN YOUR OWN WORDS — the phrase index
   (classes reused by condition-page mini translator)
   ============================================================ */
.sec-words { background: var(--paper); position: relative; }
.sec-words__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}
.sec-words__item { border-bottom: var(--frame); }
.sec-words__phrase {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  width: 100%;
  padding: 1.25rem 0.25rem;
  text-align: left;
  transition: background var(--dur-ui);
}
.sec-words__no {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--ink-faint);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0.45em 0.5em 0.38em;
  transition: background var(--dur-ui), color var(--dur-ui), border-color var(--dur-ui);
}
.sec-words__q {
  font-size: clamp(1.05rem, 1rem + 0.7vw, 1.45rem);
  font-weight: 500;
  line-height: 1.3;
  transition: transform var(--dur-ui) var(--ease-out), color var(--dur-ui);
}
.sec-words__toggle {
  position: relative;
  width: 30px; height: 30px;
  flex: none;
  color: transparent;      /* the glyph is drawn, not typed */
  overflow: hidden;
  transition: transform 300ms var(--ease-press);
}
.sec-words__toggle::before, .sec-words__toggle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--ink-soft);
  transition: background var(--dur-ui);
}
.sec-words__toggle::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.sec-words__toggle::after { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.sec-words__phrase:hover .sec-words__no {
  background: var(--accent-deep);
  border-color: var(--accent);
  color: var(--accent-on);
}
.sec-words__phrase:hover .sec-words__q { transform: translateX(6px); }
.sec-words__phrase[aria-expanded="true"] .sec-words__toggle { transform: rotate(45deg); }
.sec-words__phrase[aria-expanded="true"] .sec-words__toggle::before,
.sec-words__phrase[aria-expanded="true"] .sec-words__toggle::after { background: var(--accent); }
.sec-words__item.is-open .sec-words__no {
  background: var(--accent-deep);
  border-color: var(--accent);
  color: var(--accent-on);
}

.sec-words__note {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease-press);
}
.sec-words__item:not(.is-open) .sec-words__note { transition-timing-function: var(--ease-exit); transition-duration: 260ms; }
.sec-words__note > div { overflow: hidden; }
.sec-words__note-inner {
  margin: 0.25rem 0 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--accent-wash);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  display: grid;
  gap: 0.8rem;
  justify-items: start;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms var(--ease-press), transform 300ms var(--ease-press);
}
.sec-words__item.is-open .sec-words__note { grid-template-rows: 1fr; }
.sec-words__item.is-open .sec-words__note-inner { opacity: 1; transform: none; transition-delay: 90ms; }
@media (prefers-reduced-motion: reduce) {
  .sec-words__note, .sec-words__note-inner { transition: none; }
}
.sec-words__meaning { color: var(--ink); max-width: 56ch; }
.sec-words__meaning .lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.4rem;
}
.sec-words__foot { margin-top: 2rem; }
@media (max-width: 640px) {
  .sec-words__phrase { grid-template-columns: minmax(0, 1fr) auto; }
  .sec-words__no { display: none; }
  .sec-words__q { font-size: 1.05rem; }
}

/* ============================================================
   SERVICES — product-carousel stage (white section, dark slides)
   Each service is one large rounded dark panel: inset rounded image
   on the left, title / description / Learn More on the right. The
   active panel sits centred; neighbours peek in from both edges,
   scaled back and dimmed. home.js places every panel by its circular
   distance from the active one (seamless loop, no clones) and the
   active timer segment's fill drives the 2s auto-advance.
   ============================================================ */
.sec-services { background: #fff; overflow: hidden; padding-bottom: calc(var(--sp-section) / 3); }

.xcar {
  --w: min(78vw, 75rem);                /* active panel width */
  --h: calc(var(--w) * 0.46);           /* active panel height (desktop) */
  --r: clamp(1.25rem, 2vw, 1.9rem);     /* outer radius */
  --pad: clamp(1rem, 1.8vw, 1.75rem);   /* inner padding = image inset */
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  --dur: 900ms;
  position: relative;
  margin-top: clamp(0.75rem, 2vw, 1.5rem);
}
.xcar__stage {
  position: relative;
  height: var(--h);
  margin: 0;
  padding: 0;
  list-style: none;
  touch-action: pan-y;
  cursor: grab;
}
.xcar.is-dragging .xcar__stage { cursor: grabbing; }

.xcar__slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--w);
  height: var(--h);
  margin-left: calc(var(--w) / -2);
  transform-origin: center center;
  opacity: 0;
  will-change: transform, opacity;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.xcar.is-instant .xcar__slide { transition: none; }

.xcar__panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3.75rem);
  padding: var(--pad);
  border-radius: var(--r);
  background:
    radial-gradient(120% 90% at 100% 0%, hsl(240 8% 16%), transparent 60%),
    var(--espresso);
  color: var(--paper-on-espresso);
  box-shadow: 0 40px 80px -40px hsl(240 10% 4% / 0.55);
  overflow: hidden;
  user-select: none;
}
/* inset image, radius concentric with the panel */
.xcar__media {
  position: relative;
  border-radius: calc(var(--r) - var(--pad) * 0.4);
  overflow: hidden;
  background: var(--espresso-2);
}
.xcar__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  transform: scale(1.1);
  filter: saturate(0.75);
  transition: transform 1400ms var(--ease), filter var(--dur) var(--ease);
}
.xcar__slide.is-active .xcar__media img { transform: none; filter: none; }

.xcar__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
  padding: clamp(0.5rem, 1.5vw, 1.75rem) clamp(0.25rem, 1.5vw, 2rem) clamp(0.5rem, 1.5vw, 1.75rem) 0;
  min-width: 0;
}
.xcar__index {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-on-espresso-dim);
}
.xcar__index b { color: var(--accent-lift); font-weight: 500; }
.xcar__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
}
.xcar__desc {
  font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1.0625rem);
  line-height: 1.6;
  color: var(--paper-on-espresso-dim);
  max-width: 30em;
  /* two lines max, ending in an ellipsis */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.xcar__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0 1.5rem;
  border-radius: 999px;
  background: #fff;
  color: var(--espresso);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background var(--dur-ui), color var(--dur-ui);
}
.xcar__btn .arr { transition: transform var(--dur-ui) var(--ease-out); }
.xcar__btn:hover, .xcar__btn:focus-visible { background: var(--accent-deep); color: var(--accent-on); }
.xcar__btn:hover .arr { transform: translateX(4px); }
.xcar__btn:focus-visible { outline: 3px solid var(--accent-lift); outline-offset: 3px; }

/* the active panel's copy arrives after it settles */
.xcar__body > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.xcar__slide.is-active .xcar__body > * { opacity: 1; transform: none; }
.xcar__slide.is-active .xcar__index { transition-delay: 380ms; }
.xcar__slide.is-active .xcar__title { transition-delay: 460ms; }
.xcar__slide.is-active .xcar__desc  { transition-delay: 540ms; }
.xcar__slide.is-active .xcar__btn   { transition-delay: 620ms; }
.xcar__slide:not(.is-active) .xcar__panel { cursor: pointer; }

/* controls: counter · timer segments · arrows */
.xcar__bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}
.xcar__count { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-faint); white-space: nowrap; }
.xcar__count b { color: var(--ink); font-weight: 500; }
.xcar__segs { flex: 1; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 0.4rem; }
.xcar__seg { position: relative; height: 22px; }
.xcar__seg::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 2px; background: var(--rule); }
.xcar__seg .fill { position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 2px; background: var(--espresso); transform: scaleX(0); transform-origin: left; }
.xcar__seg.is-done .fill { transform: scaleX(1); background: var(--rule-strong); }
.xcar__seg.is-active .fill { animation: xcar-fill var(--auto, 2000ms) linear forwards; }
.xcar.is-paused .xcar__seg.is-active .fill { animation-play-state: paused; }
.xcar.is-static .xcar__seg.is-active .fill { animation: none; transform: scaleX(1); }
@keyframes xcar-fill { to { transform: scaleX(1); } }
.xcar__nav { display: flex; gap: 0.5rem; }
.xcar__arrow {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--espresso);
  color: #fff;
  font-size: 1.1rem;
  transition: background var(--dur-ui), transform var(--dur-ui) var(--ease-out);
}
.xcar__arrow:hover, .xcar__arrow:focus-visible { background: var(--accent-deep); }
.xcar__arrow:active { transform: scale(0.94); }

@media (max-width: 900px) {
  .xcar { --w: 78vw; --h: auto; }
  .xcar__stage { height: auto; }              /* JS sets the measured height */
  .xcar__slide { height: auto; }
  .xcar__panel { position: relative; inset: auto; grid-template-columns: 1fr; gap: 1.1rem; }
  .xcar__media { aspect-ratio: 4 / 3; }
  .xcar__body { padding: 0.25rem 0.5rem 0.75rem; justify-content: flex-start; }
  .xcar__title { font-size: 1.85rem; }
  .xcar__count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xcar__slide, .xcar__media img, .xcar__body > * { transition: none !important; }
}

.sec-services__foot { margin-top: 2rem; }

/* ============================================================
   WHERE RECOVERY BEGINS — project carousel
   A full-bleed stage. Every slide is absolutely positioned and
   home.js places it by its circular distance from the active one:
   centre at full size, ±1 stepped back (smaller, dimmer), ±2 further
   back and bleeding off the edges, the rest parked out of view. Each
   step re-lays every slide at once, so they glide and rescale in
   layers; the loop needs no clones because distance wraps. Every
   slide links to its condition page; the active one also shows the
   condition's short description.
   ============================================================ */
/* tight hand-off from the services link above: a third of the usual section gap on each side */
.sec-treat { background: #fff; overflow: hidden; padding-top: calc(var(--sp-section) / 3); padding-bottom: clamp(2rem, 2vw, 3rem); }

/* a little air between the heading and the carousel */
.sec-treat .head { margin-bottom: 1.6rem; }

.rshow {
  --w: clamp(16rem, 26vw, 34rem);        /* active slide width */
  --h: calc(var(--w) * 1.3);             /* stage height = active slide height */
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 900ms;
  position: relative;
  margin-top: clamp(0.75rem, 2vw, 1.75rem);
}
.rshow__stage {
  position: relative;
  height: var(--h);
  margin: 0;
  padding: 0;
  list-style: none;
  touch-action: pan-y;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.rshow.is-dragging .rshow__stage { cursor: grabbing; }

.rshow__slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--w);
  height: 100%;
  margin-left: calc(var(--w) / -2);
  transform-origin: center center;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.rshow__slide.is-shown { pointer-events: auto; }
.rshow.is-instant .rshow__slide { transition: none; }

.rshow__link {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  text-decoration: none;
  background: var(--espresso-2);
  box-shadow: 0 30px 60px -30px hsl(240 10% 4% / 0.55);
  -webkit-user-drag: none;
  user-select: none;
}
.rshow__link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  filter: saturate(0.55) brightness(0.72);
  transform: scale(1.08);
  transition: filter var(--dur) var(--ease), transform 1400ms var(--ease);
}
.rshow__slide.is-active .rshow__link img { filter: none; transform: scale(1); }
.rshow__slide.is-active .rshow__link:hover img { transform: scale(1.035); }
/* bottom shade for the title */
.rshow__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    hsl(240 10% 4% / 0.88) 0%,
    hsl(240 10% 4% / 0.55) 30%,
    hsl(240 10% 4% / 0) 62%),
    linear-gradient(to bottom, hsl(240 10% 4% / 0.35), hsl(240 10% 4% / 0) 22%);
}
.rshow__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.rshow__meta {
  position: absolute;
  top: clamp(1rem, 1.6vw, 1.5rem);
  left: clamp(1rem, 1.6vw, 1.5rem);
  right: clamp(1rem, 1.6vw, 1.5rem);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.rshow__no {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.rshow__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(240 6% 100% / 0.8);
}
.rshow__body {
  position: absolute;
  left: clamp(1rem, 1.6vw, 1.5rem);
  right: clamp(1rem, 1.6vw, 1.5rem);
  bottom: clamp(1.1rem, 1.8vw, 1.75rem);
  display: grid;
  gap: 0.6rem;
}
.rshow__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.35rem, 0.9rem + 1.3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}
.rshow__rule {
  display: block;
  height: 2px;
  width: 0;
  background: var(--accent-lift);
  transition: width 700ms var(--ease);
}
.rshow__desc {
  font-size: clamp(0.8125rem, 0.72rem + 0.25vw, 0.9375rem);
  line-height: 1.5;
  color: hsl(240 6% 100% / 0.82);
  max-width: 30em;
}
.rshow__more {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}
/* the active slide's text arrives after the slide settles */
.rshow__meta, .rshow__body > * {
  opacity: 0.55;
  transform: translateY(10px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.rshow__desc, .rshow__more { opacity: 0; }
.rshow__slide.is-active .rshow__meta,
.rshow__slide.is-active .rshow__body > * { opacity: 1; transform: none; transition-delay: 350ms; }
.rshow__slide.is-active .rshow__title { transition-delay: 420ms; }
.rshow__slide.is-active .rshow__desc { transition-delay: 480ms; }
.rshow__slide.is-active .rshow__more { transition-delay: 560ms; }
.rshow__slide.is-active .rshow__rule { width: 3rem; transition-delay: 450ms; }

/* counter · progress · prev/next */
.rshow__bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.rshow__count {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
}
.rshow__count b {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rshow__count span {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--ink-faint);
}
.rshow__progress {
  flex: 1;
  height: 1px;
  background: var(--rule);
  position: relative;
}
.rshow__progress span {
  position: absolute;
  left: 0; top: -1px;
  height: 3px;
  width: 0;
  background: var(--ink);
  transition: width var(--dur) var(--ease);
}
.rshow__nav { display: flex; gap: clamp(1rem, 2vw, 1.75rem); }
.rshow__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 0.1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-ui), border-color var(--dur-ui);
}
.rshow__btn .arr { font-size: 1.1rem; transition: transform var(--dur-ui) var(--ease-out); }
.rshow__btn:hover, .rshow__btn:focus-visible { color: var(--accent-deep); border-bottom-color: currentColor; }
.rshow__btn[data-rshow-prev]:hover .arr { transform: translateX(-4px); }
.rshow__btn[data-rshow-next]:hover .arr { transform: translateX(4px); }

@media (max-width: 760px) {
  .rshow { --w: 72vw; --h: calc(var(--w) * 1.28); }
  .rshow__stage {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  }
  .rshow__title { font-size: 1.45rem; }
  .rshow__no { font-size: 1.9rem; }
  .rshow__bar { flex-wrap: wrap; row-gap: 0.75rem; }
  .rshow__progress { order: 3; flex-basis: 100%; }
  .rshow__nav { margin-left: auto; }
  .rshow__btn .lbl { display: none; }      /* arrows only on phones, 44px targets */
  .rshow__btn { min-width: 44px; justify-content: center; font-size: 1rem; }
  .rshow__btn .arr { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rshow__slide, .rshow__link img, .rshow__meta, .rshow__body > *, .rshow__rule, .rshow__progress span { transition: none !important; }
}

.sec-treat__foot { margin-top: 2rem; }

/* ============================================================
   IN MOTION — four-image parallax strip
   Full browser width, four equal panels with no gaps (the images run
   1px wide so subpixel column edges never show a seam). Each image is
   overscanned 30% top and bottom; home.js drifts it within that margin
   at its own data-depth (alternating direction), so neighbouring panels
   visibly slide against each other as the strip crosses the screen. Without motion it simply
   sits centred.
   ============================================================ */
.pstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  overflow: hidden;
  background: var(--espresso);
}
.pstrip__panel {
  position: relative;
  overflow: hidden;
  height: clamp(300px, 37.5vw, 620px);
}
.pstrip__panel img {
  position: absolute;
  top: -30%;
  left: 0;
  width: calc(100% + 1px);
  max-width: none;
  height: 160%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  will-change: transform;
}
@media (max-width: 600px) {
  .pstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pstrip__panel { height: 62vw; }
}

/* ============================================================
   THE PLAN — copy, then the plotted four-phase care plan
   ============================================================ */
.sec-plan { background: var(--paper); }
/* copy across the container on top, the four-phase care plan in one row
   beneath it (.careplan--wide, shared-sections.css) */
.sec-plan__grid { display: block; }
.sec-plan__copy .head { margin-bottom: 1.5rem; }
.sec-plan__copy p { margin-bottom: 1.1rem; color: var(--ink-soft); max-width: 68em; }
.sec-plan__copy p strong { color: var(--ink); font-weight: 700; }
.sec-plan__copy .tlink { margin-top: 0.5rem; }

/* .careplan console styles live in shared-sections.css — the card
   prints on the homepage, all 7 condition pages, and 3 service pages. */

/* ============================================================
   FIRST VISIT — annotated frame
   ============================================================ */
.sec-firstvisit { background: var(--paper); }
.sec-firstvisit__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .sec-firstvisit__grid { grid-template-columns: 1fr; }
}
.sec-firstvisit__figure { position: relative; }
.sec-firstvisit__figure .figure__frame {
  aspect-ratio: 6 / 5;
  border-radius: 6px;
}
/* scan-frame corner brackets */
.sec-firstvisit__figure::before,
.sec-firstvisit__figure::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border: 2.5px solid var(--accent);
  z-index: 2;
  pointer-events: none;
}
.sec-firstvisit__figure::before { top: -8px; left: -8px; border-right: 0; border-bottom: 0; }
.sec-firstvisit__figure::after { bottom: 26px; right: -8px; border-left: 0; border-top: 0; }
.sec-firstvisit__notes { display: grid; gap: 1.4rem; }
.sec-firstvisit__note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}
.sec-firstvisit__note .idx {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--accent-deep);
  border: 1px solid var(--accent-deep);
  border-radius: 3px;
  width: 2.2em; height: 2.2em;
  display: grid;
  place-items: center;
  margin-top: 0.2em;
}
.sec-firstvisit__note h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.sec-firstvisit__note p { font-size: 0.9875rem; color: var(--ink-soft); max-width: 56ch; }
.sec-firstvisit__foot {
  margin-top: 1.8rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============================================================
   THE PRACTICE — team grid
   ============================================================ */
.sec-team { background: var(--paper-2); }
.sec-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.sec-team__card { text-decoration: none; display: block; min-width: 0; }
@media (max-width: 1000px) {
  .sec-team__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .sec-team__grid { grid-template-columns: 1fr; }
}
.sec-team__card .figure__frame {
  aspect-ratio: 5 / 6;
  border-radius: 6px;
  border: var(--frame-strong);
}
.sec-team__card .figure__frame img {
  transition: transform 600ms var(--ease-out), filter 600ms var(--ease-out);
}
.sec-team__card:hover .figure__frame img { transform: scale(1.04); filter: saturate(1); }
.sec-team__card .name {
  margin-top: 0.9rem;
  font-family: var(--font-heading); /* staff names set in Poppins, like the headings */
  font-weight: 600;
  font-size: 1.1rem;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.sec-team__card .name .arr {
  color: var(--accent-deep);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-ui), transform var(--dur-ui) var(--ease-out);
}
.sec-team__card:hover .name .arr { opacity: 1; transform: none; }
.sec-team__card .cred {
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sec-team__card .cred .spec { color: var(--accent-deep); }
.sec-team__card .bio {
  margin-top: 0.55rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.sec-team__foot { margin-top: calc(clamp(2rem, 5vw, 4.25rem) / 3); }

/* ============================================================
   IN THEIR WORDS — reviews (light: #EAEAED)
   ============================================================ */
.sec-voices { background: #EAEAED; }
.sec-voices__feature { max-width: 60rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-voices__feature blockquote {
  font-size: var(--fs-quote);
  line-height: 1.3;
  color: var(--ink);
}
.sec-voices__feature blockquote .qq { color: var(--accent-deep); font-style: normal; }
.sec-voices__feature blockquote .hl {
  background: linear-gradient(transparent 62%, hsl(var(--accent-h) 84% 46% / 0.55) 62%);
  padding: 0 0.08em;
}
.sec-voices__feature cite {
  display: block;
  margin-top: 1.1rem;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sec-voices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (max-width: 900px) {
  .sec-voices__grid { grid-template-columns: 1fr; }
}
.sec-voices__quote {
  background: hsl(0 0% 100% / 0.6);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.5rem 1.5rem 1.35rem;
  display: grid;
  gap: 0.9rem;
  align-content: start;
}
.sec-voices__quote .stars { color: var(--accent-deep); letter-spacing: 0.15em; font-size: 0.75rem; }
.sec-voices__quote p { color: var(--ink-soft); font-size: 0.9875rem; }
.sec-voices__quote cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sec-voices__live { margin-top: clamp(2.5rem, 5vw, 4rem); }
.sec-voices__live-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-top: 1.4rem;
  position: relative;
}
.sec-voices__live-head::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  color: var(--rule-strong);
  background: var(--tick-strip);
}
.sec-voices__live-head .mono { color: var(--accent-deep); }
.sec-voices__live-head a {
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 2px;
}
.sec-voices__live-head a:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
.elfsight-shell { margin-top: 1.6rem; min-height: 120px; }
.elfsight-fallback {
  border: 1px dashed var(--rule-strong);
  border-radius: 6px;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.elfsight-fallback a { color: var(--ink); }
.elfsight-fallback a:hover { color: var(--accent-deep); }

/* ============================================================
   THE STRAIGHT ANSWER — coverage switch + benefits console
   ============================================================ */
.sec-coverage { background: var(--paper); }
.sec-coverage__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 980px) {
  .sec-coverage__grid { grid-template-columns: 1fr; }
}
.sec-coverage__seg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  background: var(--card);
}
.sec-coverage__seg button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.95em 0.6em;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  border-right: 1.5px solid var(--ink);
  transition: background var(--dur-ui), color var(--dur-ui);
}
.sec-coverage__seg button:last-child { border-right: 0; }
.cov-ico { width: 17px; height: 17px; flex: none; }
.sec-coverage__seg button[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
}
.sec-coverage__seg button[aria-selected="true"] .cov-ico { color: var(--accent-lift); }
.sec-coverage__seg button:not([aria-selected="true"]):hover { background: var(--accent-wash); }
@media (max-width: 560px) {
  .sec-coverage__seg { grid-template-columns: 1fr; }
  .sec-coverage__seg button { border-right: 0; border-bottom: 1.5px solid var(--ink); justify-content: flex-start; }
  .sec-coverage__seg button:last-child { border-bottom: 0; }
}
.sec-coverage__panel { padding-top: 1.75rem; }
.sec-coverage__panel[hidden] { display: none; }
.sec-coverage__panel:not([hidden]) { animation: panel-rise 360ms var(--ease-press); }
@media (prefers-reduced-motion: reduce) {
  .sec-coverage__panel:not([hidden]) { animation: none; }
}
.sec-coverage__panel p { margin-bottom: 1rem; color: var(--ink-soft); max-width: 36em; }
.sec-coverage__panel p strong { color: var(--ink); font-weight: 700; }
.sec-coverage__panel .fn {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-deep);
  border-left: 3px solid var(--accent);
  padding-left: 0.9em;
}

/* benefits console */
.benefits {
  background: var(--card);
  border: var(--frame-strong);
  border-radius: 8px;
  overflow: hidden;
}
.benefits__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  background: var(--espresso);
  color: var(--paper-on-espresso-dim);
}
.benefits__head .mono-xs:first-child { color: var(--accent-lift); }
.benefits [data-benefits-body] { padding: 1.5rem; }
.benefits__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}
.benefits__field.span-2 { grid-column: span 2; }
@media (max-width: 560px) {
  .benefits__grid { grid-template-columns: 1fr; }
  .benefits__field.span-2 { grid-column: auto; }
}
.benefits__field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}
.benefits__field label .opt { text-transform: none; letter-spacing: 0.02em; }
.benefits__field input {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 0.6em 0.75em;
  font-size: 1rem;
  transition: border-color var(--dur-ui), box-shadow var(--dur-ui);
}
.benefits__field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-wash-2);
}
.benefits__field.has-error input { border-color: var(--accent-deep); }
.benefits.is-selfpay [data-insurance-field] { display: none; }
.benefits__note {
  margin-top: 1.1rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  max-width: 46em;
}
.benefits__actions { margin-top: 1.25rem; }
.benefits__fail {
  display: none;
  margin-top: 1.1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--accent-deep);
  border-radius: 4px;
  font-size: 0.9375rem;
}
.benefits.has-failed .benefits__fail { display: block; }
.benefits__fail a { font-weight: 600; color: var(--accent-deep); }
.benefits.is-sending { opacity: 0.6; pointer-events: none; }
.benefits__success { padding: 2rem 1.5rem; }
.benefits__success .intake__stamp { margin-bottom: 1rem; }
.benefits__success h3 { margin-bottom: 0.5rem; }
.benefits__success p { color: var(--ink-soft); max-width: 34em; }