/* ============================================================
   CWS — PREMIUM PASS (2026-08-09)
   Loaded AFTER styles.css on index.html only (staged rollout).
   Goal: elevate every homepage section to a premium, distinct,
   modern standard — Aetna/Parsley calibre — WITHOUT changing any
   copy, WITHOUT introducing new colors (green / paper / brass /
   steel only), and with a tighter, more substantial vertical
   rhythm (less cavernous whitespace).
   Type system unchanged: Fraunces (voice) / Plex Sans (body) /
   Plex Mono (instrument labels).
   ============================================================ */

:root {
  /* Tighter, consistent premium rhythm (down from 100–120px). */
  --sp-section: clamp(60px, 6.4vw, 88px);
  --sp-section-sm: clamp(48px, 5vw, 64px);
  --card-radius: 3px;
  --lift: 0 24px 50px -34px rgba(21,54,31,.42);
  --hair: rgba(21,54,31,.12);
}

/* ---------- shared: premium kicker (unboxed brass tick) ---------- */
.eyebrow,
.op-band .op-eyebrow,
.esc-viz .eyebrow,
.content-lede .eyebrow,
.lp-band .lp-head .eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.26em;
}

/* ---------- shared: premium buttons ---------- */
.cta {
  padding: 14px 26px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: var(--card-radius);
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.cta--clay { box-shadow: 0 12px 26px -16px rgba(118,83,20,.6); }
.cta--clay:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(118,83,20,.7); }
.cta--ghost { border-width: 1px; }

/* ---------- shared: premium card baseline ---------- */
.lp-card, .tile, .quote-card, .esc-step, .plateau-grid li {
  border-radius: var(--card-radius);
}

/* ============================================================
   A · HERO — cinematic, legible, premium instrument rail
   ============================================================ */
.hero-bleed {
  min-height: min(84vh, 780px);
  padding: 150px 0 76px;
}
/* Cleaner cinematic wash: photo breathes on the right, copy stays
   crisp on the left. Deeper ink at the base for the marquee seam. */
.hero-bleed::after {
  background:
    linear-gradient(180deg, rgba(14,39,22,.28) 0%, rgba(14,39,22,.52) 58%, rgba(14,39,22,.88) 100%),
    linear-gradient(90deg, rgba(14,39,22,.74) 0%, rgba(14,39,22,.34) 46%, rgba(14,39,22,.04) 78%);
}
.hero-bleed .eyebrow-row {
  letter-spacing: 0.32em;
  margin-bottom: 30px;
}
.hero-bleed h1 {
  font-weight: 340;
  letter-spacing: -0.032em;
  line-height: 0.97;
  margin-bottom: 26px;
}
.hero-bleed .lede {
  color: rgba(247,244,234,.94);
  max-width: 52ch;
  line-height: 1.58;
  margin-bottom: 36px;
}
.hero-bleed .hero-ctas { gap: 16px; }

/* Stat rail: reads like a premium chart legend, not a cramped column. */
.hero-bleed .hero-stats {
  min-width: 230px;
  padding-left: clamp(28px, 2.6vw, 40px);
  border-left: 1px solid rgba(247,244,234,.28);
}
.hero-bleed .hero-stats::before {
  content: "At a glance";
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247,244,234,.6);
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(247,244,234,.14);
}
.hero-bleed .hero-stats > div { padding: 20px 0; }
.hero-bleed .hero-stats .n {
  font-weight: 360;
  font-size: clamp(40px, 3.4vw, 52px);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.hero-bleed .hero-stats .l {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(247,244,234,.7);
}
/* Below desktop: drop the left rail and lay the stats out as a clean vertical
   ledger — brass number + aligned label per row, hairline dividers between.
   The old 3-across row read as jumbled: the numbers landed on different
   baselines and the 2-line labels wrapped unevenly. */
@media (max-width: 900px) {
  /* Hero is responsive again: the 150px top padding + min(84vh) min-height were
     desktop-only values with no mobile override, so the copy + CTAs got shoved
     down and off-screen on phones. Let content define the height instead. */
  .hero-bleed { min-height: auto; padding: 64px 0 52px; }
  .hero-bleed .hero-stats {
    flex-direction: column; flex-wrap: nowrap; gap: 0;
    padding-left: 0; border-left: 0; min-width: 0;
    border-top: 1px solid rgba(247,244,234,.24);
    padding-top: 20px; margin-top: 30px;
  }
  .hero-bleed .hero-stats::before {
    flex-basis: auto; width: auto;
    border-bottom: 0; padding-bottom: 0; margin-bottom: 6px;
  }
  .hero-bleed .hero-stats > div {
    display: flex; align-items: baseline; gap: 18px;
    padding: 15px 0;
    border-top: 1px solid rgba(247,244,234,.16);
  }
  .hero-bleed .hero-stats > div:first-of-type { border-top: 0; }
  .hero-bleed .hero-stats .n {
    font-size: 36px; line-height: 1; margin-bottom: 0;
    min-width: 92px; flex-shrink: 0;
  }
  .hero-bleed .hero-stats .l { max-width: none; margin: 0; }
}
@media (max-width: 640px) {
  .hero-bleed { padding: 40px 0 44px; }
  .hero-bleed .hero-stats .n { font-size: 32px; min-width: 82px; }
  .hero-bleed .hero-stats > div { gap: 16px; padding: 14px 0; }
}

/* ============================================================
   MARQUEE — slim, quiet, premium editorial ticker (was a billboard)
   ============================================================ */
.marquee {
  padding: 16px 0;
  border-top: 1px solid rgba(233,196,106,.22);
  border-bottom: 1px solid rgba(233,196,106,.22);
}
.marquee-track {
  animation-duration: 64s;
  font-weight: 420;
  font-size: clamp(14px, 1.35vw, 18px);
  letter-spacing: 0.01em;
  line-height: 1.2;
  font-variation-settings: "opsz" 40;
  color: rgba(247,244,234,.86);
}
.marquee-group { gap: 44px; padding-right: 44px; }
.marquee-track em { color: var(--accent-light); font-weight: 420; }
.marquee-track .dot { color: rgba(233,196,106,.82); }

/* ============================================================
   B · THE PROBLEM — centered editorial statement (unboxed kicker)
   ============================================================ */
.op-band {
  padding: var(--sp-section) 0;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(154,107,24,.07) 0%, transparent 62%),
    var(--bg-2);
}
.op-band .shell { max-width: 900px; }
.op-band .op-eyebrow {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--accent);
  letter-spacing: 0.3em;
  margin-bottom: 26px;
  position: relative;
}
.op-band .op-eyebrow::after {
  content: "";
  display: block;
  width: 34px; height: 2px;
  background: var(--accent);
  margin: 16px auto 0;
}
.op-band .op-h {
  font-weight: 340;
  font-size: clamp(36px, 5.4vw, 62px);
  letter-spacing: -0.028em;
  line-height: 1.03;
  margin-bottom: 22px;
}
.op-band .op-p { font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.6; }

/* ============================================================
   C · PATHWAY — premium 3×2 stepper (was 6 crammed in one row)
   Scroll-tied ascending brass line kept as the signature motif.
   ============================================================ */
.esc-viz { padding: var(--sp-section) 0 calc(var(--sp-section) - 8px); }
.esc-viz--pathway .shell { max-width: 1200px; }
.esc-viz h2 { margin-bottom: 40px; font-weight: 360; }

/* The ascending line becomes a slimmer signature band above the stages. */
.esc-viz--pathway .esc-track {
  height: clamp(120px, 12vw, 168px);
  margin-bottom: clamp(28px, 3vw, 40px);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hair);
}

/* Six stages, three across, two rows — room to read and to breathe. */
.esc-content--six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.esc-content--six .esc-step {
  min-height: 0;
  padding: 26px 26px 24px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-top: 2px solid var(--slate-2);
  box-shadow: 0 16px 38px -34px rgba(21,54,31,.4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.esc-content--six .esc-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--lift);
}
.esc-viz--pathway .esc-step--02,
.esc-viz--pathway .esc-step--03,
.esc-viz--pathway .esc-step--04,
.esc-viz--pathway .esc-step--05,
.esc-viz--pathway .esc-step--06 { border-top-color: var(--accent); }
.esc-content--six .esc-step .s-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.esc-content--six .esc-step .s-h {
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin-bottom: 10px;
  font-variation-settings: "opsz" 60;
}
.esc-content--six .esc-step .s-p { font-size: 13.5px; line-height: 1.55; }
.esc-step .s-sub li { font-size: 12.5px; }

/* The evaluation stage — the step the brand owns — reads as the anchor. */
.esc-viz--pathway .esc-step--key {
  border-top: 2px solid var(--accent-deep);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--paper) 44%);
  box-shadow: 0 26px 50px -30px rgba(118,83,20,.5);
}
.esc-viz--pathway .esc-step--key .s-k { color: var(--accent-deep); border-bottom-color: rgba(118,83,20,.24); }

.pathway-caption {
  margin-top: 40px;
  padding-top: 28px;
  font-size: clamp(18px, 1.9vw, 22px);
  color: var(--ink-soft);
}
@media (max-width: 940px) { .esc-content--six:not(.esc-rail) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .esc-content--six:not(.esc-rail) { grid-template-columns: 1fr; } }

/* ============================================================
   PATHWAY — horizontal rail (replaced the sticky stacking deck,
   which made the page tall). The journey reads left to right,
   one stage after the next; the section is one card tall at
   every width. Drag with the mouse, swipe on touch.
   ============================================================ */
.esc-viz--pathway { overflow: visible; }
.esc-viz--pathway .esc-track { display: none; }  /* the rail replaces the SVG line */

.esc-content--six.esc-rail {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: clamp(280px, 82vw, 400px);
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 6px 6px 20px;
  margin: 0 -6px;
  scrollbar-width: none;
  cursor: grab;
  outline-offset: 4px;
}
.esc-rail::-webkit-scrollbar { display: none; }
.esc-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.esc-rail .esc-step { scroll-snap-align: start; }
.esc-rail .esc-step:hover { transform: none; }  /* hover-lift fights the drag */

/* mono scroll cue, tucked against the heading's right edge */
.rail-hint {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-deep);
  text-align: right;
  margin: -30px 0 14px;
}
.rail-hint .arrow { letter-spacing: 0; }

/* thin brass thumb standing in for the hidden scrollbar */
.rail-progress {
  position: relative; height: 2px; margin-top: 4px;
  background: var(--hair);
}
.rail-progress i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 33%;
  background: var(--accent);
}

/* ============================================================
   D · WHY CWS — three premium cards with indexed hierarchy
   ============================================================ */
.lp-band { padding: var(--sp-section) 0; }
.lp-band .lp-head { margin-bottom: 44px; max-width: 720px; }
.lp-band .lp-head h2 { font-weight: 360; font-size: clamp(30px, 3.6vw, 44px); }
.lp-grid { gap: 18px; }
.lp-card {
  padding: 34px 30px 32px;
  border: 1px solid var(--hair);
  border-top: 2px solid var(--accent);
  box-shadow: 0 16px 40px -36px rgba(21,54,31,.4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.lp-card:hover { transform: translateY(-3px); box-shadow: var(--lift); }
.lp-card .lp-k {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
  letter-spacing: 0.22em;
}
.lp-card h3 { font-size: clamp(23px, 2.1vw, 28px); font-weight: 400; margin-bottom: 14px; }
.lp-card p { font-size: 14.5px; line-height: 1.62; }

/* ============================================================
   CREDENTIAL RAIL — quiet premium proof strip
   ============================================================ */
.trust-strip { background: var(--paper); }
.trust-strip .shell { padding-block: 26px; }
.trust-strip li { padding: 4px 28px 4px 0; }
.trust-strip li + li { padding-left: 28px; }
.trust-strip .k { font-size: 10px; letter-spacing: 0.2em; margin-bottom: 6px; }
.trust-strip .v { font-size: 13px; line-height: 1.4; color: var(--ink); }

/* ============================================================
   E · PLATEAU SELF-CHECK — refined indicator ledger
   ============================================================ */
.content-section { padding: var(--sp-section) 0; }
.content-lede { margin-bottom: 44px; gap: 44px; }
.content-lede .eyebrow { letter-spacing: 0.24em; }
.content-lede h2 { font-weight: 360; }
.content-lede p { font-size: 16px; }

.plateau-grid { gap: 12px; }
.plateau-grid li {
  padding: 20px 20px 18px;
  background: var(--paper);
  border: 1px solid var(--hair);
  font-size: 14px;
  gap: 14px;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plateau-grid li:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--lift);
}
.plateau-grid .pi-n {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 600;
}
.plateau-close { margin-top: 34px; padding-top: 30px; }
.plateau-close p { font-size: clamp(18px, 1.9vw, 22px); font-weight: 400; }

/* ============================================================
   F · WHY AN ASC — premium dark theater + spec sheet
   ============================================================ */
/* styles.css collapses padding-top on adjacent .content-sections, which only
   reads right when both share a ground. Restore it at every background change
   so a dark/tint band never starts flush against its own content. */
.content-section + .content-section.on-dark,
.content-section + .content-section.on-tint,
.content-section.on-dark + .content-section:not(.on-dark),
.content-section.on-tint + .content-section:not(.on-tint) {
  padding-top: var(--sp-section);
}
.content-section.on-dark { background: var(--ink-deep); }
.content-section.on-dark h3 {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  font-variation-settings: "opsz" 144;
}
.two-col { gap: 64px; align-items: center; }
.content-section.on-dark .two-col p { font-size: 15.5px; line-height: 1.68; }
.content-section.on-dark .two-col .side {
  background: rgba(247,244,234,.045);
  border: 1px solid rgba(247,244,234,.14);
  border-radius: var(--card-radius);
  padding: 30px 30px 24px;
}
.two-col .side h3, .two-col .side h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(247,244,234,.14);
}
.two-col .side li { padding: 12px 0; font-size: 14px; }
.two-col .side li strong { font-family: var(--serif); font-weight: 500; font-size: 16px; letter-spacing: -0.01em; }

/* ============================================================
   G · FOR PROVIDERS — four premium tiles, one clean row
   ============================================================ */
.content-section.on-tint { background: var(--bg-2); }
.content-section.on-tint .tile-grid { gap: 16px; }
/* Four short tiles read best in one clean row — only when there are exactly 4,
   and only on wide viewports. The :has() selector outweighs the responsive
   media rules below on specificity, so it must be gated by min-width itself or
   it would force 4 slivers on mobile. */
@media (min-width: 1041px) {
  .content-section.on-tint .tile-grid:has(> .tile:nth-child(4):last-child) {
    grid-template-columns: repeat(4, 1fr);
  }
}
.tile {
  padding: 30px 26px 26px;
  border: 1px solid var(--hair);
  border-top: 2px solid var(--accent);
  background: var(--paper);
  box-shadow: 0 16px 40px -36px rgba(21,54,31,.4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--lift); border-color: var(--accent); }
.tile .t-n {
  font-size: 10.5px; letter-spacing: 0.2em;
  padding-bottom: 14px; margin-bottom: 2px;
  border-bottom: 1px solid var(--hair);
}
.tile h3 { font-size: 21px; line-height: 1.18; }
@media (max-width: 1040px) { .content-section.on-tint .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  /* On phones the four tiles become a swipe rail (one card + a peek of the
     next) instead of a four-card-tall stack — keeps the page short. */
  .content-section.on-tint .tile-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 4px 4px 16px;
    margin: 0 -4px;
  }
  .content-section.on-tint .tile-grid::-webkit-scrollbar { display: none; }
  .content-section.on-tint .tile { scroll-snap-align: start; }
}

/* ============================================================
   H · TWO PATHS — premium comparison (off-palette red retoned)
   ============================================================ */
.loop-viz { padding: var(--sp-section) 0; }
.loop-grid { border-color: var(--hair); box-shadow: 0 30px 60px -46px rgba(21,54,31,.5); }
.loop-col { padding: 46px 42px; }
.loop-col h3 { font-size: clamp(24px, 2.3vw, 30px); font-weight: 400; margin-bottom: 26px; }
.loop-col .steps li { font-size: 14px; padding: 15px 0 15px 32px; }
.loop-col .outcome { border-radius: var(--card-radius); padding: 16px 18px; margin-top: 24px; }
/* keep the brand palette: the old pathway reads as faded steel, not red */
.loop-col.theirs .outcome {
  color: var(--slate);
  background: var(--bg-2);
  border-left: 3px solid var(--slate-2);
}
.loop-col.theirs .outcome strong { color: var(--ink-soft); }
.loop-col.ours .outcome {
  color: var(--olive-deep);
  background: var(--olive-soft);
  border-left: 3px solid var(--olive);
}

/* ============================================================
   I · TESTIMONIALS — refined quote cards
   ============================================================ */
.quote-grid { gap: 20px; margin-top: 40px; }
.quote-card {
  padding: 34px 30px 26px;
  border: 1px solid var(--hair);
  box-shadow: 0 16px 40px -36px rgba(21,54,31,.4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.quote-card:hover { transform: translateY(-3px); box-shadow: var(--lift); }
.quote-card::before {
  font-size: 64px;
  color: var(--accent);
  opacity: 0.2;
  top: 14px; left: 24px;
}
.quote-card blockquote {
  font-weight: 400;
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.44;
  padding-top: 20px;
}
.quote-card blockquote em { color: var(--accent-deep); }
@media (max-width: 640px) {
  /* Three testimonials as a swipe rail on phones — same rhythm as the
     provider tiles, and two card-heights shorter. */
  .quote-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 4px 4px 16px;
    margin: 0 -4px;
  }
  .quote-grid::-webkit-scrollbar { display: none; }
  .quote-card { scroll-snap-align: start; }
}

/* ============================================================
   VIRTUAL ACCESS STRIP — premium seam
   ============================================================ */
.telewound-strip { padding: 28px 0; background: var(--ink-deep); }
.telewound-strip:hover { background: var(--ink); }
.telewound-strip .tw-label { font-family: var(--sans); font-size: 13.5px; color: rgba(247,244,234,.7); }
.telewound-strip .tw-url {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-light);
}

/* ============================================================
   J · FINAL CTA — premium close (tighter)
   ============================================================ */
.cta-band { padding: clamp(76px, 8.5vw, 100px) 0; }
.cta-band h2 { font-weight: 380; font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.025em; }
.cta-band p { font-size: 17px; }

/* ============================================================
   CHROME — header / nav polish (homepage; rolls out on approval)
   ============================================================ */
.header { background: rgba(247,244,234,.82); }
.nav { padding-block: 16px; }
.nav-links { font-size: 13.5px; }
.header-cta { padding: 12px 22px; }
.brand-name small { letter-spacing: 0.18em; }

/* Footer: a touch tighter, premium seam */
.foot { padding: 72px 0 40px; }

/* ============================================================
   WHOLE-SITE ROLLOUT (2026-08-09) — subpage components
   premium.css now links on every page; these align the subpage-
   specific components to the same premium rhythm, hairline
   borders, radius, and quiet hover as the homepage. Palette +
   copy unchanged.
   ============================================================ */

/* Photo showcase grid (For Providers, Why ASC, Conditions) */
.showcase { padding: var(--sp-section) 0; }
.showcase-head { margin-bottom: 44px; }
.showcase-head h2 { font-weight: 360; }
.show-card { border-radius: var(--card-radius); }

/* Dark outcome / promise bar (For Providers) */
.outcome-bar { padding: var(--sp-section) 0; background: var(--ink-deep); }
.outcome-bar .ob-lede { margin-bottom: 40px; }
.outcome-bar h2 { font-weight: 380; }
.ob-grid article { padding: 34px 32px 30px; }

/* Dark continuum band, if present */
.continuum-band { padding: var(--sp-section) 0; }
.continuum-band .band-head { margin-bottom: 40px; }

/* Split-photo block (Why ASC) */
.split-photo { min-height: 560px; }
.split-photo .txt { padding: 72px 60px; }
.split-photo h2 { font-weight: 360; }

/* Procedure list rows (Why ASC) */
.proc-list { border-radius: var(--card-radius); overflow: hidden; }
.proc-row { transition: background .25s var(--ease), transform .25s var(--ease); }
.proc-row:hover { transform: translateY(-2px); }

/* Podiatric procedure grid (Why ASC, Advanced Wound Care) */
.pod-grid { border-radius: var(--card-radius); overflow: hidden; margin: 40px 0 32px; }
.pod-card { transition: background .25s var(--ease); }
.pod-card:hover { background: var(--bg); }
.pod-callout { border-radius: var(--card-radius); }

/* Floorplan figure (Why ASC) */
.floorplan { padding: var(--sp-section) 0; }
.floorplan h2 { font-weight: 360; }
.fp-wrap { border-radius: var(--card-radius); border-color: var(--hair); }

/* Photo collage (Why ASC) */
.collage { padding: calc(var(--sp-section) - 20px) 0; }
.collage .c { border-radius: var(--card-radius); border-color: var(--hair); }

/* Condition photo cards (Conditions) */
.cond-card { border-radius: var(--card-radius); }
.cond-grid-text { margin-top: 44px; }

/* Dr. Wounds badge (For Providers, Surgical Evaluation) */
.drwounds-badge { border-radius: var(--card-radius); }

/* Editorial pull-quote note (About) */
.why-note { margin-top: 48px; gap: 48px; }

/* Any generic .section base blocks inherit the tighter rhythm too */
section.showcase, section.floorplan, section.dial, section.loop-viz,
section.op-band, section.lp-band, section.esc-viz { border-bottom: 1px solid var(--hair); }

/* ============================================================
   H · TWO PATHS — keep old-vs-CWS side by side on mobile (Adam)
   The comparison only reads as a contrast when the two columns
   sit next to each other. Override the stack and tighten the
   type scale so both fit on a phone.
   ============================================================ */
@media (max-width: 820px) {
  /* Row-align the two columns: eyebrow / heading / steps / outcome share
     row heights via subgrid, so the lists start together and the outcome
     boxes sit side by side at the same height instead of ragged bottoms. */
  .loop-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; }
  .loop-col { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
  .loop-col.theirs { border-right: 1px solid var(--rule); border-bottom: 0; }
}
/* ============================================================
   H · TWO PATHS — custom comparison ledger.
   Not a stock two-column table: each column runs its steps as
   numbered chips on a connecting spine. The old pathway's spine
   is dashed grey and dead-ends at a stop bar; the CWS spine is
   brass and closes in a small loop. A "vs" badge sits on the
   seam. The old column recedes (slate), ours advances (ink+brass).
   ============================================================ */
.loop-grid { position: relative; grid-template-rows: auto auto auto auto; }
/* Row-align the two columns at every width: eyebrow / heading / steps /
   outcome share heights via subgrid, so chips line up across the seam
   and the verdict plaques sit level. */
.loop-col { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
/* the spine ends with its own content — the old pathway stops early,
   and the empty run beneath it is part of the point */
.loop-col .steps { align-self: start; }
.loop-vs {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-indent: 0.14em; /* recenter: tracking pads the right of the last glyph */
  color: var(--accent-deep);
  z-index: 2;
}

/* column headers read as plaques over a shared rule */
.loop-col .col-k {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-ink);
  margin-bottom: 20px;
}

/* the losing column recedes */
.loop-col.theirs h3 { color: var(--slate); }
.loop-col.theirs .steps li { color: var(--slate); }

/* steps: numbered chips on a spine instead of dashed dividers */
.loop-col .steps { position: relative; counter-reset: step; }
.loop-col .steps::before {
  content: ""; position: absolute; left: 12px; top: 16px; bottom: 10px;
  width: 0; z-index: 0;
}
.loop-col.theirs .steps::before { border-left: 1px dashed var(--slate-2); }
.loop-col.ours .steps::before { border-left: 1px solid var(--accent); opacity: 0.55; }
.loop-col .steps li {
  border-bottom: 0;
  padding: 9px 0 15px 40px;
  position: relative;
}
.loop-col .steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 8px;
  width: 25px; height: 25px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.06em; text-indent: 0.06em;
  z-index: 1;
}
.loop-col.theirs .steps li::before {
  background: var(--bg-2);
  border: 1px solid var(--slate-2);
  color: var(--slate);
}
.loop-col.ours .steps li::before {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--paper);
}
/* spine terminals: theirs stops dead, ours closes the loop */
.loop-col .steps::after { content: ""; position: absolute; z-index: 1; }
.loop-col.theirs .steps::after {
  left: 6px; bottom: 2px; width: 13px; height: 0;
  border-top: 2px solid var(--slate-2);
}
.loop-col.ours .steps::after {
  left: 7px; bottom: -1px; width: 11px; height: 11px;
  border: 1.5px solid var(--accent); border-radius: 50%;
  background: var(--paper);
}

/* verdict plaques */
.loop-col .outcome strong {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 6px;
}

@media (max-width: 560px) {
  .loop-col { padding: 22px 13px; }
  .loop-col .col-k { font-size: 8.5px; letter-spacing: 0.1em; gap: 6px; margin-bottom: 14px; }
  .loop-col .col-k::before { width: 7px; height: 7px; }
  .loop-col h3 { font-size: 15.5px; line-height: 1.2; margin-bottom: 16px; max-width: none; }
  .loop-col .steps::before { left: 9px; top: 12px; bottom: 8px; }
  .loop-col .steps li { font-size: 11.5px; line-height: 1.4; padding: 7px 0 12px 28px; }
  .loop-col .steps li::before { width: 19px; height: 19px; font-size: 7px; top: 7px; }
  .loop-col.theirs .steps::after { left: 4px; width: 11px; }
  .loop-col.ours .steps::after { left: 4.5px; width: 9px; height: 9px; }
  .loop-col .outcome { font-size: 10.5px; padding: 10px 11px; margin-top: 14px; }
  .loop-col .outcome strong { font-size: 8px; letter-spacing: 0.14em; margin-bottom: 3px; }
  .loop-vs { width: 32px; height: 32px; font-size: 8.5px; }
}

/* ============================================================
   IMAGERY PASS (2026-08-11) — real-photo moments, palette-graded
   (duotone derivatives generated from the originals; see CHANGELOG)
   ============================================================ */

/* The problem: copy left, graded conservative-care photo right */
.op-band .op-shell {
  max-width: 1140px;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
  text-align: left;
}
.op-band .op-shell .op-h { font-size: clamp(32px, 3.8vw, 54px); }
.op-band .op-shell .op-eyebrow::after { margin-left: 0; }
.op-band .op-shell .op-p { margin: 0; }
.op-figure { margin: 0; }
.op-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.02;
  object-fit: cover;
  object-position: 50% 72%;
  border-radius: var(--card-radius);
  border: 1px solid var(--hair);
}
.op-figure figcaption {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 10px;
}
@media (max-width: 860px) {
  .op-band .op-shell { grid-template-columns: 1fr; text-align: center; }
  .op-band .op-shell .op-eyebrow::after { margin-left: auto; }
  .op-band .op-shell .op-p { margin: 0 auto; }
  .op-figure { max-width: 440px; margin: 0 auto; width: 100%; }
  .op-figure img { aspect-ratio: 16 / 10; }
}

/* Quiet instrument-strip divider before the plateau checklist */
.instrument-strip {
  height: clamp(110px, 15vw, 190px);
  background: url("assets/images/instruments-strip-duo.jpg") center / cover no-repeat;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

/* Inside Capital Surgical Center: figure tryptic on the dark ground */
.asc-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid rgba(247, 244, 234, 0.14);
}
.asc-figures figure { margin: 0; }
.asc-figures img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--card-radius);
  border: 1px solid rgba(247, 244, 234, 0.16);
}
.asc-figures figcaption {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(242, 245, 240, 0.62);
}
.asc-figures .f-n { color: var(--accent-light); }
.asc-figures figure:nth-child(3) img { object-position: 50% 68%; }
.surgeon-band .eyebrow { color: var(--accent); }
@media (max-width: 640px) {
  .asc-figures {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 44px 6px 4px;
    margin: 44px -6px 0;
    scrollbar-width: none;
  }
  .asc-figures::-webkit-scrollbar { display: none; }
  .asc-figures figure { scroll-snap-align: start; }
}

/* Continuity band: Dr. Johnson portrait + the one-surgeon promise */
.surgeon-band {
  padding: var(--sp-section) 0;
  background: var(--bg-2);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.sb-grid {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.sb-photo { margin: 0; position: relative; }
.sb-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--card-radius);
  border: 1px solid var(--hair);
}
.sb-photo::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.sb-line {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(22px, 2.7vw, 33px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 16px 0 22px;
}
.sb-line em { font-style: normal; color: var(--accent-deep); }
.sb-who { margin-bottom: 26px; }
.sb-who strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sb-who span {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (max-width: 760px) {
  .sb-grid { grid-template-columns: 1fr; gap: 30px; }
  .sb-photo { max-width: 280px; }
}

/* ------------------------------------------------------------
   .tile--dark on for-providers (2026-08-11 fix)
   The premium `.tile` rule sets a paper background and, loading after
   styles.css at equal specificity, overrode `.tile--dark`'s dark fill —
   but the higher-specificity `.tile--dark h3/p/.t-n` color rules survived.
   Result: cream headings and pale-sage body text on a white card, i.e.
   the whole 90-day pathway read as washed out. Restore the dark card in
   the same language as the ASC spec sheet on the dark ground.
   ------------------------------------------------------------ */
.content-section.on-dark .tile--dark {
  background: rgba(247, 244, 234, 0.045);
  border: 1px solid rgba(247, 244, 234, 0.14);
  border-top: 2px solid var(--accent);
  box-shadow: none;
}
.content-section.on-dark .tile--dark:hover {
  border-color: rgba(247, 244, 234, 0.26);
  border-top-color: var(--accent-light);
  box-shadow: none;
}
.content-section.on-dark .tile--dark .t-n {
  color: var(--accent-light);
  border-bottom-color: rgba(247, 244, 234, 0.16);
}
.content-section.on-dark .tile--dark h3 { color: var(--bg); }
.content-section.on-dark .tile--dark h3 em { color: var(--accent-light); font-style: normal; }
.content-section.on-dark .tile--dark p { color: rgba(242, 245, 240, 0.76); }

/* The dark section's lede was inheriting light-ground colors too. */
.content-section.on-dark .content-lede h2 { color: var(--bg); }
.content-section.on-dark .content-lede h2 em { color: var(--accent-light); font-style: normal; }
.content-section.on-dark .content-lede p { color: rgba(242, 245, 240, 0.78); }
.content-section.on-dark .content-lede .eyebrow { color: var(--accent-light); }

/* Four sequential onboarding steps read as a timeline, not 3 + an orphan.
   Mirrors the .on-tint four-up rule, gated the same way so 3-tile grids
   elsewhere keep their 3 columns. */
@media (min-width: 1041px) {
  .content-section.on-dark .tile-grid:has(> .tile:nth-child(4):last-child) {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}
@media (max-width: 560px) {
  .content-section.on-dark .tile-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 4px 4px 16px;
    margin: 0 -4px;
  }
  .content-section.on-dark .tile-grid::-webkit-scrollbar { display: none; }
  .content-section.on-dark .tile--dark { scroll-snap-align: start; }
}

/* `.two-col .side` lives on BOTH grounds. The premium treatment above was
   written for the dark Why-an-ASC card, so its accent-light heading and
   translucent rule carried onto light sections too (for-providers'
   "Good fit if you…" and "Use it for" read as pale gold on white, 1.7:1).
   Keep the light-ground defaults there. */
.content-section:not(.on-dark) .two-col .side h3,
.content-section:not(.on-dark) .two-col .side h4 {
  color: var(--accent);
  border-bottom-color: var(--hair);
}

/* Footer hours were slate on ink-deep (2.7:1) while every neighbouring
   footer line sits far lighter. */
.foot-grid .foot-hours { color: rgba(242, 245, 240, 0.72); }

/* Scroll rails become keyboard tab stops when they actually overflow (see
   site.js); give that focus a visible ring. */
.asc-figures[tabindex]:focus-visible,
.tile-grid[tabindex]:focus-visible,
.quote-grid[tabindex]:focus-visible,
.fp-wrap[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}