/* ============================================================
   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); } }

/* ============================================================
   Cursor
   ============================================================ */

.cursor { display: none; }

@media (pointer: fine) {
  .cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    display: block;
    pointer-events: none;
    mix-blend-mode: difference;
    /* Hidden until the pointer actually moves, otherwise it parks
       dead centre over the hero for anyone who scrolls with the wheel. */
    opacity: 0;
    transition: opacity .3s var(--ease);
  }
  .cursor__dot,
  .cursor__ring {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .cursor__dot { width: 5px; height: 5px; background: var(--bone); }
  .cursor__ring {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(244, 241, 233, .5);
    transition: width .35s var(--ease), height .35s var(--ease), opacity .35s var(--ease);
  }
  .cursor.is-hot .cursor__ring { width: 62px; height: 62px; opacity: .55; }
}

/* ============================================================
   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;
  gap: 1px;
  max-width: 1560px;
  margin: 0 auto;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
}

.doc { background: var(--olive-950); }
.doc__btn {
  position: relative;
  display: block;
  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;
}
.ent__strip figure { position: relative; overflow: hidden; border-radius: var(--r); }
.ent__strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.ent__strip figure:hover img { transform: scale(1.05); }
.ent__strip figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 16px 14px;
  background: linear-gradient(to top, rgba(18, 23, 15, .88), rgba(18, 23, 15, 0));
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone);
}

/* ============================================================
   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);
}

/* ============================================================
   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; }
.field label {
  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;
}

.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 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: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);
}
.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. */
[data-reveal="clip"] > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s 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; 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); }

  .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__grid { grid-template-columns: .8fr 1.2fr; }
  .modal__img img { aspect-ratio: 3 / 4; height: 100%; }
}

/* 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)); }
}

/* ============================================================
   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; }
  .cursor { display: none !important; }
  .zone {
    position: static;
    transform: none !important;
    box-shadow: none;
  }
  .zone::after { opacity: 0 !important; }
  .doc__img img { filter: none !important; }
}