/* ============================================================
   Услуги Воронеж — общий стиль сайта
   Деловой минимализм: тёплый светлый фон, глубокий навигатор-синий,
   тёплый акцент действия. Шрифты: Manrope (заголовки/UI), Golos Text (текст).
   ============================================================ */

:root{
  /* Unbounded больше не подключаем: использовался только для водяного знака */
  --f-display: var(--f-text);
  --f-text: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bg:        #F1EEE8;
  --surface:   #FFFFFF;
  --surface-2: #E9E4DA;
  --ink:       #23211F;
  --muted:     #6B6459;
  --faint:     #9A9186;
  --line:      #E2DCD1;
  --line-2:    #D2CABC;

  /* тёмный графит вместо синего — под плитку логотипа */
  --navy:      #23211F;
  --navy-2:    #302C28;
  --navy-3:    #3D3833;
  --navy-soft: #EAE5DB;
  --dark-deep:  #1A1917;

  --accent:    #C7451E;
  --accent-2:  #A83714;
  --accent-soft:#F7E7E0;

  --ok:        #2C7A52;

  --maxw: 1200px;
  --gut: clamp(18px, 4vw, 44px);
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --shadow-s: 0 1px 2px rgba(35,33,31,.06), 0 1px 3px rgba(35,33,31,.05);
  --shadow-m: 0 6px 18px rgba(35,33,31,.09), 0 2px 6px rgba(35,33,31,.05);
  --shadow-l: 0 22px 56px rgba(35,33,31,.18);
  --ring: 0 0 0 4px rgba(199,69,30,.2);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--f-text);
  color:var(--ink);
  background:var(--bg);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--f-text); font-weight:800; line-height:1.1; letter-spacing:-.018em; margin:0; color:var(--ink); }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:6px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.eyebrow{
  font-family:var(--f-text); font-weight:600; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:9px; height:9px; border-radius:2px; background:var(--accent); display:inline-block; }
.eyebrow.num::before, .eyebrow:has(svg)::before{ display:none; }
.cta .eyebrow::before{ background:#fff; }
.eyebrow.num i{ font-style:normal; color:var(--accent); }
.section{ padding-block: clamp(54px, 8vw, 100px); }
.section-head{ max-width:680px; margin-bottom: clamp(30px,4vw,48px); }
.section-head h2{ font-size: clamp(25px, 3.7vw, 40px); margin-top:14px; letter-spacing:-.02em; }
.section-head p{ color:var(--muted); font-size:clamp(16px,1.6vw,19px); margin-top:16px; }
.lead{ font-size:clamp(17px,1.8vw,20px); color:var(--muted); line-height:1.55; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-text); font-weight:700; font-size:16px;
  padding:14px 24px; border-radius:var(--r-m); border:1.5px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s, color .2s;
  white-space:nowrap; line-height:1;
}
.btn svg{ width:19px; height:19px; }
.btn-accent{ background:var(--accent); color:#fff; box-shadow:0 6px 16px rgba(199,69,30,.26); }
.btn-accent:hover{ background:var(--accent-2); transform:translateY(-2px); box-shadow:0 12px 26px rgba(199,69,30,.32); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-2); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--navy); background:var(--surface); transform:translateY(-2px); }
.btn-light{ background:#fff; color:var(--navy); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-m); }
.btn-block{ width:100%; }
.btn-lg{ padding:17px 30px; font-size:17px; }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:60; background:rgba(241,238,232,.9); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); overflow-anchor:none; }
.site-header{ transform:translateY(0); }
.site-header{ --tb-h:42px; }
.site-header.compact{ transform:translateY(calc(var(--tb-h) * -1)); }
.site-header .topbar{ transition:opacity .25s ease; }
.site-header.hide{ transform:translateY(-100%); }
.topbar{ background:var(--dark-deep); color:#cfc7bc; font-size:14px; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:42px; }
.topbar a{ color:#e7edf5; }
.topbar .tb-left{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.topbar .tb-item{ display:inline-flex; align-items:center; gap:8px; color:#c4bcb1; }
.topbar .tb-item svg{ width:15px; height:15px; color:var(--accent); }
.topbar .tb-item strong{ color:#fff; font-weight:600; }
.topbar .tb-right{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:600; }
.topbar .tb-right .dot{ width:8px; height:8px; border-radius:50%; background:#37c97f; box-shadow:0 0 0 4px rgba(55,201,127,.18); }

.navbar{ display:flex; align-items:center; gap:24px; min-height:74px; }
.brand{ display:inline-flex; align-items:center; gap:12px; flex-shrink:0; }
.brand-mark{ width:46px; height:46px; border-radius:13px; background:var(--accent); color:#fff; display:grid; place-items:center; overflow:hidden; font-family:var(--f-text); font-weight:700; font-size:17px; letter-spacing:.01em; box-shadow:0 4px 14px rgba(199,69,30,.26); }
.brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand-name{ display:flex; flex-direction:column; line-height:1; gap:4px; }
.brand-name .bn-top{ font-family:var(--f-text); font-weight:700; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); }
.brand-name b{ font-family:var(--f-text); font-weight:700; font-size:18px; letter-spacing:-.02em; color:var(--ink); }
.brand-name span:not(.bn-top){ font-size:12px; color:var(--muted); letter-spacing:.02em; }

.nav-menu{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-menu a{ font-family:var(--f-text); font-weight:600; font-size:15.5px; color:var(--ink); padding:9px 14px; border-radius:9px; transition:background .15s,color .15s; white-space:nowrap; }
.nav-menu a:hover{ background:var(--surface-2); }
.nav-menu a.active{ color:var(--accent-2); }
.nav-cta{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-phone{ display:inline-flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
.nav-phone b{ font-family:var(--f-text); font-weight:700; font-size:17px; color:var(--navy); letter-spacing:-.01em; }
.nav-phone span{ font-size:12px; color:var(--muted); }

.burger{ display:none; width:46px; height:46px; border:1px solid var(--line-2); background:var(--surface); border-radius:11px; cursor:pointer; align-items:center; justify-content:center; color:var(--navy); }
.burger svg{ width:22px; height:22px; }

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:80; display:none; }
.drawer.open{ display:block; }
.drawer-back{ position:absolute; inset:0; background:rgba(21,25,31,.42); backdrop-filter:blur(2px); }
.drawer-panel{ position:absolute; top:0; right:0; height:100%; width:min(86vw,360px); background:var(--bg); box-shadow:var(--shadow-l); padding:22px; display:flex; flex-direction:column; gap:6px; overflow-y:auto; transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1); }
.drawer.open .drawer-panel{ transform:translateX(0); }
.drawer-panel .dp-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.drawer-close{ width:42px; height:42px; border:1px solid var(--line-2); background:var(--surface); border-radius:10px; display:grid; place-items:center; cursor:pointer; }
.drawer-panel a.dlink{ font-family:var(--f-text); font-weight:700; font-size:18px; padding:13px 12px; border-radius:10px; }
.drawer-panel a.dlink:hover{ background:var(--surface-2); }
.drawer-panel hr{ border:none; border-top:1px solid var(--line); margin:12px 0; }

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--dark-deep); color:#fff; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
.hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(20,19,17,.96) 0%,rgba(20,19,17,.84) 42%,rgba(20,19,17,.46) 100%); }
.hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.024) 0 1px, transparent 1px 3px); }
.hero .wrap{ position:relative; z-index:2; padding-block: clamp(58px, 9vw, 118px); }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:center; }
.hero h1{ color:#fff; font-size:clamp(27px,4vw,46px); line-height:1.1; }
.hero h1 .hl{ color:#fff; box-shadow: inset 0 -.18em 0 var(--accent); }
.hero h1{ letter-spacing:-.022em; }
.hero-sub{ margin-top:22px; font-size:clamp(17px,1.9vw,21px); color:#cec6ba; max-width:30em; line-height:1.5; }
.hero-eyebrow{ color:#fff; }
.hero-eyebrow::before{ background:var(--accent); }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.hero-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:34px; }
.chip{ display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); color:#f0eae1; padding:9px 15px; border-radius:999px; font-size:14.5px; font-weight:600; font-family:var(--f-text); }
.chip svg{ width:16px; height:16px; color:var(--accent); }

/* hero side callback card */
.hero-card{ background:#fff; color:var(--ink); border-radius:var(--r-l); padding:26px; box-shadow:var(--shadow-l); }
.hero-card h3{ font-size:18px; }
.hero-card p.hc-sub{ color:var(--muted); font-size:15px; margin-top:6px; }
.field{ margin-top:14px; }
.field label{ display:block; font-size:13px; font-weight:700; font-family:var(--f-text); color:var(--muted); margin-bottom:6px; }
.field input, .field textarea{ width:100%; padding:13px 15px; border:1.5px solid var(--line-2); border-radius:var(--r-m); font:inherit; font-size:16px; background:var(--surface); color:var(--ink); transition:border-color .15s, box-shadow .15s; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.form-note{ font-size:12.5px; color:var(--faint); margin-top:12px; line-height:1.45; }
.form-ok{ display:none; background:var(--accent-soft); border:1px solid #f1c9b9; color:var(--accent-2); padding:14px 16px; border-radius:var(--r-m); font-weight:600; font-size:15px; margin-top:14px; }

/* ---------- stats band ---------- */
.stats{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:30px 26px 32px; border-right:1px solid var(--line); position:relative; }
.stat::before{ content:""; display:block; width:10px; height:10px; border-radius:2px; background:var(--accent); margin-bottom:16px; }
.stat:last-child{ border-right:none; }
.stat b{ font-family:var(--f-text); font-weight:700; font-size:clamp(26px,3vw,36px); color:var(--accent-2); letter-spacing:-.025em; display:block; }
.stat span{ color:var(--muted); font-size:15px; margin-top:6px; display:block; }

/* ---------- services grid ---------- */
.services{ background:var(--bg); }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 24px; display:flex; flex-direction:column; gap:14px; transition:transform .18s ease, box-shadow .2s ease, border-color .2s; position:relative; overflow:hidden; }
.svc-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:var(--line-2); }
.svc-card:hover::before{ transform:scaleX(1); }
.svc-ico{ width:54px; height:54px; border-radius:14px; background:var(--navy-soft); color:var(--ink); display:grid; place-items:center; transition:background .2s,color .2s,transform .2s; }
.svc-card:hover .svc-ico{ background:var(--accent); color:#fff; transform:rotate(-4deg); }
.svc-card:hover .svc-ico{ background:var(--accent); color:#fff; }
.svc-ico svg{ width:26px; height:26px; }
.svc-card h3{ font-size:16.5px; line-height:1.3; letter-spacing:-.005em; }
.svc-card p{ color:var(--muted); font-size:15px; line-height:1.5; flex:1; }
.svc-more{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-text); font-weight:700; font-size:14.5px; color:var(--accent-2); margin-top:2px; }
.svc-more svg{ width:16px; height:16px; transition:transform .2s; }
.svc-card:hover .svc-more svg{ transform:translateX(4px); }

/* ---------- why us ---------- */
.why{ background:var(--surface); }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 28px; }
.why-item{ display:flex; gap:16px; padding:22px 0; border-top:1px solid var(--line); }
.why-item{ transition:border-color .2s; }
.why-item:hover{ border-top-color:var(--accent); }
.why-item .wi-ico{ flex-shrink:0; width:46px; height:46px; border-radius:12px; background:var(--accent-soft); color:var(--accent-2); display:grid; place-items:center; transition:background .2s,color .2s; }
.why-item:hover .wi-ico{ background:var(--accent); color:#fff; }
.why-item .wi-ico svg{ width:23px; height:23px; }
.why-item h3{ font-size:15.5px; margin-bottom:6px; line-height:1.3; }
.why-item p{ color:var(--muted); font-size:14.5px; line-height:1.5; }

/* ---------- process ---------- */
.process{ background:var(--dark-deep); color:#fff; position:relative; overflow:hidden; }
.process::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 9px); pointer-events:none; }
.process .wrap{ position:relative; z-index:2; }
.process .section-head h2{ color:#fff; }
.process .section-head p{ color:#bdb4a8; }
.process .eyebrow{ color:#fff; }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step; }
.step{ background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.11); border-radius:var(--r-l); padding:28px 24px; position:relative; transition:background .2s, border-color .2s; }
.step:hover{ background:rgba(255,255,255,.075); border-color:rgba(199,69,30,.55); }
.step .num{ font-family:var(--f-text); font-weight:800; font-size:15px; width:40px; height:40px; border-radius:11px; background:var(--accent); color:#fff; display:grid; place-items:center; margin-bottom:18px; box-shadow:0 6px 16px rgba(199,69,30,.3); }
.step h3{ color:#fff; font-size:16px; margin-bottom:9px; line-height:1.3; }
.step p{ color:#bdb4a8; font-size:14.5px; line-height:1.5; }

/* ---------- gallery ---------- */
.gallery{ background:var(--bg); }
.gal-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; }
.gal-item{ border-radius:var(--r-m); overflow:hidden; position:relative; background:var(--surface-2); }
.gal-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gal-item:hover img{ transform:scale(1.06); }
.gal-item.wide{ grid-column:span 2; }
.gal-item.tall{ grid-row:span 2; }
.gal-cap{ position:absolute; left:0; right:0; bottom:0; padding:16px 14px; background:linear-gradient(transparent,rgba(20,19,17,.82)); color:#fff; font-family:var(--f-text); font-weight:700; font-size:14.5px; }
.gal-item::after{ content:""; position:absolute; inset:0; border:2px solid transparent; border-radius:inherit; transition:border-color .2s; pointer-events:none; }
.gal-item:hover::after{ border-color:var(--accent); }

/* ---------- CTA band ---------- */
.cta{ background:var(--accent); color:#fff; position:relative; overflow:hidden; }
.cta::after{ content:"УВ"; position:absolute; left:58%; bottom:-14%; font-family:var(--f-display); font-weight:800; font-size:clamp(150px,19vw,250px); line-height:.8; color:rgba(255,255,255,.1); letter-spacing:-.05em; pointer-events:none; }
@media (max-width: 1040px){ .cta::after{ display:none; } }
.cta .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:1fr; gap:40px; align-items:center; padding-block:clamp(44px,6vw,72px); }
.cta h2{ color:#fff; font-size:clamp(23px,2.9vw,34px); letter-spacing:-.02em; }
.cta p{ color:rgba(255,255,255,.9); margin-top:14px; font-size:18px; max-width:30em; }
.cta-phone{ font-family:var(--f-text); font-weight:800; font-size:clamp(23px,2.7vw,31px); color:#fff; margin-top:20px; display:inline-flex; align-items:center; gap:12px; }
.cta-card{ background:#fff; color:var(--ink); border-radius:var(--r-l); padding:24px; box-shadow:var(--shadow-l); }
.cta-card h3{ font-size:18px; }

/* ---------- footer ---------- */
.site-footer{ background:var(--dark-deep); color:#b0a79b; font-size:15px; border-top:3px solid var(--accent); }
.site-footer .f-brand .brand-name .bn-top{ color:#8b8177; }
.footer-top{ padding-block:clamp(44px,6vw,68px); display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px; }
.site-footer h3{ font-family:var(--f-text); color:#fff; font-size:15px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:18px; font-weight:700; }
.site-footer .f-brand .brand-name b{ color:#fff; }
.site-footer .f-brand .brand-name span{ color:#8b8177; }
.site-footer p{ color:#9d9488; line-height:1.6; }
.f-links a{ display:block; padding:6px 0; color:#b0a79b; transition:color .15s, padding .15s; }
.f-links a:hover{ color:#fff; padding-left:5px; }
.f-contact .fc-item{ display:flex; gap:11px; margin-bottom:16px; align-items:flex-start; }
.f-contact .fc-item svg{ width:18px; height:18px; color:var(--accent); flex-shrink:0; margin-top:2px; }
.f-contact a{ color:#fff; font-weight:600; }
.f-contact span{ display:block; color:#8b8177; font-size:13px; }
.footer-bot{ border-top:1px solid rgba(255,255,255,.09); padding-block:20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px; color:#857c72; }
.footer-bot a{ color:#a9a094; }

/* ---------- breadcrumbs ---------- */
.crumbs{ background:var(--surface); border-bottom:1px solid var(--line); }
.crumbs .wrap{ display:flex; align-items:center; gap:9px; padding-block:14px; font-size:14px; color:var(--muted); flex-wrap:wrap; }
.crumbs a:hover{ color:var(--accent-2); }
.crumbs svg{ width:14px; height:14px; color:var(--faint); }
.crumbs .cur{ color:var(--ink); font-weight:600; }

/* ---------- service detail ---------- */
.svc-hero{ background:var(--dark-deep); color:#fff; position:relative; overflow:hidden; }
.svc-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 88% 12%, rgba(199,69,30,.28), transparent 55%); pointer-events:none; }
.svc-hero .wrap{ position:relative; z-index:2; }
.svc-hero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; padding-block:clamp(40px,5vw,72px); }
.svc-hero h1{ color:#fff; font-size:clamp(24px,3.4vw,38px); margin-top:16px; line-height:1.12; letter-spacing:-.02em; }
.svc-hero p{ color:#cec6ba; font-size:clamp(16px,1.8vw,20px); margin-top:18px; line-height:1.5; }
.svc-hero .hero-eyebrow{ color:#fff; }
.svc-hero-actions{ display:flex; gap:13px; flex-wrap:wrap; margin-top:28px; }
.svc-photo{ border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-l); aspect-ratio:4/3; background:var(--navy-2); }
.svc-photo img{ width:100%; height:100%; object-fit:cover; }
.ph{ width:100%; height:100%; min-height:280px; border-radius:var(--r-l); display:grid; place-items:center; text-align:center;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 12px, rgba(255,255,255,.09) 12px 24px);
  border:1px dashed rgba(255,255,255,.28); color:#aebbce; }
.ph code{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:13px; color:#c9d4e3; background:rgba(0,0,0,.2); padding:8px 12px; border-radius:8px; max-width:80%; }
.ph .ph-t{ font-family:var(--f-text); font-weight:700; color:#fff; font-size:16px; margin-bottom:10px; }
.ph-brand{ border:none; background-color:var(--navy-2); background-image:radial-gradient(circle at 78% 18%, rgba(199,69,30,.34), transparent 58%); padding:28px; }
.ph-brand .ph-ico{ width:60px; height:60px; border-radius:16px; background:var(--accent); color:#fff; display:inline-grid; place-items:center; margin-bottom:16px; }
.ph-brand .ph-ico svg{ width:30px; height:30px; }
.ph-brand .ph-t{ font-size:19px; letter-spacing:-.015em; line-height:1.25; }
.ph-brand p{ color:#bdb4a8; font-size:15px; max-width:22em; margin:0 auto; line-height:1.5; }

/* карта зоны обслуживания */
.map-box{ border-radius:var(--r-l); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-m); background:var(--navy-soft); }
.map-box iframe{ display:block; width:100%; height:min(52vw,420px); min-height:280px; border:0; }

/* skip-link */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--accent); color:#fff; font-family:var(--f-text); font-weight:700; padding:12px 18px; border-radius:0 0 10px 0; }
.skip-link:focus{ left:0; }

.detail{ display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start; }
.detail-main h2{ font-size:clamp(21px,2.5vw,27px); margin:0 0 16px; letter-spacing:-.015em; }
.detail-main h2:not(:first-child){ margin-top:40px; }
.detail-main p{ color:var(--muted); font-size:17px; line-height:1.65; margin-bottom:16px; }
.feat-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin-top:8px; }
.feat-list li{ display:flex; gap:11px; align-items:flex-start; font-size:16px; color:var(--ink); line-height:1.45; }
.feat-list li svg{ width:21px; height:21px; color:var(--ok); flex-shrink:0; margin-top:1px; }
.detail-main .feat-list + p{ margin-top:18px; }
/* numbered steps inside service copy */
.step-list{ counter-reset:sl; list-style:none; padding:0; margin:8px 0 0; display:grid; gap:12px; }
.step-list li{ counter-increment:sl; position:relative; padding-left:40px; font-size:16px; color:var(--ink); line-height:1.5; }
.step-list li::before{ content:counter(sl); position:absolute; left:0; top:1px; width:27px; height:27px; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--f-text); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; }
.detail-aside{ position:sticky; top:96px; display:flex; flex-direction:column; gap:18px; }
.aside-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:24px; box-shadow:var(--shadow-s); }
.aside-card.navy{ background:var(--navy); color:#fff; border-color:transparent; }
.aside-card.navy h3{ color:#fff; }
.aside-card.navy p{ color:#cec6ba; }
.aside-card h3{ font-size:17px; margin-bottom:8px; line-height:1.3; }
.aside-card .ac-phone{ font-family:var(--f-text); font-weight:800; font-size:21px; color:#fff; display:block; margin:14px 0 4px; }
.aside-card.navy .ac-sub{ color:#a9a094; font-size:13.5px; }
.price-note{ display:flex; gap:11px; align-items:flex-start; color:var(--muted); font-size:14.5px; margin-top:14px; line-height:1.5; }
.price-note svg{ width:18px; height:18px; color:var(--accent); flex-shrink:0; margin-top:2px; }

/* related */
.related{ background:var(--surface); }
.rel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.rel-card{ display:flex; align-items:center; gap:13px; padding:16px; border:1px solid var(--line); border-radius:var(--r-m); transition:border-color .2s, transform .15s; background:var(--bg); }
.rel-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.rel-card .ri{ width:42px; height:42px; border-radius:10px; background:var(--navy-soft); color:var(--navy); display:grid; place-items:center; flex-shrink:0; }
.rel-card .ri svg{ width:21px; height:21px; }
.rel-card b{ font-family:var(--f-text); font-weight:700; font-size:15px; line-height:1.2; }

/* generic content page */
.page-hero{ background:var(--dark-deep); color:#fff; position:relative; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 90% 8%, rgba(199,69,30,.26), transparent 52%); pointer-events:none; }
.page-hero .wrap{ padding-block:clamp(44px,5.4vw,76px); position:relative; z-index:2; }
.page-hero h1{ color:#fff; font-size:clamp(25px,3.6vw,40px); margin-top:14px; letter-spacing:-.02em; line-height:1.12; }
.page-hero p{ color:#cec6ba; font-size:clamp(16px,1.8vw,20px); margin-top:16px; max-width:42em; line-height:1.5; }
.prose{ max-width:760px; }
.prose h2{ font-size:clamp(20px,2.4vw,26px); margin:38px 0 14px; letter-spacing:-.015em; }
.prose p{ color:var(--muted); font-size:17px; line-height:1.7; margin-bottom:16px; }
.prose strong{ color:var(--ink); }

.contact-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:start; }
.contact-cards{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
.ci-card{ display:flex; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:22px; }
.ci-card .ci-ico{ width:48px; height:48px; border-radius:12px; background:var(--accent-soft); color:var(--accent-2); display:grid; place-items:center; flex-shrink:0; }
.ci-card .ci-ico svg{ width:23px; height:23px; }
.ci-card h3{ font-size:15.5px; margin-bottom:6px; }
.ci-card a, .ci-card p{ color:var(--muted); font-size:16px; }
.ci-card a.big{ color:var(--accent-2); font-family:var(--f-text); font-weight:700; font-size:19px; letter-spacing:-.015em; }
.ci-card{ transition:border-color .2s, transform .15s; }
.ci-card:hover{ border-color:var(--line-2); transform:translateY(-2px); }

/* ---------- reveal on scroll (only when JS opts in) ---------- */
@media (prefers-reduced-motion: no-preference){
  html.js-reveal [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  html.js-reveal [data-reveal].in{ opacity:1; transform:none; }
  html.js-reveal [data-reveal][data-delay="1"]{ transition-delay:.07s; }
  html.js-reveal [data-reveal][data-delay="2"]{ transition-delay:.14s; }
  html.js-reveal [data-reveal][data-delay="3"]{ transition-delay:.21s; }
}

/* ---------- FAQ ---------- */
.faq-list{ max-width:840px; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.faq-item[open]{ border-color:var(--line-2); box-shadow:var(--shadow-s); }
.faq-item summary{ cursor:pointer; list-style:none; padding:20px 22px; font-family:var(--f-text); font-weight:600; font-size:16.5px; color:var(--ink); display:flex; justify-content:space-between; gap:18px; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--accent-2); }
.faq-item .fq-ico{ flex-shrink:0; width:32px; height:32px; border-radius:9px; background:var(--navy-soft); color:var(--ink); display:grid; place-items:center; transition:transform .25s ease, background .2s, color .2s; }
.faq-item .fq-ico svg{ width:18px; height:18px; }
.faq-item[open] .fq-ico{ transform:rotate(45deg); background:var(--accent); color:#fff; }
.faq-item .fq-body{ padding:0 22px 20px; color:var(--muted); font-size:16px; line-height:1.62; }
.faq-item .fq-body a{ color:var(--accent-2); font-weight:600; }

/* ---------- responsive ---------- */
/* узкий десктоп: сжимаем меню, чтобы шапка не выезжала */
@media (max-width: 1160px) and (min-width: 1041px){
  .navbar{ gap:16px; }
  .nav-phone{ display:none; }
  .nav-menu{ gap:0; }
  .nav-menu a{ font-size:14.5px; padding:8px 10px; }
  .nav-cta .btn{ padding:13px 18px; font-size:15px; }
}
@media (max-width: 1040px){
  .hero-grid{ grid-template-columns:1fr; gap:34px; }
  .hero-card{ max-width:460px; }
  .nav-menu{ display:none; }
  .nav-phone{ display:none; }
  .burger{ display:flex; }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .detail{ grid-template-columns:1fr; }
  .detail-aside{ position:static; flex-direction:row; flex-wrap:wrap; }
  .aside-card{ flex:1; min-width:240px; }
  .svc-hero .wrap{ grid-template-columns:1fr; }
  .rel-grid{ grid-template-columns:1fr 1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width: 860px){
  .svc-grid{ grid-template-columns:1fr 1fr; }
  .stats .wrap{ grid-template-columns:1fr 1fr; }
  .stat:nth-child(2){ border-right:none; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line); }
  .gal-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:170px; }
  .cta .wrap{ grid-template-columns:1fr; }
  .topbar .tb-left .tb-item.hide-sm{ display:none; }
}
@media (max-width: 560px){
  body{ font-size:16px; }
  .svc-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .gal-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:140px; }
  .gal-item.wide{ grid-column:span 2; }
  .feat-list{ grid-template-columns:1fr; }
  .rel-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .contact-cards{ grid-template-columns:1fr; }
  .topbar .tb-item.hide-xs{ display:none; }
  .stat{ padding:22px 18px; }
  /* header: rely on burger + sticky topbar phone, hide CTA button to avoid overflow */
  .nav-cta .btn-accent{ display:none; }
  .navbar{ min-height:64px; gap:14px; }
  .brand-mark{ width:42px; height:42px; font-size:19px; }
  .brand-name b{ font-size:16.5px; }
  .detail-aside{ flex-direction:column; }
  .aside-card{ min-width:0; }
  .svc-hero-actions .btn, .hero-actions .btn{ flex:1 1 100%; }
  .topbar .wrap{ min-height:38px; }
  .site-header{ --tb-h:38px; }
  .topbar{ font-size:13px; }
  .hero-chips{ display:grid; grid-template-columns:1fr 1fr; }
  .chip{ justify-content:flex-start; }
}
@media (max-width: 420px){
  .brand-name span:not(.bn-top){ display:none; }
  .gal-grid{ grid-auto-rows:128px; }
  .cta-phone{ font-size:24px; }
  .hero-card, .cta-card{ padding:20px; }
  .section{ padding-block:44px; }
}

/* ---------- типографика: Unbounded — название и заголовки ---------- */
h1,h2,h3,h4,
.brand-mark,.brand-name b,
.stat b,.cta-phone,.aside-card .ac-phone,.nav-phone b,.ci-card a.big,
.ph-brand .ph-t{ font-family:var(--f-display); }
h1,h2,h3,h4{ font-weight:700; line-height:1.16; }
.cta h2{ line-height:1.22; }
.hero h1{ line-height:1.12; }
.stat b,.cta-phone,.aside-card .ac-phone,.nav-phone b,.ci-card a.big,.brand-name b,.brand-mark{ font-weight:700; }

/* ============================================================
   АНИМАЦИИ (только при согласии на движение)
   ============================================================ */
.site-header{ transition:box-shadow .3s ease, background .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: no-preference){
  /* шапка: уводим верхнюю полосу за край экрана.
     Схлопывать её по высоте нельзя — шапка sticky, то есть занимает место
     в потоке, и уменьшение высоты рывком поднимало бы весь контент. */
  .site-header.compact{ box-shadow:0 8px 28px rgba(35,33,31,.11); }
  .site-header.compact .topbar{ opacity:0; }

  /* герой: медленный наезд фона */
  .hero-bg img{ animation:kenburns 30s ease-in-out infinite alternate; will-change:transform; }
  @keyframes kenburns{ from{ transform:scale(1) } to{ transform:scale(1.09) translate3d(-1.6%,-1.2%,0) } }

  /* кнопки: блик при наведении */
  .btn{ position:relative; overflow:hidden; }
  .btn > *{ position:relative; z-index:2; }
  .btn::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.26) 50%,transparent 68%); transform:translateX(-130%); transition:transform .65s cubic-bezier(.3,.7,.3,1); }
  .btn:hover::after{ transform:translateX(130%); }
  .btn-light::after,.btn-ghost::after{ background:linear-gradient(115deg,transparent 32%,rgba(199,69,30,.12) 50%,transparent 68%); }

  /* меню: подчёркивание */
  .nav-menu a{ position:relative; }
  .nav-menu a::after{ content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.7,.2,1); }
  .nav-menu a:hover::after,.nav-menu a.active::after{ transform:scaleX(1); }

  /* телефоны и индикатор */
  .topbar .tb-right .dot{ animation:livedot 2.6s ease-out infinite; }
  @keyframes livedot{ 0%{ box-shadow:0 0 0 0 rgba(55,201,127,.5) } 70%{ box-shadow:0 0 0 11px rgba(55,201,127,0) } 100%{ box-shadow:0 0 0 0 rgba(55,201,127,0) } }
  .cta-phone svg,.tb-item svg{ transition:transform .3s ease; }
  .cta-phone:hover svg{ transform:rotate(-14deg) scale(1.12); }
  .tb-item:hover svg{ transform:scale(1.15); }

  /* карточки услуг */
  .svc-card{ transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .2s; }
  .svc-ico{ transition:background .25s, color .25s, transform .3s cubic-bezier(.2,.7,.2,1); }
  .svc-card:hover .svc-ico{ transform:rotate(-6deg) scale(1.06); }

  /* галерея */
  .gal-cap{ transform:translateY(7px); opacity:.9; transition:transform .32s cubic-bezier(.2,.7,.2,1), opacity .3s; }
  .gal-item:hover .gal-cap{ transform:none; opacity:1; }

  /* цифры */
  .stat::before{ transition:width .35s cubic-bezier(.2,.7,.2,1), border-radius .35s; }
  .stat:hover::before{ width:28px; border-radius:3px; }

  /* шаги */
  .step .num{ transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
  .step:hover .num{ transform:translateY(-3px) rotate(-5deg); box-shadow:0 10px 22px rgba(199,69,30,.4); }

  /* вопросы */
  .faq-item .fq-body{ animation:fqIn .32s cubic-bezier(.2,.7,.2,1); }
  @keyframes fqIn{ from{ opacity:0; transform:translateY(-7px) } to{ opacity:1; transform:none } }

  /* формы */
  .form-ok{ animation:okIn .38s cubic-bezier(.2,.7,.2,1); }
  @keyframes okIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
  .field input,.field textarea{ transition:border-color .18s, box-shadow .18s, background .18s; }

  /* карточки преимуществ и связанные услуги */
  .rel-card .ri{ transition:background .25s, color .25s, transform .3s cubic-bezier(.2,.7,.2,1); }
  .rel-card:hover .ri{ background:var(--accent); color:#fff; transform:rotate(-6deg); }
  .ci-card .ci-ico{ transition:background .25s, color .25s, transform .3s; }
  .ci-card:hover .ci-ico{ background:var(--accent); color:#fff; transform:scale(1.06); }

  /* варианты появления */
  html.js-reveal [data-reveal="right"]{ transform:translateX(28px); }
  html.js-reveal [data-reveal="scale"]{ transform:scale(.965); }
  html.js-reveal [data-reveal].in{ transform:none; }

  /* эйбрау героя: живая точка */
  .hero-eyebrow::before{ animation:pulseDot 2.4s ease-in-out infinite; }
  @keyframes pulseDot{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.35) } }

  /* чипсы героя появляются по очереди */
  .hero-chips .chip{ opacity:0; transform:translateY(10px) scale(.92); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
  html.js-reveal [data-reveal].in .hero-chips .chip{ opacity:1; transform:none; }
  .hero-chips .chip:nth-child(1){ transition-delay:.05s; }
  .hero-chips .chip:nth-child(2){ transition-delay:.14s; }
  .hero-chips .chip:nth-child(3){ transition-delay:.23s; }
  .hero-chips .chip:nth-child(4){ transition-delay:.32s; }

  /* водяной знак CTA дышит */
  .cta::after{ animation:ctaDrift 14s ease-in-out infinite; }
  @keyframes ctaDrift{ 0%,100%{ transform:translate(0,0) rotate(0deg) } 50%{ transform:translate(-2%,-2.4%) rotate(-1.2deg) } }

  /* лого отзывается на наведение */
  .brand-mark{ transition:transform .3s cubic-bezier(.2,.7,.2,1); }
  .brand:hover .brand-mark{ transform:rotate(-8deg) scale(1.06); }

  /* тактильный отклик при нажатии */
  .btn:active{ transform:scale(.96); }
  .svc-card:active,.gal-item:active,.rel-card:active,.ci-card:active{ transform:scale(.98); }

  /* цифры вспыхивают по завершении подсчёта */
  .stat b.counted{ animation:statPop .4s cubic-bezier(.2,.7,.2,1); }
  @keyframes statPop{ 40%{ transform:scale(1.1) } 100%{ transform:scale(1) } }

  /* индикатор прогресса прокрутки */
  .scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:200; background:transparent; pointer-events:none; }
  .scroll-progress .fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .1s linear; }

  /* плавное появление страницы */
  body{ animation:pageIn .5s ease; }
  @keyframes pageIn{ from{ opacity:0 } to{ opacity:1 } }
}