/* /learn-why-this-clinic, the section page for "Why this clinic". Loaded after
   site.css by learn-why-this-clinic.html only. One question (why trust this
   clinic), answered by the building first: a hero with the hospital itself, a
   cross-section that walks from the suite to the ER, the three physicians and
   their one chart, a navy band whose four steps light in turn, a line through
   the treatment day that fills as it is read, six rows to the articles, five
   refusals. Every part holds its end state with scripts off, reduced motion
   and print. */

/* On the root, because scroll-padding-top (below) is read there. */
html:has(body.why-clinic) {
  --wc-max: 1240px;
  --wc-gut: clamp(20px, 4vw, 56px);
  --hc-nav-h: 64px;            /* fallback; scripts/learn-why-this-clinic.js sets the real header height */
  --hc-bar-h: 52px;
  --wc-ease: cubic-bezier(.16, 1, .3, 1);
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 20px);
}
body.why-clinic { background: var(--white); }

/* colors_and_type.css caps every bare <p> at 42rem and underlines every <a> */
.why-clinic main { overflow-x: clip; }
.why-clinic main p { max-width: none; }
.why-clinic main a:not(.btn) { border-bottom: 0; }
.why-clinic main :is(h1, h2, h3) { text-wrap: wrap; margin: 0; }
.why-clinic main :is(h1, h2, h3) em { color: var(--accent-blue); font-style: italic; }
/* a heading that has to wrap breaks where the styling changes */
.why-clinic .h-lead, .why-clinic main :is(h1, h2) > em { display: inline-block; }
.why-clinic main h2 {
  font-size: clamp(1.9rem, 3.1vw, 2.85rem); line-height: 1.1; font-weight: 300;
  margin: 0 0 clamp(24px, 3.2vw, 44px);
}
.wc-wrap { max-width: var(--wc-max); margin: 0 auto; padding: 0 var(--wc-gut); }

/* a part that receives focus after a jump is not itself a control */
.why-clinic main [tabindex="-1"]:focus { outline: none; }
.why-clinic main :is(a, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 3px; }
.why-clinic .wc-safe :is(a, summary):focus-visible { outline-color: var(--accent-ice); }

/* a link inside running text: dotted, so it reads as a reference */
.wc-ref {
  color: var(--accent-blue-hover); text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: var(--accent-blue); text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  padding-block: 6px; transition: color 200ms, text-decoration-color 200ms;
}
.wc-ref:hover { color: var(--accent-blue); text-decoration-style: solid; }
.wc-ref :is(strong, em) { color: inherit; }
.wc-safe .wc-ref { color: var(--white); text-decoration-color: var(--accent-ice); }
.wc-safe .wc-ref:hover { color: var(--accent-ice); }

/* the arrow on a button leans the way it points */
.wc-arr { display: inline-block; transition: transform 320ms var(--wc-ease); }
a:hover > .wc-arr, a:focus-visible > .wc-arr { transform: translateX(4px); }
a:hover > .wc-arr--down, a:focus-visible > .wc-arr--down { transform: translateY(4px); }

/* ============ HERO: assembles once, in reading order ============
   Pure CSS, from the first paint: the question rises in two halves, the
   answer follows, the hospital comes up from the ground the way a building
   does and settles, then the contents rule draws and its lines step in. */
.wc-hero { padding: clamp(20px, 3.4vw, 40px) 0 clamp(48px, 6vw, 80px); }
.wc-hero__h1 { font-size: clamp(2.2rem, 3.9vw, 3.5rem); line-height: 1.06; font-weight: 300; }
.wc-hero__h1 > * { animation: wc-rise 900ms var(--wc-ease) both; }
.wc-hero__h1 > em { animation-delay: 140ms; }
.wc-hero__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(24px, 3.4vw, 44px);
}
.wc-hero__text > * { animation: wc-rise 900ms var(--wc-ease) both; }
.wc-hero__answer {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.3rem, 1.95vw, 1.72rem); line-height: 1.36; color: var(--ink);
  animation-delay: 260ms;
}
.wc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.8vw, 34px); animation-delay: 400ms; }
.wc-hero__photo {
  position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--accent-wash);
  animation: wc-up 1200ms 180ms var(--wc-ease) both;
}
/* the picture is taller than its frame by more than it ever travels (the drift, in the script) */
.wc-hero__photo img[width][height], .wc-docs__frame img[width][height] {
  position: absolute; left: 0; top: -7%; display: block; width: 100%; height: 114%; object-fit: cover;
  transform: translate3d(0, calc(var(--wc-drift, 0) * 1px), 0); will-change: transform;
}
.wc-hero__photo img[width][height] { object-position: 22% 40%; animation: wc-settle 1900ms 180ms var(--wc-ease) both; }

/* Contents: the page's own headings, as links. */
.wc-toc { position: relative; margin-top: clamp(36px, 5vw, 64px); }
.wc-toc::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink);
  transform-origin: left; animation: wc-rule 1100ms 620ms var(--wc-ease) both;
}
.wc-toc__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px);
}
.wc-toc__list li { animation: wc-rise 800ms var(--wc-ease) both; animation-delay: calc(760ms + var(--i, 0) * 70ms); }
.wc-toc__list li:nth-child(2) { --i: 1; } .wc-toc__list li:nth-child(3) { --i: 2; } .wc-toc__list li:nth-child(4) { --i: 3; }
.wc-toc__list li:nth-child(5) { --i: 4; } .wc-toc__list li:nth-child(6) { --i: 5; }
.wc-toc__list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 15px 0; border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-size: clamp(1.12rem, 1.45vw, 1.3rem); line-height: 1.25; color: var(--ink);
  transition: color 220ms, padding 320ms var(--wc-ease);
}
.wc-toc__list a::after {
  content: "\2193" / ""; flex: none; font-family: var(--font-body); font-size: 18px; color: var(--accent-blue);
  opacity: .35; transform: translateY(-4px); transition: transform 320ms var(--wc-ease), opacity 220ms;
}
.wc-toc__list a:hover, .wc-toc__list a:focus-visible { color: var(--accent-blue); padding-left: 8px; }
.wc-toc__list a:hover::after, .wc-toc__list a:focus-visible::after { opacity: 1; transform: translateY(2px); }

@keyframes wc-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes wc-up { from { opacity: 0; clip-path: inset(100% 0 0 0 round 8px); transform: translateY(26px); } to { clip-path: inset(0 0 0 0 round 8px); } }
@keyframes wc-settle { from { scale: 1.1; } }
@keyframes wc-rule { from { transform: scaleX(0); } }

/* ============ CONTENTS BAR (follows the reader) ============ */
.hc-bar {
  /* under the phone menu's sheet (55) and backdrop (50), over the page */
  position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49; height: var(--hc-bar-h);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 260ms, transform 360ms var(--wc-ease), visibility 0s 360ms;
}
.hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--wc-ease); }
body.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.hc-bar__track {
  max-width: var(--wc-max); margin: 0 auto; padding: 0 var(--wc-gut);
  height: 100%; display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 32px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.hc-bar__track::-webkit-scrollbar { display: none; }
.hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap; transition: color 200ms;
}
.hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left; transition: transform 360ms var(--wc-ease);
}
.hc-bar__track a:hover, .hc-bar__track a[aria-current] { color: var(--ink); }
.hc-bar__track a:hover::after { transform: scaleX(.3); }
.hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.why-clinic .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.hc-bar__progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0));
}

/* ============ THE BUILDING: a question, its answer, and the walk to the ER ============ */
.wc-building { padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 112px); border-top: 1px solid var(--border); }
.wc-qa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 64px); align-items: end; padding-bottom: clamp(28px, 3.6vw, 48px); border-bottom: 1px solid var(--ink); }
.wc-qa p { margin: 0; }
.wc-qa__q { font-size: clamp(1.05rem, 1.3vw, 1.18rem); line-height: 1.6; color: var(--ink-soft); }
.wc-qa__a { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.7vw, 2.4rem); line-height: 1.2; color: var(--ink); }
.wc-qa__a em { font-style: italic; color: var(--accent-blue); }

.wc-building__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(32px, 4vw, 56px); }
.wc-building__prose p, .wc-docs__body p, .wc-span__text p { margin: 0 0 1.1em; font-size: clamp(1.05rem, 1.25vw, 1.16rem); line-height: 1.7; color: var(--ink-soft); }
.wc-building__prose p strong, .wc-docs__body p strong, .wc-span__text p strong { font-weight: 600; color: var(--ink); }
.wc-building__prose p:first-child { font-size: clamp(1.15rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink); }

/* the hospital in cross-section: the suite on floor 2, the ER on the floor below, and the walk between them */
.wc-floors { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); margin: 0; }
.wc-floors__svg { display: block; width: 100%; height: auto; overflow: visible; }
.wc-floors__svg :is(path, rect, circle) { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wc-floors__shell { stroke-dasharray: 1; stroke-dashoffset: 0; }
.wc-floors__svg .wc-floors__slab, .wc-floors__svg .wc-floors__win path { stroke: var(--border-strong); stroke-width: 1.2; }
.wc-floors__svg .wc-floors__sign { stroke: var(--accent-blue); stroke-width: 3; }
.wc-floors__svg .wc-floors__suite { fill: var(--accent-wash); stroke: var(--accent-blue); }
.wc-floors__svg .wc-floors__bed :is(path, circle) { stroke: var(--accent-blue-hover); }
.wc-floors__svg .wc-floors__er { fill: var(--accent-blue); stroke: var(--accent-blue); transform-box: fill-box; transform-origin: center; }
.wc-floors__svg .wc-floors__cross { stroke: var(--white); stroke-width: 4; }
.wc-floors__svg .wc-floors__route { stroke: var(--ink); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 0; }
.wc-floors__svg .wc-floors__walker { fill: var(--ink); stroke: var(--white); stroke-width: 2.5; transform: translate(56px, 62px); }
.wc-floors figcaption { margin-top: 18px; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.wc-floors figcaption strong { display: block; margin-bottom: 2px; font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; color: var(--accent-blue); font-variant-numeric: lining-nums; }

.wc-pull { margin: clamp(48px, 6vw, 88px) 0 0; padding: clamp(28px, 3.6vw, 48px) 0 0; border-top: 1px solid var(--border); }
.wc-pull p { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 3.3vw, 3rem); line-height: 1.16; letter-spacing: -.005em; color: var(--ink); }
.wc-pull strong { display: inline-block; font-weight: 300; font-style: italic; color: var(--accent-blue); }

/* ============ FOLDS (native details) ============
   Every fold ships open. On a phone the script closes the ones a reader can
   skip and the summary becomes a 44px "Read more"; on a desk there is no
   summary and nothing is hidden. In-page search and print open them. */
.wc-fold > summary { display: none; list-style: none; }
.wc-fold > summary::-webkit-details-marker { display: none; }
.wc-fold__less, .wc-fold[open] > summary .wc-fold__more { display: none; }
.wc-fold[open] > summary .wc-fold__less { display: inline; }
.wc-chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms var(--wc-ease); }
.wc-fold[open] > summary .wc-chev { transform: rotate(180deg); }
@keyframes wc-unfold { from { opacity: 0; transform: translateY(-8px); } }

/* ============ THE PHYSICIANS: three people, named where they stand, and the one chart they share ============ */
.wc-docs { padding: 0 0 clamp(64px, 8vw, 112px); }
.wc-docs__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.wc-docs__photo { margin: 0; }
.wc-docs__frame { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: var(--accent-wash); }
.wc-docs__frame img[width][height] { object-position: 50% 30%; }
.wc-names { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: center; }
.wc-names li { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.wc-names span { display: block; font-size: 14px; font-weight: 400; color: var(--ink-muted); }
.wc-chart { display: block; margin-top: 8px; text-align: center; }
.wc-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.wc-chart path { fill: none; stroke: var(--accent-blue); stroke-width: .8; stroke-dasharray: 1; stroke-dashoffset: 0; }
.wc-chart__label { display: inline-block; padding: 9px 18px; border-radius: 4px; background: var(--ink); color: var(--white); font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.2; }
.wc-docs__body .wc-docs__lead { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.36; color: var(--ink); }

/* ============ SAFEGUARDS: the one navy band; four steps light in the order they happen ============ */
.wc-safe { padding: clamp(64px, 8vw, 112px) 0; background: var(--navy-brand); color: var(--white); }
.why-clinic .wc-safe h2 { color: var(--white); margin-bottom: clamp(14px, 1.8vw, 22px); }
.wc-safe__lead, .wc-safe__text { margin: 0; font-size: clamp(1.08rem, 1.35vw, 1.22rem); line-height: 1.65; color: rgba(255, 255, 255, .86); }
.wc-safe__text strong { font-weight: 600; color: var(--white); }
.wc-safe__text em { font-style: italic; }
.wc-steps { --wc-ic: 84px; --wc-gap: clamp(16px, 2.4vw, 32px); position: relative; margin: clamp(40px, 5vw, 64px) 0; }
.wc-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wc-gap); }
/* the line runs from the middle of the first sign to the middle of the last, and no further */
.wc-steps__line { position: absolute; left: calc(var(--wc-ic) / 2); right: calc((100% - 3 * var(--wc-gap)) / 4 - var(--wc-ic) / 2); top: calc(var(--wc-ic) / 2 - 1px); height: 2px; background: rgba(124, 169, 209, .32); }
.wc-steps__line i { position: absolute; inset: 0; background: var(--accent-ice); transform-origin: left; }
.wc-step__ic { position: relative; display: grid; place-items: center; width: var(--wc-ic); height: var(--wc-ic); border-radius: 50%; background: var(--accent-blue); border: 1.5px solid var(--accent-ice); }
.wc-step__ic svg { width: 48px; height: 48px; overflow: visible; }
.wc-step__ic :is(path, circle) { fill: none; stroke: var(--white); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wc-step__name { display: block; margin-top: 18px; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.1; color: var(--white); }
.wc-step__sub { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--accent-ice); }

/* ============ BEFORE AND AFTER: the one tinted band; ten stops on one line through the treatment day ============ */
.wc-span { padding: clamp(64px, 8vw, 112px) 0; background: var(--accent-wash); }
.wc-line__caps { display: grid; grid-template-columns: 3fr 1fr 5fr; align-items: start; }
.wc-line__cap { margin: 0; padding-right: clamp(12px, 2vw, 32px); font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.wc-line__cap--after { grid-column: 3; }
.wc-line__cap strong { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
.wc-stops { list-style: none; margin: clamp(22px, 2.6vw, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.wc-stops li { position: relative; padding: 34px 10px 0 0; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink); }
/* the stop, and the stretch of line to the next one (none after the last) */
.wc-stops li::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-blue); box-shadow: 0 0 0 4px var(--accent-wash); }
.wc-stops li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 8px; width: 100%; height: 2px; background: var(--accent-blue); transform-origin: left; }
.wc-stops .wc-stops__day { color: var(--accent-blue-hover); font-weight: 600; }
.wc-stops .wc-stops__day::before { display: none; }
.wc-stops__day svg { position: absolute; z-index: 1; left: -15px; top: -19px; width: 56px; height: 56px; padding: 8px; box-sizing: border-box; border-radius: 50%; background: var(--ink); overflow: visible; }
.wc-stops__day svg path { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wc-stops .wc-stops__day { padding-top: 46px; }
.wc-span__text { margin-top: clamp(36px, 4.6vw, 64px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--border-strong); }
.wc-span__text p { margin: 0; color: var(--ink); }

/* ============ SIX ARTICLES: each row is one link ============ */
.wc-arts { padding: clamp(64px, 8vw, 112px) 0; }
.wc-arts__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.wc-arts__head { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.why-clinic .wc-arts__head h2 { margin-bottom: clamp(12px, 1.6vw, 18px); }
.wc-arts__head p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.wc-arts__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.wc-art {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px; gap: clamp(16px, 2.2vw, 28px); align-items: center;
  padding: clamp(18px, 2.2vw, 26px) 0; border-bottom: 1px solid var(--border); color: var(--ink);
  transition: padding 360ms var(--wc-ease), border-color 220ms;
}
.wc-art__ic { display: block; width: 48px; height: 48px; overflow: visible; }
.wc-art__ic :is(path, circle) { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 220ms; }
.wc-art__title { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.45rem, 2.1vw, 1.9rem); line-height: 1.15; transition: color 220ms; }
.wc-art__text { display: block; margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.wc-go { display: block; width: 24px; height: 24px; fill: none; stroke: var(--accent-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .5; transition: transform 360ms var(--wc-ease), opacity 220ms; }
.wc-art:hover, .wc-art:focus-visible { padding-left: 10px; border-bottom-color: var(--accent-blue); color: var(--ink); }
.wc-art:hover .wc-art__title, .wc-art:focus-visible .wc-art__title { color: var(--accent-blue); }
.wc-art:hover .wc-art__ic :is(path, circle), .wc-art:focus-visible .wc-art__ic :is(path, circle) { stroke: var(--accent-blue); animation: wc-draw 900ms var(--wc-ease) both; }
.wc-art:hover .wc-go, .wc-art:focus-visible .wc-go { opacity: 1; transform: translateX(6px); }
.wc-art__ic :is(path, circle) { stroke-dasharray: 160; }
@keyframes wc-draw { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }

/* ============ WHAT THIS CLINIC IS NOT: five refusals beside one large cross ============ */
.wc-limits { padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid var(--border); }
.wc-limits__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.wc-limits__aside { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.why-clinic .wc-limits__aside h2 { margin-bottom: clamp(12px, 1.6vw, 18px); }
.wc-limits__aside p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.wc-mute { display: block; width: clamp(96px, 11vw, 150px); height: auto; margin-top: clamp(24px, 3vw, 40px); overflow: visible; }
.wc-mute :is(path, circle) { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.wc-mute path { stroke: var(--accent-blue); stroke-width: 3; }
.wc-mute circle { stroke: var(--border-strong); stroke-width: 1.5; }
.wc-limits__list { list-style: none; margin: 0; padding: 0; }
.wc-limits__main > .wc-limits__list { border-top: 1px solid var(--ink); }
.wc-limit { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: clamp(14px, 1.8vw, 22px); padding: clamp(20px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--border); }
.wc-limit__x { width: 24px; height: 24px; margin-top: 6px; grid-row: 1 / span 2; overflow: visible; }
.wc-limit__x path { fill: none; stroke: var(--accent-blue); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.wc-limit h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.18; font-weight: 300; }
.wc-limit p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.68; color: var(--ink-soft); }
.wc-limit p strong { font-weight: 600; color: var(--ink); }

/* ============ CLOSING: narrow and centred on purpose ============ */
.wc-end { padding: clamp(72px, 9vw, 120px) var(--wc-gut); text-align: center; border-top: 1px solid var(--border); }
.wc-end__inner { max-width: 720px; margin: 0 auto; }
.why-clinic .wc-end h2 { margin-bottom: 0; }
.wc-end__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* ============ ARRIVALS (only once the script has said it is running) ============
   Each part comes in its own way, once. A box that keeps its size is a box
   the observer can see, so nothing is clipped to no area. */
.wc-js [data-r] { opacity: 0; transition: opacity 700ms var(--wc-ease), transform 900ms var(--wc-ease); }
.wc-js [data-r].is-in { opacity: 1; }

/* the question is already there; its answer steps in from the right */
.wc-js .wc-qa[data-r] { opacity: 1; }
.wc-js .wc-qa[data-r] .wc-qa__a { opacity: 0; transform: translateX(32px); transition: opacity 700ms 200ms var(--wc-ease), transform 1000ms 200ms var(--wc-ease); }
.wc-js .wc-qa[data-r].is-in .wc-qa__a { opacity: 1; transform: none; }
.wc-js .wc-building__prose p[data-r] { transform: translateY(14px); }
.wc-js .wc-building__prose p[data-r].is-in { transform: none; }

/* the building draws itself; then somebody walks from the suite to the ER, every time it comes back into view */
.wc-js .wc-floors[data-r] { opacity: 1; }
.wc-js .wc-floors[data-r]:not(.is-in) :is(.wc-floors__slab, .wc-floors__win, .wc-floors__suite, .wc-floors__bed, .wc-floors__er, .wc-floors__cross, .wc-floors__door, .wc-floors__sign, .wc-floors__ground, figcaption, .wc-floors__route, .wc-floors__walker) { opacity: 0; }
.wc-js .wc-floors[data-r]:not(.is-in) .wc-floors__shell { stroke-dashoffset: 1; }
.wc-js .wc-floors.is-in .wc-floors__shell { animation: wc-trace 1100ms var(--wc-ease) both; }
.wc-js .wc-floors.is-in :is(.wc-floors__slab, .wc-floors__win, .wc-floors__door, .wc-floors__ground, .wc-floors__sign) { animation: wc-fade 600ms 500ms both; }
.wc-js .wc-floors.is-in :is(.wc-floors__suite, .wc-floors__bed) { animation: wc-fade 600ms 800ms both; }
.wc-js .wc-floors.is-in :is(.wc-floors__er, .wc-floors__cross) { animation: wc-fade 600ms 1000ms both; }
.wc-js .wc-floors.is-in figcaption { animation: wc-rise 800ms 1300ms var(--wc-ease) both; }
.wc-js .wc-floors:not(.is-walk) :is(.wc-floors__route, .wc-floors__walker) { opacity: 0; }
.wc-js .wc-floors.is-walk .wc-floors__route { animation: wc-trace 1900ms cubic-bezier(.45, 0, .2, 1) both; }
.wc-js .wc-floors.is-walk .wc-floors__walker { animation: wc-walk 1900ms cubic-bezier(.45, 0, .2, 1) both; }
.wc-js .wc-floors.is-walk .wc-floors__er { animation: wc-beat 700ms 1850ms ease-in-out both; }
@keyframes wc-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wc-walk { 0% { transform: translate(0, 0); } 34% { transform: translate(42px, 0); } 84% { transform: translate(42px, 62px); } 100% { transform: translate(56px, 62px); } }
@keyframes wc-beat { 50% { transform: scale(1.06); } }

/* the pull line is uncovered from the left, like a line being read out */
.wc-js .wc-pull[data-r] { opacity: 1; }
.wc-js .wc-pull[data-r] p { clip-path: inset(0 100% 0 0); transition: clip-path 1400ms var(--wc-ease); }
.wc-js .wc-pull[data-r].is-in p { clip-path: inset(0 0 0 0); }

/* the photo is wiped in from its left edge; the names arrive under each person; three lines run down to one chart */
.wc-js .wc-docs__photo[data-r] { opacity: 1; }
.wc-js .wc-docs__photo[data-r] .wc-docs__frame { clip-path: inset(0 100% 0 0 round 8px); transition: clip-path 1300ms var(--wc-ease); }
.wc-js .wc-docs__photo[data-r].is-in .wc-docs__frame { clip-path: inset(0 0 0 0 round 8px); }
.wc-js .wc-docs__photo[data-r] .wc-names li { opacity: 0; transform: translateY(-8px); transition: opacity 500ms var(--wc-ease), transform 700ms var(--wc-ease); transition-delay: calc(500ms + var(--i, 0) * 220ms); }
.wc-js .wc-docs__photo[data-r].is-in .wc-names li { opacity: 1; transform: none; }
.wc-js .wc-docs__photo[data-r]:not(.is-in) .wc-chart path { stroke-dashoffset: 1; }
.wc-js .wc-docs__photo[data-r].is-in .wc-chart path { animation: wc-trace 900ms 1200ms var(--wc-ease) both; }
.wc-js .wc-docs__photo[data-r] .wc-chart__label { opacity: 0; transform: scale(.9); transition: opacity 500ms 1900ms, transform 700ms 1900ms var(--wc-ease); }
.wc-js .wc-docs__photo[data-r].is-in .wc-chart__label { opacity: 1; transform: none; }
.wc-js .wc-docs__body p[data-r] { transform: translateX(20px); }
.wc-js .wc-docs__body p[data-r].is-in { transform: none; }

/* the four steps light in the order they happen, the line reaching each one as it does */
.wc-js .wc-steps[data-r] { opacity: 1; }
.wc-js .wc-steps[data-r] .wc-steps__line i { transform: scaleX(0); }
.wc-js .wc-steps[data-r].is-in .wc-steps__line i { animation: wc-rule 2400ms 300ms linear both; }
.wc-js .wc-steps[data-r] .wc-step__ic { background: var(--navy-brand); border-color: rgba(124, 169, 209, .5); transition: background 500ms, border-color 500ms, transform 700ms var(--wc-ease); transition-delay: calc(300ms + var(--i, 0) * 800ms); }
.wc-js .wc-steps[data-r].is-in .wc-step__ic { background: var(--accent-blue); border-color: var(--accent-ice); }
.wc-js .wc-steps[data-r] :is(.wc-step__name, .wc-step__sub) { opacity: .45; transition: opacity 500ms; transition-delay: calc(300ms + var(--i, 0) * 800ms); }
.wc-js .wc-steps[data-r].is-in :is(.wc-step__name, .wc-step__sub) { opacity: 1; }
.wc-js .wc-steps[data-r].is-in .wc-step__ic svg { animation: wc-nudge 600ms var(--wc-ease) both; animation-delay: calc(300ms + var(--i, 0) * 800ms); }
@keyframes wc-nudge { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: none; } }

/* the line through the treatment day fills as the reader moves down it (the script lights each stop) */
.wc-js .wc-line[data-r] { opacity: 1; }
.wc-js .wc-stops li::before { background: var(--white); box-shadow: 0 0 0 4px var(--accent-wash), inset 0 0 0 2px var(--border-strong); transition: background 300ms, box-shadow 300ms, transform 500ms var(--wc-ease); }
.wc-js .wc-stops li.is-lit::before { background: var(--accent-blue); box-shadow: 0 0 0 4px var(--accent-wash); animation: wc-pop 500ms var(--wc-ease); }
.wc-js .wc-stops li:not(:last-child)::after { transform: scaleX(0); transition: transform 500ms linear; }
.wc-js .wc-stops li.is-past::after { transform: none; }
.wc-js .wc-stops li { color: var(--ink-muted); transition: color 300ms; }
.wc-js .wc-stops li.is-lit { color: var(--ink); }
.wc-js .wc-stops .wc-stops__day.is-lit { color: var(--accent-blue-hover); }
.wc-js .wc-stops__day svg { background: var(--ink-muted); transition: background 400ms, transform 600ms var(--wc-ease); }
.wc-js .wc-stops__day.is-lit svg { background: var(--ink); transform: scale(1.08); }
@keyframes wc-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.25); } 100% { transform: none; } }

/* the rows come in from the right, one after another */
.wc-js .wc-arts__list li[data-r] { transform: translateX(28px); transition-delay: calc(var(--i, 0) * 70ms); }
.wc-js .wc-arts__list li[data-r].is-in { transform: none; }

/* each refusal is crossed as it arrives; the large cross is drawn the same way */
.wc-js .wc-limit[data-r] { opacity: 1; }
.wc-js .wc-limit[data-r] :is(h3, p) { opacity: 0; transform: translateY(10px); transition: opacity 600ms 150ms var(--wc-ease), transform 800ms 150ms var(--wc-ease); }
.wc-js .wc-limit[data-r].is-in :is(h3, p) { opacity: 1; transform: none; }
.wc-js .wc-limit[data-r]:not(.is-in) .wc-limit__x path { stroke-dashoffset: 1; }
.wc-js .wc-limit[data-r].is-in .wc-limit__x path { animation: wc-trace 380ms ease-out both; }
.wc-js .wc-limit[data-r].is-in .wc-limit__x path + path { animation-delay: 220ms; }
.wc-js .wc-mute[data-r] { opacity: 1; }
.wc-js .wc-mute[data-r]:not(.is-in) :is(path, circle) { stroke-dashoffset: 1; }
.wc-js .wc-mute[data-r].is-in circle { animation: wc-trace 1000ms var(--wc-ease) both; }
.wc-js .wc-mute[data-r].is-in path { animation: wc-trace 420ms 700ms ease-out both; }
.wc-js .wc-mute[data-r].is-in path + path { animation-delay: 1000ms; }

/* the closing call steps forward */
.wc-js .wc-end__inner[data-r] { transform: scale(.96); }
.wc-js .wc-end__inner[data-r].is-in { transform: none; }

/* ============ TABLET AND PHONE ============ */
@media (max-width: 900px) {
  .wc-hero__row, .wc-toc__list, .wc-qa, .wc-building__grid, .wc-docs__grid, .wc-arts__grid, .wc-limits__grid { grid-template-columns: minmax(0, 1fr); }
  .wc-floors, .wc-arts__head, .wc-limits__aside { position: static; }
  .wc-floors { max-width: 420px; }
  .wc-docs__body { order: -1; }
  .wc-limits__aside { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: start; }
  .wc-limits__aside h2 { grid-column: 1 / -1; }
  .wc-mute { margin-top: 0; width: 84px; }

  /* the folds a reader can skip become "Read more" */
  .wc-fold > summary {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer;
    font-size: 15px; font-weight: 600; color: var(--accent-blue-hover); -webkit-tap-highlight-color: transparent;
  }
  .wc-fold[open] > .wc-fold__body { animation: wc-unfold 360ms var(--wc-ease) both; }

  /* the line turns to run down the page */
  .wc-line__caps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wc-line__cap--after { grid-column: auto; }
  .wc-stops { grid-template-columns: minmax(0, 1fr); margin-left: 19px; }
  .wc-stops li { padding: 0 0 22px 36px; min-height: 22px; }
  .wc-stops li:not(:last-child)::after { left: 8px; top: 9px; width: 2px; height: 100%; transform-origin: top; }
  .wc-js .wc-stops li:not(:last-child)::after { transform: scaleY(0); }
  .wc-stops .wc-stops__day { padding: 10px 0 32px 52px; }
  .wc-stops__day svg { left: -19px; top: -8px; }
}

/* the bar's edges fade wherever its track can be wider than the window */
@media (max-width: 900px) {
  .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
}

@media (max-width: 600px) {
  html:has(body.why-clinic) { --hc-bar-h: 48px; }
  .hc-bar__track { gap: 22px; }
  .wc-hero__actions .btn, .wc-end__actions .btn { width: 100%; }
  .wc-names { grid-template-columns: minmax(0, 1fr); text-align: left; gap: 8px; }
  .wc-names span { display: inline; margin-left: 6px; }
  .wc-chart svg { display: none; }
  .wc-chart { text-align: left; margin-top: 14px; }
  /* the steps run down the page, the line down their left side */
  .wc-steps { --wc-ic: 68px; }
  .wc-steps__list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .wc-steps__list li { display: grid; grid-template-columns: var(--wc-ic) minmax(0, 1fr); column-gap: 18px; align-items: center; }
  .wc-step__ic { grid-row: 1 / span 2; }
  .wc-step__name { margin-top: 0; align-self: end; }
  .wc-step__sub { margin-top: 2px; align-self: start; }
  .wc-steps__line { left: calc(var(--wc-ic) / 2 - 1px); right: auto; top: calc(var(--wc-ic) / 2); bottom: calc(var(--wc-ic) / 2); width: 2px; height: auto; }
  .wc-steps__line i { transform-origin: top; }
  .wc-js .wc-steps[data-r] .wc-steps__line i { transform: scaleY(0); }
  .wc-js .wc-steps[data-r].is-in .wc-steps__line i { animation-name: wc-rule-y; }
  .wc-art { grid-template-columns: 48px minmax(0, 1fr); align-items: start; }
  .wc-go { display: none; }
  .wc-limit { grid-template-columns: 22px minmax(0, 1fr); }
  .wc-limit__x { width: 20px; height: 20px; }
}
@keyframes wc-rule-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ============ REDUCED MOTION: hold every end state ============ */
@media (prefers-reduced-motion: reduce) {
  .why-clinic main *, .why-clinic main *::before, .why-clinic main *::after { animation: none !important; transition: none !important; }
  .wc-js [data-r], .wc-js [data-r] * { opacity: 1 !important; transform: none !important; scale: none !important; clip-path: none !important; }
  .wc-js .wc-floors .wc-floors__walker { transform: translate(56px, 62px) !important; }
  .wc-js :is(.wc-floors__shell, .wc-floors__route, .wc-chart path, .wc-limit__x path, .wc-mute path, .wc-mute circle) { stroke-dashoffset: 0 !important; }
  .wc-js .wc-stops li::after, .wc-js .wc-steps__line i { transform: none !important; }
  .wc-hero__photo img[width][height], .wc-docs__frame img[width][height] { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ============ PRINT: no scrolling, so nothing waits to be revealed ============ */
@media print {
  .why-clinic main *, .why-clinic main *::before, .why-clinic main *::after { animation: none !important; transition: none !important; }
  .wc-js [data-r], .wc-js [data-r] * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .wc-js .wc-floors .wc-floors__walker { transform: translate(56px, 62px) !important; }
  .wc-js :is(.wc-floors__shell, .wc-floors__route, .wc-chart path, .wc-limit__x path, .wc-mute path, .wc-mute circle) { stroke-dashoffset: 0 !important; }
  .wc-js .wc-stops li::after, .wc-js .wc-steps__line i { transform: none !important; }
  .hc-bar, .wc-fold > summary { display: none !important; }
  .wc-floors, .wc-arts__head, .wc-limits__aside { position: static; }
}

/* back from an article: the row that was opened is marked for a moment */
.wc-art.is-back { border-bottom-color: var(--accent-blue); }
.wc-art.is-back .wc-art__title { color: var(--accent-blue); }

/* the walk arrives: the figure it stands for answers */
.wc-js .wc-floors.is-walk figcaption strong { animation: wc-arrive 900ms 1850ms var(--wc-ease) both; transform-origin: left bottom; }
@keyframes wc-arrive { 0% { transform: none; } 40% { transform: scale(1.12); } 100% { transform: none; } }