/* ============================================================
   TOP SMILE — Dental Ecosystem
   Palette derived from the real clinic: olive scrubs, oak,
   alabaster walls, brass signage.
   ============================================================ */

:root {
  --ink: #0E120C;
  --olive-950: #12170F;
  --olive-900: #1A1F17;
  --olive-800: #232B1E;
  --olive-700: #2E3728;
  --olive-600: #3B4534;
  --olive-500: #4A5340;
  --olive-300: #8B9480;

  --bone: #F4F1E9;
  --bone-2: #EAE5D9;
  --bone-3: #DAD4C4;

  --accent: #D0754C;
  --accent-hi: #E39468;
  --accent-lo: #9A4A28;

  --font-display: "Geologica", "Onest", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", ui-monospace, monospace;

  --pad: clamp(20px, 5vw, 96px);
  --gap: clamp(24px, 4vw, 64px);
  --sec: clamp(88px, 12vw, 200px);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);

  --r: 2px;
  --line: rgba(139, 148, 128, .28);
  --line-dark: rgba(244, 241, 233, .14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Class-based display rules outrank the UA [hidden] rule, which would
   leave overlays like the modal invisible but still eating every click. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(15px, .55vw + 13.5px, 17px);
  line-height: 1.62;
  color: var(--bone);
  background: var(--olive-950);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: var(--accent); color: var(--olive-950); }

:focus-visible {
  outline: 2px solid var(--focus, var(--accent));
  outline-offset: 3px;
}

/* Terracotta on alabaster is only 2.9:1, so light sections get an ink ring. */
.council,
.safety,
.results,
.clinic,
.ent,
.reviews { --focus: var(--olive-900); }

.skip {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 999;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--olive-950);
  font-weight: 500;
  transition: top .25s var(--ease);
}
.skip:focus { top: 16px; }

/* ---------- Typography primitives ---------- */

.h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.72rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.h2 em { font-style: normal; font-weight: 400; color: var(--accent); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--olive-300);
}
.kicker i { width: 20px; height: 1px; background: var(--line-dark); }

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 30px;
  border-radius: var(--r);
  font-size: .94rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  transition: transform .5s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}

.btn--accent { background: var(--accent); color: var(--olive-950); }
.btn--accent::after { background: var(--accent-hi); }
.btn--accent:hover::after { transform: translateY(0); }

.btn--ghost {
  border: 1px solid var(--line-dark);
  color: var(--bone);
}
.btn--ghost::after { background: rgba(244, 241, 233, .08); }
.btn--ghost:hover { border-color: var(--accent); }
.btn--ghost:hover::after { transform: translateY(0); }

.btn--sm { min-height: 44px; padding: 0 20px; font-size: .86rem; }
.btn--wide { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  transition: gap .35s var(--ease), border-color .35s var(--ease);
}
.link-arrow:hover { gap: 20px; border-color: var(--accent); }
.link-arrow span { color: var(--accent); }

/* ============================================================
   Preloader
   ============================================================ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--olive-950);
  transition: transform 1s var(--ease) .15s;
}
.preloader.is-done { transform: translateY(-101%); }

.preloader__inner { display: grid; justify-items: center; gap: 28px; }
.preloader__mark { width: 74px; opacity: .9; animation: markIn 1.1s var(--ease) both; }
.preloader__bar { width: 160px; height: 1px; background: var(--line-dark); overflow: hidden; }
.preloader__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: fill 1.1s var(--ease-io) forwards;
}

@keyframes markIn { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes fill { to { transform: scaleX(1); } }

/* ============================================================
   Navigation
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  padding: 0 var(--pad);
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid transparent;
  transition: background .45s var(--ease), border-color .45s var(--ease);
}
.nav.is-stuck {
  background: rgba(18, 23, 15, .82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--line-dark);
}

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}
.nav__logo img { width: 138px; height: auto; }

.nav__links { display: none; }

.nav__side { display: flex; align-items: center; gap: 18px; }
.nav__tel { display: none; }

.nav__burger {
  display: grid;
  gap: 6px;
  width: 44px;
  height: 44px;
  place-content: center;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--bone);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

.nav .btn--sm { display: none; }

/* ---------- Drawer ---------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 480;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: calc(96px + env(safe-area-inset-top)) var(--pad) calc(32px + env(safe-area-inset-bottom));
  background: var(--olive-900);
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease);
}
.drawer.is-open { clip-path: inset(0 0 0 0); }

.drawer__nav { display: grid; }
.drawer__nav a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6.2vw, 2.15rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.03em;
  opacity: 0;
  transform: translateY(18px);
}
.drawer.is-open .drawer__nav a { animation: drawerIn .6s var(--ease) forwards; }
.drawer.is-open .drawer__nav a:nth-child(1) { animation-delay: .18s; }
.drawer.is-open .drawer__nav a:nth-child(2) { animation-delay: .24s; }
.drawer.is-open .drawer__nav a:nth-child(3) { animation-delay: .30s; }
.drawer.is-open .drawer__nav a:nth-child(4) { animation-delay: .36s; }
.drawer.is-open .drawer__nav a:nth-child(5) { animation-delay: .42s; }
.drawer.is-open .drawer__nav a:nth-child(6) { animation-delay: .48s; }
.drawer__nav i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--accent);
}

@keyframes drawerIn { to { opacity: 1; transform: none; } }

.drawer__foot { display: grid; gap: 14px; }
.drawer__tel { font-size: 1.3rem; font-weight: 500; }
.drawer__foot p { color: var(--olive-300); font-size: .9rem; }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(128px + env(safe-area-inset-top)) var(--pad) 72px;
  background: var(--olive-950);
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  z-index: -2;
  top: -20%;
  right: -25%;
  width: 90vw;
  height: 90vw;
  max-width: 1100px;
  max-height: 1100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(208, 117, 76, .16) 0%, rgba(208, 117, 76, 0) 62%);
  animation: breathe 14s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: .85; }
  50% { transform: scale(1.14) translate(-3%, 4%); opacity: 1; }
}

.hero__grain,
.booking__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.hero__grid {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
}

.hero__title {
  margin: 26px 0 24px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 6.6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.hero__title .line { display: block; }
.hero__title em { font-style: normal; font-weight: 400; color: var(--accent); }

.hero__lead {
  max-width: 46ch;
  color: var(--olive-300);
  font-size: clamp(1rem, .5vw + .9rem, 1.14rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.hero__actions .btn { width: 100%; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--line-dark);
}
.hero__stats dt {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.9vw, 2.35rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
}
.hero__stats dd {
  margin-top: 6px;
  font-size: .76rem;
  line-height: 1.35;
  color: var(--olive-300);
}

.hero__visual { position: relative; }

.hero__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  aspect-ratio: 4 / 3;
}
.hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  /* Ход сознательно короткий: каждый процент увеличения здесь съедается
     резкостью, запаса по пикселям у исходника нет. */
  animation: kenburns 26s var(--ease-io) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.04) translate(-1%, -1%); }
}
.hero__frame figcaption {
  position: absolute;
  right: 16px;
  bottom: 14px;
  padding: 6px 12px;
  background: rgba(18, 23, 15, .7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone);
}

.hero__card {
  margin-top: 18px;
  padding: 24px;
  background: var(--olive-800);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
}
.hero__card-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--olive-300);
}
.hero__card-price {
  margin: 6px 0 8px;
  font-family: var(--font-display);
  font-size: 2.05rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
}
.hero__card-price span { font-size: 1.15rem; }
.hero__card-note { font-size: .84rem; color: var(--olive-300); line-height: 1.45; }

.hero__scroll { display: none; }

/* ============================================================
   Ticker
   ============================================================ */

.ticker {
  padding: 22px 0;
  background: var(--olive-950);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  overflow: hidden;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: slide 52s linear infinite;
}
.ticker__row {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bone);
}
.ticker__row i { color: var(--accent); font-style: normal; font-size: .55rem; }
@keyframes slide { to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ============================================================
   System (radial diagram)
   ============================================================ */

.system {
  position: relative;
  padding: var(--sec) var(--pad);
  background: var(--olive-900);
  overflow: hidden;
}
.system::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 55%;
  width: 120vw;
  height: 120vw;
  max-width: 1200px;
  max-height: 1200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(208, 117, 76, .1) 0%, rgba(208, 117, 76, 0) 60%);
  pointer-events: none;
}

.system__sticky { position: relative; max-width: 1560px; margin: 0 auto; }

.system__head { max-width: 640px; margin-bottom: clamp(48px, 7vw, 88px); }
.system__lead { margin-top: 20px; color: var(--olive-300); }

/* A lateral cephalometric tracing: the artefact an orthodontist actually
   works from. Six landmarks sit on the anatomy they belong to. */
.system__stage { position: relative; display: grid; gap: clamp(26px, 6vw, 44px); }

.face { position: relative; width: min(74vw, 310px); margin: 0 auto; }
.face__svg {
  width: 100%;
  height: auto;
  /* The source outline closes with a flat line across the bust. The viewBox
     crops it and this fade keeps the cut from reading as a hard edge. */
  -webkit-mask-image: linear-gradient(to bottom, #000 91%, transparent);
  mask-image: linear-gradient(to bottom, #000 91%, transparent);
}
.face figcaption {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .52rem;
  line-height: 1.5;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--olive-300);
}

.face__line,
.face__soft,
.face__hair { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.face__line { stroke: var(--accent); stroke-width: 6; }
.face__soft { stroke: rgba(244, 241, 233, .26); stroke-width: 4; }
.face__hair { stroke: rgba(208, 117, 76, .45); stroke-width: 3; stroke-dasharray: .012 .018; }

.face__line,
.face__soft {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.7s var(--ease-io);
}
.face__hair { opacity: 0; transition: opacity .8s var(--ease) 1.1s; }

.system__stage.is-in .face__line { stroke-dashoffset: 0; }
.system__stage.is-in .face__soft { stroke-dashoffset: 0; transition-delay: .45s; }
.system__stage.is-in .face__hair { opacity: 1; }

.face__pin {
  opacity: 0;
  transform: scale(.4);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
  transition-delay: calc(1.15s + var(--i) * .11s);
}
.system__stage.is-in .face__pin { opacity: 1; transform: none; }
.face__dot { fill: var(--accent); }
.face__halo { fill: none; stroke: var(--accent); stroke-opacity: .38; stroke-width: 3; }
/* The number is the whole legend: it ties each landmark to its caption
   without leader lines running across the face. */
.face__num {
  fill: var(--olive-950);
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: central;
}

.system__nodes {
  display: grid;
  gap: 1px;
  background: var(--line-dark);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.node {
  position: relative;
  padding: 24px 20px;
  background: var(--olive-900);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: calc(var(--i) * .09s + .5s);
}
.system__stage.is-in .node { opacity: 1; transform: none; }

.node b {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--accent);
}
.node h3 {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 4.3vw, 1.32rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.022em;
}
.node p { font-size: .88rem; color: var(--olive-300); }

/* ============================================================
   Council
   ============================================================ */

.council {
  padding: var(--sec) var(--pad);
  background: var(--bone);
  color: var(--ink);
}
.council__inner {
  display: grid;
  gap: clamp(44px, 6vw, 80px);
  max-width: 1560px;
  margin: 0 auto;
}
.council .eyebrow { color: var(--accent-lo); }
.council__lead { margin-top: 20px; max-width: 46ch; color: var(--olive-500); }

.council__list {
  margin: 40px 0 36px;
  border-top: 1px solid var(--line);
}
.council__list li {
  display: grid;
  gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .45s var(--ease);
}
.council__list li:hover { padding-left: 14px; }
.council__list span {
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.9vw, 1.28rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.022em;
}
.council__list i {
  font-style: normal;
  font-size: .84rem;
  color: var(--olive-500);
}

/* The only group shot the clinic has is 652x364. It is shown at its native
   ratio and capped near 1:1 against a 2x display, because any crop or parallax
   scale on top of that turns straight into mush. */
.council__photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  max-width: 660px;
  margin-inline: auto;
}
.council__photo img {
  display: block;
  width: 100%;
  height: auto;
}
.council__photo figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 6px 12px;
  background: rgba(18, 23, 15, .74);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone);
}

/* ============================================================
   Safety
   ============================================================ */

.safety {
  padding: 0 var(--pad) var(--sec);
  background: var(--bone);
  color: var(--ink);
}
.safety__head { max-width: 780px; margin: 0 auto clamp(44px, 6vw, 76px); text-align: center; }
.safety .eyebrow { color: var(--accent-lo); }

.safety__grid {
  display: grid;
  max-width: 1560px;
  margin: 0 auto;
  border-top: 1px solid var(--bone-3);
}
.safety__item {
  position: relative;
  padding: clamp(28px, 4vw, 44px) clamp(4px, 2vw, 32px);
  border-bottom: 1px solid var(--bone-3);
}
.safety__item b {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--accent-lo);
}
.safety__item h3 {
  margin: 16px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.024em;
}
.safety__item p { font-size: .92rem; color: var(--olive-500); }

/* ============================================================
   Results
   ============================================================ */

.results {
  padding: clamp(64px, 8vw, 130px) 0 var(--sec);
  background: var(--bone-2);
  color: var(--ink);
  overflow: hidden;
}
.results .eyebrow { color: var(--accent-lo); }
.results__head {
  display: grid;
  gap: 28px;
  max-width: 1560px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  padding: 0 var(--pad);
}

.results__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--bone-3);
  border-radius: var(--r);
  font-size: .84rem;
  color: var(--olive-500);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.tab:hover { border-color: var(--olive-500); color: var(--ink); }
.tab.is-active { background: var(--olive-900); border-color: var(--olive-900); color: var(--bone); }

.results__arrows { display: none; gap: 8px; }
.arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--bone-3);
  border-radius: 50%;
  color: var(--olive-500);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.arrow:hover { background: var(--olive-900); border-color: var(--olive-900); color: var(--bone); }
.arrow[disabled] { opacity: .3; pointer-events: none; }

.results__rail {
  display: flex;
  gap: 16px;
  padding: 4px var(--pad) 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.results__rail::-webkit-scrollbar { display: none; }

.results__track { display: flex; gap: 16px; }
.results__track[hidden] { display: none; }

.shot {
  flex: 0 0 auto;
  width: clamp(240px, 68vw, 380px);
  overflow: hidden;
  border-radius: var(--r);
  background: var(--bone);
  scroll-snap-align: center;
  transition: transform .6s var(--ease);
}
.shot img { width: 100%; height: auto; }
.shot:hover { transform: translateY(-8px); }

.results__hint {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--pad);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-500);
}

/* ============================================================
   Team
   ============================================================ */

.team {
  padding: var(--sec) var(--pad);
  background: var(--olive-950);
}
.team__head { max-width: 720px; margin-bottom: clamp(44px, 6vw, 76px); }
.team__lead { margin-top: 20px; color: var(--olive-300); }

/* Разлиновка нарисована границами самих карточек, а не заливкой сетки:
   в неполном ряду залитая сетка светила пустыми ячейками. */
.team__grid {
  display: grid;
  max-width: 1560px;
  margin: 0 auto;
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

/* Карточка тянется на всю высоту ряда сетки, лишнее забирает верхняя часть.
   Иначе строка «Записаться» съезжает вслед за длиной специальности: у одного
   врача она в строку, у другого в две. */
.doc {
  display: flex;
  flex-direction: column;
  background: var(--olive-950);
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
/* Колонка, а не блок: браузер центрирует содержимое кнопки по вертикали,
   и растянутая кнопка уводила фотографию вниз на половину свободного места. */
.doc__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex: 1 0 auto;
  width: 100%;
  text-align: left;
  padding: 0 0 22px;
  transition: background .45s var(--ease);
}
@media (hover: hover) {
  .doc__btn:hover { background: var(--olive-900); }
}

.doc__img {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--olive-800);
}
.doc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(.82) sepia(.22) contrast(1.05) brightness(.96);
  transition: transform .9s var(--ease), filter 1s var(--ease);
}
.doc__btn:focus-visible .doc__img img { filter: none; }

@media (hover: hover) and (pointer: fine) {
  .doc__btn:hover .doc__img img { transform: scale(1.06); filter: none; }
}

/* Anything without a precise hover, including touch laptops that report
   hover:hover with a coarse pointer: colour blooms in on scroll instead. */
@media not all and (hover: hover) and (pointer: fine) {
  .doc.is-live .doc__img img { filter: none; }
}

.doc__meta { display: block; padding: 20px 64px 0 22px; }
.doc__meta b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.022em;
}
.doc__meta i {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--olive-300);
}

.doc__more {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  font-size: .8rem;
  color: var(--accent);
  transition: background .4s var(--ease), transform .5s var(--ease);
}
@media (hover: hover) {
  .doc__btn:hover .doc__more { background: var(--accent); color: var(--olive-950); transform: rotate(90deg); }
}

/* ============================================================
   Clinic
   ============================================================ */

.clinic {
  padding: var(--sec) var(--pad);
  background: var(--bone);
  color: var(--ink);
}
.clinic .eyebrow { color: var(--accent-lo); }
.clinic__head { max-width: 720px; margin-bottom: clamp(44px, 6vw, 76px); }
.clinic__lead { margin-top: 20px; color: var(--olive-500); }

.clinic__stack { max-width: 1560px; margin: 0 auto; }
.clinic__stack > .zone + .zone { margin-top: 18px; }

/* Sticky stack: each card pins, then shrinks and dims as the next slides over
   it. --stack is written by the scroll loop in main.js. */
.zone {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--olive-900);
  color: var(--bone);
  transform-origin: center top;
  transform: scale(calc(1 - var(--stack, 0) * .05));
  box-shadow: 0 -18px 46px rgba(14, 18, 12, .32);
  will-change: transform;
}
.zone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: var(--olive-950);
  /* Held back until the next card has physically covered the text, so the
     copy never sits at reduced contrast while it is still readable. */
  opacity: calc(max(0, var(--stack, 0) - .35) * .8);
  pointer-events: none;
}

/* Pinning only pays off when a whole card still fits above the fold.
   On short viewports the cards stay in normal flow. */
@media (min-height: 640px) {
  .zone {
    position: sticky;
    top: calc(64px + (var(--z) * 5px));
  }
}

.clinic__stack.is-flat .zone {
  position: relative;
  top: auto;
  transform: none;
  box-shadow: none;
}
.clinic__stack.is-flat .zone::after { opacity: 0; }
.zone__text {
  order: 2;
  padding: clamp(24px, 4vw, 44px);
  align-self: start;
}
.zone__num {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--accent);
}
.zone__text h3 {
  margin: 14px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 2.4vw, 1.9rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.028em;
}
.zone__text p { font-size: .92rem; color: var(--olive-300); max-width: 42ch; }

.zone__img { order: 1; overflow: hidden; }
.zone__img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.zone:hover .zone__img img { transform: scale(1.045); }

/* ============================================================
   Coach
   ============================================================ */

.coach {
  padding: var(--sec) var(--pad);
  background: var(--olive-900);
  overflow: hidden;
}
.coach__inner {
  display: grid;
  gap: clamp(44px, 6vw, 84px);
  max-width: 1560px;
  margin: 0 auto;
}

/* Two cut-outs shot at different crops. Heights are set so the heads come out
   the same size, and the vertical offsets line those heads up, so the pair
   reads as two people standing together rather than two pasted photos. */
.coach__photos {
  position: relative;
  aspect-ratio: 1.8 / 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, #000 76%, transparent);
}
/* An ellipse that fades out before the box edges. A clipped circle showed
   its own bounding box as a hard rectangle behind the figures. */
.coach__disc {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 62% at 50% 46%, rgba(208, 117, 76, .2), rgba(208, 117, 76, 0) 72%);
  pointer-events: none;
}
.coach__ph {
  position: absolute;
  width: auto;
  max-width: none;
}
.coach__ph--a { z-index: 2; left: 0; top: 0; height: 102%; }
.coach__ph--b { z-index: 1; right: 0; top: -7.4%; height: 152%; }

.coach__lead { margin-top: 20px; color: var(--olive-300); max-width: 46ch; }
.coach__points { margin-top: 34px; border-top: 1px solid var(--line-dark); }
.coach__points li {
  padding: 18px 0 18px 30px;
  border-bottom: 1px solid var(--line-dark);
  font-size: .96rem;
  position: relative;
}
.coach__points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 27px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
}

/* ============================================================
   ENT
   ============================================================ */

.ent {
  padding: var(--sec) var(--pad);
  background: var(--bone);
  color: var(--ink);
}
.ent .eyebrow { color: var(--accent-lo); }
.ent__head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 68px); }
.ent__lead { margin-top: 20px; color: var(--olive-500); }

.ent__list {
  display: grid;
  gap: 1px;
  max-width: 1560px;
  margin: 0 auto clamp(48px, 7vw, 88px);
  background: var(--bone-3);
  border-top: 1px solid var(--bone-3);
  border-bottom: 1px solid var(--bone-3);
}
.ent__list li {
  padding: clamp(24px, 3.4vw, 38px) 0;
  background: var(--bone);
}
.ent__list b {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--accent-lo);
}
.ent__list h3 {
  margin: 12px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.8vw, 1.48rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.024em;
}
.ent__list p { font-size: .9rem; color: var(--olive-500); max-width: 44ch; }

/* Two up on a phone: these source files are only 700px wide, and stretching
   one across the full width outruns the pixels they actually have. */
.ent__strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 1560px;
  margin: 0 auto;
}
.dir {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r);
}
.ent__strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.dir__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 6px;
  padding: 34px 16px 14px;
  background: linear-gradient(to top, rgba(18, 23, 15, .9), rgba(18, 23, 15, 0));
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone);
}
.dir__cap b { font-weight: 400; }
.dir__cap i {
  font-style: normal;
  color: var(--accent);
  transition: transform .4s var(--ease);
}

@media (hover: hover) {
  .dir:hover img { transform: scale(1.05); }
  .dir:hover .dir__cap i { transform: translateX(4px); }
}

/* ============================================================
   Reviews
   ============================================================ */

.reviews {
  padding: clamp(64px, 8vw, 130px) 0 var(--sec);
  background: var(--bone-2);
  color: var(--ink);
  overflow: hidden;
}
.reviews .eyebrow { color: var(--accent-lo); }
.reviews__head {
  max-width: 1560px;
  margin: 0 auto clamp(36px, 5vw, 60px);
  padding: 0 var(--pad);
}

/* Three edge-to-edge lanes drifting left. Each one is a real scroll container,
   so a swipe just takes over and the drift picks up again when you let go. */
.reviews__wall {
  position: relative;
  display: grid;
  gap: 12px;
}

.reviews__row {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.reviews__row::-webkit-scrollbar { display: none; }
.reviews__row.is-grabbing { cursor: grabbing; user-select: none; }
.review img { -webkit-user-drag: none; user-select: none; }

.reviews__flow {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: max-content;
  padding-right: 12px;
}

/* Natural scale, never upscaled: the screenshots stay readable and only the
   longer ones get trimmed, with a fade standing in for the rest. */
.review {
  position: relative;
  flex: 0 0 auto;
  width: min(78vw, 300px);
  max-height: 240px;
  overflow: hidden;
  border: 1px solid var(--bone-3);
  border-radius: var(--r);
  background: #fff;
}
.review img {
  width: 100%;
  height: auto;
}
.review::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 76px;
  background: linear-gradient(to top, #fff 14%, rgba(255, 255, 255, 0));
  pointer-events: none;
}

.reviews__hint {
  max-width: 1560px;
  margin: 18px auto 0;
  padding: 0 var(--pad);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-500);
}

/* ============================================================
   Articles rail
   ============================================================ */

/* Лента листается, а не едет сама: отзывы можно разглядывать краем глаза,
   а статью читают — уезжающий из-под курсора заголовок только злит. */
.reads {
  padding: var(--sec) 0;
  background: var(--olive-950);
  overflow: hidden;
}
.reads__head {
  display: grid;
  gap: 22px;
  max-width: 1560px;
  margin: 0 auto clamp(30px, 4vw, 48px);
  padding: 0 var(--pad);
}
.reads__side { display: grid; gap: 18px; align-content: start; }
.reads__lead { max-width: 46ch; color: var(--olive-300); }
.reads__all {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.reads__all span { display: inline-block; transition: transform .4s var(--ease); }

.reads__rail {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* Без этого привязка при загрузке подтягивает первую карточку вплотную
     к краю окна и съедает отступ страницы. */
  scroll-padding-left: var(--pad);
  padding: 0 var(--pad) 4px;
}
.reads__rail::-webkit-scrollbar { display: none; }

.reads__row {
  display: flex;
  gap: 14px;
  width: max-content;
  list-style: none;
}

.read {
  scroll-snap-align: start;
  width: min(78vw, 320px);
}
.read a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 22px 20px 20px;
  background: var(--olive-900);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.read h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.02em;
}
.read p {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--olive-300);
}
.read i {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.read--all a { align-items: flex-start; justify-content: center; background: transparent; border-style: dashed; }

.reads__nav {
  display: none;
  gap: 8px;
  max-width: 1560px;
  margin: 22px auto 0;
  padding: 0 var(--pad);
}
.reads__arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--bone);
  transition: background .35s var(--ease), color .35s var(--ease), opacity .35s var(--ease);
}
.reads__arrow svg { width: 12px; height: 12px; }
.reads__arrow[disabled] { opacity: .3; }

@media (hover: hover) {
  .read a:hover { background: var(--olive-800); border-color: var(--accent); }
  .reads__all:hover span { transform: translateX(4px); }
  .reads__arrow:not([disabled]):hover { background: var(--accent); color: var(--olive-950); }
}

/* ============================================================
   Booking
   ============================================================ */

.booking {
  position: relative;
  isolation: isolate;
  padding: var(--sec) var(--pad) clamp(64px, 8vw, 130px);
  background: var(--olive-950);
  overflow: hidden;
}
.booking::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: -20%;
  bottom: -40%;
  width: 90vw;
  height: 90vw;
  max-width: 1000px;
  max-height: 1000px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(208, 117, 76, .14), rgba(208, 117, 76, 0) 62%);
}
.booking__inner {
  display: grid;
  gap: clamp(44px, 6vw, 80px);
  max-width: 1560px;
  margin: 0 auto;
}
.booking__lead { margin-top: 20px; color: var(--olive-300); max-width: 48ch; }

.booking__facts { margin-top: 38px; border-top: 1px solid var(--line-dark); }
.booking__facts li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
}
.booking__facts span {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-300);
}
.booking__facts b { font-weight: 500; font-size: .95rem; }

.booking__form {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 4vw, 40px);
  background: var(--olive-900);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
}
.field { display: grid; gap: 8px; }
/* Строка подписи держится на заданном line-height, а не на метриках шрифта.
   Иначе высота гуляет от вещей, которых не ждёшь: приписка «по желанию»
   набрана крупнее и тянет строку на три пикселя, а в слове «приём» буква «ё»
   отсутствует в подключённом наборе JetBrains Mono — подставляется запасной
   шрифт с другими метриками, и строка выше ещё на полтора.

   Жёсткую высоту тут ставить нельзя: на узких экранах подпись переносится
   на две строки, и её обрезало бы. Ровность рядов держится не этим,
   а выравниванием полей по низу — смотри .online__row. */
.field label {
  display: block;
  /* Именно em, а не голое число. Число наследуется множителем, и вложенная
     приписка умножала бы его на свой кегль покрупнее — строка снова росла бы.
     em считается здесь, по кеглю подписи, и вниз уходит уже готовой длиной. */
  line-height: 1.62em;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-300);
}
.field input,
.field select {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 300;
  background: var(--olive-950);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  transition: border-color .35s var(--ease);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 22px) 24px, calc(100% - 16px) 24px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.field input::placeholder { color: rgba(139, 148, 128, .6); }
.field input:focus,
.field select:focus { border-color: var(--accent); outline: none; }
.field.has-error input { border-color: #C97B5A; }
.field__err {
  font-size: .78rem;
  color: #E0A188;
  min-height: 0;
}
/* Пустой абзац под ошибку остаётся ячейкой сетки, и перед ним всё равно
   ставится отступ. Низ поля уходил на восемь пикселей ниже низа инпута,
   а кнопка в нижнем ряду равняется по низу поля — отсюда и просадка. */
.field__err:empty { display: none; }

.booking__note { font-size: .74rem; color: var(--olive-300); line-height: 1.45; }
.booking__ok {
  padding: 14px 16px;
  background: rgba(208, 117, 76, .12);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  font-size: .88rem;
  color: var(--accent-hi);
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
  padding: clamp(56px, 7vw, 96px) var(--pad) calc(28px + env(safe-area-inset-bottom));
  background: var(--ink);
  border-top: 1px solid var(--line-dark);
}
.footer__top {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  max-width: 1560px;
  margin: 0 auto clamp(44px, 6vw, 72px);
}
.footer__brand img { width: 190px; opacity: .9; }
.footer__brand p { margin-top: 18px; max-width: 34ch; font-size: .88rem; color: var(--olive-300); }

.footer__cols { display: grid; gap: 32px; }
.footer__cols h3,
.footer__cols h4 {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer__cols a,
.footer__cols p {
  display: block;
  padding: 5px 0;
  font-size: .92rem;
  color: var(--olive-300);
  transition: color .3s var(--ease);
}
.footer__cols a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 3px 0;
}
.footer__cols a:hover { color: var(--bone); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 1560px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--olive-300);
}
.waFab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 600;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.waFab svg {
  width: 32px;
  height: 32px;
  fill: #fff;
}
.waFab:hover,
.waFab:focus-visible { transform: scale(1.06); box-shadow: 0 10px 28px rgba(0, 0, 0, .34); }
@media (max-width: 640px) {
  .waFab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .waFab { transition: none; }
  .waFab:hover, .waFab:focus-visible { transform: none; }
}

.footer__legal p { margin: 0; }
.footer__req {
  margin-top: 6px;
  text-transform: none;
  letter-spacing: .04em;
  opacity: .7;
}
.footer__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
}
.footer__docs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s var(--ease);
}
.footer__docs a:hover { color: var(--bone); }
.footer__up { transition: color .3s var(--ease); }
.footer__up:hover { color: var(--accent); }

/* ============================================================
   Modal
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: grid;
  place-items: center;
  padding: 16px;
}
.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 8, .8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.modal.is-open .modal__scrim { opacity: 1; }

.modal__panel {
  position: relative;
  width: min(980px, 100%);
  max-height: 88svh;
  overflow-y: auto;
  background: var(--olive-900);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity .5s var(--ease), transform .55s var(--ease);
  -webkit-overflow-scrolling: touch;
}
.modal.is-open .modal__panel { opacity: 1; transform: none; }

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(18, 23, 15, .8);
  color: var(--bone);
  transition: background .3s var(--ease);
}
.modal__close:hover { background: var(--accent); color: var(--olive-950); }

.modal__grid { display: grid; }
.modal__img { overflow: hidden; background: var(--olive-800); }
.modal__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 16%; }
.modal__body { padding: clamp(24px, 4vw, 40px); display: grid; gap: 16px; align-content: start; }
.modal__body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.34rem, 2.7vw, 1.9rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.028em;
}
.modal__role {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.modal__bio { display: grid; gap: 12px; font-size: .92rem; color: var(--olive-300); }
.modal__bio b { color: var(--bone); font-weight: 500; }

/* ============================================================
   Reveal states
   ============================================================ */

[data-reveal] { will-change: transform, opacity; }
/* Release the compositor layer once the element has arrived. */
[data-reveal].is-in { will-change: auto; }
[data-reveal="fade"] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal="up"] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal="fade"].is-in,
[data-reveal="up"].is-in { opacity: 1; transform: none; }

/* The clip curtain lives on the children: a clipped observer target
   reports a zero intersection rect and would never fire. */
/* Штора была 1,15 секунды — дольше всего остального на сайте. Вместе с
   загрузкой фото сопровождения это давало больше двух секунд пустоты на месте
   картинки, и при быстрой прокрутке человек видел только свечение. */
[data-reveal="clip"] > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease);
}
[data-reveal="clip"].is-in > * { clip-path: inset(0 0 0 0); }

.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .95s var(--ease);
}
.is-split.is-in .word > span { transform: translateY(0); }

/* ============================================================
   Breakpoints
   ============================================================ */

@media (min-width: 600px) {
  .system__nodes { grid-template-columns: repeat(2, 1fr); }
  .face { width: min(40vw, 280px); }
  .safety__grid { grid-template-columns: repeat(2, 1fr); column-gap: clamp(24px, 4vw, 48px); }
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .ent__list { grid-template-columns: repeat(2, 1fr); }
  .ent__list li { padding-left: clamp(20px, 3vw, 34px); padding-right: clamp(20px, 3vw, 34px); }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
  .coach__points li { font-size: 1.02rem; }
  .hero__actions .btn { width: auto; }
  .booking__facts li {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 20px;
  }
}

@media (min-width: 900px) {
  html { scroll-padding-top: 104px; }

  .nav__bar { height: 88px; gap: 16px; }
  .nav__logo img { width: 168px; }
  .nav__links { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
  .nav__links a {
    position: relative;
    font-size: .88rem;
    color: var(--olive-300);
    transition: color .35s var(--ease);
  }
  .nav__links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--ease);
  }
  .nav__links a:hover { color: var(--bone); }
  .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
  .nav .btn--sm { display: inline-flex; }
  .nav__burger { display: none; }
  .drawer { display: none !important; }

  .hero { padding-top: 132px; padding-bottom: 56px; }
  .hero__grid {
    grid-template-columns: 1.16fr .84fr;
    align-items: center;
    gap: clamp(36px, 4.6vw, 80px);
  }
  .hero__title { font-size: clamp(2.2rem, 3.85vw, 4.3rem); }
  /* Источник 1680x1119. В портретной рамке с object-fit: cover резкость
     упирается ровно в его высоту: чем выше рамка, тем сильнее растягиваются
     те же 1119 px. Потолок в 545 px держит retina-плотность 1:1. */
  .hero__frame {
    aspect-ratio: auto;
    height: min(calc(100svh - 236px), 545px);
  }
  .hero__card {
    position: absolute;
    left: -56px;
    bottom: 44px;
    width: 268px;
    margin: 0;
    background: rgba(26, 31, 23, .9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .hero__stats { gap: 28px; }

  .hero__scroll {
    display: block;
    position: absolute;
    left: var(--pad);
    bottom: 40px;
    width: 1px;
    height: 74px;
    background: var(--line-dark);
    overflow: hidden;
  }
  .hero__scroll span {
    display: block;
    width: 100%;
    height: 40%;
    background: var(--accent);
    animation: scrollHint 2.4s var(--ease-io) infinite;
  }
  @keyframes scrollHint {
    0% { transform: translateY(-100%); }
    60%, 100% { transform: translateY(250%); }
  }

  .system__stage {
    display: block;
    position: relative;
    min-height: 660px;
    max-width: 1180px;
    margin-inline: auto;
  }

  .face {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 460px;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  .system__nodes {
    display: block;
    background: none;
    border: 0;
  }
  .node {
    position: absolute;
    top: var(--y);
    width: 258px;
    padding: 0;
    background: none;
  }
  .node--l { left: 0; text-align: right; padding-right: 32px; }
  .node--r { right: 0; text-align: left; padding-left: 32px; }
  .node--l::after,
  .node--r::after {
    content: "";
    position: absolute;
    top: 9px;
    width: 20px;
    height: 1px;
    background: rgba(208, 117, 76, .5);
  }
  .node--l::after { right: 0; }
  .node--r::after { left: 0; }
  .node h3 { font-size: 1.16rem; }
  .node p { font-size: .84rem; max-width: none; }

  .council__inner { grid-template-columns: 1fr 1.06fr; align-items: center; }
  .council__photo { margin-inline: auto 0; }


  .safety__grid {
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--bone-3);
  }
  .safety__item { border-bottom: 0; border-left: 1px solid var(--bone-3); }
  .safety__item:first-child { border-left: 0; padding-left: 0; }
  .safety__item:last-child { padding-right: 0; }

  .results__arrows { display: flex; }
  .shot { width: 340px; }

  .team__grid { grid-template-columns: repeat(3, 1fr); }

  .zone {
    grid-template-columns: .84fr 1.16fr;
    align-items: stretch;
    min-height: 430px;
  }
  .zone__text { order: 1; }
  .zone__img { order: 2; }
  .zone__img img { aspect-ratio: auto; height: 100%; object-position: center 58%; }

  .zone { box-shadow: 0 -24px 70px rgba(14, 18, 12, .22); }
  .clinic__stack > .zone + .zone { margin-top: 26px; }

  .coach__inner { grid-template-columns: .95fr 1.05fr; align-items: center; }
  .coach__photos { grid-template-columns: repeat(2, 1fr); }

  .ent__strip { grid-template-columns: repeat(5, 1fr); }

  .reads__head { grid-template-columns: 1.1fr .9fr; align-items: end; }
  .reads__nav { display: flex; }

  .reviews__wall { gap: 14px; }
  .reviews__flow { gap: 14px; padding-right: 14px; }
  .review { width: 320px; max-height: 250px; }

  .booking__inner { grid-template-columns: 1.02fr .98fr; align-items: start; }
  .booking__form { position: sticky; top: 112px; }

  .footer__top { grid-template-columns: .9fr 1.1fr; }

  /* Прокручивается только текст, а не окно целиком. Фотография занимает
     всю высоту окна: иначе при короткой биографии под ней оставалась
     пустая полоса, а при длинной — пустота во весь экран. */
  .modal__panel {
    display: grid;
    overflow: hidden;
  }
  .modal__grid {
    grid-template-columns: .8fr 1.2fr;
    min-height: 0;
  }
  .modal__img { min-height: 0; }
  .modal__img img {
    aspect-ratio: auto;
    height: 100%;
    object-position: center 12%;
  }
  .modal__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* The phone number only earns a slot once the bar has room for it. */
@media (min-width: 1080px) {
  .nav__tel {
    display: block;
    font-size: .88rem;
    font-weight: 500;
    white-space: nowrap;
  }
}

@media (min-width: 1280px) {
  .team__grid { grid-template-columns: repeat(4, 1fr); }
  .shot { width: 380px; }
  .node { width: 270px; }
}

/* Paired with the sticky rule above: `top` must never reach a merely
   relative .zone, or it would shift the card instead of pinning it. */
@media (min-width: 900px) and (min-height: 640px) {
  .zone { top: calc(96px + (var(--z) * 13px)); }
}

/* ============================================================
   Онлайн-запись
   ============================================================ */

.doc__book {
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  color: var(--bone);
  font-size: .86rem;
  font-weight: 500;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.doc__book:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--olive-950);
}

.bookform {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: grid;
  place-items: end center;
}

.bookform__scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 12, 8, .72);
  backdrop-filter: blur(3px);
  animation: bfFade .3s var(--ease) both;
}

.bookform__panel {
  position: relative;
  width: min(660px, 100%);
  max-height: 92svh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(24px, 5vw, 44px);
  padding-bottom: calc(clamp(24px, 5vw, 44px) + env(safe-area-inset-bottom));
  background: var(--olive-900);
  border: 1px solid var(--line-dark);
  border-radius: var(--r) var(--r) 0 0;
  animation: bfUp .45s var(--ease) both;
}

@keyframes bfFade { from { opacity: 0; } }
@keyframes bfUp { from { opacity: 0; transform: translateY(24px); } }

.bookform__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--olive-300);
  font-size: 1.1rem;
  transition: color .3s ease;
}
.bookform__close:hover { color: var(--accent); }

.bookform__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  padding-right: 44px;
}

.bookform__lead {
  margin: 12px 0 26px;
  font-size: .9rem;
  color: var(--olive-300);
  max-width: 46ch;
}

.bookform__form { display: grid; gap: 18px; }

@media (min-width: 700px) {
  .bookform { place-items: center; }
  .bookform__panel { border-radius: var(--r); max-height: 88svh; }
}

/* ============================================================
   Выбор свободного времени
   ============================================================ */

.slots {
  display: grid;
  gap: 18px;
  padding-bottom: 4px;
}

.slots__step { display: grid; gap: 10px; }

.slots__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-300);
}

.slots__label b { color: var(--accent); }
.slots__label i { margin-left: auto; font-style: normal; text-transform: none; letter-spacing: .04em; }

.slots__days {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.slots__days::-webkit-scrollbar { display: none; }

.slots__times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 8px 16px;
  display: grid;
  align-content: center;
  gap: 2px;
  scroll-snap-align: start;
  background: var(--olive-950);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  color: var(--bone);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.chip:hover { border-color: var(--olive-500); }

.chip[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--olive-950);
}

.chip--time {
  min-width: 84px;
  justify-items: center;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
}

.chip--day { min-width: 78px; justify-items: center; text-align: center; }
.chip--day u { font-style: normal; text-decoration: none; font-size: 1.05rem; font-weight: 500; }
.chip--day s { text-decoration: none; font-size: .62rem; color: var(--olive-300); text-transform: uppercase; letter-spacing: .1em; }
.chip--day[aria-checked="true"] s { color: rgba(18, 23, 15, .7); }

.picker { position: relative; }

.picker select {
  background-image: none;
  width: 100%;
  min-height: 54px;
  padding: 0 46px 0 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--bone);
  background: var(--olive-950);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color .3s ease;
}

.picker select:hover { border-color: var(--olive-500); }
.picker select:focus { border-color: var(--accent); outline: none; }
.picker select option { background: var(--olive-900); color: var(--bone); }

.picker::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg);
  pointer-events: none;
}

.booking__form .slots {
  gap: 18px;
  padding-bottom: 22px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-dark);
}

.slots__chosen {
  padding: 12px 16px;
  background: rgba(208, 117, 76, .1);
  border: 1px solid rgba(208, 117, 76, .45);
  border-radius: var(--r);
  font-size: .86rem;
  color: var(--bone);
}

.slots__chosen b { color: var(--accent-hi); font-weight: 500; }

.slots__off,
.slots__empty {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--olive-300);
}

.booking__ok[data-mode="off"] {
  background: rgba(139, 148, 128, .12);
  border-color: var(--olive-500);
  color: var(--bone);
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  [data-reveal],
  [data-reveal="clip"] > *,
  .node,
  .face__pin,
  .face__hair,
  .word > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .face__line,
  .face__soft { stroke-dashoffset: 0 !important; }
  .ticker__track { animation: none !important; }
  .hero__frame img { animation: none; transform: none; }
  .zone {
    position: static;
    transform: none !important;
    box-shadow: none;
  }
  .zone::after { opacity: 0 !important; }
  .doc__img img { filter: none !important; }
}

.pg { display: block; }

.nav__has-mega { position: relative; display: none; }

.nav__mega-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-family: inherit;
  font-size: .88rem;
  line-height: inherit;
  color: var(--olive-300);
  transition: color .35s var(--ease);
}
.nav__mega-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__mega-btn:hover::after,
.nav__mega-btn[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav__caret {
  width: 9px;
  height: 9px;
  flex: none;
  transition: transform .35s var(--ease);
}
.nav__mega-btn:hover,
.nav__mega-btn[aria-expanded="true"] { color: var(--bone); }
.nav__mega-btn[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.mega {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  z-index: 60;
  width: min(1080px, 92vw);
  padding: 30px 32px 34px;
  background: var(--olive-900);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  transform: translate(-50%, -10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.mega__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 30px;
}
.mega__label {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.mega__col ul { display: grid; gap: 2px; }
.mega__col a {
  display: block;
  padding: 5px 0;
  font-size: .86rem;
  line-height: 1.35;
  color: var(--olive-300);
  transition: color .28s var(--ease), transform .28s var(--ease);
}
.mega__col a:hover { color: var(--accent-hi); transform: translateX(3px); }
.mega__col a::after { display: none; }

.drawer__nav--deep { gap: 0; }
.drawer__group {
  border-bottom: 1px solid var(--line-dark);
  opacity: 0;
  transform: translateY(18px);
}
.drawer.is-open .drawer__group { animation: drawerIn .6s var(--ease) forwards; }
.drawer.is-open .drawer__group:nth-child(1) { animation-delay: .16s; }
.drawer.is-open .drawer__group:nth-child(2) { animation-delay: .21s; }
.drawer.is-open .drawer__group:nth-child(3) { animation-delay: .26s; }
.drawer.is-open .drawer__group:nth-child(4) { animation-delay: .31s; }
.drawer.is-open .drawer__group:nth-child(5) { animation-delay: .36s; }
.drawer.is-open .drawer__group:nth-child(6) { animation-delay: .41s; }
.drawer.is-open .drawer__group:nth-child(7) { animation-delay: .46s; }

.drawer__group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 12px 0;
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 4.4vw, 1.3rem);
  font-weight: 300;
  letter-spacing: -.02em;
  cursor: pointer;
  list-style: none;
}
.drawer__group summary::-webkit-details-marker { display: none; }
.drawer__group summary::after {
  content: "＋";
  font-size: .9rem;
  color: var(--accent);
  transition: transform .3s var(--ease);
}
.drawer__group[open] summary::after { transform: rotate(45deg); }
.drawer__group ul { padding: 0 0 14px 2px; display: grid; gap: 1px; }

.drawer__nav--deep .drawer__group a,
.drawer__nav--deep .drawer__plain {
  display: block;
  padding: 11px 0;
  border: 0;
  font-family: var(--font-ui);
  font-size: .96rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--olive-300);
  opacity: 1;
  transform: none;
  animation: none !important;
}
.drawer__nav--deep .drawer__group a { min-height: 44px; }
.drawer__nav--deep .drawer__plain {
  min-height: 56px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 4.4vw, 1.3rem);
  color: var(--bone);
}

.pgHero {
  position: relative;
  isolation: isolate;
  padding: calc(112px + env(safe-area-inset-top)) var(--pad) clamp(48px, 8vw, 92px);
  background: var(--olive-950);
  overflow: hidden;
}
.pgHero__glow {
  position: absolute;
  top: -18%;
  right: -22%;
  width: min(760px, 118vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(208, 117, 76, .17), transparent 62%);
  filter: blur(28px);
  pointer-events: none;
}
.pgHero__inner {
  display: grid;
  gap: clamp(32px, 5vw, 60px);
  max-width: 1560px;
  margin: 0 auto;
}

.pgCrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--olive-300);
}
.pgCrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color .3s var(--ease);
}
.pgCrumbs a:hover { color: var(--accent); }
.pgCrumbs span { opacity: .45; }
.pgCrumbs__group { opacity: 1; }
.pgCrumbs b { font-weight: 500; color: var(--bone); }

.pgHero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.95rem, 6.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.pgHero__lead {
  max-width: 58ch;
  margin-top: 22px;
  font-size: clamp(1rem, .5vw + .9rem, 1.14rem);
  color: var(--olive-300);
}
.pgHero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.pgHero__actions .btn { width: 100%; }

.pgHero__media {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
}
.pgHero__media img { width: 100%; object-fit: cover; }

.pgSec {
  padding: clamp(56px, 9vw, 128px) var(--pad);
  background: var(--olive-950);
}
.pgSec--dark { background: var(--olive-950); }
.pgSec--deep { background: var(--olive-900); }
.pgSec--light {
  background: var(--bone);
  color: var(--ink);
  --line-dark: rgba(14, 18, 12, .12);
  --focus: var(--olive-900);
}
.pgSec--light .eyebrow { color: var(--accent-lo); }
.pgSec + .pgSec--dark,
.pgSec + .pgSec--deep { border-top: 1px solid rgba(244, 241, 233, .07); }

.pgSec__inner { max-width: 1560px; margin: 0 auto; }
.pgSec__inner--narrow { max-width: 860px; }

.pgSec__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 4vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
  max-width: 22ch;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.pgSec__lead { margin: -12px 0 clamp(28px, 4vw, 46px); }

.pgProse { display: grid; gap: 18px; max-width: 72ch; }
.pgProse p { color: var(--olive-300); }
.pgSec--light .pgProse p { color: var(--olive-500); }

/* Глобальный сброс убирает подчёркивание у всех ссылок, и в тексте статьи
   кликабельное переставало отличаться от обычных слов: цвет тот же, толщина
   та же. Подчёркивание возвращаем — на цвет одна надежда плохая, дальтоник
   его не увидит. */
.pgProse a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-lo);
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.pgSec--dark .pgProse a,
.pgSec--deep .pgProse a { text-decoration-color: var(--accent-hi); }
.pgProse a:hover,
.pgProse a:focus-visible { color: var(--accent-lo); text-decoration-color: currentColor; }
.pgSec--dark .pgProse a:hover,
.pgSec--deep .pgProse a:hover,
.pgSec--dark .pgProse a:focus-visible,
.pgSec--deep .pgProse a:focus-visible { color: var(--accent-hi); }
.pgProse--lead p {
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 2.6vw, 1.72rem);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -.02em;
  color: var(--bone);
}
.pgSec--light .pgProse--lead p { color: var(--ink); }
.pgProse--cols { max-width: 1180px; }

.pgCards {
  display: grid;
  gap: 14px;
}
.pgCards > li {
  padding: 24px 22px 26px;
  background: var(--olive-900);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  transition: border-color .4s var(--ease), transform .5s var(--ease);
}
.pgSec--deep .pgCards > li { background: var(--olive-800); }
.pgSec--light .pgCards > li { background: rgba(255, 255, 255, .58); border-color: rgba(14, 18, 12, .1); }
.pgCards > li:hover { border-color: rgba(208, 117, 76, .45); }
.pgCards h3 {
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.pgCards p {
  margin-top: 10px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--olive-300);
}
.pgSec--light .pgCards p { color: var(--olive-500); }

.pgSteps { display: grid; gap: 12px; counter-reset: step; }
.pgSteps > li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
  padding: 20px 20px 22px;
  background: var(--olive-900);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
}
.pgSec--deep .pgSteps > li { background: var(--olive-800); }
.pgSec--light .pgSteps > li { background: rgba(255, 255, 255, .58); border-color: rgba(14, 18, 12, .1); }
.pgSteps b {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--accent);
  padding-top: 3px;
}
.pgSteps h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.015em;
}
.pgSteps p {
  margin-top: 8px;
  font-size: .91rem;
  line-height: 1.55;
  color: var(--olive-300);
}
.pgSec--light .pgSteps p { color: var(--olive-500); }

.pgList { display: grid; gap: 0; }
.pgList > li {
  display: grid;
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-dark);
}
.pgList > li:first-child { border-top: 1px solid var(--line-dark); }
.pgList span {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: -.015em;
}
.pgList i { font-style: normal; font-size: .9rem; color: var(--olive-300); }
.pgSec--light .pgList i { color: var(--olive-500); }

.pgFigure {
  border-radius: var(--r);
  overflow: hidden;
}
.pgFigure img { width: 100%; }
.pgFigure figcaption,
.pgGallery figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive-300);
}

.pgGallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pgGallery figure { border-radius: var(--r); overflow: hidden; }
.pgGallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.pgGallery--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgGallery--duo img { aspect-ratio: 4 / 3; }

.pgMedia {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.pgMedia__fig { border-radius: var(--r); overflow: hidden; }
.pgMedia__fig img { width: 100%; }
.pgMedia + .pgGallery { margin-top: 14px; }

.pgVideo {
  display: grid;
  gap: clamp(24px, 4vw, 46px);
  align-items: center;
}
.pgVideo__portrait {
  margin-top: 20px;
  max-width: 260px;
  border-radius: var(--r);
  overflow: hidden;
}
.pgVideo__stage { display: grid; gap: 12px; }
.pgVideo__facade {
  position: relative;
  display: grid;
  place-items: center;
  gap: 14px;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 50% 42%, rgba(208, 117, 76, .22), transparent 58%),
    var(--olive-800);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  transition: border-color .4s var(--ease);
}
.pgVideo__facade:hover { border-color: rgba(208, 117, 76, .5); }
.pgVideo__play {
  width: 68px;
  height: 68px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .4s var(--ease), transform .5s var(--ease);
}
.pgVideo__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 4px;
  border-left: 13px solid var(--accent);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  transition: border-left-color .4s var(--ease);
}
.pgVideo__facade:hover .pgVideo__play { background: var(--accent); transform: scale(1.06); }
.pgVideo__facade:hover .pgVideo__play::before { border-left-color: var(--olive-950); }
.pgVideo__hint {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-300);
}
.pgVideo__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r);
  display: block;
}

.pgStat {
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: clamp(28px, 4vw, 48px) 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.pgStat b {
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 300;
  line-height: .92;
  letter-spacing: -.05em;
  color: var(--accent);
}
.pgStat span {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3vw, 1.6rem);
  font-weight: 300;
  letter-spacing: -.02em;
}
.pgStat i { font-style: normal; font-size: .9rem; color: var(--olive-300); max-width: 46ch; }

.pgFaq { display: grid; max-width: 940px; }
.pgFaq__item { border-bottom: 1px solid var(--line-dark); }
.pgFaq__item:first-child { border-top: 1px solid var(--line-dark); }
.pgFaq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  padding: 18px 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.14rem);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.015em;
  cursor: pointer;
  list-style: none;
  transition: color .3s var(--ease);
}
.pgFaq__item summary::-webkit-details-marker { display: none; }
.pgFaq__item summary:hover { color: var(--accent); }
.pgFaq__item summary span {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.pgFaq__item summary span::before,
.pgFaq__item summary span::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--accent);
  transition: transform .35s var(--ease);
}
.pgFaq__item summary span::after { transform: rotate(90deg); }
.pgFaq__item[open] summary span::after { transform: rotate(0); }
.pgFaq__body { padding-bottom: 22px; }
.pgFaq__body p { max-width: 74ch; color: var(--olive-300); font-size: .96rem; }
.pgSec--light .pgFaq__body p { color: var(--olive-500); }

.pgRelated__list {
  display: grid;
  gap: 0;
  max-width: 900px;
}
.pgRelated__list > li { border-bottom: 1px solid var(--line-dark); }
.pgRelated__list > li:first-child { border-top: 1px solid var(--line-dark); }
.pgRelated__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vw, 1.24rem);
  font-weight: 300;
  letter-spacing: -.02em;
  transition: color .3s var(--ease), padding-left .4s var(--ease);
}
.pgRelated__list a:hover { color: var(--accent-lo); padding-left: 10px; }
.pgRelated__list i { font-style: normal; color: var(--accent-lo); }

.pgDocs__list {
  display: grid;
  gap: 16px;
}
.pgDocs__list > li {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: var(--olive-900);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
}
.pgDocs__img { display: block; border-radius: var(--r); overflow: hidden; }
.pgDocs__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; }
.pgDocs__meta { display: grid; gap: 5px; }
.pgDocs__meta b {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -.015em;
}
.pgDocs__meta i { font-style: normal; font-size: .86rem; color: var(--olive-300); }
.pgDocs__list .btn { width: 100%; }

.pgDoc__bio { max-width: 74ch; }
.pgDoc__bio p + p { margin-top: 14px; }
.pgDoc__bio b { font-weight: 500; color: var(--ink); }
.pgDoc__bio + .btn { margin-top: 30px; }

.pgBlog { display: grid; gap: 12px; }
.pgBlog > li {
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(14, 18, 12, .1);
  border-radius: var(--r);
  transition: border-color .4s var(--ease), transform .5s var(--ease);
}
.pgBlog > li:hover { border-color: rgba(208, 117, 76, .5); }
.pgBlog a { display: grid; gap: 10px; padding: 24px 22px 26px; height: 100%; align-content: start; }
.pgBlog h2 {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.pgBlog p { font-size: .9rem; line-height: 1.5; color: var(--olive-500); }
.pgBlog i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-lo);
  margin-top: 4px;
}

.pgCta {
  position: relative;
  isolation: isolate;
  padding: clamp(64px, 10vw, 148px) var(--pad);
  background: var(--olive-900);
  overflow: hidden;
}
.pgCta__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 12% 0%, rgba(208, 117, 76, .16), transparent 55%);
  pointer-events: none;
}
.pgCta__inner {
  display: grid;
  gap: clamp(34px, 5vw, 70px);
  max-width: 1560px;
  margin: 0 auto;
}
.pgCta__lead { max-width: 52ch; margin-top: 20px; color: var(--olive-300); }
.pgCta__facts {
  display: grid;
  gap: 0;
  margin-top: 34px;
  max-width: 520px;
}
.pgCta__facts li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-dark);
}
.pgCta__facts li:first-child { border-top: 1px solid var(--line-dark); }
.pgCta__facts span { font-size: .84rem; color: var(--olive-300); }
.pgCta__facts b { font-weight: 500; font-size: .94rem; }
.pgCta__actions { display: grid; gap: 12px; align-content: start; }

@media (min-width: 600px) {
  .pgCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgCards--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgGallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pgGallery--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgGallery--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgBlog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgDocs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgHero__actions .btn { width: auto; }
  .pgCta__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgCta__actions .btn:first-child { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .nav__has-mega { display: flex; align-items: center; }

  .pgHero { padding-top: 148px; }
  .pgHero--media .pgHero__inner {
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
  }
  .pgHero__actions .btn { width: auto; }

  .pgCards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .pgCards--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgCards--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pgCards--tight { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .pgSteps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  .pgProse--cols { columns: 2; column-gap: clamp(32px, 4vw, 64px); display: block; }
  .pgProse--cols p { break-inside: avoid; margin-bottom: 18px; }

  .pgGallery--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .pgMedia { grid-template-columns: 1fr .85fr; }
  .pgMedia--flip .pgMedia__copy { order: 2; }

  .pgVideo { grid-template-columns: .8fr 1.2fr; }

  .pgDocs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pgBlog { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pgCta__inner { grid-template-columns: 1.15fr .85fr; align-items: center; }
  .pgCta__actions { grid-template-columns: 1fr; }
  .pgCta__actions .btn:first-child { grid-column: auto; }
}

@media (min-width: 1280px) {
  .pgCards--tight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pgSteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .mega { transition: opacity .01ms; }
  .pgCards > li:hover,
  .pgVideo__facade:hover .pgVideo__play { transform: none; }
  .pgRelated__list a:hover { padding-left: 0; }
}

.nav__logo { display: inline-flex; align-items: center; min-height: 44px; }
.footer__up { display: inline-flex; align-items: center; min-height: 44px; }

.pgDoc { display: grid; gap: clamp(28px, 4vw, 56px); }
.pgDoc__photo { border-radius: var(--r); overflow: hidden; align-self: start; }
.pgDoc__photo img { width: 100%; height: auto; }
.pgDoc__text .pgSec__title { margin-bottom: clamp(20px, 3vw, 32px); }

@media (min-width: 900px) {
  .pgDoc { grid-template-columns: 1.1fr .9fr; align-items: start; }
  .pgDoc__photo { position: sticky; top: 120px; }
}

.doc__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive-300);
  transition: color .3s var(--ease);
}
.doc__link:hover { color: var(--accent); }

.pgBul { display: grid; gap: 7px; margin: 10px 0; }
.pgBul li {
  position: relative;
  padding-left: 18px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--olive-300);
}
.pgBul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .68em;
  width: 5px;
  height: 1px;
  background: var(--accent);
}
.pgSec--light .pgBul li { color: var(--olive-500); }
.pgProse .pgBul li { font-size: inherit; }

.booking__formhead { display: grid; gap: 6px; margin-bottom: 4px; }
.booking__formhead b {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: -.02em;
}
.booking__formhead span { font-size: .86rem; line-height: 1.45; color: var(--olive-300); }

.online {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  max-width: 1560px;
  margin: clamp(40px, 6vw, 72px) auto 0;
  padding: clamp(24px, 4vw, 44px);
  background: var(--olive-900);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
}

.online__head { display: grid; gap: 10px; }
.online__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.03em;
}
.online__lead { max-width: 62ch; font-size: .92rem; color: var(--olive-300); }

.online__row { display: grid; gap: 18px; }

.online__foot {
  display: grid;
  gap: 16px;
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line-dark);
}
.online__foot .btn { width: 100%; }

.online .slots { gap: clamp(18px, 2.4vw, 26px); padding-bottom: 0; }
.online .slots__chosen { justify-self: start; }

@media (min-width: 700px) {
  /* Равняем по верху, а не по низу. По низу было надёжнее, пока подписи
     гуляли в высоте, — но теперь у них жёсткий line-height, и они совпадают
     всегда. Зато по низу ряд разъезжался, стоило под полем появиться
     сообщению об ошибке: поле росло, ряд рос вместе с ним, и соседи уезжали
     вниз. По верху рост поля никого не двигает. */
  .online__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (min-width: 900px) {
  /* Первая колонка ровно вполовину ряда, как в рядах выше: тогда «Телефон»
     начинается на той же линии, что «Врач» и «Что беспокоит». Прежние
     три равные доли ставили его левее, и нижний ряд жил по своей сетке. */
  .online__foot {
    grid-template-columns: calc((100% - 18px) / 2) minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
  }
  /* У полей сверху подпись, у кнопки её нет — сама она встала бы выше инпутов.
     Опускаем ровно на высоту подписи плюс отступ под ней. Числа те же, что
     у .field label и .field: поменяете там — поправьте здесь. */
  .online__foot .btn {
    width: auto;
    min-width: 230px;
    margin-top: calc(.62rem * 1.62 + 8px);
  }
}

.trap input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.field__opt {
  font-family: var(--font-ui);
  font-size: .74rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--olive-500);
}
.pgSec--light .field__opt { color: var(--olive-300); }

.online__terms {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--olive-300);
}
.online__terms a { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }
.online__terms a:hover { color: var(--bone); }

.booking__note a { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }
.booking__note a:hover { color: var(--bone); }

.slots__chosen i { font-style: normal; color: var(--olive-300); font-size: .8rem; }

.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pgNote {
  margin-top: 10px;
  padding: 16px 18px;
  background: rgba(208, 117, 76, .1);
  border-left: 2px solid var(--accent-lo);
  border-radius: var(--r);
  font-size: .9rem;
}
.pgNote b { font-weight: 500; color: var(--ink); }
.pgSec--dark .pgNote b,
.pgSec--deep .pgNote b { color: var(--bone); }

.quiz__form {
  display: grid;
  gap: 26px;
  margin-top: 34px;
}

.quiz__q {
  display: grid;
  gap: 12px;
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}
.quiz__q[hidden] { display: none; }
.quiz__q legend {
  padding: 0;
  font-family: var(--font-mono);
  font-size: .62rem;
  line-height: 1.62em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive-300);
}

.quiz__opts {
  display: grid;
  gap: 8px;
}
@media (min-width: 720px) {
  .quiz__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Кружок радиокнопки остаётся в потоке и принимает фокус с клавиатуры,
   иначе по табу обойти анкету нельзя. Видимой его делает вся карточка. */
.quiz__opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.quiz__opt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 16px;
  background: var(--olive-900);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.quiz__opt span {
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.4;
}
.quiz__opt:hover { border-color: rgba(244, 241, 233, .3); }
.quiz__opt:has(input:checked) {
  background: rgba(208, 117, 76, .14);
  border-color: var(--accent);
}
.quiz__opt:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.quiz__detail { margin-top: 4px; }
.quiz__detail[hidden] { display: none; }
.quiz__detail input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 300;
  background: var(--olive-950);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  transition: border-color .35s var(--ease);
}
.quiz__detail input::placeholder { color: rgba(139, 148, 128, .6); }
.quiz__detail input:focus { border-color: var(--accent); outline: none; }

.quiz .field textarea {
  width: 100%;
  min-height: 96px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  background: var(--olive-950);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  resize: vertical;
  transition: border-color .35s var(--ease);
}
.quiz .field textarea::placeholder { color: rgba(139, 148, 128, .6); }
.quiz .field textarea:focus { border-color: var(--accent); outline: none; }
.quiz .field.has-error textarea { border-color: #C97B5A; }

.quiz .btn--wide { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .quiz__opt,
  .quiz__detail input,
  .quiz .field textarea { transition: none; }
}

.partners {
  padding: var(--sec) var(--pad);
  background: var(--bone);
  color: var(--ink);
}
.partners__head { margin-bottom: clamp(28px, 4vw, 52px); }

.partners__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.partner {
  display: grid;
  gap: 6px;
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: 128px;
  padding: 24px 18px;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(14, 18, 12, .1);
  border-radius: var(--r);
}

/* Логотипы партнёров приходят в разных пропорциях: у кого-то широкий
   шрифтовой знак, у кого-то квадратная эмблема. Высота коробки задана, ширина
   свободна — так ряд держит общую линию, а знаки не растягиваются. */
.partner__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  margin-bottom: 4px;
}
.partner__mark img {
  max-height: 52px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partner b { font-size: 1rem; font-weight: 500; line-height: 1.3; }
.partner i {
  font-style: normal;
  font-size: .82rem;
  font-weight: 300;
  color: var(--olive-500);
}

.pick {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}
@media (min-width: 720px) {
  .pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pick a {
  display: grid;
  gap: 8px;
  height: 100%;
  padding: 26px 26px 24px;
  background: var(--olive-900);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.pick a:hover { border-color: var(--accent); transform: translateY(-2px); }
.pick a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.pick b { font-size: 1.3rem; font-weight: 500; line-height: 1.2; }
.pick span { color: var(--olive-300); font-size: .95rem; font-weight: 300; line-height: 1.5; }
.pick i {
  margin-top: 4px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-hi);
}

@media (prefers-reduced-motion: reduce) {
  .pick a { transition: none; }
  .pick a:hover { transform: none; }
}

/* Длинное слово вроде «Персонализированный» не помещалось в 320px и распирало
   весь блок героя: заголовок, подзаголовок и кнопки уезжали за край и
   обрезались. Слово должно переноситься внутри своей маски: ограничение по
   ширине заставляет его разбиться, а сама маска остаётся целой — она растёт
   по высоте вместе с содержимым, поэтому появление текста не ломается. */
   Именно anywhere, а не break-word: break-word разрешает разрыв при вёрстке
   строки, но саму минимальную ширину блока не уменьшает, и блок продолжает
   требовать место под самое длинное слово целиком. */
.word { max-width: 100%; overflow-wrap: anywhere; }

.pgHero__title,
.pgSec__title,
.h1,
.h2 { overflow-wrap: anywhere; }