/* ============================================================
   PRO SPORT MASSAGE — вёрстка по макету
   Центр спортивного восстановления и движения
   ============================================================ */

/* ---------- Переменные ---------- */
:root{
  --teal:        #1F9187;
  --teal-photo:  #1F9187;   /* бирюза с фотографии первого экрана */
  --teal-2:      #1A8478;
  --teal-3:      #146F66;
  --ink:         #17292A;
  --muted:       #5E6E6D;
  --line:        #E1E7E6;
  --soft:        #EEF2F2;
  --white:       #FFFFFF;
  --radius:      4px;
  --container:   1180px;
  --header-h:    76px;
  --font-head:   'Onest','Inter','Segoe UI',system-ui,Arial,sans-serif;
  --font-body:   'Onest','Inter','Segoe UI',system-ui,Arial,sans-serif;
}

/* ---------- Сброс ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{margin:0;font-family:var(--font-head);font-weight:700;line-height:1.08;letter-spacing:-.02em;}
p{margin:0;}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-head);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:14px;
  padding:13px 26px;
  border:2px solid transparent;
  border-radius:var(--radius);
  transition:.2s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--teal);color:#fff;border-color:var(--teal);}
.btn-primary:hover{background:var(--teal-2);border-color:var(--teal-2);}
.btn-white{background:#fff;color:var(--teal);border-color:#fff;}
.btn-white:hover{background:transparent;color:#fff;}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);}
.btn-outline-light:hover{background:#fff;color:var(--teal);border-color:#fff;}
.btn-outline-teal{background:transparent;color:var(--teal);border-color:var(--teal);}
.btn-outline-teal:hover{background:var(--teal);color:#fff;}
.btn-sm{font-size:12px;padding:9px 18px;letter-spacing:.05em;}

/* ---------- Декоративный слой: геометрия и белые линии ---------- */
.deco{
  position:absolute;inset:0;
  pointer-events:none;overflow:hidden;z-index:0;
}
.deco svg{position:absolute;display:block;}
.deco .l-tl{top:-4%;left:-6%;width:60%;}
.deco .l-tr{top:-8%;right:-4%;width:52%;}
.deco .l-bl{bottom:-10%;left:-8%;width:58%;}
.deco .l-br{bottom:-6%;right:-6%;width:46%;}
.deco .l-mid{top:16%;left:24%;width:64%;}

/* штрих-полосы (как «дорожки» в логотипе) */
.bars{position:absolute;display:flex;flex-direction:column;gap:9px;pointer-events:none;}
.bars i{display:block;height:7px;background:currentColor;opacity:.5;
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);}
.bars i:nth-child(1){width:150px;}
.bars i:nth-child(2){width:200px;margin-left:-34px;}
.bars i:nth-child(3){width:120px;margin-left:-68px;}

/* ---------- Плейсхолдеры фото ---------- */
.ph{
  position:relative;
  background:
    linear-gradient(135deg,#cfd9d8 0%,#e7edec 55%,#d7e0df 100%);
  overflow:hidden;
}
.ph::after{
  content:attr(data-label);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);
  text-transform:uppercase;letter-spacing:.12em;
  font-size:12px;color:#8fa1a0;
  text-align:center;padding:8px;
}
.ph--dark{background:linear-gradient(135deg,#2b3a3a,#48595a 60%,#33413f);}
.ph--dark::after{color:#9fb0ae;}

/* ============================================================
   ШАПКА
   ============================================================ */
.header{
  position:sticky;top:0;z-index:50;
  background:#fff;
  border-bottom:1px solid var(--line);
}
/* шапка во всю ширину экрана: логотип у левого края, кнопка у правого.
   Отступ 28px — «безопасное поле», чтобы элементы не липли к краю (UX). */
.header__inner{
  height:var(--header-h);
  display:flex;align-items:center;gap:32px;
  width:100%;max-width:none;
  padding:0 28px;
}
.logo{display:flex;align-items:center;gap:12px;line-height:1;flex:0 0 auto;}
.logo__mark{height:46px;width:auto;flex:0 0 auto;}
.logo__text{display:flex;flex-direction:column;gap:4px;}
.logo__sub{
  font-size:10px;letter-spacing:.07em;color:var(--muted);
  text-transform:uppercase;
}
.logo__name{
  font-family:var(--font-head);font-weight:700;
  font-size:20px;letter-spacing:.02em;color:var(--teal);
  text-transform:uppercase;line-height:1;
}
/* в подвале — белым */
.logo--footer .logo__mark{height:56px;}
.logo--footer .logo__sub{color:rgba(255,255,255,.75);}
.logo--footer .logo__name{color:#fff;}
.nav{display:flex;gap:26px;margin-left:auto;}
.nav a{
  font-size:15px;color:var(--ink);font-weight:700;
  transition:color .2s;
white-space:nowrap;}
.nav a:hover{color:var(--teal);}
.header .btn{margin-left:4px;}
.burger{
  display:none;margin-left:auto;
  width:44px;height:44px;border:none;background:transparent;
  flex-direction:column;justify-content:center;gap:5px;
}
.burger span{display:block;height:2px;width:24px;background:var(--ink);margin:0 auto;transition:.2s;}

/* ============================================================
   ГЕРОЙ
   ============================================================ */
.hero{
  position:relative;
  background:var(--teal-photo);
  color:#fff;
  overflow:hidden;
}
.hero__inner{
  position:relative;z-index:2;
  min-height:600px;
  display:flex;align-items:center;
}
.hero__content{padding:70px 0;max-width:560px;}
.hero__kicker{
  font-family:var(--font-head);text-transform:uppercase;
  letter-spacing:.1em;font-size:15px;font-weight:500;
  color:rgba(255,255,255,.85);margin-bottom:22px;
}
.hero h1{
  text-transform:uppercase;
  font-size:36px;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.02em;
  margin-bottom:12px;
}
.hero__by{
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:13px;
  font-weight:500;
  line-height:1.45;
  color:rgba(255,255,255,.88);
  max-width:520px;
  margin-bottom:26px;
}
.hero__lead{
  font-size:18px;color:rgba(255,255,255,.92);
  max-width:440px;margin-bottom:36px;line-height:1.5;
}
/* кнопки в столбик, как в макете */
.hero__actions{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;margin-bottom:40px;
}
.hero__actions .btn{padding:15px 34px;font-size:15px;min-width:250px;}
.hero__tags{
  font-family:var(--font-head);text-transform:uppercase;
  letter-spacing:.06em;font-size:15px;color:rgba(255,255,255,.85);
}
/* Фотография первого экрана.
   Занимает правую часть баннера; своя бирюза у неё та же, что у секции,
   поэтому слева она незаметно продолжается фоном. Поверх — заливка
   этим же цветом, чтобы текст читался и не налезал на массажиста. */
.hero__photo{
  position:absolute;z-index:1;top:0;bottom:0;right:0;
  width:56%;pointer-events:none;
}
.hero__photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:right center;
}
/* Левый край кадра растушёвываем в бирюзу секции — стыка не видно. */
.hero__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    var(--teal-photo) 0%,
    rgba(31,145,135,.92) 5%,
    rgba(31,145,135,.35) 13%,
    rgba(31,145,135,0)   24%);
}

/* ============================================================
   УСЛУГИ
   ============================================================ */
.section{position:relative;padding:70px 0;overflow:hidden;}
.section > .container{position:relative;z-index:2;}
.section--soft{background:var(--soft);}
.section__head{text-align:center;margin-bottom:42px;}
.section__head h2{
  text-transform:uppercase;font-size:34px;letter-spacing:.03em;
}
.section__head .kicker{
  display:inline-block;color:var(--teal);font-family:var(--font-head);
  text-transform:uppercase;letter-spacing:.14em;font-size:13px;
  margin-bottom:10px;
}

.services-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:26px;
}
.service-card{
  border:1px solid var(--line);
  background:#fff;
  padding:0 0 24px;
  display:flex;flex-direction:column;
}
/* фото с диагональными зелёными клиньями — оформление из макета */
.service-card__media{
  position:relative;aspect-ratio:16/10;height:auto;
  background:var(--soft);overflow:hidden;
}
/* клин в левом верхнем углу */
.service-card__media::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:var(--teal);
  clip-path:polygon(0 0, 16% 0, 0 38%);
}
/* большой клин справа */
.service-card__media::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:var(--teal);
  clip-path:polygon(76% 0, 100% 0, 100% 100%, 91% 100%);
}
.service-card__media .ph{position:absolute;inset:0;}
.service-card__media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.service-card:hover .service-card__media img{transform:scale(1.04);}
.service-card__body{padding:22px 26px 0;}
.service-card h3{
  text-transform:uppercase;font-size:22px;margin-bottom:8px;
}
.service-card p{color:var(--muted);font-size:15px;margin-bottom:18px;}

/* ============================================================
   О НАС — по макету: фото на бирюзе, текст на белой фигуре
   со скошенным краем, справа анатомическая фигура
   ============================================================ */
.about{position:relative;background:var(--teal);color:#fff;overflow:hidden;}
.about__inner{
  position:relative;z-index:2;padding:74px 0;
  display:grid;grid-template-columns:1.02fr .9fr .28fr;align-items:center;
}
/* фото стоит прямо на бирюзе, без белой подложки */
.about__photo{position:relative;z-index:2;aspect-ratio:1021/821;}
.about__photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:grayscale(1) contrast(1.06);
}
/* белая фигура под текстом: правый край срезан по диагонали */
.about__text{
  position:relative;z-index:1;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;
  background:#fff;color:var(--ink);
  padding:46px 92px 46px 46px;
  margin-left:-1px;
  clip-path:polygon(0 0, 100% 0, 82% 100%, 0 100%);
}
.about__kicker{
  font-family:var(--font-head);text-transform:uppercase;
  letter-spacing:.16em;font-size:13px;color:var(--muted);margin-bottom:14px;
}
.about h2{text-transform:uppercase;font-size:34px;line-height:1.1;margin-bottom:18px;color:var(--ink);}
.about p{color:var(--muted);font-size:16px;}
/* анатомическая фигура — в бирюзовом поле справа */
.about__figure{
  position:absolute;right:4%;top:56%;transform:translateY(-50%);
  height:58%;width:auto;opacity:.85;z-index:1;pointer-events:none;
  display:block;
  /* низ растворяем: в исходнике у фигуры срезаны стопы,
     мягкий сход выглядит задуманным, а обрубок — нет */
  -webkit-mask-image:linear-gradient(to bottom, #000 74%, transparent 99%);
          mask-image:linear-gradient(to bottom, #000 74%, transparent 99%);
}
.about__figure img{height:100%;width:auto;display:block;}
.about__dots{position:absolute;left:1.5%;top:16%;width:120px;opacity:.75;}

/* ============================================================
   СПЕЦИАЛИСТЫ
   ============================================================ */
.specialists{position:relative;}
.spec-slider{position:relative;}
.spec-track{
  display:flex;gap:24px;overflow-x:auto;scroll-behavior:smooth;
  padding:6px 2px 14px;scrollbar-width:none;
}
.spec-track::-webkit-scrollbar{display:none;}
.spec-card{flex:0 0 210px;}
.spec-card__media{
  height:210px;position:relative;
  clip-path:polygon(0 0,100% 0,100% 88%,0 100%);
  background:var(--soft);
}
.spec-card__media .ph{position:absolute;inset:0;}
.spec-card h4{
  font-family:var(--font-head);text-transform:uppercase;
  font-size:17px;margin-top:16px;
}
.spec-card span{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.spec-card__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 18%;
}
.spec-slider--one .spec-track{
  justify-content:center;align-items:flex-start;
  gap:28px;overflow:visible;
}
.spec-card--one{flex:1 1 220px;max-width:320px;}
.spec-card--one .spec-card__media{
  height:auto;clip-path:none;
  padding:8px;border:2px solid var(--teal);border-radius:16px;
  background:#fff;
  box-shadow:0 10px 28px rgba(31,145,135,.12);
}
.spec-card--one .spec-card__media img{
  position:relative;inset:auto;
  width:100%;height:auto;aspect-ratio:3/4;
  object-fit:cover;object-position:center 22%;
  border-radius:10px;
}
.spec-card--one:first-child .spec-card__media img{object-position:center 38%;}
.spec-card--one span{
  display:block;margin-top:8px;
  text-transform:none;letter-spacing:0;
  font-size:15px;line-height:1.45;
}
.spec-arrow{
  position:absolute;top:38%;z-index:5;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--teal);
  display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.spec-arrow:hover{background:var(--teal);color:#fff;border-color:var(--teal);}
.spec-arrow--prev{left:-20px;}
.spec-arrow--next{right:-20px;}

/* ============================================================
   ЦЕНЫ
   ============================================================ */
.prices__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:26px;
}
.price-card{
  border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;
}
.price-card__head{
  background:var(--teal);color:#fff;
  padding:18px 26px 22px;
  clip-path:polygon(0 0,100% 0,100% 72%,0 100%);
}
.price-card__head h3{
  text-transform:uppercase;font-size:22px;letter-spacing:.02em;
}
.price-card__head span{
  display:block;font-size:13px;color:rgba(255,255,255,.85);margin-top:4px;
}
.price-list{list-style:none;margin:0;padding:16px 26px 24px;}
.price-list li{
  display:flex;align-items:baseline;gap:10px;
  padding:11px 0;border-bottom:1px dashed var(--line);
}
.price-list li:last-child{border-bottom:none;}
.price-list__name{font-size:15px;color:var(--ink);}
.price-list__name i{
  display:block;font-style:normal;font-size:12px;
  color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;
}
.price-list__dots{flex:1;border-bottom:1px dotted #C6D2D1;transform:translateY(-3px);}
.price-list__val{
  font-family:var(--font-head);font-weight:600;font-size:18px;
  color:var(--teal);white-space:nowrap;
}

/* абонементы */
.passes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px;}
.pass{
  border:1px solid var(--line);background:var(--soft);
  padding:22px 24px;position:relative;overflow:hidden;
}
.pass h4{
  font-family:var(--font-head);text-transform:uppercase;
  font-size:17px;margin-bottom:6px;
}
.pass p{font-size:14px;color:var(--muted);margin-bottom:14px;}
.pass__val{
  font-family:var(--font-head);font-weight:700;font-size:26px;color:var(--teal);
}
.pass__val small{font-size:13px;color:var(--muted);font-weight:400;margin-left:6px;}

.prices__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-top:34px;
}
.prices__note{font-size:14px;color:var(--muted);max-width:620px;}

/* ============================================================
   ПОДВАЛ
   ============================================================ */
.footer{position:relative;background:var(--teal);color:#fff;padding:56px 0 0;position:relative;overflow:hidden;}
.footer > .container{position:relative;z-index:2;}
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.3fr 1.4fr;
  gap:36px;
}
.footer h5{
  font-family:var(--font-head);text-transform:uppercase;
  font-size:14px;letter-spacing:.06em;margin:0 0 16px;color:#fff;
}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer ul a{color:rgba(255,255,255,.85);font-size:15px;}
.footer ul a:hover{color:#fff;text-decoration:underline;}
.contact-line{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.9);font-size:15px;margin-bottom:12px;}
.contact-line svg{flex:0 0 18px;margin-top:2px;fill:rgba(255,255,255,.9);}
.socials{display:flex;gap:14px;margin-top:18px;}
.socials a{width:34px;height:34px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.socials a:hover{background:#fff;}
.socials a:hover svg{fill:var(--teal);}
.socials svg{width:16px;height:16px;fill:#fff;}
.subscribe{margin-top:8px;}
.subscribe form{display:flex;margin-top:14px;max-width:280px;}
.subscribe input{
  flex:1;border:none;padding:12px 14px;font-family:inherit;font-size:14px;
  background:rgba(255,255,255,.14);color:#fff;border-radius:var(--radius) 0 0 var(--radius);
}
.subscribe input::placeholder{color:rgba(255,255,255,.6);}
.subscribe button{
  border:none;background:#fff;color:var(--teal);font-family:var(--font-head);
  text-transform:uppercase;font-weight:600;font-size:13px;padding:0 20px;
  border-radius:0 var(--radius) var(--radius) 0;
}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.2);margin-top:44px;
  padding:18px 0;text-align:center;font-size:13px;color:rgba(255,255,255,.7);
  text-transform:uppercase;letter-spacing:.04em;
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1240px){
  .hero__content{max-width:54%;}
  .hero h1{font-size:34px;}
  .header__inner{gap:20px;}
  .nav{gap:20px;}
  .nav a{font-size:14px;}
  .logo__mark{height:40px;}
  .logo__name{font-size:18px;}
}
@media (max-width:1100px){
  .hero h1{font-size:32px;}
  .hero__art{width:52%;}
}
@media (max-width:960px){
  .hero__inner{min-height:520px;}
  .hero h1{font-size:30px;}
  .hero__content{max-width:56%;}
  .hero__photo{width:62%;}
  .footer__grid{grid-template-columns:1fr 1fr;gap:30px;}
  .passes{grid-template-columns:1fr 1fr;}
  .about__inner{grid-template-columns:1fr;gap:30px;}
  .about__photo{min-height:280px;}
  .about__figure{display:none;}
}

/* Планшеты и всё, что уже: фотография переезжает под текст.
   Сбоку кадр пришлось бы резать так, что от массажиста остаётся торс. */
@media (max-width:1000px){
  .hero__inner{flex-direction:column;align-items:stretch;min-height:0;}
  .hero__content{max-width:100%;padding:56px 0 30px;}
  .hero__photo{position:relative;width:100%;height:360px;order:2;}
  .hero__photo img{object-position:center 28%;}
  .hero__photo::after{background:linear-gradient(180deg,
      var(--teal-photo) 0%, rgba(31,145,135,0) 10%);}
}

@media (max-width:760px){
  :root{--header-h:64px;}
  .nav,.header .btn{display:none;}
  .burger{display:flex;}
  .header.nav-open .nav{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:var(--header-h);left:0;right:0;
    background:#fff;border-bottom:1px solid var(--line);padding:8px 0;
  }
  .header.nav-open .nav a{padding:12px 24px;border-top:1px solid var(--line);}

  .hero__inner{flex-direction:column;min-height:0;align-items:stretch;}
  .hero__content{padding:36px 0 20px;max-width:100%;}
  /* длинное слово «ВОССТАНОВЛЕНИЕ» не должно вылезать за край */
  .hero h1{font-size:clamp(20px,5.4vw,28px);overflow-wrap:normal;}
  .hero__lead{font-size:16px;}
  .hero__actions .btn{flex:1;max-width:100%;white-space:normal;text-align:center;}
  .hero__photo{position:relative;width:100%;height:320px;order:2;}
  .hero__photo img{object-position:52% 26%;}
  .hero__photo::after{background:linear-gradient(180deg,
      var(--teal-photo) 0%, rgba(31,145,135,0) 9%);}

  .services-grid{grid-template-columns:1fr;gap:20px;}
  .prices__grid{grid-template-columns:1fr;gap:20px;}
  .passes{grid-template-columns:1fr;gap:14px;}
  .prices__foot .btn{width:100%;}
  .section{padding:48px 0;}
  .section__head h2,.about h2{font-size:28px;}
  .spec-card{flex-basis:60%;}
  .spec-arrow--prev{left:0;}
  .spec-arrow--next{right:0;}

  .footer__grid{grid-template-columns:1fr;gap:26px;}
}


/* ============================================================
   КВИЗ — место под будущий подбор услуги
   ============================================================ */
.quiz__box{
  position:relative;
  border:2px dashed var(--line);
  border-radius:var(--radius);
  background:var(--soft);
  padding:56px 40px;
  text-align:center;
}
.quiz__kicker{
  display:inline-block;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);font-weight:600;margin-bottom:10px;
}
.quiz__box h2{font-size:40px;margin-bottom:14px;}
.quiz__box p{max-width:620px;margin:0 auto;color:var(--muted);}
@media (max-width:640px){
  .quiz__box{padding:36px 20px;}
  .quiz__box h2{font-size:30px;}
}

/* ============================================================
   ПЕРВЫЙ ЭКРАН СТРАНИЦЫ ТРЕНИРОВОК — прежний вырезанный бегун.
   Главная живёт на .hero__photo, тренировки — на .hero__art,
   поэтому оба варианта спокойно уживаются в одном файле.
   ============================================================ */
.hero--runner .hero__content{max-width:640px;}
.hero__art{
  position:absolute;z-index:1;top:0;bottom:0;right:0;
  width:58%;pointer-events:none;
}
.hero__art img{
  position:absolute;right:-2%;bottom:-2%;
  height:104%;width:auto;max-width:none;
  object-fit:contain;object-position:right bottom;
  z-index:2;
}
/* белая плоскость — те же координаты, что у фигуры, но слоем ниже */
.hero__plane{
  position:absolute;right:-2%;bottom:-2%;
  height:104%;width:auto;max-width:none;
  z-index:1;overflow:visible;
}
/* линии движения — на всю площадь баннера, под фигурой */
.hero__tracks{position:absolute;inset:0;width:100%;height:100%;}

@media (max-width:1100px){
  .hero--runner .hero__content{max-width:56%;}
  .hero__art{width:50%;}
}
@media (max-width:1000px){
  .hero--runner .hero__content{max-width:100%;}
  .hero__art{position:relative;width:100%;height:330px;}
  .hero__art img{position:absolute;right:0;bottom:0;height:100%;}
}

/* ============================================================
   НОВОСТИ
   ============================================================ */
.news-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.news-card{
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.news-card__media{aspect-ratio:16/10;}
.news-card__media .ph{width:100%;height:100%;}
.news-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
.news-card__date{
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal);font-weight:600;margin-bottom:10px;
}
.news-card h3{font-size:20px;margin-bottom:10px;}
.news-card p{color:var(--muted);font-size:15px;margin-bottom:18px;}
.news-card__more{
  margin-top:auto;align-self:flex-start;
  font-weight:600;color:var(--teal);
  border-bottom:1px solid rgba(31,145,135,.35);padding-bottom:2px;
}
.news-card__more:hover{border-bottom-color:var(--teal);}
.news__foot{display:flex;justify-content:center;margin-top:38px;}

@media (max-width:1000px){
  .news-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
}
@media (max-width:640px){
  .news-grid{grid-template-columns:1fr;}
}


/* ============================================================
   КНОПКА «ПОЗВОНИТЬ» и номера филиалов под ней
   ============================================================ */
.callbox{position:relative;margin-left:-6px;}   /* промежуток такой же, как между пунктами меню */
/* Выглядит как обычный пункт меню: те же кегль, начертание и цвет */
.callbox__btn{
  display:inline-flex;align-items:center;
  padding:0;border:none;background:transparent;
  font-size:15px;color:var(--ink);font-weight:700;
  transition:color .2s;white-space:nowrap;
}
.callbox__btn svg{display:none;}
.callbox__btn:hover,
.callbox__btn[aria-expanded="true"]{color:var(--teal);}

.callbox__menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:60;
  min-width:250px;padding:6px;
  background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(23,41,42,.14);
}
.callbox__menu[hidden]{display:none;}
.callbox__menu a{
  display:block;padding:11px 14px;border-radius:var(--radius);
  transition:background .15s;
}
.callbox__menu a:hover{background:var(--soft);}
.callbox__menu b{
  display:block;font-family:var(--font-head);
  font-weight:600;font-size:17px;color:var(--ink);
}
.callbox__menu span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}

/* Телефон: кнопка сжимается до кружка с трубкой и встаёт рядом с меню —
   звонок на мобильном нужнее всего, прятать его в меню нельзя. */
@media (max-width:760px){
  .callbox{margin-left:auto;}
  .burger{margin-left:4px;}
  .callbox__btn{
    width:44px;height:44px;padding:0;justify-content:center;
    border:1px solid var(--teal);border-radius:var(--radius);color:var(--teal);
  }
  .callbox__btn span{display:none;}
  .callbox__btn svg{display:block;width:20px;height:20px;fill:currentColor;}
  .callbox__menu{min-width:230px;}
}

/* На узком экране в строку должны влезть логотип, звонок и меню */
@media (max-width:760px){
  .header__inner{gap:10px;}
  .logo__mark{height:34px;}
  .logo__name{font-size:16px;}
  .logo__sub{font-size:11px;letter-spacing:.06em;}
  .callbox__btn{width:40px;height:40px;}
  .burger{width:34px;}
}
@media (max-width:370px){
  .logo__name{font-size:15px;}
  .logo__sub{display:none;}
}

/* ============================================================
   НАПРАВЛЕНИЯ ЗАНЯТИЙ — три группы с раскрывающимся списком
   ============================================================ */
.tgroups{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start;}
.tgroup{
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.tgroup__head{
  display:flex;flex-direction:column;flex:1;
  padding:30px 28px;
}
.tgroup h3{font-size:23px;margin-bottom:12px;}
.tgroup__lead{color:var(--muted);font-size:15px;line-height:1.5;margin-bottom:22px;}
.tgroup__price{
  font-family:var(--font-head);font-weight:700;font-size:22px;
  line-height:1.3;margin-bottom:16px;
}
.tgroup__price span{
  font-size:14px;font-weight:400;color:var(--muted);margin-left:4px;
}
.tgroup--photo .tgroup__price{color:#fff;}
.tgroup--photo .tgroup__price span{color:rgba(255,255,255,.75);}
.tgroup__btn{
  align-self:flex-start;margin-top:auto;
  padding:10px 18px;
  border:1px solid var(--teal);background:transparent;
  font-family:var(--font-head);font-weight:600;font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--teal);border-radius:var(--radius);
  transition:background .2s,color .2s;
  display:inline-block;text-align:center;
}
.tgroup__btn:hover{background:var(--teal);color:#fff;}
.tgroup__btn[aria-expanded="true"]{background:var(--teal);color:#fff;}
.tgroup__list{
  list-style:none;margin:0;padding:22px 28px 26px;
  border-top:1px solid var(--line);
}
.tgroup__list[hidden]{display:none;}
.tgroup__list li{
  position:relative;padding-left:18px;margin-bottom:12px;
  font-size:15px;line-height:1.45;
}
.tgroup__list li:last-child{margin-bottom:0;}
.tgroup__list li::before{
  content:"";position:absolute;left:0;top:9px;
  width:7px;height:7px;border-radius:50%;background:var(--teal);
}

@media (max-width:1000px){
  .tgroups{grid-template-columns:1fr;gap:18px;}
  .tgroup__head{padding:26px 22px;}
  .tgroup__btn{width:100%;text-align:center;}
}

/* В ряд из трёх карточек заголовки и описания разной длины —
   задаём им запас по высоте, чтобы кнопки стояли на одной линии.
   В один столбец это не нужно, иначе появятся пустоты. */
@media (min-width:1001px){
  .tgroup h3{min-height:50px;}
  .tgroup__lead{min-height:90px;}  /* ровно четыре строки */
}

/* «О нас» на узких экранах: фото сверху, текст под ним, фигура уходит */
@media (max-width:1000px){
  .about__inner{grid-template-columns:1fr;padding:52px 0;}
  .about__text{
    clip-path:none;padding:34px 28px;margin-left:0;
    align-self:auto;
  }
  .about__figure,.about__dots{display:none;}
}

/* ============================================================
   УЗЛЫ ПО КРАЯМ СТРАНИЦЫ — точки с линиями, как на фигуре
   Цвет наследуется от раздела: на бирюзе белые, на светлом бирюзовые.
   ============================================================ */
.knots{
  position:absolute;width:190px;height:auto;
  pointer-events:none;z-index:0;opacity:.5;
  color:var(--teal);
}
.knots--tl{left:-40px;top:6%;}
.knots--tr{right:-40px;top:8%;}
.knots--bl{left:-30px;bottom:6%;}
.knots--br{right:-30px;bottom:6%;}
/* на тёмных участках — белые */
.footer .knots{color:#fff;opacity:.35;}
.trainings .knots,.quiz .knots,.specialists .knots,.news .knots{opacity:.4;}

@media (max-width:1000px){
  .knots{width:130px;opacity:.28;}
}
@media (max-width:760px){
  .knots{display:none;}
}

/* ============================================================
   ЗАЛ — снимки помещения
   ============================================================ */
.hall-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.hall-card{margin:0;}
.hall-card__media{
  aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radius);background:var(--soft);
}
.hall-card__media .ph,.hall-card__media img{width:100%;height:100%;object-fit:cover;}
.hall-card figcaption{
  margin-top:12px;font-size:15px;color:var(--muted);
}
@media (max-width:1000px){ .hall-grid{grid-template-columns:repeat(2,1fr);gap:18px;} }
@media (max-width:640px){ .hall-grid{grid-template-columns:1fr;} }

/* ============================================================
   НАПРАВЛЕНИЕ С ФОТОГРАФИЕЙ — снимок за текстом.
   Снимок лежит только в верхней части карточки и держит постоянную
   высоту: при раскрытии списка кадр не пересчитывается и не прыгает.
   Список выезжает ниже, на спокойной светлой подложке.
   ============================================================ */
.tgroup--photo{border-color:transparent;background:var(--white);}
.tgroup--photo .tgroup__head{
  position:relative;min-height:342px;color:#fff;
}
.tgroup--photo .tgroup__head::before,
.tgroup--photo .tgroup__head::after{
  content:"";position:absolute;inset:0;
}
.tgroup--photo .tgroup__head::before{
  background-size:cover;background-position:center;
}
.tgroup--photo .tgroup__head::after{
  background:linear-gradient(180deg,
    rgba(11,58,55,.44) 0%, rgba(11,58,55,.66) 48%, rgba(11,58,55,.84) 100%);
}
.tgroup--photo .tgroup__head > *{position:relative;z-index:1;}
.tgroup--photo h3{color:#fff;}
.tgroup--photo .tgroup__lead{color:rgba(255,255,255,.88);}
.tgroup--photo .tgroup__btn{border-color:#fff;color:#fff;}
.tgroup--photo .tgroup__btn:hover,
.tgroup--photo .tgroup__btn[aria-expanded="true"]{background:#fff;color:var(--teal);}
.tgroup--photo .tgroup__list{
  background:var(--soft);color:var(--ink);border-top:none;
}
.tgroup--photo .tgroup__list li{color:var(--ink);}
.tgroup--photo .tgroup__list li::before{background:var(--teal);}

.tgroups--quad{grid-template-columns:repeat(2,1fr);}
@media (max-width:760px){
  .tgroups--quad{grid-template-columns:1fr;}
}
.tgroup--lech   .tgroup__head::before{background-image:url(../assets/uslugi-lechebnyy.jpg);}
.tgroup--ozdor  .tgroup__head::before{background-image:url(../assets/uslugi-ozdorovitelnyy.jpg);}
.tgroup--sport  .tgroup__head::before{background-image:url(../assets/uslugi-sportivnyy.jpg?v=2);background-position:center 60%;}
.tgroup--manual .tgroup__head::before{background-image:url(../assets/uslugi-manualnaya.jpg);background-position:center 30%;}

/* Карточка услуги без снимка: та же плашка, заливка вместо фотографии */
.tgroup--plain .tgroup__head::before{background-color:#146F66;background-image:none;}
.tgroups--ortho{align-items:stretch;}
.tgroups--tiles{align-items:stretch;}
.tgroups--ortho h3{min-height:0;}
.tgroups--ortho .tgroup__price{margin-top:auto;}
.tgroups--ortho .tgroup__actions{margin-top:0;}
.tgroup--diag .tgroup__price{margin-top:auto;}
.tgroup--diag .tgroup__actions{margin-top:0;}
.tgroup__aside{
  margin:0;
  font-size:14px;line-height:1.35;color:var(--muted);
}
.tgroup--photo .tgroup__aside{color:rgba(255,255,255,.82);}
.tgroup__note{
  margin:-6px 0 16px;
  font-size:13px;line-height:1.35;color:var(--muted);
}
.tgroup--photo .tgroup__note{color:rgba(255,255,255,.82);}

.sheet{
  width:min(560px, calc(100% - 32px));
  max-height:min(80vh, 720px);
  margin:auto;padding:28px 28px 32px;
  border:none;border-radius:8px;
  box-shadow:0 24px 60px rgba(23,41,42,.28);
  color:var(--ink);
}
.sheet::backdrop{background:rgba(23,41,42,.55);}
.sheet__x{
  position:absolute;top:12px;right:12px;
  width:36px;height:36px;border:none;border-radius:50%;
  background:var(--soft);color:var(--ink);
  font-size:22px;line-height:1;cursor:pointer;
}
.sheet__x:hover{background:var(--teal);color:#fff;}
.sheet__body h3{
  font-size:26px;text-transform:uppercase;letter-spacing:.02em;
  margin:0 36px 18px 0;
}
@media (max-width:480px){
  .sheet__body h3{font-size:22px;hyphens:auto;overflow-wrap:break-word;}
}
.sheet__body > p{color:var(--muted);font-size:16px;line-height:1.5;}
.sheet__body > p + p{margin-top:12px;}
.sheet__body > p + .sheet__list{margin-top:18px;}
.sheet__list{margin:0;display:flex;flex-direction:column;gap:16px;}
.sheet__list div{padding-top:16px;border-top:1px solid var(--line);}
.sheet__list div:first-child{padding-top:0;border-top:none;}
.sheet__list dt{font-family:var(--font-head);font-weight:700;font-size:17px;margin-bottom:6px;}
.sheet__list dd{margin:0;color:var(--muted);font-size:15px;line-height:1.5;}

.tgroup--shot .tgroup__head::before{
  background-color:#146F66;
  background-image:var(--shot);
  background-position:var(--shot-pos, center);
}
.tgroup--sila  .tgroup__head::before{background-image:url(../assets/zal-sila.jpg?v=35);}
.tgroup--vosst .tgroup__head::before{background-image:url(../assets/zal-vosstanovlenie.jpg?v=36);background-position:center 58%;}
.tgroup--gibk  .tgroup__head::before{background-image:url(../assets/zal-gibkost.jpg?v=39);background-position:58% center;}

/* Первый экран страницы тренировок: заголовок крупнее, чем на главной */
.hero--runner h1{font-size:64px;}
@media (max-width:1240px){ .hero--runner h1{font-size:56px;} }
@media (max-width:1100px){ .hero--runner h1{font-size:50px;} }
@media (max-width:960px){  .hero--runner h1{font-size:46px;} }
@media (max-width:760px){  .hero--runner h1{font-size:clamp(26px,7.4vw,38px);} }

/* Текст в «О нас»: абзацы, подзаголовок и перечень запросов */
.about__text p{margin-bottom:12px;}
.about__text p:last-child{margin-bottom:0;}
.about__sub{
  font-family:var(--font-head);font-weight:600;
  color:var(--ink);margin-top:4px;margin-bottom:10px;
}
.about__list{
  list-style:none;margin:0 0 14px;padding:0;
}
.about__list li{
  position:relative;padding-left:20px;margin-bottom:7px;
  color:var(--muted);font-size:15px;line-height:1.45;
}
.about__list li:last-child{margin-bottom:0;}
.about__list li::before{
  content:"";position:absolute;left:0;top:8px;
  width:7px;height:7px;border-radius:50%;background:var(--teal);
}

/* Пока курсор на «Выбрать тренировку», соседняя белая кнопка гаснет
   до прозрачной — две заливки рядом не спорят за внимание. */
.hero__actions:has(.btn-outline-light:hover) .btn-white,
.hero__actions:has(.btn-outline-light:active) .btn-white,
.hero__actions:has(.btn-outline-light:focus-visible) .btn-white{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.7);
}

/* ============================================================
   ЗАГОЛОВОК СТРАНИЦЫ НАПРАВЛЕНИЯ — снимок зала за текстом
   ============================================================ */
.dirhead{
  position:relative;overflow:hidden;
  background:var(--teal-photo);color:#fff;
  padding:62px 0 66px;
  background-size:cover;background-position:center;
}
.dirhead::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(11,58,55,.52) 0%, rgba(11,58,55,.72) 60%, rgba(11,58,55,.86) 100%);
}
.dirhead .container{position:relative;z-index:1;}
.dirhead__back{
  display:inline-block;margin-bottom:22px;
  font-size:14px;color:rgba(255,255,255,.85);
}
.dirhead__back:hover{color:#fff;text-decoration:underline;}
.dirhead__kicker{
  font-family:var(--font-head);text-transform:uppercase;
  letter-spacing:.14em;font-size:13px;
  color:rgba(255,255,255,.85);margin-bottom:12px;
}
.dirhead h1{
  text-transform:uppercase;font-size:46px;line-height:1.08;
  margin-bottom:14px;max-width:760px;
}
.dirhead p{color:rgba(255,255,255,.9);font-size:17px;max-width:640px;}
.dirhead.tgroup--sila {background-image:url(../assets/zal-sila.jpg?v=35);}
.dirhead.tgroup--gibk {background-image:url(../assets/zal-gibkost.jpg?v=39);background-position:58% center;}
.dirhead.tgroup--vosst{background-image:url(../assets/zal-vosstanovlenie.jpg?v=36);background-position:center 58%;}

/* карточка занятия: место под фото и кнопка записи под ним */
.services-grid{grid-template-columns:repeat(3,1fr);}
.service-card__body{padding:22px 26px 0;display:flex;flex-direction:column;flex:1;}
.service-card__body h3{font-size:19px;line-height:1.2;margin-bottom:16px;}
.service-card__body .btn{align-self:flex-start;margin-top:auto;}

.services-grid--quad{grid-template-columns:repeat(2,1fr);}
@media (max-width:1000px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:760px){
  .services-grid,.services-grid--quad{grid-template-columns:1fr;}
  .dirhead h1{font-size:clamp(26px,7.4vw,36px);}
  .dirhead{padding:44px 0 48px;}
}

/* ============================================================
   СТРАНИЦЫ ДОКУМЕНТОВ — оферта и политика
   ============================================================ */
.doc{padding:52px 0 72px;background:var(--white);}
.doc__inner{max-width:820px;}
.doc__back{
  display:inline-block;margin-bottom:26px;
  font-size:14px;color:var(--teal);
}
.doc__back:hover{text-decoration:underline;}
.doc h1{
  text-transform:uppercase;font-size:34px;line-height:1.1;
  margin-bottom:8px;color:var(--ink);
}
.doc__sub{color:var(--muted);font-size:17px;margin-bottom:30px;}
.doc h2{
  font-size:19px;text-transform:uppercase;letter-spacing:.02em;
  margin:34px 0 12px;color:var(--teal);
}
.doc p{margin-bottom:12px;color:var(--ink);font-size:16px;line-height:1.6;}
.doc ul{list-style:none;margin:0 0 14px;padding:0;}
.doc li{
  position:relative;padding-left:20px;margin-bottom:8px;
  font-size:16px;line-height:1.55;color:var(--ink);
}
.doc li::before{
  content:"";position:absolute;left:0;top:10px;
  width:6px;height:6px;border-radius:50%;background:var(--teal);
}
/* ссылки на документы в подвале */
.footer__bottom{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;align-items:center;}
.footer__docs{display:flex;flex-wrap:wrap;gap:8px 22px;}
.footer__docs a{text-decoration:underline;text-underline-offset:3px;}
.footer__docs a:hover{color:#fff;}

@media (max-width:760px){
  .doc h1{font-size:26px;}
  .doc h2{font-size:17px;}
  .doc p,.doc li{font-size:15px;}
  .footer__bottom{flex-direction:column;gap:10px;}
}

/* Страница новости: дата, фотография и подзаголовок списка */
.doc__date{
  display:block;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal);font-weight:600;margin-bottom:10px;
}
.doc__foto{margin:24px 0 26px;border-radius:var(--radius);overflow:hidden;}
.doc__foto img{width:100%;height:auto;display:block;}
.doc__sub2{font-family:var(--font-head);font-weight:600;margin-top:20px;margin-bottom:10px;}

/* адреса-ссылки в подвале подчёркиваются при наведении */
.branch a{text-decoration:none;}
.branch a:hover{text-decoration:underline;text-underline-offset:3px;}

/* ============================================================
   МОБИЛЬНАЯ ДОВОДКА
   Пальцем труднее попасть, чем курсором: увеличиваем область
   нажатия у ссылок и разводим тесные места.
   ============================================================ */
@media (max-width:760px){
  /* нижняя строка подвала упиралась в края экрана */
  .footer__bottom{
    flex-direction:column;gap:12px;
    padding:22px 20px;text-align:center;
    font-size:12px;line-height:1.5;
  }
  .footer__docs{flex-direction:column;gap:12px;align-items:center;}

  /* ссылки в подвале: область нажатия во всю строку */
  .footer__col ul li a,
  .footer__docs a{display:inline-block;padding:7px 0;}
  .contact-line{margin-bottom:12px;align-items:flex-start;}
  .branch a{display:inline-block;padding:8px 0;}

  /* кружки соцсетей крупнее — 44 точки, как советуют для пальца */
  .socials a{width:44px;height:44px;}

  /* «Читать» в новостях и ссылки-возвраты */
  .news-card__more,.doc__back,.dirhead__back{display:inline-block;padding:8px 0;}

  /* стрелки карусели специалистов */
  .spec-arrow{width:42px;height:42px;}

  /* поле подписки и кнопка в столбик, чтобы не жались */
  .subscribe form{flex-direction:column;gap:10px;}
  .subscribe input,.subscribe button{width:100%;}
  .subscribe input{padding:13px 16px;}
  .subscribe button{padding:14px 18px;}
}

/* Описание занятия — раскрывается по кнопке «Подробнее» */
.service-card__text{
  margin:16px 0 0;
  color:var(--muted);font-size:15px;line-height:1.55;
}
.service-card__text[hidden]{display:none;}
.service-card__btn{cursor:pointer;font-family:inherit;}

/* Карточки занятий не тянутся друг за другом: раскрыли одну —
   соседние остаются прежней высоты, без пустых провалов. */
.services-grid{align-items:start;}
.service-card__body{display:flex;flex-direction:column;align-items:flex-start;}
.service-card__btn{margin-top:4px;}

/* Описание из нескольких абзацев */
.service-card__text p{margin:0 0 12px;}
.service-card__text p:last-child{margin-bottom:0;}

/* ============================================================
   КВИЗ ЗАПИСИ — дописывается в конец styles.css
   Все цвета и шрифты берутся из переменных сайта.
   Префикс qz, чтобы ничего не столкнулось с существующими классами.
   ============================================================ */

/* Шапка на сайте липкая — иначе якорь #quiz прячет заголовок под ней. */
#quiz{scroll-margin-top:calc(var(--header-h) + 20px);}

.qz__intro{text-align:center;margin-bottom:28px;}
.qz__intro h2{font-size:40px;margin-bottom:14px;}
.qz__intro p{max-width:620px;margin:0 auto;color:var(--muted);}
@media (max-width:640px){.qz__intro h2{font-size:30px;}}

.qz{
  position:relative;
  max-width:820px;margin:0 auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.qz__rail{height:3px;background:var(--line);}
.qz__rail i{display:block;height:100%;width:0;background:var(--teal);transition:width .3s ease;}
.qz__inner{padding:32px 40px 36px;}
@media (max-width:640px){.qz__inner{padding:24px 20px 26px;}}

/* ---------- путь пользователя ---------- */
.qz__trail{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:0;}
.qz__trail:not(:empty){margin-bottom:20px;}
.qz__crumb{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:5px 11px;font-size:12.5px;font-weight:600;color:var(--ink);transition:.15s ease;
}
.qz__crumb:hover{border-color:var(--teal);color:var(--teal);}
.qz__crumb span{color:var(--muted);font-weight:400;line-height:1;}
.qz__crumb:hover span{color:var(--teal);}
.qz__count{margin-left:auto;font-size:12px;color:var(--muted);}

/* ---------- вопрос ---------- */
.qz__q{font-size:26px;line-height:1.12;letter-spacing:-.02em;font-weight:700;margin-bottom:6px;}
.qz__sub{color:var(--muted);font-size:15px;margin-bottom:22px;}
@media (max-width:640px){.qz__q{font-size:21px;}}

/* ---------- плитки ---------- */
.qz__tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.qz__tiles--wide{grid-template-columns:1fr;}
@media (max-width:640px){.qz__tiles{grid-template-columns:1fr;}}
.qz__tile{
  text-align:left;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;transition:.15s ease;
}
.qz__tile:hover{border-color:var(--teal);background:var(--soft);}
.qz__tile:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.qz__tile b{display:block;font-weight:600;font-size:17px;}
.qz__tile i{display:block;font-style:normal;color:var(--muted);font-size:14px;margin-top:3px;}
.qz__tile--open{grid-column:1/-1;border-color:var(--teal);background:var(--soft);cursor:default;}
.qz__ages{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.qz__age{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 16px;font-weight:600;font-size:15px;transition:.15s ease;
}
.qz__age:hover{border-color:var(--teal);color:var(--teal);}

/* ---------- проверка перед записью ---------- */
.qz__rows{display:flex;flex-direction:column;gap:8px;}
.qz__row{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 16px;font-size:15.5px;transition:.15s ease;
}
.qz__row:hover{border-color:var(--teal);}
.qz__row:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.qz__row.is-on{border-color:#EBC7C1;background:#FBEEEC;}
.qz__box{
  flex:none;width:19px;height:19px;border:2px solid var(--line);border-radius:3px;
  display:grid;place-items:center;transition:.15s ease;
}
.qz__box svg{width:11px;height:11px;opacity:0;}
.qz__row.is-on .qz__box{border-color:#A32E22;background:#A32E22;}
.qz__row.is-on .qz__box svg{opacity:1;}
.qz__row--none{margin-top:6px;border-style:dashed;font-weight:600;}
.qz__row--none:hover{background:var(--soft);}
.qz__row--none.is-on{border-color:var(--teal);background:var(--soft);border-style:solid;}
.qz__row--none.is-on .qz__box{border-color:var(--teal);background:var(--teal);}

/* ---------- кто примет ---------- */
.qz__who{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--soft);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px;
}
.qz__av{
  flex:none;width:52px;height:52px;border-radius:50%;
  background:var(--teal);color:#fff;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:700;font-size:19px;letter-spacing:-.02em;
}
.qz__name{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.15;}
.qz__role{color:var(--muted);font-size:14.5px;margin-top:2px;}
.qz__why{font-size:15px;margin-top:10px;}

.qz__meta{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius);margin-top:16px;}
.qz__cell{flex:1;min-width:150px;padding:14px 20px;border-right:1px solid var(--line);}
.qz__cell:last-child{border-right:0;}
@media (max-width:600px){
  .qz__cell{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--line);}
  .qz__cell:last-child{border-bottom:0;}
}
.qz__cell b{display:block;font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);}
.qz__cell span{display:block;font-weight:600;font-size:16px;margin-top:3px;}

/* ---------- свободное время ---------- */
.qz__slots{margin-top:24px;}
.qz__slots > b{display:block;font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.qz__day{margin-bottom:14px;}
.qz__day > b{display:block;font-size:14px;font-weight:600;margin-bottom:8px;}
.qz__day > b i{font-style:normal;color:var(--muted);font-weight:400;}
.qz__times{display:flex;flex-wrap:wrap;gap:8px;}
.qz__time{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 16px;font-weight:600;font-size:15px;
  font-variant-numeric:tabular-nums;transition:.15s ease;
}
.qz__time:hover{border-color:var(--teal);color:var(--teal);}
.qz__time.is-on{background:var(--teal);border-color:var(--teal);color:#fff;}

/* ---------- поля ---------- */
.qz__fields{display:flex;flex-direction:column;gap:16px;margin-top:26px;
  padding-top:24px;border-top:1px solid var(--line);}
.qz__field{display:flex;flex-direction:column;gap:6px;}
.qz__field label{font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);}
.qz__field input{
  font-family:inherit;font-size:16px;color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;width:100%;
}
.qz__field textarea{
  font-family:inherit;font-size:16px;line-height:1.45;color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;width:100%;
  resize:vertical;min-height:84px;
}
.qz__field input:focus,
.qz__field textarea:focus{outline:2px solid var(--teal);outline-offset:-1px;border-color:var(--teal);}
.qz__hint{font-size:13px;color:var(--muted);}
/* Согласие: пальцем целятся в квадратик, поэтому он крупнее обычного,
   а вся строка сделана кликабельной и не ниже 44px. */
.qz__consent{
  display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--muted);
  min-height:44px;padding:6px 0;cursor:pointer;
}
.qz__consent input{flex:none;width:24px;height:24px;margin-top:0;accent-color:var(--teal);cursor:pointer;}
.qz__consent span{padding-top:3px;}
.qz__consent a{color:var(--teal);text-decoration:underline;}

.qz__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px;}
.qz__actions .btn[disabled]{background:var(--line);border-color:var(--line);
  color:var(--muted);cursor:not-allowed;}
.qz__back{
  background:transparent;border:0;color:var(--muted);
  font-family:var(--font-head);font-weight:600;font-size:14px;
  text-transform:uppercase;letter-spacing:.03em;padding:13px 8px;transition:.2s ease;
}
.qz__back:hover{color:var(--teal);}

/* ---------- исходы ---------- */
.qz__out{border-radius:var(--radius);padding:22px 24px;border:1px solid;}
.qz__out--ok{background:var(--soft);border-color:var(--line);}
.qz__out--stop{background:#FBEEEC;border-color:#EBC7C1;}
.qz__out--urgent{background:#FDF4E6;border-color:#EBD8B4;}
.qz__tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 10px;border-radius:2px;margin-bottom:12px;color:#fff;
}
.qz__out--ok .qz__tag{background:var(--teal);}
.qz__out--stop .qz__tag{background:#A32E22;}
.qz__out--urgent .qz__tag{background:#9A5B06;}
.qz__out h3{font-size:23px;margin-bottom:8px;}
.qz__out p{font-size:15px;}
.qz__out p + p{margin-top:10px;}
.qz__out ul{margin:12px 0 0;padding-left:20px;font-size:15px;}
.qz__out li{margin-bottom:5px;}

.qz__note{
  margin-top:16px;padding:14px 18px;border-left:3px solid var(--teal);
  background:var(--soft);font-size:14px;color:var(--muted);
}
.qz__note b{color:var(--ink);}

/* «Выбрать другую дату». Не кнопка и не ссылка посреди текста: спокойная
   строка под сеткой часов, которая не спорит с «Дальше». */
.qz__ещё{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:12px;padding:0;border:0;background:none;
  font:inherit;font-size:14px;font-weight:600;color:var(--teal);cursor:pointer;
}
.qz__ещё::after{
  content:'';width:7px;height:7px;margin-top:-3px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .15s ease;
}
.qz__ещё:hover{opacity:.75;}
.qz__ещё:hover::after{transform:rotate(45deg) translate(2px,2px);}

/* Подпись под календарём: тише основного текста, это сноска. */
.qz__подпись{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted);}

/* Календарь на две недели под сеткой ближайших дней.
   Тусклый день — расписания ещё нет, а не «всё занято». */
.qz__cal{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;
}
.qz__calday{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:44px;padding:7px 6px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);cursor:pointer;font:inherit;
  transition:border-color .12s ease,background .12s ease;
}
.qz__calday i{font-style:normal;font-size:11px;color:var(--muted);text-transform:lowercase;}
.qz__calday b{font-size:15px;font-weight:600;}
.qz__calday:hover{border-color:var(--teal);}
.qz__calday.is-on{border-color:var(--teal);background:var(--soft);}
.qz__calday--нет{opacity:.3;cursor:default;}
.qz__calday--нет:hover{border-color:var(--line);}

/* Ссылка-выбор внутри пояснения: «также делает LPG, ТИМ-капсула». */
.qz__ссылка{
  color:var(--teal);text-decoration:underline;text-underline-offset:2px;
  cursor:pointer;
}
.qz__ссылка:hover{opacity:.75;}

/* Пока грузится время другого филиала. Сетка часов гаснет и перестаёт
   нажиматься, всё остальное на экране стоит на месте: раньше квиз на две
   секунды пропадал целиком, и это читалось как поломка. */
.qz__slots--ждём{opacity:.35;pointer-events:none;transition:opacity .15s ease;}

/* Ответ «вы у нас уже были»: стоит над вопросом, а не под ним,
   поэтому отступ нужен снизу, иначе плашка липнет к заголовку. */
.qz__note--znak{margin:0 0 20px;}

@media (prefers-reduced-motion:reduce){
  .qz *{transition:none !important;}
}

/* ---------- оговорка под результатом ---------- */
.qz__small{
  margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);
}

/* ---------- куда идти при травме ---------- */
.qz__where{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;}
.qz__tel,.qz__tp{
  display:flex;flex-direction:column;justify-content:center;
  background:var(--white);border:1px solid #EBC7C1;border-radius:var(--radius);
  padding:12px 16px;min-height:44px;text-decoration:none;color:var(--ink);
  transition:.15s ease;
}
.qz__tel{
  flex:none;font-weight:700;font-size:17px;color:#A32E22;
  font-variant-numeric:tabular-nums;
}
.qz__tp{flex:1;min-width:240px;}
.qz__tp b{font-weight:600;font-size:15px;}
.qz__tp span{color:var(--muted);font-size:13.5px;margin-top:2px;}
.qz__tel:hover,.qz__tp:hover{border-color:#A32E22;}
.qz__tel:focus-visible,.qz__tp:focus-visible{outline:2px solid #A32E22;outline-offset:2px;}

/* ---------- выбор филиала на экране времени ---------- */
.qz__filial{
  flex:1;min-width:180px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;font-weight:600;font-size:15px;text-align:left;
  transition:.15s ease;min-height:44px;
}
.qz__filial:hover{border-color:var(--teal);}
.qz__filial.is-on{border-color:var(--teal);background:var(--soft);
  box-shadow:inset 3px 0 0 var(--teal);}
.qz__filial:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

/* ============================================================
   БЛОК УСЛУГ НА СТРАНИЦЕ МАССАЖА
   Карточки те же, что на страницах направлений: место под фото
   сверху, название и короткое описание под ним.
   ============================================================ */
.uslugi .service-card__body h3{font-size:20px;margin-bottom:10px;}
.uslugi .service-card__body p{color:var(--muted);font-size:15px;line-height:1.5;}
.uslugi .service-card__media .ph{position:absolute;inset:0;}

/* ============================================================
   ПЕРВЫЙ ЭКРАН ТРЕНИРОВОК НА ТЕЛЕФОНЕ
   Бегун крупный, стоит за текстом и заходит на него; белая
   полоса уходит за края экрана. Только для узких экранов —
   на компьютере раскладка прежняя.
   ============================================================ */
@media (max-width:760px){
  .hero--runner{position:relative;overflow:hidden;}
  .hero--runner .hero__inner{min-height:0;}
  /* текст поверх фигуры, снизу место, чтобы бегун поместился целиком */
  .hero--runner .hero__content{position:relative;z-index:3;padding:40px 0 272px;}

  .hero--runner .hero__art{
    position:absolute;left:0;right:0;top:0;bottom:0;
    width:100%;height:100%;z-index:1;pointer-events:none;
  }
  /* сама фигура — крупнее и правее, головой заходит на текст */
  .hero--runner .hero__art img{
    position:absolute;right:-16%;bottom:-2%;
    height:auto;width:158%;max-width:none;
  }
  /* белая полоса шире экрана и уходит за оба края */
  .hero--runner .hero__plane{
    position:absolute;right:-42%;bottom:-24%;
    height:150%;width:auto;max-width:none;overflow:visible;
  }
  /* лёгкая заливка сверху, чтобы буквы читались поверх фигуры */
  .hero--runner .hero__art::after{
    content:"";position:absolute;inset:0;z-index:2;
    background:linear-gradient(180deg,
      rgba(31,145,135,.92) 0%, rgba(31,145,135,.74) 26%,
      rgba(31,145,135,.46) 45%, rgba(31,145,135,.30) 60%,
      rgba(31,145,135,0) 78%);
  }
}

/* Телефон: буквы первого экрана лежат поверх фигуры, поэтому у них
   своя мягкая тень — иначе тонут на светлой руке и шортах. */
@media (max-width:760px){
  .hero--runner .hero__kicker,
  .hero--runner h1,
  .hero--runner .hero__lead,
  .hero--runner .hero__tags{
    text-shadow:0 2px 10px rgba(8,48,46,.75), 0 1px 3px rgba(8,48,46,.6);
  }
}

/* ============================================================
   ШАПКА С РАЗДЕЛАМИ
   Названия разделов длинные, поэтому меню компактнее, а между
   разделами и кнопками «Позвонить»/«Записаться» — заметный отступ.
   ============================================================ */
@media (min-width:1101px){
  .nav{gap:16px;}
  .nav a{font-size:13px;}
  .callbox{margin-left:32px;}
  .callbox__btn{font-size:13px;}
  .header .btn{font-size:13px;padding:11px 20px;}
}
/* На средних экранах разделы не помещаются в строку — уходят под кнопку меню */
@media (max-width:1100px){
  .nav{display:none;}
  .burger{display:flex;}
  .callbox{margin-left:auto;}
  .header.nav-open .nav{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:var(--header-h);left:0;right:0;z-index:60;
    background:#fff;border-bottom:1px solid var(--line);padding:8px 0;
  }
  .header.nav-open .nav a{padding:13px 24px;border-top:1px solid var(--line);font-size:15px;}
}
/* Первый экран раздела без фотографии */
.hero--plain .hero__inner{min-height:300px;}
.hero--plain .hero__content{max-width:640px;padding:56px 0;}

/* Заголовок главной длиннее прежнего — шире колонка и мельче кегль */
.hero:not(.hero--runner):not(.hero--plain) .hero__content{max-width:640px;}
.hero:not(.hero--runner):not(.hero--plain) h1{font-size:40px;}
@media (max-width:1240px){ .hero:not(.hero--runner):not(.hero--plain) h1{font-size:37px;} }
@media (max-width:1000px){ .hero:not(.hero--runner):not(.hero--plain) h1{font-size:34px;} }

/* ============================================================
   РАЗДЕЛЫ В ШАПКЕ — КНОПКАМИ
   Овальная бирюзовая обводка, прописные буквы; длинные названия
   переносятся внутри кнопки, а не растягивают строку.
   ============================================================ */
@media (min-width:1101px){
  .nav{display:flex;align-items:stretch;gap:8px;}
  .nav a{
    display:flex;align-items:center;justify-content:center;text-align:center;
    padding:7px 15px;max-width:180px;
    border:1px solid var(--teal);border-radius:999px;
    color:var(--teal);background:transparent;
    font-size:11px;font-weight:700;letter-spacing:.06em;line-height:1.2;
    text-transform:uppercase;white-space:normal;
    transition:background .18s,color .18s;
  }
  .nav a:hover{background:var(--teal);color:#fff;}

  /* «Позвонить» — такая же кнопка */
  .callbox__btn{
    padding:7px 15px;border:1px solid var(--teal);border-radius:999px;
    color:var(--teal);background:transparent;
    font-family:var(--font-head);
    font-size:11px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;white-space:nowrap;
    transition:background .18s,color .18s;
  }
  .callbox__btn:hover,
  .callbox__btn[aria-expanded="true"]{background:var(--teal);color:#fff;}

  /* «Записаться» — того же семейства, только заметнее */
  .header .btn{border-radius:999px;font-size:11px;letter-spacing:.06em;padding:9px 22px;}
}

/* В раскрытом меню на узких экранах — обычные строки, без овалов */
@media (max-width:1100px){
  .header.nav-open .nav a{
    border:none;border-radius:0;border-top:1px solid var(--line);
    color:var(--ink);text-transform:uppercase;letter-spacing:.04em;
    font-size:13px;font-weight:700;text-align:left;max-width:none;
    justify-content:flex-start;background:transparent;
  }
}

/* Раскладка шапки на компьютере: разделы прижаты к логотипу слева,
   «Позвонить» и «Записаться» — в правом углу и одного размера. */
@media (min-width:1101px){
  .header__inner{gap:12px;}
  .nav{margin-left:32px;margin-right:auto;}
  .callbox{margin-left:0;}
  .callbox__btn,
  .header .btn{
    display:inline-flex;align-items:center;justify-content:center;text-align:center;
    min-width:164px;padding:11px 18px;
    font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.06em;
    line-height:1.2;border-radius:999px;border-width:1px;border-style:solid;
  }
}

/* Шапка на компьютере: разделы — просто чёрные надписи без обводок,
   «Позвонить» и «Записаться» — залитые бирюзой, на наведении выворачиваются. */
@media (min-width:1101px){
  .nav{gap:24px;}
  .nav a{
    border:none;border-radius:0;background:transparent;
    color:var(--ink);padding:6px 0;max-width:190px;
  }
  .nav a:hover{background:transparent;color:var(--teal);}

  .callbox__btn,
  .header .btn{
    background:var(--teal);border-color:var(--teal);color:#fff;
  }
  .callbox__btn:hover,
  .callbox__btn[aria-expanded="true"],
  .header .btn:hover,
  .header .btn:focus-visible{
    background:transparent;color:var(--teal);border-color:var(--teal);
  }
}

/* Шапка на компьютере: разделы крупнее и теснее;
   «Позвонить» прозрачная и заливается при наведении, «Записаться» наоборот. */
@media (min-width:1101px){
  .nav{gap:16px;}
  .nav a{font-size:13px;max-width:215px;letter-spacing:.04em;}

  .callbox__btn{background:transparent;color:var(--teal);border-color:var(--teal);}
  .callbox__btn:hover,
  .callbox__btn[aria-expanded="true"]{background:var(--teal);color:#fff;border-color:var(--teal);}

  .header .btn{background:var(--teal);color:#fff;border-color:var(--teal);}
  .header .btn:hover,
  .header .btn:focus-visible{background:transparent;color:var(--teal);border-color:var(--teal);}
}

/* Разделы стали крупнее — возвращаем зазор до пары кнопок */
@media (min-width:1101px){
  .callbox{margin-left:44px;}
}

/* Место в строке: кнопки чуть уже, зазор чуть меньше — короткие названия
   разделов перестают разрываться на две строки. */
@media (min-width:1101px){
  .callbox{margin-left:36px;}
  .callbox__btn,
  .header .btn{min-width:148px;padding:11px 14px;}
  .nav a{letter-spacing:.02em;}
}

/* Разделы: одинаковые промежутки и тонкий пунктир между ними */
@media (min-width:1101px){
  .nav{gap:18px;align-items:stretch;}
  .nav a{max-width:none;white-space:normal;}
  .nav a + a{
    border-left:1px dotted rgba(23,41,42,.4);
    padding-left:18px;
  }
}
/* В раскрытом меню на узких экранах переносы и пунктир не нужны */
@media (max-width:1100px){
  .nav a br{display:none;}
  .nav a + a{border-left:none;padding-left:0;}
}

/* Текст первого экрана главной — с отступом от боковой панели,
   чтобы блок не прилипал к меню. */
@media (min-width:1101px){
  .hero:not(.hero--runner):not(.hero--plain) .hero__content{margin-left:36px;}
}

/* Шрифт в кнопках «Позвонить» и «Записаться» — как у разделов шапки */
@media (min-width:1101px){
  .callbox__btn,
  .header .btn{
    font-family:var(--font-head);
    font-size:13px;font-weight:700;letter-spacing:.02em;
  }
}

/* Пятый раздел в шапке — ужимаем строку, чтобы всё поместилось */
@media (min-width:1101px){
  .nav{gap:14px;}
  .nav a{font-size:12px;}
  .nav a + a{padding-left:14px;}
  .callbox{margin-left:28px;}
  .callbox__btn,
  .header .btn{min-width:134px;padding:11px 12px;font-size:12px;}
}

/* Пять разделов в строку помещаются только на широких экранах.
   Ниже 1200 точек меню уходит под кнопку — иначе шапка расползается. */
@media (max-width:1200px){
  .nav{display:none;}
  .burger{display:flex;}
  .callbox{margin-left:auto;}
  .nav a br{display:none;}
  .nav a + a{border-left:none;padding-left:0;}
  .header.nav-open .nav{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:var(--header-h);left:0;right:0;z-index:60;
    background:#fff;border-bottom:1px solid var(--line);padding:8px 0;
  }
  .header.nav-open .nav a{
    border:none;border-radius:0;border-top:1px solid var(--line);
    color:var(--ink);text-transform:uppercase;letter-spacing:.04em;
    font-size:13px;font-weight:700;text-align:left;max-width:none;
    justify-content:flex-start;background:transparent;padding:13px 24px;
  }
}

/* ============================================================
   КАРТОЧКИ УСЛУГ БЕЗ ФОТОГРАФИЙ — отступ сверху, иначе заголовок
   прилипает к рамке.
   ============================================================ */
.uslugi .service-card__body{padding-top:26px;}

/* ============================================================
   ШАПКА В ДВА РЯДА
   Разделов стало восемь — в одну строку с логотипом и кнопками
   они не помещаются. Сверху логотип, звонок и запись; под ними
   ряд разделов с пунктирными разделителями.
   ============================================================ */
.header__nav{border-top:1px solid var(--line);}
.header__nav .container{display:flex;justify-content:center;}

@media (min-width:1201px){
  .header__inner .callbox{margin-left:auto;}
  .nav{
    display:flex;align-items:stretch;justify-content:center;gap:0;
    margin:0;width:auto;
  }
  .nav a{
    display:flex;align-items:center;justify-content:center;text-align:center;
    padding:13px 16px;max-width:none;
    border:none;border-radius:0;background:transparent;
    color:var(--ink);
    font-family:var(--font-head);
    font-size:12px;font-weight:700;letter-spacing:.03em;line-height:1.25;
    text-transform:uppercase;white-space:normal;
    transition:color .18s;
  }
  .nav a:hover{color:var(--teal);background:transparent;}
  .nav a + a{border-left:1px dotted rgba(23,41,42,.4);padding-left:16px;}

  /* якоря не должны уезжать под двухрядную шапку */
  section[id],footer[id]{scroll-margin-top:150px;}
}

/* Ниже 1200 второй ряд не показываем — разделы уходят под кнопку меню */
@media (max-width:1200px){
  .header__nav{border-top:none;}
  .header__nav .container{padding:0;}
}

/* ============================================================
   ДВА ЭТАЖА РАЗДЕЛОВ
   Восемь разделов разбиты на два ряда по четыре: в каждом ряду
   название целиком в одну строку, между ними пунктир.
   ============================================================ */
@media (min-width:1201px){
  .nav{flex-direction:column;align-items:center;gap:0;width:100%;}
  .nav__row{
    display:flex;align-items:stretch;justify-content:center;
  }
  .nav__row + .nav__row{border-top:1px dotted rgba(23,41,42,.25);}
  .nav a{
    padding:11px 18px;white-space:nowrap;
    font-size:12px;letter-spacing:.03em;line-height:1.25;
  }
  .nav__row a + a{border-left:1px dotted rgba(23,41,42,.4);}
  section[id],footer[id]{scroll-margin-top:190px;}
}

/* На узких экранах ряды растворяются — разделы идут одним списком */
@media (max-width:1200px){
  .nav__row{display:contents;}
}

/* Линия между этажами — во всю ширину, а не по длине нижнего ряда */
@media (min-width:1201px){
  .nav{align-items:stretch;}
  .nav__row{width:100%;}
}

/* ============================================================
   ШАПКА: ПЕРВЫЙ РЯД РАЗДЕЛОВ — В ОДНУ ЛИНИЮ С ЛОГОТИПОМ
   Сверху логотип, три раздела и кнопки. Ниже, во всю ширину,
   второй ряд разделов. Пустого места над меню больше нет.
   ============================================================ */
@media (min-width:1201px){
  .header__inner{
    display:grid;height:auto;align-items:center;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "logo top actions"
      "bottom bottom bottom";
    column-gap:26px;padding:0 28px;
  }
  .header__inner > .logo{grid-area:logo;}
  .header__actions{grid-area:actions;display:flex;align-items:center;gap:12px;}
  .nav{display:contents;}
  .nav__row{display:flex;align-items:center;}
  .nav__row--top{grid-area:top;min-height:var(--header-h);justify-content:flex-start;}
  .nav__row--bottom{
    grid-area:bottom;justify-content:center;
    border-top:1px dotted rgba(23,41,42,.25);
  }
  .nav a{padding:11px 16px;white-space:nowrap;}
  .nav__row--top a:first-child{padding-left:0;}
  .nav__row a + a{border-left:1px dotted rgba(23,41,42,.4);}
  section[id],footer[id]{scroll-margin-top:170px;}
}

@media (max-width:1200px){
  .header__actions{display:flex;align-items:center;gap:10px;margin-left:auto;}
  .header__actions .callbox{margin-left:0;}
}

/* Верхний ряд разделов — по центру свободного места между логотипом и кнопками */
@media (min-width:1201px){
  .nav__row--top{justify-content:center;}
  .nav__row--top a:first-child{padding-left:16px;}
}

/* Нижний ряд разделов поднимаем: первая строка ниже, отступы в ряду плотнее */
@media (min-width:1201px){
  .nav__row--top{min-height:64px;}
  .nav__row--bottom a{padding-top:8px;padding-bottom:9px;}
}

/* Пунктир между этажами убран, нижний ряд поднят ещё выше */
@media (min-width:1201px){
  .nav__row--bottom{border-top:none;}
  .nav__row--top{min-height:56px;}
  .nav__row--bottom a{padding-top:2px;padding-bottom:10px;}
}

/* Пунктир между этажами задавался правилом посильнее — гасим его точно */
@media (min-width:1201px){
  .nav .nav__row + .nav__row{border-top:none;}
}

/* ============================================================
   ШАПКА: «ГЛАВНАЯ» И КНОПКА С РАЗДЕЛАМИ
   Разделов восемь — в строку они не помещаются, поэтому все,
   кроме главной, живут под кнопкой. Она работает одинаково
   на компьютере и на телефоне.
   ============================================================ */
.menubox{position:relative;display:flex;align-items:center;}
.header__home{
  font-family:var(--font-head);font-size:13px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;transition:color .18s;
}
.header__home:hover{color:var(--teal);}

@media (min-width:1201px){
  .header__inner{
    display:flex;align-items:center;gap:22px;
    height:var(--header-h);padding:0 28px;
  }
  .burger{display:flex;width:34px;height:34px;gap:5px;}
  .burger span{width:22px;}
  .header__actions{margin-left:auto;display:flex;align-items:center;gap:12px;}

  /* список разделов — карточкой под кнопкой */
  .nav{display:none;}
  .header.nav-open .nav{
    display:block;position:absolute;top:calc(100% + 14px);left:-10px;z-index:60;
    width:330px;padding:8px;
    background:#fff;border:1px solid var(--line);border-radius:10px;
    box-shadow:0 18px 40px rgba(19,34,31,.16);
  }
  .header.nav-open .nav__row{display:contents;}
  .header.nav-open .nav a{
    display:block;text-align:left;white-space:normal;
    padding:11px 14px;border:none;border-radius:6px;
    font-size:13px;line-height:1.3;color:var(--ink);
  }
  .header.nav-open .nav a:hover{background:var(--shell);color:var(--teal);}
  /* «Главная» уже стоит в строке — в списке она лишняя */
  .header.nav-open .nav__row--top a:first-child{display:none;}

  section[id],footer[id]{scroll-margin-top:100px;}
}

/* На узких экранах «Главная» уходит в список, кнопка остаётся у края */
@media (max-width:1200px){
  .header__home{display:none;}
  .menubox{position:static;margin-left:8px;}
}

/* ============================================================
   ПАРА КНОПОК В КАРТОЧКАХ: «ПОДРОБНЕЕ» И «ЗАПИСАТЬСЯ»
   ============================================================ */
.card-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:4px;
}
.card-actions .btn{margin:0;}

.tgroup__actions{
  display:flex;flex-wrap:nowrap;align-items:center;gap:10px;
  margin-top:auto;width:100%;
}
.tgroup__actions .tgroup__btn{
  margin-top:0;align-self:auto;
  flex:1;padding:9px 10px;
  font-size:11.5px;letter-spacing:.02em;
  display:inline-flex;justify-content:center;align-items:center;
}
.tgroup__btn--fill{background:#fff;color:var(--teal);border-color:#fff;}
.tgroup__btn--fill:hover{background:transparent;color:#fff;border-color:#fff;}

@media (max-width:1000px){
  .tgroup__actions{width:100%;}
  .tgroup__actions .tgroup__btn{flex:1;text-align:center;}
}

/* Залитая кнопка на фотографии: буквы бирюзовые, иначе белым по белому */
.tgroup--photo .tgroup__btn--fill{background:#fff;color:var(--teal);border-color:#fff;}
.tgroup--photo .tgroup__btn--fill:hover,
.tgroup--photo .tgroup__btn--fill:focus-visible{background:transparent;color:#fff;border-color:#fff;}

.qz__help{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);text-align:center;}
.qz__help-btn{
  background:none;border:0;padding:0;
  color:var(--muted);font:inherit;font-size:13px;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.qz__help-btn:hover{color:var(--teal);}

.qz__calwrap{margin-top:22px;}
.qz__calhead{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:10px;
}
.qz__calhead b{font-size:16px;text-transform:capitalize;}
.qz__calnav{
  width:40px;height:40px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);font-size:22px;line-height:1;color:var(--ink);
}
.qz__calnav:hover{border-color:var(--teal);color:var(--teal);}
.qz__calnav:disabled{opacity:.35;cursor:not-allowed;}
.qz__caldow,.qz__cal{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
}
.qz__caldow{margin-bottom:6px;}
.qz__caldow span{
  text-align:center;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);padding:4px 0;
}
.qz__calpad{display:block;}
.qz__calday{
  min-height:40px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);font-weight:600;font-size:14px;
}
.qz__calday:hover{border-color:var(--teal);color:var(--teal);}
.qz__calday.is-on{background:var(--teal);border-color:var(--teal);color:#fff;}
.qz__calday--нет{opacity:.38;cursor:not-allowed;}
.qz__slots--ждём{opacity:.45;pointer-events:none;}

/* ============================================================
   БОКОВАЯ ПАНЕЛЬ
   Отделы закреплены слева. В шапке остаются звонок и запись.
   Уже 1100px панель не влезает — там снова кнопка «Разделы».
   ============================================================ */
@media (min-width:1100px){
  body{padding-left:260px;}
  .header{
    position:sticky;top:0;z-index:80;
    margin-left:-260px;width:calc(100% + 260px);
    background:#fff;
    border-bottom:1px solid var(--line);
  }
  .header .logo{position:static;width:auto;}
  .header .logo__name{font-size:20px;white-space:nowrap;line-height:1;}
  .header__home,.burger{display:none;}
  .menubox{position:static;}
  .header__inner{
    display:flex;align-items:center;height:var(--header-h);
    grid-template-columns:none;grid-template-areas:none;
  }
  .nav{
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    position:fixed;z-index:60;
    top:var(--header-h);left:0;bottom:0;width:260px;
    margin:0;padding:12px 12px 24px;
    background:#fff;border-right:1px solid var(--line);
    overflow:auto;
  }
  .nav__row,
  .nav__row--top,
  .nav__row--bottom{
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    min-height:0;height:auto;width:auto;grid-area:auto;border-top:none;
  }
  .nav__row--bottom{border-top:none;}
  .nav a,
  .header.nav-open .nav a{
    display:block;max-width:none;white-space:normal;
    padding:12px 10px;margin:0;
    border:none;border-top:1px solid var(--line);border-radius:0;
    font-size:15px;line-height:1.3;letter-spacing:0;
    text-align:left;color:var(--ink);background:transparent;
  }
  .nav a + a,
  .nav .nav__row + .nav__row a{border-left:none;padding-left:10px;}
  .nav .nav__row + .nav__row{padding-left:0;border-left:none;}
  .nav a:hover,
  .header.nav-open .nav a:hover{background:var(--soft);color:var(--teal);}
  .nav__row--top a:first-child,
  .header.nav-open .nav__row--top a:first-child{display:block;}
  .header.nav-open .nav{
    display:flex;position:fixed;top:var(--header-h);left:0;width:260px;
    padding:12px 12px 24px;border:none;border-right:1px solid var(--line);
    border-radius:0;box-shadow:none;background:#fff;
  }
}

/* Второй ряд меню не сдвигаем: у всех пунктов один левый край */
@media (min-width:1100px){
  .nav > .nav__row,
  .header.nav-open .nav > .nav__row{
    display:flex;flex-direction:column;align-items:stretch;
    width:auto;margin:0;padding:0;border:none;
  }
  .nav > .nav__row a,
  .header.nav-open .nav > .nav__row a,
  .nav > .nav__row a + a,
  .header.nav-open .nav > .nav__row a + a{
    margin:0;border-left:none;text-align:left;
    padding:12px 10px;
  }
}

/* Текущий раздел в меню — бирюзовый, остальные обычные */
.nav a[aria-current="page"],
.header.nav-open .nav a[aria-current="page"],
.nav a[aria-current="page"]:hover,
.header.nav-open .nav a[aria-current="page"]:hover{color:var(--teal);}

/* Два специалиста остаются в одну линию и на узком экране */
@media (max-width:760px){
  .spec-slider--one .spec-track{gap:12px;}
  .spec-card.spec-card--one{flex:1 1 0;max-width:none;min-width:0;}
  .spec-card--one h4{font-size:14px;margin-top:12px;}
  .spec-card--one span{font-size:12.5px;}
  .spec-card--one .spec-card__media{padding:5px;border-radius:12px;}
  .spec-card--one .spec-card__media img{border-radius:8px;}
}

/* ============================================================
   ДИЗАЙН-СЛОЙ, октябрь 2026
   Единая шкала шрифта, обычный регистр в заголовках, светло-бирюзовый
   и бежевый как третий и четвёртый цвета, рамки у фотографий,
   одинаковые скругления и отступы. Лежит последним и переопределяет
   всё, что выше; убрать слой — вернуть прежний вид.
   Шкала: 12 / 14 / 16 / 18 / 20 / 24 / 36 / 44.
   ============================================================ */
:root{
  --mint:      #CFEFE7;   /* светло-бирюзовый */
  --mint-soft: #E9F7F3;
  --mint-line: #B6E3D8;
  --beige:     #FBF4E6;   /* бежевый */
  --beige-2:   #F4E8D0;
  --teal-dark: #146F66;
  --r-card:    16px;
  --r-ctl:     10px;
  --radius:    10px;
  --shadow:    0 10px 30px rgba(20,111,102,.10);
  --shadow-up: 0 18px 40px rgba(20,111,102,.16);
}

/* ---------- Заголовки: обычный регистр, одна шкала ---------- */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;text-transform:none;}
.hero h1,
.hero:not(.hero--runner):not(.hero--plain) h1,
.dirhead h1,.doc h1{text-transform:none;font-weight:700;line-height:1.1;}
.hero:not(.hero--runner):not(.hero--plain) h1{font-size:44px;}
.hero--plain h1,.dirhead h1{font-size:44px;}
.hero--runner h1{text-transform:none;}
.section__head h2,.about h2,.qz__intro h2,.quiz__box h2{
  text-transform:none;font-size:36px;letter-spacing:-.02em;line-height:1.12;
}
.service-card h3,.price-card__head h3,.sheet__body h3{text-transform:none;letter-spacing:-.01em;}
.tgroup h3,.service-card__body h3,.uslugi .service-card__body h3{font-size:24px;line-height:1.2;}
.news-card h3{font-size:20px;line-height:1.25;}
.sheet__body h3{font-size:24px;}
.doc h1{font-size:36px;}
.doc h2{text-transform:none;letter-spacing:-.01em;font-size:20px;}
.spec-card h4,.pass h4{text-transform:none;font-size:20px;letter-spacing:-.01em;}

/* Короткая черта под заголовком раздела — бирюза переходит в мяту */
.section__head h2::after,
.qz__intro h2::after,
.about h2::after{
  content:"";display:block;width:56px;height:4px;border-radius:4px;
  margin:16px auto 0;
  background:linear-gradient(90deg,var(--teal) 0 50%,var(--mint-line) 50% 100%);
}
.about h2::after{margin-left:0;}

/* ---------- Маленькие подписи над заголовками: капс + мятная плашка ---------- */
.section__head .kicker,
.quiz__kicker,
.about__kicker{
  display:inline-block;
  font-family:var(--font-head);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
  color:var(--teal-dark);background:var(--mint);
  padding:7px 12px;border-radius:999px;margin-bottom:16px;
}
.about__kicker{align-self:flex-start;}
.hero__kicker,.dirhead__kicker{
  font-size:12px;font-weight:600;letter-spacing:.12em;line-height:1.5;
  color:var(--mint);
}
.hero__by{font-size:12px;letter-spacing:.12em;font-weight:600;color:var(--mint);}
.hero__tags{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.12em;
  color:var(--mint);padding:8px 14px;border:1px solid rgba(207,239,231,.45);
  border-radius:999px;
}
.hero__lead,.dirhead p{font-size:18px;line-height:1.55;}

/* ---------- Кнопки: овальные, обычный регистр ---------- */
.btn{
  border-radius:999px;text-transform:none;letter-spacing:0;
  font-size:16px;font-weight:600;padding:13px 28px;
}
.btn-sm{font-size:14px;padding:10px 20px;letter-spacing:0;}
.hero__actions .btn{font-size:16px;padding:15px 34px;}
/* главная кнопка на бирюзе — мятная, как в референсе */
.hero .btn-white,.dirhead .btn-white{
  background:var(--mint);border-color:var(--mint);color:var(--teal-dark);
  box-shadow:0 8px 22px rgba(8,48,46,.18);
}
.hero .btn-white:hover,.dirhead .btn-white:hover{
  background:#fff;border-color:#fff;color:var(--teal-dark);
}
.tgroup__btn,
.tgroup__actions .tgroup__btn{
  border-radius:999px;text-transform:none;letter-spacing:0;
  font-size:14px;font-weight:600;padding:11px 14px;
}
.tgroup--photo .tgroup__btn--fill{background:var(--mint);border-color:var(--mint);color:var(--teal-dark);}
.tgroup--photo .tgroup__btn--fill:hover,
.tgroup--photo .tgroup__btn--fill:focus-visible{background:#fff;border-color:#fff;color:var(--teal-dark);}
.qz__back{text-transform:none;letter-spacing:0;font-size:15px;}
.news-card__more{font-size:15px;}

/* Шапка: «Позвонить» и «Записаться» — обычный регистр */
@media (min-width:1101px){
  .callbox__btn,.header .btn{
    text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;
    border-radius:999px;
  }
}

/* ---------- Боковое меню разделов ---------- */
@media (min-width:1100px){
  .nav{padding:16px 14px 24px;background:#fff;}
  .nav a,
  .header.nav-open .nav a,
  .nav > .nav__row a,
  .header.nav-open .nav > .nav__row a,
  .nav > .nav__row a + a,
  .header.nav-open .nav > .nav__row a + a{
    text-transform:none;letter-spacing:0;font-size:15px;font-weight:500;
    line-height:1.3;color:var(--ink);
    border:none;border-radius:var(--r-ctl);
    padding:11px 14px;margin:2px 0;position:relative;
    transition:background .15s,color .15s;
  }
  .nav a:hover,
  .header.nav-open .nav a:hover{background:var(--mint-soft);color:var(--teal-dark);}
  .nav a[aria-current="page"],
  .header.nav-open .nav a[aria-current="page"],
  .nav > .nav__row a[aria-current="page"]{
    background:var(--mint);color:var(--teal-dark);font-weight:600;
  }
  .nav a[aria-current="page"]::before{
    content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;
    border-radius:3px;background:var(--teal);
  }
}
/* раскрытое меню на телефоне и планшете — тоже без капса */
@media (max-width:1099px){
  .header.nav-open .nav a{text-transform:none;letter-spacing:0;font-size:16px;font-weight:500;}
  .header.nav-open .nav a[aria-current="page"]{background:var(--mint-soft);color:var(--teal-dark);font-weight:600;}
}

/* ---------- Ритм разделов ---------- */
.section{padding:88px 0;}
.section__head{margin-bottom:48px;}
.about__inner{padding:88px 0;}
@media (max-width:760px){
  .section{padding:56px 0;}
  .section__head{margin-bottom:32px;}
  .about__inner{padding:56px 0;}
}

/* ---------- Цвета разделов: бежевый и мятный разбавляют бирюзу ---------- */
.quiz{background:var(--beige);}
.specialists.section--soft{background:var(--mint-soft);}
.news.section--soft{background:#FFFCF6;}

/* ---------- Квиз ---------- */
.qz{
  max-width:840px;border:1px solid var(--beige-2);border-radius:20px;
  box-shadow:0 16px 44px rgba(120,96,50,.10);background:#fff;
}
.qz__rail{height:4px;background:var(--mint);}
.qz__intro p{font-size:18px;}
.qz__q{font-size:24px;}
.qz__sub{font-size:16px;}
.qz__tile{border-radius:12px;padding:18px 20px;}
.qz__tile:hover{border-color:var(--teal);background:var(--mint-soft);}
.qz__tile--open{background:var(--mint-soft);}
.qz__tile b{font-size:18px;}
.qz__tile i{font-size:14px;}
.qz__crumb{border-radius:999px;font-size:12px;background:var(--mint-soft);border-color:var(--mint-line);}
.qz__row,.qz__age,.qz__time,.qz__filial,.qz__calday,.qz__calnav,
.qz__field input,.qz__field textarea,.qz__who,.qz__meta,.qz__out,.qz__tel,.qz__tp{border-radius:var(--r-ctl);}
.qz__row{font-size:16px;}
.qz__who,.qz__note,.qz__out--ok{background:var(--mint-soft);}
.qz__help-btn{font-size:14px;}
@media (max-width:640px){ .qz__q{font-size:20px;} }

/* ---------- «О нас»: рамка со сдвигом вокруг фото команды ---------- */
.about__photo{isolation:isolate;}
.about__photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:translate(-18px,18px);
  border:2px solid var(--mint);border-radius:4px;
}
.about__photo::after{
  content:"";position:absolute;right:-10px;top:-10px;z-index:2;
  width:46px;height:46px;
  border-top:4px solid var(--mint);border-right:4px solid var(--mint);
}
.about p,.about__list li{font-size:16px;}

/* ---------- Специалисты: фото в рамке со сдвигом и уголком ---------- */
.spec-card--one .spec-card__media{
  position:relative;isolation:isolate;
  padding:0;border:none;border-radius:var(--r-card);
  background:transparent;box-shadow:none;
  margin:0 14px 14px 0;
}
.spec-card--one .spec-card__media img{
  border-radius:var(--r-card);box-shadow:var(--shadow);
}
.spec-card--one .spec-card__media::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:translate(14px,14px);
  border:2px solid var(--teal);border-radius:var(--r-card);
  background:var(--mint);
}
.spec-card--one .spec-card__media::after{
  content:"";position:absolute;left:-8px;top:-8px;z-index:2;
  width:34px;height:34px;border-radius:6px 0 0 0;
  border-top:3px solid var(--teal);border-left:3px solid var(--teal);
}
.spec-card--one h4{margin-top:18px;font-size:20px;}
.spec-card--one span{font-size:16px;line-height:1.5;color:var(--muted);}

/* Телефон: специалисты — лента с прокруткой, видна часть следующего */
@media (max-width:760px){
  .spec-slider--one .spec-track{
    justify-content:flex-start;overflow-x:auto;gap:22px;
    scroll-snap-type:x mandatory;padding:10px 24px 18px;margin:0 -24px;
    scroll-padding-left:24px;
  }
  .spec-card.spec-card--one{flex:0 0 74%;max-width:300px;min-width:0;scroll-snap-align:start;}
  .spec-card--one h4{font-size:20px;margin-top:16px;}
  .spec-card--one span{font-size:15px;}
  .spec-card--one .spec-card__media{padding:0;border-radius:var(--r-card);margin:0 12px 12px 0;}
  .spec-card--one .spec-card__media img{border-radius:var(--r-card);}
}

/* ---------- Новости ---------- */
.news-card{
  border:1px solid var(--beige-2);border-radius:var(--r-card);
  box-shadow:0 6px 18px rgba(120,96,50,.06);
  transition:transform .2s ease,box-shadow .2s ease;
}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-up);}
.news-card__media{position:relative;overflow:hidden;}
.news-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.news-card:hover .news-card__media img{transform:scale(1.03);}
.news-card__date{
  align-self:flex-start;font-size:12px;letter-spacing:.08em;
  background:var(--mint);color:var(--teal-dark);
  padding:6px 10px;border-radius:999px;margin-bottom:14px;
}
.news-card p{font-size:16px;}

/* ---------- Карточки услуг на фото ---------- */
.tgroup{border-radius:var(--r-card);}
.tgroup--photo{box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease;}
.tgroup--photo:hover{transform:translateY(-3px);box-shadow:var(--shadow-up);}
/* затемнение сильнее сверху (заголовок) и снизу (цена и кнопки) */
.tgroup--photo .tgroup__head::after{
  background:linear-gradient(180deg,
    rgba(8,44,41,.72) 0%, rgba(8,44,41,.48) 34%,
    rgba(8,44,41,.58) 60%, rgba(8,44,41,.90) 100%);
}
.tgroup--photo h3{text-shadow:0 2px 12px rgba(0,0,0,.25);}
.tgroup__lead{font-size:16px;}
.tgroup--photo .tgroup__lead{color:rgba(255,255,255,.92);}
.tgroup__price{font-size:24px;}
.tgroup__price span{font-size:14px;}
.tgroup__note,.tgroup__aside{font-size:14px;}
.tgroup__list li{font-size:16px;}
.tgroup--photo .tgroup__list{background:var(--mint-soft);}
.service-card{border-radius:var(--r-card);overflow:hidden;}
.service-card p,.service-card__text,.uslugi .service-card__body p{font-size:16px;}

/* окно «Подробнее» */
.sheet{border-radius:20px;}
.sheet__x:hover{background:var(--mint);color:var(--teal-dark);}

/* ---------- Зал, документы ---------- */
.hall-card__media{border-radius:var(--r-card);}
.doc__foto{border-radius:var(--r-card);}
.doc__date{font-size:12px;}

/* ---------- Подвал ---------- */
.footer h5{font-size:14px;letter-spacing:.08em;color:var(--mint);}
.footer ul a,.contact-line{font-size:16px;}
.subscribe input{font-size:16px;border-radius:999px 0 0 999px;padding-left:18px;}
.subscribe button{
  text-transform:none;letter-spacing:0;font-size:15px;
  background:var(--mint);color:var(--teal-dark);border-radius:0 999px 999px 0;
}
.subscribe button:hover{background:#fff;}
.footer__bottom{text-transform:none;letter-spacing:0;font-size:14px;}
.socials a:hover{background:var(--mint);border-color:var(--mint);}

/* ---------- Телефон: заголовок первого экрана помещается ---------- */
@media (max-width:1000px){
  .hero:not(.hero--runner):not(.hero--plain) h1{font-size:36px;}
}
@media (max-width:760px){
  .hero:not(.hero--runner):not(.hero--plain) h1,
  .hero--plain h1,.dirhead h1,.hero--runner h1{
    font-size:clamp(26px,7.6vw,32px);overflow-wrap:break-word;
  }
  .section__head h2,.about h2,.qz__intro h2{font-size:28px;}
  .tgroup h3,.service-card__body h3{font-size:20px;}
  .hero__lead,.dirhead p,.qz__intro p{font-size:16px;}
  .hero__actions .btn{width:100%;}
  .doc h1{font-size:28px;}
  .about__photo::before{transform:translate(-10px,10px);}
  .about__photo::after{right:-6px;top:-6px;width:32px;height:32px;}
  .subscribe input,.subscribe button{border-radius:999px;}
  .footer__bottom{font-size:13px;}
}
@media (prefers-reduced-motion:reduce){
  .news-card,.tgroup--photo,.news-card__media img{transition:none !important;}
}

/* Первый экран главной: текст держится в левой бирюзовой части
   и не наезжает на массажиста на фотографии. */
@media (min-width:1001px){
  .hero:not(.hero--runner):not(.hero--plain) .hero__content{max-width:min(500px,40vw);}
  .hero:not(.hero--runner):not(.hero--plain) h1{font-size:clamp(32px,2.9vw,42px);}
  .hero:not(.hero--runner):not(.hero--plain) .hero__lead{max-width:440px;}
}

/* Планшет и телефон: фото первого экрана целиком, без обрезки.
   Кадр вертикальный (1116×1260), поэтому высота считается от ширины,
   а на планшете ширина ограничена — иначе фото заняло бы весь экран. */
@media (max-width:1000px){
  .hero:not(.hero--runner):not(.hero--plain) .hero__photo{
    height:auto;width:100%;max-width:560px;margin:0 auto;
    aspect-ratio:1116/1260;
  }
  .hero:not(.hero--runner):not(.hero--plain) .hero__photo img{
    height:100%;object-fit:contain;object-position:center;
  }
}

/* ============================================================
   ПЕРВЫЙ ЭКРАН С ФОТО ДОКТОРА (проба)
   Слева заголовок, справа портрет Шарапова в рамке со сдвигом,
   подпись «под руководством…» — прописным шрифтом.
   ============================================================ */
.hero--doctor .hero__inner{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;gap:56px;min-height:640px;
}
.hero--doctor .hero__content{max-width:none !important;margin-left:0 !important;padding:72px 0;}
.hero--doctor h1{font-size:clamp(34px,3.2vw,46px) !important;}
.hero--doctor .hero__by{
  font-family:'Marck Script','Segoe Script',cursive;
  text-transform:none;letter-spacing:0;font-weight:400;
  font-size:30px;line-height:1.25;color:var(--mint);
  margin:6px 0 28px;max-width:none;
}
.hero--doctor .hero__lead{max-width:480px;}
.hero__doctor{margin:0;padding:48px 20px 64px 0;justify-self:center;width:100%;max-width:400px;}
.hero__doctor-frame{position:relative;isolation:isolate;}
.hero__doctor-frame img{
  width:100%;height:auto;aspect-ratio:682/1024;object-fit:cover;
  border-radius:20px;box-shadow:0 24px 50px rgba(8,48,46,.35);
}
/* мятная подложка со сдвигом */
.hero__doctor-frame::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:translate(20px,20px);
  border:2px solid var(--mint);border-radius:20px;
  background:rgba(207,239,231,.18);
}
/* уголок сверху слева */
.hero__doctor-frame::after{
  content:"";position:absolute;left:-12px;top:-12px;z-index:2;
  width:52px;height:52px;border-radius:10px 0 0 0;
  border-top:4px solid var(--mint);border-left:4px solid var(--mint);
}
/* те же диагональные полосы, что были на фото, — теперь фоном секции */
.hero--doctor::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(115deg, transparent 0 56%, rgba(255,255,255,.10) 56% 59%,
      transparent 59% 61%, rgba(255,255,255,.07) 61% 64%, transparent 64%);
}

@media (max-width:1000px){
  .hero--doctor .hero__inner{grid-template-columns:1fr;gap:0;min-height:0;}
  .hero--doctor .hero__content{padding:48px 0 8px;}
  .hero__doctor{max-width:340px;padding:24px 20px 56px 0;}
}
@media (max-width:760px){
  .hero--doctor h1{font-size:clamp(26px,7.6vw,32px) !important;}
  .hero--doctor .hero__by{font-size:24px;}
  .hero__doctor{max-width:280px;}
  .hero__doctor-frame::before{transform:translate(14px,14px);}
}

/* Телефон и планшет: название центра → портрет → «под руководством…»
   подписью под фото → текст, кнопка, теги. Порядок меняем без
   правки текста: колонка текста «растворяется» в сетке. */
@media (max-width:1000px){
  .hero--doctor .hero__content{display:contents;}
  .hero--doctor h1{order:1;margin:44px 0 0;}
  .hero--doctor .hero__doctor{order:2;padding:28px 20px 0 0;}
  .hero--doctor .hero__by{order:3;text-align:center;margin:30px auto 26px;max-width:340px;}
  .hero--doctor .hero__lead{order:4;}
  .hero--doctor .hero__actions{order:5;}
  .hero--doctor .hero__tags{order:6;justify-self:start;margin-bottom:48px;}
}

/* Телефон и планшет, вариант 2: название центра слева, небольшой
   портрет справа на одной высоте, подпись под ними во всю ширину. */
@media (max-width:1000px){
  .hero--doctor .hero__inner{
    grid-template-columns:minmax(0,1fr) 200px;column-gap:28px;align-items:center;
    grid-template-areas:"title photo" "by by" "lead lead" "act act" "tags tags";
  }
  .hero--doctor h1{grid-area:title;margin:44px 0 0;}
  .hero--doctor .hero__doctor{grid-area:photo;max-width:none;padding:44px 10px 10px 0;}
  .hero--doctor .hero__by{grid-area:by;text-align:left;margin:22px 0 22px;max-width:none;}
  .hero--doctor .hero__lead{grid-area:lead;}
  .hero--doctor .hero__actions{grid-area:act;}
  .hero--doctor .hero__tags{grid-area:tags;}
}
@media (max-width:760px){
  .hero--doctor .hero__inner{grid-template-columns:minmax(0,1fr) 108px;column-gap:14px;}
  .hero--doctor h1{font-size:clamp(20px,5.9vw,24px) !important;margin-top:32px;}
  .hero--doctor .hero__doctor{padding:32px 8px 8px 0;}
  .hero--doctor .hero__doctor-frame img{border-radius:12px;box-shadow:0 12px 26px rgba(8,48,46,.3);}
  .hero--doctor .hero__doctor-frame::before{transform:translate(8px,8px);border-radius:12px;}
  .hero--doctor .hero__doctor-frame::after{left:-6px;top:-6px;width:26px;height:26px;border-width:3px;border-radius:7px 0 0 0;}
  .hero--doctor .hero__by{font-size:22px;margin:18px 0 18px;}
}

/* Прописная подпись — Great Vibes: каллиграфия с русскими буквами */
.hero--doctor .hero__by{font-family:"Great Vibes","Marck Script",cursive;font-size:36px;line-height:1.2;}
@media (max-width:760px){ .hero--doctor .hero__by{font-size:28px;} }

/* Окно «Подробнее»: пункты списка обычным начертанием, не жирным */
.sheet__list dt{font-family:var(--font-body);font-weight:400;font-size:17px;line-height:1.45;letter-spacing:0;color:var(--ink);margin-bottom:4px;}

/* ============================================================
   ПЕРВЫЙ ЭКРАН: ПОДПИСЬ — ПОД ФОТОГРАФИЕЙ
   Сначала читается название центра, затем портрет, затем подпись
   о руководителе: она стоит подписью под кадром, с лёгким наклоном,
   на мятной рамке. Фотография меньше прежней.
   ============================================================ */
.hero--doctor .hero__doctor{
  display:flex;flex-direction:column;align-items:center;
}
.hero--doctor .hero__by{
  grid-area:auto;order:0;
  font-family:'Great Vibes','Marck Script',cursive;
  text-transform:none;letter-spacing:0;font-weight:400;
  color:var(--mint);text-align:center;
  transform:rotate(-2.6deg);transform-origin:50% 0;
  text-shadow:0 2px 14px rgba(8,48,46,.35);
}

@media (min-width:1001px){
  .hero--doctor .hero__inner{
    grid-template-columns:minmax(0,1.05fr) minmax(0,390px);
    column-gap:60px;align-items:center;min-height:620px;
  }
  .hero--doctor .hero__content{padding:72px 0;}
  .hero--doctor h1{margin-bottom:24px;}
  .hero--doctor .hero__lead{margin-bottom:32px;}
  .hero--doctor .hero__doctor{
    max-width:390px;width:100%;margin:0 auto;padding:0;
  }
  .hero--doctor .hero__doctor-frame{width:296px;max-width:100%;}
  .hero--doctor .hero__by{
    width:100%;max-width:370px;
    font-size:27px;line-height:1.35;margin:20px 0 0;
  }
}

/* Планшет и телефон: название, портрет, подпись под ним, затем текст */
@media (max-width:1000px){
  .hero--doctor .hero__inner{
    display:grid;grid-template-columns:1fr;grid-template-areas:none;
    column-gap:0;row-gap:0;align-items:start;
  }
  .hero--doctor h1,
  .hero--doctor .hero__lead,
  .hero--doctor .hero__actions,
  .hero--doctor .hero__tags,
  .hero--doctor .hero__doctor{grid-area:auto;}
  .hero--doctor h1{order:1;margin:40px 0 0;}
  .hero--doctor .hero__doctor{order:2;max-width:300px;margin:26px auto 0;padding:0;}
  .hero--doctor .hero__lead{order:3;margin:30px 0 26px;}
  .hero--doctor .hero__actions{order:4;margin-bottom:22px;}
  .hero--doctor .hero__tags{order:5;justify-self:start;margin-bottom:44px;}
  .hero--doctor .hero__by{font-size:25px;line-height:1.35;margin:18px 0 0;max-width:330px;}
}
@media (max-width:760px){
  .hero--doctor h1{font-size:clamp(26px,7.2vw,32px) !important;margin-top:34px;}
  .hero--doctor .hero__doctor{max-width:230px;margin-top:22px;}
  .hero--doctor .hero__by{font-size:22px;margin-top:14px;max-width:280px;}
  .hero--doctor .hero__doctor-frame img{border-radius:14px;}
  .hero--doctor .hero__doctor-frame::before{transform:translate(12px,12px);border-radius:14px;}
}

/* Телефон: подпись в две строки, а не в три */
@media (max-width:760px){
  .hero--doctor .hero__by{font-size:21px;max-width:330px;margin-top:16px;}
  .hero--doctor .hero__lead{margin-top:26px;}
}

/* Подпись шире кадра: фигура держит ширину строки, фото остаётся мелким */
@media (max-width:1000px){
  .hero--doctor .hero__doctor{max-width:380px;}
  .hero--doctor .hero__doctor-frame{width:290px;max-width:100%;margin:0 auto;}
}
@media (max-width:760px){
  .hero--doctor .hero__doctor{max-width:330px;}
  .hero--doctor .hero__doctor-frame{width:215px;}
  .hero--doctor .hero__by{max-width:100%;}
}

/* Рукописная подпись крупнее; колонка под неё шире, чтобы строк было две */
@media (min-width:1001px){
  .hero--doctor .hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:48px;}
  .hero--doctor .hero__doctor{max-width:460px;}
  .hero--doctor .hero__by{font-size:35px;line-height:1.3;max-width:460px;margin-top:22px;}
}
@media (max-width:1000px){
  .hero--doctor .hero__doctor{max-width:440px;}
  .hero--doctor .hero__by{font-size:32px;max-width:440px;}
}
@media (max-width:760px){
  .hero--doctor .hero__doctor{max-width:100%;}
  .hero--doctor .hero__by{font-size:26px;max-width:100%;margin-top:16px;}
}

/* ============================================================
   ЗАГОЛОВОК ПЕРВОГО ЭКРАНА — ОТДЕЛЬНЫЙ ШРИФТ
   Oswald: узкий, собранный, с ним прописные буквы не разваливают
   строку. «Центр» привязан к предыдущему слову неразрывным
   пробелом, поэтому один на строке не остаётся.
   ============================================================ */
.hero--doctor h1{
  font-family:'Oswald','Onest',system-ui,Arial,sans-serif;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.005em;
  line-height:1.14;
}
@media (min-width:1001px){
  .hero--doctor h1{font-size:clamp(34px,3.4vw,48px) !important;margin-bottom:26px;}
}

/* Телефон и планшет: заголовок по центру, как фотография и подпись */
@media (max-width:1000px){
  .hero--doctor h1{text-align:center;}
  .hero--doctor .hero__tags{justify-self:center;}
}
@media (max-width:760px){
  .hero--doctor h1{font-size:clamp(25px,7vw,31px) !important;margin-top:36px;}
}

/* Перебиваем прежнее правило .hero:not(...) h1 — оно сильнее по весу */
.hero.hero--doctor h1,
.hero.hero--doctor:not(.hero--runner):not(.hero--plain) h1{
  font-family:"Oswald","Onest",system-ui,Arial,sans-serif !important;
  text-transform:uppercase !important;
  font-weight:600;letter-spacing:.005em;line-height:1.14;
}

/* Узкий ноутбук: заголовку нужно больше места, чтобы не упираться в фото */
@media (min-width:1001px) and (max-width:1340px){
  .hero--doctor .hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,390px);column-gap:40px;}
  .hero--doctor .hero__doctor{max-width:390px;}
  .hero--doctor .hero__doctor-frame{width:268px;}
  .hero--doctor .hero__by{font-size:30px;max-width:390px;}
  .hero.hero--doctor h1{font-size:clamp(30px,3vw,38px) !important;}
}

/* ============================================================
   ПЛАШКА НАД ЗАГОЛОВКОМ ПЕРВОГО ЭКРАНА
   Такая же, как нижняя «Йога · Растяжка · Бег · ОФП»,
   только стоит самой первой — как было в прежнем макете.
   ============================================================ */
.hero--doctor .hero__tags--top{margin:0 0 22px;}
@media (max-width:1000px){
  .hero--doctor .hero__tags--top{
    order:0;justify-self:center;text-align:center;margin:38px 0 0;
  }
  .hero--doctor h1{margin-top:18px;}
}
@media (max-width:760px){
  .hero--doctor .hero__tags--top{
    margin-top:30px;font-size:11px;letter-spacing:.08em;line-height:1.5;
    padding:7px 14px;max-width:100%;
  }
  .hero--doctor h1{margin-top:16px;}
}

/* Если плашка не влезла в строку — текст в ней по центру, не лесенкой */
.hero--doctor .hero__tags--top{text-align:center;}
@media (min-width:1001px) and (max-width:1340px){
  .hero--doctor .hero__tags--top{font-size:11px;letter-spacing:.07em;line-height:1.5;padding:7px 14px;}
}

/* ============================================================
   ОТЗЫВЫ
   Бежевый разворот между занятиями и залом. Карточки белые,
   звёзды тёплые — единственное жёлтое пятно на сайте, поэтому
   глаз цепляется за оценку, а не за рамку.
   ============================================================ */
.reviews{background:var(--beige);}
.reviews-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;
}
.review{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--beige-2);border-radius:var(--r-card);
  padding:28px 26px 24px;
  box-shadow:0 6px 18px rgba(120,96,50,.07);
  transition:transform .2s ease,box-shadow .2s ease;
}
.review:hover{transform:translateY(-3px);box-shadow:var(--shadow-up);}
/* кавычка-подложка */
.review::before{
  content:"”";position:absolute;right:18px;top:-2px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:86px;line-height:1;color:var(--mint);opacity:.55;
  pointer-events:none;
}
.review__stars{
  position:relative;z-index:1;
  color:#F0A830;font-size:18px;letter-spacing:.12em;line-height:1;margin-bottom:14px;
}
.review__text{
  position:relative;z-index:1;flex:1;
  font-size:16px;line-height:1.55;color:var(--ink);
}
.review__who{
  display:flex;align-items:center;gap:12px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
}
.review__av{
  flex:none;width:42px;height:42px;border-radius:50%;
  background:var(--mint);color:var(--teal-dark);
  display:grid;place-items:center;
  font-family:var(--font-head);font-weight:600;font-size:18px;
}
.review__name{
  display:flex;flex-direction:column;
  font-weight:600;font-size:16px;color:var(--ink);
}
.review__name time{font-weight:400;font-size:14px;color:var(--muted);margin-top:2px;}
.reviews__foot{display:flex;justify-content:center;margin-top:32px;}

@media (max-width:1000px){
  .reviews-grid{grid-template-columns:repeat(2,1fr);gap:18px;}
}
@media (max-width:640px){
  .reviews-grid{grid-template-columns:1fr;}
  .review{padding:24px 20px 20px;}
  .review::before{font-size:70px;right:14px;}
  .reviews__foot .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){ .review{transition:none;} }

/* Карточки отзывов одной высоты: имена и даты стоят на одной линии */
.reviews-grid{align-items:stretch;}

/* Приглашение оставить отзыв — строка под карточками */
.review-cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-top:22px;padding:22px 26px;
  border:2px dashed var(--mint-line);border-radius:var(--r-card);
  background:rgba(255,255,255,.6);
}
.review-cta__text{display:flex;flex-direction:column;gap:5px;}
.review-cta b{font-size:19px;color:var(--teal-dark);}
.review-cta span{font-size:15px;line-height:1.5;color:var(--muted);}
.review-cta .btn{flex:none;}
.reviews__foot{margin-top:26px;}
.reviews__link{
  font-size:15px;color:var(--teal);
  text-decoration:underline;text-underline-offset:3px;
}
.reviews__link:hover{color:var(--teal-dark);}
@media (max-width:640px){
  .review-cta{flex-direction:column;align-items:stretch;text-align:center;gap:16px;padding:22px 20px;}
  .review-cta .btn{width:100%;}
  .reviews__foot .reviews__link{display:inline-block;padding:8px 0;}
}

/* ============================================================
   ОТЗЫВЫ НА ГЛАВНОЙ
   Пять отзывов разной длины: раскладка в колонки, карточка не
   режется между ними и держит свою высоту — короткий отзыв не
   тянет за собой пустоту, как в сетке одинаковых ячеек.
   Фон белый: он разделяет мятных «Специалистов» и кремовые
   «Новости», иначе три светлых блока сливаются в один.
   ============================================================ */
.reviews--white{background:var(--white);}
.reviews-grid--masonry{
  display:block;columns:3;column-gap:24px;
}
.reviews-grid--masonry .review{
  display:block;break-inside:avoid;margin:0 0 24px;
}
.reviews-grid--masonry .review__text + .review__text{margin-top:12px;}
@media (max-width:1000px){
  .reviews-grid--masonry{columns:2;column-gap:18px;}
  .reviews-grid--masonry .review{margin-bottom:18px;}
}
@media (max-width:640px){
  .reviews-grid--masonry{columns:1;}
}

/* ============================================================
   ЛЕНТА ОТЗЫВОВ НА ГЛАВНОЙ
   Карточки стоят в линию и одной высоты; что не поместилось —
   листается стрелками или пальцем. Длинный отзыв подрезан по
   строкам, иначе он вытягивает весь ряд.
   ============================================================ */
.reviews-slider{position:relative;}
.reviews-track{
  display:flex;align-items:stretch;gap:24px;
  overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding:4px 2px 10px;margin:0 -2px;
  scrollbar-width:none;
}
.reviews-track::-webkit-scrollbar{display:none;}
.reviews-track .review{
  flex:0 0 calc((100% - 48px) / 3);
  scroll-snap-align:start;margin:0;
}
.reviews-track .review__text{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:11;
  overflow:hidden;
}
.rev-arrow{
  top:50%;transform:translateY(-50%);
  font-size:26px;line-height:1;padding-bottom:3px;
}
.rev-arrow[hidden]{display:none;}
.spec-arrow.rev-arrow--prev{left:-20px;}
.reviews-slider .spec-arrow--prev{left:-20px;}
.reviews-slider .spec-arrow--next{right:-20px;}

@media (max-width:1000px){
  .reviews-track{gap:18px;}
  .reviews-track .review{flex:0 0 calc((100% - 18px) / 2);}
}
@media (max-width:640px){
  .reviews-track{
    gap:16px;padding-left:24px;padding-right:24px;margin:0 -24px;
    scroll-padding-left:24px;
  }
  .reviews-track .review{flex:0 0 84%;}
  .rev-arrow{display:none !important;}
}

/* Один отзыв в разделе — карточка по центру, не во всю ширину */
.reviews-grid--one{grid-template-columns:minmax(0,520px);justify-content:center;}

/* Лента из двух отзывов: карточки шире, чем в ряду из трёх */
@media (min-width:1001px){
  .reviews-track--two .review{flex:0 0 calc((100% - 24px) / 2);}
}

/* ============================================================
   LPG НА СТРАНИЦЕ «КРАСОТА И ФОРМА»
   Карточки те же, что в «Услугах раздела», только с заливкой
   вместо снимка: фотографий аппарата у нас нет, а подставлять
   чужую процедуру нельзя — человек читает снимок как услугу.
   Блок стоит отдельно от «Услуг раздела»: тот участок
   переписывает CRM, и дописанное руками там бы пропало.
   ============================================================ */
.lpg{background:var(--mint-soft);}
}

/* ============================================================
   ТЕКСТ ПЕРВОГО ЭКРАНА
   Первая строка — обещание, её читают сразу после названия;
   дальше два абзаца потише, чтобы длинный текст не давил.
   ============================================================ */
.hero--doctor .hero__slogan{
  font-size:22px;line-height:1.3;font-weight:600;
  color:#fff;margin:0 0 16px;max-width:540px;
}
.hero--doctor .hero__lead{
  font-size:17px;line-height:1.55;max-width:540px;margin:0 0 14px;
}
.hero--doctor .hero__lead--more{
  font-size:16px;color:rgba(255,255,255,.85);margin-bottom:30px;
}
@media (max-width:1340px) and (min-width:1001px){
  .hero--doctor .hero__slogan{font-size:20px;}
  .hero--doctor .hero__lead{font-size:16px;}
  .hero--doctor .hero__lead--more{font-size:15px;}
}
@media (max-width:1000px){
  .hero--doctor .hero__slogan{font-size:20px;margin-top:4px;}
  .hero--doctor .hero__lead{font-size:16px;}
  .hero--doctor .hero__lead--more{font-size:15.5px;}
}
@media (max-width:760px){
  .hero--doctor .hero__slogan{font-size:19px;line-height:1.35;}
  .hero--doctor .hero__lead{font-size:15.5px;}
  .hero--doctor .hero__lead--more{font-size:15px;margin-bottom:24px;}
}

/* Телефон и планшет: порядок первого экрана с новой строкой-обещанием */
@media (max-width:1000px){
  .hero--doctor .hero__slogan{grid-area:auto;order:3;margin:4px 0 14px;}
  .hero--doctor .hero__lead{order:4;}
  .hero--doctor .hero__actions{order:6;}
  .hero--doctor .hero__tags{order:7;}
}

/* Верхняя плашка остаётся первой: правило про нижние теги её не задевает */
@media (max-width:1000px){
  .hero--doctor .hero__tags--top{order:0;}
}

/* ============================================================
   СПЕЦИАЛИСТЫ — ЛЕНТА
   Специалистов стало больше четырёх: в один ряд они сжимались
   до узких колонок. Теперь карточка держит свою ширину, а ряд
   листается стрелками и пальцем.
   ============================================================ */
@media (min-width:761px){
  .spec-slider--one .spec-track{
    justify-content:safe center;
    overflow-x:auto;gap:24px;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;
    padding:6px 2px 14px;scrollbar-width:none;
  }
  .spec-slider--one .spec-track::-webkit-scrollbar{display:none;}
  .spec-card.spec-card--one{
    flex:0 0 232px;max-width:232px;scroll-snap-align:start;
  }
  .spec-card--one h4{font-size:19px;}
  .spec-card--one span{font-size:15px;}
  .spec-arrow{
    top:34%;transform:translateY(-50%);
    font-size:26px;line-height:1;padding-bottom:3px;
  }
  .spec-arrow[hidden]{display:none;}
}