/* ==========================================================================
   Ariete Home — редакционна дизайн система
   --------------------------------------------------------------------------
   Принципи:
   · Типографията носи йерархията, не кутиите. Линия > рамка > сянка.
   · Един шрифт — Geist. Йерархия през размер, тегло и разредка.
   · Топла хартия, не клинично бяло. Акцентът заема под 10% от площта.
   · Ритъмът на секциите се променя. Няма два еднакви блока подред.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Токени
   -------------------------------------------------------------------------- */

:root {
  /* --- Одобрена палитра Ариете ------------------------------------------ */
  --navy-900: #1a2332;
  --navy-800: #243044;
  --gold-500: #c8a456;
  --gold-100: #eee5cf;
  --paper-50: #f5f3ee;
  --slate-600: #65707c;

  /* Повърхности */
  --paper: var(--paper-50);
  --paper-2: #ece9e2;
  --white: #ffffff;
  --dark: var(--navy-900);
  --dark-2: var(--navy-800);

  /* Мастило.
     --ink-2 е с една степен по-тъмен от slate-600: #65707c върху хартията
     дава 4.42:1 и не покрива AA за основен текст. Slate-600 остава за
     едри/вторични надписи през --slate. */
  --ink: var(--navy-900);
  --ink-2: #5a646f;
  --ink-3: #5c6570;
  --slate: var(--slate-600);

  /* Линии */
  --line: rgba(26, 35, 50, .14);
  --line-soft: rgba(26, 35, 50, .07);
  --line-dark: rgba(255, 255, 255, .16);
  --line-dark-soft: rgba(255, 255, 255, .08);

  /* Акцент.
     --accent е за плоскости, рамки и едри числа.
     --accent-text е притъмнен вариант за връзки: #c8a456 върху хартия е 2:1
     и е нечетим като текст. */
  --accent: var(--gold-500);
  --accent-text: #7d6229;
  --accent-lift: #d8b76d;
  --accent-wash: var(--gold-100);

  --ok: #2f6b4f;
  --err: #a33f3f;

  /* Ритъм */
  --pad: clamp(20px, 5vw, 76px);
  --max: 1360px;
  --measure: 34rem;

  /* Вертикален ритъм — три стъпки, за да не е всичко еднакво.
     Измерено: старият --y-lg даваше 176 px отгоре И отдолу на всяка секция,
     тоест 352 px чист въздух между два блока текст. На 1440 px това е повече
     от една трета екран, през който няма какво да се гледа.
     Сега: голямата стъпка е ~104 px на 1440 и 56 px на телефон. */
  --y-lg: clamp(3.5rem, 2rem + 5vw, 8rem);
  --y-md: clamp(3rem, 1.8rem + 3.4vw, 5.5rem);
  --y-sm: clamp(2rem, 1.6rem + 1.6vw, 3rem);

  /* Типографска скала. H1 42→80 px, основен текст 16→18 px. */
  --t-display: clamp(2.625rem, 2rem + 2.6vw, 5rem);
  --t-h2: clamp(1.75rem, 1.35rem + 1.7vw, 3rem);
  --t-h3: clamp(1.125rem, 1.05rem + 0.32vw, 1.375rem);
  --t-lede: clamp(1.0625rem, 1rem + 0.29vw, 1.25rem);
  --t-body: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --t-sm: 0.9375rem;
  --t-label: 0.75rem;

  /* Един шрифт за целия сайт. Йерархията идва от размер, тегло и разредка,
     не от втора гарнитура. */
  --sans: 'Geist', 'Geist Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Geist Mono се зареждаше, но не се използваше никъде. Системният моноширинен
     шрифт върши същата работа за нула байта. */
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. База
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

[id] { scroll-margin-top: 6rem; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* "locl" 0 изключва българските локализирани кирилски форми. При lang="bg"
     шрифтът иначе рисува ж, т, в, д с ръкописни очертания, които се четат като
     калиграфия, а не като печатен текст. Езикът остава bg заради четците и SEO. */
  font-feature-settings: "ss01" 1, "locl" 0;
  font-variant-alternates: normal;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--white); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* clip: rect() е остаряло и не задържа позиционирани наследници: полето-капан
   вътре в .sr-only излизаше извън екрана при увеличен текст и разпъваше
   страницата до 700 px. clip-path реже целия слой, включително децата. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  pointer-events: none;
}
.sr-only * { max-width: 1px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--dark); color: var(--white); padding: 14px 22px;
  font-size: var(--t-sm); text-decoration: none;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Типография
   -------------------------------------------------------------------------- */

/* Всички заглавия са Geist. Елегантността идва от плътна разредка при едрите
   размери и от контраста в теглото, не от serif гарнитура. */
.display,
.h2,
.h3 {
  font-family: var(--sans);
  font-weight: 500;
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  line-height: 1;
  letter-spacing: -0.035em;
}

.h2 {
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.028em;
}
/* По-малък вариант за заглавия на подсекции (категории във въпросите). */
.h2--sm { font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem); }

.h3 {
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 500;
}

/* Акцентът е само цвят. Ползва се притъмненият тон, защото #c8a456 върху
   хартия дава 2:1 и не се чете като текст. */
em, .em {
  font-style: normal;
  color: var(--accent-text);
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 38rem;
  text-wrap: pretty;
}

.measure { max-width: var(--measure); }
.measure-wide { max-width: 46rem; }

/* Ръчно прекъсване на ред, което важи само на голям екран. */
.br-lg { display: none; }
@media (min-width: 900px) { .br-lg { display: inline; } }

/* Вертикален ритъм в блок със смесено съдържание. */
.flow > * + * { margin-top: 1.25rem; }
.flow--lg > * + * { margin-top: 2rem; }

.mono { font-family: var(--mono); font-feature-settings: "tnum"; }

/* Малкият етикет. Употребява се пестеливо — веднъж на секция, най-много. */
.label {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label--accent { color: var(--accent-text); }
.label--light { color: rgba(255, 255, 255, .62); }

.muted { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   4. Оформление
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.band { padding-block: var(--y-md); }
.band--lg { padding-block: var(--y-lg); }
.band--sm { padding-block: var(--y-sm); }
.band--paper2 { background: var(--paper-2); }
.band--white { background: var(--white); }
.band--dark { background: var(--dark); color: var(--white); }

.band--rule { border-top: 1px solid var(--line); }

/* Върху тъмните повърхности притъмненият акцент става нечетим. Подменяме самата
   променлива веднъж — така всеки текст в акцентен цвят вътре се оправя сам. */
/* .showcase и .proof са фотографски ленти с бял текст — тоест тъмни
   повърхности, но без клас .band--dark, затова дълго време оставаха извън
   този списък. Резултатът беше „800+“ в притъмнено злато върху вечерна
   снимка: измерени 1.44:1, тоест числото, заради което съществува цялото
   изречение, практически не се виждаше. Lighthouse не го хваща — не мери
   текст върху изображение. */
.band--dark, .footer, .menu, .consent, .closer,
.showcase, .proof { --accent-text: var(--accent-lift); }

/* Етикетът наследява --ink-3 (#5c6570). Върху navy това е 2.66:1 — под AA и
   Lighthouse го отчита. Всяка тъмна повърхност си сменя тона, не само .band--dark:
   футърът ползва същия клас и остана нечетим. */
.band--dark .label, .footer .label, .menu .label, .closer .label,
.page-head--dark .label { color: rgba(255, 255, 255, .72); }
.band--dark .lede, .footer .lede, .closer .lede { color: rgba(255, 255, 255, .68); }

/* Асиметричен сплит: тесен ляв стълб за заглавие, широк десен за съдържание. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 4vw, 6rem);
  align-items: start;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

/* minmax(0, 1fr), а не 1fr: при 1fr минималният размер е auto и достатъчно
   широко дете (напр. <select> с дълги опции) разпъва колоната отвъд екрана. */
@media (max-width: 900px) {
  .split, .split--even, .split--wide-left { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
.split > * { min-width: 0; }

/* Заглавието на секция. Никакви номера, никакви черти — само етикет и твърдение. */
.head { max-width: 44rem; margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.head__label { margin-bottom: 1.25rem; }
.head__title + .head__text { margin-top: 1.25rem; }

/* Самостоятелен етикет над блок (напр. „Отзиви“). */
.label--block { display: block; margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.5rem); }

/* Заглавие в лявата колона на split, което остава лепкаво при скрол. */
.sticky-head { position: sticky; top: 6.5rem; }
@media (max-width: 900px) { .sticky-head { position: static; } }

.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.hr--dark { background: var(--line-dark); }

/* --------------------------------------------------------------------------
   5. Връзки и бутони
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1.05em 1.7em;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease);
  white-space: nowrap;
}
.btn svg { flex-shrink: 0; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--solid { background: var(--dark); color: var(--white); }
.btn--solid:hover { background: var(--accent); }

/* Върху тъмен фон бронзът трябва да е светлият тон с тъмен текст —
   тъмният бронз с бял текст пада под 4.5:1. */
.btn--accent { background: var(--accent-lift); color: var(--dark); }
.btn--accent:hover { background: var(--white); }

.btn--line { border-color: var(--line); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); }

.btn--on-dark { border-color: var(--line-dark); color: var(--white); }
.btn--on-dark:hover { background: var(--white); color: var(--dark); border-color: var(--white); }

.btn--block { width: 100%; }

/* Текстова връзка с подчертаване, което се изтегля при hover. */
.link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: .15em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .4s var(--ease), color .3s var(--ease);
}
.link:hover { background-size: 0 1px; background-position: 100% 100%; color: var(--accent-text); }
.link svg { transition: transform .35s var(--ease); }
.link:hover svg { transform: translateX(3px); }
.link--accent { color: var(--accent-text); }
.link--light { color: var(--white); }

/* --------------------------------------------------------------------------
   6. Хедър
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), transform .4s var(--ease);
}
.header[data-scrolled="true"] { border-bottom-color: var(--line); }
.header[data-hidden="true"] { transform: translateY(-100%); }

.header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 5rem;
  /* Контейнерна заявка: прагът се мери спрямо СВОБОДНОТО МЯСТО и спрямо
     текущия размер на шрифта. Медийна заявка в px не знае нищо за увеличения
     текст, а em в медийна заявка се брои спрямо стандартния шрифт на браузъра,
     не спрямо този на страницата. Затова при 200% текст навигацията оставаше
     разпъната и хедърът излизаше извън екрана. */
  container-type: inline-size;
  container-name: header;
}

/* width: fit-content – иначе връзката се разпъва по цялата колона на футъра
   и кликаемата площ става 415 px за лого от 150 px.

   ⚠ align-self НЕ се задава тук. Сложен глобално, той изкарваше логото залепено
   за горния ръб на хедъра: лентата е 80 px, логото 44 px и под него зееха 36 px
   празно. Подравняването е грижа на мястото, където логото стои – виж
   .footer .logo по-долу. */
.logo {
  display: flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
  width: fit-content;
}
.footer .logo { align-self: flex-start; }

/* Логото е едно изображение. Височината води, широчината се нагажда –
   така съотношението остава непроменено при всяка големина на реда. */
/* Логото носи три реда текст. При 44 px височина всеки ред излизаше около
   6 px – петно, а не надпис. Оригиналът е 56 px висок, затова горната граница
   стои близо до него: там изображението е 1:1 и е най-остро. */
.logo__img {
  display: block;
  width: auto;
  height: clamp(2.5rem, 2.1rem + 1.2vw, 3.25rem);
}
/* Смаленият хедър при скролване е 68 px – логото слиза, за да остане въздух. */
.header[data-scrolled="true"] .logo__img { height: 2.75rem; }
@media (max-width: 700px) { .logo__img { height: 2.4rem; } }
.logo__mark { flex-shrink: 0; }
.logo__name {
  font-family: var(--sans);
  font-size: 1.125rem;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
}
.logo__sub {
  display: block;
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: .3rem;
  color: var(--ink-3);
}
/* .45 върху navy дава 4.31:1 — на косъм под AA за дребен текст. */
.logo--light .logo__sub { color: rgba(255, 255, 255, .6); }

.nav { display: flex; align-items: center; gap: 1.9rem; margin-left: auto; }
.nav__link {
  position: relative;
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--ink-2);
  padding-block: .4rem;
  /* Без това елементите се пречупват на два реда, щом мястото намалее. */
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .3s var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); }

.header__end { display: flex; align-items: center; gap: 1.25rem; margin-left: 1rem; }
.header__tel {
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.header__tel:hover { color: var(--accent-text); }

/* Бутонът има два етикета — дълъг за широки екрани, къс за тесни.
   Точно тези правила липсваха и двата се показваха едновременно, което
   изблъскваше навигацията на два реда. */
.header__cta { padding: .85em 1.4em; white-space: nowrap; flex-shrink: 0; }
.header__cta-short { display: none; }

.burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  margin-right: -.6rem;
  border: 0; background: none;
  place-items: center;
  color: var(--ink);
}
.burger__box { display: block; width: 22px; height: 10px; position: relative; }
.burger__box::before,
.burger__box::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform .4s var(--ease);
}
.burger__box::before { top: 0; }
.burger__box::after { bottom: 0; }

/* --------------------------------------------------------------------------
   Стъпаловидно освобождаване на място в хедъра
   --------------------------------------------------------------------------
   ИЗМЕРЕНО: съдържанието на хедъра иска около 1448 px (лого 261 + меню 674 +
   телефон 140 + бутон 233 + разстояния). Плюс двустранното поле от 2×76 px
   това значи, че всичко се побира чак от 1600 px нагоре. Между 1080 и 1440 px
   бутонът „Клиентска платформа“ излизаше извън екрана — измерено +74 px на
   1180, +61 на 1280, +40 на 1363 и +37 на 1366.

   Затова местото се освобождава на стъпки, а не с една медийна заявка.
   Праговете са в em: при увеличен текст в браузъра се задействат по-рано.
   -------------------------------------------------------------------------- */

/* 1. Под 1472 px телефонът в хедъра отпада. При 1440 без това правило бутонът
      опираше точно в ръба на екрана (измерено CTA дясно = 1440 при clientW
      1440): не преливане, но полето отдясно беше изядено. Номерът остава в лентата над
      футъра, в мобилното меню и на всяка страница с контакти — не се губи. */
@media (max-width: 92em) {
  .header__tel { display: none; }
  .nav { gap: 1.5rem; }
}

/* 2. Под 1280 px подзаглавието на логото отпада (то е по-широко от името и
      диктува ширината на целия блок) и разстоянията се стягат. */
@media (max-width: 80em) {
  .logo__sub { display: none; }
  .nav { gap: 1.15rem; }
  .header__inner { gap: 1.5rem; }
  .header__end { gap: .85rem; }
}

/* 3. Под 1180 px бутонът минава на краткия си етикет. */
@media (max-width: 73.75em) {
  .header__cta-long { display: none; }
  .header__cta-short { display: inline; }
  .nav { gap: 1rem; }
}

/* 4. Под 1080 px няма как да се събере читаемо — минава се на мобилния модел.
      По-добре бургер, отколкото смачкано меню или изрязан бутон. */
@media (max-width: 67.5em) {
  .header__inner { height: 4.25rem; gap: 1rem; }
  .nav { display: none; }
  .header__end { margin-left: auto; gap: .6rem; }
  .burger { display: grid; }
}

/* Същото правило, но задействано от реалната ширина в em. При увеличен текст
   навигацията отстъпва на бургера точно когато вече не се побира. */
@container header (max-width: 58em) {
  .nav { display: none; }
  .header__end { margin-left: auto; gap: .6rem; }
  .burger { display: grid; }
  .logo__sub { display: none; }
}

/* Още по-тясно: етикетът на бутона отпада, остава иконата. */
@container header (max-width: 20em) {
  .header__cta-short { display: none; }
  .header__cta { padding-inline: .9em; }
  .logo__name { display: none; }
}

/* Бутонът към клиентската платформа остава видим и на най-тесните телефони —
   това е основната причина съществуващ клиент да отвори сайта. */
@media (max-width: 420px) {
  .header__inner { gap: .6rem; }
  .header__cta { padding: .7em .8em; font-size: 12px; }
  .logo__mark { width: 22px; height: 22px; }
  .logo__name { font-size: 1rem; }
}

/* Мобилно меню — пълен екран, типографско */
.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--dark);
  color: var(--white);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
  /* Затвореното меню участва в оформлението (visibility, не display). Едрите
     му връзки при увеличен текст надхвърляха екрана и разширяваха целия
     документ до 700 px — на страница, в която менюто дори не се вижда. */
  overflow: hidden;
}
.menu__link, .menu__sub, .menu__contact { overflow-wrap: anywhere; }
.menu[data-open="true"] { opacity: 1; visibility: visible; }

.menu__top {
  display: flex; align-items: center; justify-content: space-between;
  height: 4.25rem; flex-shrink: 0;
  border-bottom: 1px solid var(--line-dark-soft);
}
.menu__close {
  width: 2.75rem; height: 2.75rem; margin-right: -.6rem;
  border: 0; background: none; color: inherit; display: grid; place-items: center;
}

.menu__nav { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 2rem; overflow-y: auto; }
.menu__link {
  font-family: var(--sans);
  font-size: clamp(1.75rem, 1.1rem + 3vw, 2.75rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--white);
  padding-block: .28em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease);
}
.menu[data-open="true"] .menu__link { opacity: 1; transform: none; }
.menu__link:hover { color: var(--accent-lift); }
.menu__link[aria-current="page"] { color: var(--accent-lift); }

/* Справочните страници: втори, по-тих ред под главните връзки. „Въпроси“ и
   „Полезно“ не заслужават тежестта на основната навигация, но трябва да са
   достижими — досега се стигаше до тях само през вътрешна връзка. */
.menu__more {
  flex-shrink: 0;
  padding-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: baseline;
  border-top: 1px solid var(--line-dark-soft);
  padding-top: 1.25rem;
}
.menu__more-h {
  flex-basis: 100%;
  margin-bottom: .25rem;
  color: rgba(255, 255, 255, .5);
}
.menu__sub {
  font-size: var(--t-sm);
  text-decoration: none;
  color: rgba(255, 255, 255, .78);
  padding-block: .35rem;
}
.menu__sub:hover { color: var(--accent-lift); }
.menu__sub[aria-current="page"] { color: var(--accent-lift); }

.menu__platform { flex-shrink: 0; padding-bottom: 1.5rem; }

.menu__foot {
  flex-shrink: 0;
  padding-block: 1.75rem;
  border-top: 1px solid var(--line-dark-soft);
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
}
.menu__contact {
  display: flex; align-items: center; gap: .55rem;
  /* Вертикалният отстъп прави целта достатъчно висока за пръст. */
  padding-block: .55rem;
  font-size: var(--t-sm); text-decoration: none;
  color: rgba(255, 255, 255, .72);
}
.menu__contact:hover { color: var(--white); }

body[data-locked="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

/* ---- Hero с фотографски фон ------------------------------------------- */

.hero-v2 {
  position: relative;
  isolation: isolate;
  background: var(--paper);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0;
  overflow: clip;
}

/* На широк екран обвивката не участва в потока — снимката е фон на секцията. */
.hero-v2__media { position: static; padding: 0; }
.hero-v2__bg { position: absolute; inset: -6% 0 auto; height: 106%; z-index: -2; }

/* Снимката се държеше прекалено измита. Лек контраст и наситеност ѝ връщат
   плътността, без да я превръщат в HDR картичка. */
.hero-v2__img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.08) saturate(1.06) brightness(.97);
}

/* Кремав воал: плътен вляво под текста, прозрачен вдясно над снимката,
   и преливащ към хартията отдолу, за да няма рязък ръб към следващата секция.

   Спрямо предишната версия воалът е с около 12% по-малко покритие върху
   снимката — тя вече се вижда като снимка, а не като бледо петно. Загубеният
   контраст под текста се връща от втори, тесен градиент точно под колоната
   с текста, вместо да се измива цялата ширина. */
.hero-v2__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, transparent 58%, var(--paper) 98%),
    linear-gradient(105deg,
      var(--paper) 0%,
      color-mix(in srgb, var(--paper) 94%, transparent) 34%,
      color-mix(in srgb, var(--paper) 46%, transparent) 60%,
      color-mix(in srgb, var(--paper) 6%, transparent) 82%);
}

.hero-v2__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7.4fr) minmax(0, 5.2fr);
  gap: clamp(1.5rem, .6rem + 3vw, 3.25rem);
  align-items: center;
  min-height: clamp(30rem, 62vh, 40rem);
  padding-bottom: clamp(2rem, 1.2rem + 3vw, 4rem);
}

/* Локален слой точно под текстовата колона. Прави го четим, без да мие
   цялата снимка — по-плътен от общия воал и стига само докъдето стига текстът. */
.hero-v2__text {
  position: relative;
  max-width: 44rem;
  padding: clamp(1.25rem, .8rem + 1.6vw, 2.25rem) clamp(1.25rem, .8rem + 2vw, 2.5rem)
           clamp(1.5rem, 1rem + 2vw, 2.75rem);
  margin-left: clamp(-1.25rem, -2vw, -.8rem);
}
.hero-v2__text::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 100% at 22% 45%,
    color-mix(in srgb, var(--paper) 92%, transparent) 0%,
    color-mix(in srgb, var(--paper) 78%, transparent) 55%,
    transparent 100%);
}
.hero-v2__text > * { position: relative; }

/* Значка с доказателство под CTA-тата. */
.proof-pill {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 2rem;
  padding: .6rem 1rem;
  background: color-mix(in srgb, var(--white) 82%, transparent);
  border: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.proof-pill strong { font-size: 1.125rem; font-weight: 500; color: var(--ink); }
.proof-pill__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); flex-shrink: 0;
}

/* Плаващият чертожен лист излиза под секцията. По-компактен от преди —
   заемаше твърде голяма част от дясната колона и притискаше текста. */
.plan--float {
  position: relative; z-index: 3;
  margin-bottom: clamp(-6rem, -4vw, -2rem);
  /* Беше 27rem. При 404 px ширина картата „Какво поемаме“ ставаше тясна
     ивица – редовете се пренасяха и цялата колона се изтегляше надолу,
     до под hero-то. По-широка колона я прави по-ниска, без да отнема от
     заглавието: то се нуждае от около 620 px за трите си реда. */
  max-width: 30rem;
  margin-left: auto;
}
.plan--float .plan__sheet {
  /* Двуслойна сянка: тясна и плътна за ръба, широка и мека за дълбочината. */
  box-shadow:
    0 1px 2px rgba(26, 35, 50, .16),
    0 26px 54px -30px rgba(26, 35, 50, .5);
  /* Фина хартиена шарка — едва доловима, само за да не е плоска плоскост. */
  position: relative;
}
.plan--float .plan__sheet::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(0deg, rgba(26,35,50,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(26,35,50,.014) 0 1px, transparent 1px 4px);
}
.plan--float .svc-tree {
  box-shadow:
    0 1px 2px rgba(26, 35, 50, .12),
    0 22px 44px -28px rgba(26, 35, 50, .42);
}

/* Повече въздух около основния CTA — стоеше залепен за подзаглавието. */
.hero-v2 .hero__actions { margin-top: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem); gap: 1rem; }
.hero-v2 .proof-pill { margin-top: clamp(2rem, 1.4rem + 2vw, 2.75rem); }

/* На тесен екран текстът НЕ стои върху снимката: върху ярките ѝ части
   контрастът пада под AA. Снимката е самостоятелна лента отгоре, текстът
   започва под нея върху плътна хартия. */
@media (max-width: 900px) {
  .hero-v2 { padding-top: 0; }
  .hero-v2__media { position: relative; padding-inline: var(--pad); }
  .hero-v2__inner { grid-template-columns: 1fr; min-height: 0; padding-top: 1.75rem; }
  .hero-v2__text { max-width: none; }

  /* Лентата повтаря пропорцията на мобилния кадър (3:2). Когато кутията е
     по-плоска от кадъра, object-fit: cover го изрязва втори път и цялата
     работа по art direction отива на вятъра. */
  .hero-v2__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    aspect-ratio: 3 / 2;
    max-height: 17rem;
    margin-inline: calc(var(--pad) * -1);
  }
  .hero-v2__img { height: 100%; }

  /* Само меко преливане към хартията в долния ръб на лентата. */
  /* inset: auto 0 auto 0 оставяше воала на статичната му позиция — тоест
     ПОД снимката, върху заглавието, което кремавият градиент избеляваше.
     Закачаме го за долния ръб на медийния блок, където му е мястото. */
  .hero-v2__veil {
    inset: auto 0 0 0;
    aspect-ratio: 3 / 2;
    max-height: 17rem;
    width: 100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 58%, var(--paper) 100%);
  }

  .plan--float { margin-bottom: 0; }

  /* Локалният панел под текста е за широк екран, където текстът стои върху
     снимката. Тук снимката е отделна лента, затова отпада заедно с
     отрицателния отстъп, който при увеличен текст изкарваше блока извън екрана. */
  .hero-v2__text { padding: 0; margin-left: 0; }
  .hero-v2__text::before { display: none; }
}

.hero { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); padding-bottom: 0; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  align-items: center;
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.hero__label { display: block; margin-bottom: clamp(1.25rem, .8rem + 1.6vw, 2.25rem); }

/* В две колони заглавието не бива да е с пълния дисплеен размер. */
.hero__title {
  /* Долната граница е 42 px, не 40: под 42 заглавието на телефон спира да
     води окото и се изравнява по тежест с подзаглавието. */
  font-size: clamp(2.625rem, 1.5rem + 3.4vw, 4.5rem);
  margin-bottom: clamp(1.25rem, .9rem + 1.4vw, 2rem);
}

.hero__actions { display: flex; gap: .75rem; margin-top: 2rem; flex-wrap: wrap; }

/* Фактите — редица от линии под текста в лявата колона. */
.facts { display: flex; flex-direction: column; margin-top: 2.5rem; }
.facts__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.05rem;
  border-top: 1px solid var(--line);
}
.facts__item:last-child { border-bottom: 1px solid var(--line); }
.facts__n {
  font-family: var(--sans);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.facts__l { font-size: var(--t-sm); color: var(--ink-3); text-align: right; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 560px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   7б. Архитектурният план в hero-то
   -------------------------------------------------------------------------- */

/* Планът и дървото стоят едно под друго. При застъпване дървото покриваше
   почти целия чертеж и нито едното не се четеше. */
.plan { position: relative; display: grid; gap: 1rem; }

.plan__sheet {
  position: relative;
  aspect-ratio: 16 / 11;
  background:
    linear-gradient(155deg, var(--white) 0%, var(--paper-2) 100%);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* Милиметрова мрежа — фон на чертожен лист, не декоративен блупринт. */
.plan__sheet::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(20, 23, 26, .045) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(20, 23, 26, .045) 1px, transparent 1px) 0 0 / 28px 100%;
  mask-image: radial-gradient(ellipse at 50% 45%, #000 45%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 45%, transparent 78%);
}

.plan__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Надписите по чертожния лист са в мастилен тон, не в приглушен сив.
   Две причини: лежат върху лист, който сам стои върху снимка, и приглушеният
   тон падаше на 4.15:1; и по същество това са бележки на чертожник — навито
   мастило им отива повече от сиво. */
.plan__note {
  position: absolute;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Смесен цвят, а не opacity. Правилото на този проект е, че текст никога не
     носи прозрачност — иначе върху различен фон дава различен контраст и
     всяка проверка после трябва да гадае. Тук резултатът е същият тон,
     но е плътен и предвидим. */
  color: color-mix(in srgb, var(--ink) 76%, var(--paper));
}
.plan__note--tl { top: 1rem; left: 1.1rem; }
.plan__note--br { bottom: 1rem; right: 1.1rem; }

/* Чертожните линии се изчертават сами. pathLength="1" в SVG нормализира
   дължината на всеки контур, за да върви една и съща анимация за всички. */
.plan__ink { stroke: var(--ink); fill: none; stroke-linejoin: round; stroke-linecap: round; }
.plan__ink--wall { stroke-width: 2.4; }
.plan__ink--part { stroke-width: 1.2; }
.plan__ink--hatch { stroke-width: .9; stroke: var(--ink-3); }
.plan__dim { stroke: var(--accent); stroke-width: 1; fill: none; }
.plan__unit { fill: var(--accent); }
/* Наситеността е нарочна: това петно е единственото твърдение на
   чертежа — „ето кое е общо“. При 9% то не се виждаше и целият
   рисунък оставаше без смисъл. */
.plan__core { fill: rgba(154, 116, 52, .17); stroke: none; }

@media (prefers-reduced-motion: no-preference) {
  .plan__draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: plan-draw 1.5s var(--ease) forwards;
  }
  .plan__draw--2 { animation-delay: .35s; }
  .plan__draw--3 { animation-delay: .6s; }
  .plan__draw--4 { animation-delay: .85s; }

  .plan__unit, .plan__core, .plan__label { opacity: 0; animation: plan-in .8s var(--ease) 1.1s forwards; }

  @keyframes plan-draw { to { stroke-dashoffset: 0; } }
  @keyframes plan-in   { to { opacity: 1; } }
}

/* Плаващите карти */
.plan-card {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 1rem 1.1rem;
  box-shadow: 0 18px 40px -22px rgba(20, 23, 26, .35), 0 2px 6px rgba(20, 23, 26, .04);
}
/* Картите висят извън листа по диагонал — така не закриват сърцевината
   на плана, а само двата му ъгъла. Долната остава вътре по вертикала,
   за да не се блъска с реда с числата под текста. */
.plan-card--signals { top: 4%;    right: -11%; width: min(15rem, 60%); }
.plan-card--routing { bottom: 4%; left:  -11%; width: min(17rem, 68%); }

@media (prefers-reduced-motion: no-preference) {
  .plan-card { opacity: 0; transform: translateY(14px); animation: plan-in .9s var(--ease) forwards; }
  .plan-card--signals { animation-delay: 1.25s; }
  .plan-card--routing { animation-delay: 1.45s; }
}

.plan-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; margin-bottom: .75rem;
}
.plan-card__n {
  font-family: var(--sans);
  font-size: 1.875rem; line-height: 1; letter-spacing: -0.03em;
  margin-top: .35rem;
}
.plan-card__mark {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  background: var(--accent-wash);
  color: var(--accent-text);
  flex-shrink: 0;
}

.plan-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding-block: .3rem;
  font-size: 12px;
  color: var(--ink-2);
}
.plan-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tag {
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: .18em .5em; flex-shrink: 0; font-weight: 500;
}
.tag--new  { background: rgba(45, 74, 110, .1);  color: #2d4a6e; }
.tag--work { background: rgba(154, 116, 52, .14); color: var(--accent-text); }
.tag--done { background: rgba(74, 122, 82, .13);  color: #3d6644; }

/* Мерна лента за свързаните институции */
.meter { display: flex; gap: 2px; margin-top: .7rem; }
.meter span { flex: 1; height: 1.15rem; background: var(--line); }
.meter span[data-on] { background: var(--ink); }

@media (max-width: 900px) {
  .plan { max-width: 32rem; margin-inline: auto; width: 100%; }
  .plan-card--signals { right: 0; }
  .plan-card--routing { left: 0; }
}

/* Под 700 px двете карти закриват почти целия чертеж. Изваждаме ги под него —
   по-високо е, но и планът, и данните се виждат изцяло. */
@media (max-width: 700px) {
  .plan { display: grid; gap: .75rem; }
  .plan-card {
    position: static;
    width: auto;
    box-shadow: none;
    animation: none;
    opacity: 1;
    transform: none;
  }
  .plan__note { font-size: 9px; }
}

/* --------------------------------------------------------------------------
   8. Индекс на клиентите — доказателство като типография
   -------------------------------------------------------------------------- */

.clients { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.clients__inner {
  display: flex;
  align-items: baseline;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.clients__label { flex-shrink: 0; }
/* Мрежа вместо разделители — имената се четат като указател, без пунктуация. */
.clients__list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .35rem 2rem;
  font-family: var(--sans);
  font-size: clamp(1rem, .93rem + .5vw, 1.375rem);
  line-height: 1.45;
  letter-spacing: -0.015em;
}
.clients__list span { white-space: nowrap; }

@media (max-width: 760px) {
  .clients__inner { flex-direction: column; gap: 1rem; }
}

/* --------------------------------------------------------------------------
   9. Индексиран списък — услуги, ръководства, всичко номерирано
   -------------------------------------------------------------------------- */

.index { border-top: 1px solid var(--line); }

.entry {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: clamp(1rem, .5rem + 2vw, 3rem);
  align-items: start;
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  scroll-margin-top: 7rem;
}
/* Тънка линия, която се изтегля по цялата ширина при hover. */
.entry::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease);
}
a.entry:hover::after { transform: scaleX(1); }

.entry__n {
  font-family: var(--sans);
  font-size: 1.125rem;
  color: var(--ink-3);
  padding-top: .25rem;
  transition: color .35s var(--ease);
}
a.entry:hover .entry__n { color: var(--accent-text); }

.entry__body { max-width: 44rem; }
.entry__title { margin-bottom: .6rem; transition: color .35s var(--ease); }
a.entry:hover .entry__title { color: var(--accent-text); }
.entry__sub {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .6rem;
}
.entry__text { color: var(--ink-2); max-width: 40rem; }

.entry__tags {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  margin-top: 1rem;
  font-size: var(--t-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.entry__tags span:not(:last-child)::after { content: ' /'; color: var(--line); }

.entry__end { padding-top: .35rem; color: var(--ink-3); transition: transform .45s var(--ease), color .35s var(--ease); }
a.entry:hover .entry__end { transform: translateX(5px); color: var(--accent-text); }

@media (max-width: 720px) {
  .entry { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; }
  .entry__end { display: none; }
  .entry__n { font-size: .875rem; }
}

/* Новините ползват дата вместо номер — първата колона трябва да е по-широка. */
.index--news .entry { grid-template-columns: 9.5rem minmax(0, 1fr) auto; }
@media (max-width: 720px) {
  .index--news .entry { grid-template-columns: 1fr; }
  .index--news .entry__n { font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; }
}

/* --------------------------------------------------------------------------
   8б. Дърво на услугите в hero-то
   -------------------------------------------------------------------------- */

/* Отстоянията вътре са нарочно стегнати. С по-щедрите стойности отпреди
   картата ставаше 489 px за осем реда – висока ивица, в която окото не
   намира групи, а просто пада надолу. Целите за пръст остават над 24 px. */
.svc-tree {
  background: var(--white);
  border: 1px solid var(--line);
  padding: .85rem 1.1rem .9rem;
}
.svc-tree__label { display: block; margin-bottom: .5rem; }

.svc-branch + .svc-branch { border-top: 1px solid var(--line-soft); }

.svc-branch__head {
  width: 100%;
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem 0;
  border: 0; background: none; text-align: left;
  color: var(--ink);
  transition: color .2s var(--ease);
}
.svc-branch__head:hover { color: var(--accent-text); }
.svc-branch__icon { display: flex; color: var(--accent-text); flex-shrink: 0; }
.svc-branch__name { flex: 1; font-size: var(--t-sm); font-weight: 500; }

.svc-branch__sign { position: relative; width: 11px; height: 11px; flex-shrink: 0; }
.svc-branch__sign::before,
.svc-branch__sign::after {
  content: ''; position: absolute; background: currentColor;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.svc-branch__sign::before { top: 5px; left: 0; width: 11px; height: 1.5px; }
.svc-branch__sign::after { left: 5px; top: 0; width: 1.5px; height: 11px; }
.svc-branch__head[aria-expanded="true"] .svc-branch__sign::after { transform: rotate(90deg); opacity: 0; }

.svc-branch__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.svc-branch__head[aria-expanded="true"] + .svc-branch__panel { grid-template-rows: 1fr; }
.svc-branch__inner { overflow: hidden; }

.svc-branch__text {
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
  padding-bottom: .45rem;
}
.svc-branch__kids { list-style: none; padding: 0 0 .5rem; margin: 0; }
.svc-branch__kids a {
  display: block;
  padding: .4rem 0 .4rem .75rem;
  border-left: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.svc-branch__kids a:hover { color: var(--accent-text); border-left-color: var(--accent); }
.svc-branch__kids .is-secondary a { color: var(--ink-3); }
.svc-branch__tag {
  display: block;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin-top: .1rem;
}



/* --------------------------------------------------------------------------
   8в. Лента с доказателство
   -------------------------------------------------------------------------- */

.proof { position: relative; background: var(--dark); }
.proof__img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display: block;
}
.proof__overlay {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem) 0;
  background: linear-gradient(to top, rgba(26, 35, 50, .88), rgba(26, 35, 50, 0));
}
.proof__inner { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.proof__text {
  color: var(--white);
  font-size: var(--t-lede);
  max-width: 44ch;
  text-wrap: pretty;
}
.proof__credit { font-size: var(--t-label); color: rgba(255, 255, 255, .6); }

@media (max-width: 700px) { .proof__img { aspect-ratio: 4 / 3; } }

/* --------------------------------------------------------------------------
   8г. Пакети
   -------------------------------------------------------------------------- */

.section-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 3rem; flex-wrap: wrap;
  margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

/* Шест колони, за да могат картите да са с различна тежест:
   широка + висока на първия ред, две равни на втория. */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.pkg { grid-column: span 3; }
.pkg--wide { grid-column: span 4; }
.pkg--tall { grid-column: span 2; }

/* Широката карта е хоризонтална: снимка вляво, текст вдясно.
   Селекторът минава през .pkg-grid, защото .pkg се дефинира по-долу
   и иначе неговият flex-direction: column печели по ред на източника. */
@media (min-width: 901px) {
  /* Хоризонталните карти: снимката запълва цялата височина на колоната си.
     ВАЖНО е и <picture> да е висок 100%: той е междинният блок между .pkg__shot
     и <img>. Без това img { height: 100% } се мери спрямо кутия с автоматична
     височина — кръгова зависимост, при която снимката пада до естествения си
     размер. Измерено: 246 px снимка в карта от 733 px, тоест 487 px празно. */
  .pkg-grid .pkg--wide { flex-direction: row; align-items: stretch; }
  .pkg-grid .pkg--wide .pkg__shot { flex: 0 0 46%; max-height: none; }
  .pkg-grid .pkg--wide .pkg__shot picture { display: block; height: 100%; }
  .pkg-grid .pkg--wide .pkg__img { height: 100%; aspect-ratio: auto; }
  .pkg-grid .pkg--wide .pkg__body { flex: 1; justify-content: center; }

  /* Схемата определя височината на целия първи ред — ограничаваме я, за да не
     разтяга и съседната карта. Долният ръб е нарочно отрязан: макетът
     продължава извън картата, вместо да свършва с празно поле. */
  .pkg-grid .pkg--tall .pkg__shot { padding: 1.25rem 1.25rem 0; max-height: 19rem; }

  /* Вторият ред огледално повтаря първия: тясна карта с изправен кадър, после
     широка хоризонтална. Пропорциите се различават, поведението — не. */
  .pkg-grid .pkg--narrow .pkg__img { aspect-ratio: 4 / 3; }

  .pkg-grid .pkg--flip { flex-direction: row-reverse; align-items: stretch; }
  .pkg-grid .pkg--flip .pkg__shot { flex: 0 0 42%; }
  .pkg-grid .pkg--flip .pkg__shot picture { display: block; height: 100%; }
  .pkg-grid .pkg--flip .pkg__img { height: 100%; aspect-ratio: auto; }
  .pkg-grid .pkg--flip .pkg__body { flex: 1; justify-content: center; }
}

.pkg--narrow { grid-column: span 2; }
.pkg--flip { grid-column: span 4; }

/* Макетът не бива да излиза извън картата. */
.pkg__shot--mock { overflow: hidden; }
.pkg--tall .mock__phone { right: 0; bottom: -.5rem; }

@media (max-width: 900px) {
  .pkg-grid { grid-template-columns: 1fr; }
  .pkg, .pkg--wide, .pkg--tall { grid-column: span 1; }
}

.pkg {
  background: var(--white);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: background-color .2s var(--ease);
}
.pkg:hover { background: var(--paper); }

/* Снимката е ВИНАГИ видима. Преди на широк екран стоеше с max-height: 0 и се
   разкриваше при hover — „Техника“ и „Почистване“ изглеждаха като текстови
   карти, а на сензорен екран hover изобщо няма. Важното съдържание не се крие
   зад показалец. */
.pkg__shot { display: block; overflow: hidden; }
.pkg__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

/* Резултатът за клиента — един ред, който казва какво получава. */
.pkg__out {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: .35rem;
  font-size: var(--t-sm);
  color: var(--ink);
  font-weight: 500;
}
.pkg__out svg { flex-shrink: 0; color: var(--accent-text); margin-top: .28em; }

.pkg__body {
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  display: flex; flex-direction: column; gap: .55rem;
  flex: 1;
}
.pkg__icon { color: var(--accent-text); margin-bottom: .35rem; }
.pkg__title { display: block; }
.pkg__sub {
  font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-text); font-weight: 500;
}
.pkg__text { font-size: var(--t-sm); color: var(--ink-2); }
.pkg__more {
  margin-top: auto; padding-top: 1rem;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-sm); font-weight: 500;
}
.pkg__more svg { transition: transform .2s var(--ease); }
.pkg:hover .pkg__more svg { transform: translateX(3px); }

/* Вторична възможност — визуално подчинена на пакетите. */
.cap {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--line);
  text-decoration: none; color: inherit;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.cap:hover { border-color: var(--accent); background: var(--accent-wash); }
.cap__icon { color: var(--accent-text); flex-shrink: 0; display: flex; }
.cap__title { display: block; font-weight: 500; font-size: var(--t-sm); }
.cap__text { display: block; font-size: var(--t-sm); color: var(--ink-2); }
.cap__end { margin-left: auto; color: var(--ink-3); flex-shrink: 0; display: flex; }

/* --------------------------------------------------------------------------
   8д. Комплекси
   -------------------------------------------------------------------------- */

.cx-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.cx-shot { margin: 0; }
.cx-shot__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.cx-shot figcaption { font-size: var(--t-sm); color: var(--ink-3); margin-top: .5rem; }

/* Бележка под илюстративния колаж: кадрите не са конкретен обект на Ариете. */
.rail-note {
  margin-top: 1.25rem;
  max-width: 46ch;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

/* Реалните комплекси — отделен, ясно озаглавен факт, не етикет под снимка.
   Колажът е стоков; свързването на име със снимка би било твърдение, което
   не можем да подкрепим. */
.cx-block {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0;
  border-block: 1px solid var(--line);
}
@media (max-width: 780px) { .cx-block { grid-template-columns: 1fr; gap: 1.25rem; } }

.cx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
  gap: .55rem 2rem;
  font-size: var(--t-lede);
}
.cx-list li { white-space: nowrap; }

/* --------------------------------------------------------------------------
   9б. Дървовиден указател на сайта
   -------------------------------------------------------------------------- */

.tree {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.tree__branch {
  background: var(--paper-2);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem) clamp(1.25rem, .9rem + 1.2vw, 1.75rem);
  display: flex; flex-direction: column; gap: .6rem;
}
.tree__root {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  text-decoration: none; color: var(--ink);
  transition: color .3s var(--ease);
}
.tree__root svg { flex-shrink: 0; color: var(--ink-3); transition: transform .35s var(--ease), color .3s var(--ease); }
.tree__root:hover { color: var(--accent-text); }
.tree__root:hover svg { transform: translateX(3px); color: var(--accent-text); }
.tree__text { font-size: var(--t-sm); color: var(--ink-3); }

.tree__kids {
  list-style: none;
  padding: 0;
  margin-top: .6rem;
  display: flex; flex-direction: column;
}
/* Тънката вертикална линия вляво прави връзката родител–деца видима. */
.tree__kids li { border-left: 1px solid var(--line); }
.tree__kids a {
  display: block;
  padding: .5rem 0 .5rem 1rem;
  font-size: var(--t-sm);
  color: var(--ink-2);
  text-decoration: none;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.tree__kids a:hover { color: var(--accent-text); padding-left: 1.35rem; }

/* --------------------------------------------------------------------------
   10. Списък с отметки / характеристики
   -------------------------------------------------------------------------- */

.checks { list-style: none; padding: 0; }
.checks li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .9rem;
  padding-block: .95rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
}
.checks li:first-child { border-top: 1px solid var(--line-soft); }
.checks svg { color: var(--accent-text); margin-top: .3em; }

.band--dark .checks li { border-color: var(--line-dark-soft); color: rgba(255, 255, 255, .7); }
.band--dark .checks li:first-child { border-top-color: var(--line-dark-soft); }
.band--dark .checks svg { color: var(--accent-lift); }

/* Двуколонен списък с характеристики */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.feature {
  background: var(--paper);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.band--white .feature { background: var(--white); }
.band--paper2 .feature { background: var(--paper-2); }
.feature__icon { color: var(--accent-text); margin-bottom: .5rem; }
.feature__text { font-size: var(--t-sm); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   11. Стъпки
   -------------------------------------------------------------------------- */

.steps { counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, .8rem + 1.6vw, 2.5rem);
  padding-block: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--sans);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  line-height: .9;
  letter-spacing: -0.03em;
  color: var(--accent-text);
}
.step__title { margin-bottom: .5rem; }
.step__text { color: var(--ink-2); max-width: 34rem; }

.band--dark .step { border-color: var(--line-dark-soft); }
.band--dark .step:last-child { border-bottom-color: var(--line-dark-soft); }
.band--dark .step::before { color: var(--accent-lift); }
.band--dark .step__text { color: rgba(255, 255, 255, .62); }

/* --------------------------------------------------------------------------
   12. Индекс на институции
   -------------------------------------------------------------------------- */

.roster { display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.roster__group { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
.roster__h { padding-top: .15rem; }
.roster__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .3rem 1.75rem;
  font-size: var(--t-body);
}

@media (max-width: 640px) {
  .roster__group { grid-template-columns: 1fr; gap: .7rem; }
}

/* --------------------------------------------------------------------------
   13. Цитат
   -------------------------------------------------------------------------- */

.quote { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.quote__text {
  font-family: var(--sans);
  font-size: clamp(1.375rem, .95rem + 2vw, 2.375rem);
  line-height: 1.28;
  letter-spacing: -0.022em;
  text-wrap: pretty;
  max-width: 24ch;
}
.quote--wide .quote__text { max-width: 32ch; }
.quote__by { display: flex; flex-direction: column; gap: .2rem; font-size: var(--t-sm); }
.quote__name { font-weight: 500; }
.quote__role { color: var(--ink-3); }

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(2rem, 1rem + 4vw, 5rem); }

/* --------------------------------------------------------------------------
   14. Офиси
   -------------------------------------------------------------------------- */

.offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.office {
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem) clamp(1.25rem, .8rem + 1.4vw, 2rem);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .55rem;
}
.office:last-child { border-right: 1px solid var(--line); }
.offices { border-bottom: 1px solid var(--line); }
.office__name { margin-block: .35rem .2rem; }
.office__addr { font-size: var(--t-sm); color: var(--ink-2); }
.office__meta { font-size: var(--t-sm); color: var(--ink-3); }
.office__links { display: flex; gap: 1.25rem; margin-top: auto; padding-top: 1.25rem; }

@media (max-width: 720px) {
  .office { border-right: 1px solid var(--line); }
}

/* Заглавието над картата. Serif-ът с line-height .96 виси под кутията си,
   затова разстоянието се задава тук, а не с margin на split-а. */
.offices-head { margin-bottom: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem); }
.offices-head .h2 { padding-bottom: .12em; }

/* ---- Локатор: карта + карти на офисите --------------------------------- */

/* Картата е широка лента отгоре, офисите — редица отдолу.
   Преди картата стоеше в лявата колона на грид и се разтягаше до височината на
   списъка (измерено 1792 px), докато мозайката покриваше само ±420 px около
   центъра. Отдолу оставаше 592 px празно поле. Тази подредба няма как да
   разсинхронизира двете височини, защото не ги свързва. */
.locator {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.locator__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}
@media (max-width: 860px) { .locator__list { grid-template-columns: 1fr; } }

.omap {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  /* Определена височина. Мозайката покрива ±740 px хоризонтално и ±250 px
     вертикално, така че контейнерът не бива да надхвърля тези стойности. */
  height: clamp(17rem, 26vw, 25rem);
}
@media (max-width: 860px) { .omap { height: 15rem; } }

/* На тесен екран надписът до пина изнася кутията на бутона извън картата
   (измерено: десен ръб 405 px при екран 390 px и контейнер 348 px). Кой офис
   е избран се вижда от картона точно отдолу, затова надписът отпада и остава
   само точката. */
@media (max-width: 720px) {
  .omap__pin-label { display: none; }
  .omap__pin { padding: .7rem; }
}
/* Плочките и пиновете се закачат за центъра на контейнера; PHP подава само
   пикселното отместване спрямо него като margin. */
.omap__tile {
  position: absolute;
  left: 50%; top: 50%;
  display: block;
  /* Обезцветени, за да не спорят с типографията на страницата. */
  filter: grayscale(1) contrast(.92) brightness(1.04);
}

.omap__pin {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border: 0; background: none;
  /* Точката е 13px; отстъпът вдига целта до 44px, колкото иска пръстът. */
  padding: .95rem;
  display: grid; place-items: center;
  z-index: 2;
}
.omap__pin-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.omap__pin--main .omap__pin-dot { background: var(--accent); border-color: var(--dark); }
.omap__pin-label {
  position: absolute;
  bottom: calc(100% - .2rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--t-label);
  font-weight: 500;
  padding: .25rem .5rem;
  background: var(--dark);
  color: var(--white);

  /* Скрит с visibility, НЕ само с opacity.
     При opacity: 0 текстът формално си остава видим за проверяващите
     инструменти и те го измерват по средата на прехода: бяло върху тъмно,
     смесено с фона, дава 1.7:1 вместо реалните над 12:1. Lighthouse го
     хвана два пъти от три на страница „Контакти“.
     visibility: hidden изважда етикета от сметката, докато наистина не се
     покаже, а преходът остава плавен, защото visibility се превключва в
     края на анимацията при скриване и в началото при показване. */
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
  pointer-events: none;
}
.omap__pin:hover .omap__pin-dot,
.omap__pin[data-active] .omap__pin-dot { transform: scale(1.35); background: var(--accent); }
.omap__pin:hover .omap__pin-label,
.omap__pin[data-active] .omap__pin-label,
.omap__pin:focus-visible .omap__pin-label {
  visibility: visible;
  opacity: 1;
  transition: opacity .3s var(--ease), visibility 0s;
}

/* Етикетът на ИЗБРАНИЯ офис се появява мигновено, без избледняване.
   Той не е реакция на посочване, а състояние на страницата — стои видим от
   самото зареждане. Плавното му появяване значи, че за части от секундата
   текстът е полупрозрачен, тоест под изисквания контраст; Lighthouse го
   улавя точно тогава (измерено 3.79:1 при преход, при пълна плътност е над
   12:1). Избледняването остава само за посочване и фокус, където е реакция
   на действие и текстът не е част от съдържанието в покой. */
.omap__pin[data-active] .omap__pin-label { transition: none; }

.omap__credit {
  position: absolute; right: 0; bottom: 0; z-index: 3;
  margin: 0; padding: .2rem .5rem;
  font-size: 10px;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  color: var(--ink-3);
}
.omap__credit a { color: inherit; }

.office-card {
  background: var(--paper);
  padding: clamp(1.25rem, .9rem + 1.4vw, 2rem);
  display: flex; flex-direction: column; gap: 1rem;
  transition: background-color .35s var(--ease);
}
.band--white .office-card { background: var(--white); }
.office-card[data-active] { background: var(--accent-wash); }
.office-card__photo { margin: 0 0 .25rem; overflow: hidden; }
.office-card__photo img { width: 100%; height: 9rem; object-fit: cover; display: block; }
.office-card__name { margin-block: .35rem .3rem; }
.office-card__addr { font-size: var(--t-sm); color: var(--ink-2); }
.office-card__hours { font-size: var(--t-sm); color: var(--ink-3); }
.office-card__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }

.pill-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .8rem;
  font-size: var(--t-label);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pill-btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pill-btn svg { flex-shrink: 0; }
.pill-btn--viber { border-color: var(--accent-text); color: var(--accent-text); }
.pill-btn--viber:hover { background: var(--accent); color: var(--white); border-color: var(--accent-text); }

.map-frame {
  border: 1px solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
  filter: grayscale(1) contrast(.95);
  transition: filter .6s var(--ease);
}
.map-frame:hover { filter: none; }
.map-frame iframe { display: block; width: 100%; height: clamp(20rem, 34vw, 30rem); border: 0; }

/* --------------------------------------------------------------------------
   15. Контактна лента и футър
   -------------------------------------------------------------------------- */

/* Двете колони се центрират една спрямо друга — иначе късата колона с
   контактите оставя голяма дупка под бутоните. */
.closer .split { align-items: center; }
.closer__title { max-width: 18ch; margin-bottom: 1.5rem; }
.closer__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }

.contact-rows { display: flex; flex-direction: column; }
.contact-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.15rem;
  border-top: 1px solid var(--line-dark-soft);
  text-decoration: none;
  transition: padding-left .4s var(--ease), color .3s var(--ease);
}
.contact-row:last-child { border-bottom: 1px solid var(--line-dark-soft); }
.contact-row:hover { padding-left: .6rem; color: var(--accent-lift); }
.contact-row__l { font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.contact-row__v { font-family: var(--sans); font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem); }

@media (max-width: 560px) {
  .closer__actions { flex-direction: column; align-items: stretch; }
}

.footer { background: var(--dark); color: var(--white); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
}
.footer__about { font-size: var(--t-sm); color: rgba(255, 255, 255, .55); max-width: 22rem; margin-top: 1.5rem; }
.footer__h { margin-bottom: 1.5rem; }
.footer__list { list-style: none; padding: 0; display: flex; flex-direction: column; }
.footer__list a {
  display: inline-block;
  padding-block: .5rem;
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .68);
  text-decoration: none;
  transition: color .3s var(--ease);
}
.footer__list a:hover { color: var(--accent-lift); }

.footer__group {
  display: flex; align-items: baseline; gap: 1rem 2.5rem; flex-wrap: wrap;
  padding-block: 1.75rem;
  border-top: 1px solid var(--line-dark-soft);
  font-family: var(--sans);
  font-size: 1.0625rem;
}
.footer__group-names { display: flex; flex-wrap: wrap; gap: .4rem 2.25rem; }

.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem 2rem;
  padding-block: 1.75rem 2.5rem;
  border-top: 1px solid var(--line-dark-soft);
  font-size: var(--t-label);
  color: rgba(255, 255, 255, .56);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }

/* Данните за фирмата. Отделен блок, а не един ред: при 360 px трите стойности
   се пренасяха посред думата и „ЕИК 204803226“ се озоваваше на два реда.
   <address> е и правилният елемент за контакт на издателя на страницата. */
.footer__impressum {
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem;
  padding-block: 1.5rem 0;
  font-style: normal;
  font-size: var(--t-label);
  color: rgba(255, 255, 255, .62);
}
.footer__impressum strong { color: rgba(255, 255, 255, .86); font-weight: 500; }
.footer__impressum a { color: inherit; }
.footer__impressum a:hover { color: var(--white); }

.footer__legal a { display: inline-block; padding-block: .5rem; text-decoration: none; transition: color .3s var(--ease); }
.footer__legal a:hover { color: var(--white); }

.socials { display: flex; gap: .6rem; margin-top: 1.5rem; }
.social {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--line-dark);
  color: var(--white);
  text-decoration: none;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.social:hover { background: var(--white); color: var(--dark); border-color: var(--white); }

@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   16. Вътрешни страници
   -------------------------------------------------------------------------- */

.page-head { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

/* ---- Заглавен блок със снимка ------------------------------------------ */

.page-head--shot {
  position: relative;
  isolation: isolate;
  padding-top: clamp(3rem, 2rem + 5vw, 7rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  overflow: clip;
}
.page-head__bg { position: absolute; inset: 0; z-index: -2; }
/* ⚠ <picture> по подразбиране е inline. Тогава height:100% на <img> вътре няма
   спрямо какво да се изчисли, картинката застава в естествената си височина и
   object-fit/object-position нямат ефект — рамката просто отрязва горната ѝ
   част. Точката на фокус от CMS-а мълчаливо спираше да работи. Същото беше
   поправено и при .showcase__bg. */
.page-head__bg picture { display: block; height: 100%; }
.page-head__img {
  width: 100%; height: 100%; object-fit: cover;
  /* Беше saturate(.55) — снимките излизаха избелели и всички страници
     изглеждаха еднакво плоски. Сега кадърът остава кадър; четимостта се
     решава от локалния слой под текста, не от миене на цялата снимка. */
  filter: saturate(.92) contrast(1.06);
}

/* Общият слой е лек и служи само за преливане към хартията отдолу. */
/* Воалът има ЕДНА задача: да слее долния ръб на снимката със страницата.
   Горните 30% хартия ги нямаше защо — те само избеляваха кадъра, а върху
   светла снимка това се вижда като мъгла. Долната част остава. */
.page-head__veil {
  /* Без преливане към долната секция. Воалът само леко приглушава кадъра,
     равномерно, за да не спори с текста — не рисува преход надолу. */
  position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--paper) 14%, transparent);
}

/* Локалният панел под текста поема контраста. Свършва там, където свършва
   текстът, така че дясната част на кадъра остава чиста снимка. */
.page-head--shot .page-head__inner { position: relative; }
.page-head--shot .page-head__inner::before {
  content: '';
  position: absolute;
  inset: calc(var(--pad) * -.6) 27% calc(var(--pad) * -.6) calc(var(--pad) * -1);
  z-index: -1;

  /* ⚠ ПРАВИЛОТО ЗА ТОЗИ ПАНЕЛ — прочети, преди да го пипнеш.
     Избледняване има САМО по десния ръб и САМО по хоризонтала.
     Отляво, отгоре и отдолу белият фон е плътен и ръбът е рязък.

     Затова тук НЯМА:
       · ъгъл, различен от „to right“ — 100deg внасяше вертикална съставка
         и панелът избледняваше и надолу;
       · box-shadow — размитата сянка създава ореол по всички ръбове;
       · mask-image — маската изтриваше горе и долу;
       · radial-gradient.

     Плътно до 76% от ширината, после угасване в последната четвърт. */
  background: linear-gradient(to right,
    var(--paper) 0%,
    var(--paper) 76%,
    color-mix(in srgb, var(--paper) 82%, transparent) 86%,
    color-mix(in srgb, var(--paper) 42%, transparent) 94%,
    transparent 100%);
}



/* Вариант с navy панел — за страници, чиято снимка е твърде светла, за да
   удържи тъмен текст (светъл overlay върху светъл кадър = нищо не се чете). */
.page-head--dark .page-head__img { filter: saturate(.8) contrast(1.05) brightness(.62); }
.page-head--dark .page-head__veil {
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--dark) 88%, transparent) 0%,
      color-mix(in srgb, var(--dark) 62%, transparent) 58%,
      color-mix(in srgb, var(--dark) 28%, transparent) 100%),
    linear-gradient(to bottom, transparent 70%, var(--paper) 100%);
}
.page-head--dark .page-head__inner::before { display: none; }
.page-head--dark .page-head__title,
.page-head--dark .crumbs span { color: var(--white); }
.page-head--dark .lede { color: rgba(255, 255, 255, .78); }
.page-head--dark .crumbs a { color: rgba(255, 255, 255, .6); }

@media (max-width: 900px) {
  /* На тесен екран текстът не стои върху снимката. */
  .page-head--shot .page-head__inner::before { display: none; }
  .page-head__veil {
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, var(--paper) 55%, transparent) 0%,
        color-mix(in srgb, var(--paper) 92%, transparent) 28%,
        var(--paper) 48%);
  }
  .page-head--dark .page-head__veil {
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, var(--dark) 72%, transparent) 0%,
        color-mix(in srgb, var(--dark) 92%, transparent) 34%,
        var(--dark) 52%);
  }
  .page-head--dark { background: var(--dark); }
}

/* ---- Фото рейл: една голяма и стълб от по-малки --------------------- */

/* Голямата снимка заема 8 от 12 колони; двете по-малки застъпват нейния ръб и
   висят на различна височина. Правилна редица от еднакви правоъгълници се чете
   като галерия на продукт; разместената се чете като разтвор на списание. */
.rail {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  /* Стълбът виси по-ниско от голямата снимка — без този отстъп надписът му
     опира в следващия блок. */
  margin-bottom: clamp(2rem, 1.2rem + 3vw, 4rem);
}
.rail__lead {
  margin: 0; position: relative;
  grid-column: 1 / span 8;
  grid-row: 1;
  z-index: 1;
}
.rail__lead .rail__img { aspect-ratio: 4 / 3; }

.rail__stack {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  /* Стълбът започва точно там, където свършва голямата снимка (линия 9), а
     застъпването идва САМО от отрицателния отстъп. Преди стоеше на линия 8 и
     към това се добавяше и отстъпът — двете заедно даваха над 140 px застъпване
     и надписът на малката снимка падаше върху голямата. */
  grid-column: 9 / span 4;
  grid-row: 1;
  margin-left: clamp(-56px, -3.2vw, -32px);
  margin-top: clamp(1.5rem, 1rem + 2.4vw, 3.5rem);
  z-index: 2;
}
.rail__item { margin: 0; position: relative; }
.rail__item .rail__img { aspect-ratio: 3 / 2; }

/* Втората малка снимка е отместена навътре и надолу — редицата не е колона. */
.rail__item:nth-child(2) { margin-left: clamp(1.5rem, 3vw, 3.5rem); }
.rail__item:nth-child(3) { margin-left: clamp(-2rem, -2vw, -.75rem); }

.rail__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: var(--paper-2);
}
.rail__lead .rail__img { box-shadow: 0 24px 48px -34px rgba(26, 35, 50, .5); }
.rail__item .rail__img {
  box-shadow: 0 1px 2px rgba(26,35,50,.14), 0 18px 36px -26px rgba(26, 35, 50, .5);
}

/* Надписът стои ПОД снимката и е отместен — не запушва кадъра с градиент. */
.rail figcaption {
  margin-top: .7rem;
  position: relative;
  font-size: var(--t-label);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}

/* Стълбът със снимки застъпва голямата снимка отляво. Ако надписът тръгва от
   левия ръб на стълба, той ляга ВЪРХУ фотографията и става нечетим. Затова
   надписите на малките кадри са подравнени вдясно, извън застъпването. */
.rail__item figcaption {
  padding-right: 1.25rem;
  text-align: right;
}
.rail__item figcaption::after {
  content: '';
  position: absolute; right: 0; top: .55em;
  width: .8rem; height: 1px; background: var(--accent);
}

.rail__lead figcaption { padding-left: 1.25rem; margin-left: clamp(1rem, 2vw, 2.5rem); }
.rail__lead figcaption::before {
  content: '';
  position: absolute; left: 0; top: .55em;
  width: .8rem; height: 1px; background: var(--accent);
}

@media (max-width: 900px) {
  /* Хоризонтален рейл, управляван с пръст. Без автоматично движение. */
  .rail {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    padding-bottom: .5rem;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__lead, .rail__item { flex: 0 0 78%; scroll-snap-align: start; }
  .rail__lead, .rail__item,
  .rail__item:nth-child(2), .rail__item:nth-child(3) { margin: 0; }
  .rail__stack { display: contents; }
  .rail__lead .rail__img, .rail__item .rail__img { aspect-ratio: 4 / 3; }
  /* В хоризонталния рейл няма застъпване — всички надписи са отляво. */
  .rail__lead figcaption { margin-left: 0; padding-left: 1.25rem; }
  .rail__item figcaption { text-align: left; padding-right: 0; padding-left: 1.25rem; }
  .rail__item figcaption::after { display: none; }
  .rail__item figcaption::before {
    content: '';
    position: absolute; left: 0; top: .55em;
    width: .8rem; height: 1px; background: var(--accent);
  }
}

/* Подсказка, че рейлът се влачи — само на сензорни екрани. */
.rail-hint {
  display: none;
  margin-top: .75rem;
  font-size: var(--t-label);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) and (pointer: coarse) { .rail-hint { display: block; } }

/* ---- Схема на клиентската платформа --------------------------------- */

.mock {
  position: relative;
  background: var(--dark);
  border: 1px solid var(--line);
  padding: 1rem;
  color: var(--white);
}
.mock__bar { display: flex; align-items: center; gap: .4rem; padding-bottom: .75rem; }
.mock__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.mock__url {
  margin-left: .5rem; font-size: var(--t-label);
  /* .45 върху navy дава 4.31:1 — под AA за дребен текст. */
  color: rgba(255, 255, 255, .58); letter-spacing: .06em; text-transform: uppercase;
}
.mock__body { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
.mock__side { display: flex; flex-direction: column; gap: .3rem; }
.mock__nav {
  font-size: var(--t-label); padding: .4rem .55rem;
  color: rgba(255, 255, 255, .55); border-left: 2px solid transparent;
}
.mock__nav.is-on { color: var(--white); background: rgba(255, 255, 255, .06); border-left-color: var(--accent); }
.mock__main { display: flex; flex-direction: column; gap: .9rem; }
.mock__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mock__label { font-size: var(--t-label); color: rgba(255, 255, 255, .5); letter-spacing: .06em; text-transform: uppercase; }
.mock__figure { font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; }
.mock__chart { display: flex; align-items: flex-end; gap: .35rem; height: 4.5rem; }
.mock__chart span { flex: 1; background: linear-gradient(to top, var(--accent), rgba(200, 164, 86, .35)); }
.mock__list { display: flex; flex-direction: column; gap: .45rem; }
.mock__list span {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--t-label); color: rgba(255, 255, 255, .62);
  padding-top: .45rem; border-top: 1px solid var(--line-dark-soft);
}
.mock__list i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

.mock__phone {
  position: absolute; right: -1rem; bottom: -1.5rem;
  width: 7.5rem; padding: .7rem .6rem;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 16px 34px -18px rgba(26, 35, 50, .5);
  display: flex; flex-direction: column; gap: .45rem;
}
.mock__phone-bar { height: 3px; width: 2rem; background: var(--line); }
.mock__phone-fig { font-size: 1.0625rem; font-weight: 500; }
.mock__phone-btn {
  font-size: var(--t-label); text-align: center;
  background: var(--dark); color: var(--white); padding: .35rem;
}

@media (max-width: 620px) {
  .mock__body { grid-template-columns: 1fr; }
  .mock__side { flex-direction: row; flex-wrap: wrap; }
  .mock__phone { position: static; width: auto; margin-top: 1rem; box-shadow: none; }
}
.page-head__title { max-width: 18ch; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.page-head__title--long { max-width: 26ch; }

.crumbs { display: flex; gap: .6rem; font-size: var(--t-label); color: var(--ink-3); margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); letter-spacing: .06em; text-transform: uppercase; }
.crumbs a { text-decoration: none; transition: color .3s var(--ease); }
.crumbs a:hover { color: var(--accent-text); }

/* Текстов блок */
.prose { max-width: 40rem; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  letter-spacing: -0.02em; line-height: 1.15;
  margin-top: 2.6em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--sans); font-weight: 400; font-size: 1.25rem; margin-top: 1.9em; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.7; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose ul, .prose ol { padding-left: 1.15em; display: flex; flex-direction: column; gap: .55em; }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* Акордеон */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-block: clamp(1.1rem, .9rem + .8vw, 1.6rem);
  border: 0; background: none; text-align: left;
  font-family: var(--sans);
  font-size: clamp(1.0625rem, .98rem + .4vw, 1.3125rem);
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.acc__btn:hover { color: var(--accent-text); }
.acc__sign { position: relative; width: 13px; height: 13px; flex-shrink: 0; align-self: center; }
.acc__sign::before,
.acc__sign::after {
  content: ''; position: absolute; background: currentColor;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.acc__sign::before { top: 6px; left: 0; width: 13px; height: 1.5px; }
.acc__sign::after { left: 6px; top: 0; width: 1.5px; height: 13px; }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: rotate(90deg); opacity: 0; }

.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.acc__btn[aria-expanded="true"] + .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner > * { padding-bottom: 1.75rem; max-width: 44rem; color: var(--ink-2); }
.acc__inner ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: .6em; }

/* Формуляр */
/* grid-template-columns: minmax(0, 1fr) е задължителен: по подразбиране
   единствената колона е auto и се разтяга до max-content на най-широкото поле.
   Формата остава 350 px, но редовете вътре ставаха 424 px и разпъваха
   документа. */
.form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 38rem;
  width: 100%;
}
.form > * { min-width: 0; }
/* Полетата не бива да диктуват ширината на колоната си. */
.field, .field input, .field select, .field textarea { min-width: 0; max-width: 100%; }
/* minmax(0, 1fr), не 1fr: минималният размер на грид колона е auto, а
   вътрешната ширина на едно <input> при увеличен текст надхвърля екрана. */
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

.field { display: flex; flex-direction: column; min-width: 0; }
.field input, .field select, .field textarea { min-width: 0; max-width: 100%; }
.field__label { font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .55rem; }
.field__label span { color: var(--accent-text); }
.field input,
.field select,
.field textarea {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: .65rem 0;
  transition: border-color .3s var(--ease);
}
/* Стрелка за падащото меню — вградена, за да няма мрежова заявка. */
.field select {
  appearance: none;
  padding-right: 1.75rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236b6a62' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .25rem center;
}
.field select:focus { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%239a7434' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-bottom-color: var(--accent-text); border-bottom-width: 1.5px;
}
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }
.field--error input, .field--error select, .field--error textarea { border-bottom-color: var(--err); }
.field__err { font-size: var(--t-sm); color: var(--err); margin-top: .45rem; }
.field__hint { font-size: var(--t-sm); color: var(--ink-3); margin-top: .45rem; }

/* Зона за прикачване. Input-ът покрива цялата зона, за да работят и клик,
   и drag-and-drop без допълнителен JS. */
.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  gap: .4rem;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem) 1.25rem;
  border: 1px dashed var(--line-2, rgba(20, 23, 26, .25));
  text-align: center;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.dropzone:hover, .dropzone:focus-within { border-color: var(--accent-text); background: var(--accent-wash); }
.dropzone input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.dropzone__icon { color: var(--accent-text); }
.dropzone__text { font-size: var(--t-sm); font-weight: 500; }
.dropzone__hint { font-size: var(--t-label); color: var(--ink-3); line-height: 1.5; }

.dropzone__list { list-style: none; padding: 0; margin-top: .75rem; display: grid; gap: .35rem; }
.dropzone__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: var(--t-sm);
  padding-block: .4rem;
  border-bottom: 1px solid var(--line-soft);
}
.dropzone__list .size { color: var(--ink-3); font-size: var(--t-label); flex-shrink: 0; }
.dropzone__list .bad { color: var(--err); }

.note { padding: 1.1rem 1.3rem; font-size: var(--t-sm); line-height: 1.55; border-left: 2px solid; }
.note--ok { background: rgba(74, 122, 82, .07); border-color: var(--ok); color: #2f5735; }
.note--err { background: rgba(157, 70, 53, .07); border-color: var(--err); color: #7c3729; }

/* Промоции */
.promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.promo {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.25rem, .8rem + 1.5vw, 2rem);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .5rem;
}
.promos { border-bottom: 1px solid var(--line); }
.promo:last-child { border-right: 1px solid var(--line); }
.promo__pct {
  font-family: var(--sans);
  font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  line-height: .9; letter-spacing: -0.04em;
  color: var(--accent-text);
  margin-bottom: .6rem;
}
.promo__link { margin-top: auto; padding-top: 1.5rem; }
@media (max-width: 720px) { .promo { border-right: 1px solid var(--line); } }

/* Празно състояние */
.empty { max-width: 32rem; }

/* --------------------------------------------------------------------------
   17. Банер за съгласие
   -------------------------------------------------------------------------- */

/* Уведомление за бисквитки — лента В ПОТОКА, най-отгоре.
   Плаващ панел по дефиниция ляга върху това, което се е паднало под него:
   автоматичният скенер го хвана върху бутоните в hero-то, върху дървото с
   услугите и върху картите с пакетите — според ширината и позицията на скрола.
   Лента в потока избутва съдържанието надолу и не закрива нищо, при никаква
   ширина и при никакъв скрол. */
.consent {
  background: var(--dark);
  color: var(--white);
  /* Свиването при затваряне е анимирано, за да няма рязък скок. */
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .35s var(--ease);
}
.consent[data-show="false"] { grid-template-rows: 0fr; }

/* Изборът е направен при предишно посещение — лентата не се рисува изобщо.
   Класът идва от вграден скрипт в <head>, преди първото рисуване. */
.has-consent .consent { display: none; }

.consent__inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: .7rem;
}
.consent[data-show="false"] .consent__inner { padding-block: 0; }

.consent__text {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: rgba(255, 255, 255, .82);
  min-width: 0;
}
.consent__text a { color: var(--accent-lift); text-underline-offset: .18em; }

.consent__acts { margin-left: auto; flex-shrink: 0; }
.consent__btn {
  border: 1px solid var(--line-dark);
  background: none;
  color: var(--white);
  font: inherit;
  font-size: var(--t-sm);
  padding: .45em 1.2em;
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.consent__btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }

@media (max-width: 640px) {
  .consent__inner { flex-direction: column; align-items: stretch; gap: .5rem; padding-block: .65rem; }
  .consent__text { font-size: .8125rem; }
  .consent__acts { margin-left: 0; }
  .consent__btn { width: 100%; min-height: 44px; }
}

/* Лентата е в потока — няма какво да се резервира и няма върху какво да ляга. */

/* --------------------------------------------------------------------------
   17а. Снимки
   -------------------------------------------------------------------------- */

.figure { margin: 0; overflow: hidden; background: var(--paper-2); }
.figure__img { width: 100%; height: auto; display: block; }

/* Широката снимка е на цялата ширина на екрана, но с ограничена височина,
   за да не изтласква съдържанието под сгъвката. */
.figure--wide { border-block: 1px solid var(--line); }
.figure--wide .figure__img {
  height: clamp(16rem, 42vw, 34rem);
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   17б. Зона за докосване
   -------------------------------------------------------------------------- */

/* На сензорен екран някои връзки са визуално ниски (лого, текстова връзка с
   подчертаване, заглавие в дървото). Уголемяваме само областта за натискане с
   псевдоелемент — така подчертаването и разредката остават на място. */
@media (pointer: coarse) {
  /* Текстовите връзки остават с типографската си височина, но зоната за
     докосване се разширява с псевдоелемент — иначе или буквите растат, или
     пръстът не улучва. */
  .logo, .link, .tree__root, .menu__sub,
  .footer__list a, .footer__legal a, .crumbs a { position: relative; }
  .logo::after,
  .link::after,
  .tree__root::after,
  .menu__sub::after,
  .footer__list a::after,
  .footer__legal a::after,
  .crumbs a::after {
    content: '';
    position: absolute;
    inset: -12px -6px;
  }

  /* Истинските бутони обаче стават наистина по-високи: 44 px е минимумът,
     под който улучването се превръща в лотария. */
  .btn { min-height: 44px; }
  .pill-btn { min-height: 44px; padding-block: .55rem; }
  .acc__btn, .svc-branch__head { min-height: 48px; }
  .fileitem__x { min-width: 44px; min-height: 44px; }
  .social { min-width: 44px; min-height: 44px; }
  .omap__pin { min-width: 44px; min-height: 44px; }
  .crumbs a::after { inset: -14px -8px; }
}

/* --------------------------------------------------------------------------
   18. Разкриване при скрол — фино, само веднъж
   -------------------------------------------------------------------------- */

/* ПРОГРЕСИВНО ОБОГАТЯВАНЕ.
   Скриването е ограничено до .js — класът се поставя от вграден скрипт в <head>
   още преди първото рисуване. Без JavaScript, при грешка в скрипта или когато
   IntersectionObserver не сработи (screenshot инструмент, много бърз скрол),
   съдържанието просто си стои видимо. Скриване, което зависи от JS, за да се
   отмени, е начин съдържанието да изчезне завинаги. */
@media (prefers-reduced-motion: no-preference) {
  /* Разкриването е САМО преместване, без избледняване.
     Текст на частична непрозрачност пада под AA: измерено 3.36:1 за карта с
     услуга, 3.92:1 за стъпка от разказа, 4.03:1 за ред от указателя. А докато
     блокът не е влязъл в екрана, той стои точно в това състояние. Движението
     без прозрачност дава същия ефект и не пипа контраста. */
  .js [data-reveal] {
    transform: translateY(18px);
    transition: transform .6s var(--ease);
  }
  .js [data-reveal].is-in { transform: none; }

  /* Каскада на hero текста. Задейства се, щом body получи data-ready. */
  .js [data-stagger] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
  }
  .js body[data-ready="true"] [data-stagger],
  body[data-ready="true"] [data-stagger] { opacity: 1; transform: none; }

  [data-parallax] { will-change: transform; }

  /* Маска отдолу нагоре — изображението се „изтегля“, не изскача. */
  .js [data-mask] .rail__img,
  .js [data-mask] .figure__img,
  .js [data-mask] .shot__img {
    clip-path: inset(0 0 100% 0);
    transition: clip-path .85s var(--ease), transform .85s var(--ease);
    transform: scale(1.04);
  }
  .js [data-mask].is-in .rail__img,
  .js [data-mask].is-in .figure__img,
  .js [data-mask].is-in .shot__img {
    clip-path: inset(0 0 0 0);
    transform: none;
  }

  /* Дискретен hover: увеличение до 1.03 и повдигане до 4 px. */
  .pkg { transition: background-color .2s var(--ease), transform .25s var(--ease); }
  .pkg:hover { transform: translateY(-4px); }
  .pkg__shot { overflow: hidden; }
  .pkg:hover .pkg__img,
  .cx-shot:hover .cx-shot__img,
  .rail__item:hover .rail__img,
  .rail__lead:hover .rail__img { transform: scale(1.03); }
  .pkg__img, .cx-shot__img, .rail__img { transition: transform .5s var(--ease); }

  /* Стрелката в CTA се придвижва с 3 px. */
  .btn svg, .link svg, .pkg__more svg { transition: transform .25s var(--ease); }
  .btn:hover svg, .link:hover svg, .pkg:hover .pkg__more svg { transform: translateX(3px); }

  /* Кратко избледняване при влизане в страница. */
  body { animation: page-in .2s var(--ease) both; }
  @keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
}

/* Без движение: всичко е видимо веднага и нищо не се движи. */
@media (prefers-reduced-motion: reduce) {
  [data-stagger], [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-parallax] { transform: none !important; }
  [data-mask] .rail__img, [data-mask] .figure__img, [data-mask] .shot__img {
    clip-path: none !important; transform: none !important;
  }
  .pkg:hover, .rail__item:hover .rail__img, .rail__lead:hover .rail__img,
  .pkg:hover .pkg__img, .cx-shot:hover .cx-shot__img { transform: none !important; }
  .btn:hover svg, .link:hover svg, .pkg:hover .pkg__more svg { transform: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   18. Печат
   -------------------------------------------------------------------------- */

@media print {
  .header, .footer, .menu, .closer, .map-frame, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .band, .band--lg { padding-block: 12pt; }
  .acc__panel { grid-template-rows: 1fr !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }
}

/* --------------------------------------------------------------------------
   19. Ревизия: разчупен ритъм
   --------------------------------------------------------------------------
   Проблемът, който тези класове решават: след hero-то всички секции бяха
   светли правоъгълници с еднакво отстояние и заглавие горе вляво. Дори добро
   съдържание в такъв ритъм се чете като каталог. Тук идват композициите със
   застъпване, вертикалните етикети и тъмните паузи между светлите блокове.
   -------------------------------------------------------------------------- */

/* ---- Вертикален етикет на секция ---------------------------------------- */
/* Стои в лявото поле, завъртян. На тесен екран отпада, защото завъртян текст
   в 390 px просто отнема ширина. */

.band--marked { position: relative; }
.vlabel {
  position: absolute;
  left: calc(var(--pad) * .28);
  top: var(--y-md);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: center;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  pointer-events: none;
}
.vlabel::after {
  content: '';
  display: block;
  width: 1px; height: 3rem;
  margin: .9rem auto 0;
  background: linear-gradient(var(--accent), transparent);
}
.band--dark .vlabel { color: rgba(255, 255, 255, .5); }

@media (max-width: 1180px) { .vlabel { display: none; } }

/* ---- Асиметрични композиции 7/5 и 5/7 ----------------------------------- */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.duo--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.duo--top { align-items: start; }

/* Изображението застъпва текстовата колона с 32–56 px — ръбът на композицията
   спира да съвпада с ръба на текста и окото има за какво да се хване. */
.duo__shot { position: relative; margin: 0; }
.duo__shot .shot__img {
  width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 4 / 3;
  box-shadow: 0 1px 2px rgba(26, 35, 50, .14), 0 26px 52px -34px rgba(26, 35, 50, .5);
}
.duo:not(.duo--flip) .duo__shot { margin-right: clamp(-56px, -3vw, -32px); z-index: 1; }
.duo--flip .duo__shot { margin-left: clamp(-56px, -3vw, -32px); z-index: 1; }
.duo__body { position: relative; z-index: 2; }

.duo__cap {
  margin-top: .75rem;
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Отместен надпис — не е центриран под снимката, а изнесен навън. */
.duo:not(.duo--flip) .duo__cap { margin-left: clamp(1rem, 3vw, 3rem); }
.duo--flip .duo__cap { text-align: right; margin-right: clamp(1rem, 3vw, 3rem); }

@media (max-width: 900px) {
  .duo, .duo--flip { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  /* Селекторите трябва да са със същата тежест като горните
     `.duo:not(.duo--flip) .duo__shot`, иначе отрицателният отстъп оцелява и
     на телефон — снимката излиза 32 px извън екрана. */
  .duo:not(.duo--flip) .duo__shot,
  .duo--flip .duo__shot { margin: 0; }
  .duo--flip .duo__cap { text-align: left; margin-right: 0; }
  .duo:not(.duo--flip) .duo__cap { margin-left: 0; }
  /* На мобилно снимката винаги идва първа — контекст, после текст. */
  .duo__shot { order: -1; }
}

/* ---- Пълноекранна фотографска секция ------------------------------------ */
/* Една на страница. Ролята ѝ е да прекъсне редицата от светли блокове —
   не да покаже поредната снимка. */

.showcase {
  position: relative;
  isolation: isolate;
  min-height: clamp(22rem, 52vh, 34rem);
  display: grid;
  align-items: end;
  overflow: clip;
  color: var(--white);
}
.showcase__bg { position: absolute; inset: 0; z-index: -2; }

/* ⚠ <picture> ТРЯБВА да е високо 100%, иначе следващият ред не работи.
   „height: 100%“ на изображението се смята спрямо родителя му, а родителят е
   <picture> с автоматична височина. Резултатът: изображението остава високо
   колкото самия кадър (894 px в лента от 520 px), object-fit няма какво да
   свие и секцията просто отрязва долната част — виждаше се само небето.
   Същият капан вече беше поправен при картите с услуги. */
.showcase__bg picture { display: block; height: 100%; }

.showcase__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.06) saturate(.95);
}
/* Завесата е двойна и насочена.
   Кадърът е Пловдив по залез: интересното е горе вдясно — тепетата и небето.
   Текстът стои долу вляво. Затова вместо равномерно притъмняване има две
   застъпени завеси: една отдолу нагоре и една отляво надясно. Текстовата
   колоналяга върху плътна основа, а залезът отдясно остава отворен.
   Измерено преди: етикетът „ПЛОВДИВ“ 4.04:1 върху rgb(142,123,107) — под AA
   заради светлото небе точно там. */
.showcase::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right,
      rgba(26, 35, 50, .72) 0%, rgba(26, 35, 50, .46) 42%, rgba(26, 35, 50, 0) 72%),
    linear-gradient(to top,
      rgba(26, 35, 50, .92) 0%, rgba(26, 35, 50, .58) 46%, rgba(26, 35, 50, .24) 100%);
}
@media (max-width: 900px) {
  /* На тесен екран текстът заема цялата ширина — страничната завеса няма
     какво да пази отдясно и само мътни снимката. */
  .showcase::after {
    background: linear-gradient(to top,
      rgba(26, 35, 50, .94) 0%, rgba(26, 35, 50, .68) 52%, rgba(26, 35, 50, .3) 100%);
  }
}
.showcase__inner {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: end;
}
.showcase__title { color: var(--white); max-width: 20ch; margin: 0; }
.showcase .label { color: rgba(255, 255, 255, .74); margin-bottom: 1rem; display: block; }
.showcase__side { color: rgba(255, 255, 255, .8); font-size: var(--t-sm); }
.showcase__cap {
  margin-top: 1.5rem;
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
@media (max-width: 900px) {
  .showcase__inner { grid-template-columns: 1fr; align-items: start; }
}

/* ---- Голям редакционен цитат -------------------------------------------- */

.editorial {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 9fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
}
.editorial__mark { color: var(--accent); line-height: 0; }
.editorial__quote {
  margin: 0;
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.625rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
  font-weight: 400;
  text-wrap: balance;
}
.editorial__quote em { font-style: normal; color: var(--accent-text); }
.editorial__by {
  margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline;
}
.editorial__name { font-weight: 500; }
.editorial__role { font-size: var(--t-sm); color: var(--ink-3); }
.band--dark .editorial__role { color: rgba(255, 255, 255, .66); }
.band--dark .editorial__quote em { color: var(--accent-lift); }
.band--dark .editorial__quote { color: var(--white); }

@media (max-width: 700px) {
  .editorial { grid-template-columns: 1fr; gap: 1rem; }
  .editorial__mark svg { width: 32px; height: 32px; }
}

/* ---- Фотографска история: проблем → действие → резултат ------------------ */

/* auto-fit, а не фиксирани три колони: разказът е ту от три, ту от четири
   кадъра, а редица с празно четвърто място изглежда като липсваща снимка. */
.story {
  display: grid;
  /* min(14rem, 100%): при увеличен текст 14rem става 448 px и колоната
     надхвърля контейнера от 350 px. */
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: clamp(1rem, .5rem + 1.6vw, 2rem);
  counter-reset: story;
}
.story--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story__step { margin: 0; position: relative; counter-increment: story; }
/* Стъпките висят на различна височина — редицата не е права линия. */
.story__step:nth-child(2) { margin-top: clamp(1.5rem, 3vw, 3.5rem); }
.story__step:nth-child(3) { margin-top: clamp(.5rem, 1.5vw, 1.75rem); }

.story__shot { position: relative; overflow: hidden; }
.story__shot img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.story__k {
  position: absolute; left: 0; top: 0;
  padding: .45rem .8rem;
  background: var(--dark);
  color: var(--white);
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.story__k::before { content: counter(story, decimal-leading-zero) " · "; color: var(--accent-lift); }
.story__text {
  margin: .9rem 0 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
  max-width: 32ch;
}

@media (max-width: 780px) {
  .story { grid-template-columns: 1fr; gap: 1.75rem; }
  .story__step:nth-child(n) { margin-top: 0; }
  .story__text { max-width: none; }
}

/* ---- Карта: резервен вид, когато плочките не се заредят ------------------ */
/* Плочките идват от чужд сървър. Ако не се заредят, преди се виждаха счупени
   картинки; сега отдолу винаги стои нарисувана мрежа, а пиновете и бутоните
   за навигация продължават да работят. */

.omap__fallback {
  position: absolute; inset: 0; z-index: 0;
  background:
    repeating-linear-gradient(0deg, var(--line-soft) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 32px),
    var(--paper-2);
}
/* ВНИМАНИЕ: тук НЕ бива да се задава position. Плочките се позиционират
   абсолютно спрямо центъра на контейнера (виж .omap__tile по-горе). Когато
   това правило зададе position: relative, те падат в нормалния поток, наредени
   диагонално по маргините си, и картата се разпада на празни петна. */
.omap__tile { z-index: 1; }
.omap--offline .omap__tile { display: none; }

/* Слоят, който се измества при избор на офис.
   На тесен екран се смалява: трите офиса се разстилат на 358 px (±179 от
   центъра), а картата е широка 348 px — крайният пин излизаше извън нея с
   кутията си за докосване. Смаляването свива разстоянието, без да мести
   пиновете спрямо картата. */
.omap { --omap-scale: 1; }
@media (max-width: 720px) { .omap { --omap-scale: .84; } }

.omap__view {
  position: absolute; inset: 0;
  transform: scale(var(--omap-scale));
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .omap__view { transition: transform .5s var(--ease); }
}

/* Активният офис не се маркира само със злато: пинът получава пръстен, име
   и по-голяма точка. Цветът е третият сигнал, не единственият. */
.omap__pin[aria-pressed="true"] .omap__pin-dot {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent);
}
.omap__pin[aria-pressed="true"] .omap__pin-label { opacity: 1; font-weight: 500; }

/* ⚠ Тук стоеше box-shadow: inset 3px 0 0 var(--ink) – тъмна ивица по левия
   ръб на активния картон. Едновременно с нея .office-card::before рисуваше
   златна лента на същото място. Двете се редяха една до друга и изглеждаха
   като дефект: тънка черна черта, залепена за златната.

   Остава само златната лента. Тя е и единственият знак за активност, затова
   се дефинира извън заявката за движение – при „по-малко движение“ просто не
   се анимира, вместо да изчезне. */
.office-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
}
.office-card { position: relative; }
.office-card[data-active]::before { transform: scaleY(1); }
.office-card[data-active] .office-card__name::after {
  content: '';
  display: block;
  width: 2rem; height: 2px;
  margin-top: .5rem;
  background: var(--accent);
}
.omap__note {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  margin: 0;
  max-width: 22rem;
  padding: .9rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-2);
  text-align: center;
}
.omap--offline .omap__note[hidden] { display: block; }

/* ---- Снимка в картона на офиса ------------------------------------------ */

.office-card__photo { margin: 0 0 1rem; overflow: hidden; }
.office-card__img {
  width: 100%; display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.85);
}
.office-card[data-active] .office-card__img { filter: saturate(1); }
.office-card__hours { display: flex; align-items: center; gap: .4rem; }
.office-card__hours svg { flex-shrink: 0; color: var(--ink-3); }

@media (prefers-reduced-motion: no-preference) {
  .office-card__img { transition: transform .5s var(--ease), filter .3s var(--ease); }
  .office-card:hover .office-card__img,
  .office-card[data-active] .office-card__img { transform: scale(1.03); }
  /* Пинът се активира с кратко уголемяване, не с подскок. */
  .omap__pin { transition: transform .3s var(--ease); }
  .omap__pin[data-active] { transform: scale(1.12); }
}

/* ---- По-компактен вертикален ритъм -------------------------------------- */
/* Празните полета между секциите стигаха до 176 px. Съседни секции с еднакъв
   фон се долепят, за да не изглеждат като две отделни. */

.band--md { padding-block: var(--y-md); }
.band--tight { padding-block: var(--y-md); }
.band--flush-top { padding-top: 0; }
.band--flush-bottom { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   20. Формата за сигнал: три стъпки
   --------------------------------------------------------------------------
   Формата беше една непрекъсната колона от девет полета. На телефон това е
   екран и половина скрол, преди да се види бутонът — и най-честата причина
   човек да се откаже и да звънне вместо това.

   Без JavaScript трите fieldset-а стоят един под друг и се изпращат наведнъж.
   Класът .is-wiz се добавя от скрипта и чак тогава те стават стъпки.
   -------------------------------------------------------------------------- */

.wiz__step { border: 0; padding: 0; margin: 0 0 2rem; min-width: 0; }
.wiz.is-wiz .wiz__step { margin-bottom: 0; }
.wiz__legend {
  padding: 0;
  margin-bottom: 1.5rem;
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* Заглавието на стъпката се скрива още преди първото рисуване (клас .js), а не
   когато скриптът се качи и добави .is-wiz. Иначе трите легенди се рисуват,
   после изчезват и цялата секция с формата се измества (измерено CLS 0.091). */
.js .wiz .wiz__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- Лента на напредъка ---- */

.wiz__bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
  counter-reset: none;
}
.wiz__pip {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding-top: .7rem;
  border-top: 2px solid var(--line);
  font-size: var(--t-label);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.wiz__n {
  display: grid;
  place-items: center;
  width: 1.5rem; height: 1.5rem;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}
/* Активната стъпка се отличава по позиция, тегло И цвят — не само по злато. */
.wiz__pip.is-on { border-top-color: var(--ink); color: var(--ink); font-weight: 500; }
.wiz__pip.is-on .wiz__n { border-color: var(--ink); background: var(--ink); color: var(--white); }
.wiz__pip.is-done { border-top-color: var(--accent); color: var(--ink-2); }
.wiz__pip.is-done .wiz__n { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-text); }

@media (max-width: 620px) {
  /* На телефон остава само активната стъпка изписана — другите са само чертички. */
  .wiz__bar { gap: .35rem; }
  .wiz__pip { font-size: 0; gap: 0; padding-top: .55rem; }
  .wiz__pip.is-on { font-size: .6875rem; gap: .45rem; }
  .wiz__n { font-size: .6875rem; width: 1.35rem; height: 1.35rem; }
}

/* ---- Бутоните между стъпките ---- */

.wiz__nav {
  display: flex;
  gap: .75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.wiz__nav .btn--solid { margin-left: auto; }
.wiz.is-sending .wiz__nav .btn { opacity: .6; pointer-events: none; }

@media (max-width: 520px) {
  .wiz__nav { flex-direction: column-reverse; }
  .wiz__nav .btn { width: 100%; justify-content: center; margin-left: 0; }
}

/* ---- Обобщение преди изпращане ---- */

.summary {
  margin-block: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--paper-2);
  border-left: 2px solid var(--accent);
}
.summary__h { display: block; margin: 0 0 1rem; }
.summary__list {
  display: grid;
  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
  gap: .55rem 1.5rem;
  margin: 0;
  font-size: var(--t-sm);
}
.summary__list dt { color: var(--ink-3); }
.summary__list dd { margin: 0; overflow-wrap: anywhere; }
.summary__edit {
  margin-top: 1.25rem;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: var(--t-sm);
  cursor: pointer;
}

@media (max-width: 520px) {
  .summary__list { grid-template-columns: 1fr; gap: .15rem; }
  .summary__list dd { margin-bottom: .6rem; }
}

/* ---- Съгласие ---- */

.check { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; }
.check input {
  flex-shrink: 0;
  width: 1.25rem; height: 1.25rem;
  margin: .15rem 0 0;
  accent-color: var(--navy-900);
}
.check span { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.check a { color: var(--accent-text); }
.check .req { color: var(--err); }
/* Целта за докосване покрива целия ред, не само квадратчето. */
.field--check { padding-block: .5rem; }
.field--check .check { min-height: 44px; align-items: center; }

/* ---- Предупреждение преди формата ---- */

.warn {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  max-width: 40rem;
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  /* Плътно бяло, не 88%. Кутията стои върху заглавната снимка и прозрачните
     12% пропускаха достатъчно от кадъра, за да смъкнат текста до 4.41:1.
     Съобщение за опасност за живота е последното място, на което си струва
     да се вижда снимката отдолу. */
  background: var(--white);
  border-left: 3px solid var(--err);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
.warn__icon { color: var(--err); flex-shrink: 0; line-height: 0; margin-top: .15rem; }
.warn a { color: var(--ink); font-weight: 500; }

/* ---- Списък с прикачени файлове ---- */

.dropzone__list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }

.fileitem {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .55rem .65rem;
  border: 1px solid var(--line);
  background: var(--white);
}
.fileitem.is-bad { border-color: var(--err); }
.fileitem--note {
  justify-content: center;
  border-style: dashed;
  background: none;
  font-size: var(--t-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.fileitem__thumb {
  width: 3rem; height: 3rem;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--paper-2);
}
.fileitem__thumb--doc {
  display: grid; place-items: center;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink-3);
}

.fileitem__meta { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.fileitem__name {
  font-size: var(--t-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fileitem__size { font-size: var(--t-label); color: var(--ink-3); }
.fileitem.is-bad .fileitem__size { color: var(--err); }

.fileitem__x {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0;
  font-size: 1.5rem; line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
}
.fileitem__x:hover { color: var(--err); }

/* ---- Лента на качването ---- */

.uprog {
  position: relative;
  margin-top: .75rem;
  height: 2.25rem;
  background: var(--paper-2);
  overflow: hidden;
}
.uprog__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  background: var(--accent-wash);
  transition: width .2s linear;
}
.uprog__text {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  font-size: var(--t-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.wiz__step[hidden] { display: none; }

/* Стъпките се скриват ПРЕДИ първото рисуване, не след като скриптът се качи.
   Иначе формата се рисува с трите стъпки, после се свива до една и страницата
   подскача (измерено CLS 0.091 на „Подай сигнал“). Правилото важи само докато
   скриптът не е поел — тогава .is-wiz го изключва и hidden командва. */
.js [data-wiz]:not(.is-wiz)[data-open-step="1"] .wiz__step:not([data-step="1"]),
.js [data-wiz]:not(.is-wiz)[data-open-step="2"] .wiz__step:not([data-step="2"]),
.js [data-wiz]:not(.is-wiz)[data-open-step="3"] .wiz__step:not([data-step="3"]) {
  display: none;
}

/* --------------------------------------------------------------------------
   21. Група „Информация“ в настолната навигация
   --------------------------------------------------------------------------
   „Въпроси“ и „Полезно“ се достигаха само през вътрешни връзки. Седем еднакво
   тежки връзки в хедъра обаче се четат като карта на сайта, затова
   справочните страници влизат в една група.
   -------------------------------------------------------------------------- */

.nav__group { position: relative; }

.nav__toggle {
  background: none;
  border: 0;
  font: inherit;
  /* font: inherit нулира и размера - връщаме този на .nav__link. */
  font-size: var(--t-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.nav__toggle svg { transition: transform .2s var(--ease); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Активната група се маркира като активна връзка — подчертаване, не само цвят. */
.nav__toggle[data-current] { color: var(--ink); }
.nav__toggle[data-current]::after,
.nav__toggle[aria-expanded="true"]::after {
  transform: scaleX(1);
}

.nav__panel {
  position: absolute;
  top: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  min-width: 11rem;
  display: grid;
  padding: .5rem;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(26, 35, 50, .1), 0 18px 40px -24px rgba(26, 35, 50, .5);
}
.nav__panel[hidden] { display: none; }

/* Мостче към панела, за да не се затваря, докато показалецът минава разстоянието. */
.nav__group::after {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: .5rem;
}

.nav__sub {
  padding: .6rem .75rem;
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--ink-2);
  white-space: nowrap;
}
.nav__sub:hover { background: var(--paper); color: var(--ink); }
.nav__sub[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Групата е част от настолната навигация; на телефон менюто вече ги показва. */
@media (max-width: 1024px) { .nav__group { display: none; } }

/* При 200% текст на телефон дори „Платформа“ не се побира: хедърът израстваше
   до 506 px при екран от 390 px. Под 22em ефективна ширина остава само
   иконата, а името се пази за екранните четци. */
@media (max-width: 22em) {
  .header__cta-short { display: none; }
  .header__cta { padding-inline: .9em; }
}

/* --------------------------------------------------------------------------
   22. Дълги низове
   --------------------------------------------------------------------------
   Имейл адрес и URL нямат интервали. При увеличен текст „office@arietehome.bg“
   заема 680 px и разпъва целия документ до 700 px на екран от 390 px. Същото
   се случва и на много тесен телефон без увеличение.
   -------------------------------------------------------------------------- */

.entry__title,
.entry__text,
.entry__tags,
.facts dd,
.summary__list dd,
.office-card__addr,
.menu__contact,
.footer a,
.prose a { overflow-wrap: anywhere; }

/* Заглавията се пречупват по дума, а не по буква — иначе се получава каша. */
.display, .h2, .h3, .page-head__title, .showcase__title, .editorial__quote {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   23. <picture> като блок
   --------------------------------------------------------------------------
   По подразбиране <picture> е inline елемент: около него се образува ред с
   височина, взета от шрифта, а не от снимката. Оттам идват и няколкото
   излишни пиксела под всяко изображение, и несигурността колко място да се
   запази, докато файлът се зарежда.
   -------------------------------------------------------------------------- */

picture { display: block; }

.read-progress { display: none; }

/* --------------------------------------------------------------------------
   24. Движение
   --------------------------------------------------------------------------
   Правило номер едно: ТЕКСТЪТ НЕ ИЗБЛЕДНЯВА.
   Буква на 60% прозрачност върху хартия пада под 4.5:1 и остава там, докато
   блокът не влезе в екрана — измерено 3.36:1 при картите с услуги и 3.92:1
   при разказа. Затова текстът се разкрива с маска (clip-path) и преместване:
   или се вижда напълно, или изобщо не се вижда. Прозрачност се ползва само
   там, където няма текст — снимки, икони, декорация.

   Всичко работи през transform, opacity и clip-path — свойства, които не
   карат браузъра да преизчислява оформлението.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Заглавия: разкриване с маска отдолу нагоре -------------------- */

  .js [data-rise] {
    clip-path: inset(0 0 110% 0);
    transform: translateY(14px);
    transition: clip-path .7s var(--ease), transform .7s var(--ease);
  }
  .js [data-rise].is-in { clip-path: inset(0 0 -20% 0); transform: none; }

  /* Каскада вътре в един блок: етикет, заглавие, текст, бутон. */
  .js [data-rise-group] > * {
    clip-path: inset(0 0 110% 0);
    transform: translateY(12px);
    transition: clip-path .6s var(--ease), transform .6s var(--ease);
  }
  .js [data-rise-group].is-in > * { clip-path: inset(0 0 -20% 0); transform: none; }
  .js [data-rise-group].is-in > *:nth-child(1) { transition-delay: 0ms; }
  .js [data-rise-group].is-in > *:nth-child(2) { transition-delay: 90ms; }
  .js [data-rise-group].is-in > *:nth-child(3) { transition-delay: 170ms; }
  .js [data-rise-group].is-in > *:nth-child(4) { transition-delay: 240ms; }
  .js [data-rise-group].is-in > *:nth-child(n+5) { transition-delay: 300ms; }

  /* ---- Тънка линия, която се изтегля ---------------------------------- */

  .js [data-line]::after,
  .js .section-top .head::after {
    transform-origin: left;
  }
  .js [data-line] { --line-scale: 0; }
  .js [data-line].is-in { --line-scale: 1; }

  /* Вертикалният етикет: чертата се изтегля надолу. */
  .vlabel::after { transform: scaleY(0); transform-origin: top; transition: transform .8s var(--ease) .2s; }
  .band--marked.is-in .vlabel::after,
  .js .band--marked .vlabel::after { transform: scaleY(1); }

  /* ---- Икони: изникват с лек мащаб ------------------------------------ */

  .js [data-reveal] .feature__icon,
  .js [data-reveal] .pkg__icon,
  .js [data-reveal] .entry__n {
    opacity: 0;
    transform: scale(.8);
    transition: opacity .45s var(--ease), transform .5s cubic-bezier(.34, 1.56, .64, 1);
  }
  .js [data-reveal].is-in .feature__icon,
  .js [data-reveal].is-in .pkg__icon,
  .js [data-reveal].is-in .entry__n { opacity: 1; transform: none; }

  /* ---- Снимки: маска плюс много лек мащаб ----------------------------- */

  .js [data-mask] .rail__img,
  .js [data-mask] .figure__img,
  .js [data-mask] .shot__img,
  .js [data-mask] .pkg__img {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.05);
    transition: clip-path .9s var(--ease), transform 1.1s var(--ease);
  }
  .js [data-mask].is-in .rail__img,
  .js [data-mask].is-in .figure__img,
  .js [data-mask].is-in .shot__img,
  .js [data-mask].is-in .pkg__img { clip-path: inset(0 0 0 0); transform: none; }

  /* ---- Карти: повдигане и сянка при посочване ------------------------- */

  .pkg { transition: background-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
  .pkg:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(26, 35, 50, .08), 0 22px 40px -28px rgba(26, 35, 50, .55);
  }
  .pkg__shot { overflow: hidden; }
  .pkg:hover .pkg__img { transform: scale(1.03); }
  .pkg__img { transition: transform .6s var(--ease); }

  .entry { transition: background-color .25s var(--ease), padding-left .3s var(--ease); }
  .entry:hover { padding-left: .75rem; }

  .feature { transition: transform .3s var(--ease); }
  .feature:hover { transform: translateY(-3px); }

  /* ---- Бутони: слой, който се плъзва отдолу --------------------------- */

  .btn { position: relative; overflow: hidden; isolation: isolate; }
  .btn::before {
    content: '';
    position: absolute; inset: 0;
    z-index: -1;
    background: currentColor;
    opacity: 0;
    transform: translateY(100%);
    transition: transform .35s var(--ease), opacity .35s var(--ease);
  }
  .btn:hover::before { transform: none; opacity: .08; }

  /* ---- Хедър: свива се при скрол -------------------------------------- */

  .header__inner { transition: height .35s var(--ease); }
  .header[data-scrolled="true"] .header__inner { height: 4.25rem; }

  /* ---- Пиновете на картата падат на мястото си ------------------------ */

  .js .omap.is-in .omap__pin { animation: pin-drop .55s var(--ease) both; }
  .js .omap.is-in .omap__pin:nth-of-type(2) { animation-delay: .1s; }
  .js .omap.is-in .omap__pin:nth-of-type(3) { animation-delay: .2s; }
  @keyframes pin-drop {
    from { opacity: 0; transform: translateY(-14px) scale(.7); }
    to   { opacity: 1; transform: none; }
  }

  /* ---- Акордеонът: знакът се завърта --------------------------------- */

  .acc__sign, .svc-branch__sign { transition: transform .35s var(--ease); }
  .acc__btn[aria-expanded="true"] .acc__sign,
  .svc-branch__head[aria-expanded="true"] .svc-branch__sign { transform: rotate(180deg); }

  /* ---- Числото в значката пулсира веднъж при появяване ---------------- */

  .js .proof-pill__dot { animation: pulse 2.6s var(--ease) infinite; }
  @keyframes pulse {
    0%, 70%, 100% { transform: scale(1); opacity: 1; }
    35%           { transform: scale(1.5); opacity: .55; }
  }

  /* ---- Лек паралакс на широката фотографска лента --------------------- */

  .showcase__bg { will-change: transform; }

  /* ══════════════════════════════════════════════════════════════════════
     Втори слой движение
     ══════════════════════════════════════════════════════════════════════
     Същите правила: текстът не избледнява, нищо не мести оформлението.
     Всяко правило по-долу пипа само transform, clip-path или цвят. */

  /* ---- Големите снимки дишат ------------------------------------------
     Много бавно приближаване, докато лентата е в екрана. Кадърът се движи
     колкото да не изглежда като печатна страница — 4% за 20 секунди.
     Мащабът е върху изображението, а рамката е с overflow: clip, затова
     нищо не изтича навън и нищо не се преоразмерява. */

  .js .hero-v2__bg img,
  .js .page-head__bg img,
  .js .showcase__bg img,
  .js .closer__img {
    transform-origin: 50% 50%;
    transition: transform 20s linear;
  }
  .js .hero-v2.is-in .hero-v2__bg img,
  .js .page-head.is-in .page-head__bg img,
  .js .showcase.is-in .showcase__bg img,
  .js .closer--shot.is-in .closer__img { transform: scale(1.04); }

  /* ---- Стрелките тръгват натам, накъдето сочат ------------------------
     Микродвижение при посочване. Стрелката е в самата връзка, затова се
     мести само тя, не текстът — иначе редът би подскачал. */

  .btn svg, .pkg__more svg, .cap__end svg {
    transition: transform .3s var(--ease);
  }
  .btn:hover svg, .pkg:hover .pkg__more svg { transform: translateX(4px); }

  /* Външната връзка сочи нагоре-надясно, затова се мести по диагонал. */
  .header__cta:hover svg { transform: translate(2px, -2px); }

  /* Подчертаването на .link НЕ се пипа. То вече е анимирано и си стои
     видимо в покой, а при посочване се прибира надясно. Обръщането му
     (линия само при посочване) би махнало постоянното подчертаване и
     връзките в текста биха се различавали единствено по цвят. */

  /* ---- Заглавието на секция си тегли черта ---------------------------- */

  /* Чертата НЕ виси на клас „is-in“: .label--block често е пряко дете на
     .wrap, извън който и да е [data-reveal], тоест такъв клас никога не би
     стигнал дотук. Вместо това се изчертава от самото скролиране.
     Където браузърът не поддържа scroll-driven анимации, чертата просто си
     стои изтеглена — затова изходното положение е scaleX(1), а не 0. */

  .head > .label, .label--block { position: relative; }
  .head > .label::after,
  .label--block::after {
    content: '';
    position: absolute;
    left: 0; bottom: -.75rem;
    width: 2.5rem; height: 2px;
    background: var(--accent);
    transform-origin: left;
  }

  @supports (animation-timeline: view()) {
    .head > .label::after,
    .label--block::after {
      transform: scaleX(0);
      animation: rule-draw linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 22%;
    }
    @keyframes rule-draw { to { transform: scaleX(1); } }
  }

  /* Футърът се подрежда колона по колона чрез съществуващия [data-reveal]
     с нарастващо закъснение — виж inc/footer.php. Нарочно не се пише нова
     анимация: [data-reveal] мести само позицията, никога прозрачността, и
     сам се изключва при prefers-reduced-motion. */

  /* ---- Мобилното меню: пунктовете влизат един след друг ---------------
     Изчакването е малко — менюто трябва да е готово за ползване веднага,
     а не да кара човек да чака анимация. Затова целият низ свършва за
     под 400 ms дори при десет връзки. */

  .menu[data-open="true"] .menu__link { animation: menu-in .4s var(--ease) both; }
  .menu[data-open="true"] .menu__link:nth-child(2) { animation-delay: .03s; }
  .menu[data-open="true"] .menu__link:nth-child(3) { animation-delay: .06s; }
  .menu[data-open="true"] .menu__link:nth-child(4) { animation-delay: .09s; }
  .menu[data-open="true"] .menu__link:nth-child(5) { animation-delay: .12s; }
  .menu[data-open="true"] .menu__link:nth-child(6) { animation-delay: .15s; }
  .menu[data-open="true"] .menu__link:nth-child(7) { animation-delay: .18s; }
  @keyframes menu-in {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: none; }
  }

  /* Завъртането на иконата при посочване беше махнато нарочно.
     Върху една и съща карта вече се случваха три неща едновременно: картата
     се повдига, снимката вътре се приближава и иконата се върти. Третото не
     казва нищо ново — само добавя шум към жест, който вече е разбран.
     Иконите пак изникват при появяване на секцията; там движението носи
     смисъл, защото маркира влизането на съдържанието. */

  /* ---- Картонът на избрания офис се подчертава ------------------------ */

  .office-card { position: relative; transition: background-color .3s var(--ease); }
  .office-card::before { transition: transform .45s var(--ease); }

  /* ---- Лента за напредъка на четенето ---------------------------------
     Тънка златна нишка най-горе. Прави се изцяло от браузъра през
     scroll-driven анимация: нула JavaScript, нула работа на главната нишка
     и нищо не се смята при всеки скрол.
     Където не се поддържа (Safari към момента), лентата просто я няма —
     затова е в @supports, а не със заместващ скрипт. */

  @supports (animation-timeline: scroll()) {
    .read-progress {
      display: block;
      position: fixed;
      inset: 0 0 auto 0;
      height: 2px;
      z-index: 60;
      background: var(--accent);
      transform-origin: left;
      transform: scaleX(0);
      animation: read-progress linear;
      animation-timeline: scroll(root block);
      pointer-events: none;
    }
    @keyframes read-progress { to { transform: scaleX(1); } }
  }
  /* ---- Още движение по началната страница ----------------------------
     Четири добавки, всяка вързана за нещо, което вече е на екрана. Нито
     една не крие текст: прозрачността се пипа само на декорация. */

  /* 1 · Тънката линия между секциите се изтегля отляво надясно, вместо да
         се появи наведнъж. Дава посока на прелистването. */
  .band--rule { position: relative; border-top-color: transparent; }
  .band--rule::before {
    content: '';
    position: absolute; inset: 0 0 auto;
    height: 1px;
    background: var(--line);
    transform-origin: left;
  }
  @supports (animation-timeline: view()) {
    .band--rule::before {
      transform: scaleX(0);
      animation: rule-draw linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }

  /* 2 · Всеки от трите кадъра получава златна лента под снимката, която се
         изтегля, докато кадърът влиза в екрана. Първоначално тук имаше една
         обща нишка през трите кадъра – не става: стъпките нарочно висят на
         различна височина, така че права хоризонтална линия минава напряко
         през тях и се чете като случайна черта. Лента под всяка снимка
         следва разказа, без да се бори с композицията. */
  .story__shot::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--accent);
    transform-origin: left;
    z-index: 2;
  }
  @supports (animation-timeline: view()) {
    .story__shot::after {
      transform: scaleX(0);
      animation: rule-draw linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }
  }

  /* 3 · Етикетът „01 · Проблем“ влиза откъм ръба на кадъра, а не изниква
         на място. Движи се само етикетът – снимката под него стои. */
  [data-reveal] .story__k,
  [data-reveal].story__step .story__k {
    animation: badge-in .5s var(--ease) both;
    animation-delay: .18s;
  }
  @keyframes badge-in {
    from { transform: translateX(-101%); }
    to   { transform: none; }
  }

  /* 4 · Чертожният лист в hero-то се движи малко по-бавно от страницата.
         Той е „положен отгоре“ – затова се държи като отделен предмет, а не
         като част от фона. Стойността е малка нарочно: 40 px на цял екран. */
  @supports (animation-timeline: scroll()) {
    .plan--float {
      animation: sheet-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
    }
    @keyframes sheet-drift {
      from { transform: translateY(0); }
      to   { transform: translateY(40px); }
    }
  }

}

/* Без движение — нищо от горното не важи. */
@media (prefers-reduced-motion: reduce) {
  [data-rise], [data-rise-group] > * {
    clip-path: none !important;
    transform: none !important;
  }
  .vlabel::after { transform: none !important; }
  .omap__pin { animation: none !important; }
  .proof-pill__dot { animation: none !important; }
  .pkg:hover, .feature:hover { transform: none !important; }
  .read-progress { display: none !important; }
  .head > .label::after,
  .label--block::after { animation: none !important; transform: scaleX(1) !important; }
  .hero-v2__bg img, .page-head__bg img, .showcase__bg img, .closer__img {
    transform: none !important; transition: none !important;
  }
  .menu__link { animation: none !important; }
  .entry:hover { padding-left: 0 !important; }
  .band--rule::before { display: none !important; }
  .band--rule { border-top-color: var(--line) !important; }
  .story__shot::after { animation: none !important; transform: scaleX(1) !important; }
  .story__k { animation: none !important; transform: none !important; }
  .plan--float { animation: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   25. Фон на контактната лента
   -------------------------------------------------------------------------- */

.closer--shot { position: relative; isolation: isolate; overflow: clip; }
.closer__bg { position: absolute; inset: -8% 0; z-index: -2; }
.closer__img {
  width: 100%; height: 100%; object-fit: cover;
  /* Кадърът е нощен: притъмнен още малко, за да остане фон, а не сюжет. */
  filter: brightness(.42) saturate(.85);
}
.closer--shot::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--dark) 92%, transparent) 0%,
    color-mix(in srgb, var(--dark) 72%, transparent) 55%,
    color-mix(in srgb, var(--dark) 55%, transparent) 100%);
}

/* Кадърът към всяка услуга на страница „Услуги“. */
.svc-visual { margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.svc-visual .shot__img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 10; object-fit: cover;
  box-shadow: 0 1px 2px rgba(26, 35, 50, .12), 0 22px 44px -30px rgba(26, 35, 50, .45);
}
.svc-visual--mock { max-width: 30rem; }


/* --------------------------------------------------------------------------
   26. Сенки под снимките, кадриране и реакция при посочване
   --------------------------------------------------------------------------
   Три отделни неща, събрани тук, защото и трите отговарят на един въпрос:
   как снимката и картата се държат спрямо страницата около тях.
   -------------------------------------------------------------------------- */

/* ---- Сянка под снимките ---------------------------------------------------
   Двуслойна: тясна и тъмна точно под ръба, широка и мека надолу. Един слой
   или изглежда като черта, или като мъгла; двата заедно дават усещане за
   лист хартия, положен върху друг.
   Слага се на РАМКАТА, не на изображението: рамката има overflow: hidden
   заради маските при появяване, а сянка върху нещо изрязано не се вижда. */

.story__step,
.rail__item,
.rail__lead,
.figure,
.duo__shot,
.cx-shot,
.pkg__shot {
  --shadow-photo:
    0 1px 2px rgba(26, 35, 50, .10),
    0 12px 24px -14px rgba(26, 35, 50, .34);
  filter: drop-shadow(0 1px 1px rgba(26, 35, 50, .10))
          drop-shadow(0 10px 18px rgba(26, 35, 50, .16));
}

/* Картите вече имат собствена сянка при посочване — не се удвоява. */
.pkg .pkg__shot { filter: none; }
.pkg {
  box-shadow: 0 1px 2px rgba(26, 35, 50, .08), 0 10px 20px -16px rgba(26, 35, 50, .30);
}

/* ---- Кадриране на широките фотографски ленти -----------------------------
   ⚠ ТУК НЯМА ПРАВИЛА ЗА object-position И НЕ ТРЯБВА ДА ИМА.

   Всяка снимка носи собствена „фокусна точка“, зададена в администрацията
   (раздел „Снимки“ → поле „Фокусна точка“). Тя се извежда като инлайн стил
   върху самото изображение, а инлайн стилът бие всяко правило оттук.

   Написах веднъж такива правила и те не сработиха именно затова: изглеждаха
   приложени, а на екрана нищо не се променяше. Ако кадърът е сбъркан —
   поправя се на снимката, не в стиловете. Така и редакторът може да го
   направи, без да пипа код.

   Пример: „Пловдив на залез“ показваше само небе. Решението беше фокусна
   точка 50% 92% на самата снимка. */


/* ---- Четирите принципа: реакция при посочване -----------------------------
   Мрежата е с фугa от 1 пиксел, която рисува линиите между клетките. Затова
   повдигане с transform е изключено — то би отворило процеп в решетката.
   Вместо това клетката излиза напред: сменя фона, вдига се над съседите си
   със сянка и изтегля златна черта отгоре.

   Цветът се сменя ВИНАГИ, движението — само когато не е поискано по-малко
   движение. Смяната на фон не е анимация и не пречи на никого.

   Картите не са връзки. Ефектът е обратна връзка „това гледам сега“, не
   покана за кликване — затова няма курсор-показалец и няма преместване. */

.feature {
  position: relative;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}

.feature::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.feature:hover {
  background: var(--white);
  z-index: 1;
  box-shadow: 0 2px 4px rgba(26, 35, 50, .06), 0 16px 30px -20px rgba(26, 35, 50, .45);
}

.band--white .feature:hover { background: var(--paper); }

@media (prefers-reduced-motion: no-preference) {
  .feature::before { transition: transform .45s var(--ease); }
  .feature:hover::before { transform: scaleX(1); }
  .feature__icon { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
  .feature:hover .feature__icon { transform: translateY(-2px) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  /* Без изтегляне — чертата просто се появява. */
  .feature:hover::before { transform: scaleX(1); }
}

/* На сензорен екран „посочване“ няма: ефектът би останал залепнал след
   докосване. Затова се включва само там, където има истински курсор. */
@media (hover: none) {
  .feature:hover { background: inherit; box-shadow: none; }
  .feature:hover::before { transform: scaleX(0); }
}

/* Надпис на самостоятелен кадър. За разлика от .story__k тук НЯМА брояч:
   двата кадъра на „За нас“ са две отделни места, не стъпки едно след друго,
   а „01 · Входът“ би обещало поредица, каквато няма. */
.story__cap {
  display: block;
  margin-bottom: .35rem;
  color: var(--ink);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   27. Движение на „За нас“
   --------------------------------------------------------------------------
   Страницата е текстова: няма карта, няма чертожен лист, няма броячи. Затова
   тук се усещаше като неподвижна, макар разкриването да работи — 18 пиксела
   преместване на широка колона просто не се забелязват.

   Добавени са три неща, всяко от които казва нещо, а не просто мърда.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Трите фирми: линия, която ги свързва ------------------------------
     Списъкът изброява три отделни дружества, но твърдението е „една
     отговорност“. Вертикалната черта се изтегля отгоре надолу, докато редовете
     влизат — и трите се оказват нанизани на един ствол. */

  /* Отстъпът прави място на чертата. Без него тя ляга върху номерата и
     „01“ се чете като „1“ — първата версия изглеждаше точно така. */
  .band--paper2 .index { position: relative; padding-left: 2rem; }
  .band--paper2 .index::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.1s var(--ease) .1s;
  }
  .band--paper2 .index:has(.entry.is-in)::before { transform: scaleY(1); }

  /* Номерът на реда изниква с лек мащаб — окото го хваща като „ето, следващ“. */
  .band--paper2 .entry .entry__n {
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), color .4s var(--ease);
  }
  .band--paper2 .entry:hover .entry__n { transform: scale(1.12); color: var(--accent-text); }

  /* ---- Разкриване с усещане на текстова страница -------------------------
     На тесни блокове 18 px стигат. На широка колона движението изчезва.
     Тук е 30 px и малко по-бавно — достатъчно, за да се види, без да бави. */

  .band--paper2 [data-reveal]:not(.is-in),
  .band--white [data-reveal]:not(.is-in) { transform: translateY(30px); }
  .band--paper2 [data-reveal],
  .band--white [data-reveal] { transition-duration: .75s; }
}

/* Ако браузърът не поддържа :has(), чертата просто стои изтеглена —
   по-добре видима линия без анимация, отколкото невидима линия. */
@supports not selector(:has(*)) {
  .band--paper2 .index::before { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .band--paper2 .index::before { transform: scaleY(1); transition: none; }
}

/* Надписите върху чертожния лист. Малки, разредени, с мастилен тон —
   както се пишат на истински чертеж, а не като етикети от интерфейс. */
.plan__label text {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .09em;
  fill: color-mix(in srgb, var(--ink) 62%, var(--paper));
}
/* Надписите на общите части са в акцентен тон — те са смисълът на чертежа. */
/* Три нива на четене: общата част говори високо, пояснението ѝ – тихо,
   апартаментите – най-тихо. Без тази йерархия всичките осем надписа тежаха
   еднакво и чертежът се четеше като списък, а не като схема. */
.plan__label .plan__label--core {
  fill: var(--accent-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
}
.plan__label .plan__label--sub {
  fill: color-mix(in srgb, var(--accent-text) 72%, var(--paper));
  font-size: 7.5px;
  letter-spacing: .12em;
}
.plan__label text { fill: color-mix(in srgb, var(--ink) 44%, var(--paper)); }


/* ---------------------------------------------------------------------------
   Лента с услугите на /uslugi
   ---------------------------------------------------------------------------
   Стои под хедъра, докато се чете подробното описание, и подчертава услугата,
   в която си в момента. Появява се след встъпителния списък и изчезва преди
   формата – иначе виси над съдържание, което няма нищо общо с нея.

   Защо fixed, а не sticky: секциите с услугите са съседни елементи на body,
   така че sticky елемент между тях би лепнал чак до футъра. Появата и
   скриването се управляват от главния хедър, който сам се скрива при
   скролване надолу – затова лентата го следва, вместо да остави дупка.
   -------------------------------------------------------------------------- */

.svcnav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 55;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .4s var(--ease), opacity .25s var(--ease), visibility .4s;
}

/* Под хедъра, когато той се вижда; на самия връх, когато се е скрил. */
.svcnav.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(var(--head-h, 4.75rem));
}
.svcnav.is-on.is-top { transform: translateY(0); }

.svcnav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 3.25rem;
}

.svcnav__eyebrow {
  flex-shrink: 0;
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.svcnav__rail {
  display: flex;
  align-items: stretch;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.svcnav__rail::-webkit-scrollbar { display: none; }

.svcnav__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  padding: 0 .75rem;
  text-decoration: none;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.svcnav__item:hover { color: var(--ink); }

.svcnav__n {
  font-size: .625rem;
  letter-spacing: .1em;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}

.svcnav__t {
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Активната услуга. Не разчита само на цвят – има и линия отдолу. */
.svcnav__item[aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent-text);
}
.svcnav__item[aria-current="true"] .svcnav__n { opacity: 1; color: var(--accent-text); }

.svcnav__item:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: -2px;
  border-radius: 2px;
}

@media (max-width: 720px) {
  .svcnav__eyebrow { display: none; }
  .svcnav__inner { gap: 0; height: 3rem; }
  .svcnav__t { font-size: .75rem; }
}

/* Без JavaScript лентата не съществува – горният списък поема ролята ѝ. */
html:not(.js) .svcnav { display: none; }

@media (prefers-reduced-motion: reduce) {
  .svcnav { transition: opacity .01ms; }
  .svcnav__rail { scroll-behavior: auto; }
}

/* Заглавието на началната страница на три реда.
   ---------------------------------------------------------------------------
   На шест реда изречението се разпадаше на срички и кутията под него ставаше
   тясна и висока. Три реда искат по-широка колона И по-малък кегел – само
   едното не стига: при пълния размер редът „такава, каквато трябва“ не се
   побира в никаква разумна широчина. */
.hero-v2 .hero__title {
  font-size: clamp(2rem, 1.05rem + 3.1vw, 3.5rem);
  max-width: 22ch;
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   Цели за пръст
   ---------------------------------------------------------------------------
   WCAG 2.2 (2.5.8) иска поне 24×24 CSS пиксела за всяко нещо, което се
   натиска. Измерено на телефон: трохите („Начало“) бяха 19 px, а връзките за
   телефон и имейл в импресума – 17 px. Формално връзка вътре в изречение е
   изключение от правилото, но телефонът и имейлът са точно нещата, които
   човек натиска от телефон – затова се увеличават и те.

   Padding върху inline елемент не мести реда, но уголемява областта, която
   реагира на докосване. Затова оформлението остава непроменено. */

.crumbs a {
  display: inline-block;
  padding-block: .35rem;
  margin-block: -.35rem;
}

.footer__impressum a,
.consent__text a,
.warn a,
.field__hint a {
  padding-block: .3rem;
}

/* Лентата с услугите: самите връзки трябва да запълват височината ѝ, а не да
   стоят като тънка ивица текст в средата. */
.svcnav__item { min-height: 2.75rem; }

/* Същата поправка за останалите фонови рамки – виж бележката при
   .page-head__bg. Навсякъде, където <img> вътре в <picture> разчита на
   height:100%, обвивката трябва да е блок с височина. */
.hero-v2__bg picture,
.closer__bg picture,
.proof picture { display: block; height: 100%; }

/* ---------------------------------------------------------------------------
   Страница „Поискай оферта“
   ---------------------------------------------------------------------------
   Смисълът ѝ е формата да е видима веднага. На широк екран заглавието и
   фактите стоят вляво, формата – вдясно. На тесен екран редът се сменя:
   заглавие → форма → факти. Иначе трите реда с фактите избутват първото
   поле под прегъвката и страницата губи причината да съществува. */

.offer {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "head  form"
    "facts form";
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}
.offer__head  { grid-area: head; }
.offer__facts { grid-area: facts; }
.offer__form  { grid-area: form; }

@media (max-width: 900px) {
  .offer {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "form" "facts";
    gap: clamp(1.75rem, 1rem + 3vw, 2.5rem);
  }
}

/* ---------------------------------------------------------------------------
   Телефонна централа
   ---------------------------------------------------------------------------
   Три колони – по една за всеки район, точно както се набира по телефона.
   Цифрите са едри и подравнени в колона: човек с телефон до ухото търси
   цифра, не заглавие. */

.ivr {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, .8rem + 2.4vw, 3rem);
  margin-top: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
}

.ivr__col {
  border-top: 2px solid var(--accent);
  padding-top: 1.25rem;
}

.ivr__district {
  display: flex; align-items: baseline; gap: .75rem;
  margin: 0;
  font-family: var(--sans);
  font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink);
}
.ivr__office {
  margin: .35rem 0 0 2.4rem;
  font-size: var(--t-label);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}

.ivr__digit {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.65rem; height: 1.65rem;
  border: 1px solid var(--line);
  font-size: .8125rem; font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}
.ivr__digit--lg {
  width: 1.9rem; height: 1.9rem;
  font-size: 1rem;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.ivr__list { list-style: none; margin: 1.5rem 0 0; padding: 0; }

.ivr__row {
  display: flex; gap: .85rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line-soft);
}
.ivr__row:first-child { border-top: 0; padding-top: .25rem; }

.ivr__body { display: block; min-width: 0; }

.ivr__dept {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink);
}
.ivr__dept svg { color: var(--accent-text); flex-shrink: 0; }

.ivr__desc {
  display: block;
  margin-top: .3rem;
  font-size: 13px; line-height: 1.45;
  color: var(--ink-3);
}

/* Човекът зад опцията. Показва се само когато има въведено име. */
.ivr__person {
  display: flex; align-items: center; gap: .65rem;
  margin-top: .8rem;
}
.ivr__face {
  flex-shrink: 0;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.ivr__face picture { display: block; height: 100%; }
.ivr__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ivr__face--initials {
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 16%, var(--paper));
  color: var(--accent-text);
  font-size: .8125rem; font-weight: 500; letter-spacing: .02em;
}

.ivr__who { display: block; min-width: 0; }
.ivr__name { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.ivr__role {
  display: block;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
  margin-top: .1rem;
}

.ivr__extra { display: block; margin-top: .5rem; font-size: 13px; }
.ivr__link {
  color: var(--ink-2); text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-block: .25rem;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.ivr__link:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

@media (max-width: 900px) {
  .ivr { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ---- Сигнал: избор на институции ---------------------------------------- */

.insts { border: 0; padding: 0; margin: 0; }

.insts__always {
  display: flex; align-items: flex-start; gap: .65rem;
  margin: .75rem 0 0;
  padding: .85rem 1rem;
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  border-left: 2px solid var(--accent);
  font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2);
}
.insts__tick { color: var(--accent-text); flex-shrink: 0; margin-top: .15rem; display: flex; }

.insts__group + .insts__group { margin-top: 1.1rem; }
.insts__h {
  display: block;
  font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .5rem;
}
.insts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: .1rem 1rem;
}
.insts__item { min-height: 2.25rem; align-items: center; }
.insts__item span { font-size: 13px; }

@media (max-width: 560px) {
  .insts__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Галерия на свършената работа
   -------------------------------------------------------------------------- */

.gal-filter { display: flex; flex-wrap: wrap; gap: .5rem; }

.gal-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.5rem;
  padding: .5rem .9rem;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.gal-chip span { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gal-chip:hover { border-color: var(--accent); color: var(--ink); }
.gal-chip.is-on { background: var(--dark); border-color: var(--dark); color: var(--white); }
.gal-chip.is-on span { color: rgba(255,255,255,.6); }
.gal-chip:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.gal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: clamp(1.5rem, .8rem + 2.4vw, 2.75rem);
}

.gal__item { margin: 0; }

/* Двата кадъра са с еднаква височина и еднакъв изрез – иначе „преди“ и „след“
   не се сравняват, а само стоят един до друг. */
.gal__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

.gal__shot { position: relative; display: block; overflow: hidden; }
.gal__img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.gal__shot--solo .gal__img { aspect-ratio: 3 / 2; }

.gal__tag {
  position: absolute; left: 0; top: 0;
  padding: .3rem .6rem;
  background: var(--dark); color: var(--white);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.gal__tag--after { background: var(--accent-text); }

.gal__cap { margin-top: .9rem; }
.gal__title { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.gal__text {
  display: block; margin-top: .35rem;
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.gal__meta {
  display: block; margin-top: .5rem;
  font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 520px) {
  .gal { grid-template-columns: 1fr; }
}

/* Без JavaScript филтърът не върши нищо – рубриките така или иначе стоят
   всички на страницата, затова лентата с бутони просто не се показва. */
html:not(.js) .gal-filter { display: none; }

/* ---------------------------------------------------------------------------
   Институции – карти в езика на офисите
   ---------------------------------------------------------------------------
   Същият похват като .locator__list: решетка с фуга от 1 px върху линията,
   така че разделителите са самата мрежа, а не рамки на всяка карта. */

.inst-grid {
  display: grid;
  /* auto-fit, а не фиксирани 4 колони: блокът живее в дясната колона на
     split-а и е около 650 px широк, не колкото екрана. При четири твърди
     колони заглавието „Комунални“ се пренасяше на два реда. Мярката трябва
     да е спрямо контейнера, а медийната заявка гледа екрана. */
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  margin-top: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
}

.inst-card {
  background: var(--paper);
  padding: clamp(1.25rem, .9rem + 1.4vw, 1.85rem);
  display: flex; flex-direction: column; gap: .85rem;
  transition: background-color .35s var(--ease);
}
.band--white .inst-card { background: var(--white); }
.inst-card:hover { background: var(--accent-wash); }

.inst-card__icon { display: flex; color: var(--accent-text); }
.inst-card__name { margin: 0; }

.inst-card__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.inst-card__list li {
  font-size: var(--t-sm);
  color: var(--ink-2);
  padding: .5rem 0;
  border-top: 1px solid var(--line-soft);
}
.inst-card__list li:first-child { border-top: 0; padding-top: 0; }

.inst-card__count {
  margin-top: auto;
  padding-top: .5rem;
  font-size: var(--t-label);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}


@media (prefers-reduced-motion: reduce) {
  .inst-card:hover { background: var(--paper); }
  .band--white .inst-card:hover { background: var(--white); }
}

/* Картоните на институциите ползват .office-card, но са повече и по-малки.

   ⚠ Разделителите НЕ са фуга върху оцветен фон, както при офисите. Там
   картоните са точно три и запълват реда. Тук са 22: последният ред остава
   с две празни клетки, а през тях прозираше фонът на решетката – два сиви
   правоъгълника накрая. Затова линиите са рамки на самите картони: няма
   картон, няма линия. */
.locator__list--inst {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: none;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.locator__list--inst > .inst-place {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Картон с пин се натиска и превключва картата – курсорът го казва. */
.inst-place[data-locator-card] { cursor: pointer; }

/* ⚠ Картата стои ОТСТРАНИ и остава пред очите, докато се минава списъкът.
   ---------------------------------------------------------------------------
   Двайсет и два картона са дълги няколко екрана. Когато картата беше отгоре,
   всеки клик изискваше връщане нагоре, за да се види кой пин светна – заради
   което изборът губеше смисъл.

   Първо опитах да я залепя над списъка. Не става: залепен елемент над своите
   съседи ги прегазва, щом те тръгнат нагоре, и картата минаваше по средата на
   картоните. Отстрани няма как да ги застигне – върви в собствена колона.

   Между другото това оправя и последния ред: 22 картона в ДВЕ колони правят
   точно 11 реда, без остатък и без празнини. */
@media (min-width: 901px) {
  .locator--inst {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(1.25rem, .6rem + 1.6vw, 2.25rem);
    border: 0;
  }

  .locator--inst .omap {
    position: sticky;
    top: 5.5rem;
    height: clamp(22rem, 52vh, 34rem);
    border: 1px solid var(--line);
  }

  /* Две колони вместо четири: колоната е наполовина по-тясна, а 22 се дели
     на 2 без остатък. */
  .locator__list--inst {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 1px solid var(--line);
  }
}

/* Посочване: картонът се повдига леко и иконата поема акцентния цвят.
   Без сянка и без местене на съдържанието – редът на решетката трябва да
   остане неподвижен, иначе съседните картони се „люлеят“ при минаване. */
@media (prefers-reduced-motion: no-preference) {
  .inst-place {
    transition: background-color .25s var(--ease), color .25s var(--ease);
  }
  .inst-place__icon { transition: transform .25s var(--ease); }
  .inst-place[data-locator-card]:hover .inst-place__icon { transform: translateY(-2px); }
}
.inst-place[data-locator-card]:hover { background: var(--accent-wash); }
.inst-place[data-locator-card]:hover .office-card__name { color: var(--accent-text); }

/* Бутонът „Навигация“ изпъква едва когато картонът е посочен – иначе двайсет
   еднакви бутона крещят по-силно от имената над тях. */
.inst-place .pill-btn { transition: border-color .2s var(--ease), color .2s var(--ease); }
.inst-place:hover .pill-btn { border-color: var(--accent); color: var(--accent-text); }

/* ⚠ Последният ред остава недовършен: 22 картона в 4 колони дават 5 пълни
   реда и два картона накрая.

   Първо ги разпънах на по две колони. Не става: съдържанието им е подравнено
   вляво, картонът остава наполовина празен и изглежда разтеглен, а не завършен.
   Затова остават с нормална ширина, но редът се ЦЕНТРИРА – първият от двата
   тръгва от втората колона, вторият пада в третата. Отстрани няма картони,
   няма и рамки, така че двойката се чете като нарочно центрирана.

   Правилото хваща точно случая „два картона в последния ред от четири“ и е
   вързано за остатъка, не за числото 22: при друг брой просто не сработва. */
/* ⚠ ТУК СТОЕШЕ ПРАВИЛО ЗА ЦЕНТРИРАНЕ НА ПОСЛЕДНИЯ РЕД И ТО ПРАВЕШЕ ЩЕТА.
   ---------------------------------------------------------------------------
   Правилото даваше „grid-column: 2“ на предпоследния картон, за да центрира
   двойката, останала в ред от четири. При 22 записа обаче то съвпада с
   картон 21 ВИНАГИ – включително в едноколонната подредба на телефон. Тогава
   изричното поставяне във втора колона създаваше несъществуваща втора колона
   и решетката ставаше 30 px + 317 px: цялото съдържание се притискаше вдясно,
   а вляво зееше ивица.

   Подредбата вече е две колони на широк екран и една на телефон, тоест
   недовършен ред няма откъде да се появи. Правилото е излишно и затова е
   премахнато, а не поправено. */

/* ⚠ И самият контейнер трябва да е прозрачен, не само решетката вътре.
   .locator е боядисан в цвета на линията, за да изпъкне фугата от 1 px между
   картата и списъка. При офисите това работи: трите картона запълват реда.
   Тук последният ред е недовършен и през него прозираше точно този фон –
   двата сиви правоъгълника накрая. Линията между картата и списъка идва от
   border-top на самия списък. */
.locator--inst { background: none; gap: 0; }
.inst-place { gap: .6rem; }
.inst-place__icon { display: flex; color: var(--accent-text); }
.inst-place .office-card__name { font-size: 1.0625rem; }
.inst-place .office-card__addr { font-size: 13px; }

/* ⚠ Тези две заявки стоят НАКРАЯ нарочно.

   Правилата за подредбата на списъка се насъбраха на няколко места и при
   390 px се получаваха две неравни колони от 158 и 189 px – текстът се
   пречупваше на всяка дума. Последната дума трябва да е тук, а прагът да
   съвпада с този на двуколонното оформление по-горе (901 px). */
@media (max-width: 900px) {
  .locator__list--inst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .locator__list--inst { grid-template-columns: minmax(0, 1fr); }
}