/* /lp/do-stem-cell-injections-work. Copied from styles/lp-herniated-disc.css
   (2026-10-19) and rescoped to .lp-dsi; the disc page's spine drawings are
   not on this page, so their rules were left out. Its patient-film band is
   (restored 2026-10-23, Jarred).
   Layered over the homepage stack (site.css, celva-home.css, fit-quiz.css):
   celva-home.js runs the reveal classes, and this sheet is everything the
   page looks like. scripts/lp-herniated-disc.js, loaded as is, adds the bar
   that follows the reader and the clock rail.
   Everything is scoped to the body class .lp-dsi so nothing here reaches
   another page. Every url() is root-relative: this file is served from
   /styles/ but the page lives under /lp/, and a document-relative path from
   there would fetch the homepage at 200.
   Grounds: the blue wash on the answer by joint, the research, the clock,
   the setting and the FAQ; white between them ("what worked" included); navy
   for the stories band and the closing call. No type under 13px, no
   capitals, no mono. */

/* On :root itself, not :root:has(.lp-dsi): this sheet loads on this page
   alone, and a browser without :has() would drop the whole rule, the bar's
   height and the scroll padding with it. */
:root {
  --hc-nav-h: 72px;            /* fallback; the script sets the real header height */
  --hc-bar-h: 52px;
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 8px);
}
.lp-dsi { --hd-ease: cubic-bezier(.16, 1, .3, 1); --hd-line: rgba(11, 29, 58, .12);
  /* this page's own drawing tones, named once: the body text in "what
     worked" (white now; named for the wash it first sat on), soft rules and
     tracks in the charts and icons, the pain mark */
  --dsi-text-wash: #3f5873; --dsi-line-soft: #b9c7d6; --dsi-bar: #d6e0eb; --dsi-dot-mute: #c3d0de;
  --dsi-track: #e3eaf2; --dsi-quiet: #f1f4f8; --dsi-face: #2b3a4a; --dsi-pain: #d9534f; }
.lp-dsi main { overflow-x: clip; }
/* celva-home.css gives every section a 96px scroll margin for its own fixed
   nav; here the root's scroll padding already clears the header and the bar */
.lp-dsi main section[id] { scroll-margin-top: 0; }
.lp-dsi main h1, .lp-dsi main h2, .lp-dsi main h3 { text-wrap: balance; }
/* a heading the bar has moved focus to is not a control: no ring */
.lp-dsi main h1[tabindex="-1"]:focus, .lp-dsi main h2[tabindex="-1"]:focus, .lp-dsi main h3[tabindex="-1"]:focus { outline: 0; }
.lp-dsi main :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ================= BUTTONS ================= */
.lp-dsi main .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px; border-radius: 8px; border: 1px solid transparent;
  background: var(--accent); color: #fff !important;
  font-family: var(--font-body); font-size: 1rem; font-weight: 500; letter-spacing: .005em; line-height: 1;
  text-decoration: none; cursor: pointer; position: relative; overflow: visible; will-change: auto;
  transition: background .25s var(--hd-ease), border-color .25s var(--hd-ease), transform .25s var(--hd-ease), box-shadow .3s var(--hd-ease);
}
.lp-dsi main .btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11, 29, 58, .18); }
/* pressed: a 1px sink and a darker fill, quick, with no change of size */
.lp-dsi main .btn:active { transform: translateY(1px); box-shadow: none; transition-duration: 90ms; background: color-mix(in srgb, var(--accent-hover) 88%, #000); }
.lp-dsi main .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.lp-dsi main .btn--ghost { background: #fff; color: var(--ink) !important; border-color: var(--border-strong); }
.lp-dsi main .btn--ghost:hover { background: #fff; border-color: var(--accent); color: var(--accent) !important; box-shadow: none; transform: none; }
.lp-dsi main .btn--ghost:active { background: rgba(11, 29, 58, .05); }
.lp-dsi main .btn--lg { min-height: 56px; padding: 0 32px; font-size: 1.0625rem; }
/* on navy the button is white */
.lp-dsi main .btn--ice { background: #fff; color: var(--ink) !important; }
.lp-dsi main .btn--ice:hover { background: var(--wash); box-shadow: 0 14px 36px rgba(0, 0, 0, .3); }
.lp-dsi main .btn--ice:active { background: color-mix(in srgb, var(--wash) 90%, var(--ink)); }
.lp-dsi .ctaband .btn:focus-visible { outline-color: #fff; }

/* the arrow leans toward where the link goes */
.lp-dsi .hd-arr { display: inline-block; transition: transform .3s var(--hd-ease); }
.lp-dsi a:hover > .hd-arr, .lp-dsi a:focus-visible > .hd-arr { transform: translateX(4px); }
/* a finger has no hover: nothing stays lifted after a tap */
@media (hover: none) {
  .lp-dsi main .btn:hover { transform: none; box-shadow: none; }
  .lp-dsi a:hover > .hd-arr { transform: none; }
}

/* ================= HERO ================= */
/* Painted finished by the sheet alone. The only first-paint motion is on
   things that are already readable: the frame settles, the caption rises. */
.lp-dsi .hd-hero { background: #fff; color: var(--ink); padding: clamp(28px, 4.2vw, 64px) 0 clamp(52px, 6vw, 84px); }
.lp-dsi .hd-hero__in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: clamp(40px, 7vw, 108px);
  grid-template-areas: "copy fig"; align-items: start;
}
.lp-dsi .hd-hero__copy { grid-area: copy; padding-top: clamp(0px, 3.4vw, 52px); }
.lp-dsi .hd-hero h1 { font-size: clamp(2.25rem, 4.3vw, 3.875rem); line-height: 1.05; letter-spacing: -.018em; margin: 0; }
.lp-dsi .hd-hero h1 em { color: var(--accent); }
.lp-dsi .hd-hero__sub { margin: 26px 0 0; font-size: 1.1875rem; line-height: 1.62; color: var(--ink-muted); font-weight: 300; }
.lp-dsi .hd-hero__ctas { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.lp-dsi .hd-hero__note { margin: 18px 0 0; font-size: .9375rem; line-height: 1.55; color: var(--ink-muted); }

.lp-dsi .hd-fig { grid-area: fig; margin: 0; }
.lp-dsi .hd-fig__frame {
  position: relative; aspect-ratio: 4/5; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md);
  /* the loop's own poster under it, so a clip that fails still shows the picture */
  background: var(--ink) url('/images/do-stem-cell-injections-work-hero-poster.webp') center/cover no-repeat;
  animation: hd-settle 1.1s var(--hd-ease) both;
}
.lp-dsi .hd-fig__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* One control for every loop on the page (added by the page script, so it
   is never a dead button): pressed means paused. */
.lp-dsi .hd-pause { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(11, 29, 58, .72); color: #fff; cursor: pointer; transition: background .2s, transform .2s var(--hd-ease); }
.lp-dsi .hd-pause:hover { background: rgba(11, 29, 58, .92); }
.lp-dsi .hd-pause:active { transform: scale(.94); }
.lp-dsi .hd-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }
.lp-dsi .hd-pause svg { width: 18px; height: 18px; fill: currentColor; }
.lp-dsi .hd-pause .hd-pause__play, .lp-dsi .hd-pause.is-paused .hd-pause__bars { display: none; }
.lp-dsi .hd-pause.is-paused .hd-pause__play { display: block; }
.lp-dsi .hd-fig__cap { margin: 14px 0 0; font-size: .9375rem; line-height: 1.45; color: var(--ink-muted); animation: hd-cap .9s var(--hd-ease) .35s both; }
@keyframes hd-settle { from { transform: translateY(14px) scale(.985); } to { transform: none; } }
@keyframes hd-cap { from { transform: translateY(8px); } to { transform: none; } }

@media (max-width: 900px) {
  .lp-dsi .hd-hero__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "fig"; }
  .lp-dsi .hd-hero__copy { padding-top: 0; }
  /* a 4:5 frame at full phone width is taller than the screen; 340px keeps
     the whole render in view */
  .lp-dsi .hd-fig { max-width: 340px; margin-top: 44px; }
  .lp-dsi .hd-hero__sub { font-size: 1.0625rem; line-height: 1.58; margin-top: 18px; }
  .lp-dsi .hd-hero__ctas { margin-top: 22px; }
}
@media (max-width: 620px) {
  .lp-dsi .hd-hero__in { padding: 0 20px; }
  .lp-dsi .hd-hero h1 { font-size: 2.125rem; }
  .lp-dsi .hd-hero__ctas .btn { flex: 1 1 100%; }
}

/* ================= THE BAR THAT FOLLOWS THE READER ================= */
.lp-dsi .hc-bar {
  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(--hd-line);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 200ms, transform 300ms var(--hd-ease), visibility 0s 300ms;
}
.lp-dsi .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--hd-ease); }
body.lp-dsi.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.lp-dsi .hc-bar__track {
  max-width: var(--wrap); height: 100%; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: stretch; gap: 30px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.lp-dsi .hc-bar__track::-webkit-scrollbar { display: none; }
.lp-dsi .hc-bar__track a {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; min-width: 44px;
  font-size: .9375rem; font-weight: 500; color: var(--ink-muted); text-decoration: none; border-bottom: 0; white-space: nowrap;
  transition: color .2s;
}
.lp-dsi .hc-bar__track a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--hd-ease); }
.lp-dsi .hc-bar__track a:hover, .lp-dsi .hc-bar__track a[aria-current] { color: var(--ink); }
.lp-dsi .hc-bar__track a:hover::after { transform: scaleX(.35); }
.lp-dsi .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.lp-dsi .hc-bar__track a:active { color: var(--accent); }
.lp-dsi .hc-bar__track a:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 4px; }
.lp-dsi .hc-bar__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ice); transform-origin: left; transform: scaleX(var(--hc-p, 0)); }
@media (max-width: 1080px) {
  /* the track can overflow from here down: fade the edge it runs under */
  .lp-dsi .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent); }
}
@media (max-width: 620px) {
  :root { --hc-bar-h: 48px; }
  .lp-dsi .hc-bar__track { gap: 24px; padding: 0 20px; }
}

/* ================= SECTIONS: SHARED PIECES ================= */
.lp-dsi .sec { padding: clamp(72px, 8.5vw, 124px) 0; background: #fff; }
.lp-dsi .sec-h2 { font-size: clamp(2rem, 3.7vw, 3.25rem); line-height: 1.08; letter-spacing: -.012em; margin: 0; }
/* a heading that must wrap breaks where its styling changes: each half is a
   unit, so the italic half starts its own line before it is split */
.lp-dsi .sec-h2 > .h-lead, .lp-dsi .sec-h2 > em { display: inline-block; }
.lp-dsi .sec-h2 em { color: var(--accent); }
/* the italic turn is kept for the headings that turn; the rest read straight through */
.lp-dsi .sec-h2--plain em { font-style: normal; color: inherit; }
.lp-dsi .lede { margin: 20px 0 0; font-size: 1.1875rem; line-height: 1.62; color: var(--ink-muted); font-weight: 300; }
.lp-dsi .cells { list-style: none; padding: 0; margin: 0; }
/* a card here is not a control: it does not lift under the pointer */
.lp-dsi .cell, .lp-dsi .cell:hover { transform: none; box-shadow: none; }
.lp-dsi .cell { border: 0; border-radius: 0; padding: 0; background: none; transition: none; }
.lp-dsi .cell__code { display: block; font-family: var(--font-body); font-size: .9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--accent); }
.lp-dsi .cell h3 { font-size: clamp(1.4rem, 1.9vw, 1.7rem); line-height: 1.18; font-weight: 400; margin: 8px 0 0; }
.lp-dsi .cell p { margin: 10px 0 0; font-size: 1rem; line-height: 1.62; color: var(--ink-muted); }
.lp-dsi .cells__closing { margin: 44px 0 0; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-muted); font-weight: 300; }
.lp-dsi .cta { margin-top: 28px; }
/* a call with a one-line lead-in beside the button */
.lp-dsi .cta--lead { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--hd-line); }
.lp-dsi .cta__lead { margin: 0; flex: 1 1 380px; font-family: var(--font-display); font-size: clamp(1.25rem, 1.9vw, 1.55rem); line-height: 1.38; font-weight: 300; color: var(--ink); }
/* the same pair closes several parts; it does not sit the same way each time */
.lp-dsi .hd-eval .cta--lead { flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.lp-dsi .hd-eval .cta__lead, .lp-dsi .hd-setting .cta__lead { flex: 0 1 auto; }
.lp-dsi .hd-eval .cells__closing { text-align: center; }
.lp-dsi .hd-setting .cta--lead { flex-direction: column; align-items: flex-start; gap: 22px; border-top: 0; padding-top: 0; margin-top: 44px; }
.lp-dsi .cells__closing a, .lp-dsi .lp-related a, .lp-dsi .hd-signpost a, .lp-dsi .cta__lead a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; border-bottom: 0; text-decoration-thickness: 1px; transition: color .2s; }
.lp-dsi .cells__closing a:hover, .lp-dsi .lp-related a:hover, .lp-dsi .hd-signpost a:hover, .lp-dsi .cta__lead a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.lp-dsi .cells__closing a:active, .lp-dsi .lp-related a:active, .lp-dsi .hd-signpost a:active, .lp-dsi .cta__lead a:active { color: var(--ink); }

/* the split: a still beside the section's items */
.lp-dsi .sec-split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: clamp(40px, 5vw, 60px); }
.lp-dsi .sec-still { margin: 0; border-radius: 14px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow-md); position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 24px); }
.lp-dsi .sec-still video, .lp-dsi .sec-still img { width: 100%; height: 100%; object-fit: cover; }

/* ================= THE ANSWER BY JOINT: the four cards ================= */
.lp-dsi .hd-qualify .cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 3.4vw, 48px); }
/* a rule over each: blue over a fit, ink and heavier over the surgeon's
   case. Side by side they share their four rows (render, label, heading,
   text: subgrid), so a heading that takes another line lowers the text
   under all of them. */
.lp-dsi .hd-qualify .cell { display: grid; grid-template-rows: subgrid; grid-row: span 4; align-content: start; padding-top: 22px; border-top: 2px solid var(--accent); }
@supports not (grid-template-rows: subgrid) { .lp-dsi .hd-qualify .cell, .lp-dsi .hd-route .cell { display: block; } }
.lp-dsi .hd-qualify .cell--no { border-top: 4px solid var(--ink); padding-top: 20px; }
.lp-dsi .hd-qualify .cell--no .cell__code { color: var(--ink); font-weight: 600; }
.lp-dsi .hd-qualify .cell--no p { color: var(--ink-soft); }

/* ================= WHAT WORKED MEANS (stops joined top to bottom) ================= */
/* the same right column as the goal card above, so the two cards line up */
.lp-dsi .hd-day .sec-split { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: clamp(28px, 5vw, 72px); }
/* Scott's quote stands where the consult loop was: a card in the narrow
   column, face on top, stacked rather than side by side */
.lp-dsi .hd-quote--card { order: 2; align-self: start; flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 24px 20px; background: #fff; border-radius: 10px; box-shadow: var(--shadow-md); border-top: 4px solid var(--accent); }
.lp-dsi .hd-quote--card .pt-tile.hd-quote__face { width: 144px; height: 144px; }
/* grows up into the gap under the goal card rather than down past the
   stops; scoped to .hd-day to outrank the base .hd-quote margin below */
.lp-dsi .hd-day .hd-quote--card { margin: -32px 0 0; }
.lp-dsi .hd-quote--card .hd-quote__q p { font-size: 1.25rem; font-style: normal; line-height: 1.25; }
/* the three measures, joined stop to stop under their drawn icons: one
   connector per gap and nothing after the last */
.lp-dsi .hd-day .cells { display: block; }
.lp-dsi .hd-day .cell { position: relative; padding: 0 0 38px 104px; min-height: 84px; }
.lp-dsi .hd-day .cell:last-child { padding-bottom: 0; }
.lp-dsi .hd-day .cell::after { content: ""; position: absolute; left: 41px; top: 92px; bottom: -1px; width: 2px; background: rgba(45, 110, 177, .32); transform-origin: top; }
.lp-dsi .hd-day .cell:last-child::after { content: none; }
.lp-dsi .hd-day .cell h3 { font-size: clamp(1.5rem, 2.2vw, 1.95rem); }
.lp-dsi .hd-day .cta--lead { border-top-color: rgba(11, 29, 58, .16); }
.lp-dsi .hd-day .lede, .lp-dsi .hd-day .cell p { color: var(--dsi-text-wash); }

/* ================= SUCCESS RATES ================= */
/* the lede stands alone above the footage and the three reasons, where the
   disc page had drawings */
.lp-dsi .hd-versus .hd-lede-solo { margin: clamp(20px, 2.4vw, 28px) 0 clamp(36px, 4.5vw, 56px); }

/* the honest limit */
.lp-dsi .hd-versus .vial__closing { margin: clamp(44px, 5vw, 64px) 0 0; text-align: left; font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.42; font-weight: 300; color: var(--ink); padding-left: 26px; border-left: 3px solid var(--accent); }
.lp-dsi .vial__closing-label { color: var(--accent); font-style: italic; }

/* ================= THE CLOCK ================= */
/* A rail on the left of the four rows. The fill climbs stop by stop (--p,
   set by the page script) and each stop lights as its row passes the middle
   of the screen; the script places each stop level with its row's first line
   (--top, --bottom and each stop's top, in px). Phones and tablets drop the
   rail and each row carries its own time. */
.lp-dsi .clock-split { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 36px; align-items: stretch; margin-top: clamp(40px, 5vw, 60px); }
/* hidden until the script has placed its stops: unplaced they all sit at the
   rail's top, on top of each other, which is what a reader without JS got */
.lp-dsi .clock-rail { position: relative; visibility: hidden; }
.lp-dsi .clock-rail.is-placed { visibility: visible; }
.lp-dsi .clock-rail__track { position: absolute; right: 6px; top: var(--top, 0); height: calc(var(--bottom, 100%) - var(--top, 0px)); width: 2px; background: var(--hd-line); border-radius: 2px; }
.lp-dsi .clock-rail__fill { position: absolute; inset: 0; background: var(--accent); border-radius: 2px; transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform .15s linear; }
.lp-dsi .clock-rail__stops { list-style: none; margin: 0; padding: 0; }
.lp-dsi .clock-rail__stops li { position: absolute; right: 0; top: 0; transform: translateY(-50%); padding-right: 32px; white-space: nowrap; text-align: right; font-size: 1rem; font-weight: 500; line-height: 1.2; color: var(--ink-muted); transition: color .4s var(--hd-ease); }
.lp-dsi .clock-rail__stops li::before { content: ""; position: absolute; right: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid rgba(11, 29, 58, .3); box-sizing: border-box; transition: border-color .4s var(--hd-ease), background .4s var(--hd-ease), transform .4s var(--hd-ease); }
.lp-dsi .clock-rail__stops li.is-on { color: var(--ink); }
.lp-dsi .clock-rail__stops li.is-on::before { border-color: var(--accent); background: var(--accent); transform: scale(1.2); }
/* a stop that has just been reached rings once */
.lp-dsi .clock-rail__stops li::after { content: ""; position: absolute; right: -4px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 2px solid var(--accent); box-sizing: border-box; opacity: 0; pointer-events: none; }
.lp-dsi .clock-rail__stops li.is-on::after { animation: hd-ping .9s var(--hd-ease); }
@keyframes hd-ping { from { opacity: .7; transform: scale(.55); } to { opacity: 0; transform: scale(1.7); } }
.lp-dsi .cells--stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
/* a floor on each row's height; the script places each stop beside its own row */
.lp-dsi .cells--stack .cell { min-height: 172px; padding: 28px 32px 28px 30px; border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 12px; background: #fff; }
/* the row level with the fill's leading stop stands forward as the reader
   scrolls, so the rail and the rows move together */
.lp-dsi .hd-clock .cell.is-lit { border-color: rgba(45, 110, 177, .45); border-left-color: var(--accent); box-shadow: var(--shadow-md); }
@media (min-width: 1081px) {
  /* beside a placed rail the row's own time would say it twice */
  .lp-dsi .clock-rail.is-placed ~ .cells .cell__code { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .lp-dsi .clock-rail.is-placed ~ .cells .cell h3 { margin-top: 0; }
}
/* the same four calls on one line, to scale, where the window is not shown */
.lp-dsi .hd-scale { display: none; position: relative; height: 92px; margin: 36px 8px 0 6px; font-size: .875rem; font-weight: 500; line-height: 1.2; color: var(--ink-soft); }
.lp-dsi .hd-scale svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-dsi .hd-scale line { stroke: rgba(45, 110, 177, .4); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lp-dsi .hd-scale circle { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.lp-dsi .hd-scale span { position: absolute; white-space: nowrap; }
.lp-dsi .hd-scale span:nth-of-type(odd) { bottom: calc(50% + 16px); }
.lp-dsi .hd-scale span:nth-of-type(even) { top: calc(50% + 16px); }
.lp-dsi .hd-scale span:nth-of-type(1) { left: calc(3.8% - 6px); }
.lp-dsi .hd-scale span:nth-of-type(2) { left: calc(16.7% - 6px); }
.lp-dsi .hd-scale span:nth-of-type(3) { left: 50%; transform: translateX(-50%); }
.lp-dsi .hd-scale span:nth-of-type(4) { right: -6px; }
@media (max-width: 1080px) {
  .lp-dsi .clock-split { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .lp-dsi .clock-rail { display: none; }
  .lp-dsi .cells--stack .cell { min-height: 0; }
}

/* ================= THE EVALUATION ================= */
/* Four drawn stops on one line. The second, where a physician decides, is
   the filled one. One connector per gap, stop to stop. */
.lp-dsi .hd-route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); margin-top: clamp(44px, 5.5vw, 68px); }
.lp-dsi .hd-route .cell { position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 4; align-content: start; }
.lp-dsi .hd-route__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 22px; border-radius: 50%; background: #fff; border: 1.5px solid var(--border-strong); color: var(--ink); }
.lp-dsi .hd-route__icon svg { width: 40px; height: 40px; }
.lp-dsi .hd-route__icon svg * { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lp-dsi .hd-route__icon--key { background: var(--navy-brand); border-color: var(--navy-brand); color: #fff; }
.lp-dsi .hd-route__icon--key .hd-level { fill: var(--ice); stroke: var(--ice); }
.lp-dsi .hd-route .cell::before { content: ""; position: absolute; left: 76px; right: calc(-1 * clamp(20px, 3vw, 44px)); top: 37px; height: 2px; background: rgba(45, 110, 177, .38); transform-origin: left; }
.lp-dsi .hd-route .cell:last-child::before { content: none; }
.lp-dsi .hd-route .cell h3 { font-size: clamp(1.35rem, 1.8vw, 1.6rem); }
@media (max-width: 900px) {
  .lp-dsi .hd-route { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-dsi .hd-route .cell { display: block; padding: 0 0 34px 84px; min-height: 98px; }
  .lp-dsi .hd-route .cell:last-child { padding-bottom: 0; }
  .lp-dsi .hd-route__icon { position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: 0; }
  .lp-dsi .hd-route__icon svg { width: 32px; height: 32px; }
  .lp-dsi .hd-route .cell::before { left: 29px; right: auto; top: 60px; bottom: 0; width: 2px; height: auto; transform-origin: top; }
}

/* ================= THE SETTING ================= */
.lp-dsi .hd-setting .sec-split { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; }
.lp-dsi .hd-setting .sec-still { aspect-ratio: 5/4; position: static; }
.lp-dsi .hd-setting .sec-still img { object-position: 28% center; }
.lp-dsi .cells--roster { display: block; }
.lp-dsi .cell--doc { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-top: 1px solid var(--hd-line); }
.lp-dsi .cell--doc:first-child { border-top: 0; padding-top: 0; }
.lp-dsi .hd-face { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--wash); }
.lp-dsi .cell--doc img { width: 100%; height: 100%; object-fit: cover; }
.lp-dsi .cell--doc h3 { font-size: clamp(1.35rem, 1.8vw, 1.6rem); margin: 2px 0 0; }
.lp-dsi .cells__closing--tight { margin: 6px 0 0; padding-top: 20px; border-top: 1px solid var(--hd-line); font-size: 1rem; }

/* ================= FIT QUIZ ================= */
/* the shared mount, on a clean white band with a rule over it */
.lp-dsi .qz { background: #fff; border-top: 1px solid var(--hd-line); }

/* ================= FAQ ================= */
.lp-dsi .faq__head h2 { font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.08; margin: 0; }
.lp-dsi .faq__list summary { align-items: center; gap: 20px; min-height: 44px; padding: 22px 0; font-size: clamp(1.2rem, 1.7vw, 1.45rem); }
.lp-dsi .faq__list summary:active { color: var(--accent-hover); }
.lp-dsi .faq__list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.lp-dsi .faq__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); font-size: 1.25rem; transition: transform .4s var(--hd-ease), background .25s, color .25s, border-color .25s; }
.lp-dsi .faq__list summary:hover .faq__ic { border-color: var(--accent); }
.lp-dsi .faq__list details[open] .faq__ic { background: var(--accent); border-color: var(--accent); color: #fff; }
.lp-dsi .faq__a { padding: 0 52px 26px 0; max-width: none; font-size: 1.0625rem; line-height: 1.7; animation: hd-answer .4s var(--hd-ease); }
@keyframes hd-answer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* the reading-around line under the FAQ */
.lp-dsi .lp-related { margin: 48px 0 0; font-size: 1rem; line-height: 1.6; color: var(--ink-muted); }

/* ================= CTA BAND ================= */
.lp-dsi .ctaband { padding: clamp(84px, 10vw, 140px) 0; }
.lp-dsi .ctaband h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.05; }
.lp-dsi .ctaband h2 > .h-lead, .lp-dsi .ctaband h2 > em { display: inline-block; }
/* one paragraph, then the two calls: the calls' row carries the space
   under it (.hd-band-ctas), so the paragraph's own bottom margin goes */
.lp-dsi .ctaband p:first-of-type { margin-bottom: 0; }
.lp-dsi .ctaband__disclaimer { font-family: var(--font-body); font-size: .8125rem; letter-spacing: 0; text-transform: none; line-height: 1.65; color: rgba(255, 255, 255, .66); }

/* ================= GROUNDS ================= */
/* No two neighbouring sections share a ground (Jarred, 2026-10-22): white
   and the blue wash in turn, navy for the films and the close. Order on this
   page: hero white, evidence wash, patient stories navy, success rates
   white, research wash, worked white, clock wash, evaluation white, setting
   wash, quiz white, FAQ wash, closing band navy. White is .sec's own ground. */
.lp-dsi .hd-evidence, .lp-dsi .hd-versus, .lp-dsi .hd-clock, .lp-dsi .hd-setting, .lp-dsi .hd-faq { background: var(--wash); }
.lp-dsi .hd-evidence .cta--lead, .lp-dsi .hd-versus .cta--lead, .lp-dsi .hd-clock .cta--lead, .lp-dsi .hd-setting .cta--lead { border-top-color: rgba(11, 29, 58, .14); }

/* ================= THE ANSWER BY JOINT ================= */
/* The studies the cards cite, folded under them as a footnote (Jarred,
   2026-10-23: the chart is sourcing, not the headline). Closed, it is one
   quiet line; open, a mark per study. Filled = helped against its
   comparison; half = a small gain or no control group; ring = no better, or
   missed its main goal. HTML, not a drawing, so the names stay text. */
.lp-dsi .hd-score { margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; border-top: 1px solid rgba(11, 29, 58, .14); }
.lp-dsi .hd-score__title { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 18px 40px 18px 0; position: relative; font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.lp-dsi .hd-score__title::-webkit-details-marker { display: none; }
.lp-dsi .hd-score__title::after { content: "+"; content: "+" / ""; position: absolute; right: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); font-size: 1.1rem; color: var(--ink); transition: transform .3s var(--hd-ease); }
.lp-dsi .hd-score[open] .hd-score__title::after { transform: rotate(45deg); }
.lp-dsi .hd-score__title:hover { color: var(--accent); }
.lp-dsi .hd-score__title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.lp-dsi .hd-score__hint { font-weight: 400; font-size: .9375rem; color: var(--ink-muted); }
.lp-dsi .hd-score__row:first-of-type { border-top: 0; }
.lp-dsi .hd-score__row { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 10px 24px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hd-line); }
.lp-dsi .hd-score__joint { font-weight: 500; color: var(--ink); }
.lp-dsi .hd-score__dots, .lp-dsi .hd-score__key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.lp-dsi .hd-score__dots li, .lp-dsi .hd-score__key li { position: relative; padding-left: 24px; font-size: .9375rem; line-height: 1.4; color: var(--ink-muted); }
.lp-dsi .hd-score__dots li::before, .lp-dsi .hd-score__key li::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 2px solid var(--accent); box-sizing: border-box; }
.lp-dsi .hd-score .is-yes::before { background: var(--accent); }
.lp-dsi .hd-score .is-part::before { background: linear-gradient(90deg, var(--accent) 50%, #fff 50%); }
.lp-dsi .hd-score .is-no::before { background: #fff; border-color: var(--ink-muted); }
.lp-dsi .hd-score__key { margin: 6px 0 4px; padding-top: 16px; border-top: 1px solid var(--hd-line); }
.lp-dsi .hd-score__key li { font-size: .875rem; }

/* a reader with an IV or neurologic question is pointed to their own page,
   not left to read a joint page (Jarred, 2026-10-23) */
.lp-dsi .hd-signpost { margin: 14px 0 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-muted); }
/* four cards on one row under the chart, each led by its render */
.lp-dsi .hd-evidence .cells { margin-top: clamp(40px, 5vw, 60px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-dsi .hd-tile { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #fff; margin-bottom: 18px; }
@media (max-width: 1080px) {
  .lp-dsi .hd-evidence .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-dsi .hd-evidence .cell:nth-child(-n+2) { margin-bottom: 40px; }
}
@media (max-width: 620px) {
  .lp-dsi .hd-score__row { grid-template-columns: minmax(0, 1fr); }
  /* on a phone the render is a thumbnail beside the card, not a screen of its own */
  .lp-dsi .hd-qualify.hd-evidence .cell { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto; column-gap: 16px; align-items: start; }
  .lp-dsi .hd-evidence .hd-tile { grid-column: 1; grid-row: 1 / span 3; margin: 0; border-radius: 10px; }
  .lp-dsi .hd-evidence .cell > :not(.hd-tile) { grid-column: 2; }
}


/* the footage of a read beside the three reasons one number can't fit */
.lp-dsi .hd-why { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
.lp-dsi .hd-why .sec-still { aspect-ratio: 1; position: relative; top: auto; }
.lp-dsi .hd-why .sec-still video { height: calc(100% - 48px); }
.lp-dsi .hd-why .sec-still figcaption { position: absolute; left: 0; right: 0; bottom: 0; min-height: 48px; display: flex; align-items: center; padding: 10px 18px; background: var(--navy-brand); color: #fff; font-size: .9375rem; line-height: 1.4; }
.lp-dsi .hd-why__k { margin: 0 0 18px; font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.25; color: var(--ink); }
.lp-dsi .cells.hd-why__list { display: block; }
.lp-dsi .hd-why__list .cell { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 22px; align-items: start; padding: 22px 0; border-top: 1px solid var(--hd-line); }
/* the same rounded tile and size as the stops in "what worked" */
.lp-dsi .hd-why__list .hd-ask__icon { margin: 0; width: 84px; height: 84px; border-radius: 16px; background: #fff; border: 0; }
.lp-dsi .hd-why__list .hd-ask__icon svg { width: 60px; height: 60px; }
.lp-dsi .hd-why__list .hd-ask__icon svg * { stroke-width: 2; }
.lp-dsi .hd-why__list .hd-ask__icon svg .is-avg { stroke: var(--ink-muted); stroke-dasharray: 3 3; }
.lp-dsi .hd-why__list .cell h3 { font-size: clamp(1.25rem, 1.6vw, 1.45rem); margin-top: 2px; }
.lp-dsi .hd-why__list .cell p { margin-top: 6px; }
@media (max-width: 1080px) { .lp-dsi .hd-why { grid-template-columns: minmax(0, 1fr); } .lp-dsi .hd-why .sec-still { max-width: 520px; } }
@media (max-width: 620px) { .lp-dsi .hd-why__list .cell { grid-template-columns: 64px minmax(0, 1fr); gap: 0 14px; } .lp-dsi .hd-why__list .hd-ask__icon { width: 64px; height: 64px; border-radius: 12px; } .lp-dsi .hd-why__list .hd-ask__icon svg { width: 46px; height: 46px; } }

/* ================= the round icons (the why list) ================= */
.lp-dsi .hd-ask__icon { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 20px; border-radius: 50%; background: #fff; border: 1.5px solid var(--border-strong); color: var(--accent); }
.lp-dsi .hd-ask__icon svg { width: 36px; height: 36px; }
.lp-dsi .hd-ask__icon svg * { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Scott's own words as a pull-quote, with his face (a frame from his
   interview at Hospital Angeles, not a lifestyle still) */
.lp-dsi .hd-quote { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 28px); margin: clamp(28px, 3.5vw, 40px) 0 0; }
/* the face is a close-up-only cut of Scott's interview loop (the first 3.2 s,
   before it widens to the chair, played forward then back so it loops on
   itself; images/dsi-scott-face-loop.mp4), his still as the poster */
.lp-dsi .pt-tile.hd-quote__face { flex: 0 0 auto; position: relative; width: clamp(76px, 8vw, 104px); height: clamp(76px, 8vw, 104px); aspect-ratio: auto; padding: 0; border: 0; border-radius: 50%; overflow: visible; background: var(--dsi-face); box-shadow: var(--shadow-md); cursor: pointer; transition: box-shadow .3s var(--hd-ease); }
.lp-dsi .pt-tile.hd-quote__face:hover { transform: none; box-shadow: 0 0 0 3px var(--accent), var(--shadow-md); }
.lp-dsi .pt-tile.hd-quote__face:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.lp-dsi .hd-quote__face video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* a small play mark on the circle's edge, so it reads as a film to open */
.lp-dsi .hd-quote__badge { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: var(--shadow-md); }
.lp-dsi .hd-quote__badge svg { width: 12px; height: 12px; fill: #fff; margin-left: 2px; }
.lp-dsi .hd-quote__face:hover .hd-quote__badge { background: var(--accent-hover); }
.lp-dsi .hd-quote__text { flex: 0 1 auto; min-width: 0; }
.lp-dsi .hd-quote__q { margin: 0; padding: 0; border: 0; }
.lp-dsi .hd-quote__q p { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 2.7vw, 2.25rem); line-height: 1.15; color: var(--ink); }
.lp-dsi .hd-quote__cap { margin: 8px 0 0; font-size: .9375rem; line-height: 1.5; color: var(--ink-muted); }
/* the text link that opens Scott's film: a pt-tile underneath (for the shared
   dialog), reset here to an underlined link under the caption. 44px tall to a
   finger through ::before, an invisible strip over the line, so the focus
   ring stays tight to the words instead of crossing the caption above. */
.lp-dsi .pt-tile.hd-quote__watch { position: relative; display: inline-block; width: auto; aspect-ratio: auto; margin: 8px 0 0; padding: 0; border: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none; color: var(--accent); font-family: var(--font-body); font-size: .9375rem; font-weight: 500; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.lp-dsi .pt-tile.hd-quote__watch::before { content: ""; position: absolute; inset: -11px 0; }
.lp-dsi .pt-tile.hd-quote__watch:hover { transform: none; box-shadow: none; color: var(--accent-hover); text-decoration-thickness: 2px; }
.lp-dsi .pt-tile.hd-quote__watch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
/* the shared sheet sets video { display: block }, which beats [hidden]: the
   preview loop stays out of the button, and unseen it is never loaded */
.lp-dsi .hd-quote__watch .pt-tile__loop { display: none !important; }

@media (max-width: 620px) { .lp-dsi .hd-quote { align-items: flex-start; } }

/* ================= WHAT WORKED MEANS: the goal card, and a picture on each stop ================= */
/* The goal card is an example (tagged so), not a patient's record: what a
   coordinator writes down on the first call, and the three calls that read
   against it. No ticks on the calls, so it never stands for a result. */
.lp-dsi .hd-goal-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(28px, 5vw, 72px); align-items: center; }
.lp-dsi .hd-goal { position: relative; margin: 0; padding: 22px 24px 18px; background: #fff; border-radius: 10px; box-shadow: var(--shadow-md); border-top: 4px solid var(--accent); }
.lp-dsi .hd-goal__tag { position: absolute; top: 14px; right: 16px; padding: 2px 10px; border-radius: 99px; background: var(--wash); color: var(--accent); font-size: .8125rem; line-height: 1.5; }
.lp-dsi .hd-goal__k { margin: 0; font-size: .9375rem; font-weight: 500; color: var(--ink-muted); }
.lp-dsi .hd-goal__hand { margin: 10px 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--hd-line); font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 2vw, 1.7rem); line-height: 1.25; color: var(--accent); }
.lp-dsi .hd-goal__calls { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; }
.lp-dsi .hd-goal__calls::before { content: ""; position: absolute; left: 20px; right: 20px; top: 5px; height: 2px; background: rgba(45, 110, 177, .3); }
.lp-dsi .hd-goal__calls li { position: relative; padding-top: 20px; font-size: .875rem; color: var(--ink); text-align: center; flex: 0 0 auto; }
.lp-dsi .hd-goal__calls li::before { content: ""; position: absolute; top: 0; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-sizing: border-box; }
.lp-dsi .hd-goal__cap { margin: 14px 0 0; font-size: .875rem; line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 900px) { .lp-dsi .hd-goal-head { grid-template-columns: minmax(0, 1fr); } .lp-dsi .hd-goal { max-width: 360px; } }

/* each stop's drawn picture: a knee with the pain marked, a stride, a date
   pushed later; the line above joins stop to stop */
.lp-dsi .hd-stop__icon { position: absolute; left: 0; top: -4px; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 16px; background: var(--wash); color: var(--accent); }
.lp-dsi .hd-stop__icon svg { width: 68px; height: 68px; }
.lp-dsi .hd-stop__icon svg * { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lp-dsi .hd-stop__icon svg .is-ground { stroke: var(--dsi-line-soft); }
.lp-dsi .hd-stop__icon svg .is-was { stroke: var(--dsi-line-soft); stroke-dasharray: 3 3; }
.lp-dsi .hd-stop__icon svg .is-pain { stroke: var(--dsi-pain); stroke-width: 2.6; }
@media (max-width: 620px) {
  .lp-dsi .hd-day .cell { padding-left: 80px; min-height: 64px; }
  .lp-dsi .hd-day .cell::after { left: 31px; top: 70px; }
  .lp-dsi .hd-stop__icon { width: 64px; height: 64px; border-radius: 12px; }
  .lp-dsi .hd-stop__icon svg { width: 52px; height: 52px; }
}

/* ================= THE CLOCK: the response window, and a picture on each call ================= */
/* The window is drawn from timeline-results' own lines: weeks 0 to 4 usually
   quiet, joints usually responding between weeks 4 and 12, the spine at 3 to
   6 months, a response able to keep building through the first year, and the
   four calls on the axis. The axis is stretched over the first 3 months, where
   the story is, and labelled at every tick, so no distance reads as a number.
   Up to 900px the plain four-dot scale stands in; the window needs the width. */
.lp-dsi .hd-window { margin: clamp(32px, 4vw, 48px) 0 0; padding: 22px 24px 14px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-md); }
.lp-dsi .hd-window svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-dsi .hd-window text { font-family: var(--font-body); font-size: 13px; fill: var(--ink); }
.lp-dsi .hd-window text.is-mute { fill: var(--ink-muted); }
.lp-dsi .hd-window text.is-strong { fill: var(--accent); font-weight: 500; }
.lp-dsi .hd-window__quiet { fill: var(--dsi-quiet); }
.lp-dsi .hd-window__joint { fill: rgba(45, 110, 177, .16); }
.lp-dsi .hd-window__spine { fill: rgba(45, 110, 177, .07); stroke: rgba(45, 110, 177, .4); stroke-dasharray: 4 4; }
.lp-dsi .hd-window__line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.lp-dsi .hd-window__line.is-on { stroke-dasharray: 2 7; }
.lp-dsi .hd-window__axis { fill: none; stroke: var(--dsi-line-soft); stroke-width: 2; }
.lp-dsi .hd-window circle { fill: var(--accent); }
.lp-dsi .hd-window circle.is-key { fill: #fff; stroke: var(--accent); stroke-width: 3; }
.lp-dsi .hd-window figcaption { margin-top: 8px; font-size: .875rem; line-height: 1.5; color: var(--ink-muted); }
.js-anim .lp-dsi .hd-window[data-r] .hd-window__line:not(.is-on) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--hd-ease) .3s; }
.js-anim .lp-dsi .hd-window[data-r].is-in .hd-window__line:not(.is-on) { stroke-dashoffset: 0; }
/* drawn only where its 13px labels stay 13px or more (the drawing is 760
   wide); narrower, the plain scale of the calls stands in */
@media screen and (max-width: 900px) { .lp-dsi .hd-window { display: none; } .lp-dsi .hd-scale { display: block; } }   /* screen only: a printout keeps the drawn window */
@media (prefers-reduced-motion: reduce) { .js-anim .lp-dsi .hd-window[data-r] .hd-window__line:not(.is-on) { stroke-dashoffset: 0; transition: none; } }

/* a drawn picture on each call card: the phone call, an hourglass, stairs, the record */
.lp-dsi .hd-clock .cells--stack .cell { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 22px; align-content: start; }
.lp-dsi .hd-clock .cells--stack .cell > :not(.hd-call__icon) { grid-column: 2; }
.lp-dsi .hd-call__icon { grid-column: 1; grid-row: 1 / span 3; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: var(--wash); color: var(--accent); }
.lp-dsi .hd-call__icon svg { width: 40px; height: 40px; }
.lp-dsi .hd-call__icon svg * { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 620px) {
  .lp-dsi .hd-clock .cells--stack .cell { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; }
  .lp-dsi .hd-call__icon { width: 48px; height: 48px; border-radius: 12px; }
  .lp-dsi .hd-call__icon svg { width: 30px; height: 30px; }
}

/* ================= CLOSING BAND: the quiz, and a call for whoever wants a person ================= */
.lp-dsi .hd-band-ctas { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; }
.lp-dsi .hd-band-link { display: inline-block; padding: 9px 0; color: #fff; font-size: 1rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; border-bottom: 0; }
.lp-dsi .hd-band-link:hover { text-decoration-thickness: 2px; }
.lp-dsi .hd-band-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* ================= PATIENT STORIES (the navy band) ================= */
/* Restored from styles/lp-herniated-disc.css (Jarred, 2026-10-23: three
   films after the answer by joint, and a link to the rest). celva-home.js
   opens the film dialog from data-pt-video. */
.lp-dsi .band { padding: clamp(72px, 8.5vw, 124px) 0; }
.lp-dsi .hd-stories .btn:focus-visible, .lp-dsi .hd-stories .pt-tile:focus-visible { outline-color: #fff; }
.lp-dsi .hd-stories { background: var(--navy-brand); color: #fff; }
.lp-dsi .hd-stories .band__in { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; text-align: left; display: block; }
.lp-dsi .band__split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.lp-dsi .hd-stories .sec-h2 em { color: var(--ice); }
.lp-dsi .hd-stories .lede { color: rgba(255, 255, 255, .8); }
.lp-dsi .hd-stories .cta { margin-top: 32px; }
.lp-dsi .pt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 0; width: 100%; }
.lp-dsi .pt-tile { box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
.lp-dsi .pt-tile:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(0, 0, 0, .45); }
.lp-dsi .pt-tile:active { transform: scale(.985); transition-duration: 90ms; }
.lp-dsi .pt-tile:active .pt-tile__play { transform: translate(-50%, -50%) scale(.94); }
/* under the pointer or the keyboard, the play mark rings: this one opens */
.lp-dsi .pt-tile__play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
.lp-dsi .pt-tile:hover .pt-tile__play::after, .lp-dsi .pt-tile:focus-visible .pt-tile__play::after { animation: hd-ring 1.5s ease-out infinite; }
@keyframes hd-ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.55); } }
.lp-dsi .pt-fig__cap { margin-top: 12px; font-family: var(--font-body); font-size: .9375rem; letter-spacing: 0; text-transform: none; line-height: 1.4; color: rgba(255, 255, 255, .82); }
.lp-dsi .pt-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
.lp-dsi .hd-stories .lede a, .lp-dsi .hd-stories-more { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; border-bottom: 0; }
.lp-dsi .hd-stories-more { display: inline-block; margin-top: 15px; padding: 9px 0; font-size: 1rem; }
.lp-dsi .hd-stories-more:hover { text-decoration-thickness: 2px; }
.lp-dsi .hd-stories-more:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.js-anim .lp-dsi .pt-fig[data-r] { transform: translateY(26px) scale(.97); }
.js-anim .lp-dsi .pt-fig[data-r].is-in { transform: none; }
.lp-dsi .pt-fig:nth-child(2) { transition-delay: 110ms; }
.lp-dsi .pt-fig:nth-child(3) { transition-delay: 220ms; }
@media (hover: none) { .lp-dsi .pt-tile:hover { transform: none; box-shadow: none; } }
@media (max-width: 1080px) { .lp-dsi .band__split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .lp-dsi .pt-grid { gap: 12px; } }
@media (max-width: 620px) {
  .lp-dsi .hd-stories .band__in { padding: 0 20px; }
  .lp-dsi .pt-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lp-dsi .pt-fig { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 18px; }
  .lp-dsi .pt-fig__cap { margin: 0; font-size: 1rem; }
  .lp-dsi .pt-tile__play { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .lp-dsi .pt-tile:hover, .lp-dsi .pt-tile:active { transform: none; } }
@media print { .lp-dsi .hd-stories, .lp-dsi .band { padding: 28px 0; background: #fff !important; } .lp-dsi .hd-stories * { color: var(--ink) !important; } .lp-dsi .pt-tile__play { display: none !important; } .lp-dsi .pt-fig { break-inside: avoid; } }

/* ================= SURPRISE AND DELIGHT (2026-10-23) =================
   Calm arrivals for a patient page: each moment plays once, the first time its
   card is seen (celva-home.js adds .is-in once and stops watching), and says
   what the picture means rather than decorating it. Painted finished without
   script (.js-anim never set) and under reduced motion (the block at the end).
   CSS only; nothing here waits on a press or delays the first paint. */

/* drawn icons draw themselves: the success-rate reasons, the worked stops,
   the four calls. A long dash run stands in for each stroke's length. */
.js-anim .lp-dsi .hd-why__list .cell[data-r] .hd-ask__icon svg :not(.is-avg),
.js-anim .lp-dsi .hd-day .cell[data-r] .hd-stop__icon svg :not(.is-was),
.js-anim .lp-dsi .hd-clock .cell[data-r] .hd-call__icon svg * { stroke-dasharray: 180; stroke-dashoffset: 180; transition: stroke-dashoffset 1.1s var(--hd-ease) .15s; }
.js-anim .lp-dsi .hd-why__list .cell[data-r].is-in .hd-ask__icon svg :not(.is-avg),
.js-anim .lp-dsi .hd-day .cell[data-r].is-in .hd-stop__icon svg :not(.is-was),
.js-anim .lp-dsi .hd-clock .cell[data-r].is-in .hd-call__icon svg * { stroke-dashoffset: 0; }
/* the dashed "one number" line and the old date settle in after the drawing */
.js-anim .lp-dsi .hd-why__list .cell[data-r] .hd-ask__icon .is-avg,
.js-anim .lp-dsi .hd-day .cell[data-r] .hd-stop__icon .is-was { opacity: 0; transition: opacity .5s ease .9s; }
.js-anim .lp-dsi .hd-why__list .cell[data-r].is-in .hd-ask__icon .is-avg,
.js-anim .lp-dsi .hd-day .cell[data-r].is-in .hd-stop__icon .is-was { opacity: 1; }


/* the goal card writes itself, then the three calls light in order */
.js-anim .lp-dsi .hd-goal[data-r] .hd-goal__hand { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s cubic-bezier(.45, 0, .2, 1) .35s; }
.js-anim .lp-dsi .hd-goal[data-r].is-in .hd-goal__hand { clip-path: inset(0 0 0 0); }
.js-anim .lp-dsi .hd-goal[data-r] .hd-goal__calls li::before { transform: scale(0); transition: transform .4s var(--hd-ease); }
.js-anim .lp-dsi .hd-goal[data-r] .hd-goal__calls li:nth-child(1)::before { transition-delay: 1.5s; }
.js-anim .lp-dsi .hd-goal[data-r] .hd-goal__calls li:nth-child(2)::before { transition-delay: 1.7s; }
.js-anim .lp-dsi .hd-goal[data-r] .hd-goal__calls li:nth-child(3)::before { transition-delay: 1.9s; }
.js-anim .lp-dsi .hd-goal[data-r].is-in .hd-goal__calls li::before { transform: none; }

/* the clock window arrives in time order: quiet, joints, spine; the calls
   pop onto the axis after the line has drawn */
.js-anim .lp-dsi .hd-window[data-r] rect { opacity: 0; transition: opacity .6s ease; }
.js-anim .lp-dsi .hd-window[data-r] .hd-window__joint { transition-delay: .3s; }
.js-anim .lp-dsi .hd-window[data-r] .hd-window__spine { transition-delay: .6s; }
.js-anim .lp-dsi .hd-window[data-r].is-in rect { opacity: 1; }
.js-anim .lp-dsi .hd-window[data-r] circle { transform: scale(0); transform-origin: center; transform-box: fill-box; transition: transform .4s var(--hd-ease); }
.js-anim .lp-dsi .hd-window[data-r] circle:nth-of-type(1) { transition-delay: 1.4s; }
.js-anim .lp-dsi .hd-window[data-r] circle:nth-of-type(2) { transition-delay: 1.55s; }
.js-anim .lp-dsi .hd-window[data-r] circle:nth-of-type(3) { transition-delay: 1.7s; }
.js-anim .lp-dsi .hd-window[data-r] circle:nth-of-type(4) { transition-delay: 1.9s; }
.js-anim .lp-dsi .hd-window[data-r].is-in circle { transform: none; }

/* the studies footnote: as it opens, its rows rise in one after another */
.lp-dsi .hd-score[open] .hd-score__row, .lp-dsi .hd-score[open] .hd-score__key { animation: hd-rise .45s var(--hd-ease) both; }
.lp-dsi .hd-score[open] .hd-score__row:nth-of-type(2) { animation-delay: .06s; }
.lp-dsi .hd-score[open] .hd-score__row:nth-of-type(3) { animation-delay: .12s; }
.lp-dsi .hd-score[open] .hd-score__key { animation-delay: .18s; }
@keyframes hd-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Scott's circle says "this plays": one soft ring from the badge, twice, on arrival */
.lp-dsi .hd-quote__badge::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
.js-anim .lp-dsi .hd-quote[data-r].is-in .hd-quote__badge::after { animation: hd-badge-ping 1.6s ease-out 1s 2; }
@keyframes hd-badge-ping { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }

@media (prefers-reduced-motion: reduce) {
  .js-anim .lp-dsi .hd-why__list .cell[data-r] .hd-ask__icon svg *,
  .js-anim .lp-dsi .hd-day .cell[data-r] .hd-stop__icon svg *,
  .js-anim .lp-dsi .hd-clock .cell[data-r] .hd-call__icon svg *,
  .js-anim .lp-dsi .hd-window[data-r] rect, .js-anim .lp-dsi .hd-window[data-r] circle,
  .js-anim .lp-dsi .hd-goal[data-r] .hd-goal__hand, .js-anim .lp-dsi .hd-goal[data-r] .hd-goal__calls li::before { transition: none !important; transform: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; clip-path: none !important; }
  .js-anim .lp-dsi .hd-why__list .hd-ask__icon .is-avg { stroke-dasharray: 3 3 !important; }
  .js-anim .lp-dsi .hd-day .hd-stop__icon .is-was { stroke-dasharray: 3 3 !important; }
  .lp-dsi .hd-score[open] .hd-score__row, .lp-dsi .hd-score[open] .hd-score__key, .lp-dsi .hd-quote__badge::after { animation: none !important; }
}

/* ================= ENTRANCES ================= */
/* celva-home.js marks <html> .js-anim and each [data-r] .is-in as it is
   reached; celva-home.css's default is one rise and fade. Each part here
   arrives in the way that suits what it is. Nothing is hidden without that
   class, so a blocked script or reduced motion leaves the page whole. */
.js-anim .lp-dsi [data-r] { transition: opacity .7s var(--hd-ease), transform .8s var(--hd-ease); transform: translateY(18px); }
.js-anim .lp-dsi [data-r].is-in { transform: none; }
/* headings: a short rise only, never a fade to nothing */
.js-anim .lp-dsi h2[data-r] { transform: translateY(12px); }
.js-anim .lp-dsi h2[data-r].is-in { transform: none; }
/* the answer by joint: the four arrive across, one after another */
.js-anim .lp-dsi .hd-qualify .cell[data-r] { transform: translateX(22px); }
.js-anim .lp-dsi .hd-qualify .cell[data-r].is-in { transform: none; }
.lp-dsi .hd-qualify .cell:nth-child(2) { transition-delay: 80ms; }
.lp-dsi .hd-qualify .cell:nth-child(3) { transition-delay: 160ms; }
.lp-dsi .hd-qualify .cell:nth-child(4) { transition-delay: 240ms; }
/* the day: each connector runs down to the next stop as its step arrives */
.js-anim .lp-dsi .hd-day .cell[data-r] { transform: none; }
.js-anim .lp-dsi .hd-day .cell[data-r]::after { transform: scaleY(0); transition: transform .9s var(--hd-ease) .25s; }
.js-anim .lp-dsi .hd-day .cell[data-r].is-in::after { transform: none; }
/* the stills: a slow settle */
.js-anim .lp-dsi .sec-still[data-r] { transform: scale(.975); }
.js-anim .lp-dsi .sec-still[data-r].is-in { transform: none; }
/* the calls to scale: the line runs out to six months and each call lands on it */
.js-anim .lp-dsi .hd-scale[data-r] { transform: none; opacity: 1; }
.js-anim .lp-dsi .hd-scale[data-r] line { stroke-dashoffset: 1; }
.js-anim .lp-dsi .hd-scale[data-r] circle { transform: scale(0); }
.js-anim .lp-dsi .hd-scale[data-r] span { opacity: 0; }
.lp-dsi .hd-scale line { transition: stroke-dashoffset 1.4s var(--hd-ease) .1s; }
.lp-dsi .hd-scale circle { transition: transform .5s var(--hd-ease) .2s; }
.lp-dsi .hd-scale span { transition: opacity .5s .3s; }
.lp-dsi .hd-scale circle:nth-of-type(2), .lp-dsi .hd-scale span:nth-of-type(2) { transition-delay: .4s; }
.lp-dsi .hd-scale circle:nth-of-type(3), .lp-dsi .hd-scale span:nth-of-type(3) { transition-delay: .75s; }
.lp-dsi .hd-scale circle:nth-of-type(4), .lp-dsi .hd-scale span:nth-of-type(4) { transition-delay: 1.2s; }
.js-anim .lp-dsi .hd-scale[data-r].is-in line { stroke-dashoffset: 0; }
.js-anim .lp-dsi .hd-scale[data-r].is-in circle { transform: none; }
.js-anim .lp-dsi .hd-scale[data-r].is-in span { opacity: 1; }
/* the clock: the rows are simply there; the rail does the moving */
.js-anim .lp-dsi .hd-clock .cell[data-r] { transform: none; opacity: 1; transition: border-color .45s var(--hd-ease), box-shadow .45s var(--hd-ease); }
/* the evaluation: each stop pops, then its connector runs to the next */
.js-anim .lp-dsi .hd-route .cell[data-r] { transform: none; }
.js-anim .lp-dsi .hd-route .cell[data-r] .hd-route__icon { transform: scale(.7); transition: transform .6s var(--hd-ease); }
.js-anim .lp-dsi .hd-route .cell[data-r].is-in .hd-route__icon { transform: none; }
.js-anim .lp-dsi .hd-route .cell[data-r]::before { transform: scaleX(0); transition: transform .8s var(--hd-ease) .3s; }
.js-anim .lp-dsi .hd-route .cell[data-r].is-in::before { transform: none; }
.lp-dsi .hd-route .cell:nth-child(2), .lp-dsi .hd-route .cell:nth-child(2) .hd-route__icon { transition-delay: 140ms; }
.lp-dsi .hd-route .cell:nth-child(3), .lp-dsi .hd-route .cell:nth-child(3) .hd-route__icon { transition-delay: 280ms; }
.lp-dsi .hd-route .cell:nth-child(4), .lp-dsi .hd-route .cell:nth-child(4) .hd-route__icon { transition-delay: 420ms; }
.js-anim .lp-dsi .hd-route .cell:nth-child(2)[data-r]::before { transition-delay: .45s; }
.js-anim .lp-dsi .hd-route .cell:nth-child(3)[data-r]::before { transition-delay: .6s; }
@media (max-width: 900px) {
  .js-anim .lp-dsi .hd-route .cell[data-r]::before { transform: scaleY(0); }
  .js-anim .lp-dsi .hd-route .cell[data-r].is-in::before { transform: none; }
  .lp-dsi .hd-route .cell:nth-child(n), .lp-dsi .hd-route .cell:nth-child(n) .hd-route__icon { transition-delay: 0ms; }
}
/* the physicians: one after another */
.lp-dsi .cell--doc:nth-child(2) { transition-delay: 90ms; }
.lp-dsi .cell--doc:nth-child(3) { transition-delay: 180ms; }
.lp-dsi .cell--doc:nth-child(4) { transition-delay: 270ms; }


/* ================= NARROWER SCREENS ================= */
@media (max-width: 1080px) {
  .lp-dsi .hd-day .sec-split, .lp-dsi .hd-setting .sec-split { grid-template-columns: minmax(0, 1fr); }
  .lp-dsi .sec-still { position: static; max-width: min(520px, 100%); }
  .lp-dsi .hd-day .hd-quote--card { max-width: 360px; margin-top: 0; }
}
@media (max-width: 760px) {
  /* one column: the same space under every card, none under the last */
  .lp-dsi .hd-qualify .cells { grid-template-columns: minmax(0, 1fr); }
  .lp-dsi .hd-evidence .cell:not(:last-child) { margin-bottom: 32px; }
}
@media (max-width: 620px) {
  .lp-dsi .lede { font-size: 1.0625rem; line-height: 1.6; }
  /* the clock's cards: less padding on a phone */
  .lp-dsi .cells--stack .cell { padding: 22px 22px 24px 20px; }
  .lp-dsi .faq__a { padding-right: 0; }
  .lp-dsi .cta--lead .btn { width: 100%; }
  .lp-dsi .cta--lead > a { flex: 1 1 100%; }
}

/* ================= REDUCED MOTION ================= */
/* Everything holds its end state; nothing slides, draws or settles. */
@media (prefers-reduced-motion: reduce) {
  .lp-dsi .hd-fig__frame, .lp-dsi .hd-fig__cap, .lp-dsi .faq__a, .lp-dsi .clock-rail__stops li.is-on::after { animation: none !important; }
  .lp-dsi .hc-bar, .lp-dsi .hc-bar__track a::after { transition: none !important; }
  .lp-dsi main .btn:hover { transform: none; }
  .lp-dsi .hd-arr, .lp-dsi .hd-pause { transition: none; transform: none !important; }
  .lp-dsi .clock-rail__fill { transition: none !important; }
  .lp-dsi .hd-scale line, .lp-dsi .hd-scale circle, .lp-dsi .hd-scale span { transition: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .lp-dsi .hd-scale circle { transform: none !important; }
  .lp-dsi [data-r], .lp-dsi [data-r]::before, .lp-dsi [data-r]::after, .lp-dsi .hd-route__icon { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ================= PRINT ================= */
/* The finished page, dark on white: no bar, no films' play marks moving,
   every reveal shown, every answer open (the script opens them and puts
   them back). */
@media print {
  .lp-dsi .hc-bar { display: none !important; }
  .lp-dsi main *, .lp-dsi main *::before, .lp-dsi main *::after { animation: none !important; transition: none !important; }
  .lp-dsi [data-r], .lp-dsi .hd-route__icon { opacity: 1 !important; transform: none !important; }
  .lp-dsi .hd-scale { display: none !important; }
  .lp-dsi .sec, .lp-dsi .ctaband { padding: 28px 0; background: #fff !important; color: var(--ink) !important; }
  .lp-dsi .ctaband * { color: var(--ink) !important; }
  .lp-dsi .ctaband__pattern, .lp-dsi .faq__ic, .lp-dsi .hd-pause { display: none !important; }
  /* navy grounds do not print: whatever sat on one is set dark on white */
  .lp-dsi .hd-route__icon--key { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--border-strong) !important; }
  .lp-dsi .hd-route__icon--key .hd-level { fill: var(--accent) !important; stroke: var(--accent) !important; }
  .lp-dsi .sec-still { position: static; box-shadow: none; }
  .lp-dsi .clock-rail { display: none; }
  .lp-dsi .clock-split { grid-template-columns: minmax(0, 1fr); }
  .lp-dsi .clock-rail.is-placed ~ .cells .cell__code { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .lp-dsi .cells--stack .cell { min-height: 0; box-shadow: none !important; }
  .lp-dsi .cell, .lp-dsi details { break-inside: avoid; }
  .lp-dsi main .btn { border: 1px solid var(--ink); background: #fff !important; color: var(--ink) !important; box-shadow: none; }
}

/* The headline keeps its line breaks while the display face loads: a local
   Times, scaled to the display face's width, stands in for it (the hip page's
   fix). Nothing is downloaded; with no local Times the stack carries on. */
@font-face { font-family: 'hd-times'; font-weight: 100 900; font-style: normal; src: local('Times New Roman'), local('TimesNewRomanPSMT'); size-adjust: 79%; }
@font-face { font-family: 'hd-times'; font-weight: 100 900; font-style: italic; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'); size-adjust: 79%; }
.lp-dsi .hd-hero h1 { font-family: 'Cormorant Garamond', 'hd-times', 'Times New Roman', Georgia, serif; }