@charset "utf-8";
/* CSS Document 

Tooplate 2166 Ivory Flow
    
https://www.tooplate.com/view/2166-ivory-flow

*/

/* ═══════════════════════════════════════════════
   RESET & VARIABLES
   ═══════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --oat: #FCFAF8;
  --oat-mid: #F5F0EB;
  --oat-deep: #EDE6DD;
  --terra: #D96C4A;
  --focus: var(--terra);
  --terra-light: rgba(217, 108, 74, 0.12);
  --terra-ghost: rgba(217, 108, 74, 0.06);
  --ink: #1A1714;
  --ink-soft: #3D3832;
  --ink-muted: #8A8279;
  --ink-faint: #B8B0A6;
  --white: #FFFFFF;
  --ease-soft: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-expo: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Manrope', sans-serif;
  background: var(--oat);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* ═══════════════════════════════════════════════
   FLOATING PILL NAV
   ═══════════════════════════════════════════════ */
.pill-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(252, 250, 248, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(26, 23, 20, 0.06);
  border-radius: 999px;
  padding: 6px 8px;
  box-shadow: 0 4px 24px rgba(26, 23, 20, 0.06);
}

.pill-nav a {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 8px 18px;
  border-radius: 999px;
  transition: color 0.5s var(--ease-soft), background 0.5s var(--ease-soft);
  white-space: nowrap;
}

.pill-nav a:hover {
  color: var(--ink);
}

.pill-nav a.active {
  background: var(--ink);
  color: var(--oat);
}

/* ═══════════════════════════════════════════════
   EST. 2026 VERTICAL DECORATOR (Right Edge)
   ═══════════════════════════════════════════════ */
.est-label {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  z-index: 900;
  pointer-events: none;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════
   EXPANDING UNDERLINE CTA (No Standard Buttons)
   ═══════════════════════════════════════════════ */
.cta-link {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra);
  position: relative;
  padding-bottom: 4px;
  cursor: pointer;
  background: none;
  border: none;
}

.cta-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: var(--terra);
  transition: width 0.7s var(--ease-soft), left 0.7s var(--ease-soft);
}

.cta-link:hover::after {
  width: 100%;
  left: 0;
}

.cta-link--dark { color: var(--ink); }
.cta-link--dark::after { background: var(--ink); }

.cta-link--light { color: var(--oat); }
.cta-link--light::after { background: var(--oat); }

/* ═══════════════════════════════════════════════
   STICKY SECTION ARCHITECTURE
   ═══════════════════════════════════════════════ */
.canvas-section {
  position: sticky;
  top: 0;
  min-height: 100vh;
  overflow: hidden;
}

.canvas-section:nth-child(1) { z-index: 1; }
.canvas-section:nth-child(2) { z-index: 2; }
.canvas-section:nth-child(3) { z-index: 3; }
.canvas-section:nth-child(4) { z-index: 4; }
.canvas-section:nth-child(5) { z-index: 5; }
.canvas-section:nth-child(6) { z-index: 6; }

/* ═══════════════════════════════════════════════
   SECTION 1: HERO (Split Screen)
   ═══════════════════════════════════════════════ */
.hero {
  background: var(--oat);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.hero-image {
  position: relative;
  overflow: hidden;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-image-tag {
  position: absolute;
  bottom: 32px;
  left: 32px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(26, 23, 20, 0.35);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 64px 80px 56px;
}

.hero-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-soft) 0.3s forwards;
}

.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(42px, 5.5vw, 88px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 1s var(--ease-soft) 0.5s forwards;
}

.hero-title em {
  font-style: italic;
  color: var(--terra);
}

.hero-desc {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-muted);
  max-width: 380px;
  margin-bottom: 36px;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-soft) 0.7s forwards;
}

.hero-cta {
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-soft) 0.9s forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════
   SECTION 2: THE LOOKBOOK (Horizontal Scroll-Snap)
   ═══════════════════════════════════════════════ */
.lookbook {
  background: var(--oat-mid);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 60px 0;
}

.lookbook-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 64px;
  margin-bottom: 40px;
}

.lookbook-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 300;
  color: var(--ink);
}

.lookbook-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.15em;
}

.lookbook-track {
  display: flex;
  gap: 28px;
  padding: 0 64px 40px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.lookbook-track::-webkit-scrollbar { display: none; }

.lookbook-track.is-dragging { cursor: grabbing; }
.lookbook-track.is-dragging img { pointer-events: none; }

.lookbook-card {
  flex: 0 0 auto;
  position: relative;
}

.lookbook-card img {
  display: block;
  border-radius: 32px;
  border: 10px solid var(--white);
  box-shadow: 0 8px 40px rgba(26, 23, 20, 0.06);
  height: 55vh;
  min-height: 350px;
  width: auto;
  object-fit: cover;
  transition: transform 1s var(--ease-soft), box-shadow 0.8s var(--ease-soft);
}

.lookbook-card:hover img {
  transform: translateY(-4px);
  box-shadow: 0 16px 56px rgba(26, 23, 20, 0.1);
}

.lookbook-card-label {
  position: absolute;
  bottom: -28px;
  left: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lookbook-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48px;
  padding: 0 64px;
}

.lookbook-arrows {
  display: flex;
  gap: 8px;
}

.lookbook-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.5s var(--ease-soft), background 0.5s var(--ease-soft);
}

.lookbook-arrow:hover {
  border-color: var(--ink);
  background: var(--ink);
}

.lookbook-arrow svg {
  width: 16px;
  height: 16px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.5s var(--ease-soft);
}

.lookbook-arrow:hover svg { stroke: var(--oat); }

/* ═══════════════════════════════════════════════
   SECTION 3: PRODUCT DETAIL
   ═══════════════════════════════════════════════ */
.product {
  background: var(--oat);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 100vh;
  align-items: center;
}

.product-image-zone {
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: none;
}

.product-image-zone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mouse-following Terracotta Buy Circle */
.buy-circle {
  position: fixed;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--terra);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-soft);
  mix-blend-mode: normal;
}

.buy-circle.visible {
  opacity: 1;
  transform: scale(1);
}

.buy-circle span {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
}

.product-info {
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 20px;
}

.product-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 12px;
}

.product-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--terra);
  margin-bottom: 24px;
}

.product-desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-muted);
  max-width: 400px;
  margin-bottom: 32px;
}

.product-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 36px;
  border-top: 1px solid var(--oat-deep);
}

.product-spec {
  flex: 1 1 50%;
  padding: 16px 0;
  border-bottom: 1px solid var(--oat-deep);
}

.product-spec dt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}

.product-spec dd {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.product-actions {
  display: flex;
  gap: 28px;
  align-items: center;
}

/* ═══════════════════════════════════════════════
   SECTION 4: THE PROCESS (Vertical Timeline)
   ═══════════════════════════════════════════════ */
.process {
  background: var(--ink);
  color: var(--oat);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 100px 64px;
}

.process-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.process-left {
  position: relative;
}

.process-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 20px;
}

.process-subtitle {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-faint);
  line-height: 1.8;
  max-width: 340px;
}

.timeline {
  position: relative;
  padding-left: 40px;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--terra), var(--terra), transparent);
}

.timeline-item {
  position: relative;
  padding: 0 0 56px 0;
  opacity: 0.2;
  transform: translateY(12px);
  transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft);
}

.timeline-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -44px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--terra);
  background: var(--ink);
  transition: background 0.5s var(--ease-soft);
}

.timeline-item.in-view::before {
  background: var(--terra);
}

.timeline-step {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 10px;
}

.timeline-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 8px;
  color: var(--oat);
}

.timeline-text {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-faint);
  max-width: 340px;
}

/* ═══════════════════════════════════════════════
   SECTION 5: VIDEO FRAGMENT (Grain Overlay)
   ═══════════════════════════════════════════════ */
.video-fragment {
  background: var(--ink);
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-bg {
  position: absolute;
  inset: 0;
}

.video-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45) saturate(0.8);
}

/* CSS Grain / Noise Overlay */
.grain-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px;
  mix-blend-mode: overlay;
}

.video-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 600px;
  padding: 40px;
}

.video-play {
  width: 80px;
  height: 80px;
  border: 1px solid rgba(252, 250, 248, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
  cursor: pointer;
  transition: border-color 0.6s var(--ease-soft), transform 0.6s var(--ease-soft);
}

.video-play:hover {
  border-color: var(--oat);
  transform: scale(1.1);
}

.video-play svg {
  width: 20px;
  height: 20px;
  fill: var(--oat);
  margin-left: 3px;
}

.video-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 300;
  color: var(--oat);
  line-height: 1.15;
  margin-bottom: 16px;
}

.video-caption {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-faint);
  line-height: 1.7;
  margin-bottom: 28px;
}

/* ═══════════════════════════════════════════════
   SECTION 6: THE SIGNATURE
   ═══════════════════════════════════════════════ */
.signature {
  background: var(--oat-mid);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Massive semi-transparent logo background */
.signature-bg-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(120px, 18vw, 280px);
  font-weight: 300;
  color: rgba(26, 23, 20, 0.035);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.05em;
}

.signature-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 480px;
  padding: 40px;
}

.signature-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 32px;
}

.signature-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 20px;
}

.signature-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-muted);
  margin-bottom: 32px;
}

.signature-email {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 12px;
  transition: color 0.5s var(--ease-soft);
}

.signature-email:hover { color: var(--terra); }

.signature-phone {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: 36px;
}

.signature-links {
  display: flex;
  gap: 28px;
  justify-content: center;
}

.signature-footer {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

.signature-footer a {
  transition: color 0.4s;
}

.signature-footer a:hover { color: var(--terra); }

/* ═══════════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════
   HAMBURGER (MOBILE)
   ═══════════════════════════════════════════════ */
.hamburger {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  width: 44px;
  height: 44px;
  background: rgba(252, 250, 248, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(26, 23, 20, 0.06);
  border-radius: 50%;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.hamburger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.5s var(--ease-soft), opacity 0.3s;
}

.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(3px, 4px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(3px, -4px); }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(252, 250, 248, 0.97);
  backdrop-filter: blur(20px);
  z-index: 1500;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 80px 40px;
  overflow-y: auto;
}

.mobile-nav.open { display: flex; }

.mobile-nav a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 300;
  color: var(--ink);
  transition: color 0.4s;
}

.mobile-nav a:hover { color: var(--terra); }

/* ═══════════════════════════════════════════════
   PREFERS REDUCED MOTION
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .timeline-item { opacity: 1; transform: none; }
}
/* ═══════════════════════════════════════════════
   ДОРАБОТКИ ПОД ТРЕБОВАНИЯ ПРОЕКТА
   Медиазапросы — в конце файла, иначе они молча
   перебиваются базовыми правилами той же специфичности.
   ═══════════════════════════════════════════════ */

/* Тап-цели: в шаблоне ссылки-действия были высотой 21 px,
   на телефоне в них не попасть пальцем. Норма — 44.
   Правило по вложенности, а не по классам: в разметке ссылки
   навигации и подвала идут без классов. */
.pill-nav a,
.mobile-nav a,
.signature a,
.process-inner a,
.hero-cta a,
.cta-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Ссылки внутри абзацев остаются строчными — иначе разорвут текст */
.product-spec dt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Ссылка внутри предложения остаётся строчной, иначе разорвёт текст.
   Отдельный призыв к действию — не тот случай: он стоит в абзаце один
   и должен оставаться крупной тап-целью. */
.process-inner p a:not(.cta-link),
.signature p a.inline {
  display: inline;
  min-height: 0;
}

/* Липкая панель записи на мобильном.
   Требование ФТТ: действие доступно на любом экране прокрутки.
   В шаблоне такой панели не было. */
.action-bar {
  display: none;
}

/* Предупреждение о противопоказаниях.
   ФЗ-38 ст. 24: обязательно на каждой странице услуги. */
.legal-warning {
  margin-top: 48px;
  padding: 20px 0;
  border-top: 1px solid var(--oat-deep);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-muted);
}

/* Цена: единица измерения всегда рядом с числом */
.price-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  color: var(--ink);
}

.price-unit {
  font-size: 13px;
  color: var(--ink-muted);
}

.price-note {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-muted);
}

/* ═══════ ФОРМА ЗАПИСИ ═══════
   Поля в стиле шаблона: только нижняя линия, без рамок.
   Крупные, одна колонка — требование ФТТ. */

.lead-form {
  margin-top: 32px;
  max-width: 520px;
}

.lead-form .field {
  margin-bottom: 24px;
}

.lead-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.lead-form input[type="text"],
.lead-form input[type="tel"],
.lead-form input[type="email"],
.lead-form input[type="date"],
.lead-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 0;
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-faint);
  border-radius: 0;
  transition: border-color 0.3s;
}

.lead-form textarea {
  min-height: 88px;
  resize: vertical;
}

.lead-form input:focus,
.lead-form textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

/* Тот, кто ходит с клавиатуры, должен видеть, где он находится.
   Одной смены цвета линии для этого мало: она в 1 px */
/* У галочек и кнопок подчёркивания нет — им рамка и нужна */
.lead-form button:focus-visible,
.lead-form [type="checkbox"]:focus-visible,
.lead-form [type="radio"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

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

/* Галочки согласий: увеличенная зона нажатия — на телефоне
   в квадратик 16 px попасть невозможно */
.lead-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  min-height: 44px;
  padding: 8px 0;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  cursor: pointer;
}

.lead-form .consent input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex-shrink: 0;
  /* Отмеченная галочка иначе системно-синяя — единственное синее пятно
     на всём сайте */
  accent-color: var(--terra);
}

.lead-form button {
  min-height: 48px;
  padding: 0 32px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oat);
  background: var(--ink);
  border: none;
  cursor: pointer;
}

/* ═══════ COOKIE-БАННЕР ═══════
   Две равнозначные кнопки: отказ не должен быть спрятан
   или визуально слабее согласия. */

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  display: none;
  padding: 20px;
  background: var(--oat);
  border: 1px solid var(--oat-deep);
  box-shadow: 0 8px 32px rgba(26, 23, 20, 0.12);
}

.cookie-banner.visible {
  display: block;
}

.cookie-banner p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Кнопки одинакового размера: отказ должен читаться так же весомо,
   как согласие. Разная ширина по длине надписи делала «Принять все»
   визуально главной кнопкой, а это уже недобровольное согласие. */
.cookie-banner .buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 480px) {
  .cookie-banner .buttons {
    grid-template-columns: 1fr 1fr;
  }
}

.cookie-banner button {
  min-height: 48px;
  padding: 0 16px;
  text-align: center;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
}

.cookie-banner button.accept {
  background: var(--ink);
  color: var(--oat);
}

@media (min-width: 768px) {
  .cookie-banner {
    left: auto;
    right: 24px;
    bottom: 24px;
    max-width: 420px;
  }
}

.page-body h2 {
  margin: 32px 0 12px;
  font-size: 24px;
}

.page-body p {
  margin-bottom: 12px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ═══════ АНКЕТА ПОДБОРА ═══════ */

.advisor-form .question {
  margin-bottom: 36px;
  padding: 0;
  border: none;
  border-top: 1px solid var(--oat-deep);
  padding-top: 24px;
}

.advisor-form legend {
  padding: 0;
  margin-bottom: 16px;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}

/* Варианты ответа — крупные зоны нажатия: на телефоне
   в кружок радиокнопки пальцем не попасть */
.advisor-form ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.advisor-form li label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin: 0;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  cursor: pointer;
}

.advisor-form li input {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.field-error {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--terra);
}

/* ═══════ РАБОТЫ ДО И ПОСЛЕ ═══════
   Две картинки рядом на телефоне превращаются в две марки: каждая
   шириной с половину экрана, разницу не разглядеть. Поэтому один
   кадр со шторкой — тянешь и видишь переход. Оправа взята у карточки
   лукбука из шаблона: скругление 32, белое поле 10, та же тень. */

/* Своя обёртка вместо process-inner: тот делит экран на две колонки,
   и сетка работ уехала бы в половину ширины */
.raboty-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Шапка своя, а не lookbook-header: у того padding 0 64px, и на
   тёмной секции с её собственными полями заголовок уезжал бы вправо
   от карточек */
.raboty-shapka {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 44px;
}

.raboty-setka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 56px 40px;
  max-width: 1060px;
  margin: 0 auto;
}

/* Подзаголовки блоков. Секция тёмная, поэтому цвет — --oat:
   у lookbook-title он взят из наследования, здесь задаём явно */
.raboty-podzagolovok {
  margin: 0 0 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(252, 250, 248, 0.14);
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 300;
  color: var(--oat);
}

.raboty-setka + .raboty-podzagolovok,
.raboty-galereya + .raboty-podzagolovok {
  margin-top: 64px;
}

.rabota {
  margin: 0;
}

/* Пара, снятая по-разному, идёт во всю ширину строки: два кадра рядом
   в узкой колонке превращаются в две марки, а сравнивать нужно детали */
.rabota--ryadom {
  grid-column: 1 / -1;
}

.ryadom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 20px;
  border-radius: 32px;
  border: 10px solid var(--white);
  box-shadow: 0 8px 40px rgba(26, 23, 20, 0.06);
  overflow: hidden;
  background: var(--white);
}

.ryadom-kadr {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--oat-deep);
}

.ryadom-kadr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sravnenie {
  position: relative;
  margin: 0 0 20px;
  aspect-ratio: 4 / 5;
  border-radius: 32px;
  border: 10px solid var(--white);
  box-shadow: 0 8px 40px rgba(26, 23, 20, 0.06);
  overflow: hidden;
  background: var(--oat-deep);
  /* палец тянет ползунок по горизонтали, страница листается по вертикали */
  touch-action: pan-y;
}

.sravnenie img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* «После» открывается справа от линии. Пока JS не подключился,
   --sdvig берётся из запасного значения: видно половину каждого
   снимка, пара читается и без перетаскивания */
.sravnenie-posle {
  clip-path: inset(0 0 0 var(--sdvig, 50%));
}

.sravnenie-liniya,
.sravnenie-ruchka {
  display: none;
}

/* Тянуть можно только когда JS работает — иначе ползунок был бы
   мёртвой ручкой, которая никуда не двигает */
.sravnenie--gotovo .sravnenie-liniya,
.sravnenie--gotovo .sravnenie-ruchka {
  display: block;
}

.sravnenie-liniya {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--sdvig, 50%);
  width: 2px;
  background: var(--white);
  box-shadow: 0 0 14px rgba(26, 23, 20, 0.3);
  pointer-events: none;
}

.sravnenie-liniya::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white) center / 20px 20px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1714' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");
  box-shadow: 0 4px 18px rgba(26, 23, 20, 0.22);
}

/* Настоящий орган управления — обычный ползунок. Он даёт и палец,
   и стрелки на клавиатуре, и подпись для читалки экрана даром */
.sravnenie-ruchka {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.sravnenie-ruchka::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: transparent;
  cursor: ew-resize;
}

.sravnenie-ruchka::-moz-range-thumb {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: ew-resize;
}

.sravnenie-ruchka:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 6px;
}

.sravnenie-metka {
  position: absolute;
  bottom: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(26, 23, 20, 0.55);
  color: var(--white);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}

.sravnenie-metka--do { left: 14px; }
.sravnenie-metka--posle { right: 14px; }

.rabota-usluga {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  /* Секция тёмная — цвета берём те же, какими шаблон пишет по тёмному:
     заголовок --oat, текст --ink-faint. Написать здесь --ink значило бы
     чёрным по чёрному */
  color: var(--oat);
}

.rabota-usluga a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease-soft), color 0.4s var(--ease-soft);
}

.rabota-usluga a:hover {
  color: var(--terra);
  border-bottom-color: var(--terra);
}

.rabota-kommentariy {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-faint);
}

.rabota-svedeniya {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

/* Галерея одиночных снимков: кабинет, аппараты, кадры с процедур.
   Квадрат выбран намеренно — он терпит и вертикальный, и горизонтальный
   исходник, а в сетке 4:5 горизонтальный снимок пришлось бы резать
   пополам. Оправа легче, чем у пары: это фон, а не доказательство */
.raboty-galereya {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.rabota-odna {
  margin: 0;
}

.rabota-odna img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 24px;
  border: 6px solid var(--white);
  box-shadow: 0 6px 28px rgba(26, 23, 20, 0.05);
}

.rabota-odna figcaption {
  display: block;
  margin-top: 12px;
}

.rabota-odna-usluga {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--oat);
}

.rabota-odna-podpis {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* Пустой раздел не должен быть тупиком: человек пришёл по пункту
   меню, и «ничего нет» — это отказ без выхода. Отсюда объяснение
   и две двери дальше */
.raboty-pusto {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.raboty-pusto p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-faint);
}

.raboty-pusto .cta-link {
  margin: 0 14px;
}

.raboty-dveri {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 0;
  justify-content: center;
  margin-top: 28px;
}

.raboty-dveri--posle-rabot {
  margin-top: 56px;
}

/* Предупреждение о противопоказаниях обязательно по ст. 24 ФЗ-38,
   и на странице с фотографиями результата оно нужнее всего: именно
   такие снимки легче всего прочесть как обещание. Поэтому крупнее
   и светлее, чем общее правило для светлых секций */
.raboty-inner .legal-warning {
  margin-top: 64px;
  font-size: 14px;
  color: var(--ink-faint);
  border-top-color: rgba(252, 250, 248, 0.16);
}

/* Отзывы */
.review {
  padding: 20px 0;
  border-top: 1px solid var(--oat-deep);
}

.review-author {
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink-muted);
}

/* ═══════ ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ ═══════
   У клиники значительная часть аудитории 45+, и светло-серый текст
   мелким кеглем для них недоступен. Настройки запоминаются. */

.a11y-toggle {
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: 150;
  min-height: 44px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--oat);
  border: 1px solid var(--ink-faint);
  cursor: pointer;
}

.a11y-panel {
  position: fixed;
  right: 16px;
  top: 68px;
  z-index: 150;
  padding: 16px;
  background: var(--oat);
  border: 1px solid var(--ink-faint);
  max-width: 280px;
}

.a11y-panel p {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.a11y-panel button {
  min-height: 44px;
  margin: 0 6px 6px 0;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  background: transparent;
  border: 1px solid var(--ink-faint);
  cursor: pointer;
}

/* Увеличенный текст */
html[data-a11y-size="large"].a11y body { font-size: 20px; }
html[data-a11y-size="large"].a11y p,
html[data-a11y-size="large"].a11y li,
html[data-a11y-size="large"].a11y dd,
html[data-a11y-size="large"].a11y dt { font-size: 20px; line-height: 1.7; }

html[data-a11y-size="xlarge"].a11y body { font-size: 24px; }
html[data-a11y-size="xlarge"].a11y p,
html[data-a11y-size="xlarge"].a11y li,
html[data-a11y-size="xlarge"].a11y dd,
html[data-a11y-size="xlarge"].a11y dt { font-size: 24px; line-height: 1.8; }

/* Контрастные темы */
html[data-a11y-contrast="black"].a11y body,
html[data-a11y-contrast="black"].a11y .canvas-section {
  background: #000;
  color: #fff;
}
html[data-a11y-contrast="black"].a11y a,
html[data-a11y-contrast="black"].a11y h1,
html[data-a11y-contrast="black"].a11y h2,
html[data-a11y-contrast="black"].a11y p,
html[data-a11y-contrast="black"].a11y dt,
html[data-a11y-contrast="black"].a11y dd { color: #fff; }

html[data-a11y-contrast="yellow"].a11y body,
html[data-a11y-contrast="yellow"].a11y .canvas-section {
  background: #000;
  color: #FFD400;
}
html[data-a11y-contrast="yellow"].a11y a,
html[data-a11y-contrast="yellow"].a11y h1,
html[data-a11y-contrast="yellow"].a11y h2,
html[data-a11y-contrast="yellow"].a11y p,
html[data-a11y-contrast="yellow"].a11y dt,
html[data-a11y-contrast="yellow"].a11y dd { color: #FFD400; }

/* На чёрном фоне терракотовая рамка фокуса теряется */
html[data-a11y-contrast="black"].a11y { --focus: #fff; }
html[data-a11y-contrast="yellow"].a11y { --focus: #FFD400; }

.a11y-no-images img,
.a11y-no-images picture { display: none; }

/* В обычном режиме панель не мешает */
.a11y-panel[hidden] { display: none; }

/* Раскрываемые подробности согласия: по ч. 4 ст. 12 152-ФЗ человек должен
   знать получателя, страну, цель, состав данных и срок — но выкладывать
   это простынёй в форму значит потерять половину заполняющих */
.consent-details {
  margin: -8px 0 20px 34px;
  font-size: 15px;
  color: var(--ink-muted);
}

.consent-details summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--terra);
}

.consent-details p {
  margin: 0 0 12px;
  line-height: 1.7;
}


/* ═══════ РАЗМЕР ОСНОВНОГО ТЕКСТА ═══════
   Требование ФТТ: основной текст не мельче 17px. Аудитория клиники
   в значительной части 35–45 и старше, и 15px им читать тяжело. */

body,
main p,
main li,
main dd,
.page-body p,
.hero-desc,
.lede {
  font-size: 17px;
}



/* Пометка обязательного вопроса в анкете подбора. Тихая, но заметная:
   вопрос про ограничения (беременность, аллергии) пропускать нельзя. */
.required-mark {
  margin-left: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra);
  vertical-align: middle;
}

/* Заголовок в тёмных секциях. У класса жёстко задан тёмный цвет, а секции
   «процесс» и «подпись» тёмные — заголовок сливался с фоном и был не виден
   вовсе. Секция задаёт цвет текста сама, заголовку остаётся его наследовать. */
.process .lookbook-title,
.signature .lookbook-title {
  color: inherit;
}

/* ═══════ ПОШАГОВЫЙ ПОДБОР ═══════
   Один вопрос — один экран. Шесть вопросов простынёй утомляют,
   и человек уходит, не начав. */

/* Скрытое должно быть скрыто. У кнопок задан display: inline-flex,
   и он перебивал атрибут hidden: на первом шаге были видны сразу
   «Далее» и «Получить результат» */
[hidden] {
  display: none !important;
}

/* Секция свёрстана в две колонки — для анкеты это лишнее: справа
   оставалась пустота, а вопрос жался к левому краю */
.advisor-page .process-inner {
  display: block;
  max-width: 640px;
}

.wizard-progress {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--oat-deep);
  margin-bottom: 40px;
}

.wizard .step {
  min-height: 280px;
}

/* Кнопка отправки живёт отдельно от навигации по шагам, но отступ
   от липкой нижней панели нужен ей такой же */
.wizard-submit {
  margin-top: 40px;
  margin-bottom: 72px;
}

.wizard .question {
  border: none;
  padding: 0;
  margin: 0;
}

/* Между блоками одного шага нужен воздух: заголовок «Контакты»
   упирался в последний вариант выбора. Но не столько, чтобы главная
   кнопка уезжала за нижний край экрана */
.wizard .question + .question {
  margin-top: 36px;
}

.wizard .question + .consent,
.wizard .consent + .consent {
  margin-top: 20px;
}

.wizard legend {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  margin-bottom: 28px;
  padding: 0;
}

.wizard-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 48px;
  /* Место под липкую панель внизу: она перекрывала главную кнопку */
  margin-bottom: 72px;
}

/* Главное действие шага должно читаться как кнопка, а не как ссылка:
   подчёркивание снизу теряется среди текста */
#wizardNext,
.wizard-submit {
  padding: 16px 32px;
  border: 1px solid var(--terra);
  color: var(--oat);
  background: transparent;
  transition: background 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}

#wizardNext::after,
.wizard-submit::after {
  content: none;
}

#wizardNext:hover,
.wizard-submit:hover {
  background: var(--terra);
  color: var(--ink);
}

.wizard-back {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oat-deep);
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 0;
  min-height: 44px;
}

.wizard-back:hover {
  color: var(--oat);
}

/* Варианты — крупные карточки: попасть пальцем и прочитать пояснение
   одинаково важно. Регистр обычный: капс читают медленнее */
.track-choice,
.delivery-choice {
  display: grid;
  gap: 12px;
}

.track-option,
.delivery-option {
  display: block;
  padding: 20px 24px;
  border: 1px solid rgba(252, 250, 248, 0.25);
  border-radius: 2px;
  cursor: pointer;
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color 0.3s var(--ease-soft), background 0.3s var(--ease-soft);
}

.track-option:hover,
.delivery-option:hover {
  border-color: var(--terra);
}

.track-option input,
.delivery-option input {
  margin-right: 14px;
  /* Без явного цвета кружок выбранного варианта системно-синий:
     на странице клиники он выглядит чужим элементом */
  width: 18px;
  height: 18px;
  accent-color: var(--terra);
}

.track-option:has(input:checked),
.delivery-option:has(input:checked) {
  border-color: var(--terra);
  background: rgba(152, 134, 113, 0.18);
}

.track-title,
.delivery-option span {
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
}

.track-note {
  display: block;
  margin-top: 8px;
  margin-left: 32px;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  color: var(--oat-deep);
}

/* Пояснение под заголовком шага. Отдельный класс, потому что hero-desc
   рассчитан на первый экран и задаёт свои отступы и анимацию */
.step-lead {
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--oat-deep);
  margin: -12px 0 28px;
  max-width: 460px;
}

/* Своя область загрузки: системная кнопка «Выберите файл» выглядит
   инородно и в отключённом виде читается как поломка страницы */
.photo-field {
  margin-top: 24px;
}

.photo-field input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.photo-drop {
  display: block;
  padding: 28px 24px;
  border: 1px dashed rgba(252, 250, 248, 0.3);
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.3s var(--ease-soft), opacity 0.3s var(--ease-soft);
}

.photo-drop:hover {
  border-color: var(--terra);
}

.photo-drop[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.photo-drop[aria-disabled="true"]:hover {
  border-color: rgba(252, 250, 248, 0.3);
}

.photo-drop-title {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--oat);
}

.photo-drop-note {
  display: block;
  margin-top: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  color: var(--oat-deep);
}

/* Согласия на тёмном фоне: обычный приглушённый цвет там нечитаем */
.process .consent,
.process .consent-details,
.process .consent-details p {
  color: var(--oat-deep);
}

/* Пояснение раскрывается нажатием, но выглядело обычной строкой текста:
   на телефоне наведения нет, и подсказки, что сюда можно нажать, не было */
.process .consent-details summary {
  color: var(--oat-deep);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px dotted rgba(252, 250, 248, 0.45);
}

.process .consent-details summary:hover {
  color: var(--oat);
}

/* Меню и кнопка «Для слабовидящих» на ноутбуках налезали друг на друга:
   меню отцентровано по всей ширине, кнопка прижата к правому краю.
   На средних экранах уводим меню левее, оставляя кнопке место. */
@media (max-width: 1180px) and (min-width: 769px) {
  .pill-nav {
    left: 40px;
    transform: none;
  }
}

/* Варианты ответа — такие же карточки, как выбор в начале. Стандартный
   список радиокнопок мелкий, слипшийся и набран капсом: в него неудобно
   попадать пальцем и тяжело читать. Селектор по разметке Django:
   контейнер с id вида id_q_<группа>, внутри по div на вариант. */
.wizard [id^="id_q_"] {
  display: grid;
  gap: 10px;
}

.wizard [id^="id_q_"] > div {
  margin: 0;
}

.wizard [id^="id_q_"] label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border: 1px solid rgba(252, 250, 248, 0.25);
  border-radius: 2px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  color: var(--oat);
  min-height: 44px;
  transition: border-color 0.3s var(--ease-soft), background 0.3s var(--ease-soft);
}

.wizard [id^="id_q_"] label:hover {
  border-color: var(--terra);
}

.wizard [id^="id_q_"] label:has(input:checked) {
  border-color: var(--terra);
  background: rgba(152, 134, 113, 0.18);
}

.wizard [id^="id_q_"] input {
  /* Размер задаётся явно: в гибком контейнере кружок схлопывался
     в ноль, и выбранный вариант читался только по цвету рамки */
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 18px;
  accent-color: var(--terra);
}

/* Поля ввода в тёмной секции: базовый стиль задаёт тёмный текст,
   на тёмном фоне он не читался. Фон у поля прозрачный, поэтому
   достаточно переопределить цвет и линию. */
.process .lead-form input[type="text"],
.process .lead-form input[type="tel"],
.process .lead-form input[type="email"],
.process .lead-form input[type="date"],
.process .lead-form textarea {
  color: var(--oat);
  border-bottom-color: rgba(252, 250, 248, 0.3);
}

.process .lead-form input:focus,
.process .lead-form textarea:focus {
  border-bottom-color: var(--terra);
}

.process .lead-form label {
  color: var(--oat-deep);
}

/* Пояснение к способу связи, у которого нет своего поля ввода */
.delivery-hint {
  margin-top: 20px;
  padding: 18px 20px;
  border-left: 2px solid var(--terra);
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--oat-deep);
}


/* ═══════ ЭКРАН ПОСЛЕ ОТПРАВКИ ═══════
   Первое, что человек ищет глазами, — дошло обращение или нет. Раньше
   на него сразу вываливался список подбора, а строка о том, что вообще
   произошло, терялась среди него. */

.result-status {
  padding: 24px 28px;
  margin-bottom: 40px;
  border-left: 2px solid var(--terra);
  background: rgba(217, 108, 74, 0.10);
}

/* Неудача отличается не только словами: цвет замечают раньше текста */
.result-status--fail {
  border-left-width: 4px;
  border-left-color: #C2452D;
  background: rgba(194, 69, 45, 0.22);
}

.result-status .lookbook-title {
  margin: 0 0 12px;
}

/* Не .hero-desc: там ширина 380 px и появление по анимации — для главной
   строки экрана и то и другое лишнее */
.result-note a {
  border-bottom: 1px solid rgba(217, 108, 74, 0.7);
  white-space: nowrap;
}

.result-note {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(252, 250, 248, 0.86);
}

/* Кнопка раскрытия работает без скрипта: details/summary. Если JS
   не загрузился, результат всё равно можно открыть */
/* Обе кнопки экрана — одного размера. Ширина по длине надписи давала
   две разные плашки одна под другой, и это читалось как небрежность */
.result-reveal > summary,
.result-actions .cta-link {
  display: inline-block;
  box-sizing: border-box;
  min-width: 300px;
  max-width: 100%;
  min-height: 56px;
  padding: 19px 24px;
  line-height: 18px;
  border: 1px solid var(--terra);
  color: var(--oat);
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  list-style: none;
  transition: background 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}

.result-reveal > summary:hover,
.result-actions .cta-link:hover {
  background: var(--terra);
  color: var(--ink);
}

.result-reveal > summary::-webkit-details-marker { display: none; }
.result-reveal > summary::marker { content: ''; }

.reveal-hide { display: none; }
.result-reveal[open] .reveal-show { display: none; }
.result-reveal[open] .reveal-hide { display: inline; }

.result-body {
  padding-top: 24px;
}

.result-lead {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(252, 250, 248, 0.62);
}

/* Позиции подбора — список, а не таблица характеристик. Названия
   шли моноширинным капсом (стиль строки «ОБЪЁМ — 50 мл»), и длинное
   «сыворотка с гиалуроновой кислотой» читалось по буквам */
.result-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.result-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(252, 250, 248, 0.14);
}

.result-item-name {
  display: block;
  font-size: 17px;
  line-height: 1.5;
  color: var(--oat);
}

.result-item-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid rgba(217, 108, 74, 0.7);
}

.result-item-note {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(252, 250, 248, 0.62);
}

/* Цена свёрстана для светлой карточки товара: на тёмной секции
   чернильный цвет пропадал совсем */
.process .price-value {
  color: var(--oat);
}

.result-heading {
  margin: 32px 0 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.result-actions {
  margin-top: 16px;
}

.result-actions .cta-link::after { content: none; }


/* Позиции подбора свёрстаны для светлой страницы товара: там у описания
   цвет чернил. На тёмной секции оно становилось невидимым */
.process .product-spec {
  border-bottom-color: rgba(252, 250, 248, 0.14);
}

.process .product-spec dd {
  color: rgba(252, 250, 248, 0.86);
}

.process .price-note {
  color: rgba(252, 250, 248, 0.62);
}

/* Поле-ловушка для роботов. Убрано за край экрана, а не спрятано
   display:none — робот проверяет видимость и обходит спрятанное */
.lovushka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Хлебные крошки. Мелкие и неброские: это указатель, а не украшение */
.crumbs {
  max-width: 1180px;
  margin: 0 auto;
  /* Меню висит фиксированным поверх страницы и занимает 20–78 px.
     Крошки шли под ним: на широком экране их спасал зазор в 44 px,
     но он исчезал при ширине окна меньше 1193 px и на длинной цепочке
     «услуги → категория → услуга». Отступ убирает столкновение
     при любой ширине */
  padding: 96px 24px 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs li + li::before {
  content: "→";
  margin-right: 8px;
  opacity: 0.45;
}

.crumbs a {
  color: inherit;
  opacity: 0.65;
}

.crumbs a:hover {
  opacity: 1;
}

.crumbs [aria-current="page"] {
  opacity: 0.45;
}

/* Карта: место под неё занято до загрузки, чтобы страница не прыгала */
.map-holder {
  margin: 32px 0;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: var(--oat-deep, #efe9e3);
  border-radius: 2px;
}

.map-holder iframe {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
}

.route-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Пометка черновика. Заметная намеренно: страницу с невычитанным
   медицинским текстом нельзя спутать с опубликованной.
   Липкая и поверх шапки: меню сайта висит фиксированным поверх
   страницы и накрывало предупреждение — при прокрутке длинного
   описания человек забывал, что читает черновик */
.draft-mark {
  position: sticky;
  top: 0;
  z-index: 1100;
  margin: 0;
  padding: 12px 24px;
  background: var(--terra);
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ═══════ ПЕЧАТЬ ═══════
   Сведения об организации и прайс по карточкам F-04 и F-07 должны
   печататься на A4: их распечатывают для уголка потребителя и по
   запросу проверяющего. Без этих правил на бумагу уходят меню,
   кнопки и тёмные заливки — половина листа чёрная, текста не видно */
@media print {
  :root {
    --ink: #000;
    --ink-muted: #333;
    --oat: #fff;
    --oat-deep: #fff;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.45;
  }

  .canvas-section,
  .process,
  .process-inner {
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  /* На бумаге бесполезно: нажать нельзя */
  header nav,
  .site-header,
  .mobile-bar,
  .a11y-toggle,
  .a11y-panel,
  .cookie-banner,
  .lead-form,
  .crumbs,
  .map-holder,
  .cta-link,
  button,
  video,
  .draft-mark {
    display: none !important;
  }

  /* Адрес ссылки на бумаге не виден — печатаем его рядом.
     Это важно для скана лицензии и образца договора */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  h1, h2, h3 {
    page-break-after: avoid;
    color: #000 !important;
  }

  /* Строку прайса нельзя разрывать между листами: цена уедет
     от названия процедуры, и лист станет бесполезен */
  .price-row,
  .product-spec,
  tr {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  @page {
    size: A4;
    margin: 15mm;
  }
}


/* Полоса вычитки: видна только сотруднику на черновике */
.approve-bar {
  /* Отступ сверху уводит кнопку из-под фиксированного меню */
  padding: 88px 24px 20px;
  background: var(--oat-deep, #efe9e3);
  border-bottom: 1px solid var(--ink-faint);
  text-align: center;
}

.approve-bar form {
  margin: 0 0 10px;
}

.approve-why {
  margin: 0 auto;
  max-width: 640px;
  font-size: 14px;
  color: var(--ink-muted);
  text-align: left;
}

/* Дата занимала всю строку: «ДД.ММ.ГГГГ» слева, значок календаря
   у правого края, между ними полоса пустоты в полэкрана. Дате
   столько места не нужно */
.lead-form input[type="date"] {
  max-width: 260px;
}

/* Поля в этой вёрстке — подчёркивания, а не рамки. Прямоугольник
   вокруг поля выглядел чужеродно, поэтому фокус показываем тем же
   языком: линия снизу вдвое толще и подсветка поля.

   Селекторы с .process перечислены отдельно намеренно: в тёмной секции
   у полей своя, более сильная пара правил, и без этого линия фокуса
   оставалась бледной — на тёмном фоне её просто не видно */
.lead-form input:focus-visible,
.lead-form textarea:focus-visible,
.process .lead-form input:focus-visible,
.process .lead-form textarea:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--focus);
  background: var(--terra-ghost);
}


/* Полоса «Черновик» лежит поверх всего, и меню с кнопкой доступности
   уходили под неё верхними двадцатью пикселями. Когда полоса есть,
   опускаем всё, что висит фиксированным, на её высоту */
body.s-polosoy-chernovika .pill-nav {
  top: 63px;
}

body.s-polosoy-chernovika .a11y-toggle {
  top: 59px;
}

body.s-polosoy-chernovika .a11y-panel {
  top: 111px;
}

/* ═══════ ЦЕНА И ПОМЕТКА В ПЕРЕЧНЕ ═══════
   Голоса берём у шаблона: цена — антиквой терракотой, как .product-price;
   пометка черновика — мелким моно, как .timeline-step. Своих форм
   и заливок не вводим */
/* Обёртка задаёт только отступы: сама цена, единица и примечание
   свёрстаны тегом цены и одинаковы на всём сайте */
.timeline-price {
  margin: 12px 0 16px;
}

.timeline-heading a {
  color: inherit;
}

/* ═══════ ПРАЙС ═══════
   Весь перечень живёт в одной ячейке сетки: заголовки разделов
   и строки, положенные в .process-inner подряд, сетка раскидывала
   по колонкам вперемешку */
.price-group {
  margin-bottom: 48px;
}

.price-group-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--oat);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(252, 250, 248, 0.2);
}

.price-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px 24px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(252, 250, 248, 0.08);
}

.price-name {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--oat);
}

.price-name a {
  color: inherit;
}

.price-value-cell {
  white-space: nowrap;
}

/* Пояснение к цене зажималось в узкую колонку цены и лезло в шесть
   строк. Ему место под всей строкой */
.price-row .price-note {
  grid-column: 1 / -1;
  margin-top: 6px;
}

.draft-note {
  margin-left: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}


/* ═══════ КАРТОЧКА ПРОЦЕДУРЫ НА ДОРОЖКЕ ═══════
   Рамка повторяет карточку-картинку шаблона: та же скруглённость,
   та же белая окантовка и тень. Фотографий у процедур пока нет,
   поэтому внутри текст — но снаружи это тот же объект */
.service-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  width: 340px;
  min-height: 320px;
  padding: 32px;
  background: var(--white);
  border: 10px solid var(--white);
  border-radius: 32px;
  box-shadow: 0 8px 40px rgba(26, 23, 20, 0.06);
}

.service-tile-eyebrow {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 14px;
}

.service-tile-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 10px;
}

/* Название — главная ссылка карточки. Строкой в 30 px пальцем
   попадают мимо, поэтому на телефоне она занимает всю ширину
   и добирает высоту отступами */
.service-tile-name a {
  display: block;
  color: inherit;
}

.service-tile-desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-muted);
}

.service-tile-price {
  margin-bottom: 12px;
}

.service-tile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

/* Вступление к каталогу: заголовок и объяснение, без слайдера */
.lookbook--intro {
  min-height: auto;
  padding: 100px 0 40px;
}

.lookbook-lead {
  max-width: 560px;
  padding: 0 64px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-muted);
}

/* Разделов пять, и каждый во весь экран — это пять экранов пустоты.
   Группе хватает своей высоты */
.lookbook--group {
  min-height: auto;
  padding: 40px 0 60px;
}

/* Стрелка, которой некуда вести, гаснет */
.lookbook-arrow[disabled] {
  opacity: 0.3;
  cursor: default;
}

/* ═══════ ТЕЛЕФОН: ШАПКА И ДЕЙСТВИЯ ═══════
   Кнопка «Для слабовидящих» занимала 183 px из 375 — половину верхней
   полосы у каждого посетителя ради функции для немногих. На узком
   экране остаётся значок, слово прячется */
.a11y-icon {
  display: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* Название клиники в шапке: на телефоне не было ни логотипа, ни
   названия — человек открывал сайт и не понимал, куда попал */
.mobile-brand {
  display: none;
  position: fixed;
  top: 16px;
  left: 72px;
  z-index: 140;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--ink);
  min-height: 44px;
  align-items: center;
}

/* Запись и телефон в меню: за этим его чаще всего и открывают */
.mobile-nav-action {
  color: var(--terra) !important;
}

/* В контрастных темах значок должен оставаться видимым */
html[data-a11y-contrast="black"].a11y .mobile-brand,
html[data-a11y-contrast="yellow"].a11y .mobile-brand {
  color: inherit;
}

/* Пустой раздел занимал целый экран со стрелками, которым нечего
   листать. Пока процедуры не опубликованы, ему хватает строки */
.lookbook--empty {
  min-height: auto;
  padding: 24px 0;
}

.lookbook--empty .lookbook-header {
  margin-bottom: 8px;
}

/* Счётчик у длинного названия раздела ломался на две строки
   и выглядел обрывком */
.lookbook-count {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═══════ КАТАЛОГ: РАСКРЫВАЮЩИЕСЯ РАЗДЕЛЫ ═══════
   Раздел раскрывается по нажатию и показывает свои процедуры с ценами.
   Отдельной страницы прайса больше нет: она дублировала этот же
   перечень и путала — где смотреть цену, было непонятно */
.catalog {
  background: var(--oat);
  min-height: auto;
  padding: 40px 0 80px;
}

.catalog-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
}

.catalog-head {
  margin-bottom: 40px;
}

.catalog-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 16px;
}

.catalog-lead {
  max-width: 620px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-muted);
}

.catalog-group {
  border-top: 1px solid var(--ink-faint);
}

.catalog-group:last-of-type {
  border-bottom: 1px solid var(--ink-faint);
}

.catalog-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}

/* Стрелку браузера прячем: у нас своя, она поворачивается */
.catalog-summary::-webkit-details-marker { display: none; }

.catalog-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
  color: var(--ink);
}

.catalog-name::after {
  content: '＋';
  margin-left: 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  color: var(--terra);
}

.catalog-group[open] .catalog-name::after {
  content: '−';
}

.catalog-count {
  flex-shrink: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

.catalog-body {
  padding-bottom: 16px;
}

.catalog-note {
  max-width: 620px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-muted);
}

.usluga {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 24px 40px;
  padding: 22px 0;
  border-top: 1px solid rgba(26, 23, 20, 0.08);
}

.usluga-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 6px;
}

.usluga-name a { color: inherit; }

.usluga-desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-muted);
}

.usluga-time {
  margin-top: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terra);
}

/* Название варианта и цена. Без названия у одной процедуры видно
   четыре цены подряд и непонятно, за что какая: «Шея», «Лицо»,
   «Лицо и шея» — это разные объёмы работы, а не разные процедуры */
.ceny {
  margin-bottom: 4px;
}

.cena {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 5px 0;
}

.cena dt {
  font-size: 14px;
  font-weight: 300;
  color: var(--ink-muted);
}

.cena dd {
  text-align: right;
  white-space: nowrap;
}

/* Примечание к цене — под всей строкой, а не в её правой половине */
.cena .price-note {
  white-space: normal;
  text-align: left;
}

.usluga-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
}

/* ═══════ СТРАНИЦА ЗАПИСИ ═══════ */
.zapis-facts {
  margin-top: 32px;
}

.zapis-page .process-inner {
  align-items: start;
}

/* ═══════ ВРАЧ В СПИСКЕ ═══════
   Страница показывала имя и должность — за этим сюда не заходят.
   Человек выбирает врача по образованию, опыту и тому, как тот говорит */
/* Две колонки только когда есть фотография. Без неё текст попадал
   в колонку, оставленную под снимок, и сжимался до 185 px —
   образование читалось лесенкой по три слова */
.vrach-card {
  max-width: 720px;
}

.vrach-card--foto {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: start;
  max-width: none;
}

.vrach-photo img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
}

.vrach-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 10px;
}

.vrach-card + .vrach-card {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--ink-faint);
}

.vrach-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 12px;
}

.vrach-name a { color: inherit; }

.vrach-line {
  font-size: 14px;
  font-weight: 300;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.vrach-education {
  margin: 14px 0 20px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-muted);
}

.vrach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

/* ═══════════════════════════════════════════════
   СТРАНИЦА ВРАЧА
   ═══════════════════════════════════════════════

   Секция product, на которой страница стояла раньше, рассчитана
   на карточку товара: снимок во всю высоту экрана и четыре строки
   характеристик рядом. Рассказ врача в ней превращался в простыню
   кеглем 13 во всю высоту фотографии, а под блоком оставалось
   полэкрана пустоты.

   Меры взяты у шаблона: оправа портрета — как у карточки лукбука,
   подписи — product-spec, кегль и интерлиньяж текста — product-desc.
*/
.vrach {
  background: var(--oat);
  min-height: auto;
  padding: 48px 0 90px;
}

.vrach-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Верх: портрет и главное о враче рядом */
.vrach-top {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 64px;
}

/* Оправа как у карточки лукбука: скруглённость, белое поле, тень.
   Раньше снимок упирался в край окна, а текст рядом имел поля —
   композиция валилась влево */
.vrach-portret {
  margin: 0;
}

.vrach-portret img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border: 10px solid var(--white);
  border-radius: 32px;
  box-shadow: 0 8px 40px rgba(26, 23, 20, 0.06);
}

.vrach-specialnost {
  margin: 8px 0 28px;
  font-size: 16px;
  font-weight: 300;
  color: var(--ink-muted);
}

.vrach-glavnoe .product-specs {
  margin-bottom: 28px;
}

.vrach-zapis {
  margin: 0;
}

/* Текст: колонка в 620 px — около семидесяти знаков в строке.
   Шире глаз теряет начало следующей строки */
.vrach-tekst {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 72px;
  align-items: start;
}

.vrach-rasskaz {
  max-width: 620px;
}

.vrach-rasskaz p {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-soft);
}

.vrach-blok + .vrach-blok {
  margin-top: 32px;
}

.vrach-podpis {
  margin-bottom: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
}

/* Сведения читались лесенкой по три слова: кегль 14 в колонке 320 px.
   Ступень образования — это одно предложение, оно должно ложиться
   в две-три строки, а не в шесть */
.vrach-spisok p {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-muted);
}

/* Несколько врачей на странице — отделяем друг от друга */
.vrach-zapis-o + .vrach-zapis-o {
  margin-top: 72px;
  padding-top: 72px;
  border-top: 1px solid var(--ink-faint);
}

/* Блок подбора на главной. Секция растянута на всю высоту экрана,
   и четыре абзаца врозь смотрелись как пустой чёрный экран */
.podbor-blok {
  min-height: auto;
  padding: 80px 0;
}

.podbor-knopka {
  margin: 28px 0 14px;
}

/* Предупреждение по ФЗ-38 ст. 24 в блоке подбора: обычным читаемым
   кеглем, а не серым восьмым. Как только блок уйдёт в таргет,
   он станет рекламой без оговорок */
.podbor-preduprezhdenie {
  max-width: 340px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-faint);
}

/* ═══════ ПОДВАЛ ═══════
   Верхняя часть — готовый блок шаблона: фоновое слово, метка,
   заголовок антиквой, почта курсивом. Нижняя полоса — служебное:
   ссылки, реквизиты и обязательное предупреждение.

   Раньше подвал был свёрстан классом signature-inner, которого
   в стилях нет вовсе: получалась голая колонка у левого края,
   а четыре ссылки слипались в одну строку без разделителей */
.signature {
  min-height: auto;
  padding: 64px 24px 0;
  flex-direction: column;
}

/* padding: 40px из шаблона снизу давал лишнюю пустоту: там под ним
   не было служебной полосы, а у нас есть */
.signature-content {
  max-width: 560px;
  padding: 0;
}

/* В шаблоне метка — короткое «The Ivory Flow», и разрядка 0.4em
   держит его в строку. Русское «Клиника медицинской косметологии»
   втрое длиннее: с той же разрядкой оно ломалось надвое и лезло
   в глаза сильнее заголовка. Метка служебная — её место тише */
.signature-mark {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  margin-bottom: 20px;
}

.signature-heading {
  margin-bottom: 16px;
}

.signature-text {
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 24px;
}

/* Телефон стоял бледно-серым моноширинным в 13 пунктов — самый
   незаметный элемент подвала, хотя это главный способ связи.
   Иерархия была перевёрнута: украшение кричало, дело шептало */
.signature-phone {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 2px;
}

.signature-phone a {
  color: inherit;
  transition: color 0.4s var(--ease-soft);
}

.signature-phone a:hover {
  color: var(--terra);
}

/* Почтовый адрес — техническая строка, её читают по буквам
   и копируют. Курсив антиквой в 24 пункта был украшательством
   не по делу и спорил с телефоном за первое место */
.signature-email {
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  margin-bottom: 26px;
}

.signature-links {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

/* Карточки на картах — тише соцсетей: это не канал связи,
   а место, где оставляют отзыв */
.signature-karty {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  margin-top: 22px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.signature-karty a {
  color: inherit;
}

.signature-karty a:hover {
  color: var(--terra);
}

/* Служебная полоса внизу */
.podval-niz {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1060px;
  margin: 36px auto 0;
  padding: 24px 0 30px;
  border-top: 1px solid var(--ink-faint);
  text-align: center;
}

/* Ссылки слипались в сплошную строку: «Сведения об организации Статьи
   Политика обработки данных Файлы cookie» читалось как одно предложение */
.podval-ssylki {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 300;
}

.podval-ssylki a {
  color: var(--ink-soft);
  padding: 4px 0;
}

.podval-ssylki a:hover {
  color: var(--terra);
}

.podval-rekvizity,
.podval-preduprezhdenie {
  margin: 0 auto 8px;
  max-width: 720px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-faint);
}

/* ═══════ ЗНАЧОК КАЛЕНДАРЯ ═══════
   Форма записи стоит на тёмной секции, а браузер рисует значок
   чернильным — чёрный на чёрном.

   Здесь важнее надёжность нажатия, чем красота: родной значок
   оставлен на месте и виден. Попытка спрятать его и нарисовать свой
   фоном закончилась тем, что календарь перестал открываться —
   невидимый родной значок стоял левее нарисованного, и нажатие
   уходило в пустоту.

   Цвет: color-scheme говорит браузеру, что поле на тёмном, и он
   сам рисует значок белым. Но одного этого мало — сборки, которые
   color-scheme не слушают, оставляют значок чёрным.

   Отсюда порядок в filter: сперва brightness(0) — он гасит любой
   исходный цвет в чёрный, и только потом invert(1) делает из чёрного
   белый. Так значок выходит белым и когда браузер отдал его чёрным,
   и когда уже отдал белым. Одного invert(1) мало: с color-scheme
   браузер отдаёт значок белым, и invert перекрашивал его обратно
   в чёрный — ровно то, что было видно на тёмном поле. */
.lead-form input[type="date"] {
  color-scheme: dark;
}

.lead-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(1);
  opacity: 0.9;
  cursor: pointer;
  padding: 4px;
  margin-right: 0;
}

html[data-a11y-contrast="yellow"].a11y .lead-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(0.9) sepia(1) saturate(8) hue-rotate(5deg);
}

/* ═══════ ПОЛЕ ВЫБОРА ВРЕМЕНИ ═══════
   fieldset и legend браузер рисует по умолчанию: рамка вокруг группы
   и подпись, разрывающая эту рамку сверху. В вёрстке, где поля —
   подчёркивания, это выглядит чужой коробкой из другого сайта */
.lead-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
  min-width: 0;
}

.lead-form legend {
  padding: 0;
  margin-bottom: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.process .lead-form legend {
  color: var(--oat-deep);
}

/* Пояснение под группой прижималось к следующей подписи вплотную */
.lead-form fieldset + .price-note {
  margin-bottom: 26px;
}

/* ═══════ ДОКУМЕНТЫ И СТАТЬИ ═══════
   Политика, cookie, статьи — сплошной текст, его читают, а не
   разглядывают. Раньше он стоял на тёмной секции process в правой
   половине экрана: левая пустовала ради одного заголовка, а текст,
   покрашенный --ink-soft (тёмный цвет для светлого фона), лёг тёмным
   по тёмному. Владелец 11.09.2026: «основной текст на чёрном фоне
   тёмным цветом, экран разделён пополам, одна половина почти пустая».

   Теперь светлая секция и одна колонка. Меры взяты у страницы врача,
   которую владелец принял: поле --oat, колонка около 70 знаков при
   обязательных 17 px. */

.dokument {
  background: var(--oat);
  color: var(--ink);
  min-height: auto;
  padding: 56px 24px 96px;
}

.dokument-inner {
  max-width: 680px;
  margin: 0 auto;
}

.dokument-zagolovok {
  margin: 0 0 28px;
  text-wrap: balance;
}

.dokument-data {
  margin: 0 0 40px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

/* Разделы: антиква, как у заголовков сайта, и тонкая линия сверху —
   в длинном тексте глазу нужно на что-то опираться */
.dokument-tekst h2,
.dokument-inner > h2 {
  margin: 44px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--oat-deep);
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}

.dokument-tekst h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.dokument-tekst p {
  margin: 0 0 16px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.dokument-tekst strong {
  font-weight: 600;
  color: var(--ink);
}

.dokument-tekst a {
  color: var(--terra);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Статья: вводный абзац крупнее, подпись автора тише */
.dokument-vvod {
  margin: 0 0 20px;
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.dokument-avtor {
  margin: 0 0 40px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.dokument-avtor a {
  color: var(--ink);
}