/* ==========================================================================
   Ascend scroll scenes (2026-10-22)
   Page-level styles for the scroll scenes on the homepage ("What we treat",
   the care team) and the guide heroes. Driven by the unmodified
   scrollcraft engine in /assets/scroll/scrollcraft.js plus
   /assets/scroll/ascend-scroll.js.

   The engine's own stylesheet is NOT loaded: it carries global resets (body,
   img, selection, scrollbar) that would restyle the rest of the site. Only its
   device mechanics are restated here, and only under html.asc-sc-live, which
   ascend-scroll.js sets once it mounts. Without JavaScript every scene is a
   complete static layout.
   ========================================================================== */

/* ---- device mechanics (from engine/scrollcraft.css, scoped) ------------- */
html.asc-sc-live {
  --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sc-z-stage: 1;
}
html.asc-sc-live .sc-act--pinned { position: relative; }
html.asc-sc-live .sc-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  z-index: var(--sc-z-stage);
}
html.asc-sc-live [data-sc-pan] { will-change: transform; }
html.asc-sc-live [data-sc-reveal] { will-change: clip-path; }
html.asc-sc-live [data-sc-parallax] { will-change: transform; }
html.asc-sc-live [data-sc-in],
html.asc-sc-live [data-sc-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
html.asc-sc-live [data-sc-in].sc-in,
html.asc-sc-live [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.asc-sc-live [data-sc-in],
  html.asc-sc-live [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
  html.asc-sc-live [data-sc-parallax],
  html.asc-sc-live [data-sc-pan] { transform: none !important; }
  html.asc-sc-live [data-sc-reveal] { clip-path: none !important; }
}

/* ==========================================================================
   1. HOMEPAGE: "What we treat" shelf
   A still layout: intro, then the three groups in a grid. (It used to pan
   sideways under scroll; the owner asked for it to stay put, 2026-10-22.)
   ========================================================================== */
.svpan {
  --svp-gold: var(--gold, #e4c692);
  --svp-gold-ink: var(--gold-ink, #9a6a22);
  --svp-navy: var(--navy, #0d2c4a);
  --svp-line: var(--hairline, rgba(13,44,74,0.12));
  position: relative;
  padding: clamp(64px, 8vw, 112px) 0;
}
.svpan__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}
.svpan__intro { grid-column: 1 / -1; max-width: 44rem; margin-bottom: clamp(16px, 2vw, 28px); }
.svpan__lede {
  margin: 14px 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--svp-navy);
  text-wrap: balance;
}
.svpan__group {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper, #fffdf8);
  border: 1px solid var(--svp-line);
  border-radius: var(--r-3, 12px);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(13,44,74,0.05), 0 10px 28px rgba(13,44,74,0.07);
}
.svpan__plate { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream-deep, #f3ede1); }
.svpan__plate picture { display: block; height: 100%; }
.svpan__plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svpan__body { display: flex; flex-direction: column; padding: 18px 20px 14px; }
.svpan__title {
  margin: 0 0 6px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--svp-gold-ink);
}
.svpan__list { list-style: none; margin: 0; padding: 0; }
.svpan__list li + li { border-top: 1px solid var(--svp-line); }
.svpan__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none;
  color: inherit;
}
.svpan__name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--svp-navy);
  transition: color 160ms ease-out;
}
.svpan__desc {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-3, #5a6b80);
  text-align: right;
}
.svpan__list a:hover .svpan__name,
.svpan__list a:focus-visible .svpan__name { color: var(--teal, #2f7d9c); }
.svpan__list a:focus-visible { outline: 2px solid var(--teal, #2f7d9c); outline-offset: 2px; border-radius: 4px; }
.svpan__end {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: clamp(8px, 1.4vw, 18px);
}
.svpan__end p { margin: 0; font-size: 0.95rem; color: var(--ink-2, #33475b); }

@media (max-width: 900px) {
  .svpan__rail { grid-template-columns: 1fr; }
  .svpan__desc { display: none; }
}

/* ==========================================================================
   2. HOMEPAGE: care team
   2a. The sky band: Tampa Bay at sunrise with a live-oak canopy above it. The
       canopy lifts away faster than the page; the bay lags; type rides at 1x.
   ========================================================================== */
.teamsky {
  position: relative;
  height: clamp(420px, 72vh, 720px);
  overflow: hidden;
  isolation: isolate;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.teamsky__far,
.teamsky__near { position: absolute; left: 0; right: 0; pointer-events: none; }
.teamsky__far { inset: -60px 0 -60px 0; z-index: 0; }
.teamsky__far picture,
.teamsky__far img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 62%; }
.teamsky__near { top: -2%; z-index: 2; }
.teamsky__near img { display: block; width: 100%; max-width: none; height: auto; }
.teamsky__floor {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: 42%;
  background: linear-gradient(to bottom, rgba(250,247,241,0) 0%, var(--cream, #faf7f1) 92%);
  pointer-events: none;
}
.teamsky__copy {
  position: absolute; z-index: 4;
  left: 50%; bottom: clamp(36px, 7vh, 72px);
  translate: -50% 0;
  width: min(44rem, calc(100% - 48px));
  text-align: center;
}
.teamsky__copy h2 { margin: 12px 0 0; text-wrap: balance; }
.teamsky__copy h2 em { font-style: italic; color: var(--gold-ink, #9a6a22); }
@media (max-width: 760px) {
  .teamsky { height: clamp(360px, 62svh, 520px); }
  .teamsky__near { left: -40%; right: -40%; }
  .teamsky__far img { object-position: 30% 62%; }
}

/* 2b. The roster thread (signature). A gold spine runs down the gap between
   the two columns (down the left gutter on phones) and ties into each
   provider as it reaches them; that card lights. Drawn by ascend-scroll.js. */
.team-roster { position: relative; }
.team-thread {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.team-roster .team-grid,
.team-roster .team-group__label { position: relative; z-index: 1; }
.team-thread__spine,
.team-thread__tie {
  fill: none;
  stroke: var(--gold, #e4c692);
  stroke-width: 2;
  stroke-linecap: round;
}
.team-thread__tie {
  stroke-dasharray: var(--len, 40);
  stroke-dashoffset: var(--len, 40);
  transition: stroke-dashoffset 520ms cubic-bezier(0.23, 1, 0.32, 1);
}
.team-thread__tie.is-on { stroke-dashoffset: 0; }
.team-thread__knot {
  fill: var(--gold-ink, #9a6a22);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.6);
  transition: opacity 260ms ease-out 260ms, transform 360ms cubic-bezier(0.23, 1, 0.32, 1) 260ms;
}
.team-thread__knot.is-on { opacity: 1; transform: none; }
/* Room for the thread: a wider gutter between the columns, and a left lane
   on one-column layouts. Only once the thread exists (ascend-scroll.js). */
.team-roster.has-thread .team-grid { column-gap: clamp(56px, 6vw, 96px); }
@media (max-width: 1000px) { .team-roster.has-thread { padding-left: 26px; } }
.team-thread__spine { stroke-width: 2.5; }
.team-thread__bead {
  fill: var(--gold, #e4c692);
  stroke: var(--gold-ink, #9a6a22);
  stroke-width: 1.5;
}
.team-thread__bead.is-done { fill: var(--gold-ink, #9a6a22); }
.team-card { transition: transform var(--d-med, 300ms) var(--ease-out, ease-out), box-shadow var(--d-med, 300ms) var(--ease-out, ease-out), border-color 400ms ease-out; }
.team-card.is-linked { border-color: rgba(212,176,112,0.75); }
.team-card.is-linked::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .team-thread__tie, .team-thread__knot, .team-card { transition: none; }
}

/* ==========================================================================
   3. GUIDES: a layered photo window beside the title (comparison and GLP-1
   heat guides). Far plate lags the page, the person rides slower than the
   page, the near leaves overtake both. Static, it is one composed picture.
   ========================================================================== */
.guide-hero--scene .gscene-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.guide-hero--scene .gscene-copy { min-width: 0; }
.gscene {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: 78vh;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cream-deep, #f3ede1);
  box-shadow: 0 4px 10px rgba(13,44,74,0.06), 0 22px 54px rgba(13,44,74,0.14);
}
.gscene > div { position: absolute; pointer-events: none; }
.gscene img { display: block; width: 100%; height: auto; max-width: none; }
.gscene__far { inset: -8% 0; }
.gscene__far picture, .gscene__far img { width: 100%; height: 100%; object-fit: cover; }
.gscene__mid { left: 30%; right: 2%; bottom: -12%; }
.gscene__near { left: -6%; right: -6%; bottom: -30%; }
.gscene--glp .gscene__mid { left: 24%; right: 4%; bottom: -10%; }
.gscene--glp .gscene__near { left: 44%; right: -16%; bottom: -12%; }
@media (max-width: 860px) {
  .guide-hero--scene .gscene-grid { grid-template-columns: 1fr; }
  .gscene { aspect-ratio: 5 / 4; max-height: none; }
  .gscene__far { inset: -10% 0; }
  .gscene__mid { left: 34%; right: 2%; bottom: -30%; }
  .gscene__near { bottom: -44%; }
  .gscene--glp .gscene__mid { left: 30%; right: 4%; bottom: -26%; }
  .gscene--glp .gscene__near { left: 52%; right: -14%; bottom: -24%; }
}