/* DKA GROUP · лендинг · ВАРИАНТ B3 (27.10.2026, замечания владельца с телефона, ветка apple-b).
   Поверх m-apple.css + m-apple-b.css + m-apple-b2.css. ТОЛЬКО телефон (html[data-layout=phone]);
   тексты, цвета бренда, шрифты, логотип — прежние. */

/* ═════════ 1. Шторки: страница под ними не двигается ═════════ */
html.m-lock[data-layout=phone] body{overscroll-behavior:none;touch-action:none}
html.m-lock[data-layout=phone] :is(.m-calcbody.is-sheet,.l-sheet){touch-action:pan-y}
html[data-layout=phone] :is(.m-calcscrim,.l-scrim){touch-action:none;overscroll-behavior:none}

/* ═════════ 2. TRUSTED BY: подпись и две равные колонки — ровно по центру ═════════ */
html[data-layout=phone] #app .strip--m .strip__in{align-items:center}
/* разрядка капса добавляет пробел после последней буквы — возвращаем его слева, чтобы строка стояла по центру */
html[data-layout=phone] #app .strip--m .strip__cap{padding-left:.08em;text-align:center}
html[data-layout=phone] #app .strip--m .strip__names{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%;max-width:320px;
  margin-inline:auto;justify-items:center;text-align:center;box-sizing:border-box}
html[data-layout=phone] #app .strip--m .strip__names>*{justify-self:center;text-align:center;white-space:nowrap}

/* ═════════ 3. Логотип: в шапке и в меню — один размер и одно место ═════════ */
html[data-layout=phone] .site-head .l-logo,html[data-layout=phone] .l-menu__top .l-logo{min-height:44px;padding:0 4px;margin-left:-4px;box-sizing:border-box}
html[data-layout=phone] .site-head .l-logo img,html[data-layout=phone] .l-menu__top .l-logo img{height:20px!important;width:auto!important}

/* 4. Иконки тарифов — уменьшенные файлы tiles/m/ (шаблон phone) и прогрев кэша (patch-b3.js), CSS не нужен */

/* ═════════ 5. Чек «Your estimate»: плавно, как основная шторка ═════════ */
/* B4: появление чека и затемнения запускает patch-b3.js (Web Animations, без «закрепления» конца), поэтому CSS-анимаций
   здесь нет вовсе: они перебивали уход вниз и перезапускались с низа экрана при отпускании пальца */
html[data-layout=phone] .l-scrim,html[data-layout=phone] .l-sheet{animation:none!important}
html[data-layout=phone] .l-sheet{max-height:88svh!important;backface-visibility:hidden}
/* отпустили после лёгкого смаха — мягкий возврат; уход вниз — 300 мс; затемнение гаснет вместе с ним */
html[data-layout=phone] .l-sheet.is-settle{transition:transform 360ms cubic-bezier(.32,.72,0,1)!important}
html[data-layout=phone] .l-sheet.is-leaving{transition:transform 300ms cubic-bezier(.32,.72,0,1)!important}
html[data-layout=phone] .l-scrim.is-closing{opacity:0!important;transition:opacity 300ms ease-out!important}
@media (prefers-reduced-motion:reduce){
  html[data-layout=phone] .l-sheet.is-settle,html[data-layout=phone] .l-sheet.is-leaving{transition:none!important}
}

/* ═════════ 6. Переключатель EN / RU в меню: ровная капсула, сегменты с равными отступами ═════════ */
html[data-layout=phone] .l-menu .l-lang{display:inline-flex;align-items:stretch;width:auto!important;height:44px!important;padding:4px!important;gap:4px;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.04)}
html[data-layout=phone] .l-menu .l-lang button{flex:0 0 auto!important;width:56px!important;height:auto;min-height:0;padding:0;border-radius:999px;
  font-size:14px;line-height:20px;letter-spacing:.02em;display:flex;align-items:center;justify-content:center}

/* ═════════ 7. Our Work: вся карточка нажимается ═════════ */
html[data-layout=phone] #app .cases__grid .l-case{cursor:pointer;-webkit-tap-highlight-color:transparent}
html[data-layout=phone] #app .cases__grid .l-case:active .l-case__ph img{opacity:.92}

/* ═════════ 8. Partnership Opportunities — одна ось, один ритм (шаг 4/8) ═════════ */
/* без белой полосы сверху: тёмная плитка встык к предыдущему экрану */
html[data-layout=phone] #app #partners{padding:0!important;background:transparent}
/* фото — короче, заголовок ближе к нему; поля по краям = поле страницы */
html[data-layout=phone] #app .l-pt__field{aspect-ratio:2/1!important}
html[data-layout=phone] #app .l-partner__t{margin-top:-24px;padding:0 var(--m-gut) 56px!important;align-items:stretch}
html[data-layout=phone] #app .l-partner__t h2{margin:0 0 24px;text-wrap:balance}
/* список: строки одинакового устройства — иконка 36 по центру строки, текст с одной левой линии, поля 16 */
html[data-layout=phone] #app .l-partner__t>p{display:flex;align-items:center;min-height:72px;padding:16px 16px 16px 68px!important;
  font-size:15px;line-height:21px;letter-spacing:0;font-weight:400}
html[data-layout=phone] #app .l-partner__t>p.l-pt__promise{font-weight:500}
html[data-layout=phone] #app .l-partner__t>p::before{left:16px!important;top:50%!important;transform:translateY(-50%);width:36px;height:36px}
html[data-layout=phone] #app .l-partner__t>p+p::after{left:68px}
/* кнопка — той же ширины, что и список: края совпадают */
html[data-layout=phone] #app .l-partner__t x-import{display:block}
html[data-layout=phone] #app .l-partner__t .dka-btn{align-self:stretch;width:100%!important;margin-top:24px}

/* ═════════ 9. Ready to save on HVAC? — светлый экран ═════════ */
/* без белых полос сверху и снизу: секция встык к соседним */
html[data-layout=phone] #app .cta-wrap{padding:0!important;background:#fff}
html[data-layout=phone] #app .l-cta{background:#fff!important;color:var(--text-primary,#131315);box-shadow:none;border-radius:0;padding:72px var(--m-gut) 72px}
html[data-layout=phone] #app .l-cta::before,html[data-layout=phone] #app .l-cta::after{display:none!important}
html[data-layout=phone] #app .l-cta h2{color:var(--text-primary,#131315)!important}
html[data-layout=phone] #app .l-cta>p{color:var(--text-secondary,#55555C)!important}
/* основная кнопка — фиолетовая бренда */
html[data-layout=phone] #app .l-cta .l-ct__btn .dka-btn{background:linear-gradient(180deg,var(--brand-500,#6E4FF0),var(--brand-600,#5B3FD6))!important;color:#fff!important;border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 28px -14px rgba(91,63,214,.7)!important}
html[data-layout=phone] #app .l-cta .l-ct__btn .dka-btn :is(span,svg){color:#fff!important}
/* разделитель «Or message us on WhatsApp» — тёмным по светлому */
html[data-layout=phone] #app .l-cta__call.s3-wa-row>span{color:var(--text-tertiary,#8A8A91)!important}
html[data-layout=phone] #app .l-cta__call.s3-wa-row>span::before{background:linear-gradient(90deg,transparent,rgba(19,19,21,.14))}
html[data-layout=phone] #app .l-cta__call.s3-wa-row>span::after{background:linear-gradient(90deg,rgba(19,19,21,.14),transparent)}
/* WhatsApp — светлая кнопка с обводкой */
html[data-layout=phone] #app .l-cta__call .s3-wa{background:#fff!important;color:var(--text-primary,#131315)!important;border:1px solid var(--border-strong,rgba(19,19,21,.24))!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none!important}
html[data-layout=phone] #app .l-cta__call .s3-wa:active{background:var(--surface-sunken,#F3F1F8)!important}
html[data-layout=phone] #app .l-cta__call .s3-wa .s3-wa-ic{color:var(--brand-600,#5B3FD6)}
html[data-layout=phone] #app .l-cta :is(a,button):focus-visible{outline-color:var(--brand-600,#5B3FD6)!important}

/* ═════════ 10. B6→B7: нижняя панель калькулятора (Total / ← / Next) — компактная, без пустоты снизу ═════════ */
/* B6 на живом iPhone сделал хуже: отступ снизу был целиком = env(safe-area-inset-bottom), а Safari 26 в режимах
   адресной строки сообщает его больше реальной полосы жестов. Плюс шаблон сам поднимал панель на
   «innerHeight − visualViewport» и без клавиатуры. B7: снизу только полоса жестов, не больше 34 (на iPhone = 34;
   8 — если её нет); панель стоит на bottom:0 у fixed; над клавиатурой поднимается только пока клавиатура открыта
   и только сдвигом translate (--b7-kb из patch-b3.js, 0 при закрытой), без изменения раскладки. */
html[data-layout=phone]{--b7-bar-row:44px;--b7-bar-top:8px;--b7-bar-bot:max(8px,min(env(safe-area-inset-bottom,0px),34px))}
html[data-layout=phone] .l-bar{height:auto!important;min-height:0!important;bottom:0!important;align-items:center;box-sizing:border-box;
  padding-top:var(--b7-bar-top)!important;padding-bottom:var(--b7-bar-bot)!important;
  translate:0 calc(-1 * max(0px, var(--b7-kb,0px) - var(--b7-bar-bot) + 8px));transition:transform 200ms var(--ease-out),translate 240ms cubic-bezier(.32,.72,0,1)}
/* над клавиатурой полоса жестов не нужна: панель поднимается на (клавиатура − полоса жестов + 8), нижний отступ
   уходит под клавиатуру — высота и отступы панели не меняются, только сдвиг */
@media (prefers-reduced-motion:reduce){html[data-layout=phone] .l-bar{transition:none}}
/* содержимое шагов не прячется под панелью: запас снизу = высота панели + 24. От клавиатуры отступ НЕ зависит —
   высота и отступы шторки на события visualViewport не меняются */
/* B8: пока открыта клавиатура и поле в шторке — плюс высота клавиатуры (--b8-kb ставит patch-b3.js один раз, когда
   клавиатура встала; снимает после плавного возврата), чтобы поле можно было прокрутить над клавиатурой и панелью */
html[data-layout=phone] .m-calcbody.is-sheet{padding-bottom:calc(var(--b7-bar-top) + var(--b7-bar-row) + var(--b7-bar-bot) + 24px + var(--b8-kb,0px))!important}

/* ═════════ 11. B7: прокрутка лендинга без дёрганья при смене направления ═════════ */
/* Первый экран был высотой 100dvh: когда Safari при смене направления прячет/показывает свою панель, «динамическая»
   высота экрана меняется, первый экран меняет высоту, и всё ниже сдвигается рывком. svh не меняется никогда. */
html[data-layout=phone] .hero{min-height:100vh;min-height:100svh!important}
/* B13 (владелец 28.10, снимок hero-cut-bottom): в Safari с плавающей нижней панелью под ней была видна белая полоса
   следующего блока (Marriott / WeWork) — первый экран высотой svh кончался над панелью. Теперь первый экран — во всю
   большую высоту окна (lvh: как будто панелей нет; тоже не меняется при сворачивании панели, прыжков нет), видео и
   затемнение уходят под панель до самого низа. Цифры 17+ / 2,500+ / 24/7 подняты ровно на высоту панели
   (100lvh − 100svh) или на нижний безопасный отступ — остаются видны над панелью. Без lvh — 100vh (как было). */
@supports (height:100lvh){
  /* +8: шапка телефона 48, а первый экран подтянут под неё на 56 (общее правило шаблона) — он начинается на 8 выше края
     окна и без поправки кончался бы на 8 раньше низа (там и была видна полоска следующего блока) */
  html[data-layout=phone] .hero{min-height:calc(100lvh + 8px - env(safe-area-inset-top,0px))!important}
  html[data-layout=phone] #app .hero__stats{margin-bottom:calc(36px + max(100lvh - 100svh, env(safe-area-inset-bottom,0px)))}
  html[data-layout=phone] #b11-shell{min-height:100lvh}
}

/* ═════════ 12. B10: меню по бургеру — открытие/закрытие «как у Apple» ═════════ */
/* Было: вся панель выезжала сверху вместе с логотипом и крестиком (логотип «ехал»), закрытие — мгновенное.
   Стало: шапка меню (логотип и кнопка) стоит ровно над шапкой страницы и не двигается; фон-завеса плавно
   затемняет и размывает страницу; полоски бургера поворачиваются в крестик; пункты — каскадом с небольшим
   сдвигом. Закрытие (класс is-leaving из patch-b3.js) — тот же путь назад, быстрее. Цвет фона меню прежний. */
html[data-layout=phone] .l-menu{animation:none!important;background:transparent!important;isolation:isolate}
html[data-layout=phone] .l-menu::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);animation:b10-veil 400ms cubic-bezier(.32,.72,0,1) both}
html[data-layout=phone] .l-menu__top{animation:b10-veil 320ms cubic-bezier(.32,.72,0,1) both}
html[data-layout=phone] .l-menu__top button svg path{transform-box:view-box;transform-origin:12px 12px;animation:b10-x1 420ms cubic-bezier(.32,.72,0,1) both}
html[data-layout=phone] .l-menu__top button svg path:last-child{animation-name:b10-x2}
html[data-layout=phone] .l-menu :is(.l-menu__lang,.l-menu__list li,.l-menu__foot){animation:b10-item 440ms cubic-bezier(.32,.72,0,1) both!important}
html[data-layout=phone] .l-menu .l-menu__lang{animation-delay:60ms!important}
html[data-layout=phone] .l-menu .l-menu__list li{animation-delay:calc(100ms + var(--i,0) * 40ms)!important}
html[data-layout=phone] .l-menu .l-menu__foot{animation-delay:280ms!important}
/* закрытие — назад и быстрее (240 мс), пункты уходят все сразу */
html[data-layout=phone] .l-menu.is-leaving::before{animation:b10-veil-out 240ms cubic-bezier(.4,0,1,1) both}
html[data-layout=phone] .l-menu.is-leaving .l-menu__top{animation:b10-veil-out 240ms cubic-bezier(.4,0,1,1) both}
html[data-layout=phone] .l-menu.is-leaving .l-menu__top button svg path{animation:b10-x1-out 240ms cubic-bezier(.32,.72,0,1) both}
html[data-layout=phone] .l-menu.is-leaving .l-menu__top button svg path:last-child{animation-name:b10-x2-out}
html[data-layout=phone] .l-menu.is-leaving :is(.l-menu__lang,.l-menu__list li,.l-menu__foot){animation:b10-item-out 180ms cubic-bezier(.4,0,1,1) both!important;animation-delay:0s!important}
@keyframes b10-veil{from{opacity:0}to{opacity:1}}
@keyframes b10-veil-out{from{opacity:1}to{opacity:0}}
@keyframes b10-item{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes b10-item-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
/* полоски бургера (верх y=6, низ y=18) → диагонали крестика и обратно */
@keyframes b10-x1{from{transform:translateY(-6px) rotate(45deg)}to{transform:none}}
@keyframes b10-x2{from{transform:translateY(6px) rotate(-45deg)}to{transform:none}}
@keyframes b10-x1-out{from{transform:none}to{transform:translateY(-6px) rotate(45deg)}}
@keyframes b10-x2-out{from{transform:none}to{transform:translateY(6px) rotate(-45deg)}}
@media (prefers-reduced-motion:reduce){
  html[data-layout=phone] .l-menu::before,html[data-layout=phone] .l-menu__top{animation:b10-veil 160ms ease-out both}
  html[data-layout=phone] .l-menu__top button svg path,html[data-layout=phone] .l-menu :is(.l-menu__lang,.l-menu__list li,.l-menu__foot){animation:none!important}
}

/* ── 13. B11: первый экран после заставки (index.html, #b11-shell). Если заставку уже видели (медленная сеть), заголовок,
   кнопка и цифры приложения встают на место сразу, без второго «всплытия» — подмена заставки на приложение незаметна. ── */
html.b11-shell-seen[data-layout=phone] #app .hero .rise{animation:none!important;opacity:1;transform:none}

/* ── 14. B13: шторка калькулятора «как в Telegram» (движение — app/patch-m2.js, Web Animations) ──
   CSS-появление шторки и затемнения выключено: движение ведёт одна пружина в скрипте — шторка, панель Total и затемнение
   вместе, только transform / opacity на отдельных слоях. Пока шаг 2 дорисовывается (первые кадры после нажатия),
   шторка, панель и затемнение невидимы (b13-pre) — без мигания. Копия калькулятора на странице (.b13-ghost) ведёт себя
   как сам калькулятор (display:contents) — страница под шторкой не меняется. */
html[data-layout=phone] .m-calcbody.is-sheet{animation:none!important;transition:none!important;will-change:transform}
html.m-calc-open[data-layout=phone] .m-calcscrim{animation:none!important;will-change:opacity}
html.m-calc-open[data-layout=phone] .l-bar{will-change:transform}
html.b13-pre[data-layout=phone] :is(.m-calcbody.is-sheet,.m-calcscrim,.l-bar){visibility:hidden!important}
html.b13-drag[data-layout=phone] .l-bar{transition:none!important}
html[data-layout=phone] .b13-ghost{display:contents}
/* копию делаем заранее (при нажатии), а видна она только с того кадра, когда сам калькулятор уже ушёл в шторку */
html[data-layout=phone] .m-calcbody:not(.is-sheet)~.b13-ghost{display:none}
html[data-layout=phone] .b13-ghost .m-calctop{display:none}
/* шапка не уезжает при блокировке: overflow:hidden у body делал его «окном прокрутки» для липкой шапки, и она
   оставалась на своём месте в начале страницы — за экраном (видео: кадр 52). Прокрутку и так держит position:fixed. */
html.m-lock[data-layout=phone] body{overflow:visible!important}