/* ==========================================================================
   Bus Pro Service — Apple/iOS design system (Reverse Prompt BPS-8)

   Visual layer only: configurable single palette, sticky glass header,
   mobile polish.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --price-value: #7ddba0;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --text: #1d1d1f;
  --text-muted: #6e6e73;
  --surface-text: #1d1d1f;
  --surface-text-muted: #6e6e73;
  --card-bg: none;
  --section-bg: none;
  --hero-bg: none;
  --slider-ring-duration: 6000ms;
  --border: rgba(0, 0, 0, .08);
  --hairline: rgba(0, 0, 0, .1);

  --brand-primary: #0071e3;
  --brand-primary-dark: #0077ed;
  --brand-accent: #0071e3;
  --cta: #ff6a00;
  --cta-hover: #ff8124;

  --header-bg: rgba(255, 255, 255, .72);
  --overlay: rgba(29, 29, 31, .38);
  --focus-ring: rgba(0, 113, 227, .32);
  --accent-soft: rgba(0, 113, 227, .08);
  --accent-softer: color-mix(in srgb, var(--brand-primary) 5%, transparent);
  --success: #34c759;
  --on-solid: #ffffff;

  --radius-lg: 2px;       /* крупные поверхности — секции, панели-обёртки */
  --radius: 2px;           /* карточки и интерактивные элементы */
  --radius-sm: 2px;        /* поля, бейджи, метки и элементы списков */
  --radius-circle: 50%;    /* элементы с равными сторонами — маркеры, точки, счётчики */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, .06);
  --shadow-lg: 0 18px 60px rgba(0, 0, 0, .12);
  --shadow-cta: 0 10px 28px rgba(255, 106, 0, .24);
  --shadow-brand: 0 10px 28px color-mix(in srgb, var(--brand-primary) 28%, transparent);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  --header-h: 69.7px;
  --topbar-h: 32px;
  --mobile-panel-h: 72px;

  /* BPS-122: единая высота окна для первой секции (hero) — ровно один
     экран на всех типах героев. Используется как
     min-height: calc(var(--hero-h) + var(--hero-full-bleed-offset, 0px))
     в .home-page .hero, .public-page-hero и .public-inner-page
     .service-detail-hero — эти три правила больше не задают собственных
     чисел, только эту формулу. Первая строка (100vh) — фолбэк для
     браузеров без svh; вторая переопределяет её обычным каскадом (не
     @supports), тем же приёмом, каким --hero-full-bleed-offset ниже
     переопределяется по брейкпоинтам. svh, а не dvh: dvh пересчитывается
     при сворачивании/разворачивании адресной строки во время скролла и
     даёт дёрганье высоты; svh — высота при полностью развёрнутой
     адресной строке (наименьший возможный viewport), поэтому не прыгает
     и контент гарантированно не обрезается снизу, когда браузерный chrome
     виден. Сложение с --hero-full-bleed-offset сделано в самих трёх
     hero-правилах, а не здесь: offset объявлен только на элементах с
     классом .hero-full-bleed, а не в :root — при первой попытке сложить
     их прямо в этом токене подстановка var() внутри него оказалась
     зафиксирована в момент вычисления --hero-h на :root (где offset не
     объявлен и падает в фолбэк 0px), а не заново на каждом герое,
     который лишь наследует уже вычисленное значение, — офсет молча
     терялся (ровно ловушка 1 из промпта, подтверждено вживую через
     getComputedStyle). */
  --hero-h: 100vh;
  --hero-h: 100svh;
  /* BPS-124: общий зазор от прозрачной шапки до hero-контента. */
  --hero-top-gap: clamp(84px, 8.4vw, 134px);
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Montserrat", var(--font-body);
  --brand-font-family: var(--font-body);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  background:
    radial-gradient(70% 40% at 50% -10%, var(--accent-softer), transparent 70%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button,
input,
textarea { font: inherit; }

.brand-wordmark {
  font-family: var(--brand-font-family);
  font-weight: 400;
  letter-spacing: .035em;
}

.site-header,
.topbar,
.mobile-nav,
.site-footer,
.mobile-fixed-panel,
.card,
.faq-item,
.contact-formside,
.map-card,
.contact-split,
.lang-menu {
  color: var(--surface-text);
}

h1,
h2,
h3,
.site-header,
.topbar,
.mobile-nav {
  font-family: var(--font-display);
}

.site-header .nav a,
.footer-col a,
.footer-link-soon,
.footer-tagline,
.footer-bottom,
.card p,
.faq-item p,
.contact-formside .form-row label,
.contact-formside .form-required-note,
.contact-formside .form-caption,
.map-address,
.contact-form input,
.contact-form select,
.contact-form textarea,
.contact-form textarea::placeholder {
  color: var(--surface-text-muted);
}

.site-header .nav a.active,
.card h3,
.contact-formside h2,
.contact-formside .form-row input:focus,
.contact-formside .form-row select:focus,
.contact-formside .form-row textarea:focus {
  color: var(--surface-text);
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.container {
  width: min(100% - 40px, 1160px);
  margin: 0 auto;
}

.btn {
  min-height: 44px;
  min-width: 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform .2s var(--spring),
    box-shadow .2s var(--ease),
    background .2s var(--ease),
    border-color .2s var(--ease),
    color .2s var(--ease);
}

.btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 72%, var(--on-solid));
  outline-offset: 3px;
}

.btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px) scale(.985);
  box-shadow: inset 0 2px 6px color-mix(in srgb, var(--brand-primary) 42%, transparent);
}

.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) 86%, var(--on-solid)), var(--brand-primary));
  color: var(--on-solid);
  box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--on-solid) 24%, transparent);
}

.btn-primary:hover {
  background: var(--brand-primary-dark);
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px);
}

.btn-cta {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cta) 86%, var(--on-solid)), var(--cta));
  color: var(--on-solid);
  box-shadow: var(--shadow-cta), inset 0 1px 0 color-mix(in srgb, var(--on-solid) 24%, transparent);
}

.btn-cta:hover {
  background: var(--cta-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--brand-primary);
  border-color: var(--border);
}

.btn-ghost:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary-dark);
  background: var(--accent-softer);
  transform: translateY(-1px);
}

.btn-sm {
  min-height: 40px;
  min-width: 0;
  padding: 8px 16px;
  font-size: .84rem;
}

@media (hover: hover) and (pointer: fine) {
  .btn:not(.btn-ghost)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 32%, color-mix(in srgb, var(--on-solid) 32%, transparent) 48%, transparent 64%);
    pointer-events: none;
    transform: translateX(-130%);
    transition: transform .62s var(--ease);
  }

  .btn:not(.btn-ghost):not(:disabled):not([aria-disabled="true"]):hover::before {
    transform: translateX(130%);
  }

  .card:hover,
  .faq-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
}

/* ── TOPBAR ── */
.topbar {
  background: transparent;
  color: var(--text);
  font-size: .78rem;
  font-weight: 600;
}

.topbar-inner {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar-phones {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-phones a {
  color: inherit;
  font-weight: 700;
}

.topbar-phones a:hover { color: var(--brand-primary); }
.topbar-hours { opacity: .84; }

.tg-link {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--brand-primary);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.wa-link {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--brand-primary);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.tg-link:hover {
  color: var(--brand-primary-dark);
  background: rgba(0, 113, 227, .08);
}

.wa-link:hover {
  color: #128c7e;
  background: rgba(18, 140, 126, .1);
}

.tg-link:focus-visible,
.wa-link:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

.tg-icon,
.wa-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.tg-link-topbar,
.wa-link-topbar {
  min-width: 32px;
  min-height: 32px;
  padding: 4px 6px;
  color: inherit;
}

.tg-link-topbar:hover,
.wa-link-topbar:hover {
  color: var(--brand-primary);
  background: transparent;
}

/* ── HEADER ── */
.site-header {
  position: sticky;
  top: 10px;
  z-index: 999;
  width: min(100% - 32px, 1180px);
  margin: 10px auto 0;
  color: #fff;
  background: #0e0f11;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)),
    rgba(14, 15, 17, .34);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .26);
  transition: background .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}

.site-header.scrolled {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035)),
    rgba(14, 15, 17, .46);
  box-shadow: 0 22px 68px rgba(0, 0, 0, .34);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 69.7px;
}

.logo:hover { opacity: .86; }

.logo__image,
.footer-logo {
  display: block;
  width: auto;
}

.logo__image {
  height: 69.7px;
  transform: translateY(3.4px);
}

@media (max-width: 1023px) {
  .logo { height: 55.25px; }
  .logo__image {
    height: 55.25px;
    transform: translateY(2.55px);
  }
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--text);
  border-radius: 2px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar { display: none; }

.nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
  transition: color .15s var(--ease);
}

.nav a:hover { color: var(--brand-primary); }
.nav a.active,
.mobile-nav a.active {
  color: #fff;
  font-weight: 700;
}
.nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.auth-capsule {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-sm);
}

.auth-capsule__item {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  transition:
    color .16s var(--ease),
    background .16s var(--ease),
    transform .16s var(--ease);
}

.auth-capsule__item:hover,
.auth-capsule__item:focus-visible {
  color: var(--brand-primary);
  background: var(--accent-softer);
}

.auth-capsule__item--primary {
  color: var(--text);
  background: var(--accent-softer);
}

.auth-capsule--nav {
  height: 40px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-md);
}

.header-cta {
  min-width: 0;
  height: 40px;
  min-height: 40px;
  justify-content: center;
  padding: 9px 14px;
  font-size: .78rem;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(255, 106, 0, .22);
}

/* ── Language switcher ── */
.lang-dd { position: relative; }

.lang-dd summary {
  height: 40px;
  min-height: 40px;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .08);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

.lang-dd summary::-webkit-details-marker { display: none; }
.lang-dd[open] summary { border-color: var(--brand-primary); }

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 150px;
  padding: 6px;
  z-index: 10;
  background: #141619;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.lang-opt {
  min-height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: #f5f5f2;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.lang-opt:hover { background: rgba(255, 255, 255, .08); }
.lang-opt.active { color: var(--brand-primary); font-weight: 700; }

@media (max-width: 1279px) {
  .header-inner {
    gap: 12px;
  }

  .nav {
    gap: 10px;
  }

  .nav a {
    font-size: .78rem;
  }

  .auth-capsule__item {
    padding-inline: 10px;
  }
}

@media (max-width: 1023px) {
  :root {
    --header-h: 55.25px;
  }

  .site-header {
    top: 8px;
    width: min(100% - 24px, 1180px);
    margin-top: 8px;
  }

  .nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .header-inner {
    height: var(--header-h);
    justify-content: space-between;
    gap: 12px;
  }

  .nav-actions {
    display: none;
  }
}

/* ── Mobile nav drawer ── */
.mobile-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(340px, 86vw);
  height: 100%;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  z-index: 1001;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transition: right .3s var(--ease);
}

.mobile-nav.open { right: 0; }

.mobile-nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 12px 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  border-radius: var(--radius-sm);
}

.mobile-nav a:hover { background: var(--bg); color: var(--brand-primary); }
.mobile-nav hr { width: 100%; border: 0; border-top: 1px solid var(--hairline); }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav {
    transition: none;
  }
}

.mobile-nav-close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  margin-bottom: 4px;
}

.mobile-nav-cta {
  width: 100%;
  min-width: 0;
  margin-bottom: 4px;
}

.mobile-nav-section-title {
  padding: 12px 10px 2px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.mobile-account-row {
  display: flex;
  gap: 8px;
  padding: 4px 8px 8px;
}

.mobile-account-btn {
  flex: 1;
  min-width: 0;
}

.mobile-phones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 10px 8px;
}

.mobile-phone-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  border-radius: var(--radius-sm);
}

.mobile-phone-messengers {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 4px 0;
}

.mobile-nav-hours {
  font-size: .85rem;
  color: var(--text-muted);
}

.mobile-lang-row {
  display: flex;
  gap: 8px;
  padding: 12px 8px;
}

.mobile-lang-row .lang-btn { flex: 1; }

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.lang-btn-active { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--accent-softer); }

.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 1000;
}

.mobile-overlay.open { display: block; }

.toast-stack {
  position: fixed;
  top: calc(var(--topbar-h) + var(--header-h) + 16px);
  right: max(18px, calc((100vw - 1160px) / 2 + 18px));
  z-index: 1200;
  width: min(360px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  pointer-events: none;
}

.toast {
  position: relative;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 13px 42px 13px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--surface-text);
  box-shadow: 0 12px 34px rgba(16, 24, 40, .16);
  pointer-events: auto;
  animation: toast-slide-in .24s var(--ease) both;
}

.toast--hide {
  animation: toast-slide-out .24s var(--ease) both;
}

.toast__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: var(--accent-soft);
  color: var(--brand-primary);
}

.toast__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toast__body {
  min-width: 0;
  color: var(--surface-text);
  font-size: .92rem;
  font-weight: 800;
}

.toast__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--surface-text-muted);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

.toast__close:hover {
  background: var(--accent-softer);
  color: var(--surface-text);
}

.toast__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: currentColor;
  transform-origin: left center;
  animation: toast-progress 4s linear forwards;
}

.toast--success {
  color: var(--success);
}

.toast--success .toast__icon {
  background: rgba(52, 199, 89, .12);
  color: var(--success);
}

.toast--error {
  color: var(--cta);
}

.toast--error .toast__icon {
  background: rgba(255, 106, 0, .1);
  color: var(--cta);
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(18px) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes toast-slide-out {
  to {
    opacity: 0;
    transform: translateX(18px) translateY(-6px);
  }
}

@keyframes toast-progress {
  to {
    transform: scaleX(0);
  }
}

@media (max-width: 640px) {
  .toast-stack {
    top: calc(var(--header-h) + 12px);
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* ── FOOTER ── */
.site-footer {
  margin-top: 64px;
  padding: 44px 0 calc(44px + var(--mobile-panel-h));
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
}

.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col a,
.footer-link-soon { color: var(--text-muted); font-size: .88rem; }
.footer-col a:hover { color: var(--brand-primary); }
.footer-link-soon { cursor: default; }

.footer-col-title {
  margin-bottom: 4px;
  color: var(--text);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.footer-brand {
  margin-bottom: 8px;
}

.footer-logo { height: 48px; }

.footer-tagline { color: var(--text-muted); font-size: .9rem; margin: 0 0 16px; }

.footer-contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer-phones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.phone-link {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}

.phone-link:hover {
  color: var(--brand-primary);
  transform: translateX(2px);
}

.phone-link:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

.phone-wa { display: none; }

.tg-link-footer,
.wa-link-footer {
  width: fit-content;
  margin-top: 4px;
  padding: 0;
  width: 44px;
  height: 44px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-softer));
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.tg-link-footer:hover {
  color: var(--brand-primary);
  background: var(--accent-softer);
}

.wa-link-footer:hover {
  color: #128c7e;
  background: rgba(18, 140, 126, .1);
}

@media (hover: hover) and (pointer: fine) {
  .phone-tel { display: none; }
  .phone-wa { display: inline-flex; }
}

.footer-bottom {
  margin-top: 24px;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  border-top: 1px solid var(--hairline);
  font-size: .8rem;
  color: var(--text-muted);
}

/* ── Mobile fixed panel ── */
.mobile-fixed-panel {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: var(--mobile-panel-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .12);
  z-index: 997;
}

.mobile-fixed-panel-inner {
  min-height: var(--mobile-panel-h);
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}

.mobile-fixed-panel .btn { flex: 1; }

.mobile-fixed-panel .tg-link-mobile {
  flex: 0 0 46px;
  width: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  color: var(--brand-primary);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* ── SCROLL-TO-TOP ── */
#scroll-top {
  position: fixed;
  right: 28px;
  bottom: 32px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-circle);
  background: var(--brand-primary);
  color: var(--on-solid);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  opacity: 0;
  transform: translateY(12px) scale(.9);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--spring), box-shadow .2s var(--ease), background .2s var(--ease);
  z-index: 998;
}

#scroll-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.auth-section {
  padding: clamp(48px, 8vw, 96px) 0;
}

.auth-card {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--surface-text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
}

.auth-card h1 {
  margin: 0 0 20px;
  font-size: clamp(2rem, 4vw, 3rem);
}

.auth-form {
  display: grid;
  gap: 16px;
}

.auth-form label {
  display: grid;
  gap: 8px;
  font-weight: 700;
}

.auth-form input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  color: var(--surface-text);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
}

.auth-alert,
.auth-message {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cta) 14%, transparent);
  color: var(--surface-text);
}

.auth-messages,
.auth-inline-form,
.auth-switch {
  margin-top: 18px;
}

.auth-switch {
  color: var(--surface-text-muted);
}

/* Client cabinet */
.cabinet-section {
  padding: 56px 0 96px;
}

.cabinet-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.cabinet-side {
  position: sticky;
  top: 112px;
  align-self: start;
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
  box-shadow: var(--shadow-md);
  color: var(--surface-text);
}

.cabinet-user {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.cabinet-user__avatar {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: var(--accent-soft);
  color: var(--brand-primary);
  font-weight: 600;
}

.cabinet-user__name,
.cabinet-user__email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cabinet-user__name {
  font-weight: 600;
}

.cabinet-user__email {
  color: var(--surface-text-muted);
  font-size: .82rem;
}

.cabinet-nav {
  display: grid;
  gap: 6px;
}

.cabinet-nav a {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--surface-text-muted);
  font-weight: 500;
}

.cabinet-nav a:hover,
.cabinet-nav a.active {
  background: var(--accent-soft);
  color: var(--brand-primary);
}

.cabinet-nav a.active {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand-primary);
}

.cabinet-content {
  min-width: 0;
}

.cabinet-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.cabinet-hero h1 {
  margin: 6px 0 0;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.01em;
}

.cabinet-actions,
.cabinet-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cabinet-back {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.cabinet-back__link {
  min-height: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border-radius: 0;
  color: var(--brand-primary);
  font-size: .82rem;
  font-weight: 600;
}

.cabinet-back__link::before {
  content: "<-";
}

.cabinet-back__link:hover {
  color: var(--brand-primary-dark);
}

.cabinet-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--surface-text-muted);
  font-size: .88rem;
  font-weight: 500;
}

.cabinet-crumb a {
  color: var(--surface-text-muted);
}

.cabinet-crumb a:hover {
  color: var(--brand-primary);
}

.cabinet-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 24px;
  margin-top: 18px;
  color: var(--surface-text);
}

.cabinet-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.cabinet-panel-head h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
}

.cabinet-panel-head h1 {
  margin: 0;
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  font-weight: 600;
  line-height: 1.12;
}

.cabinet-count {
  min-width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: var(--accent-soft);
  color: var(--brand-primary);
  font-weight: 600;
}

.cabinet-list {
  display: grid;
  gap: 12px;
}

.cabinet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 86%, var(--bg));
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cabinet-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand-primary) 26%, var(--border));
  box-shadow: var(--shadow-sm);
}

.cabinet-item-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cabinet-item-main strong {
  font-size: 1.02rem;
}

.cabinet-item-main span,
.cabinet-item-meta time {
  color: var(--surface-text-muted);
  font-size: .92rem;
}

.status-badge {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--surface-text);
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}

.status-new,
.status-consultation {
  background: var(--accent-soft);
  color: var(--brand-primary);
  border-color: rgba(0, 113, 227, .18);
}

.status-in_progress,
.status-awaiting_client {
  background: rgba(255, 106, 0, .1);
  color: var(--cta);
  border-color: rgba(255, 106, 0, .22);
}

.status-done {
  background: rgba(52, 199, 89, .12);
  color: #178a3a;
  border-color: rgba(52, 199, 89, .24);
}

.status-cancelled {
  background: rgba(110, 110, 115, .1);
  color: var(--surface-text-muted);
}

/* Reverse Prompt BPS-55: ExtraHoursStatus badges reuse the same
   .status-badge shell/palette as OrderStatus above. */
.status-pending {
  background: var(--accent-soft);
  color: var(--brand-primary);
  border-color: rgba(0, 113, 227, .18);
}

.status-approved {
  background: rgba(52, 199, 89, .12);
  color: #178a3a;
  border-color: rgba(52, 199, 89, .24);
}

.status-rejected {
  background: rgba(110, 110, 115, .1);
  color: var(--surface-text-muted);
}

.cabinet-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--accent-softer);
}

.cabinet-empty h3,
.cabinet-empty p {
  margin: 0;
}

.cabinet-empty p {
  color: var(--surface-text-muted);
}

.cabinet-details {
  margin: 0;
  display: grid;
}

.cabinet-details > div {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.cabinet-details > div:last-child {
  border-bottom: 0;
}

.cabinet-details dt {
  color: var(--surface-text-muted);
  font-weight: 600;
}

.cabinet-details dd {
  margin: 0;
  min-width: 0;
}

.cabinet-profile {
  max-width: 720px;
}

.cabinet-form {
  max-width: 520px;
}

.cabinet-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.cabinet-stat {
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  color: var(--surface-text);
}

.cabinet-stat__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: var(--accent-soft);
  color: var(--brand-primary);
  font-weight: 600;
}

.cabinet-stat strong {
  font-size: 2rem;
  line-height: 1;
  font-weight: 600;
}

.cabinet-stat span:last-child {
  color: var(--surface-text-muted);
  font-size: .92rem;
}

.cabinet-quicklinks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.cabinet-quicklink {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 168px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  box-shadow: var(--shadow-md);
  color: var(--surface-text);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cabinet-quicklink::after {
  content: "->";
  position: absolute;
  right: 22px;
  top: 22px;
  color: var(--brand-primary);
  font-weight: 600;
}

.cabinet-quicklink:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--border));
  box-shadow: var(--shadow-lg);
}

.cabinet-quicklink span,
.cabinet-quicklink small {
  color: var(--surface-text-muted);
}

.cabinet-quicklink strong {
  padding-right: 32px;
  font-size: 1.15rem;
  font-weight: 600;
}

.cabinet-quicklink small {
  max-width: 42ch;
  font-size: .92rem;
}

/* Internal CRM — Reverse Prompt BPS-92: единый блок переменных .crm-body
   (палитра A4). До BPS-92 здесь было ДВА конфликтующих объявления этого
   селектора (это, светлое, и BPS-61 внизу файла, тёмное) — второе перебивало
   background и линии, но не content-bg-переменную, поэтому шесть правил на
   color-mix(surface, content-bg) продолжали подмешивать старый светлый
   оттенок фона (surface-переменная тоже не переопределялась, так что бралось
   белое значение из :root). Итог — светлые пятна поверх тёмного фона. Слито
   в одно объявление; переменные поверхностей/текста/акцента из BPS-61
   сохранены (их использует унаследованный слой .crm-body .crm-* —
   переопределять сами селекторы не требовалось, только источник переменных).
   Content-bg-переменная оставлена алиасом (Constraint — не удалять). Старый
   мятно-зелёный акцент сайдбара заменён на красный везде по CRM — в
   графитово-красной теме он не встречается. Статусные переменные
   пересмотрены на контраст ≥4.5:1 к фону панелей/страницы (WCAG, посчитано
   программно; часть значений уже проходила и не менялась). */
.crm-body {
  /* поверхности */
  --crm-bg: #1C1F24;
  --crm-surface: #242830;
  --crm-surface-soft: #2B3038;
  --crm-sidebar-bg: #171A1F;
  /* текст */
  --crm-text: #EEF0F3;
  --crm-muted: #9AA1AD;
  --crm-sidebar-text: #EEF0F3;
  --crm-sidebar-muted: #9AA1AD;
  --crm-sidebar-child: #E3A09B;
  /* линии и тени */
  --crm-line: rgba(255, 255, 255, .12);
  --crm-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --crm-shadow-lg: 0 10px 30px rgba(0, 0, 0, .45);
  /* акцент */
  --crm-red: #E31E24;
  --accent-softer: color-mix(in srgb, var(--crm-red) 8%, transparent);
  --shadow-brand: 0 10px 28px color-mix(in srgb, var(--crm-red) 28%, transparent);
  /* алиас: на --crm-content-bg завязаны 6 правил ниже (Constraint) */
  --crm-content-bg: var(--crm-bg);
  /* статусы — подобраны на контраст ≥4.5:1 к --crm-bg и --crm-surface */
  --crm-status-request: #0ea5a5;
  --crm-status-new: #598CF1;
  --crm-status-consultation: #c98a00;
  --crm-status-in-progress: #E17023;
  --crm-status-awaiting-client: #9F80E1;
  --crm-status-done: #21A65A;
  --crm-status-cancelled: #8a8f98;
  /* переопределяем семантические переменные — иначе снова полезет светлое */
  --surface: var(--crm-surface);
  --surface-text: var(--crm-text);
  --surface-text-muted: var(--crm-muted);
  --text: var(--crm-text);
  --text-muted: var(--crm-muted);
  --border: var(--crm-line);
  --hairline: rgba(255, 255, 255, .08);
  min-height: 100vh;
  background: var(--crm-bg);
  color: var(--crm-text);
}

.crm-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: 64px minmax(0, 1fr);
}

.crm-sidebar {
  position: sticky;
  top: 64px;
  grid-column: 1;
  grid-row: 2;
  height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  border-right: 0;
  background: var(--crm-sidebar-bg);
  color: var(--crm-sidebar-text);
  box-shadow: 10px 0 28px rgba(15, 23, 42, .08);
}

.crm-appbar {
  position: sticky;
  top: 0;
  z-index: 10;
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  min-width: 0;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--crm-line);
  background: var(--crm-surface);
  color: var(--crm-text);
  overflow: visible;
}

.crm-appbar__brand {
  min-width: 184px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--crm-text);
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.crm-appbar__brand strong {
  color: var(--crm-red);
  font-size: .68rem;
  letter-spacing: .08em;
}

.crm-breadcrumbs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--crm-muted);
  font-size: .8rem;
  white-space: nowrap;
}

.crm-breadcrumbs a { color: var(--crm-muted); }
.crm-breadcrumbs a:hover { color: var(--crm-text); }
.crm-breadcrumbs > span:last-child { overflow: hidden; color: var(--crm-text); text-overflow: ellipsis; }
.crm-breadcrumbs__separator { color: var(--crm-muted); }
.crm-appbar__spacer { min-width: 0; flex: 1 1 auto; }

.crm-appbar__icon-button,
.crm-appbar__language,
.crm-profile-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--crm-text);
  font: inherit;
  cursor: pointer;
}

.crm-appbar__icon-button,
.crm-appbar__language { gap: 6px; padding: 0 10px; }
.crm-appbar__icon-button { position: relative; width: 44px; padding: 0; }
.crm-appbar__icon-button svg,
.crm-appbar__language svg,
.crm-profile-button__chevron { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.crm-appbar__icon-button .notification-count { position: absolute; top: -7px; right: -8px; margin: 0; }

.crm-appbar__icon-button:hover,
.crm-appbar__icon-button:focus-visible,
.crm-appbar__language:hover,
.crm-appbar__language:focus-visible,
.crm-appbar__language[aria-expanded="true"],
.crm-profile-button:hover,
.crm-profile-button:focus-visible,
.crm-profile-button[aria-expanded="true"] { border-color: var(--crm-red); color: var(--crm-text); outline: 2px solid var(--crm-red); outline-offset: 2px; }

.crm-lang-pop-wrap,
.crm-profile-pop-wrap { position: relative; display: inline-flex; }

.crm-profile-button { min-width: 44px; max-width: 250px; justify-content: flex-start; gap: 8px; padding: 4px 9px 4px 5px; text-align: left; }
.crm-profile-button__avatar { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-circle); background: var(--crm-red); color: var(--on-solid); font-size: .74rem; font-weight: 700; }
.crm-profile-button__meta { min-width: 0; display: grid; gap: 1px; }
.crm-profile-button__meta > span,
.crm-profile-button__meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-profile-button__meta > span { font-size: .78rem; font-weight: 700; }
.crm-profile-button__meta small { color: var(--crm-muted); font-size: .67rem; }
.crm-profile-button__chevron { width: 15px; height: 15px; margin-left: auto; }

.crm-main { grid-column: 2; grid-row: 2; }

.crm-main [id] {
  scroll-margin-top: calc(64px + 16px);
}

.crm-nav {
  display: grid;
  gap: 3px;
}

.crm-nav a,
.crm-nav > span {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--crm-sidebar-muted);
  font-size: .82rem;
  font-weight: 600;
}

.crm-nav a:hover,
.crm-nav a.active,
.crm-nav a[aria-current="page"] {
  color: var(--crm-red);
  background: color-mix(in srgb, var(--crm-red) 14%, transparent);
}

.crm-nav__group {
  display: grid;
  gap: 2px;
}

.crm-nav__group-toggle {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: color-mix(in srgb, var(--crm-sidebar-text) 78%, transparent);
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.crm-nav__group-toggle:hover,
.crm-nav__group-toggle:focus-visible {
  background: color-mix(in srgb, var(--crm-red) 14%, transparent);
  color: var(--crm-text);
  outline: 2px solid var(--crm-red);
  outline-offset: 2px;
}

.crm-nav__group-toggle svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.crm-nav__group-toggle .crm-nav__chevron {
  width: 15px;
  height: 15px;
  margin-left: auto;
  transition: transform .16s ease;
}

.crm-nav__group-toggle[aria-expanded="true"] .crm-nav__chevron {
  transform: rotate(180deg);
}

.crm-nav__group-toggle[aria-expanded="true"] {
  color: var(--crm-sidebar-text);
}

.crm-nav__group-badge {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--cta);
  color: var(--on-solid);
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
}

.crm-nav__group-toggle .crm-nav__group-badge + .crm-nav__chevron {
  margin-left: 0;
}

.crm-nav__group-items {
  display: grid;
  gap: 2px;
  padding: 0 0 4px 9px;
  border-left: 1px solid color-mix(in srgb, var(--crm-red) 22%, var(--crm-sidebar-bg));
}

.crm-nav__group-items a {
  min-height: 36px;
  color: var(--crm-sidebar-child);
}

.crm-nav__group-items .crm-nav__conflicts {
  color: var(--crm-text);
  background: color-mix(in srgb, var(--cta) 14%, transparent);
}

.crm-nav__group-items .crm-nav__conflicts:hover,
.crm-nav__group-items .crm-nav__conflicts:focus-visible,
.crm-nav__group-items .crm-nav__conflicts.active {
  background: color-mix(in srgb, var(--cta) 24%, transparent);
  color: var(--crm-text);
}

.crm-nav__group-items .crm-nav__conflicts .notification-count {
  margin-left: auto;
}

html.js .crm-nav__group-toggle[aria-expanded="false"] + .crm-nav__group-items {
  display: none;
}

.crm-nav > span {
  opacity: .55;
  cursor: not-allowed;
}

.crm-main {
  width: 100%;
  max-width: 1440px; /* BPS-92: рабочая область ограничена и центрирована;
                         сайдбар (.crm-shell) остаётся прижат к левому краю. */
  margin: 0 auto;
  padding: 20px 20px 40px;
  background: var(--crm-content-bg);
  font-size: 13.5px;
  font-weight: 400;
}

.crm-topbar,
.crm-panel-head,
.crm-list-item,
.crm-list-actions {
  display: flex;
  align-items: center;
}

.crm-topbar {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--crm-shadow);
}

.crm-topbar h1 {
  margin: 4px 0 0;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.12;
  letter-spacing: 0;
  font-weight: 700;
}

.crm-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.crm-metric,
.crm-panel {
  border: 1px solid var(--crm-line);
  background: var(--surface);
  box-shadow: var(--crm-shadow);
  color: var(--surface-text);
}

.crm-metric {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: var(--radius-sm);
}

.crm-metric__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.crm-metric__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: color-mix(in srgb, currentColor 14%, transparent);
  color: var(--brand-primary);
}

.crm-metric__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crm-metric span {
  color: var(--surface-text-muted);
  font-size: .8rem;
  font-weight: 700;
}

.crm-metric strong {
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 700;
}

.crm-metric a {
  color: var(--brand-primary);
  font-weight: 600;
}

.crm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.crm-detail-grid {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 14px;
}

/* BPS-277: client registry and card — intentionally scoped to client views. */
.crm-clients__filters {
  align-items: end;
}

.crm-table--clients td {
  vertical-align: top;
}

.crm-table--clients small,
.crm-client-link + small {
  display: block;
  margin-top: 3px;
  color: var(--surface-text-muted);
}

.crm-client-link {
  color: var(--surface-text);
  font-weight: 700;
}

.crm-client-archive {
  color: var(--crm-red);
}

.crm-client-conflict {
  color: var(--crm-red);
  font-weight: 700;
}

.crm-client-form__fieldset {
  margin: 18px 0;
  padding: 12px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
}

.crm-client-form__fieldset legend {
  padding: 0 5px;
  color: var(--surface-text-muted);
  font-size: .82rem;
  font-weight: 700;
}

.crm-client-form__identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

.crm-client-detail__add {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--crm-line);
}

.crm-client-detail__add h3 {
  margin: 0 0 10px;
  font-size: .84rem;
}

@media (max-width: 700px) {
  .crm-client-form__identity {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .crm-table--clients th:nth-child(4),
  .crm-table--clients td:nth-child(4),
  .crm-table--clients th:nth-child(5),
  .crm-table--clients td:nth-child(5) {
    display: none;
  }
}

/* BPS-208: the list-first two-column grid and its right-hand form column
   are gone now that the add form lives in a dialog; .crm-catalog-list-panel
   is the page's only panel, full width, no grid needed. */
.crm-catalog-list-panel {
  min-width: 0;
}

.crm-panel {
  border-radius: var(--radius-sm);
  padding: 12px; /* BPS-92: плотность — карточки 11-13px вместо 16px */
}

.crm-panel-narrow {
  max-width: 820px;
}

.crm-panel-head {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.crm-panel-head h2 {
  margin: 0;
  font-size: .86rem; /* BPS-92: плотность — заголовки панелей 13-14px */
  font-weight: 700;
  letter-spacing: 0;
}

.crm-list {
  display: grid;
  gap: 6px;
}

.crm-list-item {
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 84%, var(--crm-content-bg));
}

.crm-list-item > div:first-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.crm-list-item span,
.crm-list-item small {
  color: var(--surface-text-muted);
}

.crm-list-actions {
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.crm-list-actions form {
  margin: 0;
}

.crm-empty {
  padding: 14px;
  border: 1px dashed var(--crm-line);
  border-radius: var(--radius-sm);
  color: var(--surface-text-muted);
  background: color-mix(in srgb, var(--surface) 70%, var(--crm-content-bg));
}

.crm-status-badge {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: var(--brand-primary);
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}

.crm-list-actions .crm-status-badge.status-badge,
.crm-panel-head .crm-status-badge.status-badge {
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: var(--brand-primary);
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.crm-status--request,
.crm-metric--request .crm-metric__icon {
  color: var(--crm-status-request);
}

.crm-status--new,
.crm-metric--new .crm-metric__icon {
  color: var(--crm-status-new);
}

.crm-status--consultation,
.crm-metric--consultation .crm-metric__icon {
  color: var(--crm-status-consultation);
}

.crm-status--in_progress,
.crm-metric--in_progress .crm-metric__icon {
  color: var(--crm-status-in-progress);
}

.crm-status--awaiting_client,
.crm-metric--awaiting_client .crm-metric__icon {
  color: var(--crm-status-awaiting-client);
}

.crm-status--done,
.crm-metric--done .crm-metric__icon {
  color: var(--crm-status-done);
}

.crm-status--cancelled,
.crm-metric--cancelled .crm-metric__icon {
  color: var(--crm-status-cancelled);
}

.crm-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.crm-filters--inline {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.crm-filters--inline label {
  flex: 1 1 150px;
  min-width: 0;
}

.crm-filters--inline .btn {
  flex: 0 0 auto;
}

.crm-filters label,
.crm-form label {
  display: grid;
  gap: 5px;
  color: var(--surface-text-muted);
  font-size: .82rem;
  font-weight: 600;
}

.crm-form {
  gap: 12px;
}

.crm-catalog-add-form {
  display: grid;
  gap: 10px;
  align-content: start;
}

.crm-form-group {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.crm-form-group summary {
  cursor: pointer;
  color: var(--crm-text);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.crm-form-group[open] summary {
  margin-bottom: 8px;
}

/* BPS-208: catalog "add" dialog. Native <dialog>, opened only via
   showModal() (never the `open` attribute, see prompt context "Ловушка
   3") so it gets a real backdrop, focus trap and Esc-to-close for free.
   The dialog's own box has zero padding; header and footer are sticky
   flex children and .crm-modal__body is the single scrolling area, so
   there is never a second, nested scrollbar (Ловушка 4). */
.crm-panel-head__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crm-modal {
  display: none;
  flex-direction: column;
  margin: auto;
  padding: 0;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-lg);
  width: min(720px, 100% - 32px);
  max-height: min(90vh, 860px);
  background: var(--surface);
  color: var(--surface-text);
  box-shadow: var(--crm-shadow-lg);
  overflow: hidden;
}

.crm-modal--wide {
  width: min(860px, 100% - 32px);
}

/* The HTML `hidden` attribute must win even if a later edit accidentally
   adds a display declaration to the base modal rule. */
.crm-modal[hidden] {
  display: none !important;
}

.crm-modal.crm-modal--open {
  display: flex;
}

/* BPS-221: native modal dialog is always centered in the current viewport. */
.crm-modal:modal {
  position: fixed;
  inset: 0;
  margin: auto;
}

.crm-modal::backdrop {
  background: rgba(0, 0, 0, .55);
}

.crm-modal__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--crm-line);
  background: var(--surface);
}

.crm-modal__title {
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
}

.crm-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--surface-text-muted);
  cursor: pointer;
}

.crm-modal__close:hover,
.crm-modal__close:focus-visible {
  background: color-mix(in srgb, var(--crm-red) 14%, transparent);
  color: var(--crm-red);
}

.crm-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
}

.crm-modal__footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding: 12px 16px;
  border-top: 1px solid var(--crm-line);
  background: var(--surface);
}

.crm-modal__footer .btn {
  width: 100%;
}

@media (max-width: 480px) {
  .crm-modal {
    width: min(100% - 20px, 720px);
  }
}

.crm-form select,
.crm-form textarea,
.crm-filters select,
.crm-filters input {
  width: 100%;
}

.crm-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Reverse Prompt BPS-55: approve/reject button row on the extra-hours
   request block (crm/order_detail.html). */
.crm-form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.crm-form textarea.form-input {
  min-height: 104px;
  padding-top: 10px;
  resize: vertical;
}

.crm-table-wrap {
  overflow-x: auto;
}

.crm-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
}

.crm-table--catalog-list {
  min-width: 960px;
  table-layout: fixed;
}

.crm-table--catalog-list th,
.crm-table--catalog-list td {
  white-space: nowrap;
}

.crm-truncate {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-table th,
.crm-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--crm-line);
  font-size: .82rem;
  text-align: left;
  vertical-align: middle;
}

.crm-table th {
  color: var(--surface-text-muted);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* BPS-96: раньше display/gap форсировались priority-флагом, чтобы перебить
   `.crm-form label { display: grid; gap: 5px; }` (специфичность 0,1,1). Все
   реальные использования — `<label class="crm-checkbox-row">` внутри формы
   с классом `.crm-form` (см. templates/crm/*), поэтому квалифицируем
   селектор тем же контекстом (`.crm-form label.crm-checkbox-row`,
   специфичность 0,2,1) — этого достаточно, чтобы победить без него. */
.crm-form label.crm-checkbox-row {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.crm-checkbox-row input {
  width: 18px;
  min-height: 18px;
}

/* BPS-225: CRM Services column widths — scoped to `.crm-table--services` */

.crm-table--services .crm-services-col--service {
  width: minmax(250px, 1fr);
}

.crm-table--services .crm-services-col--category {
  width: 160px;
  min-width: 160px;
}

.crm-table--services .crm-services-col--status {
  width: 112px;
  min-width: 112px;
}

.crm-table--services .crm-services-col--price {
  width: 96px;
  min-width: 96px;
  text-align: right;
}

.crm-table--services .crm-services-col--duration {
  width: 72px;
  min-width: 72px;
}

.crm-table--services .crm-services-col--content {
  width: 116px;
  min-width: 116px;
}

.crm-table--services .crm-services-col--active {
  width: 64px;
  min-width: 64px;
}

.crm-table--services .crm-services-col--action {
  width: 108px;
  min-width: 108px;
}

/* BPS-230: CRM Categories column geometry — scoped to `.crm-table--categories`. */
.crm-table--categories .crm-category-primary {
  min-width: 240px;
}

.crm-table--categories th:nth-child(2),
.crm-table--categories td:nth-child(2) {
  width: 72px;
  min-width: 72px;
}

.crm-table--categories th:nth-child(3),
.crm-table--categories td:nth-child(3) {
  width: 112px;
  min-width: 112px;
}

.crm-table--categories th:nth-child(4),
.crm-table--categories td:nth-child(4) {
  width: 64px;
  min-width: 64px;
}

.crm-table--categories th:nth-child(5),
.crm-table--categories td:nth-child(5) {
  width: 72px;
  min-width: 72px;
}

.crm-table--categories th:nth-child(6),
.crm-table--categories td:nth-child(6) {
  width: 64px;
  min-width: 64px;
}

.crm-table--categories th:nth-child(7),
.crm-table--categories td:nth-child(7) {
  width: 108px;
  min-width: 108px;
}

.crm-table--categories .crm-category-primary__slug {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* BPS-240: scoped CRM ServicePrice card geometry. */
[data-price-editor] [data-price-card-list] {
  display: grid;
  gap: 10px;
}

.crm-price-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: var(--crm-surface-soft);
}

.crm-price-card[hidden] {
  display: none;
}

.crm-price-card__header {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding-inline-end: 34px;
}

.crm-price-card__title {
  margin: 0;
  color: var(--crm-text);
  font-size: .88rem;
}

.crm-price-card__remove {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: var(--crm-surface);
  color: var(--crm-text-muted);
  cursor: pointer;
  text-decoration: none;
}

.crm-price-card__remove:hover {
  color: var(--crm-red);
  border-color: var(--crm-red);
}

.crm-price-card__remove:focus-visible {
  outline: 2px solid var(--crm-red);
  outline-offset: 2px;
}

.crm-price-card__primary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.crm-price-card__primary > label {
  display: grid;
  gap: 5px;
}

.crm-price-card__advanced {
  padding: 10px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: var(--crm-surface);
}

.crm-price-card__advanced summary {
  color: var(--crm-text);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
}

.crm-price-card__advanced[open] summary {
  margin-bottom: 10px;
}

.crm-price-card__advanced > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.crm-price-card__advanced label {
  display: grid;
  gap: 5px;
}

@media (max-width: 640px) {
  .crm-price-card__primary,
  .crm-price-card__advanced > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* BPS-244: scoped CRM service-editor summary and language-group geometry. */
.crm-service-detail {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.crm-service-detail__summary {
  display: grid;
  gap: 12px;
}

.crm-service-detail__summary .crm-panel-head {
  margin-bottom: 0;
}

.crm-service-detail__summary .cabinet-details {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.crm-service-detail__summary .cabinet-details > div {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: var(--crm-surface-soft);
}

.crm-service-detail__summary .cabinet-details > div:last-child {
  border-bottom: 1px solid var(--crm-line);
}

.crm-service-detail__summary > p {
  margin: 0;
}

.crm-service-detail__editor,
.crm-service-detail__editor-panel {
  min-width: 0;
  width: 100%;
}

.crm-localized-group,
.crm-price-card__localized-group {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: var(--crm-surface-soft);
}

.crm-localized-group > legend,
.crm-price-card__localized-group > legend {
  padding-inline: 4px;
  color: var(--crm-text);
  font-size: .82rem;
  font-weight: 700;
}

.crm-localized-group__fields,
.crm-price-card__localized-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.crm-localized-group__fields > label,
.crm-price-card__localized-fields > label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.crm-localized-group__fields > label > span,
.crm-price-card__localized-fields > label > span {
  color: var(--crm-text-muted);
  font-size: .72rem;
  font-weight: 700;
}

.crm-structured-content-groups {
  display: grid;
  gap: 10px;
}

@media (max-width: 760px) {
  .crm-service-detail__summary .cabinet-details,
  .crm-localized-group__fields,
  .crm-price-card__localized-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* BPS-247: scoped CRM replace-only service image editor. */
.crm-service-image-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 14px;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: var(--crm-surface-soft);
}

.crm-service-image-editor:has(.crm-image-preview) {
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: start;
}

.crm-service-image-editor > h3 {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--crm-text);
  font-size: .9rem;
}

.crm-service-image-editor .crm-image-preview {
  inline-size: min(100%, 320px);
  margin: 0;
}

.crm-service-image-editor .crm-image-preview img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
}

.crm-service-image-editor > label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.crm-service-image-editor input[type="file"] {
  max-inline-size: 100%;
}

.crm-service-image-editor:has(.crm-image-preview) > label,
.crm-service-image-editor:has(.crm-image-preview) > .form-help,
.crm-service-image-editor:has(.crm-image-preview) > .errorlist {
  grid-column: 2;
}

.crm-service-image-editor > .form-help,
.crm-service-image-editor > .errorlist {
  margin: 0;
}

@media (max-width: 760px) {
  .crm-service-image-editor:has(.crm-image-preview) {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-service-image-editor:has(.crm-image-preview) > label,
  .crm-service-image-editor:has(.crm-image-preview) > .form-help,
  .crm-service-image-editor:has(.crm-image-preview) > .errorlist {
    grid-column: 1;
  }
}

/* BPS-228: compact state markers in the CRM Services registry. */
.crm-content-signal,
.crm-active-signal {
  display: inline-flex;
  min-width: 24px;
  justify-content: center;
  border: 1px solid var(--crm-line);
  color: var(--crm-muted);
}

.crm-content-signal {
  font-size: 0.75rem;
}

.crm-content-signal[data-state="ready"],
.crm-active-signal[data-state="active"] {
  border-color: var(--crm-status-done);
  color: var(--crm-status-done);
}

.crm-content-signal[data-state="missing"],
.crm-active-signal[data-state="inactive"] {
  border-color: var(--crm-red);
  color: var(--crm-red);
}

.crm-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  color: var(--surface-text-muted);
  font-weight: 600;
}

/* BPS-251: search-only Services toolbar after obsolete controls were removed. */
.crm-services-filters {
  align-items: end;
  margin-bottom: 10px;
}

.crm-services-filters > .crm-services-filter--search {
  flex: 1 1 280px;
}

@media (max-width: 480px) {
  .crm-services-filters {
    align-items: stretch;
  }

  .crm-services-filters > .crm-services-filter--search {
    flex: 1 1 100%;
    width: 100%;
  }

  .crm-services-filters > .btn {
    flex: 0 0 auto;
  }
}

.crm-shell .btn {
  min-height: 34px;
  min-width: 0;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius);
  font-size: .82rem;
  line-height: 1.12;
}

.crm-shell .btn-sm {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: .76rem;
}

/* CRM catalog density follow-up: preserve readable names while preventing
   the primary column from consuming the free width of either registry. */
.crm-table--services .crm-services-col--service {
  width: 31%;
  min-width: 260px;
}

.crm-table--categories th:first-child,
.crm-table--categories .crm-category-primary {
  width: 38%;
  min-width: 240px;
}

/* ── CRM SCHEDULER CALENDAR (Reverse Prompt BPS-53) ──
   Week grid: rows = masters, columns = Mon..Sat. The grid scrolls
   horizontally INSIDE its own wrapper (.crm-cal-scroll) on narrow screens,
   it never widens the page itself (Constraint: no page-level h-scroll). */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.crm-cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.crm-cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.crm-cal-week-label {
  min-width: 132px;
  text-align: center;
  font-weight: 700;
  color: var(--surface-text);
}

.crm-cal-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin: 0;
}

.crm-cal-filters label {
  display: grid;
  gap: 5px;
  color: var(--surface-text-muted);
  font-size: .82rem;
  font-weight: 600;
}

.crm-cal-filters select {
  min-width: 150px;
}

.crm-cal-scroll {
  overflow-x: auto;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
}

.crm-cal-grid {
  display: grid;
  grid-template-columns: 150px repeat(6, minmax(132px, 1fr));
  min-width: 942px;
}

.crm-cal-head,
.crm-cal-row-label,
.crm-cal-cell {
  border-bottom: 1px solid var(--crm-line);
  border-right: 1px solid var(--crm-line);
  padding: 8px;
}

.crm-cal-head:nth-child(7n),
.crm-cal-row-label,
.crm-cal-cell:nth-child(7n) {
  border-right: 0;
}

.crm-cal-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 8px;
  background: color-mix(in srgb, var(--surface) 88%, var(--crm-content-bg));
  color: var(--surface-text-muted);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.crm-cal-head-date {
  font-size: .78rem;
  color: var(--surface-text);
}

.crm-cal-row-label {
  display: flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--surface) 88%, var(--crm-content-bg));
  font-weight: 600;
  color: var(--surface-text);
}

.crm-cal-avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--brand-primary) 16%, transparent);
  color: var(--brand-primary);
  font-size: .68rem;
  font-weight: 700;
}

.crm-cal-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--surface);
  color: var(--surface-text);
}

.crm-cal-cell--off {
  background: color-mix(in srgb, var(--surface) 92%, var(--crm-content-bg));
}

.crm-cal-ev {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 30%, transparent);
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  color: var(--surface-text);
  font-size: .74rem;
  line-height: 1.25;
}

.crm-cal-ev:hover {
  background: color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

.crm-cal-ev-order {
  font-weight: 700;
  color: var(--brand-primary);
}

.crm-cal-ev-post {
  color: var(--surface-text-muted);
}

.crm-cal-ev-hours {
  font-weight: 600;
}

.crm-cal-load {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: .7rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.crm-cal-load--ok {
  background: color-mix(in srgb, var(--crm-status-done) 14%, transparent);
  color: var(--crm-status-done);
  border-color: color-mix(in srgb, var(--crm-status-done) 26%, transparent);
}

.crm-cal-load--full {
  background: color-mix(in srgb, var(--crm-status-consultation) 16%, transparent);
  color: var(--crm-status-consultation);
  border-color: color-mix(in srgb, var(--crm-status-consultation) 28%, transparent);
}

.crm-cal-load--over {
  background: color-mix(in srgb, var(--crm-status-cancelled) 16%, transparent);
  color: var(--crm-status-cancelled);
  border-color: color-mix(in srgb, var(--crm-status-cancelled) 28%, transparent);
}

.crm-lang-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: 168px;
  padding: 6px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: var(--crm-surface-soft);
  box-shadow: var(--crm-shadow);
}

.crm-lang-pop[hidden] {
  display: none;
}

.crm-lang-pop form {
  margin: 0;
}

.crm-lang-pop__btn {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--crm-text);
  font-size: .8rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.crm-lang-pop__btn small {
  min-width: 0;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: .72rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-lang-pop__btn:hover,
.crm-lang-pop__btn.active,
.crm-lang-pop__btn[aria-current="true"] {
  color: var(--crm-red);
  background: color-mix(in srgb, var(--crm-red) 14%, transparent);
}

.crm-profile-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 158px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: var(--crm-surface-soft);
  box-shadow: var(--crm-shadow);
}

.crm-profile-pop[hidden] { display: none; }
.crm-profile-pop a { min-height: 40px; display: flex; align-items: center; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--crm-text); font-size: .8rem; font-weight: 600; }
.crm-profile-pop a:hover,
.crm-profile-pop a:focus-visible { background: color-mix(in srgb, var(--crm-red) 14%, transparent); color: var(--crm-text); outline: 2px solid var(--crm-red); outline-offset: 1px; }

.notification-count {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 0 7px;
  /* Counts may have two or more digits, so this must remain a capsule. */
  border-radius: 999px;
  background: var(--cta);
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  line-height: 1;
}

.notification-list {
  display: grid;
  gap: 12px;
}

.notification-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.notification-item-unread {
  border-color: color-mix(in srgb, var(--brand-primary) 36%, var(--border));
  background: var(--accent-soft);
}

.notification-item > div:first-child {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.notification-item p,
.notification-item time {
  margin: 0;
  color: var(--surface-text-muted);
}

.notification-item time {
  font-size: .84rem;
}

.notification-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.notification-actions form,
.cabinet-actions form {
  margin: 0;
}

#scroll-top:hover {
  background: var(--brand-primary-dark);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px) scale(1.05);
}

#scroll-top:active { transform: scale(.94); }

/* ── SCROLL REVEAL ANIMATIONS ── */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .56s var(--ease), transform .56s var(--ease);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* ── SECTIONS ── */
.section {
  padding: 72px 0;
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.section h2 {
  margin: 0 0 20px;
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.02em;
  text-align: center;
}

.section > .container > p:not(.section-eyebrow) {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-muted);
  text-align: center;
}

/* BPS-181: one public eyebrow component. Alignment remains contextual: heroes
   inherit page alignment, while direct section children are centered below. */
.section-eyebrow,
.hero-kicker,
.public-page-hero__eyebrow,
.why-us-group__heading,
.service-price-panel__eyebrow {
  margin: 0 0 18px;
  color: var(--brand-primary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.section > .container > .section-eyebrow {
  margin-inline: auto;
  text-align: center;
}

.seo-text-section > .container > p,
.card p,
.case-card p,
.service-card p {
  text-align: left;
}

.section > .container > .btn {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.hero {
  position: relative;
  padding-top: 24px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -30% 0 auto;
  height: 520px;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, var(--accent-soft), transparent 70%);
}

.hero-inner {
  position: relative;
  max-width: 860px;
}

.hero-copy h1 {
  margin: 0 0 20px;
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.03em;
  text-align: center;
}

.hero-text {
  margin: 0 0 28px;
  color: var(--text-muted);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  text-align: center;
}

.hero-subtitle {
  margin: 20px 0 0;
  color: var(--text);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.hero-principle {
  margin: 20px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--brand-primary);
  color: var(--text);
  font-weight: 600;
  line-height: 1.55;
  text-align: left;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}

.hero-buttons .btn {
  flex: 1 1 0;
  max-width: 280px;
  padding: 12px 24px;
  font-size: 1rem;
}

.hero.hero-align-left .hero-copy h1,
.hero.hero-align-left .hero-text,
.hero.hero-align-left .hero-subtitle,
.hero.hero-align-left .hero-kicker,
.hero.hero-align-left .hero-microtext {
  text-align: left;
}

.hero.hero-align-left .hero-buttons {
  justify-content: flex-start;
}

/* BPS-139: a static service marker beneath the home hero CTA buttons. */
.home-page .hero-phone-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 640px;
  margin-top: 16px;
}

.home-page .hero-phone-hint__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-circle);
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-primary) 32%, transparent);
}

.home-page .hero-phone-hint__icon svg {
  width: 18px;
  height: 18px;
}

.home-page .hero-phone-hint__content {
  min-width: 0;
}

.home-page .hero-phone-hint__title,
.home-page .hero-phone-hint__body {
  margin: 0;
}

.home-page .hero-phone-hint__title {
  color: var(--text);
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.3;
}

.home-page .hero-phone-hint__body {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: .8rem;
  line-height: 1.4;
}

.home-page .hero-phone-hint__details {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: .73rem;
  line-height: 1.2;
}

.home-page .hero-phone-hint__details li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.home-page .hero-phone-hint__details svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767px) {
  .home-page .hero-phone-hint {
    align-items: flex-start;
    max-width: 100%;
  }

  .home-page .hero-phone-hint__details {
    gap: 6px 10px;
  }
}

.client-gets-list li {
  position: relative;
  padding-left: 26px;
  color: var(--text);
  font-size: .95rem;
}

.client-gets-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 800;
}

.hero-microtext { font-size: .86rem; color: var(--text-muted); }

.contact-section,
.seo-text-section {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-radius: var(--radius);
}

.contact-split {
  display: grid;
  grid-template-columns: minmax(280px, .88fr) minmax(0, 1.36fr);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.contact-aside {
  min-height: 100%;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  background: linear-gradient(150deg, var(--brand-primary), var(--surface));
  color: var(--on-solid);
}

.contact-aside h2 {
  margin: 0;
  color: var(--on-solid);
  text-align: left;
}

.contact-trust-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255, 255, 255, .88);
  font-size: .94rem;
}

.contact-trust-item strong {
  display: block;
  margin-bottom: 2px;
  color: var(--on-solid);
  font-size: 1rem;
}

.contact-trust-item a {
  color: var(--on-solid);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-aside .tg-link-contact {
  align-self: flex-start;
  color: var(--on-solid);
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}

.contact-aside .tg-link-contact:hover {
  color: var(--on-solid);
  background: rgba(255, 255, 255, .24);
}

.map-section {
  padding-top: 0;
}

.map-card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.map-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 320px;
  background: var(--accent-softer);
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.map-address {
  margin: 0;
  padding: 18px 22px;
  border-top: 1px solid var(--hairline);
  color: var(--text-muted);
  font-weight: 600;
}

.map-address a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-trust-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, .18);
  color: var(--on-solid);
  font-size: .82rem;
  font-weight: 800;
}

.contact-formside {
  padding: 34px;
  background: var(--surface);
}

.contact-formside h2 {
  margin-bottom: 24px;
  text-align: left;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: .85rem; font-weight: 600; color: var(--text-muted); }
.req { color: var(--cta); font-weight: 700; }

.field-under {
  position: relative;
}

.field-under::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--brand-primary);
  transition: left .28s var(--ease), width .28s var(--ease);
}

.field-under:focus-within::after {
  left: 0;
  width: 100%;
}

.form-input,
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 2px;
  border: 0;
  border-bottom: 1.5px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.contact-form textarea { min-height: 96px; resize: vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--text-muted); }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: transparent;
}

.contact-form button[disabled] { opacity: .6; cursor: not-allowed; }
.form-caption,
.form-required-note { font-size: .82rem; color: var(--text-muted); margin: 0; }
.form-errors { color: var(--cta); font-weight: 600; }
.errorlist { margin: 4px 0 0; padding-left: 20px; color: var(--cta); font-size: .88rem; }

.symptoms-list,
.repair-steps,
.dpf-check-list,
.stage-list,
.client-gets-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px 24px;
}

.symptoms-list,
.price-list,
.dpf-check-list,
.client-gets-list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.symptoms-list li,
.dpf-check-list li {
  position: relative;
  padding-left: 22px;
  font-size: .95rem;
}

.symptoms-list li::before,
.dpf-check-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--brand-primary);
  font-weight: 800;
}

/* BPS-23: centered content-list cards across public pages. */
.symptoms-list,
.dpf-check-list,
.client-gets-list,
.repair-steps,
.stage-list {
  width: 100%;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto 24px;
  padding: 0;
  list-style: none;
}

.symptoms-list,
.dpf-check-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
}

.client-gets-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  max-width: 780px;
}

.client-gets-list li,
.symptoms-list li,
.dpf-check-list li,
.repair-steps li,
.stage-item {
  position: relative;
  min-width: 0;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-softer));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}

.client-gets-list li {
  padding: 12px 14px 12px 48px;
  color: var(--text);
  font-size: .95rem;
}

.client-gets-list li::before {
  content: "\2713";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--success) 16%, var(--surface));
  border-radius: var(--radius-circle);
  color: var(--success);
  font-weight: 800;
  line-height: 1;
}

.symptoms-list li,
.dpf-check-list li {
  display: flex;
  align-items: center;
  min-height: 74px;
  padding: 14px 16px 14px 62px;
  color: var(--text);
  font-size: .95rem;
}

.symptoms-list li::before,
.dpf-check-list li::before {
  content: "!";
  left: 16px;
  top: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--brand-primary) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--border));
  border-radius: var(--radius-circle);
  color: var(--brand-primary);
  font-weight: 800;
  line-height: 1;
}

.repair-steps {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 16px;
  counter-reset: repair-step;
}

.repair-steps li {
  min-height: 88px;
  padding: 18px 18px 18px 72px;
  color: var(--text);
  font-size: .95rem;
  counter-increment: repair-step;
}

.repair-steps li::before {
  content: counter(repair-step);
  position: absolute;
  left: 18px;
  top: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  border-radius: var(--radius-circle);
  color: var(--surface);
  font-weight: 800;
  line-height: 1;
}

#repair-cycle .repair-cycle-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  max-width: 1040px;
  margin: 28px auto 24px;
  padding: 0;
  list-style: none;
}

#repair-cycle .repair-cycle-step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

#repair-cycle .repair-cycle-step__number {
  color: var(--brand-primary);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .08em;
}

#repair-cycle .repair-cycle-step h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 1.05rem;
}

#repair-cycle .repair-cycle-step p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
}

@media (max-width: 767px) {
  #repair-cycle .repair-cycle-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 22px;
  }
}

/* BPS-160: two independent B2B routes. The counter resets on each process,
   so the second route correctly starts at I rather than continuing at V. */
#corporate-fleets .b2b-process,
#shipping .b2b-process {
  display: grid;
  counter-reset: b2b-process-stage;
  gap: 24px;
  max-width: 860px;
  margin: 28px auto 24px;
}

#corporate-fleets .b2b-process-stage,
#shipping .b2b-process-stage {
  position: relative;
  counter-increment: b2b-process-stage;
  padding: 0 0 28px 46px;
}

#corporate-fleets .b2b-process-stage::before,
#shipping .b2b-process-stage::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 30px;
  color: var(--brand-primary);
  content: counter(b2b-process-stage, upper-roman);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: right;
}

#corporate-fleets .b2b-process-stage h3,
#shipping .b2b-process-stage h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 1.12rem;
  line-height: 1.3;
}

#corporate-fleets .b2b-process-stage__steps,
#shipping .b2b-process-stage__steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.35rem;
  color: var(--text-muted);
}

#corporate-fleets .b2b-process-stage__steps li,
#shipping .b2b-process-stage__steps li {
  padding-left: 4px;
  font-size: .95rem;
  line-height: 1.5;
}

#corporate-fleets .b2b-process-stage__steps li::marker,
#shipping .b2b-process-stage__steps li::marker {
  color: inherit;
  font-weight: 800;
}

@media (min-width: 768px) {
  #corporate-fleets .b2b-process,
  #shipping .b2b-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 44px;
    max-width: 980px;
  }

  #corporate-fleets .b2b-process-stage:nth-child(1),
  #shipping .b2b-process-stage:nth-child(1) { grid-column: 1; grid-row: 1; }
  #corporate-fleets .b2b-process-stage:nth-child(2),
  #shipping .b2b-process-stage:nth-child(2) { grid-column: 2; grid-row: 1; }
  #corporate-fleets .b2b-process-stage:nth-child(3),
  #shipping .b2b-process-stage:nth-child(3) { grid-column: 1; grid-row: 2; }
  #corporate-fleets .b2b-process-stage:nth-child(4),
  #shipping .b2b-process-stage:nth-child(4) { grid-column: 2; grid-row: 2; }

}

@media (max-width: 767px) {
  #corporate-fleets .b2b-process,
  #shipping .b2b-process {
    grid-template-columns: 1fr;
    margin-top: 22px;
  }

  #corporate-fleets .b2b-process-stage,
  #shipping .b2b-process-stage { padding-left: 40px; }

  #corporate-fleets .b2b-process-stage::before,
  #shipping .b2b-process-stage::before { width: 28px; }
}

.stage-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.stage-item {
  padding: 18px 18px 18px 22px;
  overflow: hidden;
  color: var(--text);
  font-size: .95rem;
}

.stage-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand-primary), var(--cta));
}

.client-gets-list li:hover,
.symptoms-list li:hover,
.dpf-check-list li:hover,
.repair-steps li:hover,
.stage-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--border));
  box-shadow: var(--shadow-md);
}

.services-carousel {
  margin-top: 28px;
  --service-slide-h: clamp(560px, 62vh, 660px);
}

.services-slider-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.slider-tabs {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 12px 8px 16px;
  scrollbar-width: none;
}

.slider-tabs::-webkit-scrollbar {
  display: none;
}

.slider-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  min-height: 38px;
  padding: 8px 14px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.slider-tab.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-primary) 28%, transparent);
}

.slider-tab:focus-visible,
.services-slider-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
  outline-offset: 2px;
}

.services-slider {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scroll-behavior: smooth;
  padding: 0;
  scrollbar-width: none;
}

.services-slider::-webkit-scrollbar {
  display: none;
}

.service-slide {
  flex: 0 0 100%;
  min-width: 0;
  height: var(--service-slide-h);
  overflow: visible;
  scroll-snap-align: start;
  padding: 12px 40px 44px;
}

.services-slider .service-slide {
  height: var(--service-slide-h);
}

.services-slider .service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
}

.services-slider .service-card:hover {
  box-shadow: 0 14px 40px rgba(0, 0, 0, .12);
}

.service-slide__media {
  position: relative;
  height: clamp(160px, 24vw, 220px);
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--accent-soft), var(--accent-softer)),
    var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.service-slide__media img,
.service-slide__placeholder {
  width: 100%;
  height: 100%;
  display: block;
}

.service-slide__media img {
  object-fit: cover;
}

.service-slide__placeholder {
  position: relative;
  background:
    radial-gradient(circle at 50% 42%, var(--brand-primary) 0 18px, transparent 19px),
    linear-gradient(135deg, var(--accent-soft), var(--accent-softer));
}

.service-slide__placeholder::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 44px;
  border: 2px solid var(--brand-primary);
  border-top: 0;
  border-radius: 0 0 48px 48px;
  transform: translate(-50%, -20%);
  opacity: .55;
}

.service-slide__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 14px;
}

.service-slide__body > .btn {
  margin-top: auto;
}

.services-slider-btn {
  border: 0;
  cursor: pointer;
}

.services-slider-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: var(--surface);
  color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
  font-size: 1.7rem;
  line-height: 1;
}

.services-slider-autoplay {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  font-size: .85rem;
  font-weight: 800;
}

.services-slider-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
  background: transparent;
}

.slider-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 38px;
}

.slider-dot {
  --ring-size: 24px;
  --ring-circumference: 56.55;
  position: relative;
  width: var(--ring-size);
  height: var(--ring-size);
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--brand-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.slider-dot-core {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--text-muted) 34%, transparent);
  transition: background-color .2s ease, transform .2s ease;
}

.slider-dot.active .slider-dot-core {
  background: var(--brand-primary);
  transform: scale(1.05);
}

.slider-dot-ring {
  position: absolute;
  inset: 0;
  width: var(--ring-size);
  height: var(--ring-size);
  opacity: 0;
  transform: rotate(-90deg);
}

.slider-dot-ring circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: var(--ring-circumference);
  stroke-dashoffset: var(--ring-circumference);
}

.slider-dot.active .slider-dot-ring {
  opacity: 1;
}

.slider-dot.active .slider-dot-ring circle {
  animation: slider-ring-progress var(--slider-ring-duration, 6000ms) linear forwards;
}

.services-carousel.slider-ring-paused .slider-dot.active .slider-dot-ring circle {
  animation-play-state: paused;
}

.services-carousel.slider-ring-static .slider-dot.active .slider-dot-ring circle {
  animation: none;
  stroke-dashoffset: 0;
}

.slider-dot:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
  outline-offset: 2px;
}

@keyframes slider-ring-progress {
  from { stroke-dashoffset: var(--ring-circumference); }
  to { stroke-dashoffset: 0; }
}

.services-slider-btn:disabled {
  cursor: default;
  opacity: .38;
}

.cases-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.services-section .card,
.prices-section .card,
.dpf-section .card { margin-top: 24px; }

.services-section .service-slide {
  margin-top: 0;
}

.prices-section .card:first-child,
.dpf-section .card:first-child { margin-top: 0; }

.cases-grid .card {
  margin-top: 0;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-md);
  height: 100%;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.service-card,
.case-card {
  display: flex;
  flex-direction: column;
}

#cases .case-card { position: relative; padding-top: 26px; }
#cases .case-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--brand-primary); }
#cases .case-card__eyebrow { margin: 0 0 4px; color: var(--text-muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
#cases .case-card__model { display: inline-flex; align-self: flex-start; margin: 0 0 10px; padding: 4px 8px; border-left: 2px solid var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 10%, transparent); color: var(--text); font-size: .84rem; font-weight: 700; }
#cases .case-card h3 { margin: 0 0 15px; color: var(--brand-primary); }
#cases .case-card__facts { display: grid; grid-template-columns: 106px minmax(0, 1fr); column-gap: 10px; row-gap: 0; margin: 0; counter-reset: case-route-step; }
#cases .case-card__facts dt { position: relative; grid-column: 1; display: flex; align-items: center; gap: 5px; margin: 0; padding-top: 9px; color: var(--text-muted); font-size: .72rem; font-weight: 700; line-height: 1.2; counter-increment: case-route-step; }
#cases .case-card__facts dt::before { content: counter(case-route-step); position: relative; z-index: 1; display: grid; flex: 0 0 auto; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--brand-primary) 15%, var(--surface)); color: var(--brand-primary); font-size: .72rem; font-weight: 700; }
#cases .case-card__facts dt:not(:first-of-type)::after { content: ""; position: absolute; top: -9px; left: 9px; width: 2px; height: 18px; background: var(--brand-primary); }
#cases .case-card__facts dd { position: relative; grid-column: 2; margin: 0; padding: 8px 0 13px; border-bottom: 1px solid var(--border); font-size: .9rem; line-height: 1.45; }
#cases .case-card__result { margin: auto 0 0; padding: 12px; border-left: 3px solid var(--price-value); background: color-mix(in srgb, var(--price-value) 11%, transparent); color: var(--text); font-size: .88rem; line-height: 1.45; }
#cases .case-card__result strong { color: var(--price-value); }

.service-card .btn {
  margin-top: auto;
}

.card h3 {
  margin: 0 0 12px;
  font-size: 1.18rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.01em;
  text-align: center;
}

.card p {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: .92rem;
}

.repair-steps,
.stage-list {
  margin: 0 auto 24px;
  padding-left: 0;
}

.repair-steps li,
.stage-item { font-size: .95rem; }

.price-card .price-subheading {
  margin: -4px 0 16px;
  color: var(--brand-primary);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
}

.price-card .price-group-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 12px;
  color: var(--text);
  font-weight: 700;
}

.price-card .price-group-title::before {
  content: "";
  width: 6px;
  height: 20px;
  flex: 0 0 6px;
  border-radius: var(--radius-sm);
  background: var(--brand-primary);
}

.price-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.price-list li,
.price-row {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem .25rem;
  color: var(--text);
  font-size: .92rem;
  font-weight: 500;
}

.price-list li::before {
  content: none;
}

.price-name {
  min-width: 0;
  color: var(--text-muted);
}

.price-leader {
  flex: 1 1 auto;
  min-width: 24px;
  border-bottom: 2px dotted var(--hairline);
  transform: translateY(-.25em);
}

.price-cost {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .price-list li,
  .price-row {
    flex-wrap: wrap;
    gap: .25rem .5rem;
  }

  .price-name {
    flex: 1 1 100%;
  }

  .price-leader {
    flex-basis: 32px;
  }
}

.price-note {
  margin: 0 0 20px;
  padding: 12px 14px;
  font-size: .82rem;
  color: var(--text-muted);
  background: var(--accent-softer);
  border-radius: var(--radius-sm);
}

/* BPS-192: photo-ready production capabilities; the second background layer
   remains visible until the client supplies each 1200 x 675 WebP slot. */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(28px, 4vw, 48px);
}

.equipment-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--home-surface, var(--surface));
}

.equipment-card__media {
  aspect-ratio: 16 / 9;
  background-image: var(--card-bg, none), linear-gradient(135deg, color-mix(in srgb, var(--home-surface, var(--surface)) 88%, var(--brand-primary)), color-mix(in srgb, var(--home-bg, var(--bg)) 82%, var(--brand-primary)));
  background-position: center;
  background-size: cover;
}

.equipment-card__body { padding: 18px; }

.equipment-card__title {
  margin: 0;
  color: var(--home-text, var(--text));
  font-size: 1rem;
  line-height: 1.25;
}

.equipment-card__description {
  margin: 12px 0 0;
  color: var(--home-muted, var(--text-muted));
  font-size: .875rem;
  line-height: 1.55;
}

/* BPS-201: bento keeps the full diesel copy and all ten photo slots.
   Lead 2x2 + eight 1x1 cards + wide 4x1 fill four desktop rows. */
.equipment-card {
  display: flex;
  flex-direction: column;
}

.equipment-card__media { flex: 0 0 auto; }
.equipment-card__body { flex: 1; }

.equipment-card--lead {
  grid-column: span 2;
  grid-row: span 2;
}

.equipment-card--wide { grid-column: span 4; }
.equipment-card--lead .equipment-card__media { aspect-ratio: 16 / 10; }
.equipment-card--wide .equipment-card__media { aspect-ratio: 21 / 9; }
.equipment-card--lead .equipment-card__body { padding: 22px; }
.equipment-card--lead .equipment-card__title { font-size: 1.25rem; }

.equipment-card__kicker {
  margin: 0 0 12px;
  color: var(--home-red-bright);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .equipment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipment-card--lead,
  .equipment-card--wide {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (max-width: 767px) {
  .equipment-grid { grid-template-columns: 1fr; }
  .equipment-card--lead,
  .equipment-card--wide {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* BPS-116: two-level "Чому Bus Pro Service" — unscoped so it renders
   identically on the home page (.home-page) and the about page
   (.public-inner-page.about-page): both already redefine --bg/--surface/
   --surface-soft/--text/--text-muted/--brand-primary/--success to the
   same dark-red palette, so this needs no page-specific duplicate block. */
.why-us-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.why-us-groups {
  margin-top: 24px;
  display: grid;
  gap: 28px;
}

.why-us-card {
  position: relative;
  min-height: 220px;
  margin: 0;
  padding: 1px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: .92rem;
  line-height: 1.5;
  background: var(--surface-soft);
  /* BPS-203: outline keeps the scrim edge-to-edge; padding retains the old box. */
  border: 0;
  outline: 1px solid var(--hairline);
  outline-offset: -1px;
  box-shadow: none;
  color: var(--text);
  background-image: var(--card-bg, none), linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, white 4%), var(--bg));
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  isolation: isolate;
  transition: outline-color .18s var(--ease), box-shadow .18s var(--ease);
}

.why-us-card::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(180deg, rgba(8, 9, 11, .4) 0%, rgba(8, 9, 11, .9) 100%);
}

.why-us-card:hover {
  outline-color: color-mix(in srgb, var(--brand-primary) 64%, var(--border));
  box-shadow: var(--shadow-md);
}

.why-us-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.why-us-card__accent {
  position: absolute;
  left: 14px;
  top: 14px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--brand-primary);
  color: var(--on-solid);
}

.why-us-card__accent svg {
  width: 22px;
  height: 22px;
}

.why-us-card__accent--text {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.why-us-card__title {
  margin: 0;
  padding: 16px 16px 8px;
  color: var(--text);
  font-size: .95rem;
  font-weight: 700;
}

.why-us-card__desc {
  margin: 0;
  padding: 0 16px 16px;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.45;
}

.why-us-bottom {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}

.why-us-row {
  position: relative;
  padding: 14px 16px 14px 50px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}

.why-us-row--wide {
  grid-column: 1 / -1;
}

.why-us-row::before {
  content: "\2713";
  position: absolute;
  left: 14px;
  top: 14px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--success) 16%, var(--surface));
  border-radius: var(--radius-circle);
  color: var(--success);
  font-weight: 800;
  font-size: .8rem;
  line-height: 1;
}

.why-us-row__title {
  display: block;
  margin: 0 0 2px;
  color: var(--text);
  font-size: .92rem;
  font-weight: 700;
}

.why-us-row__desc {
  display: block;
  margin: 0;
  color: var(--text-muted);
  font-size: .85rem;
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .why-us-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .why-us-top { grid-template-columns: 1fr; }
  .why-us-bottom { grid-template-columns: 1fr; }
  .why-us-row--wide { grid-column: auto; }
}

.review-card-demo {
  margin: 24px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.review-demo-row {
  padding: 10px 14px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: .82rem;
  text-align: center;
}

.faq-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  padding: 4px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.faq-item summary {
  min-height: 44px;
  cursor: pointer;
  padding: 14px 0;
  font-weight: 600;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--brand-primary);
  font-weight: 800;
}

.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0 0 16px; color: var(--text-muted); font-size: .92rem; }

.contacts-card {
  width: min(100%, 600px);
  margin: 20px auto 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: var(--surface-text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.contacts-info {
  display: grid;
  gap: 14px;
}

.contact-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--surface-text-muted);
  font-size: .98rem;
  line-height: 1.5;
}

.contact-info-row a {
  color: var(--surface-text);
  font-weight: 700;
  text-decoration: none;
}

.contact-info-row a:hover {
  color: var(--brand-primary);
}

.contact-info-ico {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  background: var(--accent-soft);
  border-radius: var(--radius-circle);
}

.contact-info-ico svg,
.contact-action svg,
.contacts-actions .tg-link svg,
.contacts-actions .wa-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.contact-info-separator {
  margin: 0 8px;
  color: var(--surface-text-muted);
}

.contact-info-address {
  align-items: flex-start;
}

.contacts-divider {
  height: 1px;
  background: var(--hairline);
}

.contacts-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.contact-action,
.contacts-actions .tg-link,
.contacts-actions .wa-link {
  min-width: 0;
  min-height: 52px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--surface-text);
  font-weight: 700;
  text-decoration: none;
  background: color-mix(in srgb, var(--surface) 92%, var(--brand-primary));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}

.contacts-actions .tg-link-contact-card,
.contacts-actions .wa-link-contact-card {
  width: 100%;
}

.contact-action:hover,
.contacts-actions .tg-link:hover,
.contacts-actions .wa-link:hover {
  color: var(--brand-primary);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--brand-primary) 38%, var(--border));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.contact-action:focus-visible,
.contacts-actions .tg-link:focus-visible,
.contacts-actions .wa-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 30%, transparent);
  outline-offset: 3px;
}

.contacts-cta {
  align-self: center;
}

.services-index-section {
  padding-top: 32px;
}

.services-index-grid {
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}

.service-index-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: var(--text);
  text-align: left;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--bg) 96%, transparent)),
    var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.service-index-card::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, var(--bg) 96%, transparent) 0%,
      color-mix(in srgb, var(--bg) 86%, transparent) 32%,
      color-mix(in srgb, var(--bg) 34%, transparent) 62%,
      color-mix(in srgb, var(--bg) 6%, transparent) 100%
    );
}

.service-index-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand-primary) 58%, var(--border));
  box-shadow: var(--shadow-md);
}

.service-index-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 48%, transparent);
  outline-offset: 3px;
}

.service-index-card__body {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
}

.service-index-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.25;
  text-shadow: 0 1px 18px color-mix(in srgb, var(--bg) 70%, transparent);
}

.service-index-card--category p {
  max-height: 2.7em;
  margin: 0;
  color: var(--text-muted);
  font-size: .93rem;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transition: max-height .2s var(--ease), margin .2s var(--ease), opacity .2s var(--ease);
}

.service-index-card .btn {
  margin-top: auto;
}

.service-index-card:hover .btn-ghost,
.service-index-card .btn-ghost:hover,
.service-index-card .btn-ghost:focus-visible {
  color: var(--on-solid);
  background: var(--cta);
  border-color: var(--cta);
}

.service-index-card .catalog-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  border-bottom: 0;
  box-shadow: none;
}

.service-index-card .catalog-image img,
.service-index-card .catalog-image svg {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.service-index-card .catalog-image__placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--brand-primary) 24%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 30%, var(--bg)), var(--bg));
}

.service-index-card .catalog-image__placeholder span {
  right: 20px;
  bottom: 18px;
  color: var(--text);
  text-shadow: 0 1px 16px color-mix(in srgb, var(--bg) 82%, transparent);
}

.service-index-card .catalog-image__placeholder path {
  stroke: color-mix(in srgb, var(--text) 46%, transparent);
}

.service-index-card__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--on-solid);
  background: color-mix(in srgb, var(--cta) 90%, var(--bg));
  box-shadow: var(--shadow-sm);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}

.service-index-card__badge:hover {
  color: var(--on-solid);
  border-color: color-mix(in srgb, var(--on-solid) 42%, var(--cta));
  background: var(--cta);
  box-shadow: var(--shadow-md);
}

.service-index-card__badge:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--on-solid) 80%, transparent);
  outline-offset: 2px;
}

.service-index-card__badge:active {
  color: var(--on-solid);
  background: color-mix(in srgb, var(--cta) 78%, var(--bg));
  box-shadow: var(--shadow-sm);
}

.services-index-grid--categories {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  grid-auto-rows: 440px;
}

/* BPS-112: Mobile services index with live search */
.services-index-search {
  margin-top: 24px;
  position: relative;
}

.services-index-search__input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
}

.services-index-search__input::placeholder {
  color: var(--text-muted);
}

.services-index-search__counter {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .78rem;
  color: var(--text-muted);
}

.js .services-index-search {
  display: block;
}

.no-js .services-index-search,
.services-index-search {
  display: none;
}

@media (max-width: 767px) {
  .js .services-index-search {
    display: block;
  }

  .services-index-grid--categories {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .service-index-card--category {
    min-height: auto;
    flex-direction: column;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
  }

  .service-index-card--category::before {
    display: none;
  }

  .service-index-card--category .catalog-image {
    display: none;
  }

  .category-carousel__card.service-index-card--category .service-index-card__badge,
  .services-index-grid--categories .service-index-card--category .service-index-card__badge {
    top: 10px;
    right: 10px;
    z-index: 4;
    min-height: 32px;
    padding: 6px 9px;
    font-size: .72rem;
  }

  .service-index-card--category .service-index-card__body {
    padding: 0;
    gap: 0;
  }

  .service-index-card--category h3 {
    position: sticky;
    top: var(--header-h);
    z-index: 10;
    margin: 0;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: .95rem;
    text-shadow: none;
  }

  .service-index-card--category .short-description {
    display: none;
  }

  .service-index-card--category .service-index-links {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .service-index-card--category .service-index-links li {
    border-bottom: 1px solid var(--hairline);
  }

  .service-index-card--category .service-index-links a {
    display: block;
    padding: 10px 16px;
    color: var(--text);
    text-decoration: none;
    font-size: .88rem;
  }

  .service-index-card--category .btn-ghost {
    display: none;
  }

  .services-index-grid--categories.is-filtering .service-index-card--category {
    display: none;
  }

  .services-index-grid--categories.is-filtering .service-index-card--category.is-match {
    display: flex;
  }
}

.category-carousel {
  --category-carousel-gap: 16px;
  position: relative;
  margin: 28px auto 0;
  padding-inline: 52px;
}

.category-carousel__viewport {
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.category-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.category-carousel__track {
  display: flex;
  gap: var(--category-carousel-gap);
  align-items: stretch;
}

.category-carousel__card {
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.category-carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-sm);
  font-size: 1.55rem;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}

.category-carousel__nav:hover,
.category-carousel__nav:focus-visible {
  color: var(--on-solid);
  background: var(--cta);
  border-color: var(--cta);
  transform: translateY(-50%) scale(1.04);
}

.category-carousel__nav--prev {
  left: 0;
}

.category-carousel__nav--next {
  right: 0;
}

.category-carousel__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  margin-top: 18px;
}

.category-carousel__dots {
  width: max-content;
  max-width: min(100%, 420px);
  min-height: 28px;
  grid-column: 2;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.category-carousel__dots::-webkit-scrollbar {
  display: none;
}

.category-carousel__services-link {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .18s var(--ease);
}

.category-carousel__services-link span {
  color: var(--brand-primary);
  font-size: 1.1em;
  transition: transform .18s var(--ease);
}

.category-carousel__services-link:hover {
  color: var(--text);
}

.category-carousel__services-link:hover span {
  transform: translateX(3px);
}

.category-carousel__services-link:focus-visible {
  color: var(--text);
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
}

.category-carousel__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--text) 28%, transparent);
  cursor: pointer;
  transition: width .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}

.category-carousel__dot.is-active {
  width: 28px;
  background: var(--cta);
}

.category-carousel__dot:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cta) 34%, transparent);
  outline-offset: 3px;
}

.service-index-card--category {
  height: 440px;
  align-items: stretch;
  text-align: left;
}

.service-index-card--category .service-index-card__body {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: flex-end;
}

/* BPS-140: desktop category-card hierarchy and contained active list. */
@media (min-width: 768px) {
  .service-index-card--category:hover,
  .service-index-card--category:focus-within {
    transform: none;
    border-color: var(--border);
    box-shadow: var(--shadow-md);
  }

  .service-index-card--category::after {
    position: absolute;
    inset: 0;
    z-index: 3;
    content: "";
    pointer-events: none;
    border: 2px solid transparent;
    border-radius: var(--radius);
    transition: border-color .2s var(--ease);
  }

  .service-index-card--category:hover::after,
  .service-index-card--category:focus-within::after {
    border-color: var(--brand-primary);
  }

  .service-index-card--category .service-index-card__eyebrow {
    margin: 0;
    color: var(--brand-primary);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .service-index-card--category h3 {
    font-size: 1.45rem;
    line-height: 1.15;
  }

  .service-index-card--category .service-index-links {
    flex: 0 1 auto;
    max-height: calc(4 * 1.35em + 12px);
    gap: 7px;
  }

  .service-index-card--category:hover .service-index-links,
  .service-index-card--category:focus-within .service-index-links {
    flex: 0 1 auto;
    max-height: 190px;
    gap: 7px;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-content: start;
  }
}

.service-index-card--empty {
  min-height: 180px;
}

.service-index-card--empty h3 {
  position: relative;
  z-index: 2;
  margin: auto 22px 22px;
  color: var(--text);
}

.service-index-links,
.service-related-list {
  margin: 4px 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.service-index-card .service-index-links {
  flex: 0 0 auto;
  max-height: calc(4 * 1.35em + 12px);
  margin-block: 0;
  gap: 4px;
  opacity: 1;
  overflow: hidden;
  scrollbar-color: color-mix(in srgb, var(--text) 36%, transparent) transparent;
  transition: flex .24s var(--ease), max-height .24s var(--ease), opacity .2s var(--ease), margin .2s var(--ease);
}

/* Variant 3: preserve the photo as the card's main layer and dock category
   copy plus exactly four service rows into its deep lower gradient. */
.service-index-card--category .service-index-links {
  flex: 0 0 auto;
  max-height: calc(4 * 1.35em + 12px);
}

.service-index-card:not(.service-index-card--category):hover .service-index-links,
.service-index-card:not(.service-index-card--category):focus-within .service-index-links {
  flex: 1 1 auto;
  max-height: none;
  margin-block: 0;
  opacity: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.service-index-card--category:hover .short-description,
.service-index-card--category:focus-within .short-description {
  max-height: 0;
  margin: 0;
  opacity: 0;
  -webkit-line-clamp: unset;
}

.service-index-links li {
  position: relative;
  padding-left: 16px;
  min-width: 0;
  line-height: 1.35;
}

.service-index-card .service-index-links a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-index-card:hover .service-index-links a,
.service-index-card:focus-within .service-index-links a {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.service-index-links__more {
  padding-left: 0;
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 700;
}

.service-index-links__more::before,
.service-index-card:hover .service-index-links__more,
.service-index-card:focus-within .service-index-links__more {
  display: none;
}

.service-index-links li::before {
  position: absolute;
  top: .62em;
  left: 0;
  width: 6px;
  height: 6px;
  content: "";
  border-radius: var(--radius-circle);
  background: var(--brand-primary);
}

.service-index-links a,
.service-related-list a {
  color: var(--text);
  font-weight: 650;
}

.service-index-links a:hover,
.service-related-list a:hover {
  color: var(--brand-primary);
}

@media (hover: none) {
  .service-index-card:not(.service-index-card--category) .service-index-links {
    flex: 1 1 auto;
    max-height: none;
    margin-block: 0;
    opacity: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: none;
  }

  .service-index-card .short-description {
    max-height: 0;
    margin: 0;
    opacity: 0;
    -webkit-line-clamp: unset;
  }

  .service-index-card .service-index-links a {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .service-index-card .service-index-links__more {
    display: none;
  }
}

@media (max-width: 1023px) {
  .category-carousel {
    padding-inline: 48px;
  }

  .category-carousel__card {
    flex-basis: calc((100% - 16px) / 2);
  }

  .service-index-card--category {
    height: 420px;
  }

  .services-index-grid--categories {
    grid-auto-rows: 420px;
  }
}

@media (max-width: 767.98px) {
  .category-carousel {
    --category-carousel-page-size: 1;
    padding-inline: 0;
  }

  .category-carousel__track {
    padding-inline: 0;
  }

  .category-carousel__card {
    flex-basis: 100%;
  }

  .category-carousel__viewport {
    padding-block: 2px;
  }

  .category-carousel__nav {
    display: none;
  }

  .category-carousel__dots {
    max-width: min(100%, 280px);
  }

  .category-carousel__controls {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 8px;
  }

  .category-carousel__dots,
  .category-carousel__services-link {
    grid-column: 1;
    justify-self: center;
  }

  .service-index-card--category {
    display: flex;
    flex-direction: row;
    height: auto;
    min-height: 150px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }

  .services-index-grid--categories {
    gap: 12px;
  }

  .service-index-card--category::before {
    display: none;
  }

  .service-index-card--category .catalog-image {
    position: relative;
    inset: auto;
    display: block;
    flex: 0 0 104px;
    width: 104px;
    height: auto;
    min-height: 100%;
  }

  .category-carousel__card.service-index-card--category .service-index-card__badge,
  .services-index-grid--categories .service-index-card--category .service-index-card__badge {
    top: 10px;
    right: 10px;
    z-index: 4;
    min-height: 32px;
    padding: 6px 9px;
    font-size: .72rem;
  }

  .service-index-card--category .service-index-card__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px;
    gap: 6px;
  }

  .service-index-card--category h3 {
    position: static;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 1rem;
    text-shadow: none;
  }

  .service-index-card--category .service-index-card__eyebrow {
    display: none;
  }

  .service-index-card--category .short-description {
    display: none;
  }

  .service-index-card .service-index-links {
    flex: 0 1 auto;
    max-height: calc(3 * 1.35em + 8px);
    margin: 0;
    opacity: 1;
    overflow: hidden;
  }

  .service-index-card--category .service-index-links a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .service-index-card--category .service-index-links__more {
    display: none;
  }

  .service-index-card--category .btn-ghost {
    min-height: 0;
    margin-top: auto;
    padding: 0;
    justify-content: flex-start;
    border: 0;
    border-radius: 0;
    color: var(--brand-primary);
    background: transparent;
    font-size: .8rem;
  }

  .service-index-card--category .btn-ghost::after {
    margin-left: 8px;
    content: "→";
    font-size: 1rem;
  }

  /* Shared mobile category card: a fixed visual frame with a contained,
     touch-friendly service list. */
  .category-carousel__card.service-index-card--category,
  .services-index-grid--categories .service-index-card--category {
    flex-direction: column;
    height: 410px;
    min-height: 0;
  }

  .category-carousel__card.service-index-card--category .catalog-image,
  .services-index-grid--categories .service-index-card--category .catalog-image {
    flex: 0 0 154px;
    width: 100%;
    height: 154px;
    min-height: 0;
  }

  .category-carousel__card.service-index-card--category .service-index-card__body,
  .services-index-grid--categories .service-index-card--category .service-index-card__body {
    padding: 14px;
    gap: 6px;
    justify-content: flex-start;
  }

  .category-carousel__card.service-index-card--category .short-description,
  .services-index-grid--categories .service-index-card--category .short-description {
    display: none;
  }

  .category-carousel__card .category-carousel__services-list,
  .services-index-grid--categories .service-index-card--category .service-index-links {
    flex: 0 0 168px;
    height: 168px;
    max-height: 168px;
    margin: 0;
    padding-right: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
  }

  .category-carousel__card .category-carousel__services-list::-webkit-scrollbar,
  .services-index-grid--categories .service-index-card--category .service-index-links::-webkit-scrollbar {
    width: 4px;
  }

  .category-carousel__card .category-carousel__services-list::-webkit-scrollbar-thumb,
  .services-index-grid--categories .service-index-card--category .service-index-links::-webkit-scrollbar-thumb {
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--text-muted) 62%, transparent);
  }

  .category-carousel__card .category-carousel__services-list li,
  .services-index-grid--categories .service-index-card--category .service-index-links li {
    height: 42px;
    padding-left: 14px;
    border-top: 1px solid var(--hairline);
  }

  .category-carousel__card .category-carousel__services-list a,
  .services-index-grid--categories .service-index-card--category .service-index-links a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 4px 8px 4px 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-carousel__dot,
  .category-carousel__nav,
  .service-index-card,
  .service-index-card .service-index-links {
    transition: none;
  }
}

.service-detail-hero {
  padding-bottom: 44px;
}

.service-detail-hero-inner {
  max-width: 860px;
  text-align: center;
}

.service-detail-back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  color: var(--brand-primary);
  font-weight: 700;
}

.service-detail-back:hover {
  color: var(--brand-primary-dark);
}

.service-detail-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.02em;
}

.service-detail-hero p {
  max-width: 760px;
  margin: 0 auto 28px;
  color: var(--text-muted);
  font-size: clamp(1.02rem, 2vw, 1.2rem);
}

.service-detail-content {
  padding-top: 0;
}

.service-detail-stack {
  display: grid;
  gap: 24px;
}

.service-detail-stack > .section {
  padding: 0;
}

.service-detail-stack > .section > .container {
  width: 100%;
}

.service-detail-cta {
  height: auto;
  text-align: center;
}

.service-detail-cta h2 {
  margin-bottom: 12px;
}

.service-detail-cta p {
  max-width: 620px;
  margin: 0 auto 20px;
  color: var(--surface-text-muted);
  text-align: center;
}

.service-content-card,
.service-price-card,
.service-related-card {
  color: var(--surface-text);
}

.service-price-card__value {
  margin: 8px 0;
  color: var(--price-value);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 750;
}

.seo-text-section p { max-width: none; }

/* BPS-187: the SEO work cycle is distinct from the homepage repair cycle. */
.public-inner-page .seo-text-section__cycle {
  margin: 30px 0 34px;
  padding: 26px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.public-inner-page .seo-text-section__cycle h3 {
  margin: 0 0 22px;
  color: var(--inner-text);
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
}

.public-inner-page .seo-work-cycle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: seo-work-cycle;
}

.public-inner-page .seo-work-cycle::before {
  position: absolute;
  top: 15px;
  right: 8.333%;
  left: 8.333%;
  height: 1px;
  content: "";
  background: var(--hairline);
}

.public-inner-page .seo-work-cycle li {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  justify-items: center;
  color: var(--inner-muted);
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
  counter-increment: seo-work-cycle;
}

.public-inner-page .seo-work-cycle li::before {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  content: counter(seo-work-cycle);
  border: 1px solid var(--brand-primary);
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-primary);
  font-size: .78rem;
  font-weight: 800;
}

.public-inner-page .seo-text-section__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.public-inner-page .seo-text-section__copy {
  display: grid;
  align-content: start;
  gap: 20px;
}

.public-inner-page .seo-text-section__copy p {
  margin: 0;
  color: var(--inner-muted);
  line-height: 1.7;
  text-align: left;
}

@media (max-width: 760px) {
  .public-inner-page .seo-text-section__cycle {
    padding: 22px 18px;
  }

  .public-inner-page .seo-work-cycle {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .public-inner-page .seo-work-cycle::before {
    top: 15px;
    bottom: 15px;
    left: 15px;
    width: 1px;
    height: auto;
  }

  .public-inner-page .seo-work-cycle li {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    justify-items: start;
    text-align: left;
  }

  .public-inner-page .seo-text-section__columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 64px;
  }

  .cabinet-section {
    padding: 48px 0 84px;
  }

  .cabinet-shell {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cabinet-stats,
  .cabinet-quicklinks {
    grid-template-columns: 1fr;
  }

  .cabinet-side {
    position: static;
  }

  .cabinet-nav {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .cabinet-user {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .cabinet-user__avatar {
    width: 40px;
    height: 40px;
  }

  .cabinet-hero,
  .cabinet-item {
    align-items: stretch;
    flex-direction: column;
  }

  .cabinet-back {
    align-items: stretch;
    flex-direction: column;
  }

  .cabinet-actions,
  .cabinet-item-meta {
    width: 100%;
  }

  .cabinet-actions .btn,
  .cabinet-item-meta .btn {
    flex: 1 1 180px;
  }

  .cabinet-details > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .crm-shell,
  .crm-grid,
  .crm-detail-grid,
  .crm-form-grid {
    grid-template-columns: 1fr;
  }

  .crm-shell { grid-template-rows: 64px auto minmax(0, 1fr); }

  .crm-appbar { grid-column: 1; grid-row: 1; }

  .crm-sidebar {
    position: static;
    grid-column: 1;
    grid-row: 2;
    height: auto;
    padding: 14px 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  .crm-nav {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  .crm-main {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    padding: 16px 12px 40px;
  }

  .crm-topbar,
  .crm-list-item {
    align-items: stretch;
    flex-direction: column;
  }

  .crm-topbar {
    padding: 12px;
  }

  .crm-profile-button__meta,
  .crm-profile-button__chevron { display: none; }

  .crm-profile-button { width: 44px; padding: 5px; }

  .crm-panel {
    padding: 10px;
  }

  .crm-list-actions,
  .notification-actions {
    justify-content: flex-start;
  }

  .notification-item {
    align-items: stretch;
    flex-direction: column;
  }

  body {
    padding-bottom: calc(var(--mobile-panel-h) + env(safe-area-inset-bottom));
  }

  .nav { display: none; }

  .mobile-fixed-panel { display: flex; }

  .header-inner {
    height: var(--header-h);
    justify-content: space-between;
    gap: 16px;
  }

  #scroll-top {
    right: 16px;
    bottom: calc(var(--mobile-panel-h) + env(safe-area-inset-bottom) + 20px);
  }

  .section {
    padding: 52px 0;
    scroll-margin-top: calc(var(--header-h) + 16px);
  }

  .hero {
    padding-top: 20px;
  }

  .symptoms-list,
  .repair-steps,
  .dpf-check-list,
  .stage-list,
  .client-gets-list,
  .cases-grid,
  .why-us-top,
  .why-us-bottom,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* BPS-274: the reserved desktop footer slot must not add an empty gap. */
  .footer-col--reserved {
    display: none;
  }

  .review-card-demo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-split {
    grid-template-columns: 1fr;
  }

  .contact-aside,
  .contact-formside {
    padding: 28px 22px;
  }

  .contact-aside {
    justify-content: flex-start;
  }

  .service-slide__body {
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .topbar {
    display: none;
  }

  .nav-account {
    display: none;
  }
}

@media (max-width: 520px) {
  .container {
    width: min(100% - 32px, 1160px);
  }

  .btn,
  .hero-buttons .btn {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .hero-buttons {
    gap: 10px;
  }

  .card {
    padding: 22px;
  }

  /* BPS-203: replace the removed 1px border without shifting mobile content. */
  .why-us-card { padding: 23px; }

  .review-card-demo {
    grid-template-columns: 1fr;
  }

  .contacts-card {
    padding: 22px;
  }

  .contacts-actions {
    grid-template-columns: 1fr;
  }

  .contact-info-row {
    align-items: flex-start;
  }

  .services-slider {
    margin-inline: 0;
  }

  .service-slide {
    flex-basis: 100%;
    height: 600px;
    padding: 10px 18px 30px;
  }

  .service-slide__body {
    padding: 18px 18px 14px;
  }

  .services-slider-footer {
    gap: 12px;
  }

  .contact-aside,
  .contact-formside {
    padding: 24px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  .services-slider {
    scroll-behavior: auto;
  }

  .btn:not(.btn-ghost)::before,
  .btn:not(.btn-ghost):hover::before {
    transform: translateX(-130%);
    transition: none;
  }

  .slider-dot.active .slider-dot-ring circle {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ── MASTER MOBILE CRM (Reverse Prompt BPS-54) ──────────────────────────
   Single-column, mobile-first layout for masters (shop-floor phones):
   no sidebar/graphite CRM shell, no public header/footer/slider chrome --
   a lightweight standalone base (templates/master/base.html) using the
   same design tokens as the rest of the site, large touch targets
   (>=44px), never a horizontal page scroll. */

.mcrm-body {
  background: var(--bg);
  color: var(--surface-text);
  min-height: 100vh;
}

.mcrm-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.mcrm-header-brand {
  font-weight: 800;
  font-size: 1rem;
  color: var(--surface-text);
  white-space: nowrap;
}

.mcrm-header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mcrm-header-name {
  font-size: .9rem;
  color: var(--surface-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 30vw;
}

.mcrm-lang-pop-wrap {
  position: relative;
}

.mcrm-lang-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--surface-text);
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
}

.mcrm-lang-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 96px;
}

.mcrm-lang-pop__btn {
  min-height: 40px;
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--surface-text);
  font-size: .85rem;
  text-align: left;
  cursor: pointer;
}

.mcrm-lang-pop__btn.active {
  background: var(--accent-soft);
  color: var(--brand-primary);
  font-weight: 700;
}

.mcrm-logout {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--surface-text-muted);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}

.mcrm-messages {
  display: grid;
  gap: 8px;
  padding: 12px 16px 0;
}

.mcrm-message {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--surface-text);
}

.mcrm-message--success {
  background: rgba(52, 199, 89, .12);
  color: #178a3a;
  border-color: rgba(52, 199, 89, .24);
}

.mcrm-message--error {
  background: rgba(255, 59, 48, .1);
  color: #c8322a;
  border-color: rgba(255, 59, 48, .22);
}

.mcrm-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px 48px;
}

.mcrm-section {
  display: grid;
  gap: 14px;
}

.mcrm-page-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 4px 0 0;
}

.mcrm-section-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--surface-text-muted);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 10px 0 0;
}

.mcrm-cards {
  display: grid;
  gap: 10px;
}

.mcrm-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  min-height: 44px;
}

a.mcrm-card:active {
  background: var(--accent-softer);
}

.mcrm-card--static {
  cursor: default;
}

.mcrm-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mcrm-card-order {
  font-weight: 800;
  font-size: 1rem;
}

.mcrm-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: .85rem;
  color: var(--surface-text-muted);
}

.mcrm-card-hours {
  font-weight: 700;
  font-size: .9rem;
  color: var(--brand-primary);
}

.mcrm-empty {
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--surface-text-muted);
  font-size: .9rem;
  text-align: center;
}

.mcrm-back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 4px;
  color: var(--surface-text-muted);
  font-size: .88rem;
  text-decoration: none;
}

.mcrm-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mcrm-order-info {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.mcrm-order-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: .92rem;
}

.mcrm-order-row span {
  color: var(--surface-text-muted);
}

.mcrm-order-row--block {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.mcrm-order-row--block p {
  margin: 0;
  color: var(--surface-text);
}

.mcrm-status-form {
  display: grid;
  gap: 10px;
}

.mcrm-status-btn {
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--surface-text);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
}

.mcrm-status-btn--active {
  background: var(--accent-soft);
  color: var(--brand-primary);
  border-color: rgba(0, 113, 227, .28);
  cursor: default;
}

@media (min-width: 640px) {
  .mcrm-status-form {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: column;
  }
}

/* Reverse Prompt BPS-55: master-side "request extra hours" form on
   templates/master/order_detail.html. */
.mcrm-extra-hours-form {
  display: grid;
  gap: 10px;
}

.mcrm-field {
  display: grid;
  gap: 4px;
  font-size: .85rem;
  color: var(--surface-text-muted);
}

.mcrm-field input,
.mcrm-field textarea {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--surface-text);
  font-size: .92rem;
}

.mcrm-field textarea {
  min-height: 72px;
  resize: vertical;
}

/* BPS-60: client cabinet follows the public Figma-inspired visual language. */
.cabinet-page {
  --cab-bg: #08090b;
  --cab-surface: #141619;
  --cab-surface-soft: rgba(255,255,255,.055);
  --cab-text: #f5f5f2;
  --cab-muted: #9da1a7;
  --cab-red: #e31e24;
  --bg: #08090b;
  --surface: #141619;
  --surface-soft: rgba(255, 255, 255, .055);
  --text: #f5f5f2;
  --text-muted: #a0a3a8;
  --surface-text: #f5f5f2;
  --surface-text-muted: #a0a3a8;
  --border: rgba(255, 255, 255, .12);
  --hairline: rgba(255, 255, 255, .09);
  --brand-primary: #ff3b30;
  --brand-primary-dark: #e31e24;
  --focus-ring: rgba(227, 30, 36, .32);
  --accent-softer: color-mix(in srgb, var(--cab-red) 8%, transparent);
  --shadow-brand: 0 10px 28px color-mix(in srgb, var(--cab-red) 28%, transparent);
  background: var(--cab-bg);
  color: var(--cab-text);
}
.cabinet-page main { background: var(--cab-bg); }
.cabinet-page .site-header .nav a,
.cabinet-page .topbar a,
.cabinet-page .topbar-hours { color: var(--cab-text); }
.cabinet-page .site-header .nav a:hover { color: #ff3b30; }
.cabinet-page .btn-cta,
.cabinet-page .btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--cab-red) 86%, var(--on-solid)), var(--cab-red)); border-color: var(--cab-red); }
.cabinet-page .btn-cta:hover,
.cabinet-page .btn-primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--cab-red) 76%, var(--on-solid)), var(--cab-red)); border-color: var(--cab-red); }
.cabinet-page .cabinet-section { min-height: calc(100vh - 136px); padding-block: clamp(36px, 5vw, 76px); background: var(--cab-bg); }
.cabinet-page .cabinet-shell { gap: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); background: var(--cab-surface); box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.cabinet-page .cabinet-side { background: #111316; border-right: 1px solid rgba(255,255,255,.08); }
.cabinet-page .cabinet-user { border-bottom-color: rgba(255,255,255,.08); }
.cabinet-page .cabinet-user__avatar { background: var(--cab-red); color: #fff; box-shadow: 0 8px 24px rgba(227,30,36,.25); }
.cabinet-page .cabinet-user__name { color: var(--cab-text); }
.cabinet-page .cabinet-user__email { color: var(--cab-muted); }
.cabinet-page .cabinet-nav a { color: var(--cab-muted); border-color: transparent; }
.cabinet-page .cabinet-nav a:hover,
.cabinet-page .cabinet-nav a.active { color: #fff; background: rgba(227,30,36,.15); border-color: rgba(227,30,36,.35); }
.cabinet-page .cabinet-nav a.active { box-shadow: inset 3px 0 0 var(--cab-red); }
.cabinet-page .notification-count { background: var(--cab-red); color: #fff; }
.cabinet-page .cabinet-content { background: var(--cab-surface); color: var(--cab-text); }
.cabinet-page .cabinet-hero { border-bottom-color: rgba(255,255,255,.08); }
.cabinet-page .cabinet-hero .eyebrow { color: #ff3b30; }
.cabinet-page .cabinet-hero h1,
.cabinet-page .cabinet-panel-head h1,
.cabinet-page .cabinet-panel-head h2,
.cabinet-page .cabinet-item-main strong,
.cabinet-page .cabinet-details dt,
.cabinet-page .cabinet-empty h3 { color: var(--cab-text); }
.cabinet-page .cabinet-panel,
.cabinet-page .cabinet-stat,
.cabinet-page .cabinet-quicklink,
.cabinet-page .cabinet-item,
.cabinet-page .cabinet-details,
.cabinet-page .cabinet-form,
.cabinet-page .cabinet-empty { background: var(--cab-surface-soft); border-color: rgba(255,255,255,.1); color: var(--cab-text); box-shadow: none; }
.cabinet-page .cabinet-panel:hover,
.cabinet-page .cabinet-item:hover,
.cabinet-page .cabinet-quicklink:hover { border-color: rgba(227,30,36,.62); box-shadow: 0 16px 48px rgba(0,0,0,.2); }
.cabinet-page .cabinet-count,
.cabinet-page .cabinet-item-main span,
.cabinet-page .cabinet-item-meta time,
.cabinet-page .cabinet-quicklink small,
.cabinet-page .cabinet-empty p,
.cabinet-page .cabinet-details dd { color: var(--cab-muted); }
.cabinet-page .cabinet-stat__icon { background: rgba(227,30,36,.15); color: #ff3b30; }
.cabinet-page .cabinet-stat strong { color: var(--cab-text); }
.cabinet-page .cabinet-quicklink span { color: var(--cab-muted); }
.cabinet-page .cabinet-quicklink strong { color: var(--cab-text); }
.cabinet-page .cabinet-quicklink::after { color: #ff3b30; }
.cabinet-page .cabinet-back__link,
.cabinet-page .cabinet-crumb,
.cabinet-page .cabinet-crumb a { color: var(--cab-muted); }
.cabinet-page .cabinet-back__link:hover,
.cabinet-page .cabinet-crumb a:hover { color: #ff3b30; }
.cabinet-page .cabinet-form input,
.cabinet-page .cabinet-form textarea,
.cabinet-page .cabinet-form select { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--cab-text); }
.cabinet-page .cabinet-form label { color: var(--cab-muted); }
.cabinet-page .status-badge { border-color: rgba(255,255,255,.16); }
.cabinet-page .site-footer { background: #08090b; border-top-color: rgba(255,255,255,.1); }

@media (max-width: 900px) {
  .cabinet-page .cabinet-section { padding-block: 24px 72px; }
  .cabinet-page .cabinet-shell { border-radius: var(--radius); }
}

/* ==========================================================================\n+   Bus Pro public home redesign — Figma-inspired dark service landing\n+   Scope: homepage only (.home-page). Business logic and inner pages stay intact.\n+   ========================================================================== */

.home-page {
  --bg: #08090b;
  --surface: #141619;
  --surface-soft: rgba(255, 255, 255, .055);
  --text: #f5f5f2;
  --text-muted: #a0a3a8;
  --surface-text: #f5f5f2;
  --surface-text-muted: #a0a3a8;
  --border: rgba(255, 255, 255, .12);
  --hairline: rgba(255, 255, 255, .09);
  --brand-primary: #ff3b30;
  --brand-primary-dark: #e31e24;
  --brand-accent: #e31e24;
  --cta: #e31e24;
  --cta-hover: #ff3b30;
  --success: #ff3b30;
  --header-bg: rgba(8, 9, 11, .88);
  --accent-soft: rgba(227, 30, 36, .16);
  --accent-softer: rgba(255, 255, 255, .06);
  --shadow-brand: 0 10px 28px color-mix(in srgb, var(--home-red) 28%, transparent);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 60px rgba(0, 0, 0, .6);
  --home-bg: var(--bg);
  --home-surface: var(--surface);
  --home-surface-soft: var(--surface-soft);
  --home-text: var(--text);
  --home-muted: var(--text-muted);
  --home-red: var(--brand-primary-dark);
  --home-red-bright: var(--brand-primary);
  background: var(--bg);
  color: var(--text);
}

.home-page main {
  overflow-x: clip;
  background: var(--home-bg);
}

.home-page .topbar {
  /* BPS-121: full-bleed hero (.home-page .hero, position: relative) paints
     above static in-flow boxes regardless of DOM order, so it silently
     covered the topbar with its own photo. position: relative + a small
     explicit z-index (auto positioned elements stack as if z-index: 0)
     lifts the topbar above the hero while staying well under the sticky
     header's z-index: 999 (main.css:366) -- not sticky, no top/left offset,
     so geometry and scroll behaviour are unchanged. */
  position: relative;
  z-index: 2;
  background: rgba(8, 9, 11, .12);
  color: var(--home-text);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.home-page .site-header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)),
    rgba(8, 9, 11, .16);
  border-color: transparent;
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .34);
}

.home-page .site-header.scrolled {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)),
    rgba(8, 9, 11, .38);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

.home-page .lang-dd summary {
  color: #fff;
}

.home-page .lang-dd summary {
  background: rgba(255, 255, 255, .055);
  border-color: var(--border);
}

.home-page .lang-dd summary:hover,
.home-page .lang-dd[open] summary {
  color: #fff;
  background: rgba(255, 255, 255, .11);
  border-color: rgba(255, 255, 255, .28);
}

.home-page .lang-menu {
  background: var(--surface);
  border-color: var(--border);
}

.home-page .lang-opt {
  color: var(--text);
}

.home-page .lang-opt:hover {
  background: rgba(255, 255, 255, .07);
}

.home-page .site-header .nav a,
.home-page .topbar a,
.home-page .topbar-hours {
  color: var(--home-text);
}

.home-page .site-header .nav a:hover,
.home-page .site-header .nav a.active,
.home-page .topbar a:hover {
  color: var(--home-red-bright);
}

.home-page .btn-cta,
.home-page .btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--home-red) 86%, var(--on-solid)), var(--home-red));
  border-color: var(--home-red);
  box-shadow: 0 12px 30px rgba(227, 30, 36, .25);
}

.home-page .btn-cta:hover,
.home-page .btn-primary:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--home-red-bright) 86%, var(--on-solid)), var(--home-red-bright));
  border-color: var(--home-red-bright);
}

.home-page .btn-ghost {
  color: var(--home-text);
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .04);
}

.home-page .section {
  padding-block: clamp(72px, 9vw, 132px);
  background: var(--home-bg);
}

.home-page .section h2 {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  color: var(--home-text);
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.home-page .section-lead,
.home-page .section > .container > p:not(.section-eyebrow),
.home-page .price-subheading {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  color: var(--home-muted);
}

/* BPS-282: a quieter explanatory line under the responsibility statement. */
.why-us-section .section-lead__note {
  max-width: 720px;
  margin: -8px auto 0;
  color: var(--public-surface-muted);
  font-size: .94rem;
  line-height: 1.6;
  text-align: center;
}

/* BPS-108/BPS-119: «Дизельна лабораторія» — фото-карточки услуг и свой
   фон секции. Собственный класс вместо .service-index-links (тот остаётся
   только для карточек каталога); h2 и лид используют общее центрирование
   секций главной страницы. */
.home-page .diesel-lab {
  position: relative;
  isolation: isolate;
  background-image: var(--section-bg, none), linear-gradient(120deg, #08090b 0%, #101216 55%, #08090b 100%);
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.home-page .diesel-lab::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: linear-gradient(180deg, rgba(8,9,11,.82) 0%, rgba(8,9,11,.86) 100%);
}
.home-page .diesel-lab .container {
  position: relative;
  z-index: 1;
}
.diesel-lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 18px;
  margin-top: 40px;
}
.diesel-lab-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  isolation: isolate;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  transition: transform .2s ease;
}
.diesel-lab-card:hover,
.diesel-lab-card:focus-visible {
  transform: translateY(-4px);
}
.diesel-lab-card .catalog-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
}
.diesel-lab-card .catalog-image img,
.diesel-lab-card .catalog-image svg {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.diesel-lab-card .catalog-image__placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--brand-primary) 24%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 30%, var(--bg)), var(--bg));
}
.diesel-lab-card .catalog-image__placeholder span {
  display: none;
}
.diesel-lab-card::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(180deg, rgba(8,9,11,0) 30%, rgba(8,9,11,.94) 100%);
}
.diesel-lab-card__content {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: grid;
  gap: 6px;
}
.diesel-lab-card__caption {
  color: var(--on-solid);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: keep-all;
}
.diesel-lab-card__description {
  display: -webkit-box;
  overflow: hidden;
  color: color-mix(in srgb, var(--on-solid) 78%, transparent);
  font-size: .82rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
@media (min-width: 768px) {
  .diesel-lab-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .diesel-lab-grid { grid-template-columns: repeat(3, 1fr); }
}

.home-page .hero {
  position: relative;
  min-height: calc(var(--hero-h) + var(--hero-full-bleed-offset, 0px));
  display: flex;
  align-items: flex-start;
  padding-block: clamp(26px, 3.4vw, 50px) clamp(76px, 9vw, 128px);
  padding-top: calc(var(--hero-full-bleed-offset, 0px) + var(--hero-top-gap));
  isolation: isolate;
  background-image: var(--hero-bg, none), linear-gradient(115deg, #08090b 0%, #101216 55%, #08090b 100%);
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* BPS-113/115: Full-bleed hero — photo from top edge, under header */
.hero-full-bleed {
  --hero-full-bleed-offset: calc(var(--topbar-h) + var(--header-h) + 10px);
  margin-top: calc(-1 * var(--hero-full-bleed-offset));
}

@media (max-width: 1023px) {
  .hero-full-bleed { --hero-full-bleed-offset: calc(var(--header-h) + 8px); }
}

@media (max-width: 767px) {
  .hero-full-bleed { --hero-full-bleed-offset: var(--header-h); }
}

/* BPS-113/115: Top scrim for text readability over photo. Scoped to
   .home-page .hero only — .public-page-hero and .service-detail-hero
   already have their own ::after scrim rules further down in this file
   (~line 5919 and ~6010); merged here instead of duplicated with
   different values, per BPS-115 Task instruction. */
.home-page .hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    radial-gradient(75% 120% at 22% 50%, rgba(6,7,9,.82) 0%, rgba(6,7,9,.55) 42%, transparent 72%),
    linear-gradient(180deg, rgba(8,9,11,.55) 0%, rgba(8,9,11,.18) 38%, rgba(8,9,11,.68) 100%);
  pointer-events: none;
}

.home-page .hero-inner {
  position: relative;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: start;
  gap: clamp(28px, 5vw, 72px);
  text-align: left;
  isolation: isolate;
}

.home-page .hero-copy {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0;
}

.home-page .hero-copy h1 {
  max-width: 900px;
  margin: 0;
  color: var(--home-text);
  font-size: clamp(2.6rem, 5.2vw, 5.1rem);
  line-height: .98;
  letter-spacing: -.06em;
  text-align: left;
}

.home-page .hero-copy h1::first-letter,
.public-page-hero h1::first-letter,
.public-inner-page .service-detail-hero h1::first-letter {
  color: var(--brand-primary);
}

.home-page .hero-text {
  max-width: 760px;
  margin: 22px 0 0;
  color: rgba(255,255,255,.9);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  text-align: left;
}

.home-page .hero-subtitle {
  max-width: 760px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.96);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  text-align: left;
}

.home-page .hero-principle {
  max-width: 760px;
  color: rgba(255,255,255,.96);
}

.home-page .hero-buttons { justify-content: flex-start; margin-top: 32px; }

/* BPS-281: compact home lead capture uses the existing contact endpoint. */
.home-request { background: #0d0f12; }
.home-request__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.home-request__copy h2 { margin: 0 0 16px; color: var(--home-text); text-align: left; }
.home-request__copy p { margin: 0; color: var(--home-muted); font-size: 1.05rem; line-height: 1.6; }
.home-request-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; color: var(--home-text); }
.home-request-form .form-row { gap: 7px; }
.home-request-form .form-row label { color: var(--home-muted); }
.home-request-form .form-input { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: calc(var(--radius) - 6px); background: rgba(255,255,255,.06); color: var(--home-text); }
.home-request-form textarea.form-input { min-height: 112px; resize: vertical; }
.home-request-form .form-input:focus { outline: 2px solid color-mix(in srgb, var(--brand-primary) 76%, white); outline-offset: 2px; border-color: transparent; }
.phone-region-select { min-width: 0; }
.home-request-form__symptoms, .home-request-form > .g-recaptcha, .home-request-form > .form-caption, .home-request-form > .form-errors, .home-request-form > .btn { grid-column: 1 / -1; }
.home-request-form > .btn { width: fit-content; }
@media (max-width: 760px) { .home-request__inner, .home-request-form { grid-template-columns: 1fr; } .home-request-form > .form-row { grid-column: 1; } .home-request-form > .btn { width: 100%; } }

.home-page .services-section,
.home-page .why-us-section,
.home-page .cases-section { background: #0d0f12; }

.home-page .services-section .card,
.home-page .case-card,
.home-page .faq-item {
  background: var(--home-surface-soft);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: none;
  color: var(--home-text);
}

.home-page .services-section .card:hover,
.home-page .case-card:hover { border-color: rgba(227,30,36,.64); box-shadow: 0 18px 60px rgba(0,0,0,.26); }
.home-page .services-section .card h3,
.home-page .case-card h3 { color: var(--home-text); }
.home-page .services-section .card p,
.home-page .case-card p,
.home-page .faq-item p { color: var(--home-muted); }
.home-page .slider-tab.active,
.home-page .slider-tab:hover { color: var(--home-text); background: var(--home-red); border-color: var(--home-red); }
.home-page .slider-tab { color: var(--home-muted); border-color: rgba(255,255,255,.14); background: transparent; }
.home-page .cases-grid { gap: 16px; }

/* BPS-193: the home showcase is controlled by Service.is_featured in CRM. */
.home-page .featured-services__heading {
  margin: 14px auto 0;
  color: var(--home-text);
  font-size: 1.1rem;
  font-weight: 700;
}

.featured-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(28px, 4vw, 48px);
}

.featured-service-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--home-surface, var(--surface));
}

.featured-service-card__category {
  margin: 0;
  color: var(--home-muted, var(--text-muted));
  font-size: .875rem;
}

.featured-service-card h3 { margin: 10px 0 0; font-size: 1.1rem; line-height: 1.3; }
.featured-service-card h3 a { color: var(--home-text, var(--text)); text-decoration: none; }
.featured-service-card h3 a:hover { color: var(--brand-primary); }
.featured-service-card h3 a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 4px; }

@media (max-width: 1023px) {
  .featured-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .featured-services-grid { grid-template-columns: 1fr; }
}

/* BPS-194: a compact B2B band uses a distinct rhythm from the benefit cards. */
.home-page .commercial-fleet-section { background: var(--home-bg); }
.home-page .commercial-fleet__panel {
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--home-surface-soft);
}
.home-page .commercial-fleet__panel .section-eyebrow,
.home-page .commercial-fleet__panel h2,
.home-page .commercial-fleet__lead { margin-inline: 0; text-align: left; }
.home-page .commercial-fleet__lead {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--home-muted);
  font-size: 1rem;
  line-height: 1.6;
}
/* BPS-202: three numbered lists distinguish fleet terms from photo cards. */
.commercial-fleet__groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(24px, 4vw, 40px) 0;
}
.commercial-fleet__group {
  min-width: 0;
  padding: 22px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--home-surface);
}
.commercial-fleet__group-number {
  margin: 0;
  color: var(--home-red-bright);
  font-family: ui-monospace, monospace;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.4;
}
.commercial-fleet__group-title {
  margin: 8px 0 16px;
  color: var(--home-text);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.4;
}
.commercial-fleet__points {
  margin: 0;
  padding: 0;
  list-style: none;
}
.commercial-fleet__point {
  min-width: 0;
  border-top: 1px solid var(--border);
  color: var(--home-text);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.45;
}
.commercial-fleet__point a,
.commercial-fleet__point span {
  min-height: 44px;
  padding: 11px 0;
  display: flex;
  align-items: center;
  color: var(--home-text);
}
.commercial-fleet__point a { text-decoration: underline; text-underline-offset: 3px; }
.commercial-fleet__point a:hover { color: var(--brand-primary); }
.commercial-fleet__point a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.commercial-fleet__cta { width: fit-content; }

@media (max-width: 1023px) {
  .commercial-fleet__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .home-page .commercial-fleet__panel { padding: 24px 18px; }
  .commercial-fleet__groups { grid-template-columns: 1fr; }
  .commercial-fleet__cta { width: 100%; }
}

.form-optional { margin-left: 3px; color: var(--text-muted); font-size: .84em; font-weight: 500; }
.crm-missing-email-badge { border-color: color-mix(in srgb, var(--brand-primary) 48%, transparent); color: var(--brand-primary); }
.crm-missing-email-banner { margin: 0 0 18px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--brand-primary) 48%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--brand-primary) 10%, transparent); color: var(--surface-text); font-weight: 650; }

.home-page .final-cta-section {
  background: linear-gradient(120deg, #15171a, #08090b 65%);
  border-top: 1px solid rgba(255,255,255,.08);
}

.home-page .final-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, .875fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.home-page .final-cta-column { min-width: 0; }
.home-page .final-cta-copy .section-eyebrow,
.home-page .final-cta-copy h2,
.home-page .final-cta-copy p { margin-inline: 0; text-align: left; }
.home-page .final-cta-copy h2 { max-width: 760px; }
.home-page .final-cta-copy p:not(.section-eyebrow),
.home-page .final-cta-contact-list { color: var(--home-muted); }
.home-page .final-cta-column h3 {
  margin: 0 0 18px;
  color: var(--home-text);
  font-size: 1.05rem;
  line-height: 1.25;
}
.home-page .final-cta-contact-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  line-height: 1.5;
}
.home-page .final-cta-contact-list p { margin: 0; }
.home-page .final-cta-contact-list a,
.home-page .final-cta-service-links a { color: var(--home-text); }
.home-page .final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.home-page .final-cta-action {
  min-height: 42px;
  padding: 9px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--home-text);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--home-surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.home-page .final-cta-action:hover,
.home-page .final-cta-action:focus-visible,
.home-page .final-cta-service-links a:hover,
.home-page .final-cta-service-links a:focus-visible { color: var(--home-red-bright); }
.home-page .final-cta-action svg { width: 18px; height: 18px; fill: currentColor; }
.home-page .final-cta-service-links {
  display: grid;
  gap: 11px;
}
.home-page .final-cta-service-links a {
  width: fit-content;
  text-decoration: none;
  line-height: 1.4;
}
.home-page .final-cta-service-links .final-cta-all-services {
  margin-top: 6px;
  color: var(--home-red-bright);
  font-weight: 700;
}
@media (max-width: 1199px) {
  .home-page .final-cta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .final-cta-copy { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .home-page .final-cta-grid { grid-template-columns: 1fr; }
  .home-page .final-cta-copy { grid-column: auto; }
}

.home-page .site-footer { background: #08090b; border-top: 1px solid rgba(255,255,255,.1); }
.home-page .site-footer, .home-page .site-footer a, .home-page .footer-tagline { color: var(--home-muted); }
.home-page .footer-brand, .home-page .footer-col-title { color: var(--home-text); }
.home-page .site-footer a:hover { color: var(--home-red-bright); }

/* BPS-122: убран @media (max-width: 900px) { .home-page .hero { min-height: auto; } }
   — раньше это снимало фиксированную высоту 620px на планшетах/мобильных;
   теперь --hero-h сам по себе всегда адаптивен (100svh/vh + offset), так
   что переопределение по брейкпоинту больше не нужно ни на одной ширине. */

@media (max-width: 560px) {
  .home-page .hero-copy h1 { font-size: clamp(2.35rem, 12vw, 3.6rem); }
  .home-page .hero-buttons { align-items: stretch; flex-direction: column; }
  .home-page .hero-buttons .btn { width: 100%; }
}

/* BPS-58: public inner pages continue the Figma-inspired visual language. */
.public-inner-page {
  --bg: #08090b;
  --surface: #141619;
  --surface-soft: rgba(255, 255, 255, .055);
  --text: #f5f5f2;
  --text-muted: #a0a3a8;
  --surface-text: #f5f5f2;
  --surface-text-muted: #a0a3a8;
  --border: rgba(255, 255, 255, .12);
  --hairline: rgba(255, 255, 255, .09);
  --brand-primary: #ff3b30;
  --brand-primary-dark: #e31e24;
  --brand-accent: #e31e24;
  --cta: #e31e24;
  --cta-hover: #ff3b30;
  --success: #ff3b30;
  --header-bg: rgba(8, 9, 11, .9);
  --accent-soft: rgba(227, 30, 36, .16);
  --accent-softer: rgba(255, 255, 255, .06);
  --shadow-brand: 0 10px 28px color-mix(in srgb, var(--inner-red) 28%, transparent);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 60px rgba(0, 0, 0, .6);
  --inner-bg: var(--bg);
  --inner-surface: var(--surface);
  --inner-muted: var(--text-muted);
  --inner-text: var(--text);
  --inner-red: var(--brand-primary-dark);
  background: var(--bg);
  color: var(--text);
}

/* BPS-121: was overflow-x: hidden -- per spec, an axis left unset when the
   other is explicitly set computes to auto (not visible), so the box still
   clipped vertically and cut off the full-bleed hero photo. clip keeps the
   Y axis visible, matching .home-page main (main.css:5355). */
.public-inner-page main { overflow-x: clip; background: var(--inner-bg); }
.public-inner-page .topbar {
  /* BPS-121: same fix as .home-page .topbar above -- see comment there. */
  position: relative;
  z-index: 2;
  background: rgba(8, 9, 11, .12);
  color: var(--inner-text);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.public-inner-page .site-header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)),
    rgba(8, 9, 11, .16);
  border-color: transparent;
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .34);
}
.public-inner-page .site-header.scrolled {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)),
    rgba(8, 9, 11, .38);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

/* BPS-309: a calm, self-contained confirmation surface for the public
   contact PRG endpoint.  Every rule is scoped so other public inner pages
   continue to use their existing layouts. */
.contact-thanks-page .contact-thanks {
  display: grid;
  align-items: center;
  padding-block: clamp(72px, 10vw, 144px);
}
.contact-thanks-page .contact-thanks > .container { width: 100%; }
.contact-thanks-page .contact-thanks__panel {
  display: grid;
  gap: clamp(18px, 2.5vw, 28px);
  width: min(100%, 720px);
  min-width: 0;
  margin-inline: auto;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--public-surface-border, var(--hairline));
  border-radius: var(--radius);
  background: linear-gradient(145deg, color-mix(in srgb, var(--public-surface-graphite, var(--surface)) 88%, var(--inner-bg)), var(--inner-bg));
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.contact-thanks-page .contact-thanks h1 {
  margin: 0;
  color: var(--inner-text);
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  letter-spacing: -.055em;
  line-height: 1;
}
.contact-thanks-page .contact-thanks__copy {
  max-width: 620px;
  margin: 0 auto;
  color: var(--inner-muted);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.contact-thanks-page .contact-thanks__urgent {
  display: grid;
  gap: 10px;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 42%, var(--hairline));
  border-radius: calc(var(--radius) - 4px);
  background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface-soft));
}
.contact-thanks-page .contact-thanks__urgent p { margin: 0; color: var(--inner-muted); }
.contact-thanks-page .contact-thanks__phones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
}
.contact-thanks-page .contact-thanks__phones a {
  color: var(--inner-text);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 800;
  overflow-wrap: anywhere;
  text-decoration-color: color-mix(in srgb, var(--brand-primary) 72%, transparent);
  text-underline-offset: .2em;
}
.contact-thanks-page .contact-thanks__phones a:hover { color: var(--brand-primary); }
.contact-thanks-page .contact-thanks__account-link,
.contact-thanks-page .contact-thanks__actions { margin: 0; }
.contact-thanks-page .contact-thanks__actions .btn { width: fit-content; margin-inline: auto; }

@media (max-width: 700px) {
  .contact-thanks-page .contact-thanks { padding-bottom: calc(clamp(72px, 10vw, 144px) + var(--mobile-panel-h) + env(safe-area-inset-bottom)); }
  .contact-thanks-page .contact-thanks__panel { padding: 28px 20px; }
  .contact-thanks-page .contact-thanks__actions .btn { width: 100%; }
}
/* End BPS-309. */

.auth-page .topbar, .cabinet-page .topbar { position: relative; z-index: 2; background: rgba(8, 9, 11, .12); color: var(--text); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,.06); }
.auth-page .site-header, .cabinet-page .site-header { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), rgba(8,9,11,.16); border-color: transparent; -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); box-shadow: 0 20px 60px rgba(0,0,0,.34); }
.auth-page .site-header.scrolled, .cabinet-page .site-header.scrolled { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), rgba(8,9,11,.38); box-shadow: 0 24px 70px rgba(0,0,0,.42); }

/* BPS-118: kept below the .home-page/.public-inner-page overrides on
   purpose. Same specificity (0-2-0) as those rules, so with equal
   specificity the cascade falls back to source order -- placed earlier
   (as it originally was, right after the base .site-header rules) these
   fallbacks were silently beaten by the page-scoped rules further down
   the file, even though the media/supports condition matched. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,
  .home-page .site-header,
  .public-inner-page .site-header,
  .auth-page .site-header,
  .cabinet-page .site-header {
    background: #0e0f11;
  }

  .site-header.scrolled,
  .home-page .site-header.scrolled,
  .public-inner-page .site-header.scrolled,
  .auth-page .site-header.scrolled,
  .cabinet-page .site-header.scrolled {
    background: #0e0f11;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .site-header.scrolled,
  .home-page .site-header,
  .home-page .site-header.scrolled,
  .public-inner-page .site-header,
  .public-inner-page .site-header.scrolled,
  .auth-page .site-header,
  .auth-page .site-header.scrolled,
  .cabinet-page .site-header,
  .cabinet-page .site-header.scrolled {
    background: #0e0f11;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.public-inner-page .site-header .nav a,
.public-inner-page .topbar a,
.public-inner-page .topbar-hours { color: var(--inner-text); }
.public-inner-page .site-header .nav a:hover,
.public-inner-page .site-header .nav a.active,
.public-inner-page .topbar a:hover { color: var(--brand-primary); }
.public-inner-page .btn-cta,
.public-inner-page .btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--inner-red) 86%, var(--on-solid)), var(--inner-red)); border-color: var(--inner-red); }
.public-inner-page .btn-cta:hover,
.public-inner-page .btn-primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) 86%, var(--on-solid)), var(--brand-primary)); border-color: var(--brand-primary); }
.public-inner-page .section { background: var(--inner-bg); padding-block: clamp(64px, 8vw, 116px); }
.public-inner-page .section h2 { color: var(--inner-text); text-align: center; margin-inline: auto; font-size: clamp(1.9rem, 3.8vw, 3.25rem); letter-spacing: -.04em; }
.public-inner-page .section-lead,
.public-inner-page .section > .container > p:not(.section-eyebrow),
.public-inner-page .section .price-subheading { margin-inline: auto; text-align: center; color: var(--inner-muted); }

/* BPS-183: warranty document — direct section typography does not reach the
   nested document, so every internal text role carries its own token color. */
.public-inner-page .warranty-section .container { max-width: min(100% - 40px, 920px); }
.public-inner-page .warranty-doc__lead { max-width: 720px; margin: 0 auto 30px; text-align: center; color: var(--inner-muted); }
.public-inner-page .warranty-doc {
  padding: clamp(20px, 4vw, 40px);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--inner-bg));
  color: var(--inner-text);
}
.public-inner-page .warranty-doc__title,
.public-inner-page .warranty-doc__conditions-title {
  margin: 0;
  color: var(--brand-primary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.public-inner-page .warranty-doc__title { margin-bottom: 18px; }
.public-inner-page .warranty-doc__rows { margin: 0; }
.public-inner-page .warranty-doc__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
}
.public-inner-page .warranty-doc__row:last-child { border-bottom: 1px solid var(--hairline); }
.public-inner-page .warranty-doc__row dt { color: var(--inner-text); font-weight: 700; }
.public-inner-page .warranty-doc__row dd { margin: 0; }
.public-inner-page .warranty-doc__badge {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 52%, var(--hairline));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand-primary) 14%, var(--surface-soft));
  color: var(--inner-text);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
}
.public-inner-page .warranty-doc__badge--special {
  border-color: var(--hairline);
  background: color-mix(in srgb, var(--inner-muted) 12%, var(--surface-soft));
}
.public-inner-page .warranty-doc__conditions { margin-top: 24px; }
.public-inner-page .warranty-doc__conditions-title { margin-bottom: 8px; }
.public-inner-page .warranty-doc__conditions p:not(.warranty-doc__conditions-title),
.public-inner-page .warranty-doc__signature { margin: 0; color: var(--inner-muted); line-height: 1.65; }
.public-inner-page .warranty-doc__signature { margin-top: 18px; font-style: italic; }

@media (max-width: 480px) {
  .public-inner-page .warranty-doc__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .public-inner-page .warranty-doc__badge { text-align: left; }
}

/* BPS-184: safety pairs — the arrow is entirely decorative CSS, so it never
   enters the text layer read by visitors or assistive technology. */
.public-inner-page .safety-section .container { max-width: min(100% - 40px, 1040px); }
.public-inner-page .safety-section__lead {
  max-width: 720px;
  margin: 0 auto 32px;
  color: var(--inner-muted);
  text-align: center;
}
.public-inner-page .safety-section__pairs { display: grid; gap: 12px; }
.public-inner-page .cause-effect {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.public-inner-page .cause-effect__cause,
.public-inner-page .cause-effect__effect {
  display: flex;
  align-items: center;
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.public-inner-page .cause-effect__cause {
  background: var(--surface-soft);
  color: var(--inner-text);
}
.public-inner-page .cause-effect__effect {
  border-color: color-mix(in srgb, var(--brand-primary) 54%, var(--hairline));
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface-soft));
  color: var(--inner-text);
}
.public-inner-page .cause-effect__cause p,
.public-inner-page .cause-effect__effect p { margin: 0; color: inherit; font-weight: 700; line-height: 1.45; }
.public-inner-page .cause-effect__arrow { position: relative; min-height: 100%; color: var(--brand-primary); }
.public-inner-page .cause-effect__arrow::before {
  position: absolute;
  top: 50%;
  left: 2px;
  right: 2px;
  height: 1px;
  content: "";
  background: currentcolor;
}
.public-inner-page .cause-effect__arrow::after {
  position: absolute;
  top: calc(50% - 4px);
  right: 2px;
  width: 7px;
  height: 7px;
  content: "";
  border-top: 1px solid currentcolor;
  border-right: 1px solid currentcolor;
  transform: rotate(45deg);
}
.public-inner-page .safety-section__conclusion {
  max-width: 820px;
  margin: 24px auto 0;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--inner-muted) 48%, var(--hairline));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--inner-muted) 9%, var(--surface-soft));
  color: var(--inner-text);
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 640px) {
  .public-inner-page .cause-effect { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .public-inner-page .cause-effect__arrow { min-height: 22px; }
  .public-inner-page .cause-effect__arrow::before { top: 2px; bottom: 2px; left: 50%; right: auto; width: 1px; height: auto; }
  .public-inner-page .cause-effect__arrow::after { top: auto; right: auto; bottom: 2px; left: calc(50% - 4px); transform: rotate(135deg); }
}

/* BPS-185: vehicle cards keep every brand in the initial HTML while details
   supplies an accessible, JavaScript-free expansion for the extra chips. */
.public-inner-page .vehicles-section .container { max-width: min(100% - 40px, 1180px); }
.public-inner-page .vehicles-section__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.public-inner-page .vehicle-card {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--inner-text);
}
.public-inner-page .vehicle-card__media {
  min-height: 164px;
  background-image: var(--card-bg, none), linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 24%, var(--surface-soft)), var(--inner-bg));
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, auto;
}
.public-inner-page .vehicle-card__body { padding: 22px; }
.public-inner-page .vehicle-card h3 { margin: 0 0 16px; color: var(--inner-text); font-size: 1.12rem; }
.public-inner-page .vehicle-card__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.public-inner-page .vehicle-card__chip {
  padding: 5px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--inner-muted) 10%, var(--surface-soft));
  color: var(--inner-text);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.25;
}
.public-inner-page .vehicle-card__more { margin-top: 12px; }
.public-inner-page .vehicle-card__more summary { color: var(--brand-primary); cursor: pointer; font-size: .84rem; font-weight: 800; }
.public-inner-page .vehicle-card__more summary small { margin-left: 6px; color: var(--inner-muted); font: inherit; font-weight: 600; }
.public-inner-page .vehicle-card__more:not([open]) .vehicle-card__more-chips { display: none; }
.public-inner-page .vehicle-card__more-chips { margin-top: 12px; }
.public-inner-page .vehicle-card__notice { margin: 0; color: var(--inner-muted); line-height: 1.6; }

@media (max-width: 760px) {
  .public-inner-page .vehicles-section__grid { grid-template-columns: minmax(0, 1fr); }
  .public-inner-page .vehicle-card__media { min-height: 142px; }
}

/* BPS-186: cards describe unit types only; manufacturer chips deliberately
   sit in a separate group because no brand-to-unit compatibility data exists. */
.public-inner-page .brands-section .container { max-width: min(100% - 40px, 1080px); }
.public-inner-page .brands-section__subheading {
  margin: 0 0 16px;
  color: var(--inner-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}
.public-inner-page .brands-section__unit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.public-inner-page .fuel-unit-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-top-color: color-mix(in srgb, var(--brand-primary) 58%, var(--hairline));
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.public-inner-page .fuel-unit-card h3 { margin: 0 0 10px; color: var(--inner-text); font-size: 1rem; line-height: 1.3; }
.public-inner-page .fuel-unit-card p { margin: 0; color: var(--inner-muted); font-size: .9rem; line-height: 1.5; }
.public-inner-page .brands-section__manufacturers { margin-top: 30px; }
.public-inner-page .brands-section__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.public-inner-page .brands-section__chip {
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--inner-muted) 10%, var(--surface-soft));
  color: var(--inner-text);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.25;
}
.public-inner-page .brands-section__notice {
  max-width: 820px;
  margin: 24px auto 0;
  padding: 15px 18px;
  border: 1px solid color-mix(in srgb, var(--inner-muted) 48%, var(--hairline));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--inner-muted) 9%, var(--surface-soft));
  color: var(--inner-text);
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 760px) {
  .public-inner-page .brands-section__unit-grid { grid-template-columns: minmax(0, 1fr); }
}

.public-page-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: calc(var(--hero-h) + var(--hero-full-bleed-offset, 0px));
  padding-block: clamp(26px, 3.4vw, 47px) clamp(58px, 8vw, 96px);
  padding-top: calc(var(--hero-full-bleed-offset, 0px) + var(--hero-top-gap));
  isolation: isolate;
  background-image: var(--hero-bg, none), linear-gradient(120deg, #08090b, #171a1e 70%, #08090b);
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.public-page-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, #000, transparent 82%);
}
.public-page-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    radial-gradient(75% 120% at 22% 50%, rgba(6,7,9,.82) 0%, rgba(6,7,9,.55) 42%, transparent 72%),
    linear-gradient(180deg, rgba(8,9,11,.35) 0%, rgba(8,9,11,.85) 100%);
}
.public-page-hero .container { width: min(100% - 40px, 1160px); }
.public-page-hero.hero-align-left .container {
  margin-inline: auto;
  text-align: left;
}
.public-page-hero.hero-align-right .container {
  margin-inline: auto;
  text-align: right;
}
.public-page-hero.hero-align-right h1,
.public-page-hero.hero-align-right p:last-child {
  margin-left: auto;
}
.public-page-hero.hero-align-right::after {
  background:
    radial-gradient(75% 120% at 78% 50%, rgba(6,7,9,.82) 0%, rgba(6,7,9,.55) 42%, transparent 72%),
    linear-gradient(180deg, rgba(8,9,11,.35) 0%, rgba(8,9,11,.85) 100%);
}
.public-page-hero h1 { max-width: 820px; margin: 0; color: var(--inner-text); font-size: clamp(2.4rem, 5.8vw, 5.2rem); line-height: .98; letter-spacing: -.06em; }
.public-page-hero p:last-child { max-width: 620px; margin: 26px 0 0; color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.5vw, 1.2rem); }
.public-page-hero--light {
  background-image: var(--hero-bg, none), radial-gradient(circle at 82% 34%, color-mix(in srgb, var(--brand-primary) 46%, transparent), transparent 30%), linear-gradient(120deg, var(--surface), color-mix(in srgb, var(--surface) 86%, white) 70%, var(--surface));
  background-size: cover, auto, auto;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.public-inner-page .card:not(.why-us-card),
.public-inner-page .faq-item,
.public-inner-page .contact-split,
.public-inner-page .map-card,
.public-inner-page .price-row {
  /* BPS-203: shared why-us photo layers must survive on the About page. */
  background: var(--surface-soft);
}
.public-inner-page .card,
.public-inner-page .faq-item,
.public-inner-page .contact-split,
.public-inner-page .map-card,
.public-inner-page .price-row {
  border-color: var(--border);
  color: var(--inner-text);
  box-shadow: none;
}
.public-inner-page .card:hover,
.public-inner-page .faq-item:hover,
.public-inner-page .price-row:hover { border-color: color-mix(in srgb, var(--brand-primary) 64%, var(--border)); box-shadow: var(--shadow-lg); }
.public-inner-page .card h3,
.public-inner-page .faq-item summary,
.public-inner-page .contact-split h2 { color: var(--inner-text); }
.public-inner-page .card p,
.public-inner-page .faq-item p,
.public-inner-page .map-address,
.public-inner-page .contact-split p { color: var(--inner-muted); }
.public-inner-page .price-row strong,
.public-inner-page .price-cost { color: var(--brand-primary); }
.public-inner-page .dpf-section,
.public-inner-page .contact-section { background: #0d0f12; }

/* BPS-150: DB-backed prices navigator and board. */
.prices-page .db-prices-search { max-width: 680px; margin: 28px auto; }
.prices-page .db-prices-search input { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.prices-page .db-prices-search__counter { display: block; min-height: 1.3em; margin-top: 8px; color: var(--text-muted); font-size: .88rem; }
.prices-page .db-prices-empty { margin: 18px auto; color: var(--text-muted); text-align: center; }
.prices-page .db-prices-layout { display: grid; grid-template-columns: minmax(180px, .36fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.prices-page .db-prices-nav { position: sticky; top: calc(var(--header-h) + 24px); display: grid; max-height: calc(100svh - var(--header-h) - 48px); gap: 4px; overflow-y: auto; overscroll-behavior: contain; padding: 12px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); scrollbar-width: thin; scrollbar-color: var(--brand-primary) transparent; }
.prices-page .db-prices-nav::-webkit-scrollbar { width: 5px; }
.prices-page .db-prices-nav::-webkit-scrollbar-thumb { border-radius: var(--radius); background: var(--brand-primary); }
.prices-page .db-prices-nav__marker { position: absolute; z-index: 0; right: 8px; left: 8px; border-radius: calc(var(--radius) - 4px); background: color-mix(in srgb, var(--brand-primary) 14%, transparent); opacity: 1; pointer-events: none; transition: transform .24s ease, height .24s ease; }
.prices-page .db-prices-nav a { position: relative; z-index: 1; padding: 8px 10px; color: var(--text-muted); text-decoration: none; transition: color .2s ease; }
.prices-page .db-prices-nav a:hover, .prices-page .db-prices-nav a:focus-visible { color: var(--brand-primary); outline: none; }
.prices-page .db-prices-nav a.is-active { color: var(--text); font-weight: 800; }
.prices-page .db-prices-board { display: grid; gap: 28px; min-width: 0; }
.prices-page .db-prices-category { scroll-margin-top: calc(var(--header-h) + 18px); }
.prices-page .db-prices-category h3 { margin: 0 0 10px; color: var(--text); font-size: 1.25rem; transition: color .2s ease; }
.prices-page .db-prices-category.is-active h3 { color: var(--brand-primary); }
.prices-page .db-prices-rows { border-top: 1px solid var(--hairline); }
.prices-page .db-prices-row { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.prices-page .db-prices-variant-details > summary { list-style: none; cursor: pointer; }
.prices-page .db-prices-variant-details > summary::-webkit-details-marker { display: none; }
.prices-page .db-prices-row__name { min-width: 0; color: var(--text); }
.prices-page .db-prices-row__leader { flex: 1 1 auto; border-bottom: 1px dotted var(--hairline); }
.prices-page .db-prices-row__price { flex: 0 0 auto; color: var(--text); font-weight: 800; white-space: nowrap; }
.price-value { color: var(--price-value); }
.prices-page .db-prices-row__price small { display: block; margin-top: 3px; color: var(--text-muted); font-size: .76rem; font-weight: 500; white-space: normal; }
/* BPS-180: inline price variants replace the modal without nested scrolling. */
.prices-page .db-prices-variant-chip { display: inline-flex; align-items: center; min-height: 28px; margin-left: 8px; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--brand-primary) 62%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--brand-primary) 13%, transparent); color: var(--text); font-size: .76rem; font-weight: 700; line-height: 1; vertical-align: middle; }
.prices-page .db-prices-variant-details[open] .db-prices-variant-chip, .prices-page .db-prices-variant-details > summary:hover .db-prices-variant-chip, .prices-page .db-prices-variant-details > summary:focus-visible .db-prices-variant-chip { border-color: var(--brand-primary); background: var(--brand-primary); color: #fff; }
.prices-page .db-prices-variant-details > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.prices-page .db-prices-variant-panel { margin: 0 0 12px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
.prices-page .db-prices-variant-list { margin: 0; padding: 5px; list-style: none; }
.prices-page .db-prices-variant-list li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 12px; border-radius: var(--radius-sm); }
.prices-page .db-prices-variant-list li:nth-child(odd) { background: color-mix(in srgb, var(--text) 5%, transparent); }
.prices-page .db-prices-variant-list small { display: block; margin-top: 3px; color: var(--text-muted); font-size: .78rem; }
.prices-page .db-prices-variant-list strong { flex: 0 0 auto; color: var(--text); white-space: nowrap; }
@media (max-width: 900px) { .prices-page .db-prices-layout { grid-template-columns: 1fr; gap: 20px; } .prices-page .db-prices-nav { position: static; max-height: none; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); overflow: visible; } .prices-page .db-prices-nav__marker { display: none; } .prices-page .db-prices-nav a.is-active { border-radius: calc(var(--radius) - 4px); background: color-mix(in srgb, var(--brand-primary) 16%, transparent); color: var(--text); } }
@media (max-width: 520px) { .prices-page .db-prices-row { align-items: flex-start; flex-wrap: wrap; } .prices-page .db-prices-row__leader { display: none; } .prices-page .db-prices-row__price { width: 100%; } .prices-page .db-prices-variant-list li { gap: 12px; } }
.public-inner-page .contact-split { border-radius: var(--radius); }
.public-inner-page .contact-aside { background: linear-gradient(145deg, color-mix(in srgb, var(--brand-primary) 28%, var(--surface)), var(--surface)); color: var(--on-solid); }
.public-inner-page .contact-form input,
.public-inner-page .contact-form select,
.public-inner-page .contact-form textarea { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--inner-text); }
.public-inner-page .contact-form input::placeholder,
.public-inner-page .contact-form textarea::placeholder { color: #85898f; }

/* BPS-165: custom public-form comboboxes retain native selects as a no-JS fallback. */
.public-inner-page .contact-form { color-scheme: dark; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.public-inner-page .contact-form > .form-required-note,
.public-inner-page .contact-form > .form-errors,
.public-inner-page .contact-form > .form-row:not(.form-row--half),
.public-inner-page .contact-form > .btn,
.public-inner-page .contact-form > .form-caption { grid-column: 1 / -1; }
.public-inner-page .contact-form .form-row { gap: 7px; }
.public-inner-page .contact-form .form-row label { color: var(--inner-muted); letter-spacing: .01em; }
.public-inner-page .contact-form input,
.public-inner-page .contact-form select,
.public-inner-page .contact-form textarea { padding: 12px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: calc(var(--radius) - 6px); background: rgba(255,255,255,.06); }
.public-inner-page .contact-form input:focus,
.public-inner-page .contact-form select:focus,
.public-inner-page .contact-form textarea:focus { outline: 2px solid color-mix(in srgb, var(--brand-primary) 76%, white); outline-offset: 2px; border-color: transparent; }
.public-inner-page .contact-aside { position: relative; isolation: isolate; overflow: hidden; background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface) 26%, transparent), color-mix(in srgb, var(--surface) 92%, transparent)), url("../img/sections/bps-section-zalyshte-zayavku.webp"), linear-gradient(145deg, color-mix(in srgb, var(--brand-primary) 28%, var(--surface)), var(--surface)); background-size: cover; background-position: center top; }
.public-inner-page .contact-aside > * { position: relative; z-index: 1; }
.js .contact-combobox .combobox-native { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.contact-combobox { position: relative; }
.contact-combobox__trigger { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 42px 12px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: calc(var(--radius) - 6px); background: rgba(255,255,255,.06); color: var(--inner-text); text-align: left; font: inherit; cursor: pointer; }
.contact-combobox__trigger::after { content: "⌄"; position: absolute; right: 15px; color: var(--brand-primary); font-size: 1.25rem; }
.contact-combobox__trigger.is-placeholder { color: var(--inner-muted); }
.contact-combobox__trigger:disabled { cursor: not-allowed; opacity: .6; }
.contact-combobox__trigger:focus-visible,
.contact-combobox__search:focus-visible,
.contact-combobox__option:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand-primary) 76%, white); outline-offset: 2px; }
.contact-combobox__panel { position: absolute; z-index: 20; inset: calc(100% + 7px) 0 auto; padding: 10px; border: 1px solid rgba(255,255,255,.18); border-radius: calc(var(--radius) - 4px); background: #13161a; box-shadow: var(--shadow-lg); }
.contact-combobox__search { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: calc(var(--radius) - 8px); background: rgba(255,255,255,.07); color: var(--inner-text); font: inherit; }
.contact-combobox__list { max-height: 260px; margin-top: 8px; overflow: auto; }
.contact-combobox__option { width: 100%; min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 16px; border: 0; border-left: 3px solid transparent; background: transparent; color: var(--inner-text); text-align: left; font: inherit; cursor: pointer; }
.contact-combobox__option.is-selected { border-left-color: var(--brand-primary); font-weight: 800; }
.contact-combobox__option.is-cursor { background: rgba(255,255,255,.11); }
.contact-combobox__option:hover { background: rgba(255,255,255,.11); }
.contact-combobox__option mark { padding: 0; background: color-mix(in srgb, var(--brand-primary) 30%, transparent); color: inherit; }
.contact-combobox__count { flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--inner-muted); font-size: .76rem; }
.contact-combobox__empty { margin: 0; padding: 18px 10px; color: var(--inner-muted); text-align: center; }
@media (max-width: 620px) { .public-inner-page .contact-form { grid-template-columns: 1fr; } .public-inner-page .contact-form > .form-row { grid-column: 1; } .contact-combobox__panel { position: fixed; inset: auto 12px 12px; max-height: min(70dvh, 480px); } .contact-combobox__list { max-height: calc(min(70dvh, 480px) - 82px); } }
@media (prefers-reduced-motion: reduce) { .contact-combobox__panel, .contact-combobox__option { transition: none; } }

/* BPS-310: enhanced country picker keeps the native select as the no-JS source of truth. */
.phone-control { min-width: 0; }
.phone-control__fields { position: relative; display: flex; align-items: stretch; min-height: 48px; border: 1px solid rgba(255,255,255,.18); border-radius: calc(var(--radius) - 6px); background: rgba(255,255,255,.06); color: var(--inner-text); }
.phone-control__region { position: relative; flex: 0 0 min(10rem, 43%); min-width: 0; }
.phone-control .phone-control__region .phone-region-select { height: 100%; min-height: 46px; padding-right: 8px; border: 0; border-radius: calc(var(--radius) - 7px) 0 0 calc(var(--radius) - 7px); background: transparent; color: inherit; }
.phone-control__divider { width: 1px; margin: 8px 0; background: rgba(255,255,255,.24); }
.phone-control .phone-control__fields [data-phone-national-input] { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0 calc(var(--radius) - 7px) calc(var(--radius) - 7px) 0; background: transparent; }
.phone-control__fields:focus-within { outline: 2px solid color-mix(in srgb, var(--brand-primary) 76%, white); outline-offset: 2px; border-color: transparent; }
.js .phone-control__region .phone-region-select { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.phone-country-picker__trigger { width: 100%; min-height: 46px; padding: 10px 29px 10px 13px; border: 0; border-radius: calc(var(--radius) - 7px) 0 0 calc(var(--radius) - 7px); background: transparent; color: var(--inner-text); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.phone-country-picker__trigger::after { content: "⌄"; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: var(--brand-primary); font-size: 1.15rem; pointer-events: none; }
.phone-country-picker__trigger:focus-visible, .phone-country-picker__search:focus-visible, .phone-country-picker__option:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.phone-country-picker__panel { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: min(24rem, 100%); max-height: min(55dvh, 380px); overflow: auto; padding: 6px; border: 1px solid rgba(255,255,255,.28); border-radius: calc(var(--radius) - 4px); background: #101216; box-shadow: 0 18px 50px rgba(0,0,0,.62); }
.phone-country-picker__search { width: 100%; min-height: 44px; margin-bottom: 6px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: calc(var(--radius) - 8px); background: #191c21; color: #f7f8fa; font: inherit; }
.phone-country-picker__search::placeholder { color: #b7bcc7; opacity: 1; }
.phone-country-picker__empty { margin: 4px 6px 8px; color: #f7f8fa; font-size: .9rem; }
.phone-country-picker__list { display: grid; gap: 2px; }
.phone-country-picker__option { width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-left: 3px solid transparent; border-radius: calc(var(--radius) - 10px); background: transparent; color: #f7f8fa; font: inherit; text-align: left; cursor: pointer; }
.phone-country-picker__option:hover, .phone-country-picker__option.is-cursor { background: rgba(255,255,255,.14); }
.phone-country-picker__option.is-selected { border-left-color: var(--brand-primary); background: rgba(227,30,36,.2); font-weight: 800; }
.contact-form .form-row.has-error .form-input, .contact-form .form-row.has-error .contact-combobox__trigger, .home-request-form .form-row.has-error .form-input, .home-request-form .form-row.has-error .phone-control__fields { border-color: #ff5a61; box-shadow: 0 0 0 1px rgba(255,90,97,.48); }
.contact-form .form-row.has-error .phone-control__fields { border-color: #ff5a61; box-shadow: 0 0 0 1px rgba(255,90,97,.48); }
.form-field-error { display: flex; align-items: flex-start; gap: 8px; margin-top: 7px; color: #ffd5d7; font-size: .88rem; font-weight: 650; line-height: 1.42; }
.form-field-error__icon { flex: 0 0 18px; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #ff5a61; color: #15171b; font-size: .76rem; font-weight: 900; }
.form-field-error p { margin: 0; }
@keyframes phone-error-attention { 0%, 100% { transform: translateX(0); } 33% { transform: translateX(-3px); } 66% { transform: translateX(3px); } }
.form-row--attention .phone-control__fields, .form-row--attention > .form-input, .form-row--attention .contact-combobox__trigger { animation: phone-error-attention .26s ease-out 1; }
@media (max-width: 620px) { .phone-control__region { flex-basis: min(9rem, 45%); } .phone-country-picker__panel { position: fixed; inset: auto 12px 12px; width: auto; max-height: min(70dvh, 480px); } }
@media (prefers-reduced-motion: reduce) { .form-row--attention .phone-control__fields, .form-row--attention > .form-input, .form-row--attention .contact-combobox__trigger { animation: none; } }
.public-inner-page .site-footer { background: #08090b; border-top-color: rgba(255,255,255,.1); }
.public-inner-page .site-footer, .public-inner-page .site-footer a, .public-inner-page .footer-tagline { color: var(--inner-muted); }
.public-inner-page .footer-brand, .public-inner-page .footer-col-title { color: var(--inner-text); }
.public-inner-page .site-footer a:hover { color: var(--brand-primary); }

@media (max-width: 700px) {
  /* BPS-122: min-height убран — высоту теперь всегда задаёт --hero-h. */
  .public-page-hero { padding-bottom: 58px; }
  .public-page-hero.hero-align-right .container {
    text-align: left;
  }
  .public-page-hero.hero-align-right h1,
  .public-page-hero.hero-align-right p:last-child {
    margin-left: 0;
  }
  .public-page-hero h1 { font-size: clamp(2.25rem, 11vw, 3.6rem); }
  .public-inner-page .section h2 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
}

/* BPS-59: about, B2B and service detail pages. */
.public-inner-page .service-detail-hero {
  position: relative;
  min-height: calc(var(--hero-h) + var(--hero-full-bleed-offset, 0px));
  display: flex;
  align-items: flex-start;
  padding-block: 30px 86px;
  padding-top: calc(var(--hero-full-bleed-offset, 0px) + var(--hero-top-gap));
  background-image: var(--hero-bg, none), linear-gradient(120deg, #08090b, #171a1e 70%, #08090b);
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  isolation: isolate;
}
.public-inner-page .service-detail-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    radial-gradient(75% 120% at 22% 50%, rgba(6,7,9,.82) 0%, rgba(6,7,9,.55) 42%, transparent 72%),
    linear-gradient(180deg, rgba(8,9,11,.35) 0%, rgba(8,9,11,.85) 100%);
}
.public-inner-page .service-detail-hero-inner { display: grid; align-content: end; gap: 18px; }
.public-inner-page .service-detail-back { width: fit-content; color: #a0a3a8; }
.public-inner-page .service-detail-back:hover { color: var(--brand-primary); }
.public-inner-page .service-detail-hero h1 { max-width: 850px; margin: 0; color: #f5f5f2; font-size: clamp(2.4rem, 5.8vw, 5rem); line-height: .98; letter-spacing: -.06em; }
.public-inner-page .service-detail-hero p { max-width: 660px; margin: 8px 0 12px; color: rgba(255,255,255,.9); font-size: 1.1rem; }
.catalog-image {
  width: min(100%, 760px);
  margin: 8px 0 10px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}
.catalog-image img,
.catalog-image svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.catalog-image__placeholder {
  position: relative;
  background: color-mix(in srgb, var(--brand-primary, #0b84ff) 8%, #fff);
}
.catalog-image__placeholder span {
  position: absolute;
  right: 28px;
  bottom: 24px;
  max-width: min(70%, 520px);
  color: var(--inner-text, #111827);
  font-weight: 800;
  line-height: 1.15;
  text-align: right;
}
.public-page-hero .catalog-image { margin-top: 32px; }
.public-inner-page .service-detail-content { background: #0d0f12; }
.public-inner-page .service-detail-stack > .section { background: transparent; }
.public-inner-page .service-detail-stack > .section > .container { width: 100%; }
.public-inner-page .service-detail-cta { background: linear-gradient(135deg, rgba(227,30,36,.92), #8e0b10); border: 0; color: #fff; }
.public-inner-page .service-detail-cta h2,
.public-inner-page .service-detail-cta p { color: #fff; }

/* BPS-159: structured service page — content stream plus a bounded price panel. */
.service-detail-content { padding-block: clamp(56px, 8vw, 104px); }
.service-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(28px, 5vw, 72px); align-items: start; }
.service-detail-main { display: grid; gap: 42px; min-width: 0; }
.service-content-block { padding-bottom: 40px; border-bottom: 1px solid var(--hairline); }
.service-content-block h2 { margin: 0 0 18px; color: var(--surface-text); font-size: clamp(1.45rem, 2.5vw, 2.15rem); }
.service-content-block p { max-width: 760px; color: var(--surface-text-muted); font-size: 1.04rem; line-height: 1.75; }
.service-content-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.service-content-list li { position: relative; min-height: 30px; padding-left: 42px; color: var(--surface-text); font-size: 1.05rem; line-height: 1.55; }
.service-content-list--checks li::before { position: absolute; top: .2em; left: 0; width: 22px; height: 22px; border: 1px solid color-mix(in srgb, var(--brand-primary) 75%, #fff); border-radius: var(--radius-circle); color: var(--brand-primary); content: "✓"; font-size: .9rem; font-weight: 800; line-height: 20px; text-align: center; }
.service-content-list--steps { counter-reset: service-work-step; }
.service-content-list--steps li { counter-increment: service-work-step; }
.service-content-list--steps li::before { position: absolute; top: .05em; left: 0; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid color-mix(in srgb, var(--brand-primary) 68%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--brand-primary) 12%, transparent); color: var(--brand-primary); content: counter(service-work-step); font-size: .8rem; font-weight: 800; }
.service-content-block--legacy { color: var(--surface-text-muted); }
.service-price-panel { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 14px; padding: 26px; border: 1px solid color-mix(in srgb, var(--brand-primary) 38%, var(--hairline)); border-radius: var(--radius-lg); background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, var(--brand-primary)), var(--surface)); box-shadow: 0 24px 60px rgba(0,0,0,.24); }
.service-price-panel h2 { margin: 0; color: var(--surface-text); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; }
.service-price-panel h2 .price-affix { color: var(--surface-text-muted); font-size: .46em; font-weight: 650; }
.service-price-panel h2 .price-value { color: var(--price-value); }
.service-price-panel__count { margin: 0; color: var(--surface-text-muted); font-size: .9rem; }
.service-price-panel__list { display: grid; gap: 0; margin: 6px -8px 0 0; padding: 0 8px 0 0; list-style: none; }
.service-price-panel--scrollable .service-price-panel__list { max-height: 294px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--brand-primary) transparent; }
.service-price-panel__list::-webkit-scrollbar { width: 5px; }
.service-price-panel__list::-webkit-scrollbar-thumb { border-radius: var(--radius); background: var(--brand-primary); }
.service-price-panel__list li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--hairline); color: var(--surface-text); font-size: .92rem; }
.service-price-panel__list span { min-width: 0; }
.service-price-panel__list small { display: block; margin-top: 3px; color: var(--surface-text-muted); font-size: .78rem; }
.service-price-panel__list strong { flex: 0 0 auto; color: var(--surface-text); text-align: right; white-space: nowrap; }
.service-price-panel__list em { display: block; margin-top: 2px; color: var(--surface-text-muted); font-size: .72rem; font-style: normal; font-weight: 500; }
.service-price-panel .btn { width: 100%; margin-top: 6px; text-align: center; }
.service-related-card { margin-top: clamp(64px, 10vw, 128px); padding-top: 34px; border-top: 1px solid var(--hairline); }
.service-related-card h2 { margin: 0 0 8px; color: var(--surface-text); font-size: clamp(1.55rem, 2.4vw, 2.1rem); }
.service-related-card > p { margin: 0 0 20px; }
.service-related-card > p a { color: var(--brand-primary); }
.service-related-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.service-related-item { display: flex; min-height: 96px; flex-direction: column; justify-content: space-between; gap: 12px; padding: 18px; border: 1px solid var(--hairline); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 86%, #000); color: var(--surface-text); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.service-related-item:hover, .service-related-item:focus-visible { border-color: var(--brand-primary); color: var(--surface-text); outline: none; transform: translateY(-2px); }
.service-related-item strong { color: var(--surface-text); }
.service-price-panel__list .price-value, .service-related-item .price-value { color: var(--price-value); }

/* BPS-161: active price category and dedicated price colour. */
@media (prefers-reduced-motion: reduce) { .prices-page .db-prices-nav__marker, .prices-page .db-prices-nav a, .prices-page .db-prices-category h3 { transition: none; } }
.service-detail-cta { margin-top: 40px; }

@media (max-width: 860px) {
  .service-detail-layout { grid-template-columns: 1fr; gap: 36px; }
  .service-price-panel { position: static; order: -1; }
}

@media (max-width: 520px) {
  .service-detail-content { padding-block: 48px 72px; }
  .service-detail-main { gap: 32px; }
  .service-content-block { padding-bottom: 30px; }
  .service-content-list li { padding-left: 38px; font-size: 1rem; }
  .service-price-panel { padding: 22px 18px; }
  .service-price-panel--scrollable .service-price-panel__list { max-height: 252px; -webkit-overflow-scrolling: touch; }
  .service-related-list { grid-template-columns: 1fr; }
}
.public-inner-page .b2b-page .card { border-radius: var(--radius); }
.public-inner-page .about-page .why-us-section,
.public-inner-page .b2b-page .section { background: #0d0f12; }

/* BPS-215: one semantic public-surface layer.  Roles are shared by home and
   public inner pages; component-specific card and photo contracts stay above. */
:is(.home-page, .public-inner-page) {
  --public-surface-canvas: #0d0f12;
  --public-surface-graphite: #171a1e;
  --public-surface-technical: #12171c;
  --public-surface-photo: #0d0f12;
  --public-surface-cta: #10202e;
  --public-surface-border: rgba(245, 245, 242, .12);
  --public-surface-text: #f5f5f2;
  --public-surface-muted: #c2c5ca;
  --public-texture-graphite: linear-gradient(135deg, rgba(255,255,255,.025), transparent 44%), linear-gradient(315deg, rgba(255,255,255,.018), transparent 52%);
  --public-texture-technical: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  --public-texture-cta: linear-gradient(135deg, rgba(83, 132, 171, .22), transparent 58%);
}

:is(.home-page, .public-inner-page) .surface-canvas { background-color: var(--public-surface-canvas); color: var(--public-surface-text); }
:is(.home-page, .public-inner-page) :is(.surface-graphite, .why-us-section) { background-color: var(--public-surface-graphite); background-image: var(--public-texture-graphite); color: var(--public-surface-text); }
:is(.home-page, .public-inner-page) .surface-technical { background-color: var(--public-surface-technical); background-image: var(--public-texture-technical); background-size: auto, 56px 56px; color: var(--public-surface-text); }
:is(.home-page, .public-inner-page) .surface-cta { background-color: var(--public-surface-cta); background-image: var(--public-texture-cta); border-top-color: var(--public-surface-border); color: var(--public-surface-text); }
/* Photo sections keep their existing background-image layers and overlays. */
:is(.home-page, .public-inner-page) .surface-photo { background-color: var(--public-surface-photo); color: var(--public-surface-text); }
:is(.home-page, .public-inner-page) :is(.surface-canvas, .surface-graphite, .why-us-section, .surface-technical, .surface-cta) :is(h2, h3) { color: var(--public-surface-text); }
:is(.home-page, .public-inner-page) :is(.surface-canvas, .surface-graphite, .why-us-section, .surface-technical, .surface-cta) :is(p, li) { color: var(--public-surface-muted); }
.public-inner-page .service-detail-content { background-color: var(--public-surface-canvas); }

@media (max-width: 700px) {
  /* BPS-122: min-height убран в обеих строках ниже — высоту теперь
     всегда задаёт --hero-h, отдельных чисел на этом брейкпоинте больше нет. */
  .public-page-hero { padding-bottom: 58px; }
  .public-inner-page .service-detail-hero { padding-bottom: 60px; }
  .public-inner-page .service-detail-hero h1 { font-size: clamp(2.3rem, 11vw, 3.6rem); }
}
/* BPS-61 — Figma-inspired CRM shell selectors. Keep this layer isolated from
   public, client-cabinet and master CRM styles. BPS-92: the duplicate
   crm-body variable declaration that used to live here was merged into the
   single one near the top of the CRM section (Acceptance Criteria — exactly
   one such declaration in the file) — these selectors below are unchanged
   and now simply consume --crm-bg/--crm-surface/--crm-surface-soft/
   --crm-line/--crm-text/--crm-muted/--crm-red from that one source, which is
   why the A4 palette (lighter than the old near-black values used here
   before) applies automatically without touching every selector. */
.crm-body .crm-shell { background: var(--crm-bg); }
.crm-body .crm-sidebar {
  background: var(--crm-sidebar-bg);
  border-right: 1px solid var(--crm-line);
  box-shadow: 14px 0 38px rgba(0,0,0,.18);
}
.crm-body .crm-nav a {
  color: var(--crm-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
.crm-body .crm-nav a:hover,
.crm-body .crm-nav a:focus-visible {
  color: var(--crm-text);
  background: rgba(227,30,36,.1);
  border-color: rgba(227,30,36,.25);
}
.crm-body .crm-nav a.active {
  color: #fff;
  background: var(--crm-red);
  border-color: var(--crm-red);
  box-shadow: 0 10px 24px rgba(227,30,36,.2);
}
.crm-body .crm-appbar { background: var(--crm-surface); }
.crm-body .crm-main { background: var(--crm-bg); }
.crm-body .crm-topbar {
  /* BPS-96: было rgba(8,9,11,...) — литеральный цвет фона публичного сайта,
     темнее --crm-bg. Плашка заголовка должна быть светлее страницы, как
     остальные поверхности CRM (см. .crm-metric/.crm-panel выше), поэтому
     собираем из --crm-surface через color-mix, а не литерал. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--crm-surface) 98%, transparent),
    color-mix(in srgb, var(--crm-surface) 84%, transparent)
  );
  border-bottom-color: var(--crm-line);
}
.crm-body .crm-topbar .eyebrow { color: var(--crm-red); }
.crm-body .crm-topbar h1 { color: var(--crm-text); }
.crm-body .crm-metric,
.crm-body .crm-panel,
.crm-body .crm-table-wrap {
  background: var(--crm-surface);
  border-color: var(--crm-line);
  box-shadow: 0 18px 38px rgba(0,0,0,.16);
}
.crm-body .crm-metric strong,
.crm-body .crm-panel h2,
.crm-body .crm-table th,
.crm-body .crm-table td { color: var(--crm-text); }
.crm-body .crm-metric > span:not(.crm-status-badge),
.crm-body .crm-list-item span,
.crm-body .crm-list-item small { color: var(--crm-muted); }
.crm-body .crm-metric__icon { color: var(--crm-red); background: rgba(227,30,36,.12); }
.crm-body .crm-status-badge { border-color: rgba(227,30,36,.32); }
.crm-body .crm-panel-head { border-bottom-color: var(--crm-line); }
.crm-body .crm-list-item,
.crm-body .crm-table th,
.crm-body .crm-table td { border-color: var(--crm-line); }
.crm-body .crm-list-item:hover { background: rgba(255,255,255,.035); }
.crm-body .crm-shell .btn-primary,
.crm-body .crm-shell .btn:not(.btn-ghost) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--crm-red) 86%, var(--on-solid)), var(--crm-red));
  border-color: var(--crm-red);
  color: #fff;
}
.crm-body .crm-shell .btn-primary:hover,
.crm-body .crm-shell .btn:not(.btn-ghost):hover { background: linear-gradient(180deg, color-mix(in srgb, var(--crm-red) 74%, var(--on-solid)), var(--crm-red)); border-color: var(--crm-red); }
.crm-body .crm-shell .btn-ghost {
  background: transparent;
  border-color: var(--crm-line);
  color: var(--crm-text);
}
.crm-body .crm-shell .btn-ghost:hover { border-color: var(--crm-red); color: #fff; }
.crm-body input,
.crm-body select,
.crm-body textarea {
  background: var(--crm-surface-soft);
  border-color: var(--crm-line);
  color: var(--crm-text);
}
.crm-body input::placeholder,
.crm-body textarea::placeholder { color: #777d86; }
.crm-body .crm-cal-grid,
.crm-body .crm-cal-cell { border-color: var(--crm-line); }
.crm-body .crm-cal-cell { background: var(--crm-surface); }
.crm-body .crm-cal-session { background: rgba(227,30,36,.16); border-color: rgba(227,30,36,.42); }

@media (max-width: 900px) {
  .crm-body .crm-sidebar { box-shadow: none; }
  .crm-body .crm-main { min-width: 0; }
  .crm-body .crm-topbar { padding-inline: 18px; }
}

@media (max-width: 520px) {
  .crm-appbar { gap: 6px; padding-inline: 10px; }
  .crm-appbar__brand { min-width: 0; }
  .crm-appbar__brand > span,
  .crm-breadcrumbs a,
  .crm-breadcrumbs__separator { display: none; }
  .crm-breadcrumbs { min-width: 0; flex: 1 1 auto; }
  .crm-appbar__language { width: 44px; padding: 0; }
  .crm-appbar__language > span { display: none; }
}
/* BPS-62 — Figma-inspired master mobile CRM.
   BPS-96: было на отдельной чёрной палитре (#08090b/#141619, буквально цвет
   фона публичного сайта) — не в курсе палитры A4 из BPS-92. .mcrm-body не
   вложен в .crm-body (разные шаблоны/base), поэтому переменные приходится
   продублировать литералами A4 напрямую — но одним согласованным набором,
   а не значениями "мимо" палитры, как раньше (Constraint промпта). */
.mcrm-body {
  --mcrm-bg: #1C1F24;
  --mcrm-surface: #242830;
  --mcrm-surface-soft: #2B3038;
  --mcrm-line: rgba(255,255,255,.12);
  --mcrm-text: #EEF0F3;
  --mcrm-muted: #9AA1AD;
  --mcrm-red: #E31E24;
  background: var(--mcrm-bg);
  color: var(--mcrm-text);
}
.mcrm-body .mcrm-header {
  background: color-mix(in srgb, var(--mcrm-surface) 96%, transparent);
  border-bottom: 1px solid var(--mcrm-line);
  box-shadow: 0 10px 28px rgba(0,0,0,.2);
}
.mcrm-body .mcrm-header-brand { color: var(--mcrm-text); font-weight: 700; letter-spacing: -.02em; }
.mcrm-body .mcrm-header-user,
.mcrm-body .mcrm-header-name { color: var(--mcrm-muted); }
.mcrm-body .mcrm-lang-btn,
.mcrm-body .mcrm-logout {
  border-color: var(--mcrm-line);
  color: var(--mcrm-text);
  background: var(--mcrm-surface);
}
.mcrm-body .mcrm-lang-btn:hover,
.mcrm-body .mcrm-lang-btn:focus-visible,
.mcrm-body .mcrm-logout:hover,
.mcrm-body .mcrm-logout:focus-visible { border-color: var(--mcrm-red); color: #fff; }
.mcrm-body .mcrm-main { background: var(--mcrm-bg); }
.mcrm-body .mcrm-section { max-width: 760px; }
.mcrm-body .mcrm-page-title { color: var(--mcrm-text); letter-spacing: -.035em; }
.mcrm-body .mcrm-section-title { color: var(--mcrm-muted); letter-spacing: .04em; text-transform: uppercase; }
.mcrm-body .mcrm-card,
.mcrm-body .mcrm-order-info,
.mcrm-body .mcrm-empty {
  background: var(--mcrm-surface);
  border-color: var(--mcrm-line);
  color: var(--mcrm-text);
  box-shadow: 0 16px 34px rgba(0,0,0,.16);
}
.mcrm-body a.mcrm-card:hover,
.mcrm-body a.mcrm-card:focus-visible {
  border-color: rgba(227,30,36,.6);
  box-shadow: 0 16px 34px rgba(227,30,36,.12);
}
.mcrm-body .mcrm-card-order,
.mcrm-body .mcrm-card-hours { color: var(--mcrm-red); }
.mcrm-body .mcrm-card-meta,
.mcrm-body .mcrm-order-row span { color: var(--mcrm-muted); }
.mcrm-body .mcrm-order-row { border-bottom-color: var(--mcrm-line); }
.mcrm-body .mcrm-order-row strong,
.mcrm-body .mcrm-order-row p { color: var(--mcrm-text); }
.mcrm-body .mcrm-back-link { color: #ff6b70; }
.mcrm-body .mcrm-status-btn {
  min-height: 44px;
  border: 1px solid rgba(227,30,36,.45);
  border-radius: var(--radius-sm);
  background: var(--mcrm-surface-soft);
  color: var(--mcrm-text);
}
.mcrm-body .mcrm-status-btn:hover,
.mcrm-body .mcrm-status-btn:focus-visible,
.mcrm-body .mcrm-status-btn--active {
  background: var(--mcrm-red);
  border-color: var(--mcrm-red);
  color: #fff;
}
.mcrm-body .mcrm-status-btn:disabled { opacity: .72; }
.mcrm-body .mcrm-field input,
.mcrm-body .mcrm-field textarea {
  background: var(--mcrm-surface-soft);
  border-color: var(--mcrm-line);
  color: var(--mcrm-text);
}
.mcrm-body .mcrm-field { color: var(--mcrm-muted); }
.mcrm-body .mcrm-message { border-color: var(--mcrm-line); background: var(--mcrm-surface); color: var(--mcrm-text); }
.mcrm-body .mcrm-message--success { border-left-color: #47c985; }
.mcrm-body .mcrm-message--error { border-left-color: var(--mcrm-red); }

/* BPS-234: public cookie banner and native preference dialog. */
.footer-legal-links,
.cookie-banner__actions,
.cookie-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.footer-legal-links { justify-content: flex-end; }
.footer-cookie-settings { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; }
.cookie-banner {
  position: fixed; z-index: 1100; right: 20px; bottom: 20px; left: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: 960px; margin: 0 auto; padding: 18px 20px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  color: var(--surface-text); box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.cookie-banner h2 { margin: 0 0 6px; font-size: 1rem; color: var(--surface-text); }
.cookie-banner p { margin: 0; color: var(--surface-text-muted); line-height: 1.5; }
.cookie-banner .btn, .cookie-dialog .btn { min-height: 44px; }
.cookie-dialog { width: min(620px, calc(100vw - 28px)); max-height: min(760px, calc(100svh - 28px)); padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--surface-text); }
.cookie-dialog::backdrop { background: rgba(0, 0, 0, .62); }
.cookie-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.cookie-dialog__header h2 { margin: 0; color: var(--surface-text); font-size: 1.1rem; }
.cookie-dialog__close { width: 44px; min-width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--surface-text); font-size: 1.5rem; cursor: pointer; }
.cookie-dialog__form { display: grid; gap: 18px; padding: 20px; }
.cookie-dialog__group { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cookie-dialog__group legend { padding: 0 5px; color: var(--surface-text); font-weight: 700; }
.cookie-dialog__group label { display: flex; align-items: center; gap: 10px; color: var(--surface-text-muted); line-height: 1.45; }
.cookie-dialog__group input { width: 18px; height: 18px; accent-color: var(--brand-primary); }
@media (max-width: 600px) {
  .cookie-banner { right: 10px; bottom: 10px; left: 10px; align-items: stretch; flex-direction: column; gap: 14px; padding: 16px; }
  .cookie-banner__actions, .cookie-banner__actions form, .cookie-banner__actions .btn { width: 100%; }
  .cookie-banner__actions .btn { justify-content: center; }
  .footer-legal-links { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .mcrm-body .mcrm-header { padding: 12px 16px; }
  .mcrm-body .mcrm-header-user { gap: 6px; }
  .mcrm-body .mcrm-header-name { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mcrm-body .mcrm-main { padding: 22px 14px 34px; }
  .mcrm-body .mcrm-status-form { gap: 8px; }
  .mcrm-body .mcrm-status-btn { flex: 1 1 0; }
}
/* BPS-63 — Figma-inspired authentication shell.
   BPS-96 решение: .auth-page ОСТАЁТСЯ на палитре публичного сайта
   (#08090b/#141619, та же, что .cabinet-page/.home-page/.public-inner-page
   выше), а не переходит на A4 из BPS-92. Причина: вход/регистрация доступны
   и клиентам с публичного сайта, а не только staff — это страницы сайта,
   не CRM. Не путать с "забытым" местом при следующем рефакторинге палитры. */
.auth-page {
  --auth-bg: #08090b;
  --auth-surface: #141619;
  --auth-surface-soft: #1b1e22;
  --auth-line: rgba(255,255,255,.1);
  --auth-text: #f4f2ed;
  --auth-muted: #9ba0a8;
  --auth-red: #e31e24;
  --bg: #08090b;
  --surface: #141619;
  --surface-soft: rgba(255, 255, 255, .055);
  --text: #f5f5f2;
  --text-muted: #a0a3a8;
  --surface-text: #f5f5f2;
  --surface-text-muted: #a0a3a8;
  --border: rgba(255, 255, 255, .12);
  --hairline: rgba(255, 255, 255, .09);
  --brand-primary: #ff3b30;
  --brand-primary-dark: #e31e24;
  --focus-ring: rgba(227, 30, 36, .32);
  --accent-softer: color-mix(in srgb, var(--auth-red) 8%, transparent);
  --shadow-brand: 0 10px 28px color-mix(in srgb, var(--auth-red) 28%, transparent);
  background: radial-gradient(circle at 16% 18%, rgba(227,30,36,.16), transparent 28%), radial-gradient(circle at 86% 82%, rgba(227,30,36,.1), transparent 30%), var(--auth-bg);
  color: var(--auth-text);
}
.auth-page .topbar a { color: var(--auth-text); }
.auth-page .nav a { color: var(--auth-text); }
.auth-page .nav a:hover,
.auth-page .nav a:focus-visible,
.auth-page .nav a.active { color: #ff6b70; }
.auth-page .lang-dd summary {
  color: var(--auth-text);
  border-color: var(--auth-line);
  background: var(--auth-surface);
}
.auth-page .lang-dd summary:hover { border-color: var(--auth-red); }
.auth-page .btn-cta,
.auth-page .btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--auth-red) 86%, var(--on-solid)), var(--auth-red));
  border-color: var(--auth-red);
  color: #fff;
}
.auth-page .auth-section {
  min-height: calc(100vh - 154px);
  padding: clamp(48px, 8vw, 96px) 0;
  background: transparent;
}
.auth-page .auth-card {
  position: relative;
  border: 1px solid var(--auth-line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(27,30,34,.98), rgba(15,17,19,.98));
  color: var(--auth-text);
  box-shadow: 0 26px 70px rgba(0,0,0,.32);
}
.auth-page .auth-card::before {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  margin-bottom: 24px;
  border-radius: var(--radius-sm);
  background: var(--auth-red);
}
.auth-page .auth-card .eyebrow { color: #ff6b70; }
.auth-page .auth-card h1 { color: var(--auth-text); }
.auth-page .auth-form label { color: var(--auth-text); }
.auth-page .auth-form input {
  border-color: var(--auth-line);
  background: var(--auth-surface-soft);
  color: var(--auth-text);
}
.auth-page .auth-form input:focus {
  border-color: var(--auth-red);
  box-shadow: 0 0 0 3px rgba(227,30,36,.18);
  outline: none;
}
.auth-page .auth-form input::placeholder { color: #777d86; }
.auth-page .auth-alert,
.auth-page .auth-message {
  border: 1px solid rgba(227,30,36,.28);
  background: rgba(227,30,36,.12);
  color: var(--auth-text);
}
.auth-page .auth-switch,
.auth-page .auth-card p { color: var(--auth-muted); }
.auth-page .auth-card a { color: #ff6b70; }
.auth-page .auth-card a:hover { color: #fff; }
.auth-page .auth-inline-form .btn-ghost {
  color: var(--auth-text);
  border-color: var(--auth-line);
  background: var(--auth-surface-soft);
}
.auth-page .auth-inline-form .btn-ghost:hover { border-color: var(--auth-red); }
.auth-page .site-footer {
  background: var(--auth-bg);
  border-top-color: var(--auth-line);
}
.auth-page .site-footer,
.auth-page .site-footer a,
.auth-page .footer-link-soon,
.auth-page .footer-tagline,
.auth-page .footer-bottom {
  color: var(--auth-muted);
}
.auth-page .footer-brand,
.auth-page .footer-col-title {
  color: var(--auth-text);
}
.auth-page .site-footer a:hover,
.auth-page .phone-link:hover,
.auth-page .tg-link-footer:hover {
  color: #ff6b70;
}
.auth-page .tg-link-footer,
.auth-page .wa-link-footer {
  background: var(--auth-surface);
  box-shadow: inset 0 0 0 1px var(--auth-line);
}

@media (max-width: 700px) {
  .auth-page .auth-section { min-height: calc(100vh - 72px); padding: 32px 0 64px; }
  .auth-page .auth-card { border-radius: var(--radius); padding: 24px 18px; }
  .auth-page .auth-card h1 { font-size: clamp(2rem, 10vw, 2.7rem); }
}

/* Reverse Prompt BPS-94: CRM catalog master-detail (crm/catalog_overview.html).
   Compact metric-chip row replaces the old two half-screen dl panels; the
   two-column body reuses the existing .crm-detail-grid (240-320px | 1fr)
   grid from BPS-40 so this stays consistent with the rest of the CRM. */
.crm-catalog-metrics-panel {
  margin-bottom: 14px;
}

.crm-catalog-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
}

.crm-catalog-metric-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.crm-catalog-metric-group__label {
  margin-right: 2px;
  color: var(--surface-text-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.crm-catalog-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 84%, var(--crm-content-bg));
  color: inherit;
  text-decoration: none;
  font-size: .78rem;
}

.crm-catalog-metric strong {
  color: var(--surface-text);
  font-size: .92rem;
  font-weight: 700;
}

.crm-catalog-metric span {
  color: var(--surface-text-muted);
}

.crm-catalog-metric:hover {
  border-color: var(--crm-red);
  color: var(--crm-red);
}

.crm-catalog-metric:hover strong {
  color: var(--crm-red);
}

.crm-catalog-body {
  align-items: start;
}

.crm-catalog-categories-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.crm-catalog-categories {
  display: grid;
  gap: 6px;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  padding-right: 2px;
}

.crm-catalog-category {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.crm-catalog-category > div {
  min-width: 0;
}

.crm-catalog-category span {
  font-size: .72rem;
}

.crm-catalog-category__count {
  flex-shrink: 0;
  min-width: 26px;
  padding: 2px 8px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 70%, var(--crm-content-bg));
  text-align: center;
  font-size: .76rem;
  font-weight: 700;
}

.crm-catalog-category.is-active {
  border-color: var(--crm-red);
  background: color-mix(in srgb, var(--crm-red) 12%, var(--surface));
}

.crm-catalog-category.is-active .crm-catalog-category__count {
  border-color: var(--crm-red);
  color: var(--crm-red);
}

.crm-catalog-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
}

/* BPS-290: direct ?new=1 / ?edit=<pk> links keep a working inline form
   unless JavaScript has explicitly enabled the shared modal dialog. */
.crm-posts-form-fallback {
  margin-top: 14px;
}

html.js .crm-posts-form-fallback {
  display: none;
}

.crm-posts-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.crm-post-spec {
  display: grid;
  gap: 8px;
}

.crm-post-spec__label {
  color: var(--surface-text-muted);
  font-size: .82rem;
  font-weight: 600;
}

.crm-post-spec__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crm-post-spec__tag {
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--crm-red) 30%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--crm-red) 12%, transparent);
  color: var(--crm-red);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}

.crm-post-spec__tag--empty {
  border-color: var(--crm-line);
  background: color-mix(in srgb, var(--surface) 70%, var(--crm-content-bg));
  color: var(--surface-text-muted);
}

.crm-post-spec__grid {
  /* BPS-96: scroll/frame stays here; the 2-col grid + per-row layout moved
     onto .crm-checkbox-list below (the widget's own class — Constraint:
     stylize via the widget's class or its field container, never a bare
     `ul`/`li`/`div` tag selector). */
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--crm-line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 84%, var(--crm-content-bg));
}

/* BPS-96: compact list for CompactCheckboxSelectMultiple
   (crm/forms.py::PostForm.categories) — one line per item, ellipsis with
   full text in `title` for long labels, 15px checkbox in --crm-red,
   hover highlight, whole row clickable via <label>. */
.crm-checkbox-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 10px;
}

.crm-checkbox-list > div {
  min-width: 0;
}

.crm-checkbox-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
}

.crm-checkbox-list label:hover {
  background: color-mix(in srgb, var(--crm-red) 10%, transparent);
}

.crm-checkbox-list input {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  accent-color: var(--crm-red);
}

.crm-checkbox-list__text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.crm-notification-settings {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.crm-notification-settings .crm-panel-head { padding: 0 0 12px; }
.crm-notification-settings .crm-panel-head p { margin: 4px 0 0; color: var(--surface-text-muted); }
.crm-notification-settings__matrix { min-width: 680px; }
.crm-notification-settings__matrix th:not(:first-child),
.crm-notification-settings__matrix td { width: 150px; text-align: center; }
.crm-notification-settings__matrix tbody th { font-size: .82rem; font-weight: 600; }
.crm-notification-settings__matrix small { display: block; margin-top: 3px; color: var(--surface-text-muted); font-size: .64rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.crm-notification-settings__check { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.crm-notification-settings__check input { width: 17px; height: 17px; accent-color: var(--crm-red); }
.crm-notification-settings__reminders { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--crm-line); }
.crm-notification-settings__reminders h2 { margin: 0; font-size: 1rem; }
.crm-notification-settings__telegram { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--crm-line); }
.crm-notification-settings__telegram h2 { margin: 0; font-size: 1rem; }
.crm-notification-settings__telegram label { display: grid; gap: 6px; max-width: 34rem; }
.crm-notification-settings__telegram-help { color: var(--surface-text-muted); margin: 0; }

/* BPS-294: role-aware staff detail card. All color comes from CRM tokens. */
.crm-staff-card__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.crm-staff-card__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.crm-staff-card__avatar {
  display: inline-flex;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand-primary) 15%, var(--surface));
  color: var(--brand-primary);
  font-size: 1rem;
  font-weight: 800;
}

.crm-staff-card__badges,
.crm-staff-card__metrics,
.crm-staff-card__layout {
  display: grid;
  gap: 12px;
}

.crm-staff-card__badges {
  grid-auto-flow: column;
  justify-content: start;
}

.crm-staff-card__hero h2 {
  margin: 5px 0;
  overflow-wrap: anywhere;
}

.crm-staff-card__contact,
.crm-staff-card__help,
.crm-staff-card__access-summary,
.crm-staff-card__summary,
.crm-staff-card__empty {
  margin: 0;
  color: var(--surface-text-muted);
  overflow-wrap: anywhere;
}

.crm-staff-card__status--active {
  color: var(--brand-primary);
}

.crm-staff-card__status--disabled {
  color: var(--surface-text-muted);
}

.crm-staff-card__metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 14px 0;
}

.crm-staff-card__metric {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.crm-staff-card__metric strong {
  color: var(--surface-text);
  font-size: 1.35rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.crm-staff-card__metric span {
  color: var(--surface-text);
  font-weight: 700;
}

.crm-staff-card__metric small {
  color: var(--surface-text-muted);
}

.crm-staff-card__summary {
  margin: 14px 0;
}

.crm-staff-card__layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.crm-staff-card__access,
.crm-staff-card__invitation,
.crm-staff-card__orders,
.crm-staff-card__danger {
  min-width: 0;
}

.crm-staff-card__access-summary {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--crm-line);
}

.crm-staff-card__orders {
  margin-bottom: 14px;
}

.crm-staff-card__danger {
  border-color: color-mix(in srgb, var(--crm-red) 55%, var(--crm-line));
  background: color-mix(in srgb, var(--crm-red) 6%, var(--surface));
}

.crm-staff-card__danger .btn-ghost {
  border-color: var(--crm-red);
  color: var(--crm-red);
}

@media (max-width: 760px) {
  .crm-staff-card__hero,
  .crm-staff-card__identity {
    align-items: flex-start;
  }

  .crm-staff-card__hero {
    display: grid;
  }

  .crm-staff-card__metrics,
  .crm-staff-card__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* BPS-279: conflict and merge surfaces are isolated from general CRM lists. */
.crm-client-conflicts,
.crm-client-merge { display: grid; gap: 16px; }
.crm-conflict-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--crm-line); border-radius: var(--radius-md); background: var(--surface); }
.crm-conflict-card > header { display: flex; justify-content: space-between; gap: 12px; color: var(--surface-text-muted); }
.crm-conflict-card__clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.crm-conflict-card__clients section { padding: 14px; border-radius: var(--radius-sm); background: var(--surface-soft); }
.crm-conflict-card__clients h2,
.crm-conflict-card__clients h3 { margin: 0 0 8px; font-size: .9rem; }
.crm-conflict-card__clients p { margin: 6px 0; overflow-wrap: anywhere; }
.crm-client-merge .crm-filters { margin: 0; }

@media (max-width: 680px) {
  .crm-conflict-card > header,
  .crm-conflict-card__clients { grid-template-columns: minmax(0, 1fr); }
  .crm-conflict-card > header { display: grid; }
}

@media (max-width: 900px) {
  .crm-checkbox-list {
    grid-template-columns: minmax(0, 1fr);
  }
}