/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: Garden · tone: warm clinical · anchor hue: leaf-green
 * pre-emit critique: P5 H5 E4 S5 R5 V5
 * H2 hero knobs: ratio=7/5 · right=real photo · divider=negative-space
 * Split Studio: alternating copy/proof · nav=N12 tint+ink/no-dismiss · footer=Ft4 dense typographic
 * audience: women with children 1–3 years · use: book first visit · enrichment: E8 provided photography
 * slop: pass · mobile: 320/375/414/768 · no mid-word heading breaks
 */
@import url("../tokens.css");

*, *::before, *::after { box-sizing: border-box; }

html,
body { overflow-x: clip; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + var(--space-lg));
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

body, button, input { font-family: var(--font-body); }
main { padding-block-start: calc(var(--banner-h) + var(--bar-h)); }
img { display: block; max-width: 100%; height: auto; background: var(--color-image-bg); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }

h1,
h2,
h3 {
  min-width: 0;
  font-family: var(--font-display);
  font-style: normal;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

h1 {
  max-width: 18ch;
  font-size: clamp(2.35rem, 4.6vw, 4.1rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

h2 {
  max-width: 18ch;
  font-size: clamp(2.2rem, 5vw, 4.35rem);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.035em;
}

h3 {
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

:focus-visible {
  outline: var(--rule-strong) solid var(--color-focus);
  outline-offset: var(--space-2xs);
}

.site-nav__banner :focus-visible { outline-color: var(--color-ink); }
.site-nav__bar :focus-visible,
.hero :focus-visible,
.mechanism :focus-visible,
.booking :focus-visible { outline-color: var(--color-gold); }

.shell {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.metrika-noscript { position: absolute; inset-inline-start: -625rem; }

/* N12 — та же навигация, что на соседней посадке. */
.site-nav {
  position: fixed;
  z-index: var(--z-sticky);
  inset: 0 0 auto;
  transform: translateY(0);
  transition: transform var(--dur-long) var(--ease-out);
}

.site-nav.is-compact { transform: translateY(calc(var(--banner-h) * -1)); }

.site-nav__banner {
  display: flex;
  height: var(--banner-h);
  padding-inline: var(--space-md);
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--color-sage-deep);
  color: var(--color-accent-ink);
  font-size: var(--text-sm);
  line-height: 1;
  white-space: nowrap;
}

.site-nav__banner strong {
  display: inline-grid;
  min-width: 2ch;
  place-items: center;
  color: var(--color-ink);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

.site-nav__banner a {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  border-block-end: var(--rule-hair) solid currentColor;
  font-weight: 700;
  white-space: nowrap;
}

.site-nav__bar {
  background: var(--color-ink);
  color: var(--color-paper);
  border-block-end: var(--rule-hair) solid var(--color-rule-dark);
}

.site-nav__inner {
  display: flex;
  min-height: var(--bar-h);
  align-items: center;
  gap: var(--space-sm);
}

.brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-sm);
  white-space: nowrap;
}

.brand__mark {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
}

.brand > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.15;
}

.brand b { font-size: var(--text-sm); }
.brand small { display: none; margin-block-start: var(--space-2xs); color: var(--color-paper-3); font-size: var(--text-xs); }
.site-nav__links, .site-nav__phone { display: none; }

.button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 3.25rem;
  padding-inline: var(--space-lg);
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: var(--rule-strong) solid var(--color-accent-deep);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transform: translateY(0);
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.button--small { min-height: 2.75rem; margin-inline-start: auto; padding-inline: var(--space-md); font-size: var(--text-sm); }
.button--wide { width: 100%; }
.button:active { transform: translateY(var(--space-3xs)); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.button.is-loading { cursor: wait; }
.button.is-loading .button__label { opacity: 0; }

.button__spinner {
  position: absolute;
  display: none;
  width: 1.25rem;
  height: 1.25rem;
  border: var(--rule-strong) solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: spin var(--dur-long) linear infinite;
}

.button.is-loading .button__spinner { display: block; }
.button.is-error { background: var(--color-error-soft); color: var(--color-error); border-color: var(--color-error); }
.button.is-success { background: var(--color-success); color: var(--color-paper); border-color: var(--color-success); }
@keyframes spin { to { transform: rotate(360deg); } }

.text-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  border-block-end: var(--rule-hair) solid currentColor;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* H2 Split Diptych. */
.hero {
  padding-block: var(--space-2xl) var(--space-3xl);
  background: var(--color-ink);
  color: var(--color-paper);
}

.hero__grid { display: grid; gap: var(--space-2xl); }
.hero__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }

.hero__context {
  max-width: max-content;
  padding-block-end: var(--space-xs);
  border-block-end: var(--rule-hair) solid var(--color-accent);
  color: var(--color-sage-deep);
  font-size: var(--text-sm);
  font-weight: 700;
}

.hero__lead { max-width: 39rem; color: var(--color-paper-3); font-size: var(--text-md); line-height: 1.5; }

.hero__offer {
  display: grid;
  width: min(100%, 31rem);
  padding-block: var(--space-md);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-xs) var(--space-lg);
  border-block: var(--rule-hair) solid var(--color-rule-dark);
  font-variant-numeric: tabular-nums;
}

.hero__offer > div { display: flex; flex-direction: column; gap: var(--space-2xs); }
.hero__offer span { font-weight: 700; }
.hero__offer s { color: var(--color-paper-3); }
.hero__offer strong { color: var(--color-gold); font-family: var(--font-display); font-size: clamp(2.75rem, 10vw, 4.5rem); font-weight: 700; line-height: 0.8; letter-spacing: -0.04em; }
.hero__offer small { grid-column: 1 / -1; color: var(--color-paper-3); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }

.hero__rating {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  color: var(--color-paper-2);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.hero__rating .stars { color: var(--color-gold); font-size: var(--text-sm); letter-spacing: 0.05em; }
.hero__rating b { color: var(--color-paper); }

.hero__facts { display: grid; width: 100%; padding: 0; gap: var(--space-xs); list-style: none; color: var(--color-paper-2); }
.hero__facts li { display: grid; padding-block: var(--space-sm); grid-template-columns: 0.75rem minmax(0, 1fr); gap: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule-dark); }
.hero__facts li::before { content: ""; width: 0.5rem; height: 0.5rem; margin-block-start: var(--space-xs); background: var(--color-accent); border-radius: 50%; }

.hero__portrait {
  position: relative;
  min-width: 0;
  height: min(135vw, 38rem);
  overflow: hidden;
  background: var(--color-image-bg);
  border-radius: 5rem 5rem var(--radius-md) var(--radius-md);
}

.hero__portrait::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(to bottom, transparent, var(--color-scrim)); }
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 43%; }
.hero__portrait figcaption { position: absolute; z-index: var(--z-raised); inset-inline: var(--space-lg); inset-block-end: var(--space-lg); display: flex; flex-direction: column; color: var(--color-paper); }
.hero__portrait figcaption strong { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.1; }
.hero__portrait figcaption span { color: var(--color-paper-2); }
.hero__proof { position: absolute; z-index: var(--z-raised); inset: var(--space-lg) auto auto 50%; transform: translateX(-50%); padding: var(--space-xs) var(--space-sm); background: var(--color-paper); color: var(--color-ink); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }

.question-head { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.question-head > p:not(.question-head__aside) { max-width: 42rem; color: var(--color-ink-soft); font-size: var(--text-md); }
.question-head__aside { max-width: 36rem; padding-block-end: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-accent); color: var(--color-accent-deep); font-size: var(--text-sm); font-weight: 700; }
.question-head--dark { color: var(--color-paper); }
.question-head--dark > p:not(.question-head__aside) { color: var(--color-paper-3); }

.recognition { padding-block: var(--space-3xl) var(--space-4xl); background: var(--color-paper-2); color: var(--color-ink); }
.recognition__intro { display: grid; gap: var(--space-xl); }
.recognition__lead { max-width: 38rem; color: var(--color-ink-soft); font-size: var(--text-md); }

.voice-grid {
  display: grid;
  padding-block-start: var(--space-2xl);
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
}

.voice-card { min-width: 0; overflow: hidden; background: var(--color-paper); border-radius: var(--radius-md); }
.voice-card figure { display: grid; height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
.voice-card img { width: 100%; height: 100%; min-height: 13rem; object-fit: cover; }
.voice-card figcaption { padding: var(--space-md); color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.3; }

.doctor { padding-block: var(--space-4xl); background: var(--color-paper); color: var(--color-ink); }
.doctor__intro { display: grid; gap: var(--space-2xl); }
.doctor__name { align-self: end; padding-block-start: var(--space-xl); border-block-start: var(--rule-strong) solid var(--color-ink); }
.doctor__name > p { color: var(--color-accent-deep); font-size: var(--text-md); font-weight: 700; }
.doctor__name h3 { max-width: 14ch; margin-block: var(--space-xs); font-size: clamp(2.1rem, 6vw, 4.2rem); }
.doctor__name > span { display: block; margin-block-end: var(--space-lg); color: var(--color-ink-soft); }

.stat-strip { display: grid; margin-block-start: var(--space-3xl); border-block: var(--rule-hair) solid var(--color-rule); }
.stat-strip > div { display: flex; min-height: 7.5rem; padding-block: var(--space-lg); flex-direction: column; justify-content: center; border-block-end: var(--rule-hair) solid var(--color-rule); }
.stat-strip > div:last-child { border-block-end: 0; }
.stat-strip b { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-strip span { margin-block-start: var(--space-xs); color: var(--color-ink-soft); font-size: var(--text-sm); }

.process-gallery { margin-block-start: var(--space-3xl); }
.process-gallery__head { display: flex; margin-block-end: var(--space-md); align-items: center; justify-content: space-between; gap: var(--space-md); }
.process-gallery__head > p { font-family: var(--font-display); font-size: var(--text-lg); }
.process-gallery__controls { display: flex; gap: var(--space-xs); }
.process-gallery__controls button { display: grid; width: 2.75rem; height: 2.75rem; padding: 0; place-items: center; background: var(--color-paper-2); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); border-radius: 50%; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.process-gallery__controls button:active { transform: translateY(var(--space-3xs)); }
.process-gallery__controls button:disabled { opacity: 0.5; cursor: not-allowed; }
.process-gallery__track { display: flex; min-width: 0; padding-block-end: var(--space-sm); overflow-x: auto; gap: var(--space-md); scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-accent) var(--color-paper-3); }
.process-gallery__track figure { position: relative; min-width: min(88%, 38rem); height: 29rem; overflow: hidden; background: var(--color-image-bg); scroll-snap-align: start; border-radius: var(--radius-md); }
.process-gallery__track figure::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(to bottom, transparent, var(--color-scrim)); }
.process-gallery__track img { width: 100%; height: 100%; object-fit: cover; }
.process-gallery__track figcaption { position: absolute; z-index: var(--z-raised); inset-inline: var(--space-lg); inset-block-end: var(--space-lg); max-width: 34rem; color: var(--color-paper); font-weight: 700; }

.difference { padding-block: var(--space-3xl) var(--space-4xl); background: var(--color-sage); color: var(--color-ink); }
.difference__grid { display: grid; gap: var(--space-3xl); }
.difference__copy { display: flex; flex-direction: column; gap: var(--space-xl); }
.difference .question-head--dark { color: var(--color-ink); }
.difference .question-head--dark > p { color: var(--color-ink-soft); }
.difference__statement { max-width: 37rem; font-family: var(--font-display); font-size: clamp(1.45rem, 3.2vw, 2.15rem); line-height: 1.25; }
.difference__note { max-width: 38rem; color: var(--color-ink-soft); }

.comparison { background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-md); overflow: hidden; }
.comparison > div { display: grid; padding: var(--space-lg); gap: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule-dark); }
.comparison > div:last-child { border-block-end: 0; }
.comparison dt { color: var(--color-sage-deep); font-size: var(--text-sm); font-weight: 700; }
.comparison dd { display: flex; min-width: 0; flex-direction: column; gap: var(--space-xs); }
.comparison dd b { font-family: var(--font-display); font-size: var(--text-md); }
.comparison dd span { color: var(--color-paper-3); }

.mechanism { padding-block: var(--space-4xl); background: var(--color-ink); color: var(--color-paper); }
.mechanism__grid { display: grid; gap: var(--space-2xl); }
.mechanism__scan { min-width: 0; align-self: center; }
.mechanism__scan img { width: 100%; border-radius: var(--radius-md); }
.mechanism__scan figcaption { margin-block-start: var(--space-sm); color: var(--color-paper); opacity: 0.72; font-size: var(--text-sm); line-height: 1.45; }
.mechanism__copy { display: flex; flex-direction: column; gap: var(--space-xl); }
.signal-steps { display: grid; padding: 0; list-style: none; border-block-start: var(--rule-hair) solid var(--color-rule-dark); }
.signal-steps li { display: grid; padding-block: var(--space-lg); grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-md); border-block-end: var(--rule-hair) solid var(--color-rule-dark); }
.signal-steps li > span { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--color-accent); border: var(--rule-hair) solid var(--color-accent); border-radius: 50%; font-weight: 700; }
.signal-steps p { display: flex; flex-direction: column; color: var(--color-paper-3); }
.signal-steps b { color: var(--color-paper); }
.mechanism__note { max-width: 42rem; color: var(--color-paper-3); font-size: var(--text-sm); }

.procedure-shot { margin-block-start: var(--space-3xl); }
.procedure-shot figure { display: grid; overflow: hidden; background: var(--color-paper-2); color: var(--color-ink); border-radius: var(--radius-md); }
.procedure-shot img { width: 100%; max-height: 35rem; object-fit: cover; object-position: center 42%; }
.procedure-shot figcaption { display: flex; padding: var(--space-lg); flex-direction: column; gap: var(--space-xs); }
.procedure-shot figcaption span { color: var(--color-ink-soft); }

.vessels { padding-block: var(--space-3xl) var(--space-4xl); background: var(--color-paper); color: var(--color-ink); }
.vessels__grid { display: grid; gap: var(--space-3xl); }
.vessels__title > p { max-width: max-content; margin-block-end: var(--space-lg); padding-block-end: var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-accent); color: var(--color-accent-deep); font-weight: 700; }
.vessels__body { display: flex; min-width: 0; flex-direction: column; gap: var(--space-xl); }
.vessels__body > p { max-width: 48rem; font-size: var(--text-md); }
.vessels__body aside { display: flex; padding: var(--space-xl); flex-direction: column; align-items: flex-start; gap: var(--space-md); background: var(--color-paper-3); color: var(--color-ink); border-radius: var(--radius-md); }
.vessels__body aside b { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2; }
.vessels__body aside p { color: var(--color-ink-soft); }

.visit { padding-block: var(--space-4xl); background: var(--color-paper-2); color: var(--color-ink); }
.visit__grid { display: grid; gap: var(--space-3xl); }
.visit__sticky { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xl); }
.visit-price { display: grid; width: 100%; padding-block: var(--space-lg); gap: var(--space-xs); border-block: var(--rule-hair) solid var(--color-rule); font-variant-numeric: tabular-nums; }
.visit-price > div { display: flex; align-items: baseline; gap: var(--space-md); }
.visit-price s { color: var(--color-muted); }
.visit-price strong { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; }
.visit-price small { color: var(--color-ink-soft); }
.visit__body { display: grid; gap: var(--space-3xl); min-width: 0; }
.visit-steps { display: grid; padding: 0; list-style: none; }
.visit-steps li { display: grid; padding-block: var(--space-xl); grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule); }
.visit-steps li:last-child { border-block-end: var(--rule-hair) solid var(--color-rule); }
.visit-steps li > span { color: var(--color-accent-deep); font-family: var(--font-display); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.visit-steps h3 { font-size: var(--text-xl); }
.visit-steps p { max-width: 35rem; margin-block-start: var(--space-sm); color: var(--color-ink-soft); }

.devices { display: grid; gap: var(--space-lg); }
.devices__lead { font-family: var(--font-display); font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.3; }
.devices__room img { width: 100%; border-radius: var(--radius-md); }
.devices__room figcaption { margin-block-start: var(--space-sm); color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.4; }
.device { padding: var(--space-lg); background: var(--color-paper); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); }
.device header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-block-end: var(--space-sm); }
.device h3 { font-size: clamp(1.15rem, 2.6vw, 1.45rem); }
.device__price { display: flex; align-items: baseline; gap: var(--space-2xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.device__price s { color: var(--color-ink-soft); }
.device__price b { color: var(--color-accent-deep); font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem); }
.device__price span { color: var(--color-ink-soft); font-size: var(--text-sm); }
.devices__note { color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.45; }

.related { padding-block: var(--space-3xl) var(--space-4xl); background: var(--color-sage); color: var(--color-ink); }
.related__links { margin-block-start: var(--space-2xl); border-block-start: var(--rule-strong) solid var(--color-ink); }
.related__links a { display: grid; min-height: 7.5rem; padding-block: var(--space-lg); grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg); border-block-end: var(--rule-hair) solid var(--color-rule-dark); }
.related__links a span { display: flex; min-width: 0; flex-direction: column; gap: var(--space-xs); }
.related__links a b { font-family: var(--font-display); font-size: var(--text-lg); }
.related__links a small { max-width: 46rem; color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.5; }
.related__links a i { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; color: var(--color-accent-deep); border: var(--rule-hair) solid var(--color-accent-deep); border-radius: 50%; font-style: normal; transition: background-color var(--dur-short) var(--ease-out); }

.faq { padding-block: var(--space-4xl); background: var(--color-paper); color: var(--color-ink); }
.faq__grid { display: grid; gap: var(--space-2xl); }
.faq__list { border-block-start: var(--rule-strong) solid var(--color-ink); }
.faq details { border-block-end: var(--rule-hair) solid var(--color-rule); }
.faq summary { display: grid; min-height: 4.75rem; padding-block: var(--space-lg); grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg); list-style: none; cursor: pointer; font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:active { background: var(--color-paper-3); }
.faq summary::after { content: "+"; display: grid; width: 2.75rem; height: 2.75rem; place-items: center; color: var(--color-accent-deep); border: var(--rule-hair) solid var(--color-accent-deep); border-radius: 50%; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details > div { display: grid; grid-template-rows: 0fr; }
.faq details[open] > div { grid-template-rows: 1fr; }
.faq details > div > p { max-width: 45rem; padding-block-end: var(--space-lg); overflow: hidden; color: var(--color-ink-soft); }

.booking { padding-block: var(--space-4xl); background: var(--color-ink); color: var(--color-paper); }
.booking__grid { display: grid; gap: var(--space-2xl); }
.booking__copy { display: flex; flex-direction: column; gap: var(--space-xl); }
.booking__recap { border-block-start: var(--rule-hair) solid var(--color-rule-dark); font-variant-numeric: tabular-nums; }
.booking__recap > div { display: flex; padding-block: var(--space-md); align-items: baseline; justify-content: space-between; gap: var(--space-lg); border-block-end: var(--rule-hair) solid var(--color-rule-dark); }
.booking__recap > div span { color: var(--color-paper-3); }
.booking__recap > div b { color: var(--color-accent); }
.booking__recap > div strong { color: var(--color-gold); font-family: var(--font-display); font-size: var(--text-2xl); }
.booking__recap > small { display: block; margin-block-start: var(--space-sm); color: var(--color-paper-3); }
.booking__address { max-width: 38rem; color: var(--color-paper-3); font-size: var(--text-sm); }

.booking-form-wrap { padding: var(--space-lg); background: var(--color-paper); color: var(--color-ink); border-radius: var(--radius-md); }
.booking-form-wrap h3 { font-size: var(--text-xl); }
.booking-form-wrap #form-intro > p { margin-block-start: var(--space-sm); color: var(--color-ink-soft); }
.lead-form { display: grid; margin-block-start: var(--space-xl); gap: var(--space-md); }
.field { display: grid; gap: var(--space-xs); }
.field > label { font-size: var(--text-sm); font-weight: 700; }
.field__control { position: relative; }
.field input { width: 100%; height: 3.25rem; padding-inline: var(--space-md) 3rem; background: var(--color-paper); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); outline: var(--rule-strong) solid transparent; outline-offset: var(--focus-offset); transition: background-color var(--dur-short) var(--ease-out); }
.field input::placeholder { color: var(--color-muted); opacity: 1; }
.field input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-soft); }
.field input:disabled { opacity: 0.55; cursor: not-allowed; }
.field__status { position: absolute; width: 1.25rem; height: 1.25rem; inset: 50% var(--space-md) auto auto; display: grid; place-items: center; border-radius: 50%; transform: translateY(-50%); font-size: var(--text-xs); font-weight: 700; }
.field__help { min-height: 1lh; color: var(--color-muted); font-size: var(--text-xs); }
.field.is-error input { background: var(--color-error-soft); border-color: var(--color-error); }
.field.is-error .field__status, .field.is-error .field__help { color: var(--color-error); }
.field.is-error .field__status::before { content: "!"; }
.field.is-success input { border-color: var(--color-success); }
.field.is-success .field__status { color: var(--color-success); }
.field.is-success .field__status::before { content: "✓"; }

.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-sm); color: var(--color-ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.consent input { width: 1.25rem; height: 1.25rem; margin: var(--space-3xs) 0 0; accent-color: var(--color-accent-deep); }
.consent input:disabled { cursor: not-allowed; opacity: 0.55; }
.consent a { text-decoration: underline; text-underline-offset: var(--space-2xs); white-space: nowrap; }
.form-message { padding: var(--space-sm); background: var(--color-error-soft); color: var(--color-error); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.lead-form__note { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; text-align: center; }

.success-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.success-card[hidden] { display: none; }
.success-card__mark { display: grid; width: 3rem; height: 3rem; place-items: center; background: var(--color-accent-soft); color: var(--color-accent-deep); border-radius: 50%; font-size: var(--text-md); font-weight: 700; }
.success-card__step { color: var(--color-accent-deep); font-weight: 700; }
.success-card__list { width: 100%; border-block-start: var(--rule-hair) solid var(--color-rule); }
.success-card__list p { display: flex; padding-block: var(--space-md); flex-direction: column; gap: var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-rule); }
.success-card__list span { color: var(--color-ink-soft); }

.footer { padding-block: var(--space-2xl) calc(var(--space-3xl) + env(safe-area-inset-bottom)); background: var(--color-paper-3); color: var(--color-ink); border-block-start: var(--rule-strong) solid var(--color-ink); }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.brand--footer small { display: block; color: var(--color-ink-soft); }
.footer__phone { min-height: 2.75rem; display: inline-flex; align-items: center; font-size: var(--text-md); font-weight: 700; white-space: nowrap; }
.footer__legal { display: grid; margin-block-start: var(--space-xl); padding-block-start: var(--space-lg); gap: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.55; }
.footer__legal a { color: var(--color-ink); text-decoration: underline; text-underline-offset: var(--space-2xs); white-space: nowrap; }
.footer__legal strong { color: var(--color-ink); }

@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):not(.is-error):not(.is-success):hover { background: var(--color-sage-deep); }
  .text-link:hover { color: var(--color-accent-deep); }
  .site-nav__links a:hover, .site-nav__phone:hover { color: var(--color-accent); }
  .process-gallery__controls button:hover { background: var(--color-accent-soft); }
  .related__links a:hover i { background: var(--color-accent-soft); }
  .faq summary:hover { background: var(--color-paper-2); }
  .field:not(.is-error) input:hover { background: var(--color-paper-2); }
}

@media (min-width: 40rem) {
  .brand small { display: block; }
  .site-nav__inner { gap: var(--space-lg); }
  .site-nav__phone { display: inline-flex; margin-inline-start: auto; font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
  .button--small { margin-inline-start: 0; }
  .hero__portrait { width: min(100%, 32rem); height: 39rem; }
  .recognition__intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; }
  .voice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voice-card:nth-child(2), .voice-card:nth-child(4) { transform: translateY(var(--space-xl)); }
  .doctor__intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .stat-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stat-strip > div { padding-inline: var(--space-sm); border-block-end: 0; border-inline-end: var(--rule-hair) solid var(--color-rule); }
  .stat-strip > div:last-child { border-inline-end: 0; }
  .process-gallery__track figure { min-width: min(72%, 42rem); height: 34rem; }
  .comparison > div { grid-template-columns: minmax(7rem, 0.55fr) minmax(0, 1.45fr); gap: var(--space-xl); }
  .procedure-shot figure { grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr); }
  .procedure-shot figcaption { justify-content: end; padding: var(--space-xl); }
  .vessels__body aside { margin-inline-start: var(--space-2xl); }
  .success-card__list p { display: grid; grid-template-columns: 10rem minmax(0, 1fr); }
}

@media (min-width: 60rem) {
  .site-nav__links { display: flex; margin-inline-start: auto; align-items: center; gap: var(--space-lg); color: var(--color-paper-3); font-size: var(--text-sm); }
  .site-nav__links a { min-height: 2.75rem; display: inline-flex; align-items: center; white-space: nowrap; }
  .site-nav__phone { margin-inline-start: 0; }
  .hero { padding-block: var(--space-xl) var(--space-2xl); }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--space-3xl); }
  .hero h1 { max-width: none; font-size: clamp(2.55rem, 3.65vw, 3.15rem); }
  .hero__copy { gap: var(--space-md); }
  .hero__portrait { width: 100%; height: 36rem; border-radius: var(--radius-arch); }
  .hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__facts li { display: flex; align-items: flex-start; }
  .difference__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: var(--space-4xl); }
  .mechanism__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: center; gap: var(--space-4xl); }
  .vessels__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--space-4xl); align-items: start; }
  .visit__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-4xl); align-items: start; }
  .visit__sticky { position: sticky; inset-block-start: calc(var(--bar-h) + var(--space-xl)); }
  .faq__grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--space-4xl); align-items: start; }
  .faq .question-head { position: sticky; inset-block-start: calc(var(--bar-h) + var(--space-xl)); }
  .booking__grid { grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.72fr); gap: var(--space-4xl); align-items: center; }
  .booking-form-wrap { padding: var(--space-xl); }
}

@media (min-width: 90rem) {
  .hero__grid { gap: var(--space-4xl); }
  .process-gallery__track figure { min-width: 47rem; }
}

@media (max-width: 23.99rem) {
  .site-nav__banner { justify-content: space-between; gap: var(--space-xs); font-size: var(--text-xs); }
  .site-nav__banner a { display: none; }
  .brand b { font-size: var(--text-xs); }
  .button--small { padding-inline: var(--space-sm); }
  .hero__actions { align-items: stretch; flex-direction: column; }
  .hero__actions .button, .hero__actions .text-link { width: 100%; justify-content: center; }
  .hero__rating, .hero__rating .stars { font-size: var(--text-xs); }
  .visit-steps li { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-md); }
  .vessels__body aside { padding: var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: var(--dur-micro) !important; animation-iteration-count: 1 !important; transition-duration: var(--dur-micro) !important; }
  .site-nav { transition: none; }
  .voice-card:nth-child(2), .voice-card:nth-child(4) { transform: none; }
}