/* ===== Центр лазерной дерматологии — премиальный дизайн ===== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&family=Caveat:wght@500;600;700&display=swap');

:root{
  --ink: #2b2420;
  --ink-soft: #6b5f57;
  --cream: #fbf6ec;
  --paper: #ffffff;
  --forest: #163f36;
  --forest-2: #1f5346;
  --sage: #eaf1e6;
  --gold: #c98a92;
  --gold-soft: #f7e6e2;
  --rose: #c98a92;
  --rose-soft: #f7e6e2;
  --leaf: #7a9a6e;
  --line: #ecdfd0;
  --shadow: 0 20px 50px -22px rgba(90,60,50,.20);
  --shadow-sm: 0 8px 24px -12px rgba(90,60,50,.16);
  --radius: 20px;
  --radius-sm: 12px;
  --max: 1160px;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', "Segoe UI", Arial, sans-serif;
  --script: 'Caveat', cursive;
}
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream) url('assets/site/hero-clinic.jpg') fixed center 30%/cover no-repeat;
  line-height: 1.6;
  -webkit-font-smoothing:antialiased;
}
@media (max-width: 900px){
  /* На мобильных background-attachment:fixed часто тормозит/глючит — отключаем параллакс */
  body{background-attachment: scroll;}
}
img{max-width:100%; display:block;}
a{color: var(--forest);}
.wrap{max-width: var(--max); margin: 0 auto; padding: 0 28px;}

/* ---------- Reveal-on-scroll ---------- */
.reveal-init{opacity:0; transform: translateY(12px); transition: opacity .5s ease-out, transform .5s ease-out;}
.reveal-init.is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal-init{opacity:1 !important; transform:none !important; transition:none !important;}
}

/* ---------- Before / after gallery ---------- */
.ba-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;}
@media (max-width:900px){.ba-grid{grid-template-columns: repeat(2,1fr);}}
@media (max-width:600px){.ba-grid{grid-template-columns: 1fr;}}
.ba-item{
  border-radius: var(--radius-sm); overflow:hidden; border:1px solid var(--line); background:var(--paper);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ba-item:hover{transform: translateY(-4px); box-shadow: var(--shadow);}
.ba-item img{width:100%; height:auto; aspect-ratio: 1 / 1; object-fit: cover; display:block;}
.ba-item .cap{padding:10px 14px; font-size:.8rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em;}
.ba-item{cursor: zoom-in;}
.ba-item img{transition: transform .3s ease;}
.ba-item:hover img{transform: scale(1.04);}

/* ---------- Document gallery (не обрезаем текст документа) ---------- */
.doc-grid .ba-item img{
  aspect-ratio: 4 / 3; object-fit: contain; background: var(--sage); padding:10px;
}

/* ---------- Лайтбокс для фото до/после ---------- */
.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(20,20,18,.92);
  display:flex; align-items:center; justify-content:center; padding: 30px;
  opacity:0; pointer-events:none; transition: opacity .25s ease;
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox img{max-width:min(92vw, 720px); max-height:82vh; border-radius: var(--radius-sm); box-shadow: var(--shadow); display:block;}
.lightbox .lightbox-cap{color:#fff; text-align:center; margin-top:14px; font-size:.95rem;}
.lightbox .lightbox-close{
  position:absolute; top:20px; right:24px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff;
  font-size:1.4rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lightbox .lightbox-close:hover{background:rgba(255,255,255,.22);}
.lightbox-inner{display:flex; flex-direction:column; align-items:center; max-width:100%;}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index:200; max-width:640px; margin:0 auto;
  background: var(--forest); color:#fff; border-radius: var(--radius-sm); padding:16px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; box-shadow: var(--shadow);
  animation: cookieUp .4s ease;
}
@keyframes cookieUp{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
.cookie-banner p{margin:0; font-size:.85rem; color:#dce9e4; flex:1; min-width:220px;}
.cookie-banner a{color:#fff; text-decoration:underline;}
.cookie-banner .btn{flex:none;}

/* ---------- Booking form ---------- */
.booking-form{display:grid; gap:14px; max-width:480px;}
.booking-form label{display:block; font-size:.82rem; font-weight:600; color:var(--forest); margin-bottom:6px;}
.booking-form input[type="text"], .booking-form input[type="tel"], .booking-form textarea{
  width:100%; border:1px solid var(--line); border-radius: var(--radius-sm); padding:12px 14px;
  font-family: var(--sans); font-size:.94rem; color:var(--ink); background:var(--paper);
}
.booking-form input:focus, .booking-form textarea:focus{outline:2px solid var(--rose); outline-offset:1px;}
.booking-form textarea{resize:vertical; min-height:80px;}
.booking-form .consent{display:flex; align-items:flex-start; gap:10px; font-size:.82rem; color:var(--ink-soft);}
.booking-form .consent input{margin-top:3px;}
.booking-form .consent a{color:var(--forest);}

/* ---------- Utility bar ---------- */
.util-bar{background: var(--forest); color:#cfe0da; font-size:.82rem; padding-top: env(safe-area-inset-top);}
.util-bar .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:9px 28px; flex-wrap:wrap;}
.util-bar a{color:#cfe0da; text-decoration:none;}
.util-bar a:hover{color:#fff;}
.util-bar .util-links{display:flex; gap:20px; flex-wrap:wrap;}
.util-bar .util-phone{font-weight:700; color:#fff;}
@media (max-width: 640px){
  /* На узких экранах строка адреса не помещается и разъезжается на 4 строки —
     оставляем только телефон, самое нужное для мобильного посетителя */
  .util-bar .wrap{padding:8px 20px; justify-content:center;}
  .util-bar .util-links{display:none;}
}

/* ---------- Header ---------- */
header.site{
  background: rgba(250,247,241,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  position: sticky; top:0; z-index: 50; transition: box-shadow .25s ease, border-color .25s ease;
}
/* Если над шапкой нет тёмной util-bar (страницы без адресной строки сверху),
   учитываем вырез/чёлку iPhone, чтобы шапка не пряталась под системной областью */
body:not(:has(.util-bar)) header.site{padding-top: env(safe-area-inset-top);}
header.site.scrolled{border-color: var(--line); box-shadow: 0 8px 24px -18px rgba(22,63,54,.35);}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 16px 0; position:relative;}
.nav-toggle{
  display:none; flex:none; width:40px; height:40px; padding:0; margin:0;
  background:none; border:none; cursor:pointer; align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.nav-toggle span{width:22px; height:2px; background:var(--forest); border-radius:2px; transition: transform .2s ease, opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform: translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform: translateY(-7px) rotate(-45deg);}
.logo{
  font-family: var(--serif); font-weight:600; font-size:1.28rem; color: var(--forest); text-decoration:none;
  display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; flex:none;
}
.logo small{font-family: var(--sans); font-weight:500; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px;}
.topbar{flex-wrap:nowrap;}
nav.main{display:flex; gap:20px; flex-wrap:nowrap; justify-content:flex-end; flex:none;}
nav.main a{
  color: var(--ink); text-decoration:none; font-size:.88rem; font-weight:500; white-space:nowrap;
  padding:6px 0; border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.top-actions{flex:none; white-space:nowrap;}
@media (max-width: 1220px) and (min-width: 761px){
  .topbar{flex-wrap:wrap; row-gap:10px;}
  .logo{flex:1 1 auto;}
  /* Сетка вместо flex-wrap: пункты распределяются ровными рядами,
     без одиночного "повисшего" элемента на отдельной строке */
  nav.main{
    order:3; width:100%; display:grid; grid-template-columns: repeat(3, 1fr);
    gap:10px 16px; padding-top:10px; border-top:1px solid var(--line);
  }
  nav.main a{text-align:center; padding:6px 4px;}
}
/* На телефонах меню всегда открытым не помещается и перекрывает половину экрана —
   сворачиваем в гамбургер, меню открывается поверх контента, а не раздувает шапку */
@media (max-width: 760px){
  /* Гамбургер — слева, перед логотипом */
  .topbar{flex-wrap:nowrap;}
  .nav-toggle{display:flex; order:1;}
  .logo{flex:1 1 auto; order:2; min-width:0;}
  .top-actions{order:3; flex:none;}
  /* .top-actions{flex:none} унаследован с десктопа и не даёт блоку сжаться —
     на мобильных номер телефона в шапке лишний (он есть в футере/на "Контактах"),
     прячем его, оставляя только компактную кнопку "Записаться" */
  .top-actions .phone-link{display:none;}
  nav.main{
    display:none; position:absolute; top:100%; left:0; right:0;
    grid-template-columns: repeat(2, 1fr); gap:8px; padding:16px 20px;
    background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    box-shadow: var(--shadow); z-index:60; max-height: calc(100vh - 100%); overflow-y:auto;
  }
  nav.main.open{display:grid;}
  nav.main a{text-align:center; padding:10px 4px;}
}
@media (max-width: 460px){
  /* На совсем узких экранах (320-360px) название клиники в одну строку не помещается */
  .logo{white-space:normal; font-size:1.05rem;}
}
nav.main a:hover, nav.main a.active{border-color: var(--gold); color: var(--forest);}
.top-actions{display:flex; align-items:center; gap:16px;}
.phone-link{font-weight:700; color:var(--forest); text-decoration:none; white-space:nowrap; font-size:.95rem;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; background: var(--forest); color:#fff !important; text-decoration:none;
  padding: 13px 26px; border-radius: 999px; font-weight:600; font-size:.94rem;
  border:none; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover{background: var(--forest-2); transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(22,63,54,.45);}
.btn.ghost{background:transparent; color:var(--forest) !important; border:1.5px solid var(--forest); box-shadow:none;}
.btn.ghost:hover{background:var(--sage); transform:translateY(-2px);}
.btn.gold{background: var(--gold); box-shadow: 0 14px 28px -14px rgba(185,146,90,.55);}
.btn.gold:hover{background:#a8636d;}
.btn.small{padding:9px 18px; font-size:.86rem;}
.btn.block{width:100%; justify-content:center;}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding: 80px 0 64px;}
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:520px;
  background: radial-gradient(60% 60% at 30% 20%, var(--sage) 0%, transparent 70%),
              radial-gradient(45% 45% at 85% 10%, var(--rose-soft) 0%, transparent 70%);
  z-index:-1;
}
.hero::after{
  content:"🌿"; position:absolute; font-size:5rem; opacity:.14; right:6%; top:6%; transform:rotate(18deg); z-index:-1;
}
.hero .wrap{display:flex; gap:52px; align-items:center; flex-wrap:wrap;}
.hero-text{flex:1 1 460px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family: var(--script); font-size:1.35rem; font-weight:600;
  color: #a8636d; margin:0 0 14px; background:var(--rose-soft); padding:6px 20px 8px; border-radius:999px;
}
.hero h1{font-family: var(--serif); font-weight:500; font-size:clamp(2.1rem, 3.6vw, 3.1rem); line-height:1.14; margin:0 0 18px; color:var(--forest); letter-spacing:-.01em;}
.hero p.lead{font-size:1.08rem; color:var(--ink-soft); margin:0 0 28px; max-width:48ch;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px;}
.trust-strip{display:flex; gap:24px; flex-wrap:wrap; font-size:.84rem; color:var(--ink-soft);}
.trust-strip span{display:flex; align-items:center; gap:7px;}
.hero-figure{
  flex:1 1 340px; background:var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding:28px; box-shadow: var(--shadow);
}
.hero-figure h3{font-family:var(--serif); font-weight:500; margin-top:0; color:var(--forest); font-size:1.15rem;}
.hero-figure ul{margin:0; padding-left:0; list-style:none; color:var(--ink-soft); font-size:.92rem;}
.hero-figure li{margin-bottom:12px; padding-left:26px; position:relative;}
.hero-figure li::before{content:"—"; position:absolute; left:0; color:var(--gold);}

/* ---------- Hero photo + tiles (kolibri-style) ---------- */
.hero-photo-grid{display:grid; grid-template-columns: 1.1fr 1fr; gap:20px; align-items:stretch;}
@media (max-width: 860px){.hero-photo-grid{grid-template-columns:1fr;}}
.hero-photo{
  border-radius: var(--radius); overflow:hidden; position:relative; min-height:340px;
  background: linear-gradient(0deg, rgba(20,30,22,.28) 0%, transparent 45%);
  border:1px solid rgba(255,255,255,.35);
  display:flex; align-items:flex-end; padding:22px;
}
.hero-photo::after{
  content:"🌸"; position:absolute; font-size:3.2rem; right:20px; top:18px; opacity:.5;
}
/* Подпись — отдельная стеклянная карточка поверх фото, как остальные карточки сайта,
   а не белый текст прямо на фотографии (плохо читался и не сочетался со стилем) */
.hero-photo .cap{
  background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: var(--radius-sm); padding: 16px 20px; box-shadow: var(--shadow-sm);
  display:inline-block; max-width: 100%;
}
.hero-photo .cap .eyebrow{margin-bottom:8px;}
.hero-photo .cap h2{font-family:var(--serif); font-weight:500; font-size:1.35rem; margin:0; color:var(--forest); line-height:1.25;}
.tiles-grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px;}
.tile{
  background:var(--paper); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding:24px 20px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tile:hover{transform:translateY(-4px); box-shadow: var(--shadow-sm); border-color:transparent;}
.tile .tile-ico{
  font-size:1.5rem; width:56px; height:56px; border-radius:50%; background: var(--rose-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:6px;
}
.tile-ico svg{width:24px; height:24px; stroke:#a8636d; fill:none;}
.why-item .ico svg{width:22px; height:22px; stroke:var(--forest); fill:none;}
.tile h4{margin:0; font-size:.94rem; font-weight:700; color:var(--forest);}
.tile p{margin:0; font-size:.82rem; color:var(--ink-soft);}

/* ---------- Doctor band ---------- */
.doctor-band{
  background: var(--sage); border-radius: var(--radius); padding:26px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.doctor-band .who{display:flex; align-items:center; gap:18px;}
.doctor-band .who .doctor-photo{width:64px; height:64px; font-size:1.3rem;}
.doctor-band .who h4{margin:0; font-size:1rem;}
.doctor-band .who p{margin:2px 0 0; font-size:.85rem; color:var(--ink-soft);}

/* ---------- VK promo band ---------- */
.vk-band{
  background: var(--sage); border-radius: var(--radius); overflow:hidden;
  display:flex; align-items:stretch; gap:0;
}
.vk-band .vk-photo{flex:0 0 260px;}
.vk-band .vk-photo img{width:100%; height:100%; object-fit:cover; display:block; min-height:220px;}
.vk-band .vk-text{padding:28px 32px; display:flex; flex-direction:column; justify-content:center; gap:8px;}
.vk-band .vk-text h3{margin:0; font-family:var(--serif);}
.vk-band .vk-text p{margin:0; color:var(--ink-soft); font-size:.94rem;}
.vk-band .vk-text .btn{align-self:flex-start; margin-top:8px;}
@media (max-width:700px){
  .vk-band{flex-direction:column;}
  .vk-band .vk-photo{flex:none; width:100%; height:180px;}
}

/* ---------- About points ---------- */
.about-points{display:grid; grid-template-columns: repeat(4,1fr); gap:20px;}
@media (max-width:900px){.about-points{grid-template-columns: repeat(2,1fr);}}
@media (max-width:600px){.about-points{grid-template-columns: 1fr;}}
.about-point{display:flex; gap:14px; align-items:flex-start;}
.about-point .n{
  font-family:var(--serif); font-weight:600; font-size:1.4rem; color:var(--gold); flex:none; width:36px;
}
.about-point p{margin:0; font-size:.92rem; color:var(--ink-soft);}

/* ---------- Rating badges ---------- */
.rating-strip{display:flex; gap:20px; flex-wrap:wrap; justify-content:center;}
.rating-badge{
  background:var(--paper); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding:16px 24px; text-align:center; min-width:140px;
}
.rating-badge .score{font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--forest);}
.rating-badge .label{font-size:.78rem; color:var(--ink-soft); margin-top:2px;}

/* ---------- Sections ---------- */
/* Секции полупрозрачные (не сплошные) — сквозь них по всему сайту слегка
   проступает зафиксированный фон body (параллакс), как на оригинальном сайте.
   Прозрачность небольшая, чтобы текст оставался полностью читаемым. */
section{padding: 68px 0; background: rgba(251,246,236,.98); position:relative;}
section.alt{background: rgba(255,255,255,.98); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
/* Герой полностью прозрачный — там картинка видна чётче всего */
.hero{background:none;}
footer.site{position:relative;}
.eyebrow-sm{text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:700; color:#a8636d; margin:0 0 10px;}
h2.section-title{font-family: var(--serif); font-weight:500; font-size:clamp(1.5rem,2.4vw,2.05rem); color:var(--forest); margin:0 0 10px; letter-spacing:-.01em;}
p.section-sub{color:var(--ink-soft); margin:0 0 36px; max-width:60ch; font-size:1.02rem;}
.section-head{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:30px;}
.section-head .section-title{margin-bottom:0;}
@media (max-width: 600px){
  /* На мобильных заголовок и кнопка встают друг под другом с явным отступом,
     чтобы кнопка не наезжала на карточки/таблицу ниже */
  .section-head{flex-direction:column; align-items:flex-start;}
  .section-head > a.btn{margin-top:4px;}
}

/* ---------- Grid / cards ---------- */
.grid{display:grid; gap:22px;}
.grid.cols-2{grid-template-columns: repeat(2, 1fr);}
.grid.cols-3{grid-template-columns: repeat(3, 1fr);}
.grid.cols-4{grid-template-columns: repeat(4, 1fr);}
@media (max-width: 900px){.grid.cols-3,.grid.cols-4{grid-template-columns: repeat(2,1fr);}}
@media (max-width: 600px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns: 1fr;}}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding:26px; display:flex; flex-direction:column; gap:8px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent;}
.card h3{margin:0 0 4px; font-size:1.06rem; color:var(--ink); font-weight:700;}
.card p{margin:0; color:var(--ink-soft); font-size:.92rem; flex:1;}
.card .price{font-weight:800; color:var(--forest); font-size:1.1rem; margin-top:8px; font-family:var(--serif);}
.card a.card-link{margin-top:12px; font-weight:600; font-size:.88rem; text-decoration:none; color:var(--forest); display:inline-flex; align-items:center; gap:4px;}
.card a.card-link::after{content:"→"; transition: transform .2s ease;}
.card:hover a.card-link::after{transform: translateX(4px);}

.why-item .ico{
  width:50px; height:50px; border-radius:14px; background:var(--sage);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:14px;
}

/* ---------- Doctors ---------- */
.doctor-card{display:flex; gap:22px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px; transition: transform .25s ease, box-shadow .25s ease; min-width:0;}
.doctor-card .doctor-info{min-width:0;}
@media (max-width: 420px){
  /* Фото + длинное ФИО в один ряд не помещаются на самых узких экранах */
  .doctor-card{flex-direction:column; align-items:flex-start; padding:22px;}
}
.doctor-card:hover{transform:translateY(-4px); box-shadow: var(--shadow);}
.doctor-photo{
  width:104px; height:104px; border-radius:50%; background: linear-gradient(150deg, var(--sage), var(--gold-soft)); flex:none;
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.9rem; color:var(--forest); font-weight:600;
  overflow:hidden;
}
.doctor-photo img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.doctor-info h3{margin:0 0 4px; font-size:1.15rem;}
.doctor-info .role{color:var(--gold); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px;}
.doctor-info ul{margin:10px 0 0; padding-left:0; list-style:none; color:var(--ink-soft); font-size:.9rem;}
.doctor-info li{margin-bottom:6px; padding-left:20px; position:relative;}
.doctor-info li::before{content:"·"; position:absolute; left:4px; color:var(--gold); font-weight:900;}

/* ---------- Price table ---------- */
.table-wrap{
  border-radius: var(--radius); border:1px solid var(--line); overflow:hidden; overflow-x:auto;
  background:var(--paper); box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
table.price-table{width:100%; min-width:480px; border-collapse: separate; border-spacing:0;}
table.price-table th, table.price-table td{padding:16px 22px; text-align:left; font-size:.94rem;}
table.price-table th{
  background: var(--forest); color:#fff; font-weight:700; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.06em; padding-top:14px; padding-bottom:14px;
}
table.price-table th:last-child, table.price-table td.price-cell{text-align:right;}
table.price-table td{border-bottom:1px solid var(--line); vertical-align:middle;}
table.price-table tbody tr:nth-child(even) td{background: var(--cream);}
table.price-table tbody tr:last-child td{border-bottom:none;}
table.price-table tbody tr{transition: background .15s ease;}
table.price-table tbody tr:hover td{background: var(--sage);}
table.price-table td a{
  color: var(--ink); text-decoration:none; font-weight:600; background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat:no-repeat; background-size: 0% 1.5px; background-position: 0 100%; transition: background-size .2s ease, color .2s ease;
  padding-bottom:2px;
}
table.price-table td a:hover{color:var(--forest); background-size: 100% 1.5px;}
table.price-table td.price-cell{white-space:nowrap; font-weight:800; color:var(--forest); font-family:var(--serif); font-size:1.02rem;}
table.price-table td.price-cell .sub{display:block; font-family:var(--sans); font-weight:400; font-size:.76rem; color:var(--ink-soft); margin-top:2px;}

/* ---------- Steps ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr; gap:16px;}
.steps li{display:flex; gap:18px; background:var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding:18px 22px; transition: transform .2s ease, box-shadow .2s ease;}
.steps li:hover{transform: translateX(4px); box-shadow: var(--shadow-sm);}
.steps .num{
  flex:none; width:36px; height:36px; border-radius:50%; background:var(--forest); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.95rem; font-family:var(--serif);
}

/* ---------- FAQ ---------- */
details.faq{background:var(--paper); border:1px solid var(--line); border-radius: var(--radius-sm); padding:16px 20px; margin-bottom:10px; transition: border-color .2s ease;}
details.faq:hover{border-color: var(--gold);}
details.faq summary{cursor:pointer; font-weight:600; color:var(--ink); list-style:none;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::before{content:"+"; color:var(--gold); font-weight:800; margin-right:10px;}
details.faq[open] summary::before{content:"–";}
details.faq p{color:var(--ink-soft); margin:12px 0 0;}

/* ---------- Reviews ---------- */
.review-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition: transform .25s ease, box-shadow .25s ease;}
.review-card:hover{transform:translateY(-4px); box-shadow: var(--shadow);}
.review-card .name{font-weight:700; margin-bottom:6px; font-family:var(--serif); font-size:1.05rem;}
.review-card .stars{color:var(--gold); margin-bottom:10px; font-size:.9rem; letter-spacing:2px;}

/* ---------- CTA band ---------- */
.cta-band{
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-2) 100%); color:#fff; border-radius: var(--radius);
  padding:42px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-band::after{content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:rgba(185,146,90,.18);}
.cta-band h3{font-family:var(--serif); font-weight:500; margin:0 0 8px; font-size:1.4rem;}
.cta-band p{margin:0; color:#cfe0da;}
.cta-band .btn{background:#fff; color:var(--forest) !important;}
.cta-band .btn:hover{background:var(--gold-soft);}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.85rem; color:var(--ink-soft); margin: 20px 0;}
.crumbs a{color:var(--ink-soft); text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}

/* ---------- Service photo ---------- */
.service-photo-wrap{padding-top:36px; padding-bottom:0;}
.service-photo{
  width:100%; max-width:520px; margin:0 auto; border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow);
}
.service-photo img{width:100%; display:block;}

/* ---------- Service page ---------- */
.service-hero{background: rgba(234,241,230,.92); padding: 40px 0; position:relative; overflow:hidden;}
.service-hero h1{font-family: var(--serif); font-weight:500; margin:0 0 14px; color:var(--forest); font-size:clamp(1.6rem,2.6vw,2.2rem);}
.service-hero .price-badge{
  display:inline-block; background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:9px 20px; font-weight:700; color:var(--forest); margin-right:12px; font-size:.88rem;
}
.service-body{display:grid; grid-template-columns: 2fr 1fr; gap:44px; align-items:start;}
@media (max-width: 860px){
  .service-body{grid-template-columns:1fr;}
  /* На мобильных карточка становится обычным блоком в потоке, а не "прилипает" к экрану —
     иначе при скролле она наезжает на текст и кнопки под ней */
  .sidebar-card{position:static; top:auto;}
}
.service-body h2{font-family: var(--serif); font-weight:500; font-size:1.35rem; color:var(--forest); margin: 32px 0 12px;}
.service-body h2:first-child{margin-top:0;}
.sidebar-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px; position:sticky; top:100px; box-shadow: var(--shadow-sm);}
.sidebar-card h3{margin-top:0; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:700;}
.sidebar-card .price{font-family:var(--serif); font-size:1.7rem; font-weight:600; color:var(--forest); margin:6px 0 18px;}
.sidebar-card ul{padding-left:0; list-style:none; color:var(--ink-soft); font-size:.9rem;}
.sidebar-card li{margin-bottom:8px; padding-left:18px; position:relative;}
.sidebar-card li::before{content:"—"; position:absolute; left:0; color:var(--gold);}

/* ---------- Footer ---------- */
footer.site{background: rgba(22,63,54,.94); color:#dce9e4; padding:52px 0 26px; margin-top:0;}
.footer-grid{display:grid; grid-template-columns: 2fr 1fr 1fr; gap:34px; margin-bottom:30px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{margin:0 0 14px; color:#fff; font-family:var(--serif); font-weight:500; font-size:1rem;}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{margin-bottom:9px; font-size:.9rem;}
.footer-grid a{color:#b7ccc4; text-decoration:none;}
.footer-grid a:hover{color:#fff;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14); padding-top:20px; font-size:.78rem; color:#9db6ad;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.footer-bottom a{color:#9db6ad;}
.footer-bottom a:hover{color:#fff;}

/* ---------- Utility ---------- */
.list-check{list-style:none; padding:0; margin:0;}
.list-check li{padding-left:1.7em; position:relative; margin-bottom:10px; color:var(--ink-soft);}
.list-check li::before{content:"✓"; position:absolute; left:0; color:var(--forest); font-weight:700;}
.notice{background: var(--gold-soft); border:1px solid #e3c0c4; border-radius: var(--radius-sm); padding:16px 20px; font-size:.9rem; color:#7a4a4f;}