/* ============================================================
   TRUCK STENCIL / DOT THEME — override поверх index-RGwil2Qe.css
   Палитра: асфальт / крем / сигнальный оранж
   Подключается ПОСЛЕ основного css в index.html
   ============================================================ */

/* ---- 1. Перекраска всего сайта через shadcn-токены ---- */
:root {
  --background: 210 14% 94%;          /* серебристый, почти белый #ecf0f3 */
  --foreground: 210 15% 10%;          /* тёмный текст #15181a */
  --card: 0 0% 100%;
  --card-foreground: 210 15% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 210 15% 10%;
  --primary: 29 100% 50%;             /* сигнальный оранж #ff7a00 */
  --primary-foreground: 210 12% 8%;   /* тёмный текст на оранжевом */
  --secondary: 210 12% 88%;
  --secondary-foreground: 210 15% 14%;
  --muted: 210 12% 88%;
  --muted-foreground: 210 8% 38%;
  --accent: 29 100% 50%;              /* красный -> оранж */
  --accent-foreground: 210 12% 8%;
  --destructive: 0 73% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 210 10% 78%;
  --input: 210 10% 82%;
  --ring: 29 100% 50%;
  --radius: 0rem;                     /* острые углы — трафарет */
  --hero-overlay: 210 12% 6%;         /* hero остаётся тёмным поверх видео */
  --trust-badge: 210 12% 88%;
}

/* ---- 2. Шрифты: заголовки — настоящий трафарет, текст — Space Grotesk ---- */
.font-display,
h1, h2, h3 {
  font-family: 'Saira Stencil One', 'Bebas Neue', sans-serif !important;
  font-weight: 400 !important; /* у стенсила один вес */
  text-transform: uppercase;
  letter-spacing: .03em !important;
}
body, .font-sans {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}
/* мелкие подписи/бейджи/цены — моноширинный, как DOT-номера на борту */
small, .text-xs, .text-sm.uppercase, [class*="badge"], [class*="Badge"] {
  font-family: 'Space Mono', ui-monospace, monospace;
  letter-spacing: .08em;
}

/* ---- 3. Сигнальная лента сверху ---- */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 12px;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    #ff7a00 0 24px,
    #15181a 24px 48px
  );
}

/* ---- 4. Кнопки: срезанный угол, аптека-стиль убрать ---- */
button, .btn, a[class*="bg-primary"], button[class*="bg-primary"] {
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700 !important;
}
button[class*="bg-primary"], a[class*="bg-primary"] {
  clip-path: polygon(0 0, 100% 0, 100% 72%, 96% 100%, 0 100%);
  box-shadow: none !important;
}

/* ---- 5. Карточки и инпуты: без скруглений, рабочая рамка ---- */
[class*="rounded"] { border-radius: 0 !important; }
input, select, textarea {
  border-radius: 0 !important;
  font-family: 'Archivo', sans-serif;
}
[class*="shadow"] { box-shadow: 0 0 0 1px hsl(210 10% 80%) !important; }

/* ---- 6. Ссылки и акценты: красный сайта -> оранж ---- */
/* -foreground исключён: это текст ПОВЕРХ акцентного фона, он должен остаться тёмным */
/* NB: substring-селекторы ловят и hover:-классы Tailwind — поэтому только точечно.
   Тёмный текст на оранжевом дают сами токены (--accent-foreground/--primary-foreground). */
[class*="text-red"] { color: #ff7a00 !important; }
[class*="bg-red"] { background-color: #ff7a00 !important; color: #15181a !important; }
[class*="border-accent"], [class*="border-red"] { border-color: #ff7a00 !important; }

/* ---- 7. Жёлтые «звёзды»/рейтинги оставить, зелёные чеки чуть приглушить под палитру ---- */
[class*="text-green"] { color: #2e7d32 !important; }

/* ---- 8a. Хедер: зеркалим — меню слева, лого справа ---- */
header.fixed > .container > .flex.items-center.justify-between {
  flex-direction: row-reverse;
}
/* читаемость меню на прозрачном хедере (пункты nav — li > button/a) */
header.fixed nav li > button, header.fixed nav li > a { color: #f2efe6 !important; }
header.fixed nav a[class*="bg-background"] { color: #ff7a00 !important; } /* активный пункт */
/* телефон в шапке: убираем подмену формата номера при наведении (донорская фишка) */
header.fixed a[class*="text-primary"] span[class*="group-hover:inline"] { display: none !important; }
@media (min-width: 768px) {
  header.fixed a[class*="text-primary"] span[class*="group-hover:hidden"] { display: inline !important; }
}

/* телефон в шапке: без hover-анимации, цвет зафиксирован */
header.fixed a[class*="text-primary"],
header.fixed a[class*="text-primary"] *,
header.fixed a[class*="text-primary"]:hover,
header.fixed a[class*="text-primary"]:hover * {
  color: #f2efe6 !important;
  transition: none !important;
}

/* ---- выпадающие панели меню: DOT-стиль вместо белой панели донора ---- */
/* без анимаций появления */
header.fixed nav div[class*="absolute"],
header.fixed nav div[class*="absolute"] * {
  animation: none !important;
  transition: none !important;
}
/* сама панель: светлый «бланк» — как форма заявки */
header.fixed nav div[class*="absolute"] > div {
  background: #eef0f2 !important;
  border: 2px solid #15181a !important;
  border-top: 4px solid #ff7a00 !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .45) !important;
}
header.fixed nav div[class*="absolute"] [class*="bg-"] { background-color: transparent !important; }
/* блок Specialty — рамка-врезка на бланке */
header.fixed nav div[class*="absolute"] [class*="bg-muted"],
header.fixed nav div[class*="absolute"] [class*="bg-secondary"] {
  background-color: #e4e8ec !important;
  border-left: 2px solid #15181a;
}
/* ---- раскладка: 4 колонки -> горизонтальные ряды «ярлык + облако тегов» ---- */
header.fixed nav div[class*="absolute"] div[class*="grid-cols-4"] {
  display: block !important;
  width: 780px !important;
  max-width: 88vw;
}
header.fixed nav div[class*="absolute"] div[class*="grid-cols-4"] > div {
  display: flex !important;
  align-items: flex-start;
  gap: 18px;
  padding: 13px 0 !important;
  border-bottom: 1px solid #c9d0d6;
  background: transparent !important;
  border-left: 0 !important;
  border-radius: 0 !important;
}
header.fixed nav div[class*="absolute"] div[class*="grid-cols-4"] > div:last-child { border-bottom: 0; }
/* ярлык категории: тёмная плашка с оранжевой mono-маркировкой */
header.fixed nav div[class*="absolute"] h4 {
  flex: 0 0 128px;
  margin: 0 !important;
  background: #15181a;
  color: #ff7a00 !important;
  font-family: 'Space Mono', monospace !important;
  text-transform: uppercase;
  font-size: .66rem !important;
  letter-spacing: .14em;
  padding: 9px 10px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}
/* список -> облако тегов */
header.fixed nav div[class*="absolute"] ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 !important;
  flex: 1;
}
header.fixed nav div[class*="absolute"] li { list-style: none; margin: 0 !important; }
header.fixed nav div[class*="absolute"] a {
  display: inline-block !important;
  border: 1.5px solid #15181a !important;
  background: #fff !important;
  color: #1c2733 !important;
  font-size: .8rem !important;
  font-weight: 600;
  padding: 6px 12px !important;
  line-height: 1.2;
  white-space: nowrap;
}
header.fixed nav div[class*="absolute"] a:hover {
  background: #ff7a00 !important;
  border-color: #ff7a00 !important;
  color: #15181a !important;
}
header.fixed nav div[class*="absolute"] a:hover::before { content: none; }

/* ============================================================
   8b. СВЕТЛАЯ ТЕМА: тёмными остаются только хедер, hero и футер
   ============================================================ */
/* хедер — всегда тёмная плашка (прозрачный на светлом фоне нечитаем) */
header.fixed {
  background: rgba(21, 24, 26, .92) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* футер — тёмный асфальт */
footer, footer [class*="bg-"] {
  background-color: #15181a !important;
  color: #c9cdd2;
}
footer a:hover { color: #ff7a00; }

/* белый текст: на светлых блоках -> тёмный, в тёмных зонах остаётся белым */
[class*="text-white"] { color: #15181a !important; }
header [class*="text-white"],
footer [class*="text-white"],
section:first-of-type [class*="text-white"],
[class*="hero"] [class*="text-white"],
[class*="bg-primary"] [class*="text-white"],
button [class*="text-white"] { color: #fff !important; }

/* тёмные декоративные градиенты секций -> прозрачные (фон дают токены) */
[class*="from-gray-9"], [class*="from-slate-9"], [class*="from-zinc-9"],
[class*="bg-gray-9"], [class*="bg-slate-9"], [class*="bg-zinc-9"],
[class*="bg-black"] { background: transparent !important; }

/* CTA-секции на bg-primary: тёмный асфальт, оранжевый заголовок, оранжевая кнопка */
section[class*="bg-primary"] { background: #15181a !important; }
section[class*="bg-primary"] h1, section[class*="bg-primary"] h2, section[class*="bg-primary"] h3 { color: #ff7a00 !important; }
section[class*="bg-primary"] p, section[class*="bg-primary"] span, section[class*="bg-primary"] div { color: #f2efe6; }
section[class*="bg-primary"] a { color: #f2efe6; }
section[class*="bg-primary"] [class*="bg-accent"],
section[class*="bg-primary"] [class*="bg-background"],
section[class*="bg-primary"] [class*="bg-white"] { background: #ff7a00 !important; }
section[class*="bg-primary"] [class*="bg-accent"] *,
section[class*="bg-primary"] [class*="bg-background"] *,
section[class*="bg-primary"] [class*="bg-white"] * { color: #15181a !important; }
/* outline-кнопки (рамка под светлый фон) на тёмной CTA — кремовые */
section[class*="bg-primary"] button[class*="border"]:not([class*="bg-accent"]) {
  color: #f2efe6 !important;
  border-color: #f2efe6 !important;
  background: transparent !important;
}
section[class*="bg-primary"] button[class*="border"]:not([class*="bg-accent"]):hover {
  background: #ff7a00 !important;
  color: #15181a !important;
  border-color: #ff7a00 !important;
}

/* футер: utility-классы текста не должны давать тёмное на тёмном */
footer [class*="text-foreground"], footer [class*="text-white"] { color: #f2efe6 !important; }
footer [class*="text-muted"] { color: #9aa2aa !important; }

/* ============================================================
   10. МОБИЛЬНЫЕ: никаких анимаций и hover-эффектов вообще
   (тач-устройства: hover «залипает» после тапа — глушим всё)
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  /* hover-трансформации карточек/кнопок не двигают ничего */
  [class*="hover:scale"]:hover,
  [class*="hover:-translate"]:hover,
  [class*="hover:translate"]:hover { transform: none !important; }
  [class*="hover:shadow"]:hover { box-shadow: none !important; }

  /* верхнее меню: тап не перекрашивает пункты */
  header.fixed nav li > button:hover,
  header.fixed nav li > a:hover { color: #f2efe6 !important; background: transparent !important; }
  header.fixed nav a[class*="bg-background"]:hover { color: #ff7a00 !important; }
  header.fixed nav div[class*="absolute"] a:hover { color: #3a4148 !important; }

  /* телефон в шапке — остаётся оранжевым, без смены цвета */
  header.fixed a[class*="text-primary"]:hover,
  header.fixed a[class*="text-primary"]:hover * { color: #ff7a00 !important; }

  /* оранжевые CTA-кнопки: по тапу цвет не меняется */
  button[class*="bg-primary"]:hover,
  a[class*="bg-primary"]:hover,
  [class*="bg-accent"]:hover { background-color: #ff7a00 !important; color: #15181a !important; }

  /* outline-кнопка в тёмной CTA-секции */
  section[class*="bg-primary"] button[class*="border"]:not([class*="bg-accent"]):hover {
    background: transparent !important;
    color: #f2efe6 !important;
    border-color: #f2efe6 !important;
  }

  /* submit формы-бланка */
  [class*="bg-card"]:has(form) button[type="submit"]:hover {
    background: #15181a !important;
    color: #eef0f2 !important;
  }
}

/* ── IH QUOTE MODAL ────────────────────────────────────────────
   Внутри — донорская карточка формы (class bg-card), её оформление
   берут донорские правила [class*="bg-card"]:has(form).
   Значения ниже сняты с донора: крестик и CLOSE — пунктир, не заливка;
   overflow-x: hidden обязателен, иначе вылезает горизонтальный
   скроллбар и читается как серые полоски под кнопками. */
#ih-quote-modal {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(10,13,17,.74);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
#ih-quote-modal[hidden] { display: none; }
.ih-qm-card {
  position: relative;
  width: min(460px, 94vw);
  max-height: 92vh;
  overflow-x: hidden; overflow-y: auto;
  background: #eef0f2;
  border: 2px solid #15181a;
  padding: 0 0 40px;
}
#ih-quote-modal #ih-close-x {
  display: grid; place-items: center;
  position: absolute; top: 10px; right: 10px;
  width: 38px; height: 38px;
  background: transparent; color: #15181a;
  border: 1px dashed #5c636b; border-radius: 0;
  font-size: 17px; font-weight: 700;
  cursor: pointer; z-index: 5;
}
#ih-quote-modal #ih-close-x:hover { border-color: #15181a; background: rgba(21,24,26,.06); }

#ih-quote-modal #ih-modal-actions {
  display: flex; gap: 10px;
  padding: 2px 24px 24px;
}
#ih-call {
  flex: 1 1 0%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #ff7a00 !important; color: #15181a !important;
  font: 700 15px 'Space Grotesk', sans-serif;
  letter-spacing: .04em; padding: 15px 10px; text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 96% 100%, 0 100%);
}
#ih-call:hover { background: #e5581d !important; }
#ih-quote-modal #ih-close {
  flex: 0 0 auto;
  background: transparent; border: 1px dashed #5c636b;
  color: #15181a; border-radius: 0;
  font: 700 13px 'Space Mono', monospace;
  letter-spacing: .08em; padding: 15px 20px; cursor: pointer;
}
#ih-quote-modal #ih-close:hover { border-color: #15181a; }
/* рамку и фон даёт обёртка .ih-qm-card; у вложенной донорской карточки
   их снимаем, иначе видно двойной контур и серый шов под формой */
#ih-quote-modal [class*="bg-card"] {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
html.ih-modal-open body { overflow: hidden; }
@media (max-width: 560px) {
  #ih-quote-modal { padding: 0; }
  .ih-qm-card { width: 100vw; min-height: 100vh; max-height: 100vh; }
}


/* ── IH: шапка до самого верха экрана ──────────────────────────
   На iOS фиксированные элементы отсчитываются от safe-area, из-за
   чего над шапкой оставался просвет с контентом страницы. Красим
   всю полосу выше шапки её же фоном — просвета не остаётся. */
header.fixed::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 160px;
  background: rgba(21, 24, 26, .92);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* ── IH MOBILE DRAWER ── */
#ih-drawer {
  position: fixed; inset: 0; top: 0; z-index: 200;
  background: rgba(21,24,26,.98);
  padding: calc(var(--ih-hdr, 113px) + 24px) 26px 30px;
  overflow-y: auto;
}
#ih-drawer nav { display: grid; gap: 0; }
#ih-drawer a {
  display: block;
  padding: 15px 4px;
  color: #f2efe6 !important;
  font-family: 'Space Mono', monospace;
  font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
}
#ih-drawer a:hover { color: #ff7a00 !important; }
#ih-drawer .ih-drawer-call {
  margin-top: 18px;
  background: #ff7a00; color: #15181a !important;
  text-align: center; font-weight: 700;
  border: 0;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 96% 100%, 0 100%);
}
#ih-drawer .ih-drawer-quote {
  margin-top: 10px;
  border: 1.5px solid #f2efe6;
  text-align: center; font-weight: 700;
}
/* burger button stays clickable above drawer */
html.ih-drawer-open header.fixed { z-index: 300; }
html.ih-drawer-open body { overflow: hidden; }

/* ── IH: валидация форм и антибот ───────────────────────────── */
/* honeypot: убран с экрана, но остаётся в DOM для ботов.
   display:none не годится — часть ботов такие поля пропускает. */
.ih-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
/* подпись и звёздочка — одна строка сетки, иначе label{display:grid}
   разносит текстовый узел и <span> по разным рядам */
.ih-lab { display: block; }
/* ── подсказки адреса (Photon) + отметка проверки (US Census) ── */
.ih-addr-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  margin: 2px 0 0; padding: 0; list-style: none;
  background: #fff;
  border: 2px solid #15181a; border-top: 3px solid #ff7a00;
  border-radius: 0;
  max-height: 260px; overflow-y: auto;
  box-shadow: 6px 6px 0 rgba(21,24,26,.25);
}
.ih-addr-list[hidden] { display: none; }
.ih-addr-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer;
  font: 600 13px 'Space Grotesk', sans-serif;
  color: #15181a !important; letter-spacing: 0; text-transform: none;
  border-bottom: 1px solid #e4e8ec;
}
.ih-addr-list li:last-child { border-bottom: 0; }
.ih-addr-list li.is-active,
.ih-addr-list li:hover { background: #ff7a00; }
.ih-addr-list li svg { flex: 0 0 auto; color: #ff7a00; }
.ih-addr-list li.is-active svg,
.ih-addr-list li:hover svg { color: #15181a; }
.ih-addr-list li.is-empty { color: #6b7280 !important; cursor: default; }
.ih-addr-list li.is-empty:hover { background: transparent; }
.ih-addr-verify {
  margin: 6px 0 0 !important;
  font: 700 10px 'Space Mono', monospace;
  letter-spacing: .09em; text-transform: uppercase;
  line-height: 1.4;
}
.ih-addr-verify[hidden] { display: none; }
.ih-addr-verify[data-state="ok"]      { color: #2e7d32 !important; }
.ih-addr-verify[data-state="warn"]    { color: #b25a00 !important; }
.ih-addr-verify[data-state="loading"] { color: #6b7280 !important; }

.ih-req { color: #ff7a00; font-weight: 700; }
.ih-opt { color: #6b7280; font-weight: 400; text-transform: none; letter-spacing: 0; }
.ih-invalid {
  border-color: #d92d20 !important;
  outline: 2px solid rgba(217,45,32,.35) !important;
  outline-offset: -1px;
}
.ih-err {
  margin: 4px 0 0 !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: #d92d20;
}
.ih-notice {
  margin: 12px 0 0 !important;
  padding: 10px 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; line-height: 1.45;
  letter-spacing: 0; text-transform: none;
  border-left: 4px solid;
  border-radius: 0;
}
.ih-notice a { text-decoration: underline; font-weight: 700; }
.ih-notice-warn { background: #fff4ed; border-color: #ff7a00; color: #7a3a00; }
.ih-notice-warn a { color: #7a3a00; }
.ih-notice-ok   { background: #eef7ee; border-color: #2e7d32; color: #1e4d21; }
.ih-form-note {
  margin: 10px 0 0 !important;
  font-family: 'Space Mono', monospace;
  font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: #6b7280;
}

/* ── IH MEGA-MENU ──────────────────────────────────────────────
   Разметка повторяет донорскую (absolute > div > grid-cols-4 > div),
   поэтому всё оформление панели берут селекторы блока 8a выше.
   Здесь — только позиционирование и показ/скрытие.
   Панель фиксирована по центру вьюпорта и прижата под шапку,
   поэтому не уезжает за левый край на узких экранах. */
.ih-mega { position: relative; }
.ih-mega-wrap {
  display: none;
  position: fixed !important;
  top: var(--ih-hdr, 144px);
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 120;
}
.ih-mega:hover > .ih-mega-wrap,
.ih-mega:focus-within > .ih-mega-wrap,
.ih-mega.ih-open > .ih-mega-wrap { display: block; }

/* мостик: перекрывает зазор между пунктом меню и панелью,
   чтобы курсор не «терял» hover по дороге вниз */
.ih-mega-wrap::before {
  content: "";
  position: absolute;
  left: -50vw; right: -50vw;
  top: -70px; height: 70px;
}

/* панель: скролл, если категорий много */
.ih-mega-wrap > div {
  max-height: min(70vh, 640px);
  overflow-y: auto;
}
/* донорский блок задаёт 780px — на узких экранах ужимаем */
.ih-mega-wrap div[class*="grid-cols-4"] { max-width: calc(100vw - 32px); }

/* ---- 8. Hero: фото вместо видео (видео скрыто, файлы затёрты) ---- */
section:first-of-type video { display: none !important; }
[class*="hero"], section:first-of-type {
  background-image:
    linear-gradient(rgba(10, 13, 17, .58), rgba(10, 13, 17, .58)),
    url('/images/hero-bg-v2.webp') !important;
  background-size: cover !important;
  background-position: center 30% !important;
}

/* ============================================================
   11. ДЕКОНСТРУКЦИЯ: ломаем композицию оригинала
   ============================================================ */

/* 11.1 Hero: форма спрятана за кнопкой — текст на всю ширину */
section .grid[class*="lg:grid-cols-[1fr_420px]"] {
  grid-template-columns: 1fr !important;
  max-width: 880px !important;
}
/* карточка формы в hero скрыта; мобильный дубль формы — тоже */
html:not(.quote-open) section:first-of-type [class*="bg-card"]:has(form) { display: none !important; }
section[class*="lg:hidden"]:has(form) { display: none !important; }
/* модалка при quote-open: оверлей рисуем box-shadow-ом карточки (обходит stacking-контексты) */
html.quote-open section:first-of-type { position: relative; z-index: 300; }
html.quote-open header.fixed { z-index: 10 !important; }
html.quote-open section:first-of-type [class*="bg-card"]:has(form) {
  display: block !important;
  position: fixed; z-index: 100;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(460px, 94vw);
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 0 0 100vmax rgba(10, 13, 17, .74) !important;
}
/* обёртка карточки на мобиле имеет hidden lg:block — поднимаем и её */
html.quote-open section:first-of-type div[class*="lg:block"]:has(form) { display: block !important; }

/* кнопки модалки: крестик + CALL + CLOSE (видны только при открытой модалке) */
#ih-close-x, #ih-modal-actions { display: none; }
html.quote-open #ih-close-x {
  display: grid; place-items: center;
  position: absolute; top: 10px; right: 10px;
  width: 38px; height: 38px;
  background: #ff7a00; color: #15181a;
  border: 0; font-size: 17px; font-weight: 700;
  cursor: pointer; z-index: 5;
}
html.quote-open #ih-close-x:hover { background: #e5581d; }
html.quote-open #ih-modal-actions {
  display: flex; gap: 10px;
  padding: 2px 24px 24px;
}
#ih-call {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #ff7a00 !important; color: #15181a !important;
  font: 700 15px 'Space Grotesk', sans-serif;
  letter-spacing: .04em;
  padding: 15px 10px;
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 96% 100%, 0 100%);
}
#ih-call:hover { background: #e5581d !important; }
#ih-close {
  flex: 0 0 auto;
  background: transparent; border: 1.5px solid #8a929a;
  color: #3a4148;
  font: 600 13px 'Space Mono', monospace;
  letter-spacing: .08em;
  padding: 15px 20px; cursor: pointer;
}
#ih-close:hover { border-color: #15181a; color: #15181a; }
/* плавающая кнопка заявки */
#ih-quote-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  font: 700 15px 'Space Grotesk', sans-serif;
  letter-spacing: .06em;
  background: #ff7a00; color: #15181a;
  border: 0; padding: 16px 24px; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 100%, 0 100%);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .35);
}
#ih-quote-btn:hover { background: #e5581d; }
@media (max-width: 720px) {
  #ih-quote-btn { right: 0; left: 0; bottom: 0; clip-path: none; padding: 17px; }
  body { padding-bottom: 58px; } /* чтобы плавающая кнопка не перекрывала контент */
}

/* ============================================================
   14. MOBILE-FIRST ПРОХОД
   ============================================================ */
html, body { overflow-x: hidden; }
/* вторичная кнопка hero (bg-background): тёмная, читаемая */
section:first-of-type a[class*="bg-background"],
section:first-of-type button[class*="bg-background"],
section:first-of-type [class*="bg-background"][class*="inline-flex"] {
  background: #15181a !important;
  color: #f2efe6 !important;
  border: 1.5px solid rgba(242, 239, 230, .35) !important;
}
@media (max-width: 760px) {
  /* стенсил шире Bebas — ужимаем заголовки, чтобы не переливались */
  h1 { font-size: clamp(1.9rem, 10.5vw, 2.7rem) !important; line-height: 1.02 !important; word-break: keep-all; }
  section h2 { font-size: clamp(1.3rem, 6.5vw, 1.75rem) !important; }
  .font-display { letter-spacing: .01em !important; }
  /* бейдж над H1 и trust-строки — мельче */
  section:first-of-type [class*="border"][class*="px-"] { font-size: .7rem !important; }
  /* контент hero с нормальными полями */
  section:first-of-type { padding-left: 4px; padding-right: 4px; }
  /* кнопки во всю ширину, крупные тапы */
  section:first-of-type a[class*="inline-flex"],
  section:first-of-type button[class*="inline-flex"] {
    width: 100%; justify-content: center;
    min-height: 52px;
  }
  /* каталог сервисов и теги — одна колонка/крупнее */
  section .grid[class*="lg:grid-cols-4"][class*="sm:grid-cols-2"] { grid-template-columns: 1fr !important; }
  .pills a, header.fixed nav div[class*="absolute"] a { padding: 9px 14px !important; }
  /* спец-панели не упираются в край */
  .wrap, [class*="container"] { padding-left: 18px !important; padding-right: 18px !important; }
  /* модалка формы: во весь экран со скроллом */
  html.quote-open section:first-of-type [class*="bg-card"]:has(form) {
    top: 0; left: 0; transform: none;
    width: 100vw; height: 100vh; max-height: 100vh;
    padding-bottom: 40px;
  }
}

/* 11.2 Заголовки: всё влево + оранжевая планка (у них всё по центру) */
section h2 { text-align: left !important; }
section h2::after {
  content: ""; display: block; width: 64px; height: 6px;
  background: #ff7a00; margin-top: 14px;
}
section [class*="text-center"] { text-align: left !important; }
/* форма-бланк остаётся по центру */
[class*="bg-card"]:has(form) [class*="text-center"],
[class*="bg-card"]:has(form) h3 { text-align: center !important; }
[class*="bg-card"]:has(form) h3::after { display: none; }

/* 11.3 Сетка 55 сервисов: карточки -> нумерованный каталог в 2 колонки */
section .grid[class*="lg:grid-cols-4"][class*="sm:grid-cols-2"] {
  grid-template-columns: 1fr 1fr !important;
  gap: 0 2.5rem !important;
  counter-reset: svc;
}
@media (max-width: 760px) {
  section .grid[class*="lg:grid-cols-4"][class*="sm:grid-cols-2"] { grid-template-columns: 1fr !important; }
}
section .grid[class*="lg:grid-cols-4"][class*="sm:grid-cols-2"] > * {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #c3cad1 !important;
  box-shadow: none !important;
  padding: 14px 6px !important;
  display: flex; align-items: center; gap: 14px;
  position: relative;
}
section .grid[class*="lg:grid-cols-4"][class*="sm:grid-cols-2"] > *::before {
  counter-increment: svc;
  content: counter(svc, decimal-leading-zero);
  font-family: 'Space Mono', monospace;
  font-size: .8rem; color: #ff7a00; min-width: 2em;
}
/* вложенные коробки внутри строк каталога — без рамок и теней */
section .grid[class*="lg:grid-cols-4"][class*="sm:grid-cols-2"] > * > div,
section .grid[class*="lg:grid-cols-4"][class*="sm:grid-cols-2"] > * [class*="bg-card"] {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  flex: 1;
}

/* 11.4 «What We Remove»: инвентарные ящики — тёмные плитки со срезанным углом */
section .grid[class*="grid-cols-2"][class*="lg:grid-cols-4"] {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  counter-reset: itm;
}
@media (max-width: 980px) {
  section .grid[class*="grid-cols-2"][class*="lg:grid-cols-4"] { grid-template-columns: 1fr 1fr !important; }
}
section .grid[class*="grid-cols-2"][class*="lg:grid-cols-4"] > [class*="bg-card"] {
  background: #15181a !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  padding: 0 !important;
  position: relative;
  min-height: 128px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  counter-increment: itm;
}
section .grid[class*="grid-cols-2"][class*="lg:grid-cols-4"] > [class*="bg-card"]:hover {
  background: #1f2933 !important;
}
/* внутренний контейнер: иконка сверху, текст под ней */
section .grid[class*="grid-cols-2"][class*="lg:grid-cols-4"] > [class*="bg-card"] > div {
  padding: 18px 16px 24px !important;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  height: 100%;
}
section .grid[class*="grid-cols-2"][class*="lg:grid-cols-4"] > [class*="bg-card"] svg {
  width: 30px !important; height: 30px !important;
  color: #ff7a00 !important;
  margin: 0 !important;
}
section .grid[class*="grid-cols-2"][class*="lg:grid-cols-4"] > [class*="bg-card"] p {
  color: #f2efe6 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.35;
  text-align: left !important;
}
/* инвентарный номер ящика в правом верхнем углу */
section .grid[class*="grid-cols-2"][class*="lg:grid-cols-4"] > [class*="bg-card"]::before {
  content: "IT-0" counter(itm);
  position: absolute; top: 12px; right: 14px;
  font-family: 'Space Mono', monospace;
  font-size: .68rem; letter-spacing: .12em;
  color: #5c636b;
}
/* оранжевый уголок на срезе */
section .grid[class*="grid-cols-2"][class*="lg:grid-cols-4"] > [class*="bg-card"]::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 34px; height: 34px;
  background: linear-gradient(135deg, transparent 48%, #ff7a00 50%);
}

/* 11.5 Процесс: 2x2 карточки -> вертикальные шаги с линией */
section .grid[class*="md:grid-cols-2"]:has(> [class*="bg-card"]) {
  grid-template-columns: 1fr !important;
  max-width: 720px;
  counter-reset: стп;
}
section .grid[class*="md:grid-cols-2"] > [class*="bg-card"] {
  border: 0 !important;
  border-left: 3px solid #15181a !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-left: 28px !important;
}

/* 11.6 «Why Us» тройки: без карточной обводки, линия сверху */
section .grid[class*="md:grid-cols-3"] > [class*="bg-card"] {
  background: transparent !important;
  border: 0 !important;
  border-top: 3px solid #15181a !important;
  box-shadow: none !important;
  text-align: left !important;
}

/* 11.6b «Why Residents Choose Us» (центрированные карточки) -> единая спец-панель */
section .grid[class*="md:grid-cols-3"]:has(> [class*="bg-card"][class*="text-center"]) {
  background: #15181a;
  padding: 36px 22px;
  gap: 0 !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
  counter-reset: why;
}
section .grid[class*="md:grid-cols-3"] > [class*="bg-card"][class*="text-center"] {
  background: transparent !important;
  border: 0 !important;
  border-left: 2px dashed #3a4148 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  padding: 4px 26px !important;
  position: relative;
  counter-increment: why;
}
section .grid[class*="md:grid-cols-3"] > [class*="bg-card"][class*="text-center"]:first-child { border-left: 0 !important; }
section .grid[class*="md:grid-cols-3"] > [class*="bg-card"][class*="text-center"]::before {
  content: "R-0" counter(why);
  position: absolute; top: 6px; right: 18px;
  font-family: 'Space Mono', monospace;
  font-size: .68rem; letter-spacing: .12em; color: #5c636b;
}
section .grid[class*="md:grid-cols-3"] > [class*="bg-card"][class*="text-center"] [class*="text-5xl"] {
  font-size: 2rem !important;
  margin-bottom: 12px !important;
  filter: grayscale(1) sepia(1) saturate(4) hue-rotate(-15deg); /* эмодзи в оранжевый тон */
}
section .grid[class*="md:grid-cols-3"] > [class*="bg-card"][class*="text-center"] h3 {
  color: #ff7a00 !important;
  font-size: 1.05rem !important;
}
section .grid[class*="md:grid-cols-3"] > [class*="bg-card"][class*="text-center"] p {
  color: #c9cdd2 !important;
  font-size: .9rem !important;
}
@media (max-width: 760px) {
  section .grid[class*="md:grid-cols-3"] > [class*="bg-card"][class*="text-center"] {
    border-left: 0 !important;
    border-top: 2px dashed #3a4148 !important;
    padding: 16px 6px !important;
  }
  section .grid[class*="md:grid-cols-3"] > [class*="bg-card"][class*="text-center"]:first-child { border-top: 0 !important; }
}

/* 11.7 CTA-полоса: скошенный верх, контент влево */
section[class*="bg-primary"] {
  clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%);
  padding-top: 7rem !important;
}
section[class*="bg-primary"] [class*="justify-center"] { justify-content: flex-start !important; }

/* 11.8 Футер: колонки в обратном порядке + лента сверху */
footer > div > .grid, footer .grid { direction: rtl; }
footer .grid > * { direction: ltr; }
footer {
  border-top: 12px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #ff7a00 0 24px, #15181a 24px 48px) 12 !important;
}

/* 11.9 Чипы городов: из пилюль с галочками -> квадратные mono-теги */
section:has(h2) a[class*="rounded-full"], section [class*="rounded-full"][class*="border"] {
  font-family: 'Space Mono', monospace !important;
  text-transform: uppercase; font-size: .8rem !important;
  border: 1.5px solid #15181a !important;
  background: transparent !important;
}
section a[class*="rounded-full"] svg, section [class*="rounded-full"] svg { display: none !important; }

/* 11.12 Бейдж hero: вместо донорской плашки-чипа — mono-маркировка ПОД заголовком */
section:first-of-type .grid > div:first-child {
  display: flex; flex-direction: column; align-items: flex-start;
}
section:first-of-type .grid > div:first-child > h1 { order: 1; }
section:first-of-type .grid > div:first-child > div[class*="bg-accent"] {
  order: 2;
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  font-family: 'Space Mono', monospace !important;
  font-size: .78rem !important;
  letter-spacing: .26em;
  text-transform: uppercase;
}
section:first-of-type .grid > div:first-child > div[class*="bg-accent"]::before {
  content: "";
  display: inline-block;
  width: 36px; height: 2px;
  background: #ff7a00;
  margin-right: 12px;
  vertical-align: middle;
}
section:first-of-type .grid > div:first-child > p { order: 3; }
section:first-of-type .grid > div:first-child > div:not([class*="bg-accent"]) { order: 4; }

/* ============================================================
   12. ПЕРЕМЕШКА ПОРЯДКА СЕКЦИЙ (data-shuffle на <html> из index.html)
   Вариант выбирается по хэшу pathname: 0 — исходный, 1 и 2 — перестановки.
   Hero всегда первый, CTA всегда последняя. Визуальный порядок (flex order).
   ============================================================ */
html[data-shuffle="1"] main > div,
html[data-shuffle="2"] main > div { display: flex; flex-direction: column; }
html[data-shuffle="1"] main > div > *,
html[data-shuffle="2"] main > div > * { order: 13; } /* хвост по умолчанию */
/* базовые позиции 1..12 */
html[data-shuffle="1"] main > div > *:nth-child(1),  html[data-shuffle="2"] main > div > *:nth-child(1)  { order: 1; }
html[data-shuffle="1"] main > div > *:nth-child(2),  html[data-shuffle="2"] main > div > *:nth-child(2)  { order: 2; }
html[data-shuffle="1"] main > div > *:nth-child(12), html[data-shuffle="2"] main > div > *:nth-child(12) { order: 12; }
/* вариант 1: About и услуги раньше текстового полотна, FAQ раньше Why */
html[data-shuffle="1"] main > div > *:nth-child(3)  { order: 5; }
html[data-shuffle="1"] main > div > *:nth-child(4)  { order: 3; }
html[data-shuffle="1"] main > div > *:nth-child(5)  { order: 4; }
html[data-shuffle="1"] main > div > *:nth-child(6)  { order: 7; }
html[data-shuffle="1"] main > div > *:nth-child(7)  { order: 6; }
html[data-shuffle="1"] main > div > *:nth-child(8)  { order: 9; }
html[data-shuffle="1"] main > div > *:nth-child(9)  { order: 8; }
html[data-shuffle="1"] main > div > *:nth-child(10) { order: 11; }
html[data-shuffle="1"] main > div > *:nth-child(11) { order: 10; }
/* вариант 2: каталог услуг сразу после hero, About в глубине */
html[data-shuffle="2"] main > div > *:nth-child(3)  { order: 5; }
html[data-shuffle="2"] main > div > *:nth-child(4)  { order: 8; }
html[data-shuffle="2"] main > div > *:nth-child(5)  { order: 3; }
html[data-shuffle="2"] main > div > *:nth-child(6)  { order: 4; }
html[data-shuffle="2"] main > div > *:nth-child(7)  { order: 7; }
html[data-shuffle="2"] main > div > *:nth-child(8)  { order: 6; }
html[data-shuffle="2"] main > div > *:nth-child(9)  { order: 10; }
html[data-shuffle="2"] main > div > *:nth-child(10) { order: 11; }
html[data-shuffle="2"] main > div > *:nth-child(11) { order: 9; }

/* 11.11 «About {city}»: паспорт элемента + полевой конспект */
section[class*="py-12"] [class*="bg-card"] > [class*="p-8"] {
  position: relative;
}
/* карточка: жёсткий бланк */
section[class*="py-12"] [class*="max-w-4xl"] > [class*="bg-card"] {
  border: 2px solid #15181a !important;
  box-shadow: 8px 8px 0 rgba(21, 24, 26, .25) !important;
  background: #fdfdfc !important;
}
/* штамп в углу карточки */
section[class*="py-12"] [class*="bg-card"] > [class*="p-8"]::before {
  content: "CITY DATA SHEET";
  position: absolute; top: 18px; right: 20px;
  font-family: 'Space Mono', monospace;
  font-size: .64rem; letter-spacing: .18em;
  color: #b23c10; border: 1.5px solid #b23c10;
  padding: 3px 8px; transform: rotate(3deg); opacity: .85;
}
/* две ячейки (Population / ZIP) -> плитки таблицы Менделеева */
section[class*="py-12"] [class*="bg-card"] .grid[class*="md:grid-cols-2"] {
  gap: 18px !important;
  counter-reset: elem;
}
section[class*="py-12"] [class*="bg-card"] .grid[class*="md:grid-cols-2"] > div {
  border: 2px solid #15181a;
  background: #15181a;
  padding: 16px 16px 12px;
  position: relative;
  display: flex; flex-direction: column-reverse; /* значение сверху, подпись внизу */
  min-height: 120px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  counter-increment: elem;
}
/* атомный номер в углу плитки */
section[class*="py-12"] [class*="bg-card"] .grid[class*="md:grid-cols-2"] > div::before {
  content: "0" counter(elem);
  position: absolute; top: 10px; left: 14px;
  font-family: 'Space Mono', monospace;
  font-size: .7rem; color: #f2efe6;
}
/* значение — как символ элемента */
section[class*="py-12"] [class*="bg-card"] .grid[class*="md:grid-cols-2"] > div p[class*="text-lg"] {
  font-family: 'Saira Stencil One', sans-serif !important;
  font-size: 2.1rem !important;
  color: #ff7a00 !important;
  text-align: center;
  margin: auto 0 4px !important;
  line-height: 1.1;
}
/* подпись — имя элемента внизу */
section[class*="py-12"] [class*="bg-card"] .grid[class*="md:grid-cols-2"] > div p[class*="text-sm"] {
  font-family: 'Space Mono', monospace !important;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .66rem !important;
  color: #f2efe6 !important;
  text-align: center;
  margin: 0 !important;
  order: -1; /* вниз при column-reverse */
}
/* параграф -> линованный полевой конспект */
section[class*="py-12"] [class*="bg-card"] [class*="mt-6"] {
  margin-top: 26px !important;
  border-left: 3px solid #ff7a00;
  padding: 4px 0 4px 22px;
  position: relative;
}
section[class*="py-12"] [class*="bg-card"] [class*="mt-6"]::before {
  content: "FIELD NOTES";
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: .64rem; letter-spacing: .2em;
  color: #8a929a; margin-bottom: 10px;
}
section[class*="py-12"] [class*="bg-card"] [class*="mt-6"] p {
  line-height: 29px !important;
  background: repeating-linear-gradient(to bottom, transparent 0 28px, #dde3e8 28px 29px);
  color: #2a3540 !important;
}

/* 11.10 Чередование фонов секций — другой ритм, чем у них */
section:nth-of-type(even):not([class*="bg-primary"]):not(:first-of-type) {
  background-color: #e3e8ec !important;
}

/* ============================================================
   9. ФОРМА ЗАЯВКИ — «бумажный work order»
   Светлая серебристая карточка, тёмный текст, инпуты-линии бланка
   ============================================================ */
[class*="bg-card"]:has(form) {
  background: #eef0f2 !important;          /* серебристый, почти белый */
  color: #15181a !important;
  border: 2px solid #15181a !important;
  box-shadow: 7px 7px 0 rgba(0,0,0,.45) !important;
}
/* весь текст внутри — тёмный, приглушённые — серые */
[class*="bg-card"]:has(form) p,
[class*="bg-card"]:has(form) label,
[class*="bg-card"]:has(form) span:not([class*="bg-"]),
[class*="bg-card"]:has(form) div { color: #15181a; }
[class*="bg-card"]:has(form) [class*="text-muted"] { color: #5c636b !important; }
[class*="bg-card"]:has(form) svg { color: #15181a; }

/* инпуты: линии бланка вместо тёмных боксов */
[class*="bg-card"]:has(form) input:not([type="file"]),
[class*="bg-card"]:has(form) textarea,
[class*="bg-card"]:has(form) select {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #15181a !important;
  border-radius: 0 !important;
  color: #15181a !important;
  font-family: 'Space Grotesk', sans-serif !important;
  box-shadow: none !important;
}
[class*="bg-card"]:has(form) input::placeholder,
[class*="bg-card"]:has(form) textarea::placeholder { color: #7a828a !important; }
[class*="bg-card"]:has(form) input:focus,
[class*="bg-card"]:has(form) textarea:focus,
[class*="bg-card"]:has(form) select:focus { border-bottom-color: #ff7a00 !important; outline: none !important; }

/* upload / take photo — пунктирные, как поле «приложить» в бланке */
[class*="bg-card"]:has(form) button[type="button"] {
  background: transparent !important;
  border: 1.5px dashed #5c636b !important;
  color: #15181a !important;
}

/* submit — тёмный асфальт на светлой бумаге, срезанный угол */
[class*="bg-card"]:has(form) button[type="submit"] {
  background: #15181a !important;
  color: #eef0f2 !important;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 96% 100%, 0 100%);
  letter-spacing: .08em;
}
[class*="bg-card"]:has(form) button[type="submit"]:hover { background: #ff7a00 !important; color: #15181a !important; }

/* верхняя тёмная шапка карточки (VETERAN-OWNED) — тёмная шапка бланка, оранжевый текст.
   Точный селектор div.bg-secondary.border-b, чтобы не задеть select.bg-secondary;
   бейдж FREE ESTIMATES (bg-accent) исключён — у него тёмный текст на оранжевом */
[class*="bg-card"]:has(form) div[class*="bg-secondary"][class*="border-b"] p:not([class*="bg-accent"]),
[class*="bg-card"]:has(form) div[class*="bg-secondary"][class*="border-b"] div:not([class*="bg-accent"]),
[class*="bg-card"]:has(form) div[class*="bg-secondary"][class*="border-b"] span:not([class*="bg-accent"]) { color: #ff7a00 !important; }
[class*="bg-card"]:has(form) div[class*="bg-secondary"][class*="border-b"] svg { color: #ff7a00 !important; }
[class*="bg-card"]:has(form) div[class*="bg-secondary"][class*="border-b"] [class*="bg-accent"] { color: #15181a !important; }