/* ==================================================================== */
/* ==  СТРАНИЦИ : НАЧАЛО  —  специфичното за отделните страници       == */
/* ==================================================================== */

/* ==================== HOME MOTION SYSTEM : НАЧАЛО =================== */
@keyframes home-header-enter {
  from { opacity: 0; transform: translate3d(0, -16px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes home-hero-focus {
  from {
    opacity: .34;
    filter: saturate(.45) brightness(.72);
    transform: scale(1.012);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-ready body[data-page="home"] .site-header__inner {
    animation: home-header-enter .4s var(--ease-enter) both;
  }

  .motion-ready body[data-page="home"] .hero__image {
    transform-origin: center;
    animation: home-hero-focus .4s .06s var(--ease-enter) both;
  }
}

/* Посоките са контекстни: текстовите двойки се срещат, картите се повдигат,
   а service редовете се редуват. Няма промяна в document flow. */
body[data-page="home"] .philosophy__head,
body[data-page="home"] .projects .section-head,
body[data-page="home"] .parks__media {
  --reveal-transform: translate3d(-34px, 0, 0);
}

body[data-page="home"] .philosophy__text,
body[data-page="home"] .landscape .section-head,
body[data-page="home"] .parks__body {
  --reveal-transform: translate3d(34px, 0, 0);
}

body[data-page="home"] .project {
  --reveal-transform: translate3d(0, 24px, 0);
}

body[data-page="home"] .landscape__item:nth-child(odd) {
  --reveal-transform: translate3d(-26px, 0, 0);
}

body[data-page="home"] .landscape__item:nth-child(even) {
  --reveal-transform: translate3d(26px, 0, 0);
}

/* Снимките стартират приглушени и се изясняват заедно с parent reveal-а. */
.reveal-ready body[data-page="home"] .project[data-reveal]:not(.in) .project__img,
.reveal-ready body[data-page="home"] .parks__media[data-reveal]:not(.in) img {
  opacity: .28;
  filter: saturate(.35) brightness(.7);
}

.reveal-ready body[data-page="home"] .project[data-reveal] .project__img,
.reveal-ready body[data-page="home"] .parks__media[data-reveal] img {
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready body[data-page="home"] .project[data-reveal].in .project__img,
.reveal-ready body[data-page="home"] .parks__media[data-reveal].in img {
  opacity: 1;
  filter: none;
}

.reveal-ready body[data-page="home"] .project[data-reveal].reveal-complete .project__img,
.reveal-ready body[data-page="home"] .parks__media[data-reveal].reveal-complete img {
  transition-delay: 0ms;
}
/* ==================== HOME MOTION SYSTEM : КРАЙ ===================== */


/* ==================== СЕКЦИЯ: HERO : НАЧАЛО ========================= */
.hero {
  position: relative;
  background: var(--bg);
}

.hero__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Заглавието е вградено в композицията (П1). Текстовият му двойник е скрит за
   окото, но пази размера от макета — за търсачките и екранните четци. */
.hero__title {
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: var(--lh-tight);
}

/* Надписът е част от самата композиция (П1) — тук стои само целта за клик. */
.hero__cta {
  position: absolute;
  left: 50%;
  top: 81.4%;
  width: calc(150 * var(--k));
  height: calc(30 * var(--k));
  transform: translateX(-50%);
  border-radius: var(--r-sm);
  transition: box-shadow var(--t), background-color var(--t);
  box-shadow: 0 0 0 rgba(0, 191, 249, 0);
}

.hero__cta:hover,
.hero__cta:focus-visible {
  background-color: rgba(37, 219, 222, .1);
  box-shadow: 0 0 26px rgba(37, 219, 222, .45);
}
/* ==================== СЕКЦИЯ: HERO : КРАЙ =========================== */


/* ================= СЕКЦИЯ: ФИЛОСОФИЯ : НАЧАЛО ======================= */
.philosophy {
  position: relative;
  padding-top: calc(75 * var(--k));
  padding-bottom: calc(90 * var(--k));
  background: var(--bg);
}

.philosophy__wave {
  position: absolute;
  left: 0;
  top: calc(12 * var(--k));
  width: 100%;
  height: auto;
  pointer-events: none;
  object-fit: cover;
}

.philosophy__grid {
  position: relative;
  display: grid;
  grid-template-columns: 397fr 1203fr;
}

/* Ширината идва от макета: втората мисъл се пренася след „ежедневие,".
   При по-широка колона „внасяйки" се качва на първия ред и текстът се разминава. */
.philosophy__text {
  margin-top: calc(16.8 * var(--k));
  max-width: calc(1150 * var(--k));
  min-width: 0;
}

.philosophy__text p {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: calc(29 * var(--k));
  color: var(--ink-soft);
}

.philosophy__text p + p { margin-top: calc(2 * var(--k)); }
/* ================= СЕКЦИЯ: ФИЛОСОФИЯ : КРАЙ ========================= */


/* ================== СЕКЦИЯ: ПРОЕКТИ : НАЧАЛО ======================== */
.projects {
  position: relative;
  z-index: 1;
  padding-top: calc(61.2 * var(--k));
  padding-bottom: calc(87.7 * var(--k));
  background: transparent;
}

.projects__grid {
  display: grid;
  grid-template-columns: 901fr 291fr 337fr;
  column-gap: calc(32 * var(--k));
  margin-top: calc(16.9 * var(--k));
  margin-left: calc(-3 * var(--k));
  margin-right: calc(10 * var(--k));
}

.projects__stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: calc(12.7 * var(--k));
  min-width: 0;
}
/* ================== СЕКЦИЯ: ПРОЕКТИ : КРАЙ ========================== */


/* ============= СЕКЦИЯ: ЛАНДШАФТЕН ДИЗАЙН : НАЧАЛО =================== */
.landscape {
  padding-top: calc(67.1 * var(--k));
  padding-bottom: calc(54 * var(--k));
  background-color: var(--bg);
  background-image: url(/resources/images/landscape-smoke.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.landscape__list {
  margin-top: calc(41.5 * var(--k));
}
/* ============= СЕКЦИЯ: ЛАНДШАФТЕН ДИЗАЙН : КРАЙ ===================== */


/* ============== СЕКЦИЯ: ЧАСТНИ ПАРКОВЕ : НАЧАЛО ===================== */
.parks {
  padding-top: calc(70 * var(--k));
  padding-bottom: calc(95 * var(--k));
  background-color: var(--bg);
  background-image: url(/resources/images/parks-glow.png);
  background-repeat: no-repeat;
  background-size: 100% calc(774 * var(--k));
  background-position: left calc(70 * var(--k));
}

.parks__layout {
  display: grid;
  grid-template-columns: 892fr 638fr;
  column-gap: 4.256%;
  padding-left: calc(2 * var(--k));
}

.parks__media {
  display: block;
  min-width: 0;
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  transition: box-shadow var(--t), transform var(--t), filter var(--t), opacity var(--t-slow);
}

.parks__media:hover,
.parks__media:focus-visible {
  box-shadow: var(--shadow-hover);
  filter: brightness(1.04);
}

.parks__media[data-reveal]:hover,
.parks__media[data-reveal]:focus-visible { transform: translateY(-4px); }

.parks__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform var(--t-slow), opacity var(--t-slow), filter var(--t-slow);
}

.parks__media:hover img,
.parks__media:focus-visible img { transform: scale(1.035); }

.parks__body {
  min-width: 0;
  padding-top: calc(243.1 * var(--k));
}

.parks__body p {
  font-size: var(--fs-body-sm);
  font-weight: 300;
  line-height: calc(22 * var(--k));
  color: var(--ink);
}

.parks__lead { margin-top: calc(28.7 * var(--k)); }

.parks__rule {
  height: 1px;
  margin-top: calc(26.4 * var(--k));
  background: var(--line-strong);
  border: 0;
}

.parks__note { margin-top: calc(18.6 * var(--k)); }

.parks__thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(41 * var(--k));
  margin-top: calc(45.8 * var(--k));
  margin-right: calc(15 * var(--k));
}
/* ============== СЕКЦИЯ: ЧАСТНИ ПАРКОВЕ : КРАЙ ======================= */


/* ================= HOME MOTION — MOBILE : НАЧАЛО ==================== */
@media (max-width: 1024px) {
  body[data-page="home"] .philosophy__head,
  body[data-page="home"] .projects .section-head,
  body[data-page="home"] .parks__media {
    --reveal-transform: translate3d(-18px, 0, 0);
  }

  body[data-page="home"] .philosophy__text,
  body[data-page="home"] .landscape .section-head,
  body[data-page="home"] .parks__body {
    --reveal-transform: translate3d(18px, 0, 0);
  }

  body[data-page="home"] .project {
    --reveal-transform: translate3d(0, 16px, 0);
  }

  body[data-page="home"] .landscape__item:nth-child(odd) {
    --reveal-transform: translate3d(-16px, 0, 0);
  }

  body[data-page="home"] .landscape__item:nth-child(even) {
    --reveal-transform: translate3d(16px, 0, 0);
  }

  .hero__cta:active { background-color: rgba(37, 219, 222, .16); }
  .parks__media:active img { transform: scale(1.02); }
}
/* ================= HOME MOTION — MOBILE : КРАЙ ====================== */


/* ================== СЕКЦИЯ: УСЛУГИ : НАЧАЛО =========================== */
/* Страница „ландшафтна архитектура". Размерите са от макета при 1920 и се
   свиват заедно с --k. Кеглите са локални за секцията — tokens.css носи само
   общите за целия сайт. */
.services {
  --fs-page-title: clamp(30px, calc(71.24 * var(--k)), 71.24px);
  --fs-svc-title: clamp(19px, calc(33.7 * var(--k)), 33.7px);
  --fs-svc-cta: clamp(15px, calc(22.9 * var(--k)), 22.9px);
  /* Списъците в макета са с малко по-дребен кегел от абзаца — при 20.6 най-дългият
     ред се пренася и картата пораства с цял ред. */
  --fs-svc-point: clamp(14px, calc(20.1 * var(--k)), 20.1px);
  /* Текстът на тази страница е с косъмно тегло. При него аванасите на Advent Pro
     са с ~0.8% по-тесни, затова кегелът е леко вдигнат спрямо --fs-body. */
  --fs-la-body: clamp(15px, calc(20.77 * var(--k)), 20.77px);
  --fw-la-body: 150;

  position: relative;
  padding-top: calc(103 * var(--k));
  padding-bottom: calc(87.3 * var(--k));
  background: var(--bg);
}

/* Неоновият терен е декорация: излиза от левия ръб и стои под съдържанието. */
.services__terrain {
  position: absolute;
  left: 0;
  top: calc(103 * var(--k));
  width: 48.4375%;
  height: auto;
  pointer-events: none;
}

.services__layout {
  position: relative;
  display: grid;
  grid-template-columns: 740fr 828fr;
  column-gap: calc(32 * var(--k));
}

/* --- лява колона ---------------------------------------------------- */
.services__intro {
  min-width: 0;
  /* Лявата колона в макета започва на 1.5px вътре в контейнера. */
  padding-left: calc(1.5 * var(--k));
}

.services__title {
  margin-top: calc(2 * var(--k));
  font-size: var(--fs-page-title);
  font-weight: 400;
  line-height: calc(62 * var(--k));
  color: var(--ink-soft);
}

.services__title span { display: block; }
.services__title-accent { color: var(--accent); }

.services__lead {
  margin-top: calc(39.3 * var(--k));
  max-width: calc(705 * var(--k));
  font-size: var(--fs-la-body);
  font-weight: var(--fw-la-body);
  line-height: calc(30.1 * var(--k));
  color: var(--ink-soft);
}

/* --- трите качества --------------------------------------------------- */
.services__marks {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  align-items: center;
  margin-top: calc(31 * var(--k));
}

.mark {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--k));
  font-size: calc(20.4 * var(--k));
  font-weight: 300;
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.mark + .mark {
  margin-left: calc(32 * var(--k));
  padding-left: calc(28 * var(--k));
  border-left: 1px solid var(--line);
}

.mark__icon {
  flex: 0 0 auto;
  width: auto;
  height: calc(28 * var(--k));
  object-fit: contain;
}

.mark--precision .mark__icon { height: calc(31 * var(--k)); }
.mark--value .mark__icon { height: calc(27 * var(--k)); }

.mark--scope { color: var(--accent); }
.mark--precision { color: var(--accent-teal); }
.mark--value { color: var(--accent-magenta); }

/* --- дясна колона: трите етапа ---------------------------------------- */
.services__list { min-width: 0; }

.svc {
  position: relative;
  display: grid;
  grid-template-columns: calc(108 * var(--k)) minmax(0, 1fr);
  column-gap: calc(35 * var(--k));
  padding: calc(36 * var(--k)) calc(30 * var(--k)) calc(32 * var(--k));
  color: var(--ink-soft);
}

.svc + .svc { margin-top: calc(101 * var(--k)); }

.svc--design { --svc-accent: var(--accent); }
.svc--build { --svc-accent: var(--accent-teal); }
.svc--manage { --svc-accent: var(--accent-magenta); }

/* Рамката е цяла, но се стопява по диагонала — отдясно и отдолу изчезва.
   Затова е на псевдоелемент с маска, а не border с градиент. */
.svc::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--svc-accent);
  -webkit-mask: linear-gradient(118deg, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 76%);
          mask: linear-gradient(118deg, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 76%);
  pointer-events: none;
  transition: opacity var(--t);
}

.svc:hover::before { opacity: .75; }

.svc__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: calc(30 * var(--k));
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform var(--t);
}

.svc:hover .svc__icon { transform: scale(1.06); }

.svc__title {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--fs-svc-title);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--svc-accent);
}

.svc__text {
  grid-column: 2;
  grid-row: 2;
  margin-top: calc(6.6 * var(--k));
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

.svc__subtitle {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: calc(46.5 * var(--k));
  font-size: var(--fs-row-title);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--svc-accent);
}

.svc__points {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: calc(4 * var(--k));
  padding-left: calc(21 * var(--k));
  list-style: disc;
  font-size: var(--fs-svc-point);
  font-weight: 300;
  line-height: calc(37 * var(--k));
  color: var(--ink-soft);
}

.svc__points li::marker { color: var(--svc-accent); }

.svc__cta {
  grid-column: 1 / -1;
  grid-row: 5;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(289 * var(--k));
  height: calc(56 * var(--k));
  min-height: 44px;
  margin-top: calc(35 * var(--k));
  border: 1px solid var(--svc-accent);
  font-size: var(--fs-svc-cta);
  font-weight: 300;
  line-height: var(--lh-tight);
  color: var(--svc-accent);
  box-shadow: var(--shadow-rest);
  transition: background-color var(--t), box-shadow var(--t), transform var(--t-fast);
}

.svc__cta:hover {
  background-color: color-mix(in srgb, var(--svc-accent) 14%, transparent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Motion за service page-а: дългият текст остава opacity-only, за да няма
   Windows/Blink glyph ghosting. Посока имат само кратки заглавия, икони и CTA. */
body[data-page="landshaftna-arhitektura"] .services__title[data-reveal] {
  --reveal-transform: translate3d(-26px, 0, 0);
}

body[data-page="landshaftna-arhitektura"] .services__lead[data-reveal],
body[data-page="landshaftna-arhitektura"] .svc[data-reveal] {
  --reveal-transform: none;
}

.reveal-ready body[data-page="landshaftna-arhitektura"] .services__lead[data-reveal],
.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal] {
  transition-property: opacity;
}

body[data-page="landshaftna-arhitektura"] .mark[data-reveal] {
  --reveal-transform: translate3d(0, 16px, 0);
}

.reveal-ready body[data-page="landshaftna-arhitektura"] .services__terrain[data-reveal] {
  transition-property: opacity, filter;
  transition-duration: var(--t-slow);
  transition-timing-function: var(--ease-enter);
}

.reveal-ready body[data-page="landshaftna-arhitektura"] .services__terrain[data-reveal]:not(.in) {
  opacity: .24;
  filter: saturate(.35) brightness(.62) blur(3px);
}

.reveal-ready body[data-page="landshaftna-arhitektura"] .services__terrain[data-reveal].in {
  opacity: 1;
  filter: none;
}

.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal] .svc__icon,
.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal] .svc__title,
.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal] .svc__cta {
  transition:
    opacity .34s var(--ease-enter),
    transform .34s var(--ease-enter),
    filter .34s var(--ease-enter),
    background-color var(--t),
    box-shadow var(--t);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal]:not(.in) .svc__icon {
  opacity: .2;
  filter: saturate(.35) brightness(.7) blur(2px);
  transform: translate3d(-18px, 0, 0) scale(.96);
}

.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal]:not(.in) .svc__title,
.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal]:not(.in) .svc__cta {
  opacity: 0;
  transform: translate3d(18px, 0, 0);
}

.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal].in .svc__icon,
.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal].in .svc__title,
.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal].in .svc__cta {
  opacity: 1;
  filter: none;
  transform: none;
}

.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal].reveal-complete .svc__icon,
.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal].reveal-complete .svc__title,
.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal].reveal-complete .svc__cta {
  transition-delay: 0ms;
}

body[data-page="landshaftna-arhitektura"] .svc {
  transition: background-color var(--t), box-shadow var(--t);
}

body[data-page="landshaftna-arhitektura"] .svc:hover,
body[data-page="landshaftna-arhitektura"] .svc:focus-within {
  background-color: rgba(255, 255, 255, .018);
  box-shadow: inset 0 0 48px color-mix(in srgb, var(--svc-accent) 7%, transparent);
}

body[data-page="landshaftna-arhitektura"] .svc:focus-within::before {
  opacity: .9;
}

body[data-page="landshaftna-arhitektura"] .mark__icon {
  transition: transform var(--t), filter var(--t);
}

body[data-page="landshaftna-arhitektura"] .mark:hover .mark__icon {
  transform: translateY(-2px) scale(1.06);
  filter: brightness(1.16);
}

body[data-page="landshaftna-arhitektura"] .svc__cta:focus-visible {
  outline: 2px solid var(--svc-accent);
  outline-offset: 4px;
  background-color: color-mix(in srgb, var(--svc-accent) 14%, transparent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

body[data-page="landshaftna-arhitektura"] .svc__cta:active {
  transform: translateY(0) scale(.985);
  filter: brightness(1.08);
}

/* След reveal `.in` има по-висока specificity от общия CTA state. Връщаме
   interaction transform-а изрично, без да местим card/body copy слоя. */
.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal].in .svc__cta:hover,
.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal].in .svc__cta:focus-visible {
  transform: translateY(-2px);
}

.reveal-ready body[data-page="landshaftna-arhitektura"] .svc[data-reveal].in .svc__cta:active {
  transform: translateY(0) scale(.985);
}
/* ================== СЕКЦИЯ: УСЛУГИ : КРАЙ ============================= */


/* ============ СТРАНИЦА „ОНЛАЙН КОНСУЛТИРАНЕ" : НАЧАЛО ================= */
/* Размерите са от макета при 1920 и се свиват заедно с --k. Кеглите са
   локални за страницата — tokens.css носи само общите за целия сайт. */
.consult,
.howto,
.finance,
.signup {
  --fs-ok-h1: clamp(30px, calc(62.1 * var(--k)), 62.1px);
  --fs-ok-h2: clamp(24px, calc(42.9 * var(--k)), 42.9px);
  --fs-ok-h3: clamp(21px, calc(31.4 * var(--k)), 31.4px);
  --fs-ok-lead: clamp(15px, calc(20.6 * var(--k)), 20.6px);
  --fs-ok-audience: clamp(16px, calc(23 * var(--k)), 23px);
  --fs-ok-row-title: clamp(16px, calc(21.45 * var(--k)), 21.45px);
  --fs-ok-row-text: clamp(14px, calc(18.5 * var(--k)), 18.5px);
  --fs-ok-note: clamp(16px, calc(23.25 * var(--k)), 23.25px);
  --fs-ok-item-title: clamp(15px, calc(20.6 * var(--k)), 20.6px);
  --fs-ok-item-text: clamp(14px, calc(18.5 * var(--k)), 18.5px);
}


/* ================= СЕКЦИЯ: ВЪВЕДЕНИЕ : НАЧАЛО ======================== */
.consult {
  position: relative;
  padding-top: calc(112 * var(--k));
  padding-bottom: calc(40 * var(--k));
  background: var(--bg);
}

/* Снимката излиза от левия ръб и стои под текста. Надписите върху нея в
   макета са заличени при изрязването (П1) и се пишат в HTML. */
.consult__photo {
  position: absolute;
  left: 0;
  top: calc(373 * var(--k));
  width: 50%;
  height: auto;
  pointer-events: none;
}

.consult__layout {
  position: relative;
  display: grid;
  grid-template-columns: 740fr 718fr;
  column-gap: calc(142 * var(--k));
}

.consult__intro { min-width: 0; }

.consult__title {
  font-size: var(--fs-ok-h1);
  font-weight: 400;
  line-height: calc(55 * var(--k));
  color: var(--ink-soft);
}

.consult__title span { display: block; }
.consult__title-accent { color: var(--accent); }

.consult__lead {
  margin-top: calc(48 * var(--k));
  max-width: calc(700 * var(--k));
  font-size: var(--fs-ok-lead);
  font-weight: 300;
  line-height: calc(29 * var(--k));
  color: var(--ink-soft);
}

.consult__notes { margin-top: calc(41 * var(--k)); }

.note {
  display: grid;
  grid-template-columns: calc(46 * var(--k)) minmax(0, 1fr);
  align-items: start;
}

.note + .note { margin-top: calc(64 * var(--k)); }

.note__icon {
  width: auto;
  height: calc(29 * var(--k));
  margin-top: calc(3 * var(--k));
  object-fit: contain;
}

.note__text {
  max-width: calc(660 * var(--k));
  font-size: var(--fs-ok-lead);
  font-weight: 300;
  line-height: calc(29 * var(--k));
  color: var(--ink-soft);
}

.note__label { color: var(--accent); }

/* --- дясна колона ---------------------------------------------------- */
.consult__aside {
  min-width: 0;
  margin-top: calc(-7 * var(--k));
}

.consult__aside-title {
  font-size: var(--fs-ok-h2);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--ink-soft);
}

.audience { margin-top: calc(30 * var(--k)); }

.audience__item {
  display: grid;
  grid-template-columns: calc(110 * var(--k)) minmax(0, 1fr);
  column-gap: calc(35 * var(--k));
  align-items: center;
}

.audience__item + .audience__item { margin-top: calc(36 * var(--k)); }

.audience__icon {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.audience__text {
  font-size: var(--fs-ok-audience);
  font-weight: 300;
  line-height: var(--lh-tight);
  color: var(--ink-soft);
}

/* --- картата за записване -------------------------------------------- */
.booking {
  position: relative;
  display: grid;
  grid-template-columns: calc(100 * var(--k)) minmax(0, 1fr) calc(365 * var(--k));
  align-items: center;
  margin-top: calc(48 * var(--k));
  padding: calc(3 * var(--k)) 0 calc(3 * var(--k)) calc(16 * var(--k));
  border-radius: calc(18 * var(--k));
  color: var(--ink-soft);
  box-shadow: var(--shadow-rest);
  transition: box-shadow var(--t), transform var(--t-fast);
}

.booking:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Градиентна рамка: слой отдолу, изрязан с маска до дебелината на рамката. */
.booking::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg, var(--accent), var(--accent-cyan) 45%, var(--accent-magenta));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.booking__icon {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.booking__text {
  padding-left: calc(30 * var(--k));
  border-left: 1px solid var(--line);
  font-size: var(--fs-ok-audience);
  font-weight: 300;
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

.booking__text span { display: block; }

.booking__art {
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* ================= СЕКЦИЯ: ВЪВЕДЕНИЕ : КРАЙ ========================== */


/* ================= СЕКЦИЯ: КАК РАБОТИ : НАЧАЛО ======================= */
.howto {
  padding-top: calc(12 * var(--k));
  padding-bottom: calc(60 * var(--k));
  background: var(--bg);
  text-align: center;
}

.howto__title {
  font-size: var(--fs-ok-h2);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--ink-soft);
}

/* Тънката градиентна черта под заглавието — 224px, центрирана. */
.howto__title::after {
  content: '';
  display: block;
  width: calc(224 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(30 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.howto__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(107 * var(--k));
  width: 100%;
  max-width: calc(1534 * var(--k));
  margin-top: calc(163 * var(--k));
  margin-inline: auto;
  text-align: left;
}

.hcol {
  min-width: 0;
  color: var(--ink-soft);
}

.hcol--time { --hcol-accent: var(--accent); }
.hcol--audience { --hcol-accent: var(--accent-teal); }
.hcol--steps { --hcol-accent: var(--accent-magenta); }

.hcol__icon {
  display: block;
  width: calc(91 * var(--k));
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}

.hcol__title {
  margin-top: calc(10 * var(--k));
  font-size: var(--fs-ok-h3);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--hcol-accent);
  text-align: center;
}

.hcol__lead {
  margin-top: calc(18 * var(--k));
  font-size: var(--fs-ok-item-text);
  font-weight: 300;
  line-height: calc(29 * var(--k));
  color: var(--ink-soft);
}

.hitem {
  margin-top: calc(30 * var(--k));
  padding-top: calc(30 * var(--k));
  border-top: 1px solid var(--line);
}

/* Първият блок след заглавието на колоната стои по-надолу — там няма абзац. */
.hcol__title + .hitem { margin-top: calc(37 * var(--k)); }

.hitem__title {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--k));
  font-size: var(--fs-ok-item-title);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--hcol-accent);
}

.hitem__icon {
  flex: 0 0 auto;
  width: auto;
  height: calc(34 * var(--k));
  object-fit: contain;
}

.hitem__text {
  margin-top: calc(8 * var(--k));
  font-size: var(--fs-ok-item-text);
  font-weight: 300;
  line-height: calc(28.5 * var(--k));
  color: var(--ink-soft);
}

/* --- третата колона: стъпки ------------------------------------------ */
.steps { margin-top: calc(28 * var(--k)); }

.steps__item {
  position: relative;
  display: grid;
  grid-template-columns: calc(60 * var(--k)) minmax(0, 1fr);
  column-gap: calc(24 * var(--k));
  align-items: start;
}

.steps__item + .steps__item { margin-top: calc(38 * var(--k)); }

/* Пунктираната връзка между кръгчетата — проста геометрия, не изображение. */
.steps__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(30 * var(--k));
  top: calc(60 * var(--k));
  width: 0;
  height: calc(38 * var(--k));
  border-left: 1px dashed var(--accent-magenta);
}

.steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(60 * var(--k));
  height: calc(60 * var(--k));
  border: 1px solid var(--accent-magenta);
  border-radius: 50%;
  font-size: var(--fs-ok-h3);
  font-weight: 300;
  line-height: 1;
  color: var(--accent-magenta);
}

.steps__text {
  margin-top: calc(9 * var(--k));
  font-size: var(--fs-ok-item-text);
  font-weight: 300;
  line-height: calc(27 * var(--k));
  color: var(--ink-soft);
}

.hcol__art {
  display: block;
  width: calc(330 * var(--k));
  height: auto;
  margin: calc(81 * var(--k)) 0 0 auto;
  object-fit: contain;
}
/* ================= СЕКЦИЯ: КАК РАБОТИ : КРАЙ ========================= */


/* ============== СЕКЦИЯ: ФИНАНСОВ РЕГЛАМЕНТ : НАЧАЛО ================== */
.finance {
  padding-top: calc(76 * var(--k));
  padding-bottom: calc(22 * var(--k));
  background: var(--bg);
}

.finance__title {
  font-size: var(--fs-ok-h3);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--accent);
  text-align: center;
}

.finance__list {
  margin-top: calc(34 * var(--k));
  padding-inline: calc(42 * var(--k));
}

.finrow {
  padding-bottom: calc(26 * var(--k));
  color: var(--ink-soft);
}

.finrow + .finrow {
  padding-top: calc(26 * var(--k));
  border-top: 1px solid var(--line);
}

.finrow__title {
  display: flex;
  align-items: center;
  gap: calc(13 * var(--k));
  font-size: var(--fs-ok-row-title);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--ink-soft);
}

.finrow__icon {
  flex: 0 0 auto;
  width: auto;
  height: calc(36 * var(--k));
  object-fit: contain;
}

.finrow__text {
  margin-top: calc(8 * var(--k));
  font-size: var(--fs-ok-row-text);
  font-weight: 300;
  line-height: calc(31 * var(--k));
  color: var(--ink-soft);
}
/* ============== СЕКЦИЯ: ФИНАНСОВ РЕГЛАМЕНТ : КРАЙ ==================== */


/* ================== СЕКЦИЯ: ЗАПИСВАНЕ : НАЧАЛО ======================= */
.signup {
  padding-top: calc(44 * var(--k));
  padding-bottom: calc(89 * var(--k));
  background: var(--bg);
}

.signup__inner {
  display: grid;
  grid-template-columns: calc(755 * var(--k)) minmax(0, 1fr);
  column-gap: calc(36 * var(--k));
  align-items: center;
}

.signup__btn {
  display: grid;
  grid-template-columns: calc(88 * var(--k)) minmax(0, 1fr);
  column-gap: calc(11 * var(--k));
  align-items: center;
  width: calc(597 * var(--k));
  min-height: calc(96 * var(--k));
  margin-left: calc(159 * var(--k));
  padding-inline: calc(21 * var(--k)) calc(30 * var(--k));
  border-radius: calc(20 * var(--k));
  background: linear-gradient(100deg, var(--accent), var(--accent-cyan) 52%, var(--accent-magenta));
  box-shadow: var(--shadow-rest);
  transition: box-shadow var(--t), transform var(--t-fast), filter var(--t);
}

.signup__btn:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.signup__btn-icon {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.signup__btn-text {
  font-size: var(--fs-ok-note);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--bg);
}

.signup__note {
  font-size: var(--fs-ok-note);
  font-weight: 300;
  line-height: calc(28 * var(--k));
  color: var(--ink-soft);
}
/* ================== СЕКЦИЯ: ЗАПИСВАНЕ : КРАЙ ========================= */
/* ============ СТРАНИЦА „ОНЛАЙН КОНСУЛТИРАНЕ" : КРАЙ =================== */


/* ==================================================================== */
/* ==  СТРАНИЦА „ЛАНДШАФТНО ПРОЕКТИРАНЕ" : НАЧАЛО                    == */
/* ==  Всички стойности идват от docs/izmervaniya-landshaftno-         == */
/* ==  proektirane.md — измерени по maketi/landshaftno-proektirane-... == */
/* ==================================================================== */

.phero,
.incl,
.needs,
.ask,
.author {
  --fs-lp-h1: clamp(30px, calc(61.66 * var(--k)), 61.66px);
  --fs-lp-h2: clamp(24px, calc(41.63 * var(--k)), 41.63px);
  --fs-lp-claim: clamp(20px, calc(33 * var(--k)), 33px);
  --fs-lp-block: clamp(19px, calc(29.03 * var(--k)), 29.03px);
  --fs-lp-body: clamp(15px, calc(20.8 * var(--k)), 20.8px);
  --fs-lp-lead: clamp(15px, calc(20.71 * var(--k)), 20.71px);
  --fs-lp-box-sm: clamp(19px, calc(30.97 * var(--k)), 30.97px);
  --fs-lp-box-lg: clamp(24px, calc(41.24 * var(--k)), 41.24px);
  --fs-lp-box-lead: clamp(16px, calc(21.55 * var(--k)), 21.55px);
  --fs-lp-cell-title: clamp(17px, calc(25.65 * var(--k)), 25.65px);
  --fs-lp-cell-text: clamp(14px, calc(18.95 * var(--k)), 18.95px);
  --fs-lp-btn: clamp(19px, calc(31.2 * var(--k)), 31.2px);
  --fs-lp-note: clamp(16px, calc(23.54 * var(--k)), 23.54px);
  --fs-lp-name: clamp(22px, calc(34.5 * var(--k)), 34.5px);
  --fs-lp-eyebrow: clamp(16px, calc(23.75 * var(--k)), 23.75px);
  --fs-lp-bio: clamp(16px, calc(21.51 * var(--k)), 21.51px);

  /* ТЕГЛА. Измерени по МАСА НА МАСТИЛОТО, не по име на тегло: за всеки низ
     размерът се сваля от ширината, после теглото се търси така, че сумарната
     светлота на рендера да съвпадне с макета. Chrome рисува с по-дебел щрих
     от инструмента, с който е правен макетът — при 300 текстът е с ~35% повече
     мастило. Затова числата са „нестандартни" и различни за всеки елемент. */
  --fw-lp-h1: 330;
  --fw-lp-h2: 284;
  --fw-lp-claim: 256;
  --fw-lp-block: 265;
  --fw-lp-body: 156;
  --fw-lp-body-bright: 161;
  --fw-lp-lead: 262;
  --fw-lp-box-sm: 215;
  --fw-lp-box-lg: 294;
  --fw-lp-box-lead: 146;
  --fw-lp-cell-title: 284;
  --fw-lp-cell-text: 150;
  --fw-lp-btn: 380;
  --fw-lp-note: 200;
  --fw-lp-eyebrow: 184;
  --fw-lp-name: 244;
  --fw-lp-bio: 174;
}

/* ==================== СЕКЦИЯ: ХЕРО : НАЧАЛО ========================= */
.phero {
  position: relative;
  padding-top: calc(112 * var(--k));
  padding-bottom: calc(60 * var(--k));
  background: var(--bg);
  overflow: hidden;
}

/* Снимката излиза от десния ръб на екрана, не от контейнера. */
.phero__photo {
  position: absolute;
  top: calc(2 * var(--k));
  right: 0;
  width: calc(920 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.phero__inner {
  position: relative;
  z-index: 1;
}

.phero__title {
  max-width: calc(740 * var(--k));
  font-size: var(--fs-lp-h1);
  font-weight: var(--fw-lp-h1);
  line-height: calc(55 * var(--k));
  color: var(--ink-soft);
}

.phero__title span { display: block; }

.phero__lead {
  max-width: calc(740 * var(--k));
  font-size: var(--fs-lp-body);
  font-weight: var(--fw-lp-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

.phero__title + .phero__lead { margin-top: calc(47 * var(--k)); }
.phero__lead + .phero__lead { margin-top: calc(30 * var(--k)); }

.phero__claim {
  margin-top: calc(22 * var(--k));
  font-size: var(--fs-lp-claim);
  font-weight: var(--fw-lp-claim);
  line-height: calc(29 * var(--k));
  color: var(--accent);
}

.phero__claim span { display: block; }
/* ==================== СЕКЦИЯ: ХЕРО : КРАЙ =========================== */


/* ============= СЕКЦИЯ: КАКВО ВКЛЮЧВА ПРОЕКТЪТ : НАЧАЛО ============== */
.incl {
  padding-top: calc(104 * var(--k));
  padding-bottom: 0;
  background: var(--bg);
}

.incl__title {
  font-size: var(--fs-lp-h2);
  font-weight: var(--fw-lp-h2);
  line-height: calc(50 * var(--k));
  color: var(--ink);
  text-align: center;
}

/* Тънката градиентна черта под заглавието — 224px, центрирана. */
.incl__title::after {
  content: '';
  display: block;
  width: calc(224 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(29 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.incl__lead {
  margin-top: calc(22 * var(--k));
  font-size: var(--fs-lp-lead);
  font-weight: var(--fw-lp-lead);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
  text-align: center;
}

/* Трите колони стоят в кутия 1540px — с 30px по-навътре от контейнера. */
.incl__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(56 * var(--k));
  margin-top: calc(50 * var(--k));
  padding-inline: calc(30 * var(--k));
}

.pcol { min-width: 0; }

/* Средната колона в макета е избутана надясно с 31px — не е решетъчна грешка,
   а ръчно разположение на дизайнера. */
.pcol--mid { padding-left: calc(31 * var(--k)); }

.pcol .pblock + .pblock { margin-top: calc(49 * var(--k)); }
.pcol--mid .pblock + .pblock { margin-top: calc(95 * var(--k)); }

/* --pb-tp / --pb-rt: всеки блок в макета е сглобен на ръка — иконките са с
   различна височина, а заглавията НЕ седят на обща базова линия. Затова
   отстъпът на заглавието и на чертата се задава за всеки блок поотделно. */
.pblock--concept    { --pb-accent: var(--accent);      --pb-tp: 9;  --pb-rt: 24; --pb-iw: 95; }
.pblock--redesign   { --pb-accent: var(--accent-teal); --pb-tp: 3;  --pb-rt: 19; --pb-iw: 95; }
.pblock--quantities { --pb-accent: var(--accent-pink); --pb-tp: 18; --pb-rt: 18; --pb-iw: 79; }
.pblock--phyto      { --pb-accent: var(--accent-pink); --pb-tp: 4;  --pb-rt: 29; --pb-iw: 79; }
.pblock--technical  { --pb-accent: var(--accent-teal); --pb-tp: 19; --pb-rt: 22; --pb-iw: 85; }

.pblock__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

/* Изрезката стига от левия ръб на колоната до началото на заглавието —
   разстоянието е вградено в самото изображение, затова тук няма отстъп. */
.pblock__icon {
  width: calc(var(--pb-iw) * var(--k));
  height: auto;
}

/* Две от заглавията се пренасят на ръка — в макета „количествени сметки" и
   „технически планове" са на два реда, а в колона 476px биха се побрали на един. */
.pblock__title span { display: block; }

.pblock__title {
  padding-top: calc(var(--pb-tp) * var(--k));
  font-size: var(--fs-lp-block);
  font-weight: var(--fw-lp-block);
  line-height: calc(28.5 * var(--k));
  color: var(--pb-accent);
}

.pblock__rule {
  display: block;
  width: calc(67 * var(--k));
  height: calc(3 * var(--k));
  margin-top: calc(var(--pb-rt) * var(--k));
  margin-left: calc(5 * var(--k));
  background: var(--gradient-accent);
}

.plist {
  margin-top: calc(20 * var(--k));
  list-style: none;
}

.pitem + .pitem { margin-top: calc(30 * var(--k)); }

.pitem__lead,
.pitem__text {
  font-size: var(--fs-lp-body);
  font-weight: var(--fw-lp-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

/* Точката е лайм/тюркоаз/розово според блока; текстът след нея остава светъл. */
.pitem__lead::before {
  content: '•';
  margin-right: calc(6 * var(--k));
  color: var(--pb-accent);
}

/* Единственият списък в макета, чийто текст е чисто бял, а не --ink-soft. */
.plist--bright .pitem__lead,
.plist--bright .pitem__text {
  font-weight: var(--fw-lp-body-bright);
  color: var(--ink);
}
/* ============= СЕКЦИЯ: КАКВО ВКЛЮЧВА ПРОЕКТЪТ : КРАЙ ================ */


/* ============ СЕКЦИЯ: КАКВО Е НЕОБХОДИМО : НАЧАЛО =================== */
/* Без overflow: hidden и без непрозрачен фон — мъглявината слиза 90px под
   секцията и трябва да се вижда; следващата секция се вдига над нея с z-index. */
.needs {
  position: relative;
  padding-top: calc(162 * var(--k));
  padding-bottom: 0;
}

/* Мъглявината е фон и на двете съседни секции — затова стърчи нагоре. */
.needs__glow {
  position: absolute;
  z-index: 0;
  top: calc(3 * var(--k));
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.needs .container { position: relative; z-index: 1; }

.needs__box {
  position: relative;
  display: grid;
  grid-template-columns: 408fr 398fr 398fr 396fr;
  border: 1px solid transparent;
  border-radius: calc(14 * var(--k));
}

/* Градиентна рамка: цветът се реже с маска, за да остане само пръстенът.
   Двата фона padding-box/border-box НЕ вършат работа — прозрачният вътрешен
   слой не крие градиента под него и кутията излиза изцяло запълнена. */
.needs__box::before {
  content: '';
  position: absolute;
  /* -1px: абсолютното позициониране тръгва от padding-кутията, а пръстенът
     трябва да легне върху border-кутията, иначе рамката е 1px навътре. */
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient-accent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.ncell {
  min-width: 0;
  padding-top: calc(39 * var(--k));
  padding-bottom: calc(25 * var(--k));
  text-align: center;
}

/* В макета има само ДВА разделителя — между клетката със заглавието и първата
   съдържателна клетка няма линия. Затова не са изведени от .ncell + .ncell. */
.ncell--scope::before,
.ncell--brief::before {
  content: '';
  position: absolute;
  top: calc(46 * var(--k));
  bottom: calc(45 * var(--k));
  width: 1px;
  background: var(--line);
}

.ncell--scope::before { left: 50.4%; }
.ncell--brief::before { left: 75.25%; }

.ncell--intro {
  padding-top: calc(98 * var(--k));
  padding-left: calc(50 * var(--k));
  padding-right: calc(20 * var(--k));
  text-align: left;
}

.needs__title-sm,
.needs__title-lg { display: block; }

.needs__title-sm {
  font-size: var(--fs-lp-box-sm);
  font-weight: var(--fw-lp-box-sm);
  line-height: calc(26 * var(--k));
  color: var(--ink);
}

.needs__title-lg {
  font-size: var(--fs-lp-box-lg);
  font-weight: var(--fw-lp-box-lg);
  line-height: calc(50 * var(--k));
  color: var(--accent);
}

.needs__lead {
  max-width: calc(300 * var(--k));
  margin-top: calc(14 * var(--k));
  font-size: var(--fs-lp-box-lead);
  font-weight: var(--fw-lp-box-lead);
  line-height: calc(25 * var(--k));
  color: var(--ink);
}

.ncell__icon {
  display: block;
  width: calc(96 * var(--k));
  height: auto;
  margin-inline: auto;
}

.ncell__title {
  margin-top: calc(var(--nc-top, 0) * var(--k));
  font-size: var(--fs-lp-cell-title);
  font-weight: var(--fw-lp-cell-title);
  line-height: calc(30 * var(--k));
  color: var(--nc-accent);
}

/* --nc-shift: текстът в клетките НЕ е центриран спрямо самата клетка — в макета
   е избутан надясно с различно за всяка клетка отстояние. Иконките ПАК са
   центрирани, затова отместването виси само на заглавието и абзаца. */
.ncell--docs  { --nc-accent: var(--accent);        --nc-shift: 7;  --nc-top: 0; --nc-w: 290; }
.ncell--scope { --nc-accent: var(--accent-teal);   --nc-shift: 12; --nc-top: 5; --nc-w: 290; }
.ncell--brief { --nc-accent: var(--accent-pink);   --nc-shift: 2;  --nc-top: 0; --nc-w: 275; }

.ncell__title,
.ncell__text {
  position: relative;
  left: calc(var(--nc-shift, 0) * var(--k));
}

.ncell__text {
  max-width: calc(var(--nc-w, 290) * var(--k));
  margin-inline: auto;
  font-size: var(--fs-lp-cell-text);
  font-weight: var(--fw-lp-cell-text);
  line-height: calc(21.7 * var(--k));
  color: var(--ink);
}
/* ============ СЕКЦИЯ: КАКВО Е НЕОБХОДИМО : КРАЙ ===================== */


/* ================== СЕКЦИЯ: ЗАПИТВАНЕ : НАЧАЛО ====================== */
.ask {
  position: relative;
  z-index: 1;
  padding-top: calc(91 * var(--k));
  padding-bottom: 0;
}

.ask__inner {
  display: grid;
  grid-template-columns: calc(568 * var(--k)) minmax(0, 1fr);
  column-gap: calc(41 * var(--k));
  padding-left: calc(422 * var(--k));
}

.ask__btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: calc(22 * var(--k));
  min-height: calc(95 * var(--k));
  padding-left: calc(18 * var(--k));
  padding-right: calc(24 * var(--k));
  border-radius: calc(13 * var(--k));
  background: var(--gradient-accent);
  color: var(--bg);
  text-decoration: none;
  transition: filter var(--t-fast), transform var(--t-fast);
}

.ask__btn:hover,
.ask__btn:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.ask__btn-icon {
  width: calc(64 * var(--k));
  height: calc(64 * var(--k));
  border-radius: 50%;
}

.ask__btn-text {
  font-size: var(--fs-lp-btn);
  font-weight: var(--fw-lp-btn);
  line-height: 1.1;
}

.ask__note {
  align-self: start;
  margin-top: calc(16 * var(--k));
  font-size: var(--fs-lp-note);
  font-weight: var(--fw-lp-note);
  line-height: calc(28 * var(--k));
  color: var(--ink);
  max-width: calc(680 * var(--k));
}
/* ================== СЕКЦИЯ: ЗАПИТВАНЕ : КРАЙ ======================== */


/* ================== СЕКЦИЯ: АВТОР : НАЧАЛО ========================== */
.author {
  position: relative;
  padding-top: calc(88 * var(--k));
  padding-bottom: calc(76 * var(--k));
  background: var(--bg);
  overflow: hidden;
}

.author__scene {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(840 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.author .container { position: relative; z-index: 1; }

.author__heading {
  font-size: var(--fs-lp-h2);
  font-weight: var(--fw-lp-h2);
  line-height: calc(50 * var(--k));
  color: var(--ink);
  text-align: center;
}

.author__heading::after {
  content: '';
  display: block;
  width: calc(224 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(29 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.author__row {
  display: grid;
  grid-template-columns: calc(258 * var(--k)) minmax(0, 1fr);
  column-gap: calc(31 * var(--k));
  align-items: start;
  margin-top: calc(66 * var(--k));
}

.author__photo {
  width: calc(258 * var(--k));
  height: auto;
  border-radius: 50%;
}

.author__text { padding-top: calc(48 * var(--k)); }

.author__eyebrow {
  font-size: var(--fs-lp-eyebrow);
  font-weight: var(--fw-lp-eyebrow);
  line-height: calc(28 * var(--k));
  color: var(--ink);
}

.author__name {
  font-size: var(--fs-lp-name);
  font-weight: var(--fw-lp-name);
  line-height: calc(40 * var(--k));
  color: var(--ink);
}

.author__bio {
  max-width: calc(715 * var(--k));
  font-size: var(--fs-lp-bio);
  font-weight: var(--fw-lp-bio);
  line-height: calc(25 * var(--k));
  color: var(--ink);
}
/* ================== СЕКЦИЯ: АВТОР : КРАЙ ============================ */
/* ==  СТРАНИЦА „ЛАНДШАФТНО ПРОЕКТИРАНЕ" : КРАЙ                      == */
/* ==================================================================== */


/* ==================================================================== */
/* ==  СТРАНИЦА „ПРОЦЕС НА РАБОТА" : НАЧАЛО                          == */
/* ==  Числата идват от docs/izmervaniya-proces-na-rabota.md          == */
/* ==  Кутията и бутонът са ПРЕИЗПОЛЗВАНИ от „ландшафтно проектиране" == */
/* ==  през модификаторите .needs--pr и .ask--pr.                     == */
/* ==================================================================== */

.pro,
.build {
  --fs-pr-h1: clamp(30px, calc(62.1 * var(--k)), 62.1px);
  --fs-pr-h2: clamp(24px, calc(41.65 * var(--k)), 41.65px);
  --fs-pr-claim: clamp(20px, calc(33 * var(--k)), 33px);
  --fs-pr-col: clamp(19px, calc(29.25 * var(--k)), 29.25px);
  --fs-pr-body: clamp(15px, calc(20.84 * var(--k)), 20.84px);
  --fs-pr-lead: clamp(15px, calc(20.71 * var(--k)), 20.71px);

  /* Тегла — измерени по маса на мастилото, не подбрани по име. */
  --fw-pr-h1: 328;
  --fw-pr-h2: 284;
  --fw-pr-claim: 341;
  --fw-pr-col: 263;
  --fw-pr-body: 147;
  --fw-pr-lead: 262;
}

/* ==================== СЕКЦИЯ: ХЕРО : НАЧАЛО ========================= */
.pro {
  position: relative;
  padding-top: calc(115 * var(--k));
  padding-bottom: calc(92 * var(--k));
  overflow: hidden;
}

.pro__photo {
  position: absolute;
  top: calc(1 * var(--k));
  right: 0;
  width: calc(989 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.pro__inner {
  position: relative;
  z-index: 1;
}

.pro__title {
  max-width: calc(740 * var(--k));
  font-size: var(--fs-pr-h1);
  font-weight: var(--fw-pr-h1);
  line-height: calc(50 * var(--k));
  color: var(--ink);
}

.pro__title span { display: block; }
.pro__title-accent { color: var(--accent); }

.pro__lead {
  max-width: calc(590 * var(--k));
  font-size: var(--fs-pr-body);
  font-weight: var(--fw-pr-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

.pro__title + .pro__lead { margin-top: calc(34 * var(--k)); }
.pro__lead + .pro__lead { margin-top: calc(32 * var(--k)); }

.pro__claim {
  margin-top: calc(28 * var(--k));
  font-size: var(--fs-pr-claim);
  font-weight: var(--fw-pr-claim);
  line-height: calc(29 * var(--k));
  color: var(--accent);
}

.pro__claim span { display: block; }
/* ==================== СЕКЦИЯ: ХЕРО : КРАЙ =========================== */


/* ============= СЕКЦИЯ: КАКВО ВКЛЮЧВА ИЗГРАЖДАНЕТО : НАЧАЛО ========== */
.build {
  position: relative;
  padding-top: calc(13 * var(--k));
  padding-bottom: 0;
}

/* Блясъкът е фон и на трите долни секции — слиза далеч под своята.
   Затова .build няма overflow: hidden, а следващите секции се вдигат с z-index. */
.build__glow {
  position: absolute;
  z-index: 0;
  top: calc(190 * var(--k));
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.build .container {
  position: relative;
  z-index: 1;
}

.build__title {
  font-size: var(--fs-pr-h2);
  font-weight: var(--fw-pr-h2);
  line-height: calc(50 * var(--k));
  color: var(--ink);
  text-align: center;
}

.build__title::after {
  content: '';
  display: block;
  width: calc(224 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(31 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.build__lead {
  margin-top: calc(31 * var(--k));
  font-size: var(--fs-pr-lead);
  font-weight: var(--fw-pr-lead);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
  text-align: center;
}

/* Решетката е 165..1765 — в този макет тя е с 5px по-надясно от контейнера.
   Центрираните елементи обаче са центрирани на 960, не на 965. */
.build__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(39.5 * var(--k));
  width: 100%;
  margin-top: calc(50 * var(--k));
  margin-left: calc(5 * var(--k));
}

.bcol {
  min-width: 0;
  text-align: center;
}

.bcol--terrain { --bc-accent: var(--accent); }
.bcol--planting { --bc-accent: var(--accent-teal); }
.bcol--supervision { --bc-accent: var(--accent-pink); }

.bcol__icon {
  display: block;
  width: calc(113 * var(--k));
  height: auto;
  margin-inline: auto;
}

.bcol__title {
  font-size: var(--fs-pr-col);
  font-weight: var(--fw-pr-col);
  line-height: calc(36 * var(--k));
  color: var(--bc-accent);
}

.bcol__rule {
  display: block;
  width: calc(224 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(28 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.blist {
  margin-top: calc(34 * var(--k));
  padding-inline: calc(25 * var(--k));
  list-style: none;
  text-align: left;
}

.bitem + .bitem { margin-top: calc(30 * var(--k)); }

.bitem__lead,
.bitem__text {
  font-size: var(--fs-pr-body);
  font-weight: var(--fw-pr-body);
  line-height: calc(31 * var(--k));
  color: var(--ink-soft);
}

.bitem__lead::before {
  content: '•';
  margin-right: calc(6 * var(--k));
  color: var(--bc-accent);
}
/* ============= СЕКЦИЯ: КАКВО ВКЛЮЧВА ИЗГРАЖДАНЕТО : КРАЙ ============ */


/* ====== КУТИЯ И БУТОН — разликите спрямо „ландшафтно проектиране" ==== */
.needs--pr {
  --fs-lp-cell-title: clamp(17px, calc(25.8 * var(--k)), 25.8px);
  --fs-lp-cell-text: clamp(14px, calc(19.2 * var(--k)), 19.2px);
  --fs-lp-box-sm: clamp(19px, calc(30.7 * var(--k)), 30.7px);
  --fs-lp-box-lg: clamp(22px, calc(37.18 * var(--k)), 37.18px);
  --fw-lp-box-lg: 294;
  padding-top: calc(118 * var(--k));
}

/* В този макет кутията е на 165..1765 — с 5px по-надясно от контейнера. */
.needs--pr .needs__box {
  width: 100%;
  margin-left: calc(5 * var(--k));
  margin-right: calc(-5 * var(--k));
}

/* Клетките тук са центрирани както трябва — без ръчните отмествания. */
.needs--pr .ncell {
  --nc-shift: 0;
  --nc-top: 0;
  padding-top: calc(63 * var(--k));
  padding-bottom: calc(44 * var(--k));
}

.needs--pr .ncell__title { line-height: calc(30 * var(--k)); }

.needs--pr .ncell--intro {
  padding-top: calc(76 * var(--k));
  padding-left: calc(32 * var(--k));
}

/* Тук първият ред е лаймов, а големият е бял — обратно на „ландшафтно
   проектиране". Затова цветовете се задават наново. */
.needs--pr .needs__title-sm {
  line-height: calc(32 * var(--k));
  color: var(--accent);
}

.needs__title-md {
  display: block;
  font-size: var(--fs-lp-box-sm);
  font-weight: var(--fw-lp-box-sm);
  line-height: calc(32 * var(--k));
  color: var(--ink);
}

.needs--pr .needs__title-lg {
  line-height: calc(33 * var(--k));
  color: var(--ink);
  text-transform: lowercase;
}

.needs--pr .needs__lead { margin-top: calc(15 * var(--k)); }

.ask--pr {
  --fs-lp-btn: clamp(19px, calc(31 * var(--k)), 31px);
  --fs-lp-note: clamp(16px, calc(21.71 * var(--k)), 21.71px);
  padding-top: calc(115 * var(--k));
  padding-bottom: calc(73 * var(--k));
}

.ask--pr .ask__inner {
  grid-template-columns: calc(568 * var(--k)) minmax(0, 1fr);
  column-gap: calc(32 * var(--k));
  padding-left: calc(528 * var(--k));
}

.ask--pr .ask__btn {
  min-height: calc(92 * var(--k));
  column-gap: calc(24 * var(--k));
  padding-left: calc(29 * var(--k));
  padding-right: calc(29 * var(--k));
}

.ask--pr .ask__btn-text {
  white-space: nowrap;
}

.ask--pr .ask__note {
  max-width: calc(355 * var(--k));
  margin-top: calc(4 * var(--k));
  line-height: calc(25 * var(--k));
}
/* ==  СТРАНИЦА „ПРОЦЕС НА РАБОТА" : КРАЙ                            == */
/* ==================================================================== */


/* ==================================================================== */
/* ==  СТРАНИЦА „ДЪЛГОСРОЧНО УПРАВЛЕНИЕ" : НАЧАЛО                    == */
/* ==  Числата идват от docs/izmervaniya-dalgostrochno-upravlenie.md  == */
/* ==  Бутонът е ПРЕИЗПОЛЗВАН през .ask--du.                          == */
/* ==================================================================== */

.mng,
.care {
  --fs-du-h1: clamp(30px, calc(62.5 * var(--k)), 62.5px);
  --fs-du-h2: clamp(24px, calc(41.65 * var(--k)), 41.65px);
  --fs-du-body: clamp(15px, calc(20.84 * var(--k)), 20.84px);
  --fs-du-lead: clamp(15px, calc(20.68 * var(--k)), 20.68px);
  --fs-du-item: clamp(19px, calc(29.26 * var(--k)), 29.26px);

  /* Тегла — измерени по маса на мастилото. */
  --fw-du-h1: 328;
  --fw-du-h2: 284;
  --fw-du-body: 147;
  --fw-du-lead: 262;
  --fw-du-item: 284;
}

/* ==================== СЕКЦИЯ: ХЕРО : НАЧАЛО ========================= */
/* Снимката слиза 176px под секцията — стига до бележката на бутона и
   стои ПОД нея. Затова няма overflow: hidden, а .ask--du се вдига с z-index. */
.mng {
  position: relative;
  padding-top: calc(112 * var(--k));
  padding-bottom: 0;
}

.mng__photo {
  position: absolute;
  z-index: 0;
  top: calc(1 * var(--k));
  right: 0;
  width: calc(1107 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* В този макет текстът в херото тръгва от 178, не от 160 — с 18px по-навътре
   от контейнера. Бутонът отдолу е на същото 178. */
.mng__inner {
  position: relative;
  z-index: 1;
  padding-left: calc(178 * var(--k));
}

.mng__title {
  max-width: calc(760 * var(--k));
  font-size: var(--fs-du-h1);
  font-weight: var(--fw-du-h1);
  line-height: calc(55 * var(--k));
  color: var(--ink);
}

.mng__title span { display: block; }
.mng__title-accent { color: var(--accent); }

.mng__lead {
  max-width: calc(615 * var(--k));
  font-size: var(--fs-du-body);
  font-weight: var(--fw-du-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

.mng__title + .mng__lead { margin-top: calc(28 * var(--k)); }
.mng__lead + .mng__lead { margin-top: calc(30 * var(--k)); }
/* ==================== СЕКЦИЯ: ХЕРО : КРАЙ =========================== */


/* ============ СЕКЦИЯ: СТРАТЕГИЧЕСКА ГРИЖА : НАЧАЛО ================== */
.care {
  position: relative;
  padding-top: calc(140 * var(--k));
  padding-bottom: calc(93 * var(--k));
}

.care__glow {
  position: absolute;
  z-index: 0;
  top: calc(108 * var(--k));
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.care .container {
  position: relative;
  z-index: 1;
}

.care__title {
  font-size: var(--fs-du-h2);
  font-weight: var(--fw-du-h2);
  line-height: calc(50 * var(--k));
  color: var(--ink);
  text-align: center;
}

.care__title::after {
  content: '';
  display: block;
  width: calc(224 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(31 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.care__lead {
  margin-top: calc(13 * var(--k));
  font-size: var(--fs-du-lead);
  font-weight: var(--fw-du-lead);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
  text-align: center;
}

/* Списъкът тръгва от 226 — с 66px по-навътре от контейнера. */
.care__list {
  margin-top: calc(68 * var(--k));
  padding-left: calc(66 * var(--k));
  list-style: none;
}

/* --du-mt: точките в макета са разположени на ръка — разстоянието между тях
   не е едно и също. Всяка носи собствения си отстъп. */
.duitem {
  display: grid;
  grid-template-columns: calc(68 * var(--k)) minmax(0, 1fr);
  column-gap: calc(27 * var(--k));
  align-items: center;
}

.duitem + .duitem { margin-top: calc(var(--du-mt, 30) * var(--k)); }

.duitem--2 { --du-mt: 36; --du-tm: 3; }
.duitem--3 { --du-mt: 32; --du-tm: 4; }
.duitem--4 { --du-mt: 33; --du-tm: 3; }
.duitem--5 { --du-mt: 34; --du-tm: 3; }
.duitem--6 { --du-mt: 50; --du-tm: 3; }
.duitem--7 { --du-mt: 49; }

.duitem__icon {
  display: block;
  width: calc(68 * var(--k));
  height: auto;
}

.duitem__body {
  min-width: 0;
  max-width: calc(1345 * var(--k));
}

.duitem__title {
  font-size: var(--fs-du-item);
  font-weight: var(--fw-du-item);
  line-height: calc(36 * var(--k));
  color: var(--ink);
}

/* --du-tm: втората точка в макета е с 12px по-голямо разстояние между
   заглавието и текста от останалите шест. */
.duitem__text {
  margin-top: calc(var(--du-tm, 2) * var(--k));
  font-size: var(--fs-du-body);
  font-weight: var(--fw-du-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}
/* ============ СЕКЦИЯ: СТРАТЕГИЧЕСКА ГРИЖА : КРАЙ ==================== */


/* ====== БУТОНЪТ — разликите спрямо „ландшафтно проектиране" ========== */
.ask--du {
  --fs-lp-btn: clamp(19px, calc(28.92 * var(--k)), 28.92px);
  --fs-lp-note: clamp(16px, calc(23.3 * var(--k)), 23.3px);
  padding-top: calc(116 * var(--k));
  padding-bottom: 0;
}

.ask--du .ask__inner {
  grid-template-columns: calc(581 * var(--k)) minmax(0, 1fr);
  column-gap: calc(40 * var(--k));
  padding-left: calc(178 * var(--k));
}

.ask--du .ask__btn {
  min-height: calc(95 * var(--k));
  column-gap: calc(16 * var(--k));
  padding-left: calc(18 * var(--k));
  padding-right: calc(29 * var(--k));
}

.ask--du .ask__btn-icon {
  width: calc(54 * var(--k));
  height: calc(54 * var(--k));
}

.ask--du .ask__note {
  max-width: calc(760 * var(--k));
  margin-top: calc(1 * var(--k));
  line-height: calc(32 * var(--k));
}
/* ==  СТРАНИЦА „ДЪЛГОСРОЧНО УПРАВЛЕНИЕ" : КРАЙ                      == */
/* ==================================================================== */


/* ==================================================================== */
/* ==  СТРАНИЦА „ПРОЕКТИ" : НАЧАЛО                                   == */
/* ==  Числата идват от docs/izmervaniya-proekti.md                   == */
/* ==================================================================== */

.pf,
.gal,
.evo {
  --fs-pj-h1: clamp(30px, calc(62.1 * var(--k)), 62.1px);
  --fs-pj-h2: clamp(21px, calc(31.37 * var(--k)), 31.37px);
  --fs-pj-body: clamp(15px, calc(20.81 * var(--k)), 20.81px);
  --fs-pj-cap: clamp(14px, calc(20.79 * var(--k)), 20.79px);
  --fs-pj-crumb: clamp(14px, calc(17.05 * var(--k)), 17.05px);
  --fs-pj-sort: clamp(14px, calc(18.31 * var(--k)), 18.31px);

  --fw-pj-h1: 325;
  --fw-pj-h2: 264;
  --fw-pj-body: 175;
  --fw-pj-cap: 176;
  --fw-pj-crumb: 200;
}

/* ==================== СЕКЦИЯ: ПОРТФОЛИО : НАЧАЛО ==================== */
/* Блясъкът е фон на ЦЯЛАТА страница — стои в първата секция и слиза под
   останалите, затова те се вдигат с z-index. */
.pf {
  position: relative;
  padding-top: calc(88 * var(--k));
  padding-bottom: 0;
}

.pf__glow {
  position: absolute;
  z-index: 0;
  top: calc(1 * var(--k));
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.pf .container,
.gal .container,
.evo .container,
.ask--pj .container { position: relative; z-index: 1; }

/* Съдържанието на тази страница стига до 1719, не до 1760. */
.pf__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(351 * var(--k));
  column-gap: calc(40 * var(--k));
  width: 100%;
  max-width: calc(1559 * var(--k));
}

.pf__title {
  font-size: var(--fs-pj-h1);
  font-weight: var(--fw-pj-h1);
  line-height: calc(55 * var(--k));
  color: var(--ink-soft);
}

.pf__title span { display: block; }
.pf__title-accent { color: var(--accent); }

.pf__lead {
  margin-top: calc(18 * var(--k));
  max-width: calc(710 * var(--k));
  font-size: var(--fs-pj-body);
  font-weight: var(--fw-pj-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

.pf__aside { padding-top: calc(108 * var(--k)); }

.pf__crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(8 * var(--k));
  font-size: var(--fs-pj-crumb);
  font-weight: var(--fw-pj-crumb);
  line-height: calc(24 * var(--k));
  color: var(--ink);
}

.pf__crumbs a {
  color: inherit;
  transition: color var(--t-fast);
}

.pf__crumbs a:hover { color: var(--accent); }

.pf__sort {
  display: block;
  margin-top: calc(32 * var(--k));
}

.pf__select {
  width: 100%;
  min-height: calc(50 * var(--k));
  padding: 0 calc(38 * var(--k)) 0 calc(42 * var(--k));
  border: 1px solid var(--line);
  border-radius: calc(6 * var(--k));
  background-color: #101010;
  /* Стрелката е нарисувана с два наклонени ръба, за да няма inline SVG. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    right calc(28 * var(--k)) center,
    right calc(21 * var(--k)) center;
  background-size: calc(7 * var(--k)) calc(7 * var(--k));
  background-repeat: no-repeat;
  font-family: var(--font);
  font-size: var(--fs-pj-sort);
  font-weight: var(--fw-pj-crumb);
  color: var(--ink);
  appearance: none;
  cursor: pointer;
}
/* ==================== СЕКЦИЯ: ПОРТФОЛИО : КРАЙ ====================== */


/* ==================== СЕКЦИЯ: ГАЛЕРИЯ : НАЧАЛО ====================== */
.gal {
  position: relative;
  padding-top: calc(63 * var(--k));
  padding-bottom: 0;
}

.gal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(75.5 * var(--k));
  row-gap: calc(113 * var(--k));
  width: 100%;
  max-width: calc(1559 * var(--k));
  list-style: none;
}

/* Третият ред в макета стои с 32px по-надолу от втория. */
.gal__grid > :nth-child(n+7) { margin-top: calc(32 * var(--k)); }

.pcard {
  min-width: 0;
  --pcard-overlay: linear-gradient(180deg, rgba(0, 0, 0, .08) 16%, rgba(0, 0, 0, .88) 100%);
}

.pcard__surface {
  display: block;
  color: inherit;
  outline: 0;
  transition: transform .28s var(--ease-enter), filter .28s var(--ease-enter);
}

/* Тънката градиентна черта по левия ръб — само на СНИМКАТА, не и под надписа.
   Ако седи на целия линк, градиентът се показва като лента зад надписа. */
.pcard__frame {
  display: block;
  padding-left: calc(4 * var(--k));
  background: var(--gradient-rule);
}

.pcard__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 465 / 593;
  background: var(--bg);
}

.pcard__surface:hover,
.pcard__surface:focus-visible {
  transform: translateY(-4px);
  filter: brightness(1.03);
}

.pcard__surface:focus-visible {
  outline: 3px solid var(--accent-teal);
  outline-offset: 5px;
  box-shadow: var(--shadow-hover);
}

.pcard__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg);
  transition: transform .32s var(--ease-enter), filter .32s var(--ease-enter), opacity .32s var(--ease-enter);
}

.pcard__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(22px, calc(38 * var(--k)), 38px);
  background: var(--pcard-overlay);
  color: #fff;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .28s var(--ease-enter), transform .28s var(--ease-enter);
  pointer-events: none;
}

.pcard__title {
  display: block;
  font-size: var(--fs-pj-cap);
  font-weight: 500;
  line-height: 1.18;
  color: #fff;
}

.pcard__line {
  display: block;
  width: clamp(54px, calc(88 * var(--k)), 88px);
  height: 2px;
  margin: clamp(12px, calc(18 * var(--k)), 18px) 0;
  background: var(--gradient-rule);
}

.pcard__text {
  display: block;
  max-width: 34ch;
  font-size: clamp(15px, calc(18 * var(--k)), 18px);
  font-weight: 260;
  line-height: 1.42;
  color: rgba(255, 255, 255, .94);
}

.pcard__surface:hover .pcard__photo,
.pcard__surface:focus-visible .pcard__photo {
  transform: scale(1.035);
  filter: brightness(.58) saturate(.82);
}

.pcard__surface:hover .pcard__overlay,
.pcard__surface:focus-visible .pcard__overlay {
  opacity: 1;
  transform: none;
}

.pcard__surface:active {
  transform: translateY(-1px) scale(.992);
}

/* Touch устройствата нямат надежден hover. Съдържанието остава видимо, без
   да изисква първо докосване, което би изглеждало като неработеща карта. */
@media (hover: none), (pointer: coarse) {
  .pcard__photo {
    transform: scale(1.012);
    filter: brightness(.62) saturate(.84);
  }

  .pcard__overlay {
    opacity: 1;
    transform: none;
  }
}

.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(13 * var(--k));
  margin-top: calc(75 * var(--k));
}

.pager__btn {
  display: grid;
  place-items: center;
  width: calc(44 * var(--k));
  height: calc(44 * var(--k));
  border: 1px solid var(--accent-teal);
  border-radius: calc(6 * var(--k));
  font-size: var(--fs-pj-sort);
  font-weight: var(--fw-pj-crumb);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.pager__btn:hover { background-color: rgba(37, 219, 222, .18); }

.pager__btn--on {
  background-color: var(--accent-teal);
  border-color: var(--accent-teal);
  color: var(--bg);
}

/* Стрелките са без рамка и с по-тъмен фон. */
.pager__btn--edge {
  border-color: transparent;
  background-color: #2b2b2b;
}

.pager__gap {
  color: var(--ink-muted);
  font-size: var(--fs-pj-sort);
}
/* ==================== СЕКЦИЯ: ГАЛЕРИЯ : КРАЙ ======================== */


/* ================= СЕКЦИЯ: ЕВОЛЮЦИЯ НА ДИЗАЙНА : НАЧАЛО ============= */
.evo {
  position: relative;
  padding-top: calc(86 * var(--k));
  padding-bottom: 0;
}

/* Тази секция и бутонът под нея тръгват от 212, не от 160. */
.evo__inner,
.ask--pj .ask__inner { padding-left: calc(212 * var(--k)); }

.evo__title {
  font-size: var(--fs-pj-h2);
  font-weight: var(--fw-pj-h2);
  line-height: calc(38 * var(--k));
  color: var(--ink);
}

.evo__text {
  margin-top: calc(13 * var(--k));
  max-width: calc(1540 * var(--k));
  font-size: var(--fs-pj-body);
  font-weight: var(--fw-pj-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}
/* ================= СЕКЦИЯ: ЕВОЛЮЦИЯ НА ДИЗАЙНА : КРАЙ =============== */


/* ====== БУТОНЪТ — разликите спрямо „ландшафтно проектиране" ========== */
.ask--pj {
  --fs-lp-btn: clamp(19px, calc(31.14 * var(--k)), 31.14px);
  --fs-lp-note: clamp(16px, calc(20.45 * var(--k)), 20.45px);
  position: relative;
  padding-top: calc(66 * var(--k));
  padding-bottom: calc(100 * var(--k));
}

.ask--pj .ask__inner {
  grid-template-columns: calc(568 * var(--k)) minmax(0, 1fr);
  column-gap: calc(50 * var(--k));
}

.ask--pj .ask__btn {
  min-height: calc(95 * var(--k));
  column-gap: calc(31 * var(--k));
  padding-left: calc(14 * var(--k));
  padding-right: calc(38 * var(--k));
}

.ask--pj .ask__btn-icon {
  width: calc(54 * var(--k));
  height: calc(54 * var(--k));
}

.ask--pj .ask__note {
  max-width: calc(640 * var(--k));
  margin-top: calc(14 * var(--k));
  line-height: calc(29 * var(--k));
}

/* Motion system: дългият текст е opacity-only, а посоката остава върху
   кратките заглавия и картите. Така се избягва Windows/Blink glyph ghosting. */
body[data-page="proekti"] .pf__title[data-reveal],
body[data-page="proekti"] .evo__title[data-reveal] {
  --reveal-transform: translate3d(-20px, 0, 0);
}

body[data-page="proekti"] .pf__lead[data-reveal],
body[data-page="proekti"] .evo__text[data-reveal],
body[data-page="proekti"] .ask__note[data-reveal] {
  --reveal-transform: none;
}

body[data-page="proekti"] .pcard[data-reveal],
body[data-page="proekti"] .ask__btn[data-reveal] {
  --reveal-transform: translate3d(0, 18px, 0);
}

.reveal-ready body[data-page="proekti"] .pf__lead[data-reveal],
.reveal-ready body[data-page="proekti"] .evo__text[data-reveal],
.reveal-ready body[data-page="proekti"] .ask__note[data-reveal] {
  transition-property: opacity;
}

.reveal-ready body[data-page="proekti"] .pcard[data-reveal]:not(.in) .pcard__photo {
  opacity: .28;
  filter: saturate(.35) brightness(.66) blur(2px);
}

.reveal-ready body[data-page="proekti"] .pcard[data-reveal].in .pcard__photo {
  opacity: 1;
}

.reveal-ready body[data-page="proekti"] .pcard[data-reveal].in .pcard__surface:hover .pcard__photo,
.reveal-ready body[data-page="proekti"] .pcard[data-reveal].in .pcard__surface:focus-visible .pcard__photo {
  filter: brightness(.58) saturate(.82);
}

body[data-page="proekti"] .ask__btn {
  min-height: 44px;
  transition: transform var(--t), filter var(--t), box-shadow var(--t), background-color var(--t);
}

body[data-page="proekti"] .ask__btn:focus-visible {
  outline: 3px solid var(--accent-teal);
  outline-offset: 4px;
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

body[data-page="proekti"] .ask__btn:active {
  transform: translateY(0) scale(.985);
  filter: brightness(1.08);
}

.reveal-ready body[data-page="proekti"] .ask__btn[data-reveal].in:hover,
.reveal-ready body[data-page="proekti"] .ask__btn[data-reveal].in:focus-visible {
  transform: translateY(-2px);
}

.reveal-ready body[data-page="proekti"] .ask__btn[data-reveal].in:active {
  transform: translateY(0) scale(.985);
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="proekti"] .pf__glow,
  body[data-page="proekti"] .pcard,
  body[data-page="proekti"] .pcard__surface,
  body[data-page="proekti"] .pcard__photo,
  body[data-page="proekti"] .pcard__overlay,
  body[data-page="proekti"] .ask__btn {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}
/* ==  СТРАНИЦА „ПРОЕКТИ" : КРАЙ                                     == */
/* ==================================================================== */


/* ==================================================================== */
/* ==  СТРАНИЦА „ПОЛИВНИ СИСТЕМИ" : НАЧАЛО                           == */
/* ==  Числата идват от docs/izmervaniya-polivni-sistemi.md           == */
/* ==================================================================== */

.irr,
.sol,
.par {
  --fs-ps-h1: clamp(30px, calc(62.1 * var(--k)), 62.1px);
  --fs-ps-h2: clamp(24px, calc(41.66 * var(--k)), 41.66px);
  --fs-ps-claim: clamp(22px, calc(35.45 * var(--k)), 35.45px);
  --fs-ps-block: clamp(19px, calc(29.15 * var(--k)), 29.15px);
  --fs-ps-body: clamp(15px, calc(20.82 * var(--k)), 20.82px);
  --fs-ps-lead: clamp(15px, calc(20.72 * var(--k)), 20.72px);
  --fs-ps-cell: clamp(14px, calc(20.68 * var(--k)), 20.68px);

  --fw-ps-h1: 264;
  --fw-ps-h2: 284;
  --fw-ps-claim: 241;
  --fw-ps-block: 239;
  --fw-ps-body: 153;
  --fw-ps-lead: 262;
  --fw-ps-cell: 162;
}

/* ==================== СЕКЦИЯ: ХЕРО : НАЧАЛО ========================= */
/* Схемата слиза 290px под секцията — стига до заглавието на следващата и
   стои ПОД него. Затова .sol се вдига с z-index. */
.irr {
  position: relative;
  padding-top: calc(112 * var(--k));
  padding-bottom: 0;
}

.irr__scheme {
  position: absolute;
  z-index: 0;
  top: calc(9 * var(--k));
  right: 0;
  width: calc(1020 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.irr__inner {
  position: relative;
  z-index: 1;
}

.irr__title {
  font-size: var(--fs-ps-h1);
  font-weight: var(--fw-ps-h1);
  line-height: calc(55 * var(--k));
  color: var(--ink-soft);
}

.irr__title span { display: block; }
.irr__title-accent { color: var(--accent); }

.irr__lead {
  margin-top: calc(47 * var(--k));
  max-width: calc(680 * var(--k));
  font-size: var(--fs-ps-body);
  font-weight: var(--fw-ps-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

.irr__claim {
  margin-top: calc(54 * var(--k));
  font-size: var(--fs-ps-claim);
  font-weight: var(--fw-ps-claim);
  line-height: calc(31 * var(--k));
  color: var(--accent);
}

.irr__claim span { display: block; }
/* ==================== СЕКЦИЯ: ХЕРО : КРАЙ =========================== */


/* ============ СЕКЦИЯ: ПОЛИВНИ РЕШЕНИЯ : НАЧАЛО ====================== */
.sol {
  position: relative;
  z-index: 1;
  padding-top: calc(160 * var(--k));
  padding-bottom: 0;
}

.sol__title {
  font-size: var(--fs-ps-h2);
  font-weight: var(--fw-ps-h2);
  line-height: calc(50 * var(--k));
  color: var(--ink);
  text-align: center;
}

.sol__title::after {
  content: '';
  display: block;
  width: calc(224 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(27 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.sol__lead {
  margin-top: calc(21 * var(--k));
  font-size: var(--fs-ps-lead);
  font-weight: var(--fw-ps-lead);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
  text-align: center;
}

/* Всеки блок: текст вляво, снимка вдясно до ръба на контейнера.
   Горе вляво минава къса градиентна черта. */
.sblock {
  position: relative;
  margin-top: calc(35 * var(--k));
  padding-top: calc(67 * var(--k));
  padding-right: calc(700 * var(--k));
}

/* Височината на блока се държи от СНИМКАТА, не от текста — тя е абсолютна,
   затова всеки блок носи собствена min-height. Третият е нарочно по-нисък:
   снимката му минава под заглавието на следващата секция, както в макета. */
.sblock--eng { min-height: calc(591 * var(--k)); --sb-top: 0; }
.sblock--mount { min-height: calc(562 * var(--k)); --sb-top: 10; }
.sblock--season { min-height: calc(460 * var(--k)); --sb-top: -2; }

.sblock--mount { margin-top: calc(63 * var(--k)); }
.sblock--season { margin-top: calc(91 * var(--k)); }

.sblock::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(7 * var(--k));
  width: calc(416 * var(--k));
  height: calc(2 * var(--k));
  background: var(--gradient-accent);
}

.sblock__photo {
  position: absolute;
  top: calc(var(--sb-top, 0) * var(--k));
  right: 0;
  width: calc(670 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.sblock--eng { --sb-accent: var(--accent); }
.sblock--mount { --sb-accent: var(--accent-teal); }
.sblock--season { --sb-accent: var(--accent-pink); }

.sblock__body {
  position: relative;
  padding-left: calc(49 * var(--k));
}

.sblock__title {
  font-size: var(--fs-ps-block);
  font-weight: var(--fw-ps-block);
  line-height: calc(36 * var(--k));
  color: var(--sb-accent);
}

.sblock__rule {
  display: block;
  width: calc(224 * var(--k));
  height: calc(3 * var(--k));
  margin-top: calc(27 * var(--k));
  background: var(--gradient-accent);
}

.slist {
  margin-top: calc(16 * var(--k));
  list-style: none;
}

.sitem + .sitem { margin-top: calc(32 * var(--k)); }

.sitem__lead,
.sitem__text {
  font-size: var(--fs-ps-body);
  font-weight: var(--fw-ps-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

.sitem__lead::before {
  content: '•';
  margin-right: calc(6 * var(--k));
  color: var(--sb-accent);
}
/* ============ СЕКЦИЯ: ПОЛИВНИ РЕШЕНИЯ : КРАЙ ======================== */


/* ============ СЕКЦИЯ: ПАРАМЕТРИ : НАЧАЛО ============================ */
.par {
  position: relative;
  z-index: 1;
  padding-top: calc(46 * var(--k));
  padding-bottom: 0;
}

.par__glow {
  position: absolute;
  z-index: -1;
  top: calc(-29 * var(--k));
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.par__title {
  font-size: var(--fs-ps-h2);
  font-weight: var(--fw-ps-h2);
  line-height: calc(50 * var(--k));
  color: var(--ink);
  text-align: center;
}

.par__title::after {
  content: '';
  display: block;
  width: calc(224 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(27 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.par__lead {
  margin-top: calc(21 * var(--k));
  font-size: var(--fs-ps-lead);
  font-weight: var(--fw-ps-lead);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
  text-align: center;
}

/* Решетката е 165..1765 — с 5px по-надясно от контейнера, както в
   „процес на работа". */
.par__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(39.5 * var(--k));
  width: 100%;
  margin-top: calc(58 * var(--k));
  margin-left: calc(5 * var(--k));
  margin-right: calc(-5 * var(--k));
  list-style: none;
}

/* Всяка клетка е с градиентна черта горе и отляво. */
.pcell {
  position: relative;
  min-width: 0;
  padding-top: calc(26 * var(--k));
  text-align: center;
}

.pcell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(416 * var(--k));
  height: calc(2 * var(--k));
  background: var(--gradient-accent);
}

.pcell::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(2 * var(--k));
  height: calc(234 * var(--k));
  background: linear-gradient(180deg, var(--accent), var(--accent-pink));
}

.pcell--ready { --pc-accent: var(--accent); }
.pcell--tech { --pc-accent: var(--accent-teal); }
.pcell--full { --pc-accent: var(--accent-pink); }

.pcell__icon {
  display: block;
  width: calc(96 * var(--k));
  height: auto;
  margin-inline: auto;
}

.pcell__title {
  margin-top: calc(15 * var(--k));
  font-size: var(--fs-ps-block);
  font-weight: var(--fw-ps-block);
  line-height: calc(36 * var(--k));
  color: var(--pc-accent);
}

.pcell__rule {
  display: block;
  width: calc(224 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(20 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.pcell__text {
  max-width: calc(455 * var(--k));
  margin: calc(26 * var(--k)) auto 0;
  font-size: var(--fs-ps-cell);
  font-weight: var(--fw-ps-cell);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}
/* ============ СЕКЦИЯ: ПАРАМЕТРИ : КРАЙ ============================== */


/* ====== БУТОНЪТ — разликите спрямо „ландшафтно проектиране" ========== */
.ask--ps {
  --fs-lp-btn: clamp(19px, calc(29.44 * var(--k)), 29.44px);
  --fs-lp-note: clamp(16px, calc(21.01 * var(--k)), 21.01px);
  position: relative;
  z-index: 1;
  padding-top: calc(120 * var(--k));
  padding-bottom: calc(77 * var(--k));
}

.ask--ps .ask__inner {
  grid-template-columns: calc(565 * var(--k)) minmax(0, 1fr);
  column-gap: calc(29 * var(--k));
  padding-left: calc(411 * var(--k));
}

.ask--ps .ask__btn {
  min-height: calc(95 * var(--k));
  column-gap: calc(24 * var(--k));
  padding-left: calc(23 * var(--k));
  padding-right: calc(29 * var(--k));
}

.ask--ps .ask__btn-icon {
  width: calc(55 * var(--k));
  height: calc(55 * var(--k));
}

.ask--ps .ask__note {
  max-width: calc(520 * var(--k));
  margin-top: calc(6 * var(--k));
  line-height: calc(28 * var(--k));
}
/* ==  СТРАНИЦА „ПОЛИВНИ СИСТЕМИ" : КРАЙ                             == */
/* ==================================================================== */


/* ==================================================================== */
/* ==  СТРАНИЦА „ОБУЧЕНИЕ" : НАЧАЛО                                  == */
/* ==  Числата идват от docs/izmervaniya-obuchenie.md                 == */
/* ==  Кутията и бутонът са ПРЕИЗПОЛЗВАНИ през .needs--ob и .ask--ob. == */
/* ==================================================================== */

.edu,
.stru {
  --fs-ob-h1: clamp(30px, calc(62.3 * var(--k)), 62.3px);
  --fs-ob-h2: clamp(24px, calc(41.64 * var(--k)), 41.64px);
  --fs-ob-claim: clamp(21px, calc(33.03 * var(--k)), 33.03px);
  --fs-ob-card: clamp(20px, calc(31.44 * var(--k)), 31.44px);
  --fs-ob-body: clamp(15px, calc(20.74 * var(--k)), 20.74px);
  --fs-ob-lead: clamp(15px, calc(20.72 * var(--k)), 20.72px);

  --fw-ob-h1: 323;
  --fw-ob-h2: 284;
  --fw-ob-claim: 246;
  --fw-ob-card: 298;
  --fw-ob-body: 196;
  --fw-ob-lead: 190;
}

/* ==================== СЕКЦИЯ: ХЕРО : НАЧАЛО ========================= */
.edu {
  position: relative;
  padding-top: calc(112 * var(--k));
  padding-bottom: 0;
  overflow: hidden;
}

.edu__photo {
  position: absolute;
  z-index: 0;
  top: calc(1 * var(--k));
  right: 0;
  width: calc(1070 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.edu__inner {
  position: relative;
  z-index: 1;
}

.edu__title {
  font-size: var(--fs-ob-h1);
  font-weight: var(--fw-ob-h1);
  line-height: calc(55 * var(--k));
  color: var(--ink-soft);
}

.edu__title span { display: block; }
.edu__title-accent { color: var(--accent); }

.edu__lead {
  max-width: calc(665 * var(--k));
  font-size: var(--fs-ob-body);
  font-weight: var(--fw-ob-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

.edu__title + .edu__lead { margin-top: calc(43 * var(--k)); }
.edu__lead + .edu__lead { margin-top: calc(30 * var(--k)); }

/* Претенцията в макета е с ХОРИЗОНТАЛЕН ГРАДИЕНТ — лайм отляво, тюркоаз
   отдясно. Затова текстът е прозрачен, а фонът се изрязва по буквите.
   width: max-content държи градиента точно по дължината на по-дългия ред. */
.edu__claim {
  width: max-content;
  max-width: 100%;
  /* Междуредието е по-малко от буквите, а background-clip: text реже всичко
     извън кутията — затова кутията се разтяга с padding и се свива обратно
     с отрицателен margin, за да не мърда оформлението. */
  margin-top: calc(45 * var(--k));
  margin-bottom: calc(-12 * var(--k));
  padding-block: calc(12 * var(--k));
  font-size: var(--fs-ob-claim);
  font-weight: var(--fw-ob-claim);
  line-height: calc(29 * var(--k));
  background-image: linear-gradient(90deg, var(--accent), var(--accent-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.edu__claim span { display: block; }
/* ==================== СЕКЦИЯ: ХЕРО : КРАЙ =========================== */


/* ============ СЕКЦИЯ: СТРУКТУРА НА ОБУЧЕНИЕТО : НАЧАЛО ============== */
.stru {
  position: relative;
  padding-top: calc(159 * var(--k));
  padding-bottom: 0;
}

.stru__glow {
  position: absolute;
  z-index: -1;
  top: calc(249 * var(--k));
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.stru__title {
  font-size: var(--fs-ob-h2);
  font-weight: var(--fw-ob-h2);
  line-height: calc(50 * var(--k));
  color: var(--ink);
  text-align: center;
}

.stru__title::after {
  content: '';
  display: block;
  width: calc(224 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(28 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.stru__lead {
  margin-top: calc(22 * var(--k));
  font-size: var(--fs-ob-lead);
  font-weight: var(--fw-ob-lead);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
  text-align: center;
}

/* Решетката е 166..1766 — с 6px по-надясно от контейнера. */
.stru__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  column-gap: calc(60.5 * var(--k));
  width: 100%;
  margin-top: calc(48 * var(--k));
  margin-left: calc(6 * var(--k));
  margin-right: calc(-6 * var(--k));
  list-style: none;
}

/* Всяка карта е с градиентна черта горе и отляво. */
.ocard {
  position: relative;
  min-width: 0;
  padding-top: calc(34 * var(--k));
  text-align: center;
}

.ocard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(450 * var(--k));
  height: calc(2 * var(--k));
  background: var(--gradient-accent);
}

.ocard::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(2 * var(--k));
  height: calc(560 * var(--k));
  background: linear-gradient(180deg, var(--oc-accent), transparent);
}

.ocard--edu { --oc-accent: var(--accent); }
.ocard--levels { --oc-accent: var(--accent-magenta); }

/* Средната карта в макета стои 1.5px по-наляво от равномерната решетка, а
   иконките ѝ и на дясната са изнесени още наляво спрямо центъра. */
.ocard--field {
  --oc-accent: var(--accent-teal);
  left: calc(-1.5 * var(--k));
}

.ocard--field .ocard__icon { position: relative; left: calc(-4 * var(--k)); }
.ocard--levels .ocard__icon { position: relative; left: calc(-7 * var(--k)); }

.ocard__icon {
  position: relative;
  display: block;
  width: calc(97 * var(--k));
  height: auto;
  margin-inline: auto;
}

.ocard__title {
  margin-top: calc(8 * var(--k));
  font-size: var(--fs-ob-card);
  font-weight: var(--fw-ob-card);
  line-height: calc(38 * var(--k));
  color: var(--oc-accent);
}

.olist {
  position: relative;
  top: calc(var(--olist-dy, 0) * var(--k));
  margin-top: calc(15 * var(--k));
  padding-left: calc(24 * var(--k));
  list-style: none;
  text-align: left;
}

/* 🔴 Трите списъка НЕ се пренасят на една и съща ширина. Прозорците им
   (виж docs/izmervaniya-obuchenie.md) не се пресичат — макетът е пренасян
   на ръка. Затова всяка карта носи собствена ширина. */
.ocard--edu .olist    { max-width: calc(434 * var(--k)); }
.ocard--field .olist  { max-width: calc(477 * var(--k)); padding-left: calc(32 * var(--k)); }
.ocard--levels .olist { max-width: calc(484 * var(--k)); }

.oitem + .oitem { margin-top: calc(29.5 * var(--k)); }

.oitem__lead,
.oitem__text {
  font-size: var(--fs-ob-body);
  font-weight: var(--fw-ob-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

.oitem__lead::before {
  content: '•';
  margin-right: calc(6 * var(--k));
  color: var(--oc-accent);
}
/* ============ СЕКЦИЯ: СТРУКТУРА НА ОБУЧЕНИЕТО : КРАЙ ================ */


/* ====== КУТИЯ И БУТОН — разликите спрямо „процес на работа" ========== */
.needs--ob {
  --fs-lp-cell-title: clamp(17px, calc(25.8 * var(--k)), 25.8px);
  --fs-lp-cell-text: clamp(14px, calc(19.37 * var(--k)), 19.37px);
  --fs-lp-box-sm: clamp(20px, calc(33.2 * var(--k)), 33.2px);
  --fs-lp-box-lg: clamp(20px, calc(33.2 * var(--k)), 33.2px);
  --fs-lp-box-lead: clamp(16px, calc(21.6 * var(--k)), 21.6px);
  --fw-lp-box-sm: 305;
  --fw-lp-box-lg: 350;
  --fw-lp-box-lead: 200;
  --fw-lp-cell-title: 275;
  --fw-lp-cell-text: 150;
  padding-top: calc(119 * var(--k));
}

.needs--ob .needs__box {
  width: 100%;
  margin-left: calc(5 * var(--k));
  margin-right: calc(-5 * var(--k));
}

.needs--ob .ncell {
  --nc-shift: 1;
  --nc-top: 0;
  padding-top: calc(63 * var(--k));
  padding-bottom: calc(50.5 * var(--k));
}

/* Клетките тук са по-широки от тези в „процес на работа" — текстът лежи на
   три реда, затова всяка носи собствена ширина. */
.needs--ob .ncell--docs  { --nc-w: 262; }
.needs--ob .ncell--scope { --nc-w: 362; }
.needs--ob .ncell--brief { --nc-w: 346; }

.needs--ob .ncell__text { line-height: calc(22.5 * var(--k)); }

.needs--ob .ncell__title { line-height: calc(28 * var(--k)); }

.needs--ob .ncell--intro {
  padding-top: calc(74 * var(--k));
  padding-left: calc(32 * var(--k));
}

/* Тук първият ред е лаймов, вторият бял — както в „процес на работа". */
.needs--ob .needs__title-sm {
  line-height: calc(35 * var(--k));
  color: var(--accent);
}

.needs--ob .needs__title-md {
  line-height: calc(35 * var(--k));
  color: var(--ink);
}

.needs--ob .needs__lead {
  max-width: calc(320 * var(--k));
  margin-top: calc(14 * var(--k));
}

.ask--ob {
  --fs-lp-btn: clamp(19px, calc(31.03 * var(--k)), 31.03px);
  --fs-lp-note: clamp(16px, calc(20.96 * var(--k)), 20.96px);
  padding-top: calc(110 * var(--k));
  padding-bottom: calc(60.5 * var(--k));
}

.ask--ob .ask__inner {
  grid-template-columns: calc(668 * var(--k)) minmax(0, 1fr);
  column-gap: calc(42 * var(--k));
  padding-left: calc(341 * var(--k));
}

.ask--ob .ask__btn {
  min-height: calc(96 * var(--k));
  column-gap: calc(24 * var(--k));
  padding-left: calc(20 * var(--k));
  padding-right: calc(26 * var(--k));
}

.ask--ob .ask__note {
  max-width: calc(535 * var(--k));
  margin-top: calc(18 * var(--k));
  line-height: calc(25 * var(--k));
}
/* ==  СТРАНИЦА „ОБУЧЕНИЕ" : КРАЙ                                    == */
/* ==================================================================== */


/* ==================================================================== */
/* ==  СТРАНИЦА „БУТИК" : НАЧАЛО                                     == */
/* ==  Числата идват от docs/izmervaniya-butik.md                     == */
/* ==================================================================== */

.shop,
.sel,
.terms {
  --fs-bu-h1: clamp(30px, calc(62 * var(--k)), 62px);
  --fs-bu-h2: clamp(24px, calc(41.67 * var(--k)), 41.67px);
  --fs-bu-claim: clamp(21px, calc(33.02 * var(--k)), 33.02px);
  --fs-bu-blk: clamp(20px, calc(31.5 * var(--k)), 31.5px);
  --fs-bu-card: clamp(19px, calc(29.21 * var(--k)), 29.21px);
  --fs-bu-body: clamp(15px, calc(20.76 * var(--k)), 20.76px);
  --fs-bu-lead: clamp(15px, calc(20.77 * var(--k)), 20.77px);
  --fs-bu-cell: clamp(14px, calc(20.67 * var(--k)), 20.67px);

  --fw-bu-h1: 300;
  --fw-bu-h2: 284;
  --fw-bu-claim: 246;
  --fw-bu-blk: 239;
  --fw-bu-card: 239;
  --fw-bu-body: 170;
  --fw-bu-lead: 180;
  --fw-bu-cell: 170;
}

/* ==================== СЕКЦИЯ: ХЕРО : НАЧАЛО ========================= */
/* Снимката слиза 190px под секцията — стига до заглавието на следващата и
   стои ПОД него. Затова .sel се вдига с z-index, а .shop НЕ реже. */
.shop {
  position: relative;
  padding-top: calc(112 * var(--k));
  padding-bottom: 0;
}

.shop__photo {
  position: absolute;
  z-index: 0;
  top: calc(var(--ph-dy, 1) * var(--k));
  right: calc(var(--ph-dx, 0) * var(--k));
  width: calc(1140 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.shop__inner {
  position: relative;
  z-index: 1;
}

.shop__title {
  font-size: var(--fs-bu-h1);
  font-weight: var(--fw-bu-h1);
  line-height: calc(55 * var(--k));
  color: var(--ink-soft);
}

.shop__title span { display: block; }
.shop__title-accent { color: var(--accent); }

.shop__lead {
  max-width: calc(610 * var(--k));
  font-size: var(--fs-bu-body);
  font-weight: var(--fw-bu-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

/* Първият абзац се пренася по-тясно от втория — макетът е ръчно пренасян. */
.shop__lead:first-of-type { max-width: calc(500 * var(--k)); }

.shop__title + .shop__lead { margin-top: calc(44 * var(--k)); }
.shop__lead + .shop__lead { margin-top: calc(30 * var(--k)); }

.shop__claim {
  margin-top: calc(30 * var(--k));
  font-size: var(--fs-bu-claim);
  font-weight: var(--fw-bu-claim);
  line-height: calc(28 * var(--k));
  color: var(--accent);
}

.shop__claim span { display: block; }
/* ==================== СЕКЦИЯ: ХЕРО : КРАЙ =========================== */


/* ============ СЕКЦИЯ: СЕЛЕКТИРАНИ ДЕТАЙЛИ : НАЧАЛО ================== */
.sel {
  position: relative;
  z-index: 1;
  padding-top: calc(136 * var(--k));
  padding-bottom: 0;
}

.sel__title {
  font-size: var(--fs-bu-h2);
  font-weight: var(--fw-bu-h2);
  line-height: calc(50 * var(--k));
  color: var(--ink);
  text-align: center;
}

.sel__title::after {
  content: '';
  display: block;
  width: calc(223 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(27 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.sel__lead {
  margin-top: calc(23 * var(--k));
  font-size: var(--fs-bu-lead);
  font-weight: var(--fw-bu-lead);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
  text-align: center;
}

/* Двете колони НЕ са еднакво широки — лявата е 750, дясната 743, а цялата
   решетка тръгва 26px след контейнера. Така рамките лягат на 934 и 1758. */
.sel__grid {
  display: grid;
  grid-template-columns: calc(750 * var(--k)) calc(743 * var(--k));
  column-gap: calc(81 * var(--k));
  row-gap: calc(149 * var(--k));
  width: 100%;
  margin-top: calc(44 * var(--k));
  margin-left: calc(26 * var(--k));
  margin-right: calc(-26 * var(--k));
  list-style: none;
}

.sblk {
  position: relative;
  min-width: 0;
  min-height: calc(601 * var(--k));
}

.sblk:nth-child(n+3) { min-height: calc(514 * var(--k)); }

/* Дясната отвесна и долната водоравна черта са един и същ градиент:
   прозрачно → маджента → тюркоаз. */
.sblk::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(2 * var(--k));
  background: linear-gradient(180deg, transparent, var(--accent-magenta) 45%, var(--accent-teal));
  opacity: .85;
}

.sblk::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: calc(-1.5 * var(--k));
  left: 0;
  height: calc(1.5 * var(--k));
  background: linear-gradient(90deg, transparent, var(--accent-magenta) 45%, var(--accent-teal));
  opacity: .85;
}

.sblk__title {
  font-size: var(--fs-bu-blk);
  font-weight: var(--fw-bu-blk);
  line-height: calc(38 * var(--k));
  color: var(--accent-teal);
}

.sblk__art {
  position: absolute;
  right: calc(3 * var(--k));
  bottom: calc(1 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.sblk--plants .sblk__art { width: calc(353 * var(--k)); }
.sblk--pots .sblk__art { width: calc(502 * var(--k)); }
.sblk--decor .sblk__art { width: calc(412 * var(--k)); right: calc(4 * var(--k)); }
.sblk--tools .sblk__art { width: calc(517 * var(--k)); }

.sblist {
  margin-top: calc(22 * var(--k));
  padding-left: 0;
  list-style: none;
}

/* В долния ред макетът е сложил списъка 7px по-високо под заглавието. */
.sblk:nth-child(n+3) .sblist { margin-top: calc(15 * var(--k)); }

.sbitem + .sbitem { margin-top: calc(30 * var(--k)); }

.sbitem__lead,
.sbitem__text {
  font-size: var(--fs-bu-body);
  font-weight: var(--fw-bu-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

.sbitem__lead::before {
  content: '•';
  margin-right: calc(13 * var(--k));
  color: var(--accent-teal);
}

.sblk--plants .sbitem__text { max-width: calc(685 * var(--k)); }
.sblk--pots .sbitem__text { max-width: calc(632 * var(--k)); }
.sblk--decor .sbitem__text { max-width: calc(677 * var(--k)); }
.sblk--tools .sbitem__text { max-width: calc(690 * var(--k)); }

/* Последните два абзаца в първия блок се пренасят по-тясно — илюстрацията
   заема дясната половина. */
.sblk--plants .sbitem:nth-child(3) .sbitem__text { max-width: calc(608 * var(--k)); }
.sblk--plants .sbitem:nth-child(4) .sbitem__text { max-width: calc(422 * var(--k)); }
/* ============ СЕКЦИЯ: СЕЛЕКТИРАНИ ДЕТАЙЛИ : КРАЙ ==================== */


/* ========== СЕКЦИЯ: ПАРАМЕТРИ НА ПОКУПКАТА : НАЧАЛО ================= */
.terms {
  position: relative;
  padding-top: calc(142 * var(--k));
  padding-bottom: 0;
}

/* Заглавието, чертата и уводът в тази секция стоят 6px по-наляво от центъра
   на контейнера — така са в макета. */
.terms__title {
  position: relative;
  left: calc(-6 * var(--k));
  font-size: var(--fs-bu-h2);
  font-weight: var(--fw-bu-h2);
  line-height: calc(50 * var(--k));
  color: var(--ink);
  text-align: center;
}

.terms__title::after {
  content: '';
  display: block;
  width: calc(223 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(28 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.terms__lead {
  position: relative;
  left: calc(-6 * var(--k));
  margin-top: calc(22 * var(--k));
  font-size: var(--fs-bu-lead);
  font-weight: var(--fw-bu-lead);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
  text-align: center;
}

.terms__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(46.5 * var(--k));
  width: calc(1593 * var(--k));
  max-width: 100%;
  margin-top: calc(58 * var(--k));
  margin-left: calc(3 * var(--k));
  list-style: none;
}

/* Рамката свети силно горе вляво и изчезва надолу вдясно. */
.bcard {
  position: relative;
  min-width: 0;
  padding: calc(34 * var(--k)) calc(24 * var(--k)) calc(46 * var(--k));
  border-radius: calc(14 * var(--k));
  text-align: center;
}

.bcard::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: calc(2 * var(--k));
  border-radius: inherit;
  background: linear-gradient(135deg, var(--bc-accent), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .95;
  pointer-events: none;
}

.bcard--limit { --bc-accent: var(--accent); }
.bcard--cart { --bc-accent: var(--accent-teal); }
.bcard--bank { --bc-accent: var(--accent-pink); }

.bcard__icon {
  display: block;
  width: calc(81 * var(--k));
  height: auto;
  margin-inline: auto;
}

.bcard__title {
  margin-top: calc(17 * var(--k));
  font-size: var(--fs-bu-card);
  font-weight: var(--fw-bu-card);
  line-height: calc(36 * var(--k));
  color: var(--bc-accent);
}

.bcard__rule {
  display: block;
  width: calc(223 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(29 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

/* Всяка карта се пренася на своя ширина; средната има и ръчен пренос след
   „витрина," — в макета редът свършва там, макар „а" да се побира. */
.bcard--cart .bcard__text { max-width: calc(440 * var(--k)); }
.bcard--bank .bcard__text { max-width: calc(415 * var(--k)); }

.bcard__text {
  max-width: calc(400 * var(--k));
  margin: calc(17 * var(--k)) auto 0;
  font-size: var(--fs-bu-cell);
  font-weight: var(--fw-bu-cell);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}
/* ========== СЕКЦИЯ: ПАРАМЕТРИ НА ПОКУПКАТА : КРАЙ =================== */


/* ====== ЗАПИТВАНЕ — разликите спрямо основния бутон ================== */
.ask--bu {
  --fs-lp-btn: clamp(19px, calc(30.8 * var(--k)), 30.8px);
  --fs-lp-note: clamp(16px, calc(21 * var(--k)), 21px);
  padding-top: calc(110 * var(--k));
  padding-bottom: calc(129 * var(--k));
}

.ask--bu .ask__inner {
  grid-template-columns: calc(569 * var(--k)) minmax(0, 1fr);
  column-gap: calc(45 * var(--k));
  padding-left: calc(377 * var(--k));
}

.ask--bu .ask__btn {
  min-height: calc(95 * var(--k));
  column-gap: calc(23 * var(--k));
  padding-left: calc(26 * var(--k));
  padding-right: calc(24 * var(--k));
}

.ask--bu .ask__note {
  max-width: calc(560 * var(--k));
  margin-top: calc(21 * var(--k));
  line-height: calc(25 * var(--k));
}

/* CMS каталог: снимката е контрол за достъпна fullscreen галерия. */
.boutique-card__image-button.sblk__art {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: zoom-in;
  box-shadow: none;
  transition: filter var(--t), transform var(--t), box-shadow var(--t);
}

.boutique-card__image {
  display: block;
  width: 100%;
  height: auto;
  transition: filter var(--t), transform var(--t), opacity var(--t);
}

.boutique-card__zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--ink);
  font-size: clamp(15px, calc(20 * var(--k)), 20px);
  letter-spacing: .04em;
  text-align: center;
  background: rgba(0, 0, 0, .72);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t), transform var(--t);
}

.boutique-card__image-button:hover,
.boutique-card__image-button:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 42px rgba(37, 219, 222, .2);
}

.boutique-card__image-button:hover .boutique-card__image,
.boutique-card__image-button:focus-visible .boutique-card__image {
  filter: brightness(.42);
  transform: scale(1.035);
}

.boutique-card__image-button:hover .boutique-card__zoom,
.boutique-card__image-button:focus-visible .boutique-card__zoom {
  opacity: 1;
  transform: none;
}

.boutique-lightbox {
  width: min(94vw, 1500px);
  max-width: none;
  height: min(92vh, 1000px);
  max-height: none;
  margin: auto;
  padding: 56px 72px 40px;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid rgba(0, 191, 249, .55);
  border-radius: 18px;
  background: rgba(0, 0, 0, .97);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .9), 0 0 42px rgba(221, 0, 253, .18);
}

.boutique-lightbox::backdrop {
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(8px);
}

.boutique-lightbox__figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: 16px;
  width: 100%;
  height: 100%;
  margin: 0;
}

.boutique-lightbox__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.boutique-lightbox__counter {
  min-height: 24px;
  color: var(--ink-soft);
  font-size: 16px;
  text-align: center;
}

.boutique-lightbox__close,
.boutique-lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  background: rgba(0, 0, 0, .76);
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.boutique-lightbox__close:hover,
.boutique-lightbox__close:focus-visible,
.boutique-lightbox__nav:hover,
.boutique-lightbox__nav:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(159, 255, 1, .24);
  transform: scale(1.06);
}

.boutique-lightbox__close {
  top: 12px;
  right: 14px;
  width: 42px;
  height: 42px;
  font-size: 32px;
  line-height: 1;
}

.boutique-lightbox__nav {
  top: 50%;
  width: 56px;
  height: 56px;
  font-size: 44px;
  transform: translateY(-50%);
}

.boutique-lightbox__nav:hover,
.boutique-lightbox__nav:focus-visible { transform: translateY(-50%) scale(1.06); }
.boutique-lightbox__nav--prev { left: 12px; }
.boutique-lightbox__nav--next { right: 12px; }

@media (max-width: 700px) {
  .boutique-lightbox {
    width: 100vw;
    height: 100dvh;
    padding: 60px 18px 34px;
    border: 0;
    border-radius: 0;
  }

  .boutique-lightbox__nav {
    top: auto;
    bottom: 16px;
    width: 48px;
    height: 48px;
    transform: none;
  }

  .boutique-lightbox__nav:hover,
  .boutique-lightbox__nav:focus-visible { transform: scale(1.06); }
  .boutique-lightbox__nav--prev { left: 18px; }
  .boutique-lightbox__nav--next { right: 18px; }
}
/* ==  СТРАНИЦА „БУТИК" : КРАЙ                                       == */
/* ==================================================================== */


/* ==================================================================== */
/* ==  СТРАНИЦА „БЛОГ" : НАЧАЛО                                      == */
/* ==  Числата идват от docs/izmervaniya-blog-listing.md              == */
/* ==================================================================== */

.jour,
.cats,
.share,
.posts {
  --fs-bg-h1: clamp(30px, calc(62.2 * var(--k)), 62.2px);
  --fs-bg-h2: clamp(24px, calc(41.68 * var(--k)), 41.68px);
  --fs-bg-claim: clamp(21px, calc(32.94 * var(--k)), 32.94px);
  --fs-bg-cat: clamp(19px, calc(29.23 * var(--k)), 29.23px);
  --fs-bg-tag: clamp(15px, calc(21.55 * var(--k)), 21.55px);
  --fs-bg-rule: clamp(16px, calc(23.11 * var(--k)), 23.11px);
  --fs-bg-body: clamp(15px, calc(20.82 * var(--k)), 20.82px);
  --fs-bg-lead: clamp(15px, calc(20.78 * var(--k)), 20.78px);
  --fs-bg-post: clamp(15px, calc(20.72 * var(--k)), 20.72px);
  --fs-bg-date: clamp(14px, calc(19.14 * var(--k)), 19.14px);
  --fs-bg-label: clamp(13px, calc(16.63 * var(--k)), 16.63px);
  --fs-bg-btn: clamp(15px, calc(21.5 * var(--k)), 21.5px);

  --fw-bg-h1: 300;
  --fw-bg-h2: 284;
  --fw-bg-claim: 246;
  --fw-bg-cat: 239;
  --fw-bg-tag: 170;
  --fw-bg-rule: 250;
  --fw-bg-body: 156;
  --fw-bg-lead: 180;
  --fw-bg-post: 200;
  --fw-bg-date: 170;
  --fw-bg-label: 200;
  --fw-bg-btn: 180;
}

/* ==================== СЕКЦИЯ: ХЕРО : НАЧАЛО ========================= */
.jour {
  position: relative;
  padding-top: calc(112 * var(--k));
  padding-bottom: 0;
}

.jour__photo {
  position: absolute;
  z-index: 0;
  top: calc(1 * var(--k));
  right: 0;
  width: calc(1100 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.jour__inner {
  position: relative;
  z-index: 1;
}

.jour__title {
  font-size: var(--fs-bg-h1);
  font-weight: var(--fw-bg-h1);
  line-height: calc(55 * var(--k));
  color: var(--ink-soft);
}

.jour__title span { display: block; }
.jour__title-accent { color: var(--accent); }

.jour__lead {
  max-width: calc(660 * var(--k));
  font-size: var(--fs-bg-body);
  font-weight: var(--fw-bg-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

.jour__title + .jour__lead { margin-top: calc(48 * var(--k)); }
.jour__lead + .jour__lead { margin-top: calc(30 * var(--k)); }

.jour__claim {
  margin-top: calc(23 * var(--k));
  font-size: var(--fs-bg-claim);
  font-weight: var(--fw-bg-claim);
  line-height: calc(29 * var(--k));
  color: var(--accent);
}

.jour__claim span { display: block; }
/* ==================== СЕКЦИЯ: ХЕРО : КРАЙ =========================== */


/* ============ СЕКЦИЯ: ТЕМАТИЧНИ КАТЕГОРИИ : НАЧАЛО ================== */
.cats {
  position: relative;
  z-index: 1;
  padding-top: calc(110 * var(--k));
  padding-bottom: 0;
}

/* Мъглявината под картите е ИЗОБРАЖЕНИЕ — двете ѝ петна (зелено вляво,
   лилаво вдясно) стигат L ≈ 100 и се отчитат от pixelmatch. */
.cats__glow {
  position: absolute;
  z-index: -1;
  top: calc(var(--cats-glow-top, 238) * var(--k));
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.cats__title {
  font-size: var(--fs-bg-h2);
  font-weight: var(--fw-bg-h2);
  line-height: calc(50 * var(--k));
  color: var(--ink);
  text-align: center;
}

.cats__title::after {
  content: '';
  display: block;
  width: calc(224 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(25 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.cats__lead {
  margin-top: calc(23 * var(--k));
  font-size: var(--fs-bg-lead);
  font-weight: var(--fw-bg-lead);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
  text-align: center;
}

/* Решетката тръгва 6px след контейнера — така рамките лягат на 166/713/1259. */
.cats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(38.5 * var(--k));
  width: calc(1601 * var(--k));
  max-width: 100%;
  margin-top: calc(59 * var(--k));
  margin-left: calc(6 * var(--k));
  list-style: none;
}

/* Рамката свети горе вляво и изчезва надолу вдясно. */
.ccard {
  position: relative;
  min-width: 0;
  min-height: calc(450 * var(--k));
  padding: calc(52 * var(--k)) calc(24 * var(--k)) calc(40 * var(--k)) calc(63 * var(--k));
  border-radius: calc(20 * var(--k));
}

.ccard::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: calc(1 * var(--k));
  border-radius: inherit;
  background: linear-gradient(119deg, var(--cc-accent), transparent 34%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .65;
  pointer-events: none;
}

.ccard--design { --cc-accent: var(--accent); }
.ccard--tech { --cc-accent: var(--accent-teal); }
.ccard--law { --cc-accent: var(--accent-pink); }

.ccard--tech { padding-left: calc(58 * var(--k)); }
.ccard--law { padding-left: calc(51 * var(--k)); }

.ccard__title {
  font-size: var(--fs-bg-cat);
  font-weight: var(--fw-bg-cat);
  line-height: calc(36 * var(--k));
  color: var(--cc-accent);
}

.ccard__title span { display: block; }

.ccard__rule {
  display: block;
  width: calc(75 * var(--k));
  height: calc(3 * var(--k));
  margin-top: calc(24 * var(--k));
  background: var(--gradient-accent);
}

.ctags {
  margin-top: calc(27 * var(--k));
  padding-left: 0;
  list-style: none;
}

.ctag {
  position: relative;
  left: calc(-7 * var(--k));
  font-size: var(--fs-bg-tag);
  font-weight: var(--fw-bg-tag);
  line-height: calc(40 * var(--k));
  color: var(--ink-soft);
}

.ctag::before {
  content: '•';
  margin-right: calc(6 * var(--k));
  color: var(--cc-accent);
}

/* Бутонът стои на фиксирано разстояние от дъното на картата. */
.ccard__btn {
  position: absolute;
  left: calc(55 * var(--k));
  bottom: calc(40 * var(--k));
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: calc(15 * var(--k));
  width: calc(276 * var(--k));
  min-height: calc(59 * var(--k));
  padding-left: calc(13 * var(--k));
  border: 1px solid var(--cc-accent);
  border-radius: calc(4 * var(--k));
  color: var(--cc-accent);
  text-decoration: none;
  transition: filter var(--t-fast);
}

.ccard--tech .ccard__btn { left: calc(51 * var(--k)); }
.ccard--law .ccard__btn { left: calc(43 * var(--k)); }

.ccard__btn:hover { filter: brightness(1.15); }

.ccard__btn-text {
  font-size: var(--fs-bg-btn);
  font-weight: var(--fw-bg-btn);
  line-height: 1.1;
}

.ccard__btn-arrow {
  font-size: clamp(16px, calc(26 * var(--k)), 26px);
  line-height: 1;
}
/* ============ СЕКЦИЯ: ТЕМАТИЧНИ КАТЕГОРИИ : КРАЙ ==================== */


/* ========= СЕКЦИЯ: СПОДЕЛЯНЕ НА СЪДЪРЖАНИЕТО : НАЧАЛО =============== */
.share {
  position: relative;
  z-index: 1;
  padding-top: calc(147 * var(--k));
  padding-bottom: calc(55 * var(--k));
}

.share__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: calc(700 * var(--k)) minmax(0, 1fr);
  column-gap: calc(85 * var(--k));
}

.share__body { padding-top: calc(10 * var(--k)); }

.share__title {
  font-size: var(--fs-bg-h2);
  font-weight: var(--fw-bg-h2);
  line-height: calc(50 * var(--k));
  color: var(--ink);
}

.share__rule {
  display: block;
  width: calc(223 * var(--k));
  height: calc(3 * var(--k));
  margin-top: calc(31 * var(--k));
  background: var(--gradient-accent);
}

.share__lead {
  max-width: calc(500 * var(--k));
  margin-top: calc(23 * var(--k));
  font-size: var(--fs-bg-body);
  font-weight: var(--fw-bg-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

/* Снимката лежи в левия долен ъгъл на секцията и излиза от контейнера. */
.share__photo {
  position: absolute;
  z-index: 0;
  left: calc(var(--sp-dx, 0) * var(--k));
  bottom: calc(var(--sp-dy, -1) * var(--k));
  width: calc(800 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.rules {
  padding-left: 0;
  list-style: none;
}

/* Иконките стоят на равни 165px — независимо колко реда има текстът. */
.rule {
  display: grid;
  grid-template-columns: calc(108 * var(--k)) minmax(0, 1fr);
  column-gap: calc(36 * var(--k));
  min-height: calc(165 * var(--k));
}

.rule__icon {
  width: calc(108 * var(--k));
  height: auto;
}

.rule__body { padding-top: calc(9 * var(--k)); }

.rule__title {
  font-size: var(--fs-bg-rule);
  font-weight: var(--fw-bg-rule);
  line-height: calc(24 * var(--k));
  color: var(--ink);
}

/* Първото правило има ръчен пренос след „собственост" — прозорецът му е
   противоречив ([570.5, 550.4)). */
.rule__text {
  max-width: calc(582 * var(--k));
  margin-top: calc(2 * var(--k));
  font-size: clamp(15px, calc(20.7 * var(--k)), 20.7px);
  font-weight: var(--fw-bg-body);
  line-height: calc(24 * var(--k));
  color: var(--ink-soft);
}
/* ========= СЕКЦИЯ: СПОДЕЛЯНЕ НА СЪДЪРЖАНИЕТО : КРАЙ ================= */


/* ============ СЕКЦИЯ: ПОСЛЕДНИ ПУБЛИКАЦИИ : НАЧАЛО ================== */
.posts {
  position: relative;
  z-index: 1;
  padding-top: calc(118 * var(--k));
  padding-bottom: calc(117 * var(--k));
}

.posts__title {
  font-size: var(--fs-bg-h2);
  font-weight: var(--fw-bg-h2);
  line-height: calc(50 * var(--k));
  color: var(--ink);
  text-align: center;
}

.posts__title::after {
  content: '';
  display: block;
  width: calc(224 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(37 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

/* Картите са точно 368px — при 370 снимката се разтяга с 1px и целият
   кадър зашумява. */
.posts__grid {
  display: grid;
  grid-template-columns: repeat(4, calc(369 * var(--k)));
  column-gap: calc(42 * var(--k));
  width: calc(1602 * var(--k));
  max-width: 100%;
  margin-top: calc(49 * var(--k));
  margin-left: calc(-1 * var(--k));
  list-style: none;
}

.post {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: calc(2 * var(--k));
}

.post__link {
  display: block;
  padding-bottom: calc(34 * var(--k));
  color: inherit;
  text-decoration: none;
}

/* Снимката ляга ВЪРХУ горната рамка — в макета кадърът тръгва от 2366. */
.post__photo {
  display: block;
  width: calc(367 * var(--k));
  height: auto;
  margin-top: calc(-1 * var(--k));
}

.post__tag {
  display: block;
  margin-top: calc(23 * var(--k));
  padding-left: calc(26 * var(--k));
  font-size: var(--fs-bg-label);
  font-weight: var(--fw-bg-label);
  line-height: calc(20 * var(--k));
  color: var(--accent);
  text-transform: lowercase;
}

.post__title {
  max-width: calc(276 * var(--k));
  margin-top: calc(19 * var(--k));
  padding-left: calc(26 * var(--k));
  font-size: var(--fs-bg-post);
  font-weight: var(--fw-bg-post);
  line-height: calc(23 * var(--k));
  color: var(--ink-soft);
}

.post__date {
  display: block;
  margin-top: calc(20 * var(--k));
  padding-left: calc(27 * var(--k));
  font-size: var(--fs-bg-date);
  font-weight: var(--fw-bg-date);
  line-height: calc(20 * var(--k));
  color: var(--ink-dim, var(--ink-soft));
}
/* ============ СЕКЦИЯ: ПОСЛЕДНИ ПУБЛИКАЦИИ : КРАЙ ==================== */
/* ==  СТРАНИЦА „БЛОГ" : КРАЙ                                        == */
/* ==================================================================== */


/* ==================================================================== */
/* ==  СТРАНИЦА „ЗА НАС" : НАЧАЛО                                    == */
/* ==  Числата идват от docs/izmervaniya-za-nas.md                    == */
/* ==================================================================== */

.about,
.view,
.story {
  --fs-zn-h1: clamp(30px, calc(62.2 * var(--k)), 62.2px);
  --fs-zn-h2: clamp(24px, calc(41.72 * var(--k)), 41.72px);
  --fs-zn-claim: clamp(21px, calc(33.2 * var(--k)), 33.2px);
  --fs-zn-card: clamp(17px, calc(23.09 * var(--k)), 23.09px);
  --fs-zn-cardtext: clamp(14px, calc(18.26 * var(--k)), 18.26px);
  --fs-zn-name: clamp(19px, calc(29.8 * var(--k)), 29.8px);
  --fs-zn-body: clamp(15px, calc(20.75 * var(--k)), 20.75px);
  --fs-zn-lead: clamp(15px, calc(20.8 * var(--k)), 20.8px);
  --fs-zn-story: clamp(15px, calc(20.78 * var(--k)), 20.78px);

  --fw-zn-h1: 300;
  --fw-zn-h2: 284;
  --fw-zn-claim: 246;
  --fw-zn-card: 239;
  --fw-zn-cardtext: 170;
  --fw-zn-name: 246;
  --fw-zn-body: 156;
  --fw-zn-lead: 180;
  --fw-zn-story: 156;
}

/* Page motion follows the shared reveal contract: visible without JS, bounded
   transform/opacity/filter transitions, and a global reduced-motion fallback. */
body[data-page="za-nas"] .about__title[data-reveal] {
  --reveal-transform: translate3d(-28px, 0, 0);
}

/* Long, thin Advent Pro text must not move as one large composited bitmap.
   On Windows/Blink that combination can leave a stale glyph tile while the
   permanent <main> layer is repainted. The copy still fades and staggers, but
   only the short headings, images and timeline icons travel spatially. */
body[data-page="za-nas"] .about__lead[data-reveal],
body[data-page="za-nas"] .about__claim[data-reveal],
body[data-page="za-nas"] .view__lead[data-reveal],
body[data-page="za-nas"] .story__item[data-reveal] {
  --reveal-transform: none;
}

.reveal-ready body[data-page="za-nas"] .about__lead[data-reveal],
.reveal-ready body[data-page="za-nas"] .about__claim[data-reveal],
.reveal-ready body[data-page="za-nas"] .view__lead[data-reveal],
.reveal-ready body[data-page="za-nas"] .story__item[data-reveal] {
  transition-property: opacity;
}

.reveal-ready body[data-page="za-nas"] .story__item[data-reveal] .story__icon {
  transition:
    opacity .3s var(--ease-enter),
    transform .3s var(--ease-enter),
    filter .3s var(--ease-enter);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready body[data-page="za-nas"] .story__item[data-reveal]:not(.in) .story__icon {
  opacity: .3;
  filter: saturate(.45) brightness(.72);
  transform: translate3d(-16px, 0, 0);
}

.reveal-ready body[data-page="za-nas"] .story__item[data-reveal].in .story__icon {
  opacity: 1;
  filter: none;
  transform: none;
}

.reveal-ready body[data-page="za-nas"] .story__item[data-reveal].reveal-complete .story__icon {
  transition-delay: 0ms;
}

body[data-page="za-nas"] .about__photo[data-reveal],
body[data-page="za-nas"] .story__plant[data-reveal] {
  --reveal-transform: translate3d(34px, 0, 0);
}

body[data-page="za-nas"] .view__title[data-reveal],
body[data-page="za-nas"] .story__title[data-reveal] {
  --reveal-transform: translate3d(0, 22px, 0);
}

.reveal-ready body[data-page="za-nas"] img[data-reveal] {
  transition:
    opacity .4s var(--ease-enter),
    transform .4s var(--ease-enter),
    filter .4s var(--ease-enter);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready body[data-page="za-nas"] img[data-reveal]:not(.in) {
  opacity: .24;
  filter: saturate(.35) brightness(.72) blur(2px);
}

.reveal-ready body[data-page="za-nas"] img[data-reveal].in {
  opacity: 1;
  filter: none;
}

.reveal-ready body[data-page="za-nas"] img[data-reveal].reveal-complete {
  transition-delay: 0ms;
}

/* ==================== СЕКЦИЯ: ХЕРО : НАЧАЛО ========================= */
.about {
  position: relative;
  padding-top: calc(112 * var(--k));
  padding-bottom: 0;
}

.about__photo {
  position: absolute;
  z-index: 0;
  top: calc(1 * var(--k));
  right: 0;
  width: calc(1150 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Текстът в херото тръгва 18px след контейнера. */
.about__inner {
  position: relative;
  z-index: 1;
  padding-left: calc(178 * var(--k));
}

.about__title {
  font-size: var(--fs-zn-h1);
  font-weight: var(--fw-zn-h1);
  line-height: calc(55 * var(--k));
  color: var(--ink-soft);
}

.about__title span { display: block; }
.about__title-accent { color: var(--accent); }

.about__lead {
  max-width: calc(640 * var(--k));
  font-size: var(--fs-zn-body);
  font-weight: var(--fw-zn-body);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}

.about__title + .about__lead { margin-top: calc(30 * var(--k)); }
.about__lead + .about__lead { margin-top: calc(38 * var(--k)); }

.about__claim {
  margin-top: calc(16 * var(--k));
  font-size: var(--fs-zn-claim);
  font-weight: var(--fw-zn-claim);
  line-height: calc(29 * var(--k));
  color: var(--accent);
}

.about__claim span { display: block; }
/* ==================== СЕКЦИЯ: ХЕРО : КРАЙ =========================== */


/* ============== СЕКЦИЯ: НАШИЯТ ПОГЛЕД : НАЧАЛО ====================== */
.view {
  position: relative;
  z-index: 1;
  padding-top: calc(188 * var(--k));
  padding-bottom: 0;
}

/* Заглавието, чертата и уводът тук стоят 33px наляво от центъра. */
.view__title,
.view__lead {
  position: relative;
  left: calc(-33 * var(--k));
}

.view__title {
  font-size: var(--fs-zn-h2);
  font-weight: var(--fw-zn-h2);
  line-height: calc(50 * var(--k));
  color: var(--ink);
  text-align: center;
}

.view__title::after {
  content: '';
  display: block;
  width: calc(223 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(47 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.view__lead {
  margin-top: calc(22 * var(--k));
  font-size: var(--fs-zn-lead);
  font-weight: var(--fw-zn-lead);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
  text-align: center;
}

.view__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: calc(40 * var(--k));
  width: 100%;
  margin-top: calc(33 * var(--k));
  list-style: none;
}

/* Рамката е ярка горе вляво и угасва надолу вдясно: маджента → циан → лайм. */
.vcard {
  position: relative;
  min-width: 0;
  min-height: calc(382 * var(--k));
  padding: calc(17 * var(--k)) calc(24 * var(--k)) calc(40 * var(--k));
  border-radius: calc(4 * var(--k));
  text-align: center;
  transition:
    background-color .3s var(--ease-enter),
    box-shadow .3s var(--ease-enter),
    transform .3s var(--ease-enter);
}

.vcard:hover {
  transform: translateY(calc(-5 * var(--k)));
  background: rgba(255, 255, 255, .025);
  box-shadow: 0 calc(20 * var(--k)) calc(52 * var(--k)) rgba(0, 0, 0, .28);
}

.reveal-ready body[data-page="za-nas"] .vcard[data-reveal] {
  transition:
    opacity .4s var(--ease-enter),
    transform .4s var(--ease-enter),
    background-color .3s var(--ease-enter),
    box-shadow .3s var(--ease-enter);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready body[data-page="za-nas"] .vcard[data-reveal].in:hover {
  transform: translateY(calc(-5 * var(--k)));
}

.vcard::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: calc(1 * var(--k));
  border-radius: inherit;
  background: linear-gradient(130deg, var(--accent-pink), var(--accent-cyan) 26%, var(--accent) 46%, transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .8;
  pointer-events: none;
}

.vcard__art {
  position: relative;
  display: block;
  height: auto;
  margin-inline: auto;
  transition: transform .3s var(--ease-enter), filter .3s var(--ease-enter);
}

.vcard:hover .vcard__art {
  transform: scale(1.035);
  filter: brightness(1.08);
}

.vcard--arch .vcard__art { width: calc(154 * var(--k)); }
.vcard--nature .vcard__art { width: calc(139 * var(--k)); margin-top: calc(13 * var(--k)); left: calc(2 * var(--k)); }
.vcard--time .vcard__art { width: calc(138 * var(--k)); margin-top: calc(16 * var(--k)); left: calc(-1 * var(--k)); }
.vcard--clean .vcard__art { width: calc(153 * var(--k)); margin-top: calc(22 * var(--k)); left: calc(3 * var(--k)); }

.vcard__title {
  margin-top: calc(18 * var(--k));
  font-size: var(--fs-zn-card);
  font-weight: var(--fw-zn-card);
  line-height: calc(28 * var(--k));
  color: var(--accent);
}

.vcard--nature .vcard__title { color: var(--accent-teal); margin-top: calc(24 * var(--k)); }
.vcard--time .vcard__title { color: var(--accent-pink); margin-top: calc(20 * var(--k)); }
.vcard--clean .vcard__title { color: var(--accent); margin-top: calc(23 * var(--k)); }

.vcard__rule {
  display: block;
  width: calc(54 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(15 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.vcard__text {
  max-width: calc(300 * var(--k));
  margin: calc(4 * var(--k)) auto 0;
  font-size: var(--fs-zn-cardtext);
  font-weight: var(--fw-zn-cardtext);
  line-height: calc(29 * var(--k));
  color: var(--ink-soft);
}
/* ============== СЕКЦИЯ: НАШИЯТ ПОГЛЕД : КРАЙ ======================== */


/* ============ СЕКЦИЯ: КАК ОТКРИХ СВОЯ ПОЧЕРК : НАЧАЛО =============== */
.story {
  position: relative;
  padding-top: calc(138 * var(--k));
  padding-bottom: calc(108 * var(--k));
}

.story__plant {
  position: absolute;
  z-index: 0;
  top: calc(var(--plant-dy, 160) * var(--k));
  right: 0;
  width: calc(720 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.story__inner {
  position: relative;
  z-index: 1;
}

/* Заглавието на тази секция стои 45px наляво от центъра. */
.story__title {
  position: relative;
  left: calc(-45 * var(--k));
  font-size: var(--fs-zn-h2);
  font-weight: var(--fw-zn-h2);
  line-height: calc(50 * var(--k));
  color: var(--ink);
  text-align: center;
}

.story__title::after {
  content: '';
  display: block;
  width: calc(223 * var(--k));
  height: calc(3 * var(--k));
  margin: calc(25 * var(--k)) auto 0;
  background: var(--gradient-accent);
}

.story__list {
  margin-top: calc(90 * var(--k));
  padding-left: 0;
  list-style: none;
}

/* Иконката е на 177, точката на 243, текстът на 276 — броени от 0. */
.story__item {
  position: relative;
  padding-left: calc(116 * var(--k));
}

/* Отстъпите между елементите не са равни — макетът е подреждан на ръка. */
.story__item:nth-child(2) { margin-top: calc(23 * var(--k)); }
.story__item:nth-child(3) { margin-top: calc(20 * var(--k)); }
.story__item:nth-child(4) { margin-top: calc(32 * var(--k)); }
.story__item:nth-child(5) { margin-top: calc(31 * var(--k)); }

.story__icon {
  position: absolute;
  left: calc(12 * var(--k));
  top: calc(4 * var(--k));
  height: auto;
}

/* Точката и пунктираната връзка между елементите. */
.story__item::before {
  content: '';
  position: absolute;
  left: calc(83 * var(--k));
  top: calc(10 * var(--k));
  width: calc(8 * var(--k));
  height: calc(8 * var(--k));
  border-radius: 50%;
  background: var(--accent);
}

.story__item::after {
  content: '';
  position: absolute;
  left: calc(85.5 * var(--k));
  top: calc(24 * var(--k));
  bottom: calc(-30 * var(--k));
  width: calc(2 * var(--k));
  background-image: linear-gradient(180deg, var(--accent) 50%, transparent 0);
  background-size: 2px 8px;
  background-repeat: repeat-y;
  opacity: .55;
}

.story__item:last-child::after { display: none; }

.story__name {
  font-size: var(--fs-zn-name);
  font-weight: var(--fw-zn-name);
  line-height: calc(34 * var(--k));
  color: var(--accent);
}

.story__item:nth-child(4) .story__text { max-width: calc(var(--w4, 1300) * var(--k)); }
.story__item:nth-child(5) .story__text { max-width: calc(var(--w5, 1050) * var(--k)); }

.story__text {
  max-width: calc(1280 * var(--k));
  margin-top: calc(5 * var(--k));
  font-size: var(--fs-zn-story);
  font-weight: var(--fw-zn-story);
  line-height: calc(30 * var(--k));
  color: var(--ink-soft);
}
/* ============ СЕКЦИЯ: КАК ОТКРИХ СВОЯ ПОЧЕРК : КРАЙ ================= */
/* ==  СТРАНИЦА „ЗА НАС" : КРАЙ                                      == */
/* ==================================================================== */


/* ==================================================================== */
/* ==  СТРАНИЦА „КОНТАКТИ" : НАЧАЛО                                  == */
/* ==  Числата идват от docs/izmervaniya-contacts.md                  == */
/* ==================================================================== */

.cont,
.cmap {
  --fs-ct-h1: clamp(30px, calc(61.8 * var(--k)), 61.8px);
  --fs-ct-body: clamp(15px, calc(20.76 * var(--k)), 20.76px);
  --fs-ct-label: clamp(14px, calc(19.1 * var(--k)), 19.1px);
  --fs-ct-value: clamp(15px, calc(21 * var(--k)), 21px);
  --fs-ct-phone: clamp(19px, calc(28.36 * var(--k)), 28.36px);
  --fs-ct-code: clamp(14px, calc(23 * var(--k)), 23px);
  --fs-ct-form: clamp(19px, calc(29.23 * var(--k)), 29.23px);
  --fs-ct-field: clamp(15px, calc(20.4 * var(--k)), 20.4px);
  --fs-ct-agree: clamp(13px, calc(16.6 * var(--k)), 16.6px);
  --fs-ct-btn: clamp(16px, calc(24 * var(--k)), 24px);

  --fw-ct-h1: 300;
  --fw-ct-body: 156;
  --fw-ct-label: 170;
  --fw-ct-value: 170;
  --fw-ct-phone: 300;
  --fw-ct-form: 200;
  --fw-ct-field: 170;
  --fw-ct-agree: 170;
  --fw-ct-btn: 300;
}

/* ==================== СЕКЦИЯ: КОНТАКТИ : НАЧАЛО ===================== */
.cont {
  position: relative;
  padding-top: calc(111 * var(--k));
  padding-bottom: 0;
}

.cont__glow {
  position: absolute;
  z-index: 0;
  top: calc(1 * var(--k));
  left: 0;
  width: calc(1015 * var(--k));
  height: auto;
  pointer-events: none;
  user-select: none;
}

.cont__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: calc(855 * var(--k)) calc(720 * var(--k));
  column-gap: 0;
}

/* Текстът тръгва 18px след контейнера. */
.cont__body { padding-left: calc(18 * var(--k)); }

.cont__title {
  font-size: var(--fs-ct-h1);
  font-weight: var(--fw-ct-h1);
  line-height: calc(55 * var(--k));
  color: var(--ink-soft);
}

.cont__title span { display: block; }
.cont__title-accent { color: var(--accent); }

.cont__lead {
  max-width: calc(580 * var(--k));
  font-size: var(--fs-ct-body);
  font-weight: var(--fw-ct-body);
  line-height: calc(29 * var(--k));
  color: var(--ink-soft);
}

.cont__title + .cont__lead { margin-top: calc(31 * var(--k)); }
.cont__lead + .cont__lead { margin-top: calc(31 * var(--k)); }

/* Motion stays bounded to opacity/transform and remains readable without JS. */
body[data-page="kontakti"] .cont__glow[data-reveal] {
  --reveal-transform: translate3d(-28px, 0, 0);
}

body[data-page="kontakti"] .cont__body [data-reveal] {
  --reveal-transform: translate3d(-24px, 0, 0);
}

body[data-page="kontakti"] .cform[data-reveal] {
  --reveal-transform: translate3d(28px, 0, 0);
}

body[data-page="kontakti"] .cmap[data-reveal] {
  --reveal-transform: translate3d(0, 24px, 0);
}

.reveal-ready body[data-page="kontakti"] .cont__glow[data-reveal]:not(.in),
.reveal-ready body[data-page="kontakti"] .cmap[data-reveal]:not(.in) .cmap__img {
  filter: blur(7px) brightness(.72);
}

.reveal-ready body[data-page="kontakti"] .cont__glow[data-reveal],
.reveal-ready body[data-page="kontakti"] .cmap[data-reveal] .cmap__img {
  transition-property: opacity, transform, filter;
  transition-duration: var(--t-slow);
  transition-timing-function: var(--ease-enter);
}

/* Отвесната черта минава по цялата височина на блока с данни. */
.cinfo {
  position: relative;
  margin-top: calc(100 * var(--k));
  padding-left: calc(45 * var(--k));
  list-style: none;
}

.cinfo::before {
  content: '';
  position: absolute;
  left: calc(30 * var(--k));
  top: 0;
  bottom: 0;
  width: calc(2 * var(--k));
  background: var(--line-strong);
  opacity: .3;
}

.cinfo__item {
  position: relative;
  padding-left: 0;
}

.cinfo__item:nth-child(2) { margin-top: calc(24 * var(--k)); }
.cinfo__item:nth-child(3) { margin-top: calc(30 * var(--k)); }

.cinfo__icon {
  position: absolute;
  left: calc(-50 * var(--k));
  top: calc(19 * var(--k));
  height: auto;
}

.cinfo__label {
  font-size: var(--fs-ct-label);
  font-weight: var(--fw-ct-label);
  line-height: calc(26 * var(--k));
  color: var(--ink-soft);
}

.cinfo__value {
  font-size: var(--fs-ct-value);
  font-weight: var(--fw-ct-value);
  line-height: calc(26 * var(--k));
}

.cinfo__item--addr .cinfo__value span { display: block; }

.cinfo__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast), filter var(--t-fast), transform var(--t-fast);
}

.cinfo__link:hover,
.cinfo__link:focus-visible {
  filter: brightness(1.2);
  transform: translateY(-2px);
}

/* Телефоните са едри и лаймови, кодът пред тях — дребен. */
.cinfo__item--phone .cinfo__value {
  font-size: var(--fs-ct-phone);
  font-weight: var(--fw-ct-phone);
  line-height: calc(34 * var(--k));
  color: var(--accent);
}

.cinfo__item--phone .cinfo__link + .cinfo__link { margin-left: calc(19 * var(--k)); }

.cinfo__code {
  font-size: var(--fs-ct-code);
  font-weight: var(--fw-ct-phone);
}

.cinfo__item--mail .cinfo__value { color: var(--accent-teal); }
.cinfo__item--addr .cinfo__value { color: var(--accent-pink); }

.cinfo__item--phone .cinfo__label { margin-bottom: calc(2 * var(--k)); }
/* ==================== СЕКЦИЯ: КОНТАКТИ : КРАЙ ======================= */


/* ==================== ФОРМА : НАЧАЛО ================================ */
.cform {
  position: relative;
  align-self: start;
  min-height: calc(633 * var(--k));
  margin-top: calc(26 * var(--k));
  padding: calc(58 * var(--k)) calc(73 * var(--k)) calc(46 * var(--k));
  border-radius: calc(6 * var(--k));
  background: rgba(0, 0, 0, .22);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
  transition: box-shadow var(--t), background-color var(--t);
}

.cform:hover {
  background: rgba(8, 8, 12, .3);
  box-shadow: 0 28px 82px rgba(0, 0, 0, .5);
}

.cform::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: calc(2 * var(--k));
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-pink), var(--accent-teal) 49%, var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.cform__title {
  font-size: var(--fs-ct-form);
  font-weight: var(--fw-ct-form);
  line-height: calc(34 * var(--k));
  color: var(--ink);
  text-align: center;
}

.cform__errors:empty { display: none; }

.cform__errors:not(:empty) {
  margin-top: calc(18 * var(--k));
  padding: calc(12 * var(--k)) calc(16 * var(--k));
  border-left: 3px solid var(--accent-pink);
  color: var(--ink);
  background: rgba(229, 54, 224, .1);
}

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

.cform__field { min-width: 0; }

.cform__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(11 * var(--k));
}

.cform__title + .cform__row { margin-top: calc(32 * var(--k)); }
.cform__row + .cform__row { margin-top: calc(11 * var(--k)); }

.cfield {
  display: block;
  width: 100%;
  min-height: calc(64 * var(--k));
  padding: 0 calc(22 * var(--k));
  border: 1px solid transparent;
  border-radius: calc(4 * var(--k));
  background: rgba(255, 255, 255, .102);
  font-family: inherit;
  font-size: var(--fs-ct-field);
  font-weight: var(--fw-ct-field);
  line-height: calc(60 * var(--k));
  color: var(--ink);
  transition: background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.cfield::placeholder { color: var(--ink-soft); opacity: 1; }
.cfield:hover { background: rgba(255, 255, 255, .14); }
.cfield:focus-visible {
  outline: 0;
  border-color: var(--accent-teal);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, .16), 0 12px 28px rgba(0, 0, 0, .28);
  transform: translateY(-1px);
}

.cfield.is-invalid,
.cform__check.is-invalid { border-color: var(--accent-pink); }

.cfield--area {
  min-height: calc(151 * var(--k));
  margin-top: calc(19 * var(--k));
  padding-top: calc(21 * var(--k));
  line-height: calc(29 * var(--k));
  resize: none;
}

.cform__agree {
  display: grid;
  grid-template-columns: calc(27 * var(--k)) minmax(0, 1fr);
  align-items: center;
  column-gap: calc(18 * var(--k));
  margin-top: calc(45 * var(--k));
  cursor: pointer;
}

.cform__check {
  width: calc(27 * var(--k));
  height: calc(27 * var(--k));
  margin: 0;
  accent-color: var(--accent);
}

.cform__agree-text {
  font-size: var(--fs-ct-agree);
  font-weight: var(--fw-ct-agree);
  line-height: calc(22 * var(--k));
  color: var(--ink-soft);
}

.cform__agree-text a {
  color: inherit;
  text-underline-offset: .18em;
  transition: color var(--t-fast);
}

.cform__agree:hover .cform__agree-text a,
.cform__agree:focus-within .cform__agree-text a { color: var(--accent-teal); }

.cform__send {
  display: grid;
  grid-template-columns: calc(131 * var(--k)) calc(167 * var(--k)) minmax(0, 1fr);
  align-items: center;
  column-gap: calc(12 * var(--k));
  margin-top: calc(27 * var(--k));
}

.cform__captcha {
  display: block;
  width: calc(131 * var(--k));
  height: auto;
  border-radius: calc(4 * var(--k));
}

.cfield--code {
  min-height: calc(55 * var(--k));
  line-height: calc(55 * var(--k));
}

.cform__btn {
  min-height: calc(55 * var(--k));
  border: 0;
  border-radius: calc(4 * var(--k));
  background: var(--gradient-accent);
  font-family: inherit;
  font-size: var(--fs-ct-btn);
  font-weight: var(--fw-ct-btn);
  color: var(--bg);
  cursor: pointer;
  transition: filter var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.cform__btn:hover,
.cform__btn:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 212, 255, .18);
}

.cform__btn:active { transform: translateY(0); }

.cform__send--recaptcha { grid-template-columns: minmax(0, 1fr); }

.cform__success {
  margin-top: calc(40 * var(--k));
  padding: calc(24 * var(--k));
  color: var(--accent);
  text-align: center;
  background: rgba(159, 255, 1, .08);
  border: 1px solid rgba(159, 255, 1, .45);
  border-radius: calc(4 * var(--k));
}
/* ==================== ФОРМА : КРАЙ ================================== */


/* ==================== СЕКЦИЯ: КАРТА : НАЧАЛО ======================== */
.cmap {
  position: relative;
  padding-top: calc(200 * var(--k));
  padding-bottom: calc(124 * var(--k));
}

.cmap__img {
  display: block;
  width: calc(1604 * var(--k));
  max-width: none;
  height: auto;
  margin-left: calc(158 * var(--k));
  transition: filter var(--t), transform var(--t), box-shadow var(--t);
}

.cmap__link {
  display: block;
  color: inherit;
}

.cmap__link:hover .cmap__img,
.cmap__link:focus-visible .cmap__img {
  filter: saturate(1.08) contrast(1.04);
  transform: translateY(-4px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .42);
}
/* ==================== СЕКЦИЯ: КАРТА : КРАЙ ========================== */
/* ==  СТРАНИЦА „КОНТАКТИ" : КРАЙ                                    == */
/* ==================================================================== */


/* ===== СТРАНИЦИ — ТАБЛЕТ И ТЕЛЕФОН : НАЧАЛО ===== */
@media (max-width: 1024px) {
  .hero__cta {
    width: 180px;
    height: 48px;
    top: 78%;
  }

  .philosophy {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .philosophy__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .philosophy__text { margin-top: 0; max-width: none; }
  .philosophy__text p { line-height: 1.55; }
  .philosophy__text p + p { margin-top: 16px; }

  .philosophy__wave {
    top: 0;
    height: 100%;
    opacity: .75;
  }

  .projects {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  /* Трите блока са с много различни съотношения — 1.15, 0.83/0.79 и 0.43.
     В две равни колони до широката снимка зее празно, защото съседната колона
     е двойно по-висока. Затова всеки блок заема свой ред, а двата графитени
     съда се събират един до друг. */
  .projects__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    margin-top: 32px;
    margin-left: 0;
    margin-right: 0;
  }

  .projects__stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 0;
  }

  /* Високата портретна снимка не се разтяга на цялата ширина — ширината ѝ е
     избрана така, че височината ѝ да е колкото на широката снимка отгоре,
     точно както стоят една до друга в макета. */
  .project--tall {
    width: 37.5%;
    margin-inline: auto;
  }

  .landscape {
    padding-top: 56px;
    padding-bottom: 40px;
    background-size: cover;
  }

  .landscape__list { margin-top: 24px; }

  .parks {
    padding-top: 56px;
    padding-bottom: 56px;
    background-size: 100% 100%;
    background-position: center;
  }

  .parks__layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    padding-left: 0;
  }

  .parks__body { padding-top: 0; }
  .parks__body p { line-height: 1.55; }
  .parks__lead { margin-top: 20px; }
  .parks__rule { margin-top: 24px; }
  .parks__note { margin-top: 20px; }

  .parks__thumbs {
    column-gap: 20px;
    margin-top: 28px;
    margin-right: 0;
  }

  /* --- „ландшафтна архитектура" --------------------------------------- */
  .services {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* Неонът става фон на цялата секция — иначе при 100% ширина е по-висок
     от нея и се разлива във футъра. Приглушен, за да остане текстът четим. */
  .services__terrain {
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
  }

  .services__layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  .services__intro { padding-left: 0; }

  .services__title {
    margin-top: 0;
    line-height: 1.05;
  }

  .services__lead {
    margin-top: 20px;
    max-width: none;
    line-height: 1.55;
  }

  .services__marks { margin-top: 24px; }

  .mark {
    gap: 10px;
    font-size: 16px;
    white-space: normal;
  }

  .mark + .mark {
    margin-left: 20px;
    padding-left: 18px;
  }

  .mark__icon,
  .mark--precision .mark__icon,
  .mark--value .mark__icon { height: 24px; }

  .svc {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 20px;
    padding: 24px;
  }

  .svc + .svc { margin-top: 32px; }

  .svc__icon { margin-top: 4px; }

  .svc__text {
    margin-top: 10px;
    line-height: 1.55;
  }

  .svc__subtitle { margin-top: 28px; }

  .svc__points {
    margin-top: 12px;
    padding-left: 20px;
    line-height: 1.5;
  }

  .svc__points li + li { margin-top: 10px; }

  .svc__cta {
    width: 100%;
    max-width: 320px;
    height: 48px;
    margin-top: 26px;
  }

  /* --- „онлайн консултиране" ------------------------------------------ */
  .consult {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* Снимката става фон на цялата секция — при 100% ширина е по-висока от нея
     и иначе се разлива надолу. Приглушена, за да остане текстът четим. */
  .consult__photo {
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .35;
  }

  .consult__layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 44px;
  }

  .consult__title { line-height: 1.05; }

  .consult__lead {
    margin-top: 20px;
    max-width: none;
    line-height: 1.55;
  }

  .consult__notes { margin-top: 28px; }

  .note {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .note + .note { margin-top: 24px; }

  .note__icon { height: 24px; margin-top: 2px; }
  .note__text { max-width: none; line-height: 1.55; }

  .consult__aside { margin-top: 0; }

  .audience { margin-top: 24px; }

  .audience__item {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 18px;
  }

  .audience__item + .audience__item { margin-top: 20px; }

  .audience__text { line-height: 1.4; }

  .booking {
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 16px;
    margin-top: 32px;
    padding: 18px;
    border-radius: 16px;
  }

  .booking__text {
    padding-left: 16px;
    line-height: 1.35;
  }

  .booking__art {
    grid-column: 1 / -1;
    max-width: 320px;
    margin-inline: auto;
  }

  .howto {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .howto__title::after { margin-top: 20px; }

  .howto__cols {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
    max-width: none;
    margin-top: 40px;
    padding-inline: var(--gutter);
  }

  .hcol__icon { width: 72px; }
  .hcol__title { margin-top: 14px; }
  .hcol__lead { margin-top: 14px; line-height: 1.6; }

  .hitem,
  .hcol__title + .hitem {
    margin-top: 22px;
    padding-top: 22px;
  }

  .hitem__icon { height: 26px; }
  .hitem__text { margin-top: 8px; line-height: 1.6; }

  .steps { margin-top: 22px; }

  .steps__item {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
  }

  .steps__item + .steps__item { margin-top: 22px; }

  .steps__item:not(:last-child)::after {
    left: 24px;
    top: 48px;
    height: 22px;
  }

  .steps__num { width: 48px; height: 48px; }
  .steps__text { margin-top: 6px; line-height: 1.5; }

  .hcol__art {
    width: 100%;
    max-width: 330px;
    margin: 28px auto 0;
  }

  .finance {
    padding-top: 48px;
    padding-bottom: 40px;
  }

  .finance__list {
    margin-top: 28px;
    padding-inline: 0;
  }

  .finrow { padding-bottom: 22px; }
  .finrow + .finrow { padding-top: 22px; }

  .finrow__title { align-items: flex-start; gap: 10px; line-height: 1.35; }
  .finrow__icon { height: 26px; margin-top: 2px; }
  .finrow__text { margin-top: 10px; line-height: 1.6; }

  .signup {
    padding-top: 40px;
    padding-bottom: 56px;
  }

  .signup__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .signup__btn {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 14px;
    width: 100%;
    max-width: 480px;
    min-height: 72px;
    margin-left: 0;
    padding-inline: 16px 20px;
    border-radius: 14px;
  }

  .signup__btn-text { line-height: 1.3; }
  .signup__note { line-height: 1.55; }

  /* --- „ландшафтно проектиране" -------------------------------------- */
  .phero {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* Снимката става фон на цялата секция — иначе при 100% ширина стърчи
     под текста и го прави нечетим. */
  .phero__photo {
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
  }

  .phero__title {
    max-width: none;
    line-height: 1.05;
  }

  .phero__lead {
    max-width: none;
    line-height: 1.55;
  }

  .phero__title + .phero__lead { margin-top: 24px; }
  .phero__lead + .phero__lead { margin-top: 18px; }

  .phero__claim {
    margin-top: 28px;
    line-height: 1.3;
  }

  .incl {
    padding-top: 48px;
    padding-bottom: 8px;
  }

  .incl__title::after { margin-top: 20px; }

  .incl__lead {
    margin-top: 18px;
    line-height: 1.55;
  }

  .incl__cols {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    margin-top: 36px;
    padding-inline: 0;
  }

  .pcol--mid { padding-left: 0; }

  .pcol .pblock + .pblock,
  .pcol--mid .pblock + .pblock { margin-top: 36px; }

  /* Ръчните отстъпи на заглавието и на чертата важат само за 1920 —
     тук иконките са преоразмерени и подравняването се връща на центъра. */
  .pblock__head {
    align-items: center;
    column-gap: 16px;
  }

  .pblock__icon { width: 64px; }

  .pblock__title {
    padding-top: 0;
    line-height: 1.15;
  }

  .pblock__title span { display: inline; }

  .pblock__rule {
    margin-top: 16px;
    margin-left: 0;
  }

  .plist { margin-top: 16px; }

  .pitem + .pitem { margin-top: 20px; }

  .pitem__lead,
  .pitem__text { line-height: 1.55; }

  .needs {
    padding-top: 40px;
    padding-bottom: 0;
  }

  .needs__glow {
    top: 0;
    height: 100%;
    object-fit: cover;
    opacity: .55;
  }

  .needs__box {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 16px;
  }

  .ncell {
    --nc-shift: 0;
    --nc-top: 0;
    padding: 28px 20px;
  }

  /* При една колона вертикалната черта няма къде да застане — става рамка
     между съседните клетки. */
  .ncell--scope::before,
  .ncell--brief::before { display: none; }

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

  .ncell--intro {
    padding: 28px 20px;
    text-align: center;
  }

  .needs__title-sm { line-height: 1.2; }
  .needs__title-lg { line-height: 1.15; }

  .needs__lead {
    max-width: none;
    margin-top: 14px;
    line-height: 1.55;
  }

  .ncell__icon { width: 76px; }

  .ncell__title { line-height: 1.2; }

  .ncell__text {
    max-width: none;
    margin-top: 8px;
    line-height: 1.55;
  }

  .ask {
    padding-top: 36px;
    padding-bottom: 0;
  }

  .ask__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    padding-left: var(--gutter);
  }

  .ask__btn {
    width: 100%;
    max-width: 460px;
    min-height: 76px;
    column-gap: 14px;
    padding-inline: 16px 20px;
    border-radius: 14px;
  }

  .ask__btn-icon {
    width: 48px;
    height: 48px;
  }

  .ask__btn-text { line-height: 1.25; }

  .ask__note {
    max-width: none;
    margin-top: 0;
    line-height: 1.55;
  }

  .author {
    padding-top: 40px;
    padding-bottom: 48px;
  }

  .author__scene {
    width: 100%;
    opacity: .35;
  }

  .author__heading::after { margin-top: 20px; }

  .author__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 22px;
    margin-top: 32px;
    justify-items: center;
    text-align: center;
  }

  .author__photo { width: 180px; }

  .author__text { padding-top: 0; }

  .author__eyebrow { line-height: 1.3; }

  .author__name {
    margin-top: 4px;
    line-height: 1.15;
  }

  .author__bio {
    max-width: none;
    margin-top: 10px;
    line-height: 1.55;
  }

  /* --- „процес на работа" -------------------------------------------- */
  .pro {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .pro__photo {
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
  }

  .pro__title {
    max-width: none;
    line-height: 1.05;
  }

  .pro__lead {
    max-width: none;
    line-height: 1.55;
  }

  .pro__title + .pro__lead { margin-top: 24px; }
  .pro__lead + .pro__lead { margin-top: 18px; }

  .pro__claim {
    margin-top: 28px;
    line-height: 1.3;
  }

  .build {
    padding-top: 48px;
    padding-bottom: 8px;
  }

  .build__glow {
    top: 0;
    height: 100%;
    object-fit: cover;
    opacity: .6;
  }

  .build__title::after { margin-top: 20px; }

  .build__lead {
    margin-top: 18px;
    line-height: 1.55;
  }

  .build__cols {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    margin-top: 36px;
    margin-left: 0;
  }

  .bcol__icon { width: 84px; }

  .bcol__title {
    margin-top: 10px;
    line-height: 1.15;
  }

  .bcol__rule { margin-top: 18px; }

  .blist {
    margin-top: 18px;
    padding-inline: 0;
  }

  .bitem + .bitem { margin-top: 20px; }

  .bitem__lead,
  .bitem__text { line-height: 1.55; }

  /* Кутията и бутонът ползват мобилните правила на „ландшафтно проектиране";
     тук отпадат само отместването с 5px и десктоп отстъпите. */
  .needs--pr { padding-top: 40px; }

  .needs--pr .needs__box {
    margin-left: 0;
    margin-right: 0;
  }

  .needs--pr .ncell {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .needs--pr .ncell--intro {
    padding-top: 28px;
    padding-left: 20px;
  }

  .needs--pr .ncell__title { line-height: 1.2; }

  .needs--pr .needs__title-sm,
  .needs--pr .needs__title-lg,
  .needs__title-md { line-height: 1.2; }

  .ask--pr {
    padding-top: 36px;
    padding-bottom: 48px;
  }

  .ask--pr .ask__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-left: var(--gutter);
  }

  .ask--pr .ask__btn {
    padding-left: 16px;
    padding-right: 20px;
  }

  .ask--pr .ask__note {
    max-width: none;
    margin-top: 0;
    line-height: 1.55;
  }

  /* --- „дългосрочно управление" --------------------------------------- */
  .mng {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .mng__photo {
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
  }

  .mng__inner { padding-left: var(--gutter); }

  .mng__title {
    max-width: none;
    line-height: 1.05;
  }

  .mng__lead {
    max-width: none;
    line-height: 1.55;
  }

  .mng__title + .mng__lead { margin-top: 24px; }
  .mng__lead + .mng__lead { margin-top: 18px; }

  .ask--du {
    padding-top: 36px;
    padding-bottom: 0;
  }

  .ask--du .ask__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    padding-left: var(--gutter);
  }

  .ask--du .ask__btn {
    padding-left: 16px;
    padding-right: 20px;
  }

  .ask--du .ask__note {
    max-width: none;
    margin-top: 0;
    line-height: 1.55;
  }

  .care {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .care__glow {
    top: 0;
    height: 100%;
    object-fit: cover;
    opacity: .55;
  }

  .care__title::after { margin-top: 20px; }

  .care__lead {
    margin-top: 16px;
    line-height: 1.55;
  }

  .care__list {
    margin-top: 36px;
    padding-left: 0;
  }

  /* Ръчните отстъпи важат само за 1920 — тук ритъмът се изравнява. */
  .duitem {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }

  .duitem + .duitem { --du-mt: 28; margin-top: 28px; }

  .duitem__icon { width: 48px; }

  .duitem__body { max-width: none; }

  .duitem__title { line-height: 1.2; }

  .duitem__text {
    --du-tm: 8;
    margin-top: 8px;
    line-height: 1.55;
  }

  /* --- „проекти" ------------------------------------------------------ */
  .pf {
    padding-top: 40px;
    padding-bottom: 0;
  }

  .pf__glow {
    top: 0;
    height: 100%;
    object-fit: cover;
    opacity: .5;
  }

  .pf__top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    max-width: none;
  }

  .pf__title { line-height: 1.05; }

  .pf__lead {
    max-width: none;
    margin-top: 18px;
    line-height: 1.55;
  }

  /* Пътеката и сортирането минават НАД заглавието на телефон. */
  .pf__aside {
    order: -1;
    padding-top: 0;
  }

  .pf__crumbs {
    justify-content: flex-start;
    line-height: 1.4;
  }

  /* Пътеката е от връзки — на телефон те трябва да са цел за пръст. */
  .pf__crumbs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
  }

  .pf__sort { margin-top: 16px; }

  /* Под 16px iOS увеличава страницата при фокус в полето. */
  .pf__select {
    font-size: 16px;
    min-height: 48px;
    padding-left: 16px;
    padding-right: 40px;
    background-position: right 30px center, right 23px center;
    background-size: 8px 8px;
  }

  .gal {
    padding-top: 36px;
    padding-bottom: 0;
  }

  .gal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 32px;
    max-width: none;
  }

  .gal__grid > :nth-child(n+7) { margin-top: 0; }

  .pcard__overlay {
    padding: clamp(18px, 5vw, 30px);
  }

  .pcard__text {
    font-size: clamp(15px, 2.15vw, 18px);
  }

  .pager {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 36px;
  }

  .pager__btn {
    width: 48px;
    height: 48px;
  }

  .evo {
    padding-top: 40px;
    padding-bottom: 0;
  }

  .evo__inner,
  .ask--pj .ask__inner { padding-left: var(--gutter); }

  .evo__title { line-height: 1.2; }

  .evo__text {
    max-width: none;
    margin-top: 14px;
    line-height: 1.55;
  }

  .ask--pj {
    padding-top: 36px;
    padding-bottom: 48px;
  }

  .ask--pj .ask__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }

  .ask--pj .ask__btn {
    column-gap: 14px;
    padding-left: 16px;
    padding-right: 20px;
  }

  .ask--pj .ask__note {
    max-width: none;
    margin-top: 0;
    line-height: 1.55;
  }

  /* --- „поливни системи" ---------------------------------------------- */
  .irr {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .irr__scheme {
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
  }

  .irr__title { line-height: 1.05; }

  .irr__lead {
    max-width: none;
    margin-top: 22px;
    line-height: 1.55;
  }

  .irr__claim {
    margin-top: 28px;
    line-height: 1.25;
  }

  .sol {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .sol__title::after { margin-top: 20px; }

  .sol__lead {
    margin-top: 16px;
    line-height: 1.55;
  }

  /* Снимката слиза под текста и заема цялата ширина. */
  .sblock,
  .sblock--eng,
  .sblock--mount,
  .sblock--season {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 40px;
    padding-top: 26px;
    padding-right: 0;
  }

  .sblock::before { width: 60%; }

  .sblock__photo {
    position: static;
    order: 1;
    width: 100%;
    margin-top: 24px;
  }

  .sblock__body {
    order: 0;
    padding-left: 0;
  }

  .sblock__title { line-height: 1.2; }

  .sblock__rule { margin-top: 18px; }

  .slist { margin-top: 16px; }

  .sitem + .sitem { margin-top: 22px; }

  .sitem__lead,
  .sitem__text { line-height: 1.55; }

  .par {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .par__glow {
    top: 0;
    height: 100%;
    object-fit: cover;
    opacity: .55;
  }

  .par__title::after { margin-top: 20px; }

  .par__lead {
    margin-top: 16px;
    line-height: 1.55;
  }

  .par__cards {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    margin-top: 36px;
    margin-left: 0;
    margin-right: 0;
  }

  .pcell::before { width: 60%; }
  .pcell::after { height: 100%; }

  .pcell__icon { width: 76px; }

  .pcell__title {
    margin-top: 12px;
    line-height: 1.2;
  }

  .pcell__rule { margin-top: 16px; }

  .pcell__text {
    max-width: none;
    margin-top: 16px;
    line-height: 1.55;
  }

  .ask--ps {
    padding-top: 36px;
    padding-bottom: 48px;
  }

  .ask--ps .ask__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    padding-left: var(--gutter);
  }

  .ask--ps .ask__btn {
    padding-left: 16px;
    padding-right: 20px;
  }

  .ask--ps .ask__note {
    max-width: none;
    margin-top: 0;
    line-height: 1.55;
  }

  /* --- „обучение" ------------------------------------------------------ */
  .edu {
    padding-top: 48px;
    padding-bottom: 0;
  }

  /* Снимката става фон на цялото херо, за да не изяжда текста. */
  .edu__photo {
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .28;
  }

  .edu__title { line-height: 1.05; }

  .edu__lead {
    max-width: none;
    line-height: 1.55;
  }

  .edu__title + .edu__lead { margin-top: 22px; }
  .edu__lead + .edu__lead { margin-top: 18px; }

  .edu__claim {
    width: auto;
    margin-top: 28px;
    margin-bottom: 0;
    padding-block: 0;
    line-height: 1.25;
  }

  .edu__claim span { display: inline; }

  .stru {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .stru__glow {
    top: 0;
    height: 100%;
    object-fit: cover;
    opacity: .55;
  }

  .stru__title::after { margin-top: 20px; }

  .stru__lead {
    margin-top: 16px;
    line-height: 1.55;
  }

  .stru__cards {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    margin-top: 36px;
    margin-left: 0;
    margin-right: 0;
  }

  .ocard { padding-top: 26px; }
  .ocard::before { width: 60%; }
  .ocard::after { height: 100%; }
  .ocard--field { left: 0; }
  .ocard--field .ocard__icon,
  .ocard--levels .ocard__icon { left: 0; }

  .ocard__icon { width: 76px; }

  .ocard__title {
    margin-top: 12px;
    line-height: 1.2;
  }

  .ocard--edu .olist,
  .ocard--field .olist,
  .ocard--levels .olist {
    max-width: none;
    margin-top: 16px;
    padding-left: 0;
  }

  .oitem + .oitem { margin-top: 22px; }

  .oitem__lead,
  .oitem__text { line-height: 1.55; }

  .needs--ob { padding-top: 48px; }

  .needs--ob .needs__box {
    margin-left: 0;
    margin-right: 0;
  }

  .needs--ob .ncell {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  .needs--ob .ncell--intro {
    padding-top: 26px;
    padding-left: 0;
  }

  .needs--ob .needs__title-sm,
  .needs--ob .needs__title-md { line-height: 1.15; }

  .needs--ob .needs__lead {
    max-width: none;
    margin-top: 14px;
  }

  .needs--ob .ncell__title { line-height: 1.2; }
  .needs--ob .ncell__text { line-height: 1.55; }

  .ask--ob {
    padding-top: 36px;
    padding-bottom: 48px;
  }

  .ask--ob .ask__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    padding-left: var(--gutter);
  }

  .ask--ob .ask__btn {
    padding-left: 16px;
    padding-right: 20px;
  }

  .ask--ob .ask__note {
    max-width: none;
    margin-top: 0;
    line-height: 1.55;
  }

  /* --- „бутик" --------------------------------------------------------- */
  .shop {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .shop__photo {
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
  }

  .shop__title { line-height: 1.05; }

  .shop__lead,
  .shop__lead:first-of-type {
    max-width: none;
    line-height: 1.55;
  }

  .shop__title + .shop__lead { margin-top: 22px; }
  .shop__lead + .shop__lead { margin-top: 18px; }

  .shop__claim {
    margin-top: 28px;
    line-height: 1.25;
  }

  .shop__claim span { display: inline; }

  .sel {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .sel__title::after { margin-top: 20px; }

  .sel__lead {
    margin-top: 16px;
    line-height: 1.55;
  }

  .sel__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    margin-top: 32px;
    margin-left: 0;
    margin-right: 0;
  }

  .sblk,
  .sblk:nth-child(n+3) {
    min-height: 0;
    padding-bottom: 26px;
  }

  .sblk::before { display: none; }
  .sblk::after { bottom: 0; height: 1px; }

  .sblk__title { line-height: 1.2; }

  /* Илюстрацията слиза под текста и заема цялата ширина. */
  .sblk__art,
  .sblk--plants .sblk__art,
  .sblk--pots .sblk__art,
  .sblk--decor .sblk__art,
  .sblk--tools .sblk__art {
    position: static;
    display: block;
    width: 100%;
    margin-top: 20px;
  }

  .sblist,
  .sblk:nth-child(n+3) .sblist { margin-top: 16px; }

  .sbitem + .sbitem { margin-top: 22px; }

  .sbitem__lead,
  .sbitem__text { line-height: 1.55; }

  .sblk--plants .sbitem__text,
  .sblk--pots .sbitem__text,
  .sblk--decor .sbitem__text,
  .sblk--tools .sbitem__text,
  .sblk--plants .sbitem:nth-child(3) .sbitem__text,
  .sblk--plants .sbitem:nth-child(4) .sbitem__text { max-width: none; }

  .terms {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .terms__title,
  .terms__lead { left: 0; }

  .terms__title::after { margin-top: 20px; }

  .terms__lead {
    margin-top: 16px;
    line-height: 1.55;
  }

  .terms__cards {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    width: 100%;
    margin-top: 32px;
    margin-left: 0;
  }

  .bcard { padding: 26px 20px 30px; }

  .bcard__icon { width: 68px; }

  .bcard__title {
    margin-top: 14px;
    line-height: 1.2;
  }

  .bcard__rule { margin: 16px auto 0; }

  .bcard__text,
  .bcard--cart .bcard__text,
  .bcard--bank .bcard__text {
    max-width: none;
    margin-top: 14px;
    line-height: 1.55;
  }

  .bcard__text br { display: none; }

  .ask--bu {
    padding-top: 36px;
    padding-bottom: 48px;
  }

  .ask--bu .ask__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    padding-left: var(--gutter);
  }

  .ask--bu .ask__btn {
    padding-left: 16px;
    padding-right: 20px;
  }

  .ask--bu .ask__note {
    max-width: none;
    margin-top: 0;
    line-height: 1.55;
  }

  /* --- „блог" ---------------------------------------------------------- */
  .jour {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .jour__photo {
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
  }

  .jour__title { line-height: 1.05; }

  .jour__lead {
    max-width: none;
    line-height: 1.55;
  }

  .jour__title + .jour__lead { margin-top: 22px; }
  .jour__lead + .jour__lead { margin-top: 18px; }

  .jour__claim {
    margin-top: 28px;
    line-height: 1.25;
  }

  .jour__claim span { display: inline; }

  .cats {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .cats__glow {
    top: 0;
    height: 100%;
    object-fit: cover;
    opacity: .55;
  }

  .cats__title::after { margin-top: 20px; }

  .cats__lead {
    margin-top: 16px;
    line-height: 1.55;
  }

  .cats__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    width: 100%;
    margin-top: 32px;
    margin-left: 0;
  }

  .ccard,
  .ccard--tech,
  .ccard--law {
    min-height: 0;
    padding: 28px 20px 96px;
  }

  .ccard__title { line-height: 1.2; }
  .ccard__title span { display: inline; }

  .ccard__rule { margin-top: 18px; }

  .ctags { margin-top: 18px; }

  .ctag {
    left: 0;
    line-height: 1.9;
  }

  .ccard__btn,
  .ccard--tech .ccard__btn,
  .ccard--law .ccard__btn {
    left: 20px;
    bottom: 28px;
    width: calc(100% - 40px);
    max-width: 276px;
    min-height: 52px;
  }

  .share {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .share__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }

  .share__body { padding-top: 0; }

  .share__title { line-height: 1.15; }
  .share__rule { margin-top: 20px; }

  .share__lead {
    max-width: none;
    margin-top: 16px;
    line-height: 1.55;
  }

  /* Снимката слиза под текста и заема цялата ширина. */
  .share__photo {
    position: static;
    display: block;
    width: 100%;
    margin-top: 24px;
  }

  .rule {
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 20px;
    min-height: 0;
  }

  .rule + .rule { margin-top: 28px; }

  .rule__icon { width: 76px; }
  .rule__body { padding-top: 0; }
  .rule__title { line-height: 1.25; }

  .rule__text {
    max-width: none;
    line-height: 1.55;
  }

  .rule__text br { display: none; }

  .posts {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .posts__title::after { margin-top: 20px; }

  .posts__grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 24px;
    width: 100%;
    margin-top: 32px;
    margin-left: 0;
  }

  .post__photo {
    width: 100%;
    margin-top: 0;
  }

  .post__link { padding-bottom: 26px; }

  .post__tag { padding-left: 20px; }

  .post__title {
    max-width: none;
    padding-left: 20px;
    line-height: 1.3;
  }

  .post__date { padding-left: 20px; }

  /* --- „за нас" --------------------------------------------------------- */
  .about {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .about__photo {
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
  }

  .about__inner { padding-left: var(--gutter); }

  .about__title { line-height: 1.05; }

  .about__lead {
    max-width: none;
    line-height: 1.55;
  }

  .about__title + .about__lead { margin-top: 22px; }
  .about__lead + .about__lead { margin-top: 18px; }

  .about__claim {
    margin-top: 28px;
    line-height: 1.25;
  }

  .about__claim span { display: inline; }

  .view {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .view__title,
  .view__lead { left: 0; }

  .view__title::after { margin-top: 20px; }

  .view__lead {
    margin-top: 16px;
    line-height: 1.55;
  }

  .view__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    margin-top: 32px;
  }

  .vcard {
    min-height: 0;
    padding: 26px 20px 30px;
  }

  .vcard__art,
  .vcard--nature .vcard__art,
  .vcard--time .vcard__art,
  .vcard--clean .vcard__art {
    left: 0;
    width: 120px;
    margin-top: 0;
  }

  .vcard__title,
  .vcard--nature .vcard__title,
  .vcard--time .vcard__title,
  .vcard--clean .vcard__title {
    margin-top: 14px;
    line-height: 1.2;
  }

  .vcard__rule { margin-top: 14px; }

  .vcard__text {
    max-width: none;
    margin-top: 12px;
    line-height: 1.55;
  }

  .story {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .story__plant {
    top: auto;
    bottom: 0;
    width: 60%;
    opacity: .35;
  }

  .story__title {
    left: 0;
    line-height: 1.15;
  }

  .story__title::after { margin-top: 20px; }

  .story__list { margin-top: 32px; }

  .story__item { padding-left: 46px; }

  .story__item:nth-child(2),
  .story__item:nth-child(3),
  .story__item:nth-child(4),
  .story__item:nth-child(5) { margin-top: 26px; }

  .story__icon {
    left: 0;
    top: 2px;
    max-width: 26px;
  }

  .story__item::before { left: 34px; }
  .story__item::after { left: 36.5px; }

  .story__name { line-height: 1.2; }

  .story__text,
  .story__item:nth-child(4) .story__text,
  .story__item:nth-child(5) .story__text {
    max-width: none;
    line-height: 1.55;
  }

  /* --- „контакти" ------------------------------------------------------- */
  .cont {
    padding-top: 48px;
    padding-bottom: 0;
  }

  .cont__glow {
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .4;
  }

  .cont__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  .cont__body { padding-left: 0; }

  .cont__title { line-height: 1.05; }

  .cont__lead {
    max-width: none;
    line-height: 1.55;
  }

  .cont__title + .cont__lead { margin-top: 22px; }
  .cont__lead + .cont__lead { margin-top: 18px; }

  .cinfo {
    margin-top: 32px;
    padding-left: 44px;
  }

  .cinfo::before { left: 30px; }

  .cinfo__icon {
    left: -44px;
    top: 14px;
  }

  .cinfo__item--phone .cinfo__value { line-height: 1.35; }

  /* Всяка връзка става цел за пръст — 48px по препоръка. */
  .cinfo__link {
    display: inline-block;
    min-width: 48px;
    min-height: 48px;
    line-height: 48px;
  }

  .cinfo__item--phone .cinfo__link + .cinfo__link { margin-left: 0; }

  .cinfo__value { line-height: 1.5; }

  .cform {
    min-height: 0;
    margin-top: 0;
    padding: 26px 20px 30px;
  }

  .cform:hover { box-shadow: 0 20px 56px rgba(0, 0, 0, .42); }

  .cform__row { grid-template-columns: minmax(0, 1fr); row-gap: 11px; }

  .cform__title + .cform__row { margin-top: 22px; }

  /* 16px спира автоматичното увеличаване в iOS Safari. */
  .cfield {
    min-height: 52px;
    font-size: 16px;
    line-height: 52px;
  }

  .cfield--area {
    min-height: 130px;
    padding-top: 14px;
    line-height: 1.5;
  }

  .cform__agree {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 12px;
    margin-top: 26px;
  }

  .cform__check {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .cform__send {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
    margin-top: 22px;
  }

  .cfield--code {
    min-height: 52px;
    line-height: 52px;
  }

  .cform__btn { min-height: 52px; }

  .cmap {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .cmap__img {
    width: 100%;
    margin-left: 0;
  }

  .cmap__link:hover .cmap__img,
  .cmap__link:focus-visible .cmap__img { transform: translateY(-2px); }
}

/* ============== „ОНЛАЙН КОНСУЛТИРАНЕ" — MOTION / STATES ============= */
/* Големите текстови агрегати се reveal-ват само с opacity. Посоката и
   clarity преходите са върху снимките, кратките заглавия и иконите, за да
   няма wide-text glyph ghosting в Windows/Blink. */
body[data-page="online-konsultirane"] .consult__photo[data-reveal] {
  --reveal-transform: translate3d(20px, 0, 0);
}

body[data-page="online-konsultirane"] .booking[data-reveal],
body[data-page="online-konsultirane"] .signup__btn[data-reveal] {
  --reveal-transform: translate3d(0, 16px, 0);
}

body[data-page="online-konsultirane"] .howto__title[data-reveal],
body[data-page="online-konsultirane"] .finance__title[data-reveal] {
  --reveal-transform: translate3d(-18px, 0, 0);
}

body[data-page="online-konsultirane"] .consult__intro[data-reveal],
body[data-page="online-konsultirane"] .consult__aside[data-reveal],
body[data-page="online-konsultirane"] .hcol[data-reveal],
body[data-page="online-konsultirane"] .finrow[data-reveal],
body[data-page="online-konsultirane"] .signup__note[data-reveal] {
  --reveal-transform: none;
}

.reveal-ready body[data-page="online-konsultirane"] .consult__photo[data-reveal] {
  transition-property: opacity, filter, transform;
  transition-duration: var(--t-slow);
  transition-timing-function: var(--ease-enter);
}

.reveal-ready body[data-page="online-konsultirane"] .consult__photo[data-reveal]:not(.in) {
  opacity: .24;
  filter: saturate(.35) brightness(.62) blur(3px);
}

.reveal-ready body[data-page="online-konsultirane"] .consult__photo[data-reveal].in {
  filter: none;
}

.reveal-ready body[data-page="online-konsultirane"] .consult__intro[data-reveal] .consult__title,
.reveal-ready body[data-page="online-konsultirane"] .consult__aside[data-reveal] .consult__aside-title,
.reveal-ready body[data-page="online-konsultirane"] .consult__aside[data-reveal] .audience__icon,
.reveal-ready body[data-page="online-konsultirane"] .booking[data-reveal] .booking__art,
.reveal-ready body[data-page="online-konsultirane"] .hcol[data-reveal] .hcol__icon,
.reveal-ready body[data-page="online-konsultirane"] .hcol[data-reveal] .hcol__title,
.reveal-ready body[data-page="online-konsultirane"] .hcol[data-reveal] .hitem__icon,
.reveal-ready body[data-page="online-konsultirane"] .hcol[data-reveal] .hcol__art,
.reveal-ready body[data-page="online-konsultirane"] .finrow[data-reveal] .finrow__icon,
.reveal-ready body[data-page="online-konsultirane"] .signup__btn[data-reveal] .signup__btn-icon {
  transition:
    opacity .34s var(--ease-enter),
    transform .34s var(--ease-enter),
    filter .34s var(--ease-enter);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready body[data-page="online-konsultirane"] .consult__intro[data-reveal]:not(.in) .consult__title,
.reveal-ready body[data-page="online-konsultirane"] .consult__aside[data-reveal]:not(.in) .consult__aside-title,
.reveal-ready body[data-page="online-konsultirane"] .hcol[data-reveal]:not(.in) .hcol__title {
  opacity: 0;
  transform: translate3d(-14px, 0, 0);
}

.reveal-ready body[data-page="online-konsultirane"] .consult__aside[data-reveal]:not(.in) .audience__icon,
.reveal-ready body[data-page="online-konsultirane"] .hcol[data-reveal]:not(.in) .hcol__icon,
.reveal-ready body[data-page="online-konsultirane"] .hcol[data-reveal]:not(.in) .hitem__icon,
.reveal-ready body[data-page="online-konsultirane"] .finrow[data-reveal]:not(.in) .finrow__icon,
.reveal-ready body[data-page="online-konsultirane"] .signup__btn[data-reveal]:not(.in) .signup__btn-icon {
  opacity: .18;
  filter: saturate(.4) brightness(.7) blur(2px);
  transform: translate3d(0, 12px, 0) scale(.96);
}

.reveal-ready body[data-page="online-konsultirane"] .booking[data-reveal]:not(.in) .booking__art,
.reveal-ready body[data-page="online-konsultirane"] .hcol[data-reveal]:not(.in) .hcol__art {
  opacity: .22;
  filter: saturate(.35) brightness(.65) blur(3px);
  transform: scale(.97);
}

.reveal-ready body[data-page="online-konsultirane"] .consult__intro[data-reveal].in .consult__title,
.reveal-ready body[data-page="online-konsultirane"] .consult__aside[data-reveal].in .consult__aside-title,
.reveal-ready body[data-page="online-konsultirane"] .consult__aside[data-reveal].in .audience__icon,
.reveal-ready body[data-page="online-konsultirane"] .booking[data-reveal].in .booking__art,
.reveal-ready body[data-page="online-konsultirane"] .hcol[data-reveal].in .hcol__icon,
.reveal-ready body[data-page="online-konsultirane"] .hcol[data-reveal].in .hcol__title,
.reveal-ready body[data-page="online-konsultirane"] .hcol[data-reveal].in .hitem__icon,
.reveal-ready body[data-page="online-konsultirane"] .hcol[data-reveal].in .hcol__art,
.reveal-ready body[data-page="online-konsultirane"] .finrow[data-reveal].in .finrow__icon,
.reveal-ready body[data-page="online-konsultirane"] .signup__btn[data-reveal].in .signup__btn-icon {
  opacity: 1;
  filter: none;
  transform: none;
}

body[data-page="online-konsultirane"] .audience__icon,
body[data-page="online-konsultirane"] .hcol__icon,
body[data-page="online-konsultirane"] .hitem__icon,
body[data-page="online-konsultirane"] .finrow__icon {
  transition: transform var(--t), filter var(--t);
}

body[data-page="online-konsultirane"] .audience__item:hover .audience__icon,
body[data-page="online-konsultirane"] .hcol:hover .hcol__icon,
body[data-page="online-konsultirane"] .hitem:hover .hitem__icon,
body[data-page="online-konsultirane"] .finrow:hover .finrow__icon {
  filter: brightness(1.16);
  transform: translateY(-2px);
}

body[data-page="online-konsultirane"] .hcol,
body[data-page="online-konsultirane"] .finrow {
  transition: background-color var(--t), box-shadow var(--t);
}

body[data-page="online-konsultirane"] .hcol:hover,
body[data-page="online-konsultirane"] .finrow:hover {
  background-color: rgba(255, 255, 255, .016);
  box-shadow: inset 0 0 42px rgba(0, 191, 249, .03);
}

body[data-page="online-konsultirane"] .booking,
body[data-page="online-konsultirane"] .signup__btn {
  min-height: 44px;
  transition: transform var(--t), filter var(--t), box-shadow var(--t), background-color var(--t);
}

body[data-page="online-konsultirane"] .booking:focus-visible,
body[data-page="online-konsultirane"] .signup__btn:focus-visible {
  outline: 3px solid var(--accent-teal);
  outline-offset: 4px;
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

body[data-page="online-konsultirane"] .booking:active,
body[data-page="online-konsultirane"] .signup__btn:active {
  transform: translateY(0) scale(.985);
  filter: brightness(1.08);
}

.reveal-ready body[data-page="online-konsultirane"] .booking[data-reveal].in:hover,
.reveal-ready body[data-page="online-konsultirane"] .booking[data-reveal].in:focus-visible,
.reveal-ready body[data-page="online-konsultirane"] .signup__btn[data-reveal].in:hover,
.reveal-ready body[data-page="online-konsultirane"] .signup__btn[data-reveal].in:focus-visible {
  transform: translateY(-2px);
}

.reveal-ready body[data-page="online-konsultirane"] .booking[data-reveal].in:active,
.reveal-ready body[data-page="online-konsultirane"] .signup__btn[data-reveal].in:active {
  transform: translateY(0) scale(.985);
}

/* =========== „ЛАНДШАФТНО ПРОЕКТИРАНЕ" — MOTION / STATES ============ */
/* Дългите проектни описания се появяват само с opacity. Така запазваме
   динамиката в снимките, иконите и кратките заглавия без wide-text glyph
   ghosting в Windows/Blink. */
body[data-page="landshaftno-proektirane"] .phero__photo[data-reveal] {
  --reveal-transform: translate3d(20px, 0, 0);
}

body[data-page="landshaftno-proektirane"] .phero__title[data-reveal],
body[data-page="landshaftno-proektirane"] .incl__title[data-reveal],
body[data-page="landshaftno-proektirane"] .author__heading[data-reveal] {
  --reveal-transform: translate3d(-18px, 0, 0);
}

body[data-page="landshaftno-proektirane"] .phero__claim[data-reveal],
body[data-page="landshaftno-proektirane"] .ask__btn[data-reveal] {
  --reveal-transform: translate3d(0, 16px, 0);
}

body[data-page="landshaftno-proektirane"] .phero__lead[data-reveal],
body[data-page="landshaftno-proektirane"] .incl__lead[data-reveal],
body[data-page="landshaftno-proektirane"] .pblock[data-reveal],
body[data-page="landshaftno-proektirane"] .needs__box[data-reveal],
body[data-page="landshaftno-proektirane"] .ask__note[data-reveal],
body[data-page="landshaftno-proektirane"] .author__row[data-reveal] {
  --reveal-transform: none;
}

.reveal-ready body[data-page="landshaftno-proektirane"] .phero__photo[data-reveal],
.reveal-ready body[data-page="landshaftno-proektirane"] .needs__glow[data-reveal],
.reveal-ready body[data-page="landshaftno-proektirane"] .author__scene[data-reveal] {
  transition-property: opacity, filter, transform;
  transition-duration: var(--t-slow);
  transition-timing-function: var(--ease-enter);
}

.reveal-ready body[data-page="landshaftno-proektirane"] .phero__photo[data-reveal]:not(.in),
.reveal-ready body[data-page="landshaftno-proektirane"] .author__scene[data-reveal]:not(.in) {
  opacity: .28;
  filter: saturate(.38) brightness(.68) blur(3px);
}

.reveal-ready body[data-page="landshaftno-proektirane"] .needs__glow[data-reveal]:not(.in) {
  opacity: .16;
  filter: saturate(.35) brightness(.62) blur(4px);
}

.reveal-ready body[data-page="landshaftno-proektirane"] .phero__photo[data-reveal].in,
.reveal-ready body[data-page="landshaftno-proektirane"] .needs__glow[data-reveal].in,
.reveal-ready body[data-page="landshaftno-proektirane"] .author__scene[data-reveal].in {
  filter: none;
}

.reveal-ready body[data-page="landshaftno-proektirane"] .pblock[data-reveal] .pblock__icon,
.reveal-ready body[data-page="landshaftno-proektirane"] .pblock[data-reveal] .pblock__title,
.reveal-ready body[data-page="landshaftno-proektirane"] .needs__box[data-reveal] .ncell__icon,
.reveal-ready body[data-page="landshaftno-proektirane"] .author__row[data-reveal] .author__photo {
  transition:
    opacity .34s var(--ease-enter),
    transform .34s var(--ease-enter),
    filter .34s var(--ease-enter);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready body[data-page="landshaftno-proektirane"] .pblock[data-reveal]:not(.in) .pblock__icon,
.reveal-ready body[data-page="landshaftno-proektirane"] .needs__box[data-reveal]:not(.in) .ncell__icon {
  opacity: .18;
  filter: saturate(.4) brightness(.72) blur(2px);
  transform: translate3d(0, 14px, 0) scale(.96);
}

.reveal-ready body[data-page="landshaftno-proektirane"] .pblock[data-reveal]:not(.in) .pblock__title {
  opacity: 0;
  transform: translate3d(14px, 0, 0);
}

.reveal-ready body[data-page="landshaftno-proektirane"] .author__row[data-reveal]:not(.in) .author__photo {
  opacity: .24;
  filter: grayscale(.7) brightness(.72) blur(2px);
  transform: scale(.96);
}

.reveal-ready body[data-page="landshaftno-proektirane"] .pblock[data-reveal].in .pblock__icon,
.reveal-ready body[data-page="landshaftno-proektirane"] .pblock[data-reveal].in .pblock__title,
.reveal-ready body[data-page="landshaftno-proektirane"] .needs__box[data-reveal].in .ncell__icon,
.reveal-ready body[data-page="landshaftno-proektirane"] .author__row[data-reveal].in .author__photo {
  opacity: 1;
  filter: none;
  transform: none;
}

body[data-page="landshaftno-proektirane"] .pblock,
body[data-page="landshaftno-proektirane"] .ncell {
  transition: background-color var(--t), box-shadow var(--t);
}

body[data-page="landshaftno-proektirane"] .pblock:hover,
body[data-page="landshaftno-proektirane"] .pblock:focus-within,
body[data-page="landshaftno-proektirane"] .ncell:hover {
  background-color: rgba(255, 255, 255, .018);
  box-shadow: inset 0 0 42px rgba(0, 191, 249, .035);
}

body[data-page="landshaftno-proektirane"] .ask__btn {
  min-height: 44px;
  transition: transform var(--t), filter var(--t), box-shadow var(--t), background-color var(--t);
}

body[data-page="landshaftno-proektirane"] .ask__btn:focus-visible {
  outline: 3px solid var(--accent-teal);
  outline-offset: 4px;
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

body[data-page="landshaftno-proektirane"] .ask__btn:active {
  transform: translateY(0) scale(.985);
  filter: brightness(1.08);
}

.reveal-ready body[data-page="landshaftno-proektirane"] .ask__btn[data-reveal].in:hover,
.reveal-ready body[data-page="landshaftno-proektirane"] .ask__btn[data-reveal].in:focus-visible {
  transform: translateY(-2px);
}

.reveal-ready body[data-page="landshaftno-proektirane"] .ask__btn[data-reveal].in:active {
  transform: translateY(0) scale(.985);
}

/* ===== SERVICE BATCH: ИЗГРАЖДАНЕ / УПРАВЛЕНИЕ / ОБУЧЕНИЕ — MOTION ==== */
/* Дългите текстове и content-rich cards се reveal-ват само с opacity.
   Directional motion остава върху снимки, кратки headings, икони и CTA. */
body[data-page="proces-na-rabota"] .pro__photo[data-reveal],
body[data-page="dalgostrochno-upravlenie"] .mng__photo[data-reveal],
body[data-page="obuchenie"] .edu__photo[data-reveal] {
  --reveal-transform: translate3d(20px, 0, 0);
}

body[data-page="proces-na-rabota"] .pro__title[data-reveal],
body[data-page="proces-na-rabota"] .build__title[data-reveal],
body[data-page="dalgostrochno-upravlenie"] .mng__title[data-reveal],
body[data-page="dalgostrochno-upravlenie"] .care__title[data-reveal],
body[data-page="obuchenie"] .edu__title[data-reveal],
body[data-page="obuchenie"] .stru__title[data-reveal] {
  --reveal-transform: translate3d(-18px, 0, 0);
}

body[data-page="proces-na-rabota"] .pro__claim[data-reveal],
body[data-page="proces-na-rabota"] .ask__btn[data-reveal],
body[data-page="dalgostrochno-upravlenie"] .ask__btn[data-reveal],
body[data-page="obuchenie"] .edu__claim[data-reveal],
body[data-page="obuchenie"] .ask__btn[data-reveal] {
  --reveal-transform: translate3d(0, 16px, 0);
}

body[data-page="proces-na-rabota"] .pro__lead[data-reveal],
body[data-page="proces-na-rabota"] .build__lead[data-reveal],
body[data-page="proces-na-rabota"] .bcol[data-reveal],
body[data-page="proces-na-rabota"] .needs__box[data-reveal],
body[data-page="proces-na-rabota"] .ask__note[data-reveal],
body[data-page="dalgostrochno-upravlenie"] .mng__lead[data-reveal],
body[data-page="dalgostrochno-upravlenie"] .care__lead[data-reveal],
body[data-page="dalgostrochno-upravlenie"] .duitem[data-reveal],
body[data-page="dalgostrochno-upravlenie"] .ask__note[data-reveal],
body[data-page="obuchenie"] .edu__lead[data-reveal],
body[data-page="obuchenie"] .stru__lead[data-reveal],
body[data-page="obuchenie"] .ocard[data-reveal],
body[data-page="obuchenie"] .needs__box[data-reveal],
body[data-page="obuchenie"] .ask__note[data-reveal] {
  --reveal-transform: none;
}

.reveal-ready body[data-page="proces-na-rabota"] .pro__photo[data-reveal],
.reveal-ready body[data-page="proces-na-rabota"] .build__glow[data-reveal],
.reveal-ready body[data-page="dalgostrochno-upravlenie"] .mng__photo[data-reveal],
.reveal-ready body[data-page="dalgostrochno-upravlenie"] .care__glow[data-reveal],
.reveal-ready body[data-page="obuchenie"] .edu__photo[data-reveal],
.reveal-ready body[data-page="obuchenie"] .stru__glow[data-reveal] {
  transition-property: opacity, filter, transform;
  transition-duration: var(--t-slow);
  transition-timing-function: var(--ease-enter);
}

.reveal-ready body[data-page="proces-na-rabota"] .pro__photo[data-reveal]:not(.in),
.reveal-ready body[data-page="dalgostrochno-upravlenie"] .mng__photo[data-reveal]:not(.in),
.reveal-ready body[data-page="obuchenie"] .edu__photo[data-reveal]:not(.in) {
  opacity: .26;
  filter: saturate(.36) brightness(.66) blur(3px);
}

.reveal-ready body[data-page="proces-na-rabota"] .build__glow[data-reveal]:not(.in),
.reveal-ready body[data-page="dalgostrochno-upravlenie"] .care__glow[data-reveal]:not(.in),
.reveal-ready body[data-page="obuchenie"] .stru__glow[data-reveal]:not(.in) {
  opacity: .14;
  filter: saturate(.35) brightness(.62) blur(4px);
}

.reveal-ready body[data-page="proces-na-rabota"] .pro__photo[data-reveal].in,
.reveal-ready body[data-page="proces-na-rabota"] .build__glow[data-reveal].in,
.reveal-ready body[data-page="dalgostrochno-upravlenie"] .mng__photo[data-reveal].in,
.reveal-ready body[data-page="dalgostrochno-upravlenie"] .care__glow[data-reveal].in,
.reveal-ready body[data-page="obuchenie"] .edu__photo[data-reveal].in,
.reveal-ready body[data-page="obuchenie"] .stru__glow[data-reveal].in {
  filter: none;
}

.reveal-ready body[data-page="proces-na-rabota"] .bcol[data-reveal] .bcol__icon,
.reveal-ready body[data-page="proces-na-rabota"] .bcol[data-reveal] .bcol__title,
.reveal-ready body[data-page="proces-na-rabota"] .needs__box[data-reveal] .ncell__icon,
.reveal-ready body[data-page="dalgostrochno-upravlenie"] .duitem[data-reveal] .duitem__icon,
.reveal-ready body[data-page="dalgostrochno-upravlenie"] .duitem[data-reveal] .duitem__title,
.reveal-ready body[data-page="obuchenie"] .ocard[data-reveal] .ocard__icon,
.reveal-ready body[data-page="obuchenie"] .ocard[data-reveal] .ocard__title,
.reveal-ready body[data-page="obuchenie"] .needs__box[data-reveal] .ncell__icon {
  transition:
    opacity .34s var(--ease-enter),
    transform .34s var(--ease-enter),
    filter .34s var(--ease-enter);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready body[data-page="proces-na-rabota"] .bcol[data-reveal]:not(.in) .bcol__icon,
.reveal-ready body[data-page="proces-na-rabota"] .needs__box[data-reveal]:not(.in) .ncell__icon,
.reveal-ready body[data-page="dalgostrochno-upravlenie"] .duitem[data-reveal]:not(.in) .duitem__icon,
.reveal-ready body[data-page="obuchenie"] .ocard[data-reveal]:not(.in) .ocard__icon,
.reveal-ready body[data-page="obuchenie"] .needs__box[data-reveal]:not(.in) .ncell__icon {
  opacity: .18;
  filter: saturate(.4) brightness(.72) blur(2px);
  transform: translate3d(0, 14px, 0) scale(.96);
}

.reveal-ready body[data-page="proces-na-rabota"] .bcol[data-reveal]:not(.in) .bcol__title,
.reveal-ready body[data-page="dalgostrochno-upravlenie"] .duitem[data-reveal]:not(.in) .duitem__title,
.reveal-ready body[data-page="obuchenie"] .ocard[data-reveal]:not(.in) .ocard__title {
  opacity: 0;
  transform: translate3d(14px, 0, 0);
}

.reveal-ready body[data-page="proces-na-rabota"] .bcol[data-reveal].in .bcol__icon,
.reveal-ready body[data-page="proces-na-rabota"] .bcol[data-reveal].in .bcol__title,
.reveal-ready body[data-page="proces-na-rabota"] .needs__box[data-reveal].in .ncell__icon,
.reveal-ready body[data-page="dalgostrochno-upravlenie"] .duitem[data-reveal].in .duitem__icon,
.reveal-ready body[data-page="dalgostrochno-upravlenie"] .duitem[data-reveal].in .duitem__title,
.reveal-ready body[data-page="obuchenie"] .ocard[data-reveal].in .ocard__icon,
.reveal-ready body[data-page="obuchenie"] .ocard[data-reveal].in .ocard__title,
.reveal-ready body[data-page="obuchenie"] .needs__box[data-reveal].in .ncell__icon {
  opacity: 1;
  filter: none;
  transform: none;
}

body[data-page="proces-na-rabota"] .bcol,
body[data-page="proces-na-rabota"] .ncell,
body[data-page="dalgostrochno-upravlenie"] .duitem,
body[data-page="obuchenie"] .ocard,
body[data-page="obuchenie"] .ncell {
  transition: background-color var(--t), box-shadow var(--t);
}

body[data-page="proces-na-rabota"] .bcol:hover,
body[data-page="proces-na-rabota"] .ncell:hover,
body[data-page="dalgostrochno-upravlenie"] .duitem:hover,
body[data-page="obuchenie"] .ocard:hover,
body[data-page="obuchenie"] .ncell:hover {
  background-color: rgba(255, 255, 255, .018);
  box-shadow: inset 0 0 42px rgba(0, 191, 249, .035);
}

body[data-page="proces-na-rabota"] .bcol__icon,
body[data-page="proces-na-rabota"] .ncell__icon,
body[data-page="dalgostrochno-upravlenie"] .duitem__icon,
body[data-page="obuchenie"] .ocard__icon,
body[data-page="obuchenie"] .ncell__icon {
  transition: transform var(--t), filter var(--t);
}

body[data-page="proces-na-rabota"] .bcol:hover .bcol__icon,
body[data-page="proces-na-rabota"] .ncell:hover .ncell__icon,
body[data-page="dalgostrochno-upravlenie"] .duitem:hover .duitem__icon,
body[data-page="obuchenie"] .ocard:hover .ocard__icon,
body[data-page="obuchenie"] .ncell:hover .ncell__icon {
  filter: brightness(1.16);
  transform: translateY(-2px);
}

body[data-page="proces-na-rabota"] .ask__btn,
body[data-page="dalgostrochno-upravlenie"] .ask__btn,
body[data-page="obuchenie"] .ask__btn {
  min-height: 44px;
  transition: transform var(--t), filter var(--t), box-shadow var(--t), background-color var(--t);
}

body[data-page="proces-na-rabota"] .ask__btn:focus-visible,
body[data-page="dalgostrochno-upravlenie"] .ask__btn:focus-visible,
body[data-page="obuchenie"] .ask__btn:focus-visible {
  outline: 3px solid var(--accent-teal);
  outline-offset: 4px;
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

body[data-page="proces-na-rabota"] .ask__btn:active,
body[data-page="dalgostrochno-upravlenie"] .ask__btn:active,
body[data-page="obuchenie"] .ask__btn:active {
  transform: translateY(0) scale(.985);
  filter: brightness(1.08);
}

.reveal-ready body[data-page="proces-na-rabota"] .ask__btn[data-reveal].in:hover,
.reveal-ready body[data-page="proces-na-rabota"] .ask__btn[data-reveal].in:focus-visible,
.reveal-ready body[data-page="dalgostrochno-upravlenie"] .ask__btn[data-reveal].in:hover,
.reveal-ready body[data-page="dalgostrochno-upravlenie"] .ask__btn[data-reveal].in:focus-visible,
.reveal-ready body[data-page="obuchenie"] .ask__btn[data-reveal].in:hover,
.reveal-ready body[data-page="obuchenie"] .ask__btn[data-reveal].in:focus-visible {
  transform: translateY(-2px);
}

.reveal-ready body[data-page="proces-na-rabota"] .ask__btn[data-reveal].in:active,
.reveal-ready body[data-page="dalgostrochno-upravlenie"] .ask__btn[data-reveal].in:active,
.reveal-ready body[data-page="obuchenie"] .ask__btn[data-reveal].in:active {
  transform: translateY(0) scale(.985);
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="proces-na-rabota"] .pro__photo,
  body[data-page="proces-na-rabota"] .build__glow,
  body[data-page="proces-na-rabota"] .bcol,
  body[data-page="proces-na-rabota"] .bcol__icon,
  body[data-page="proces-na-rabota"] .bcol__title,
  body[data-page="proces-na-rabota"] .ncell__icon,
  body[data-page="proces-na-rabota"] .ask__btn,
  body[data-page="dalgostrochno-upravlenie"] .mng__photo,
  body[data-page="dalgostrochno-upravlenie"] .care__glow,
  body[data-page="dalgostrochno-upravlenie"] .duitem,
  body[data-page="dalgostrochno-upravlenie"] .duitem__icon,
  body[data-page="dalgostrochno-upravlenie"] .duitem__title,
  body[data-page="dalgostrochno-upravlenie"] .ask__btn,
  body[data-page="obuchenie"] .edu__photo,
  body[data-page="obuchenie"] .stru__glow,
  body[data-page="obuchenie"] .ocard,
  body[data-page="obuchenie"] .ocard__icon,
  body[data-page="obuchenie"] .ocard__title,
  body[data-page="obuchenie"] .ncell__icon,
  body[data-page="obuchenie"] .ask__btn {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }

  body[data-page="online-konsultirane"] .consult__photo,
  body[data-page="online-konsultirane"] .consult__title,
  body[data-page="online-konsultirane"] .consult__aside-title,
  body[data-page="online-konsultirane"] .audience__icon,
  body[data-page="online-konsultirane"] .booking,
  body[data-page="online-konsultirane"] .booking__art,
  body[data-page="online-konsultirane"] .hcol,
  body[data-page="online-konsultirane"] .hcol__icon,
  body[data-page="online-konsultirane"] .hcol__title,
  body[data-page="online-konsultirane"] .hitem__icon,
  body[data-page="online-konsultirane"] .hcol__art,
  body[data-page="online-konsultirane"] .finrow,
  body[data-page="online-konsultirane"] .finrow__icon,
  body[data-page="online-konsultirane"] .signup__btn,
  body[data-page="online-konsultirane"] .signup__btn-icon {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }

  body[data-page="landshaftno-proektirane"] .phero__photo,
  body[data-page="landshaftno-proektirane"] .needs__glow,
  body[data-page="landshaftno-proektirane"] .author__scene,
  body[data-page="landshaftno-proektirane"] .pblock__icon,
  body[data-page="landshaftno-proektirane"] .pblock__title,
  body[data-page="landshaftno-proektirane"] .ncell__icon,
  body[data-page="landshaftno-proektirane"] .author__photo,
  body[data-page="landshaftno-proektirane"] .ask__btn {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }

  body[data-page="landshaftna-arhitektura"] .services__terrain,
  body[data-page="landshaftna-arhitektura"] .svc__icon,
  body[data-page="landshaftna-arhitektura"] .svc__title,
  body[data-page="landshaftna-arhitektura"] .svc__cta,
  body[data-page="landshaftna-arhitektura"] .mark__icon {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }

  body[data-page="kontakti"] .cont__glow,
  body[data-page="kontakti"] .cform,
  body[data-page="kontakti"] .cfield,
  body[data-page="kontakti"] .cform__btn,
  body[data-page="kontakti"] .cinfo__link,
  body[data-page="kontakti"] .cmap__img {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

@media (max-width: 640px) {
  .gal__grid { grid-template-columns: minmax(0, 1fr); }

  .projects__grid { row-gap: 28px; }
  /* Трите качества се изправят — на телефон не се събират в един ред. */
  .services__marks {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    row-gap: 2px;
  }

  .mark + .mark {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .projects__stack { column-gap: 16px; }

  /* На телефон 37.5% става лента от 150px — снимката се вдига до четим размер. */
  .project--tall { width: 60%; }
}

@media (max-width: 480px) {
  .philosophy,
  .projects,
  .landscape,
  .parks {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .parks__thumbs { column-gap: 14px; }
}

@media (max-width: 359px) {
  body[data-page="proces-na-rabota"] .ask--pr .ask__btn {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 8px;
    padding-left: 11px;
    padding-right: 11px;
  }

  body[data-page="proces-na-rabota"] .ask--pr .ask__btn-icon {
    width: 44px;
    height: 44px;
  }

  body[data-page="proces-na-rabota"] .ask--pr .ask__btn-text {
    font-size: 18px;
  }
}
/* ===== СТРАНИЦИ — ТАБЛЕТ И ТЕЛЕФОН : КРАЙ ===== */

/* ==  СТРАНИЦИ : КРАЙ                                                == */
/* ==================================================================== */

/* ===== BLOG LISTING CMS LAYER .15 : НАЧАЛО ========================= */
body[data-page="blog"] .cats {
  padding-top: calc(88 * var(--k));
  overflow: clip;
}

body[data-page="blog"] .cats__lead {
  max-width: calc(1120 * var(--k));
  margin-left: auto;
  margin-right: auto;
}

body[data-page="blog"] .ccard {
  min-height: calc(520 * var(--k));
  background: linear-gradient(145deg, rgba(255, 255, 255, .018), rgba(255, 255, 255, 0) 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 22px 65px rgba(0, 0, 0, .2);
  transition: background-color var(--t), box-shadow var(--t), transform var(--t);
}

body[data-page="blog"] .ccard:hover,
body[data-page="blog"] .ccard:focus-within {
  background-color: color-mix(in srgb, var(--cc-accent) 4%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cc-accent) 25%, transparent), 0 26px 74px rgba(0, 0, 0, .28);
}

body[data-page="blog"] .ctags { margin-bottom: calc(82 * var(--k)); }

body[data-page="blog"] .ctag {
  left: 0;
  padding-left: calc(14 * var(--k));
  font-size: clamp(15px, calc(19.4 * var(--k)), 19.4px);
  line-height: 1.34;
}

body[data-page="blog"] .ctag + .ctag { margin-top: calc(14 * var(--k)); }

body[data-page="blog"] .ctag::before {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
}

body[data-page="blog"] .ctag__link {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--t-fast), text-shadow var(--t-fast);
}

body[data-page="blog"] .ctag__link:hover,
body[data-page="blog"] .ctag__link:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-shadow: 0 0 16px color-mix(in srgb, var(--cc-accent) 48%, transparent);
}

body[data-page="blog"] .ctag__link:focus-visible,
body[data-page="blog"] .ccard__btn:focus-visible,
body[data-page="blog"] .post__link:focus-visible {
  outline: 3px solid var(--cc-accent, var(--accent-teal));
  outline-offset: 4px;
}

body[data-page="blog"] .ctag--empty {
  color: var(--ink-dim, var(--ink-soft));
  font-style: italic;
}

body[data-page="blog"] .ccard__btn {
  appearance: none;
  min-height: 44px;
  padding-right: calc(14 * var(--k));
  background: rgba(0, 0, 0, .08);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: background-color var(--t), box-shadow var(--t), filter var(--t-fast), transform var(--t-fast);
}

body[data-page="blog"] .ccard__btn[hidden] { display: none; }

body[data-page="blog"] .ccard__btn:hover,
body[data-page="blog"] .ccard__btn:focus-visible {
  background-color: color-mix(in srgb, var(--cc-accent) 13%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--cc-accent) 20%, transparent);
  transform: translateY(-2px);
}

body[data-page="blog"] .ccard__btn:active { transform: translateY(0) scale(.985); }

body[data-page="blog"] .ccard__btn-arrow {
  justify-self: end;
  transform: rotate(90deg);
  transition: transform var(--t);
}

body[data-page="blog"] .ccard__btn.is-expanded .ccard__btn-arrow { transform: rotate(-90deg); }
body[data-page="blog"] .share { overflow: clip; }

body[data-page="blog"] .post {
  display: flex;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .008));
  box-shadow: 0 18px 55px rgba(0, 0, 0, .22);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

body[data-page="blog"] .post:hover,
body[data-page="blog"] .post:focus-within {
  border-color: rgba(110, 255, 0, .62);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34), 0 0 26px rgba(37, 219, 222, .08);
  transform: translateY(-5px);
}

body[data-page="blog"] .post__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

body[data-page="blog"] .post__photo {
  width: 100%;
  height: calc(275 * var(--k));
  aspect-ratio: 367 / 275;
  object-fit: cover;
  background: radial-gradient(circle at 35% 40%, rgba(0, 191, 249, .16), transparent 58%), #050706;
  transition: filter var(--t-slow), opacity var(--t-slow), transform var(--t-slow);
}

body[data-page="blog"] .post:hover .post__photo,
body[data-page="blog"] .post:focus-within .post__photo {
  filter: brightness(.72) saturate(1.12);
  transform: scale(1.035);
}

body[data-page="blog"] .post__tag {
  min-height: calc(43 * var(--k));
  padding-right: calc(20 * var(--k));
  line-height: 1.18;
}

body[data-page="blog"] .post__title {
  min-height: calc(70 * var(--k));
  padding-right: calc(24 * var(--k));
}

body[data-page="blog"] .post__date { margin-top: auto; }

/* Дългите CMS текстове са opacity-only; посока имат само кратки заглавия
   и изображенията, за да не се появява glyph ghosting. */
body[data-page="blog"] .cats__title[data-reveal],
body[data-page="blog"] .share__body[data-reveal] { --reveal-transform: translate3d(-22px, 0, 0); }

body[data-page="blog"] .posts__title[data-reveal] { --reveal-transform: translate3d(22px, 0, 0); }

body[data-page="blog"] .cats__lead[data-reveal],
body[data-page="blog"] .ccard[data-reveal],
body[data-page="blog"] .rule[data-reveal],
body[data-page="blog"] .post[data-reveal] { --reveal-transform: none; }

.reveal-ready body[data-page="blog"] .cats__glow[data-reveal],
.reveal-ready body[data-page="blog"] .share__photo[data-reveal],
.reveal-ready body[data-page="blog"] .post[data-reveal] .post__photo {
  transition-property: opacity, filter, transform;
  transition-duration: var(--t-slow);
  transition-timing-function: var(--ease-enter);
}

.reveal-ready body[data-page="blog"] .cats__glow[data-reveal]:not(.in),
.reveal-ready body[data-page="blog"] .share__photo[data-reveal]:not(.in),
.reveal-ready body[data-page="blog"] .post[data-reveal]:not(.in) .post__photo {
  opacity: .22;
  filter: saturate(.35) brightness(.62) blur(3px);
}

.reveal-ready body[data-page="blog"] .cats__glow[data-reveal].in,
.reveal-ready body[data-page="blog"] .share__photo[data-reveal].in,
.reveal-ready body[data-page="blog"] .post[data-reveal].in .post__photo {
  opacity: 1;
  filter: none;
}

@media (max-width: 1024px) {
  body[data-page="blog"] .cats { padding-top: 48px; }
  body[data-page="blog"] .ccard,
  body[data-page="blog"] .ccard--tech,
  body[data-page="blog"] .ccard--law { min-height: 0; }
  body[data-page="blog"] .ctags { margin-bottom: 70px; }
  body[data-page="blog"] .ccard:not(.ccard--expandable) { padding-bottom: 28px; }
  body[data-page="blog"] .ccard:not(.ccard--expandable) .ctags { margin-bottom: 0; }
  body[data-page="blog"] .posts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
  body[data-page="blog"] .post__photo { height: auto; }
  body[data-page="blog"] .post__tag { min-height: 42px; }
  body[data-page="blog"] .post__title { min-height: 62px; }
}

@media (max-width: 640px) {
  body[data-page="blog"] .cats__title,
  body[data-page="blog"] .posts__title { line-height: 1.1; }
  body[data-page="blog"] .ccard,
  body[data-page="blog"] .ccard--tech,
  body[data-page="blog"] .ccard--law {
    padding-left: 20px;
    padding-right: 20px;
  }
  body[data-page="blog"] .posts__grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="blog"] .post__tag,
  body[data-page="blog"] .post__title { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="blog"] .cats__glow,
  body[data-page="blog"] .share__photo,
  body[data-page="blog"] .ccard,
  body[data-page="blog"] .ccard__btn,
  body[data-page="blog"] .ccard__btn-arrow,
  body[data-page="blog"] .post,
  body[data-page="blog"] .post__photo {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}
/* ===== BLOG LISTING CMS LAYER .15 : КРАЙ =========================== */

/* ===== BLOG ARTICLE CMS LAYER .16.1 : НАЧАЛО ======================= */
body[data-page="blog"] .blog-article {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(circle at 82% 8%, rgba(0, 191, 249, .105), transparent 28%),
    radial-gradient(circle at 98% 32%, rgba(221, 0, 253, .075), transparent 31%),
    #000;
}

body[data-page="blog"] .blog-article::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-magenta), transparent);
  opacity: .72;
}

body[data-page="blog"] .article-intro {
  padding: clamp(64px, calc(108 * var(--k)), 108px) 0 clamp(76px, calc(132 * var(--k)), 132px);
}

body[data-page="blog"] .article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(380px, .86fr);
  grid-template-areas: "copy gallery";
  align-items: start;
  column-gap: clamp(42px, calc(92 * var(--k)), 92px);
}

body[data-page="blog"] .article-copy {
  grid-area: copy;
  position: sticky;
  top: 116px;
  align-self: start;
  display: grid;
  gap: clamp(30px, calc(42 * var(--k)), 42px);
  min-width: 0;
}

body[data-page="blog"] .article-header__category {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 14px;
  color: var(--accent-lime);
  font-size: clamp(15px, calc(19 * var(--k)), 19px);
  line-height: 1.25;
  text-decoration: none;
  transition: color var(--t-fast), text-shadow var(--t-fast), transform var(--t-fast);
}

body[data-page="blog"] .article-header__category::before {
  content: "";
  width: 28px;
  height: 1px;
  margin-right: 12px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

body[data-page="blog"] .article-header__category:hover,
body[data-page="blog"] .article-header__category:focus-visible {
  color: #fff;
  text-shadow: 0 0 18px rgba(159, 255, 1, .55);
  transform: translateX(3px);
}

body[data-page="blog"] .article-header__category:focus-visible,
body[data-page="blog"] .article-header__meta a:focus-visible,
body[data-page="blog"] .article-gallery__link:focus-visible,
body[data-page="blog"] .article-lightbox button:focus-visible {
  outline: 3px solid var(--accent-teal);
  outline-offset: 4px;
}

body[data-page="blog"] .article-header__title {
  max-width: 860px;
  margin: 0;
  color: #fff;
  font-size: clamp(42px, calc(72 * var(--k)), 72px);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.025em;
  text-wrap: balance;
}

body[data-page="blog"] .article-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  color: var(--ink-dim, #b8b8bd);
  font-size: clamp(14px, calc(17 * var(--k)), 17px);
}

body[data-page="blog"] .article-header__meta a {
  color: var(--accent-teal);
  text-underline-offset: 4px;
}

body[data-page="blog"] .article-content {
  max-width: 820px;
  color: var(--ink-soft, #e7e7e9);
  font-size: clamp(17px, calc(20 * var(--k)), 20px);
  line-height: 1.78;
}

body[data-page="blog"] .article-content > :first-child { margin-top: 0; }
body[data-page="blog"] .article-content > :last-child { margin-bottom: 0; }

body[data-page="blog"] .article-content p,
body[data-page="blog"] .article-content div,
body[data-page="blog"] .article-content ul,
body[data-page="blog"] .article-content ol,
body[data-page="blog"] .article-content blockquote { margin: 0 0 1.15em; }

body[data-page="blog"] .article-content h2,
body[data-page="blog"] .article-content h3 {
  margin: 1.65em 0 .65em;
  color: #fff;
  font-weight: 400;
  line-height: 1.14;
}

body[data-page="blog"] .article-content h2 { font-size: clamp(28px, calc(38 * var(--k)), 38px); }
body[data-page="blog"] .article-content h3 { font-size: clamp(23px, calc(30 * var(--k)), 30px); }

body[data-page="blog"] .article-content ul,
body[data-page="blog"] .article-content ol { padding-left: 1.35em; }

body[data-page="blog"] .article-content a {
  color: var(--accent-teal);
  text-underline-offset: 4px;
}

body[data-page="blog"] .article-content blockquote {
  padding: 18px 22px;
  border-left: 2px solid var(--accent-lime);
  background: rgba(159, 255, 1, .035);
  color: #fff;
}

body[data-page="blog"] .article-gallery {
  grid-area: gallery;
  position: relative;
  min-width: 0;
}

body[data-page="blog"] .article-gallery__main,
body[data-page="blog"] .article-gallery__thumb { margin: 0; }

body[data-page="blog"] .article-gallery__link {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 44px;
  border: 1px solid rgba(0, 191, 249, .34);
  background:
    radial-gradient(circle at 35% 32%, rgba(0, 191, 249, .12), transparent 55%),
    #030504;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255, 255, 255, .018);
  text-decoration: none;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

body[data-page="blog"] .article-gallery__link--main { aspect-ratio: 4 / 3; }

body[data-page="blog"] .article-gallery__link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter var(--t-slow), opacity var(--t-slow), transform var(--t-slow);
}

body[data-page="blog"] .article-gallery__thumb .article-gallery__link { aspect-ratio: 4 / 3; }
body[data-page="blog"] .article-gallery__thumb .article-gallery__link img { object-fit: cover; }

body[data-page="blog"] .article-gallery__link:hover,
body[data-page="blog"] .article-gallery__link:focus-visible {
  border-color: rgba(159, 255, 1, .78);
  box-shadow: 0 28px 78px rgba(0, 0, 0, .5), 0 0 34px rgba(37, 219, 222, .12);
  transform: translateY(-3px);
}

body[data-page="blog"] .article-gallery__link:hover img,
body[data-page="blog"] .article-gallery__link:focus-visible img {
  filter: brightness(.72) saturate(1.08);
  transform: scale(1.018);
}

body[data-page="blog"] .article-gallery__zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(0, 0, 0, .68);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}

body[data-page="blog"] .article-gallery__link:hover .article-gallery__zoom,
body[data-page="blog"] .article-gallery__link:focus-visible .article-gallery__zoom {
  opacity: 1;
  transform: none;
}

body[data-page="blog"] .article-gallery__caption {
  display: grid;
  gap: 4px;
  padding: 13px 4px 0;
  color: var(--ink-dim, #b8b8bd);
  font-size: 15px;
  line-height: 1.35;
}

body[data-page="blog"] .article-gallery__caption strong {
  color: #fff;
  font-weight: 400;
}

body[data-page="blog"] .article-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

body[data-page="blog"] .article-gallery__caption--thumb {
  padding-top: 9px;
  font-size: 13px;
}

body[data-page="blog"] .article-categories {
  padding-top: clamp(96px, calc(142 * var(--k)), 142px);
  border-top: 1px solid rgba(0, 191, 249, .12);
}

body[data-page="blog"] .article-posts { border-top: 1px solid rgba(221, 0, 253, .1); }

body[data-page="blog"] .article-lightbox {
  width: min(94vw, 1500px);
  max-width: none;
  height: min(92vh, 1040px);
  max-height: none;
  padding: 0;
  border: 1px solid rgba(0, 191, 249, .38);
  background: rgba(0, 0, 0, .96);
  color: #fff;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .8), 0 0 60px rgba(0, 191, 249, .09);
}

body[data-page="blog"] .article-lightbox::backdrop {
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(9px);
}

body[data-page="blog"] .article-lightbox__panel {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  height: 100%;
  padding: 58px 16px 22px;
}

body[data-page="blog"] .article-lightbox__figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  min-width: 0;
  height: 100%;
  margin: 0;
}

body[data-page="blog"] .article-lightbox__image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

body[data-page="blog"] .article-lightbox__caption {
  min-height: 24px;
  color: var(--ink-soft, #e7e7e9);
  text-align: center;
  line-height: 1.4;
}

body[data-page="blog"] .article-lightbox button {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font: inherit;
  font-size: 26px;
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}

body[data-page="blog"] .article-lightbox button:hover {
  border-color: var(--accent-lime);
  background: rgba(159, 255, 1, .1);
  transform: scale(1.04);
}

body[data-page="blog"] .article-lightbox__close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
}

body[data-page="blog"] .article-lightbox__nav { justify-self: center; }

body[data-page="blog"] .article-header[data-reveal] { --reveal-transform: translate3d(-24px, 0, 0); }
body[data-page="blog"] .article-gallery[data-reveal] { --reveal-transform: translate3d(24px, 0, 0); }
body[data-page="blog"] .article-content[data-reveal] { --reveal-transform: none; }

.reveal-ready body[data-page="blog"] .article-gallery[data-reveal] img {
  transition-property: opacity, filter, transform;
  transition-duration: var(--t-slow);
  transition-timing-function: var(--ease-enter);
}

.reveal-ready body[data-page="blog"] .article-gallery[data-reveal]:not(.in) img {
  opacity: .24;
  filter: saturate(.32) brightness(.58) blur(3px);
}

.reveal-ready body[data-page="blog"] .article-gallery[data-reveal].in img {
  opacity: 1;
  filter: none;
}

@media (max-width: 1024px) {
  body[data-page="blog"] .article-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "heading"
      "gallery"
      "content";
    row-gap: 36px;
  }

  body[data-page="blog"] .article-copy { display: contents; }
  body[data-page="blog"] .article-header { grid-area: heading; }
  body[data-page="blog"] .article-content { grid-area: content; }

  body[data-page="blog"] .article-gallery {
    position: static;
    width: min(100%, 760px);
  }

  body[data-page="blog"] .article-content { max-width: 860px; }
  body[data-page="blog"] .article-categories { padding-top: 92px; }
}

@media (max-width: 640px) {
  body[data-page="blog"] .article-intro { padding-top: 48px; padding-bottom: 76px; }
  body[data-page="blog"] .article-header__title { font-size: clamp(36px, 12vw, 52px); }
  body[data-page="blog"] .article-content { font-size: 17px; line-height: 1.68; }
  body[data-page="blog"] .article-gallery__thumbs { gap: 12px; margin-top: 16px; }
  body[data-page="blog"] .article-gallery__caption--thumb span { display: none; }
  body[data-page="blog"] .article-gallery__zoom { opacity: 1; transform: none; }
  body[data-page="blog"] .article-categories { padding-top: 72px; }

  body[data-page="blog"] .article-lightbox {
    width: 100vw;
    height: 100dvh;
    border: 0;
  }

  body[data-page="blog"] .article-lightbox__panel {
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    padding: 64px 4px 20px;
  }

  body[data-page="blog"] .article-lightbox button { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="blog"] .article-header__category,
  body[data-page="blog"] .article-gallery__link,
  body[data-page="blog"] .article-gallery__link img,
  body[data-page="blog"] .article-gallery__zoom,
  body[data-page="blog"] .article-lightbox button {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}
/* ===== BLOG ARTICLE CMS LAYER .16.1 : КРАЙ ========================= */

/* ===== ONLINE CONSULTATION RESPONSIVE HOTFIX .25 =================== */
/* The desktop artwork is 108 design units taller than the original section
   allowance. Reserve that space so it cannot paint over the next heading. */
@media (min-width: 1025px) {
  body[data-page="online-konsultirane"] .consult {
    padding-bottom: calc(149 * var(--k));
  }
}
/* ===== ONLINE CONSULTATION RESPONSIVE HOTFIX .25 : END ============= */

/* ===== SHARED GRADIENT CTA CONTRACT .26 ============================ */
/* The boutique CTA is the visual reference. Utility gradients such as the
   contact form controls, consent settings and blog cards remain independent. */
body:is(
  [data-page="landshaftno-proektirane"],
  [data-page="proces-na-rabota"],
  [data-page="dalgostrochno-upravlenie"],
  [data-page="obuchenie"],
  [data-page="proekti"],
  [data-page="butik"],
  [data-page="polivni-sistemi"]
) .ask__btn,
body[data-page="online-konsultirane"] .signup__btn {
  grid-template-columns: calc(64 * var(--k)) minmax(0, 1fr);
  column-gap: calc(23 * var(--k));
  width: 100%;
  height: auto;
  min-height: calc(95 * var(--k));
  align-self: start;
  padding: 0 calc(24 * var(--k)) 0 calc(26 * var(--k));
  border-radius: calc(13 * var(--k));
  background: var(--gradient-accent);
  box-shadow: none;
  color: var(--bg);
  text-decoration: none;
}

body:is(
  [data-page="landshaftno-proektirane"],
  [data-page="proces-na-rabota"],
  [data-page="dalgostrochno-upravlenie"],
  [data-page="obuchenie"],
  [data-page="proekti"],
  [data-page="butik"],
  [data-page="polivni-sistemi"]
) .ask__btn-icon,
body[data-page="online-konsultirane"] .signup__btn-icon {
  width: calc(64 * var(--k));
  height: calc(64 * var(--k));
  object-fit: contain;
  border-radius: 50%;
}

body:is(
  [data-page="landshaftno-proektirane"],
  [data-page="proces-na-rabota"],
  [data-page="dalgostrochno-upravlenie"],
  [data-page="obuchenie"],
  [data-page="proekti"],
  [data-page="butik"],
  [data-page="polivni-sistemi"]
) .ask__btn-text,
body[data-page="online-konsultirane"] .signup__btn-text {
  font-size: clamp(19px, calc(30.8 * var(--k)), 30.8px);
  font-weight: 380;
  line-height: 1.1;
  letter-spacing: .025em;
  color: var(--bg);
}

body:is(
  [data-page="landshaftno-proektirane"],
  [data-page="proces-na-rabota"],
  [data-page="dalgostrochno-upravlenie"],
  [data-page="obuchenie"],
  [data-page="proekti"],
  [data-page="butik"],
  [data-page="polivni-sistemi"]
) .ask__btn:hover,
body:is(
  [data-page="landshaftno-proektirane"],
  [data-page="proces-na-rabota"],
  [data-page="dalgostrochno-upravlenie"],
  [data-page="obuchenie"],
  [data-page="proekti"],
  [data-page="butik"],
  [data-page="polivni-sistemi"]
) .ask__btn:focus-visible,
body[data-page="online-konsultirane"] .signup__btn:hover,
body[data-page="online-konsultirane"] .signup__btn:focus-visible {
  filter: brightness(1.08);
  box-shadow: none;
  transform: translateY(-2px);
}

@media (min-width: 1025px) {
  body:is(
    [data-page="landshaftno-proektirane"],
    [data-page="proces-na-rabota"],
    [data-page="dalgostrochno-upravlenie"],
    [data-page="obuchenie"],
    [data-page="proekti"],
    [data-page="butik"],
    [data-page="polivni-sistemi"]
  ) .ask__inner {
    grid-template-columns: calc(569 * var(--k)) minmax(0, 1fr);
  }

  body[data-page="online-konsultirane"] .signup__btn {
    width: calc(569 * var(--k));
  }
}

@media (max-width: 1024px) {
  body:is(
    [data-page="landshaftno-proektirane"],
    [data-page="proces-na-rabota"],
    [data-page="dalgostrochno-upravlenie"],
    [data-page="obuchenie"],
    [data-page="proekti"],
    [data-page="butik"],
    [data-page="polivni-sistemi"]
  ) .ask .ask__btn,
  body[data-page="online-konsultirane"] .signup .signup__btn {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: calc(23 * var(--k));
    max-width: 460px;
    padding-inline: 16px 20px;
    border-radius: 14px;
  }

  body:is(
    [data-page="landshaftno-proektirane"],
    [data-page="proces-na-rabota"],
    [data-page="dalgostrochno-upravlenie"],
    [data-page="obuchenie"],
    [data-page="proekti"],
    [data-page="butik"],
    [data-page="polivni-sistemi"]
  ) .ask .ask__btn-icon,
  body[data-page="online-konsultirane"] .signup .signup__btn-icon {
    width: 48px;
    height: 48px;
  }

  body:is(
    [data-page="landshaftno-proektirane"],
    [data-page="proces-na-rabota"],
    [data-page="dalgostrochno-upravlenie"],
    [data-page="obuchenie"],
    [data-page="proekti"],
    [data-page="butik"],
    [data-page="polivni-sistemi"]
  ) .ask .ask__btn-text,
  body[data-page="online-konsultirane"] .signup .signup__btn-text {
    font-size: 19px;
    font-weight: 380;
    line-height: 1.25;
    letter-spacing: .025em;
  }
}
/* ===== SHARED GRADIENT CTA CONTRACT .26 : END ====================== */

/* ===== PROEKTI FOOTER OVERFLOW GUARD .27 =========================== */
/* The decorative glow starts in .pf and intentionally continues through the
   following project sections. Clip it only at main's real desktop boundary so
   it cannot extend the document below the footer when the CMS gallery is short. */
@media (min-width: 1025px) {
  body[data-page="proekti"] main#main-content {
    overflow: clip;
  }
}
/* ===== PROEKTI FOOTER OVERFLOW GUARD .27 : END ===================== */