/* =========================================================
   Клиника Подология — лендинг
   Палитра взята из интерьера клиник: белые кабинеты,
   живые мховые панели, зелёно-синий знак бренда.
   ========================================================= */

:root{
  /* цвет */
  --ink:        #0E2019;   /* мшисто-чёрный, основной текст */
  --ink-70:     #3C5147;
  --ink-50:     #64786E;
  --paper:      #FFFFFF;
  --moss-50:    #F1F7F1;   /* бледный мох — фоновые полосы */
  --moss-100:   #E2EEE3;
  --line:       #D9E4DA;
  --line-soft:  #EAF1EA;
  --green:      #2FA84A;   /* действие */
  --green-700:  #1E8438;
  --forest:     #0E3D29;   /* тёмная полоса */
  --blue:       #1668DC;   /* только служебные сигналы */

  /* тень — зелёная, не серая */
  --lift:   0 1px 2px rgba(14,32,25,.05), 0 14px 34px -22px rgba(14,32,25,.35);
  --lift-l: 0 2px 4px rgba(14,32,25,.05), 0 40px 80px -48px rgba(14,32,25,.45);

  /* ритм: шаг 4px, как требует 8pt-сетка */
  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px;
  --wrap: 1180px;
  --gut: 24px;
  --sec: clamp(68px, 8vw, 116px);

  /* шрифт */
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Literata", Georgia, "Times New Roman", serif;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
button{ font:inherit; color:inherit }
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.022em; line-height:1.12 }
p{ margin:0 }
ul,ol,dl,dd{ margin:0; padding:0 }
li{ list-style:none }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0 }

/* Фокус — один контур, а не два.
   Отступ 3px рисовал кольцо поверх собственной рамки поля,
   а border-radius:4px спорил с радиусом элемента. */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2.5px solid var(--green);
  outline-offset:2px;
}
/* флажок согласия рисуем кольцом вплотную */
.consent input:focus-visible{ outline:2.5px solid var(--green); outline-offset:2px }

/* ---------------- кнопки ---------------- */
.btn{
  --bg:var(--green); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--bg); color:var(--fg);
  border:1.5px solid var(--bd);
  padding:15px 26px;
  border-radius:11px;
  font-weight:600; font-size:16px; line-height:1.2;
  text-decoration:none; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn--green{ --bg:var(--green); --fg:#fff }
.btn--green:hover{ --bg:var(--green-700) }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line) }
.btn--ghost:hover{ --bd:var(--ink); --bg:transparent }
.btn--dark{ --bg:var(--ink); --fg:#fff }
.btn--dark:hover{ --bg:var(--forest) }
.btn--sm{ padding:11px 18px; font-size:15px; border-radius:9px }
.btn--block{ display:flex; width:100% }
.btn:active{ transform:translateY(1px) }

/* ---------------- шапка ---------------- */
.hdr{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.hdr.is-stuck{ border-bottom-color:var(--line); box-shadow:0 10px 30px -26px rgba(14,32,25,.6) }
.hdr__in{ display:flex; align-items:center; gap:28px; min-height:74px }
.hdr__logo{ flex:0 0 auto; display:block }
.hdr__logo img{ width:154px; height:auto }

.hdr__nav{ display:flex; gap:24px; margin-inline-start:6px }
.hdr__link{
  text-decoration:none; font-size:15.5px; font-weight:500; color:var(--ink-70);
  padding-block:6px; border-bottom:1.5px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
.hdr__link:hover{ color:var(--ink); border-bottom-color:var(--green) }

.hdr__side{ display:flex; align-items:center; gap:14px; margin-inline-start:auto }
.hdr__tel{ text-decoration:none; font-weight:600; font-size:16px; white-space:nowrap }
.hdr__tel:hover{ color:var(--green-700) }

.burger{
  display:none; width:44px; height:44px; border:1.5px solid var(--line);
  border-radius:10px; background:#fff; cursor:pointer; position:relative;
}
.burger__bars, .burger__bars::before, .burger__bars::after{
  position:absolute; left:50%; width:18px; height:1.8px; background:var(--ink);
  border-radius:2px; transform:translateX(-50%); transition:transform .22s ease, opacity .18s ease;
}
.burger__bars{ top:50%; margin-top:-.9px }
.burger__bars::before{ content:""; top:-6px }
.burger__bars::after{ content:""; top:6px }
.burger[aria-expanded="true"] .burger__bars{ background:transparent }
.burger[aria-expanded="true"] .burger__bars::before{ transform:translateX(-50%) translateY(6px) rotate(45deg) }
.burger[aria-expanded="true"] .burger__bars::after{ transform:translateX(-50%) translateY(-6px) rotate(-45deg) }

.mnav{ border-top:1px solid var(--line); background:#fff; padding:14px 0 22px }
.mnav .wrap{ display:flex; flex-direction:column; gap:2px }
.mnav__link{
  text-decoration:none; font-size:18px; font-weight:500; padding:13px 0;
  border-bottom:1px solid var(--line-soft);
}
.mnav__cta{ margin-top:16px }

.mnav__link--svc{ color:var(--ink-70); font-size:16.5px }

/* ---------------- статус «сейчас работаем» ---------------- */
.status{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14.5px; font-weight:600; color:var(--green-700);
  background:#fff; border:1px solid var(--moss-100);
  padding:7px 14px 7px 11px; border-radius:999px;
}
.status__dot{
  width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 4px rgba(47,168,74,.18);
}
.status--hdr{ padding:5px 12px 5px 10px; font-size:13.6px; background:var(--moss-50); border-color:var(--moss-100) }

/* ---------------- заголовки секций ---------------- */
.sec__head{ max-width:62ch; margin-bottom:clamp(34px,4vw,54px) }
.sec__h{ font-size:clamp(1.8rem,1.1rem + 2.3vw,2.85rem); font-weight:700; letter-spacing:-.03em; line-height:1.07 }
.sec__h--light{ color:#fff }
.sec__lead{
  margin-top:16px;
  font-family:var(--serif);
  font-size:1.08rem; line-height:1.66; color:var(--ink-70);
}
.sec__lead--light{ color:rgba(255,255,255,.78) }

/* ---------------- хлебные крошки ---------------- */
.crumbs{ display:flex; gap:9px; align-items:center; font-size:14.2px; color:var(--ink-50); margin-bottom:26px; flex-wrap:wrap }
.crumbs a{ color:var(--ink-50); text-decoration:none; border-bottom:1px solid var(--line) }
.crumbs a:hover{ color:var(--ink); border-bottom-color:var(--ink-50) }
.crumbs__sep{ color:var(--line) }

/* ---------------- первый экран ---------------- */
.hero{ padding:clamp(34px,4vw,56px) 0 clamp(30px,3.2vw,50px); background:linear-gradient(180deg,var(--moss-50),#fff 78%) }
.hero__top{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(30px,4vw,60px); align-items:center }
.hero__h1{ font-size:clamp(2.05rem,1.15rem + 3.1vw,3.45rem); letter-spacing:-.033em; line-height:1.06; max-width:17ch }
.hero__sub{
  margin-top:20px; font-family:var(--serif);
  font-size:clamp(1.08rem,1rem + .4vw,1.26rem); line-height:1.6; color:var(--ink-70); max-width:40ch;
}
.hero__cta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:12px }
.hero__pic{ overflow:hidden; border-radius:20px; background:var(--moss-100); box-shadow:var(--lift) }
.hero__pic img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3 }

.badges{ margin-top:clamp(30px,3.4vw,46px); display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden }
.badge{ background:#fff; padding:18px 22px; display:flex; flex-direction:column; gap:3px }
.badge__k{ font-weight:700; font-size:1.06rem; letter-spacing:-.018em }
.badge__v{ font-size:14.6px; color:var(--ink-50) }
.badge:first-child .badge__k{ color:var(--green-700) }

/* ---------------- клиника подологии — это ---------------- */
.about{ padding:clamp(52px,6vw,88px) 0 var(--sec); background:var(--paper) }
.about__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden }
.apt{ background:#fff; padding:30px 28px 32px; display:flex; flex-direction:column }
.apt--wide{ grid-column:span 2 }
.apt__h{ font-size:1.16rem; font-weight:700; letter-spacing:-.02em; line-height:1.28 }
.apt__p{ margin-top:12px; font-size:15.5px; color:var(--ink-70); line-height:1.6 }
.apt__list{ margin-top:16px; display:grid; gap:10px }
.apt__list li{ position:relative; padding-left:25px; font-size:15.4px; color:var(--ink-70) }
.apt__list li::before{
  content:""; position:absolute; left:3px; top:.6em;
  width:9px; height:5px; border-left:1.8px solid var(--green); border-bottom:1.8px solid var(--green);
  transform:rotate(-45deg);
}
.apt--laser{ grid-column:span 1; background:var(--forest); color:#fff }
.apt--laser .apt__h{ color:#fff; margin-top:18px }
.apt--laser .apt__p{ color:rgba(255,255,255,.78) }
.apt__note{ margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.18); font-size:14.4px; color:rgba(255,255,255,.66) }
.apt__pic{ margin:-30px -28px 0; background:#fff }
.apt__pic img{ width:100%; height:auto }

/* ---------------- блок записи (повторяется трижды) ---------------- */
.cta{ padding:var(--sec) 0; background:var(--ink); color:#fff }
.cta__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.88fr); gap:clamp(34px,5vw,72px); align-items:start }
.cta__h{ font-size:clamp(1.7rem,1.05rem + 2.1vw,2.5rem); font-weight:700; letter-spacing:-.03em; line-height:1.1 }
.cta__promo{
  margin-top:20px; display:inline-block; align-self:flex-start;
  background:var(--green); color:#fff; font-weight:700; font-size:15.4px; letter-spacing:.01em;
  padding:10px 18px; border-radius:10px;
}
.cta__fine{ margin-top:12px; font-size:13.4px; color:rgba(255,255,255,.55) }
.cta__lead{ margin-top:22px; font-family:var(--serif); font-size:1.06rem; line-height:1.64; color:rgba(255,255,255,.76); max-width:40ch }
.cta__tel{ display:inline-block; margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.16); color:#fff; font-size:1.4rem; font-weight:700; text-decoration:none; letter-spacing:-.02em }
.cta__text{ display:flex; flex-direction:column; align-items:flex-start }

.form{ background:#fff; color:var(--ink); border-radius:22px; padding:clamp(24px,2.6vw,34px); position:relative }
.field{ margin-bottom:16px }
.field label{ display:block; font-size:14px; color:var(--ink-50); margin-bottom:7px }
.field input{
  width:100%; font:inherit; font-size:16.5px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:11px;
  padding:13px 15px; transition:border-color .16s ease;
}
.field input:hover{ border-color:var(--ink-50) }
/* фокус — один контур: рамка поля зеленеет, вокруг мягкое кольцо.
   Должен стоять после :hover — специфичность та же, решает порядок. */
.field input:focus-visible{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(47,168,74,.22);
}
.field input::placeholder{ color:#A8B5AD }
.field.is-bad input{ border-color:#C3362B }
.field__err{ margin-top:6px; font-size:13.5px; color:#C3362B }

.consent{ display:flex; gap:11px; align-items:flex-start; margin:4px 0 20px; font-size:13.5px; color:var(--ink-50); line-height:1.5 }
.consent input{ margin-top:2px; width:17px; height:17px; accent-color:var(--green); flex:0 0 auto }
.consent a{ color:var(--ink-70) }
.form__fine{ margin-top:14px; font-size:13px; color:var(--ink-50); text-align:center; line-height:1.5 }

.form__ok{
  position:absolute; inset:0; background:#fff; border-radius:22px;
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  padding:clamp(28px,3vw,42px); text-align:center;
}
.form__ok[hidden]{ display:none }
.form__ok-h{ font-size:1.5rem; font-weight:700; letter-spacing:-.025em; color:var(--green-700) }
.form__ok p{ color:var(--ink-70); font-size:15.5px }

/* ---------------- направления ---------------- */
.dirs{ padding:var(--sec) 0; background:var(--moss-50) }
.dirs__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.dgroup{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 24px 28px }
.dgroup__h{ font-size:13.4px; font-weight:700; color:var(--ink-50); margin-bottom:16px }
.dgroup__list{ display:grid; gap:11px }
.dgroup__list li{ font-size:1.04rem; font-weight:500; letter-spacing:-.012em }
.dgroup__list a{ text-decoration:none; border-bottom:1.5px solid rgba(47,168,74,.3); padding-bottom:1px; transition:border-color .16s ease }
.dgroup__list a:hover{ border-bottom-color:var(--green-700); color:var(--green-700) }
.dgroup__list span{ color:var(--ink-70) }

/* ---------------- врач ---------------- */
.doc{ padding:var(--sec) 0 0; background:var(--paper); overflow:hidden }
.doc__grid{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(28px,4vw,64px); align-items:end }
.doc__media{
  position:relative; align-self:end;
  background:linear-gradient(180deg, var(--moss-50), var(--moss-100));
  border-radius:24px 24px 0 0;
}
.doc__media img{ width:100%; max-width:420px; margin-inline:auto; filter:drop-shadow(0 22px 34px rgba(14,32,25,.16)) }
.doc__text{ padding-bottom:clamp(56px,6vw,88px) }
.doc__statH{ margin-top:30px; font-size:15.4px; font-weight:600; color:var(--ink) }
.doc__stat{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px }
.doc__stat li{
  background:var(--moss-50); border:1px solid var(--moss-100); border-radius:999px;
  padding:7px 15px; font-size:14.6px; color:var(--ink-70);
}
.doc__facts{ margin-top:26px; display:grid; gap:12px }
.doc__facts li{ position:relative; padding-left:26px; font-size:15.5px; color:var(--ink-70) }
.doc__facts li::before{
  content:""; position:absolute; left:4px; top:.62em;
  width:9px; height:5px; border-left:1.8px solid var(--green); border-bottom:1.8px solid var(--green);
  transform:rotate(-45deg);
}
.doc__text .btn{ margin-top:30px }

/* ---------------- диагностика и гарантия ---------------- */
.diag{ padding:var(--sec) 0; background:var(--forest); color:#fff }
.diag__two{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3vw,44px) }
.diag__col{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
  border-radius:20px; padding:30px 28px 32px;
}
.diag__h{ font-size:1.16rem; font-weight:700; letter-spacing:-.02em; line-height:1.3 }
.diag__p{ margin-top:12px; font-size:15.4px; color:rgba(255,255,255,.74); line-height:1.6 }
.diag__list{ margin-top:16px; display:grid; gap:10px }
.diag__list li{ position:relative; padding-left:25px; font-size:15.4px; color:rgba(255,255,255,.8) }
.diag__list li::before{
  content:""; position:absolute; left:3px; top:.6em;
  width:9px; height:5px; border-left:1.8px solid var(--green); border-bottom:1.8px solid var(--green);
  transform:rotate(-45deg);
}
.diag__pic{ margin-top:22px; border-radius:14px; overflow:hidden }
.diag__pic img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover }

.diag__cardsH{ margin:clamp(36px,4vw,56px) 0 20px; font-size:1.3rem; font-weight:700; letter-spacing:-.025em }
.diag__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start }
.dcard{ background:#fff; color:var(--ink); border-radius:18px; padding:26px 24px 28px; overflow:hidden }
.dcard__pic{ margin:-26px -24px 20px; background:var(--line-soft) }
.dcard__pic img{ width:100%; height:auto; aspect-ratio:16/10; max-height:230px; object-fit:cover; object-position:center top }
.dcard__h{ font-size:1.1rem; font-weight:700; letter-spacing:-.02em; line-height:1.3 }
.dcard__p{ margin-top:11px; font-size:15.3px; color:var(--ink-70) }
.dcard__list{ margin-top:14px; display:grid; gap:9px }
.dcard__list li{ position:relative; padding-left:24px; font-size:15.2px; color:var(--ink-70) }
.dcard__list li::before{
  content:""; position:absolute; left:3px; top:.6em;
  width:9px; height:5px; border-left:1.8px solid var(--green); border-bottom:1.8px solid var(--green);
  transform:rotate(-45deg);
}

/* ---------------- забота ---------------- */
.care{ padding:var(--sec) 0; background:var(--paper) }
.care__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden }
.care__item{ background:#fff; padding:28px 24px 30px }
.care__h{ font-size:1.1rem; font-weight:700; letter-spacing:-.02em; line-height:1.3 }
.care__p{ margin-top:11px; font-size:15.3px; color:var(--ink-70) }
.care__list{ margin-top:14px; display:grid; gap:8px }
.care__list li{ position:relative; padding-left:24px; font-size:15.2px; color:var(--ink-70) }
.care__list li::before{
  content:""; position:absolute; left:3px; top:.6em;
  width:9px; height:5px; border-left:1.8px solid var(--green); border-bottom:1.8px solid var(--green);
  transform:rotate(-45deg);
}

/* ---------------- галерея клиник ---------------- */
.gal{ padding:var(--sec) 0; background:var(--moss-50) }
.gal__head{ max-width:62ch; margin-bottom:clamp(24px,3vw,38px) }
.gal__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(132px,15.5vw,210px); gap:14px;
}
.gal__i{ overflow:hidden; border-radius:14px; background:var(--moss-100) }
.gal__i img{ display:block; width:100%; height:100%; object-fit:cover }
.gal__i--big{ grid-column:span 6; grid-row:span 2 }
.gal__i--q{ grid-column:span 3 }
.gal__i--t{ grid-column:span 4 }
.gal__i--p{ grid-column:span 5 }
.gal__note{ margin-top:20px; font-size:14.4px; color:var(--ink-50) }

/* ---------------- клиники ---------------- */
.clinics{ padding:var(--sec) 0; background:var(--paper) }
.clinics__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.clinic{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:24px 22px 22px; display:flex; flex-direction:column; gap:7px;
}
.clinic__metro{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:1.08rem; letter-spacing:-.015em }
.dot{ width:11px; height:11px; border-radius:50%; background:var(--ml,var(--line)); flex:0 0 auto }
.clinic__addr{ font-size:15.3px; color:var(--ink-70); flex:1 }
.clinic__lab{ margin-top:10px; font-size:13.2px; color:var(--ink-50) }
.clinic__tel{ font-weight:600; text-decoration:none; font-size:16px }
.clinic__tel:hover{ color:var(--green-700) }
.clinic__map{ margin-top:6px; font-size:14.5px; color:var(--blue); text-decoration:none; border-bottom:1px solid rgba(22,104,220,.3); align-self:flex-start }
.clinic__map:hover{ border-bottom-color:var(--blue) }

/* ---------------- подарок ---------------- */
.gift{ padding:0 0 var(--sec); background:var(--paper) }
.gift__in{
  background:var(--moss-50); border:1px solid var(--moss-100); border-radius:22px;
  padding:clamp(30px,3.4vw,46px);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(22px,3vw,44px); align-items:center;
}
.gift__h{ font-size:clamp(1.35rem,1rem + 1.3vw,1.9rem); font-weight:700; letter-spacing:-.025em; line-height:1.18; max-width:28ch }
.gift__p{ margin-top:12px; font-size:15.6px; color:var(--ink-70) }
.gift__fine{ margin-top:10px; font-size:13.2px; color:var(--ink-50) }
.btn--lg{ padding:18px 30px; font-size:16.5px; border-radius:13px }

/* ---------------- подвал ---------------- */
.ftr{ padding:clamp(48px,5vw,70px) 0 34px; background:var(--paper); border-top:1px solid var(--line) }
.ftr__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:34px }
.ftr__brand img{ width:168px }
.ftr__brand p{ margin-top:16px; font-size:14.8px; color:var(--ink-50); max-width:36ch }
.ftr__tel{ display:inline-block; margin-top:14px; font-weight:700; font-size:1.18rem; text-decoration:none }
.ftr__ch{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px }
.ftr__ch a{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 15px 6px 9px; border:1px solid var(--line); border-radius:999px;
  font-size:14px; color:var(--ink-70); text-decoration:none;
  transition:border-color .16s ease, color .16s ease;
}
.ftr__ch img{ width:20px; height:20px; flex:0 0 auto }
.ftr__ch a:hover{ border-color:var(--green); color:var(--green-700) }
.ftr__col{ display:flex; flex-direction:column; gap:9px }
.ftr__h{ font-size:14px; font-weight:700; color:var(--ink); margin-bottom:5px }
.ftr__col a{ font-size:14.8px; color:var(--ink-50); text-decoration:none }
.ftr__col a:hover{ color:var(--green-700) }
.ftr__legal{
  margin-top:40px; padding-top:22px; border-top:1px solid var(--line-soft);
  font-size:12.6px; color:#8A988F; line-height:1.6; max-width:96ch;
}

/* ---------------- мобильная панель ---------------- */
.callbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:95;
  gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.callbar__btn{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:14px; border-radius:11px; font-weight:600; font-size:16px; text-decoration:none;
}
.callbar__btn--green{ background:var(--green); color:#fff }
.callbar__btn--ghost{ border:1.5px solid var(--line); color:var(--ink) }

/* =========================================================
   адаптив
   ========================================================= */
@media (max-width:1180px){
  .about__grid{ grid-template-columns:repeat(2,1fr) }
  .apt--wide{ grid-column:span 2 }
  .apt--laser{ grid-column:span 2 }
  .care__grid{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:1080px){
  .hdr__nav{ display:none }
  .hdr__in{ gap:16px }
  .burger{ display:block }
  .status--hdr{ display:none }
  .dirs__grid{ grid-template-columns:1fr }
  .clinics__grid{ grid-template-columns:repeat(2,1fr) }
  .diag__cards{ grid-template-columns:1fr }
  .ftr__grid{ grid-template-columns:repeat(2,1fr); gap:30px }
}

@media (max-width:980px){
  .gal__grid{ grid-auto-rows:clamp(118px,19vw,168px); gap:11px }
  .gal__i--big{ grid-column:span 12; grid-row:span 2 }
  .gal__i--q,.gal__i--t,.gal__i--p{ grid-column:span 6 }
}

@media (max-width:900px){
  .hero__top{ grid-template-columns:1fr; gap:28px }
  .hero__h1{ max-width:20ch }
  .hero__pic img{ aspect-ratio:16/9 }
  .badges{ grid-template-columns:1fr }
  .diag__two{ grid-template-columns:1fr }
  .doc__grid{ grid-template-columns:1fr; align-items:start }
  .doc__media{ max-width:340px; order:2; border-radius:20px 20px 0 0 }
  .doc__text{ order:1; padding-bottom:36px }
  .cta__grid{ grid-template-columns:1fr }
  .gift__in{ grid-template-columns:1fr }
  .gift__in .btn{ width:100% }
}

@media (max-width:860px){
  .hdr__tel{ display:none }
  .callbar{ display:flex }
  body{ padding-bottom:78px }
}

@media (max-width:620px){
  :root{ --gut:18px }
  body{ font-size:16.5px }
  .hdr__in{ min-height:64px }
  .hdr__logo img{ width:132px }
  .hdr__side .btn--sm{ display:none }
  .about__grid{ grid-template-columns:1fr }
  .apt--wide,.apt--laser{ grid-column:span 1 }
  .care__grid{ grid-template-columns:1fr }
  .clinics__grid{ grid-template-columns:1fr }
  .ftr__grid{ grid-template-columns:1fr }
  .form{ border-radius:18px }
  .form__ok{ border-radius:18px }
  .doc__media{ max-width:100% }
  .gal__grid{ grid-auto-rows:146px; gap:9px }
  .gal__i--big{ grid-row:span 2 }
  .hero__cta .btn{ width:100% }
}

/* якорные переходы не должны заезжать под липкую шапку */
#about,#dirs,#doctor,#diag,#care,#gallery,#contacts,#gift,
#cta1,#cta2,#cta3{ scroll-margin-top:92px }
@media (max-width:620px){
  #about,#dirs,#doctor,#diag,#care,#gallery,#contacts,#gift,
  #cta1,#cta2,#cta3{ scroll-margin-top:78px }
}

/* меню открыто — страница не скроллится */
body.is-locked{ overflow:hidden }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* на боевом сайте это подпись без ссылки — политики как страницы нет */
.ftr__plain{ font-size:14.8px; color:var(--ink-50) }

/* ---------------- страница с документом ---------------- */
.legal{ padding:clamp(30px,4vw,54px) 0 var(--sec); background:var(--paper) }
.legal__wrap{ max-width:820px }
.legal__h1{ font-size:clamp(1.75rem,1.15rem + 2.1vw,2.6rem); letter-spacing:-.03em; line-height:1.1 }
.legal__lead{
  margin-top:18px; font-family:var(--serif);
  font-size:1.1rem; line-height:1.66; color:var(--ink-70);
}

.legal__toc{
  margin:clamp(30px,3.4vw,44px) 0; padding:24px 26px 26px;
  background:var(--moss-50); border:1px solid var(--moss-100); border-radius:16px;
}
.legal__tocH{ font-size:13.4px; font-weight:700; color:var(--ink-50); margin-bottom:14px }
.legal__toc ol{ counter-reset:toc; display:grid; gap:9px }
.legal__toc li{ counter-increment:toc; position:relative; padding-left:28px; font-size:15.6px }
.legal__toc li::before{
  content:counter(toc) "."; position:absolute; left:0; top:0;
  font-variant-numeric:tabular-nums; color:var(--ink-50); font-size:14.6px;
}
.legal__toc a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line) }
.legal__toc a:hover{ border-bottom-color:var(--green); color:var(--green-700) }

.legal__sec{ margin-top:clamp(32px,3.6vw,46px); scroll-margin-top:96px }
.legal__h2{ font-size:clamp(1.15rem,1rem + .7vw,1.42rem); letter-spacing:-.022em; line-height:1.25 }
.legal__sec p{ margin-top:14px; font-size:16.4px; line-height:1.68; color:var(--ink-70) }
.legal__sec p a{ color:var(--ink); font-weight:600 }
.legal__list{ margin-top:14px; display:grid; gap:10px }
.legal__list li{ position:relative; padding-left:26px; font-size:16.2px; line-height:1.62; color:var(--ink-70) }
.legal__list li::before{
  content:""; position:absolute; left:4px; top:.66em;
  width:9px; height:5px; border-left:1.8px solid var(--green); border-bottom:1.8px solid var(--green);
  transform:rotate(-45deg);
}

/* пропуски, которые заполняет клиника — видно сразу */
.todo{
  background:#FFF3D6; border-bottom:1.5px dashed #C98A12;
  padding:1px 2px; border-radius:3px; color:#7A5208; font-weight:500;
}
.todo::before{ content:"◆ "; color:#C98A12 }

.legal__date{
  margin-top:clamp(36px,4vw,52px); padding-top:22px;
  border-top:1px solid var(--line-soft); font-size:14.6px; color:var(--ink-50);
}

@media (max-width:620px){
  .legal__toc{ padding:20px 20px 22px }
  .legal__sec{ scroll-margin-top:80px }
}

/* =========================================================
   РОВНАЯ СЕТКА
   Причина прежних перекосов: фотография стояла в одной
   карточке из трёх. Теперь у всех карточек ряда одинаковое
   устройство, а фото — всегда одной пропорции.
   ========================================================= */

/* заголовки не оставляют висячее слово на последней строке */
h1,h2,h3,.sec__h,.apt__h,.dcard__h,.care__h,.diag__h{ text-wrap:balance }

/* фотография внутри карточки */
.cpic{ overflow:hidden; border-radius:12px; background:var(--moss-100) }
.cpic img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; max-height:240px }
/* прижата к низу карточки — так низы всех карточек ряда совпадают */
.cpic--push{ margin-top:auto; padding-top:var(--s6) }
.cpic--push img{ border-radius:12px }
.cpic--push{ border-radius:0; background:none; overflow:visible }
/* в край карточки, сверху */
.cpic--flush{ margin:calc(var(--s7) * -1) calc(var(--s7) * -1) var(--s5); border-radius:0; background:var(--line-soft) }
.cpic--flush img{ aspect-ratio:16/10 }

/* ---- «Клиника Подологии — это:» — четыре равные карточки ---- */
.about__grid{ grid-template-columns:repeat(2,1fr) }
.apt{ padding:var(--s7) var(--s7) calc(var(--s7) + var(--s2)) }

/* ---- полоса с аппаратом ---- */
.laser{ padding:0 0 var(--sec); background:var(--paper) }
.laser__grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,3.4vw,56px); align-items:center;
  background:var(--forest); color:#fff; border-radius:22px; overflow:hidden;
}
.laser__pic{ align-self:stretch; background:#fff }
.laser__pic img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3 }
.laser__text{ padding:clamp(28px,3.4vw,48px) clamp(28px,3.4vw,48px) clamp(28px,3.4vw,48px) 0 }
.laser__h{ font-size:clamp(1.3rem,1.05rem + 1.1vw,1.85rem); letter-spacing:-.025em; line-height:1.18 }
.laser__lead{ margin-top:var(--s3); font-size:16px; color:rgba(255,255,255,.76); line-height:1.6 }
.laser__spec{ margin-top:var(--s6); padding-top:var(--s6); border-top:1px solid rgba(255,255,255,.18) }
.laser__name{ font-weight:700; font-size:1.06rem; letter-spacing:-.018em }
.laser__p{ margin-top:var(--s2); font-size:15.4px; color:rgba(255,255,255,.76) }
.laser__note{ margin-top:var(--s3); font-size:14.4px; color:rgba(255,255,255,.6) }

/* ---- направления: фото в каждой из трёх карточек ---- */
.dgroup{ display:flex; flex-direction:column; padding:var(--s6) var(--s6) var(--s7); overflow:hidden }
.dgroup .cpic{ margin:calc(var(--s6) * -1) calc(var(--s6) * -1) var(--s5); border-radius:0 }
.dgroup__list{ margin-top:auto }

/* ---- диагностика ---- */
.diag__col{ display:flex; flex-direction:column; padding:var(--s7) }
.diag__cards{ align-items:stretch }
.dcard{ display:flex; flex-direction:column; padding:var(--s7) }
.dcard__list,.dcard__p{ margin-bottom:0 }

/* ---- две фотографии под блоком заботы ---- */
.cmedia{
  margin-top:clamp(24px,3vw,40px);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,28px);
}
.cmedia__i{ margin:0; display:flex; flex-direction:column }
.cmedia__pic{ overflow:hidden; border-radius:16px; background:var(--moss-50) }
.cmedia__pic img{ display:block; width:100%; height:100%; aspect-ratio:4/3 }
.cmedia__pic--cover img{ object-fit:cover }
.cmedia__pic--contain img{ object-fit:contain; padding:var(--s5) }
.cmedia__i figcaption{ margin-top:var(--s3); font-size:14.4px; line-height:1.55; color:var(--ink-50) }

@media (max-width:900px){
  .laser__grid{ grid-template-columns:1fr; gap:0 }
  .laser__pic img{ aspect-ratio:16/9 }
  .laser__text{ padding:clamp(24px,3vw,36px) }
  .cmedia{ grid-template-columns:1fr }
}
@media (max-width:620px){
  .about__grid{ grid-template-columns:1fr }
  .cpic--flush{ margin:calc(var(--s6) * -1) calc(var(--s6) * -1) var(--s4) }
  .apt,.diag__col,.dcard{ padding:var(--s6) }
}

/* Документы — не пейзаж: обрезка в широкую полосу делает их нечитаемыми.
   Показываем целиком на подложке, короб остаётся той же высоты. */
.diag__cards .cpic{ background:var(--line-soft) }
.diag__cards .cpic img{ object-fit:contain; padding:var(--s4) }

/* =========================================================
   ФОКУС БЕЗ ДВОЙНОЙ РАМКИ
   У элемента с собственной видимой рамкой кольцо с отступом
   читается как второй контур. Поэтому там индикатор — сама
   рамка: она зеленеет, вокруг мягкое кольцо вплотную.
   Блок стоит последним: у :hover та же специфичность,
   решает порядок.
   ========================================================= */
.btn--ghost:focus-visible,
.callbar__btn--ghost:focus-visible,
.burger:focus-visible{
  outline:none;
  --bd:var(--green);
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(47,168,74,.22);
}
/* по зелёной кнопке зелёное кольцо почти не читается:
   все сплошные зелёные кнопки стоят на светлом, поэтому берём тёмное */
.btn--green:focus-visible,
.callbar__btn--green:focus-visible{ outline-color:var(--ink) }

/* На тач-экране цель должна быть не меньше 44 px.
   Плашки мессенджеров и ссылки подвала были 36 и ~23 px. */
@media (max-width:860px){
  .ftr__ch a{ min-height:44px }
  .ftr__col a{ padding-block:10px }
  .ftr__col{ gap:0 }
}

/* ---------------- отправка заявки ---------------- */
/* ловушка для ботов: убрана из потока, но не display:none —
   часть роботов пропускает скрытые таким образом поля */
.trap{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.form__fail{
  margin-top:var(--s3); padding:11px 14px;
  background:#FDECEA; border:1px solid #F3C4BF; border-radius:10px;
  font-size:14.2px; line-height:1.5; color:#8E2B20;
}
.form__fail[hidden]{ display:none }
.form .btn[disabled]{ opacity:.65; cursor:progress }