/* 406 Dental · single-tooth implant campaign.
   Concept: a drawing sheet. The logo's thin gold rule becomes the implant's centreline.
   Loads after the canonical components.css. Canonical tokens and the few form overrides
   are grouped at the end of this file so they are easy to review. */

:root {
  --navy: #0b1829;
  --navy-2: #13263c;
  --plate: #0e1f33;
  --gold: #e2c488;
  --gold-pale: #f3e6c6;
  --gold-ink: #7f6128;
  --ink: #0e1c2c;
  --muted: #4b5a69;
  --on-dark: #eef3f7;
  --on-dark-muted: #bccad7;
  --line: #d5dbe0;
  --line-dark: rgba(226, 196, 136, .28);
  --stone: #eef1f3;
  --blue: #1f5a8c;

  --font-display: "Avenir Next", Avenir, Montserrat, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
  --wrap: 1240px;
  --wrap-hero: 1560px;
  --section-space: clamp(72px, 8vw, 120px);
  --centreline: repeating-linear-gradient(180deg, var(--gold) 0 14px, transparent 14px 18px, var(--gold) 18px 21px, transparent 21px 25px);
  --mf-header-offset: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 17px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
main:focus { outline: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap-hero { width: min(100% - 2 * var(--gutter), var(--wrap-hero)); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 90; padding: 12px 18px; border-radius: 10px; background: #fff; color: var(--ink); font-weight: 600; }
.skip-link:focus { top: 12px; }

h2 { font: 300 clamp(32px, 3.6vw, 52px)/1.12 var(--font-display); letter-spacing: -.012em; text-wrap: balance; }
h3 { font: 600 19px/1.3 var(--font-body); }
h4 { font: 600 18px/1.3 var(--font-body); }
.lede { margin-top: 16px; color: var(--muted); max-width: 54ch; }

.eyebrow { margin-bottom: 14px; color: var(--gold-ink); font: 600 13px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow-on-dark { color: var(--gold); }

/* Main action */
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 15px 28px; border-radius: 999px; font: 700 17px/1.25 var(--font-body); text-align: center; text-decoration: none; transition: background-color .18s ease, transform .18s ease; }
.cta:active { transform: translateY(1px); }
.cta-gold { background: var(--gold); color: var(--navy); }
.cta-gold:hover { background: var(--gold-pale); }
.cta-gold:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lp-fill-full { width: 100%; }

/* Header */
.site-header { background: var(--navy); color: var(--on-dark); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.logo { width: auto; height: 34px; flex: none; }
.header-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.header-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark-muted); font-size: 15px; text-decoration: none; }
.header-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.header-nav a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Hero */
.hero { background: var(--navy); color: var(--on-dark); padding-block: 14px 32px; }
.hero h1 { font: 300 calc(5.6px + 8.57vw)/1.08 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
.h-accent { color: var(--gold); }
.hero-support { margin-top: 14px; color: var(--on-dark-muted); font-size: 17px; line-height: 1.5; max-width: 34em; }
.hero-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; margin-top: 16px; }
.hero-price strong { flex: none; color: #fff; font: 600 24px/1.2 var(--font-display); font-variant-numeric: lining-nums; }
.hero-price span { flex: 1 1 10em; min-width: 0; color: var(--on-dark-muted); font-size: 14px; line-height: 1.35; }
.hero .mf-proof-action { margin-top: 16px; }
.hero-context { display: none; }

/* Interactive scene */
.scene { margin-top: 20px; }
.stage { position: relative; height: min(66vw, 360px); overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; background: linear-gradient(rgba(148, 178, 209, .07) 1px, transparent 1px) 0 0 / 100% 40px, linear-gradient(90deg, rgba(148, 178, 209, .07) 1px, transparent 1px) 0 0 / 40px 100%, radial-gradient(60% 50% at 50% 34%, #1a3350, var(--plate) 72%); }
.scene-question { position: absolute; z-index: 1; top: 12px; left: 14px; width: 7.6em; color: var(--on-dark); font-size: 13px; font-weight: 600; line-height: 1.3; pointer-events: none; }
.implant-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }

.bone-hatch { opacity: .5; transition: opacity .4s ease; }
.axis { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 22 6 4 6; opacity: .6; }

.part { transition: transform .62s cubic-bezier(.22, .8, .2, 1); }
.mat, .wire { transition: opacity .3s ease; }
.wire { opacity: 0; fill: none; stroke: #8ea6be; stroke-width: 1.6; }
.edge { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0; transition: opacity .3s ease; }
.leader { fill: none; stroke: #8ea6be; stroke-width: 1.5; transition: stroke .3s ease; }
.dot { fill: #8ea6be; transition: fill .3s ease; }
.part-label { fill: var(--on-dark-muted); font: 500 27px var(--font-body); stroke: var(--plate); stroke-width: 6px; paint-order: stroke; stroke-linejoin: round; transition: fill .3s ease; }

/* Base state: every part fully drawn and exploded, every note visible.
   This is what a browser without :has() gets, so the scene fails visible. */
.part-crown { transform: translateY(-118px); }
.part-connector { transform: translateY(-44px); }
.part-implant { transform: none; }
.scene[data-enhanced] .part { cursor: pointer; }

/* Part controls: native radios, equal columns on narrow screens. */
.part-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; margin: 12px 0 0; padding: 0; border: 0; }
.part-option { position: relative; display: block; min-width: 0; }
.part-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.part-option span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 6px; border: 1px solid var(--line-dark); border-radius: 12px; color: var(--on-dark); font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.part-option input:hover + span { border-color: var(--gold); }
.part-option input:checked + span { border-color: var(--gold); background: var(--gold); color: var(--navy); }
.part-option input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }

.part-notes { display: grid; gap: 12px; margin-top: 12px; }
.part-note-title { margin-bottom: 5px; color: var(--gold); font-size: 17px; font-weight: 600; line-height: 1.25; }
.part-note p:last-child { color: var(--on-dark-muted); font-size: 16px; line-height: 1.5; }

.fig-caption { margin-top: 12px; color: #a5b5c4; font-size: 13px; line-height: 1.45; }
.fig-caption a { color: inherit; text-underline-offset: 3px; }
.fig-caption a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Selection states, enabled only where :has() exists. */
@supports selector(:has(*)) {
  .part .mat { opacity: .14; }
  .part .wire { opacity: 1; }
  .part-note { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility .25s; }

  .scene:has(input[value="crown"]:checked) .part-crown { transform: translateY(-56px); }
  .scene:has(input[value="crown"]:checked) .part-connector { transform: none; }

  .scene:has(input[value="connector"]:checked) .part-crown { transform: translateY(-118px); }
  .scene:has(input[value="connector"]:checked) .part-connector { transform: translateY(-44px); }

  .scene:has(input[value="implant"]:checked) .part-crown { transform: translateY(-132px); }
  .scene:has(input[value="implant"]:checked) .part-connector { transform: translateY(-84px); }
  .scene:has(input[value="implant"]:checked) .bone-hatch { opacity: 1; }

  .scene:has(input[value="crown"]:checked) .part-crown :is(.mat, .edge),
  .scene:has(input[value="connector"]:checked) .part-connector .mat,
  .scene:has(input[value="implant"]:checked) .part-implant .mat { opacity: 1; }

  .scene:has(input[value="crown"]:checked) .part-crown .wire,
  .scene:has(input[value="connector"]:checked) .part-connector .wire,
  .scene:has(input[value="implant"]:checked) .part-implant .wire { opacity: 0; }

  .scene:has(input[value="crown"]:checked) .part-crown .part-label,
  .scene:has(input[value="connector"]:checked) .part-connector .part-label,
  .scene:has(input[value="implant"]:checked) .part-implant .part-label { fill: var(--gold-pale); font-weight: 600; }

  .scene:has(input[value="crown"]:checked) .part-crown .leader,
  .scene:has(input[value="connector"]:checked) .part-connector .leader,
  .scene:has(input[value="implant"]:checked) .part-implant .leader { stroke: var(--gold); }

  .scene:has(input[value="crown"]:checked) .part-crown .dot,
  .scene:has(input[value="connector"]:checked) .part-connector .dot,
  .scene:has(input[value="implant"]:checked) .part-implant .dot { fill: var(--gold); }

  .scene:has(input[value="crown"]:checked) [data-note="crown"],
  .scene:has(input[value="connector"]:checked) [data-note="connector"],
  .scene:has(input[value="implant"]:checked) [data-note="implant"] { visibility: visible; opacity: 1; }
}

/* Drawing-sheet sections */
.sheet { position: relative; padding-block: var(--section-space); }
.sheet::before { content: ""; position: absolute; top: 0; left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); width: 2px; height: clamp(40px, 5vw, 64px); background: var(--centreline); }
.sheet-white { background: #fff; }
.sheet-stone { background: var(--stone); }
.sheet-navy { background: var(--navy); color: var(--on-dark); }
.sheet-white::before, .sheet-stone::before { filter: saturate(.8) brightness(.72); }

/* Static parts */
.parts-grid { display: grid; gap: 32px; }
.parts-figure img { width: 100%; max-width: 460px; border-radius: 18px; }
.parts-figure figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; }
.parts-list { display: grid; gap: 0; margin-top: 28px; counter-reset: part; }
.parts-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding-block: 18px; border-top: 1px solid var(--line); counter-increment: part; }
.parts-list li::before { content: counter(part); grid-row: span 2; color: var(--gold-ink); font: 600 15px/1.7 ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; }
.parts-list p { margin-top: 4px; color: var(--muted); }

/* Who and where */
.place { display: grid; background: var(--stone); }
.place-photo { position: relative; }
.place-photo img { width: 100%; aspect-ratio: 1 / 1.06; object-fit: cover; object-position: 50% 82%; }
.place-photo figcaption { padding: 10px var(--gutter) 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.place-copy { padding: 40px var(--gutter) var(--section-space); }
.place-blocks { display: grid; gap: 28px; margin-top: 28px; }
.place-block { padding-top: 18px; border-top: 1px solid #c7ced5; }
.place-block > p { margin-top: 8px; color: var(--muted); }
.place-block > .place-ask, .place-block > .place-phone { color: var(--ink); font-weight: 600; }
.address-plate { margin-top: 8px; font: 300 clamp(26px, 2.5vw, 36px)/1.2 var(--font-display); letter-spacing: -.008em; }

/* Cost and first step */
.cost-grid { display: grid; gap: 48px; }
.price-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 22px; }
.price-from { color: var(--gold); font: 300 clamp(24px, 2.5vw, 34px)/1 var(--font-display); }
.price-amount { color: var(--gold-pale); font: 200 clamp(68px, 10vw, 136px)/1 var(--font-display); font-variant-numeric: lining-nums; letter-spacing: -.02em; }
.price-basis { max-width: 46ch; margin-top: 16px; color: var(--on-dark-muted); }
.scope-grid { display: grid; gap: 24px; margin-top: 30px; }
.scope-grid h3 { padding-bottom: 10px; border-bottom: 1px solid var(--line-dark); color: var(--gold-pale); font-size: 16px; }
.scope-grid li { padding-block: 7px; color: var(--on-dark); font-size: 16px; line-height: 1.4; }
.cost-main .mf-proof-action { margin-top: 32px; }
.steps-title { margin-bottom: 8px; color: var(--gold); font: 600 13px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.steps { position: relative; counter-reset: step; }
.steps::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 15px; width: 2px; background: var(--centreline); opacity: .75; }
.steps li { position: relative; padding: 18px 0 18px 54px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; top: 15px; left: 0; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--gold); border-radius: 50%; background: var(--navy); color: var(--gold); font: 600 14px/1 ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; }
.steps h4 { color: #fff; }
.steps p { margin-top: 5px; color: var(--on-dark-muted); font-size: 16px; line-height: 1.5; }

/* Reviews */
.reviews-head { display: grid; gap: 20px; margin-bottom: 28px; }
.reviews-aggregate { color: var(--ink); }
.reviews-aggregate p { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.quote-scroller { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scroll-padding-inline: var(--gutter); }
.quote-scroller:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.quote-list { display: flex; gap: 14px; width: max-content; }
.quote-list > li { flex: none; width: min(82vw, 340px); scroll-snap-align: start; }
.quote-card { display: flex; flex-direction: column; height: 100%; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); }
.quote-card blockquote { flex: 1 0 auto; font: 400 21px/1.3 var(--font-display); }
.quote-stars { margin-top: 14px; color: var(--blue); font: 20px/1 Arial, sans-serif; letter-spacing: .04em; }
.quote-card figcaption { display: grid; gap: 3px; margin-top: 14px; }
.quote-card figcaption strong { font-size: 16px; font-weight: 600; }
.quote-card figcaption span { color: var(--muted); font-size: 14px; line-height: 1.4; }
.quote-featured { border-color: var(--navy); background: var(--navy); color: #fff; }
.quote-featured .quote-stars { color: #fff; }
.quote-featured figcaption span { color: var(--on-dark-muted); }
.quote-swipe { margin-top: 4px; color: var(--muted); font-size: 14px; }
.quote-note { max-width: 62ch; margin-top: 14px; color: var(--muted); font-size: 15px; }

/* One FAQ group */
.faq-grid { display: grid; gap: 24px; }
.faq details { border-top: 1px solid #c7ced5; }
.faq details:last-child { border-bottom: 1px solid #c7ced5; }
.faq summary { position: relative; display: block; min-height: 56px; padding: 16px 40px 16px 0; font-size: 18px; font-weight: 600; line-height: 1.35; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; top: 12px; right: 4px; color: var(--gold-ink); font: 300 28px/1.1 var(--font-body); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.faq details p { max-width: 62ch; padding: 0 40px 20px 0; color: var(--muted); }

/* Closing action */
.closing { background: var(--navy-2); color: var(--on-dark); padding-block: var(--section-space); }
.closing-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.closing h2 { max-width: 18em; }
.closing-text { max-width: 44ch; margin-top: 16px; color: var(--on-dark-muted); }
.closing .mf-proof-action { margin-top: 28px; }

/* Clinic footer */
.site-footer { background: var(--navy); color: var(--on-dark-muted); padding-block: 44px; font-size: 15px; line-height: 1.55; }
.footer-grid { display: grid; gap: 20px; }
.footer-note { color: #a5b5c4; font-size: 14px; }

/* Keep part selection in reach on narrow phones before the drawing scrolls in. */
@media (max-width: 360px) {
  .hero { padding-top: 10px; }
  .hero .eyebrow { margin-bottom: 10px; font-size: 12px; letter-spacing: .10em; }
  .hero-support { margin-top: 10px; font-size: 16px; line-height: 1.4; }
  .hero-price { column-gap: 8px; margin-top: 12px; }
  .hero-price strong { font-size: 21px; }
  .hero-price span { flex: 1 1 8em; font-size: 13px; }
  .hero .mf-proof-action { margin-top: 12px; }
  .scene { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  .part-picker { grid-row: 1; margin: 0 0 10px; }
  .scene-question { display: none; }
  .cta { padding-inline: 16px; font-size: 16px; }
  .logo { height: 30px; }
}

/* Larger part labels on small drawings, so they stay readable. */
@media (max-width: 899px) {
  .part-label { font-size: 34px; }
  .header-nav { display: none; }
  .header-row { min-height: 60px; }
  .logo { height: 30px; }
}

@media (max-width: 360px) {
  .header-row { min-height: 50px; }
}

/* Width-based only. Phones stay in the contract's 33 to 40px range. */
@media (max-width: 650px) {
  .hero h1 { font-size: min(calc(5.6px + 8.57vw), 40px); font-weight: 400; }
}
@media (min-width: 651px) and (max-width: 899px) {
  .hero h1 { font-size: 52px; font-weight: 400; }
}

@media (min-width: 761px) {
  .quote-scroller { overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none; }
  .quote-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: auto; }
  .quote-list > li { width: auto; }
  .quote-list > li:first-child { grid-column: 1 / -1; }
  .quote-card { padding: 30px; }
  .quote-card blockquote { font-size: 25px; }
  .quote-featured { padding: clamp(36px, 5vw, 64px); }
  .quote-featured blockquote { font: 300 clamp(36px, 4.6vw, 64px)/1.12 var(--font-display); letter-spacing: -.012em; }
  .quote-featured .quote-stars { margin-top: 22px; font-size: 24px; }
  .quote-swipe { display: none; }
  .reviews-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; }
  .parts-grid { grid-template-columns: minmax(280px, 460px) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
  .scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Desktop: two columns, hero fills the first fold above the dock. */
@media (min-width: 900px) {
  .site-footer { padding-block: 56px; }
  .hero { display: grid; align-items: center; min-height: min(calc(100svh - 76px), 960px); padding-block: 24px 112px; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(350px, 40vw, 520px); align-items: center; column-gap: 40px; }
  .hero h1 { font-size: clamp(46px, 4.2vw, 72px); line-height: 1.06; }
  .hero-support { margin-top: 18px; font-size: 19px; }
  .hero-price { margin-top: 20px; }
  .hero-price strong { font-size: 28px; }
  .hero-price span { flex: 0 1 auto; font-size: 15px; }
  .hero .mf-proof-action { margin-top: 22px; }
  .hero-context { display: flex; align-items: center; gap: 14px; max-width: 30em; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); }
  .hero-context p { color: var(--on-dark-muted); font-size: 15px; line-height: 1.45; }
  .hero-context strong { color: #fff; font-weight: 600; }
  .hero-address { display: block; }
  .place-chip { position: relative; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 12px; }
  .place-chip img { width: 100%; height: 100%; object-fit: cover; transform: scale(2.7); transform-origin: 55% 66%; }
  .scene { margin-top: 0; }
  .stage { height: auto; aspect-ratio: 1; }
  .scene-question { top: 16px; left: 18px; width: 8.5em; font-size: 15px; }

  .place { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: max(0px, calc((100% - 1560px) / 2)); align-items: center; }
  .place-photo img { height: clamp(560px, 52vw, 760px); aspect-ratio: auto; }
  .place-photo figcaption { padding: 10px 16px 16px var(--gutter); }
  .place-copy { align-self: center; padding: var(--section-space) clamp(32px, 6vw, 96px); }
  .cost-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 104px); align-items: start; }
  .faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
  .footer-grid { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .footer-grid .logo { grid-row: span 2; }
  .footer-note { grid-column: 2 / -1; }
}

/* Wide desktop: part controls become a callout rail beside the drawing. */
@media (min-width: 1280px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; }
  .scene { display: grid; grid-template-columns: clamp(440px, 36vw, 640px) 224px; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 28px; grid-template-areas: "stage ." "stage picker" "stage notes" "stage caption" "stage ."; }
  .stage { grid-area: stage; }
  .part-picker { grid-area: picker; grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .part-option span { justify-content: flex-start; padding-inline: 16px; }
  .part-notes { grid-area: notes; margin-top: 18px; }
  .fig-caption { grid-area: caption; margin-top: 16px; }
}

/* Reduced motion: complete, instant state changes. */
@media (prefers-reduced-motion: reduce) {
  .part, .mat, .wire, .edge, .leader, .dot, .part-label, .part-note, .bone-hatch, .cta, .part-option span { transition: none !important; }
}

@media (forced-colors: active) {
  .part-option input:checked + span { outline: 3px solid Highlight; }
}

/* Canonical component tokens and scoped form adaptations.
   Colours use the documented variables. The remaining rules are type-family and
   image-fade adjustments only. No shared source, field, validation or privacy
   behaviour is altered. */
:root {
  --mf-clinic-action: #0f2740;
  --mf-clinic-surface: #fff;
  --mf-clinic-text: #0e1c2c;
  --mf-clinic-visual: #0b1829;
  --mf-clinic-visual-text: #fff;
  --mf-form-image-position: 50% 30%;
}
.mf-lead-dock p, .mf-lead-dock a, [data-mf-submit], .mf-field label, .mf-field input, .mf-clinic-label, .mf-submit-reassurance, .mf-contact-hint, .mf-form-status { font-family: var(--font-body); }
.mf-lead-header h2 { font-family: var(--font-display); font-weight: 400; }
.mf-lead-visual::after { background: linear-gradient(0deg, var(--mf-clinic-visual) 10%, transparent 48%); }
.mf-lead-visual-copy h2 { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 40px); font-weight: 300; line-height: 1.12; letter-spacing: -.012em; overflow-wrap: normal; }
.mf-lead-visual-copy p { font-family: var(--font-body); color: var(--gold); }
.mf-lead-visual-copy p.lp-form-role { margin: 12px 0 0; color: #dfe7ee; font-size: 15px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; }