/* Bundle order: Sofia Sans @font-face, site rules, then responsive rules.
   Previously fonts.css, site.css, and responsive.css. Loaded after the template stylesheet. */

/* Sofia Sans — Bulgarian-friendly Cyrillic (self-hosted). See README Typography. */
/* cyrillic-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrOx6kigt.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrOV6kigt.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrO96kigt.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrOF6kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrOx6kigt.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrOV6kigt.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrO96kigt.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrOF6kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrOx6kigt.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrOV6kigt.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrO96kigt.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrOF6kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrOx6kigt.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrOV6kigt.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrO96kigt.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Yq6R-LCVXSLy9uPBwlATrOF6kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  margin: 0;
}

/* Shared section rhythm and headlines. One value per breakpoint, applied in
   responsive.css. --section-space-scale is the phone +20% modifier (PR #3)
   on block padding and the gap between sections. */
:root {
  --content-max: 1280px;
  --section-heading-font: var(--vId-font-token-a, "Sofia Sans", "Segoe UI", sans-serif);
  /* 1.2× the previous clamp(1.45rem, 1rem + 1.5vw, 2.25rem). */
  --section-heading-size: clamp(1.74rem, 1.2rem + 1.8vw, 2.7rem);
  --section-heading-weight: 600;
  --section-heading-line: 1.2;
  /* ~10% under the previous section-heading clamp, so card titles stay smaller. */
  --service-card-title-size: clamp(1.305rem, 0.9rem + 1.35vw, 2.025rem);
  --section-subheading-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem);
  /* Desktop ≥1024. Tablet and phone override below. */
  --section-pad-block: 72px;
  --section-pad-inline: 40px;
  --section-heading-gap: 28px;
  --section-subheading-gap: 12px;
  --section-gap: 32px;
  /* Vertical space between home service blocks only. Stepped with the
     same breakpoints as the section rhythm. The image/copy gap inside
     a block stays on --section-gap. */
  --service-gap: 64px;
  --section-space-scale: 1;
  /* Outer rhythm for every section, hero included: block padding and the
     gap above it. ≤767 multiplies both by --section-space-scale (1.2). */
  --section-block: calc(var(--section-pad-block) * var(--section-space-scale));
  --section-margin: calc(var(--section-gap) * var(--section-space-scale));
  /* Navbar logo, 1.2× the previous box. Tablet is the base; phone and
     desktop override. Header grows with the logo plus this vertical pad. */
  --header-pad-block: 8px;
  --header-logo-width: 129.6px; /* 108 × 1.2 */
  --header-logo-height: 52.8px; /* 44 × 1.2 */
  --header-min-height: calc(var(--header-logo-height) + (var(--header-pad-block) * 2));
  --section-muted-bg: var(--vId-color-token-c, #ffffffe5);
  --section-muted-overlay: linear-gradient(270deg, rgba(127, 127, 127, 0.1) 0%, rgba(127, 127, 127, 0.1) 97.7%);
}

@media (max-width: 1023px) {
  :root {
    --section-pad-block: 48px;
    --section-pad-inline: 24px;
    --section-heading-gap: 24px;
    --section-subheading-gap: 10px;
    --section-gap: 24px;
    --service-gap: 48px;
  }
}

@media (max-width: 767px) {
  :root {
    --section-space-scale: 1.2;
    --section-pad-inline: 16px;
    --section-heading-gap: 20px;
    --section-subheading-gap: 8px;
    --section-gap: 20px;
    --service-gap: 40px;
    --header-logo-width: 162px; /* 135 × 1.2 */
    --header-logo-height: 66px; /* 55 × 1.2 */
  }
}

@media (min-width: 1024px) {
  :root {
    --header-logo-width: 158.4px; /* 132 × 1.2 */
    --header-logo-height: 67.2px; /* 56 × 1.2 */
  }
}

.section-heading {
  font-family: var(--section-heading-font) !important;
  font-size: var(--section-heading-size) !important;
  font-weight: var(--section-heading-weight) !important;
  line-height: var(--section-heading-line) !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  margin-block: 0 var(--section-heading-gap) !important;
  padding-block: 0 !important;
}

[data-displayname="Text"]:has(> .section-heading) {
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
}

/* Eyebrow that sits under a section heading (testimonials). */
.section-subheading {
  font-family: var(--section-heading-font) !important;
  font-size: var(--section-subheading-size) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  color: var(--vId-color-token-d, #111) !important;
  margin: 0 0 var(--section-heading-gap) !important;
  padding: 0 !important;
}

[data-displayname="Text"]:has(> .section-subheading) {
  padding: 0 !important;
  width: 100% !important;
  max-width: 40rem !important;
  text-align: center !important;
}

[data-displayname="Text"]:has(> .section-heading):has(+ [data-displayname="Text"] > .section-subheading) > .section-heading {
  margin-bottom: var(--section-subheading-gap) !important;
}

.service-card-title {
  font-family: var(--section-heading-font) !important;
  font-size: var(--service-card-title-size) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  color: var(--vId-color-token-d, #111) !important;
  margin: 0 !important;
}

.section-muted,
[data-displayname="Service section"] {
  background-color: var(--section-muted-bg) !important;
  background-image: var(--section-muted-overlay) !important;
}

/* Home «Защо да изберете Чистичко?» only. The page behind it is the near-white
   token, so transparent reads as white. «Какво включва» is transparent via
   [data-service-included]; its cards keep their own fill and hover. */
[data-home-why] {
  background-color: transparent !important;
  background-image: none !important;
}

/* Service pages: «Какво включва почистването» only. Cards keep their own fill. */
[data-service-included] {
  background-color: transparent !important;
  background-image: none !important;
}

/* Mission band (#Divsxou) on home and the three service pages. The lede
   column is gone, so the heading and the 100+ / 7 / 30+ row stack as one
   centered block instead of a half-empty two-column row. */
#Divsxou > [data-clientid="DivbmhZ"] {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 0 !important;
  row-gap: 4px !important;
}

#Divsxou [data-clientid="SpanKvwo"] {
  max-width: 46rem !important;
}

#Divsxou [data-clientid="DivKzxz"] {
  width: auto !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}

#Divsxou [data-clientid="DivSmPQ"] {
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
}

.services-section-heading {
  width: min(var(--content-max), 100%);
  max-width: var(--content-max);
  box-sizing: border-box;
  color: var(--vId-color-token-d, #111);
  margin-inline: auto !important;
  margin-top: 0 !important;
  margin-bottom: var(--section-heading-gap) !important;
  padding: 0 !important;
  text-align: center;
}

/* Home service rows. One pattern: image + copy. Desktop alternates;
   ≤1023 always stacks image, title, text, centred button. */
.services-band {
  width: 100%;
}

/* Home «Услуги» only (home and /home-b/). The root token stays 40px at
   ≤767; this band overrides the gap the service rows actually use. */
@media (max-width: 767px) {
  .services-band {
    --service-gap: 50px;
  }
}

.service-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: calc(var(--section-gap) * var(--section-space-scale));
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

.service-feature + .service-feature {
  margin-top: var(--service-gap);
}

/* Home «Услуги» only. Desktop doubles the gap between rows. The last row
   keeps margin-bottom 0, so the space after the section does not grow. */
@media (min-width: 1024px) {
  .services-band .service-feature + .service-feature {
    margin-top: calc(var(--service-gap) * 2);
  }
}

.service-feature--reverse .service-feature__media {
  order: 2;
}

.service-feature__media {
  min-width: 0;
}

.service-feature__media picture {
  display: block;
  width: 100%;
}

.service-feature__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 20px;
}

.service-feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--section-heading-gap);
  min-width: 0;
}

.service-feature__text {
  margin: 0;
  font-family: var(--section-heading-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--vId-color-token-d, #111);
}

.service-feature__actions {
  display: flex;
  justify-content: center;
  width: 100%;
}

.service-feature__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 14px 26px;
  border-radius: 100px;
  background-color: var(--vId-color-token-a, #1c6758);
  font-family: var(--section-heading-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  text-decoration: none;
}

/* Template `a:link { color: inherit }` (0,1,1) beats a bare class. These
   pseudos are 0,2,1 and load later, so the label stays white in every state. */
.service-feature__cta,
.service-feature__cta:link,
.service-feature__cta:visited,
.service-feature__cta:hover,
.service-feature__cta:focus,
.service-feature__cta:focus-visible,
.service-feature__cta:active {
  color: #fff;
}

.service-feature__cta:hover {
  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

@media (max-width: 1023px) {
  .service-feature,
  .service-feature--reverse {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-feature--reverse .service-feature__media {
    order: 0;
  }

  .service-feature__body {
    order: 1;
  }
}

/* Sticky lives on #heroSection, which also wraps the pre-footer band and footer.
   The old parent (main column) ended before those blocks, so the bar scrolled away. */
#heroSection,
#__next,
#__next > div,
#__next > div > div {
  overflow: visible;
}

[data-displayname="Header Block"] {
  overflow: visible;
  position: sticky !important;
  top: 0;
  z-index: 5000 !important;
  width: 100%;
  max-width: none !important;
  background-color: #1c6758;
}

/* Header phone/email circles: icons live inside buttons; flex-center them. */
[data-displayname="Header Block"] [data-displayname="subscibe button"] {
  align-items: center;
}

[data-displayname="Header Block"] [data-displayname="subscibe button"] [data-displayname="Button"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.75rem !important;
  height: 2.75rem !important;
  min-width: 2.75rem !important;
  min-height: 2.75rem !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0;
}

[data-displayname="Header Block"] [data-displayname="subscibe button"] [data-displayname="Button"] [data-displayname="Icon"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  pointer-events: none;
}

[data-displayname="Header Block"] [data-displayname="subscibe button"] [data-displayname="Button"] [data-displayname="Icon"] i {
  display: block;
  line-height: 1;
  font-size: 1.125rem;
}

.services-trigger {
  position: relative;
}

.services-trigger .nav-services-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
}

.services-trigger .nav-services-chevron {
  font-size: 0.7em;
  line-height: 1;
  opacity: 0.9;
}

/* Side-by-side CTA rows (service link + contact pill) */
[data-displayname="CTA"] {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

[data-displayname="CTA"] > [data-displayname="Column"] {
  width: fit-content !important;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
}

[data-displayname="CTA"] form[data-component-type="form-component-v1"] {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

[data-displayname="CTA"] button:has(a[href="/office-cleaning/"]),
[data-displayname="CTA"] button:has(a[href="/entrance-building/"]),
[data-displayname="CTA"] button:has(a[href="/post-construction/"]) {
  width: fit-content !important;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

[data-displayname="CTA"] button:has(a[href="/office-cleaning/"]) a p,
[data-displayname="CTA"] button:has(a[href="/entrance-building/"]) a p,
[data-displayname="CTA"] button:has(a[href="/post-construction/"]) a p {
  white-space: nowrap;
}

[data-displayname="CTA"] form[data-component-type="form-component-v1"] > button[data-displayname="Button"] {
  width: auto !important;
  min-width: 0;
  flex: 1 1 12rem;
  max-width: 100%;
  box-sizing: border-box;
}

[data-displayname="CTA"] form[data-component-type="form-component-v1"] > [data-displayname="Text"] {
  flex: 0 1 auto;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

[data-displayname="CTA"] button[data-displayname="Button"] a {
  display: inline-block;
  width: auto;
}

@media (max-width: 480px) {
  [data-displayname="CTA"] button:has(a[href="/office-cleaning/"]) a p,
  [data-displayname="CTA"] button:has(a[href="/entrance-building/"]) a p,
  [data-displayname="CTA"] button:has(a[href="/post-construction/"]) a p {
    white-space: normal;
  }
}

/* Feature cards: neutral default, brand highlight on hover/focus (all rows) */
[data-displayname="Service section"] [data-displayname="container"] > [data-type="grid-layout"] {
  background-color: #7f7f7f33 !important;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: default;
}

[data-displayname="Service section"] [data-displayname="container"] > [data-type="grid-layout"] p {
  color: var(--vId-color-token-d) !important;
}

[data-displayname="Service section"] [data-displayname="container"] > [data-type="grid-layout"] i {
  color: #339657 !important;
}

[data-displayname="Service section"] [data-displayname="container"] > [data-type="grid-layout"]:hover,
[data-displayname="Service section"] [data-displayname="container"] > [data-type="grid-layout"]:focus-within {
  background-color: var(--vId-color-token-a) !important;
}

[data-displayname="Service section"] [data-displayname="container"] > [data-type="grid-layout"]:hover p,
[data-displayname="Service section"] [data-displayname="container"] > [data-type="grid-layout"]:focus-within p {
  color: #fff !important;
}

[data-displayname="Service section"] [data-displayname="container"] > [data-type="grid-layout"]:hover i,
[data-displayname="Service section"] [data-displayname="container"] > [data-type="grid-layout"]:focus-within i {
  color: #fff !important;
}

/* /prices/ pricing page */
.pricing-page {
  background-color: var(--vId-color-token-c, #eef2e6);
}

.pricing-page__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.pricing-page__header {
  text-align: center;
  max-width: 40rem;
  margin-block: 0 var(--section-heading-gap);
  margin-inline: auto;
}

.pricing-page__header h1 {
  font-family: var(--vId-font-token-a, "Sofia Sans", "Segoe UI", sans-serif);
  font-weight: 700;
  color: var(--vId-color-token-d, #111);
  margin: 0 0 12px;
}

.pricing-page__lead {
  font-family: var(--vId-font-token-a, "Sofia Sans", "Segoe UI", sans-serif);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--vId-color-token-d, #333);
  margin: 0;
}

.pricing-page,
.pricing-page p,
.pricing-page li,
.blog-listing,
.blog-listing p,
.blog-article,
.blog-article p {
  font-family: "Sofia Sans", "Segoe UI", sans-serif;
}

.pricing-page h1,
.pricing-page h2,
.blog-listing h1,
.blog-listing h2,
.blog-article h1,
.blog-article h2,
.pricing-card__price,
.pricing-card__link {
  font-family: "Sofia Sans", "Segoe UI", sans-serif;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pricing-card {
  background-color: #7f7f7f33;
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pricing-card h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  color: var(--vId-color-token-d, #111);
}

.pricing-card__price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #339657;
  margin: 0;
}

.pricing-card__note,
.pricing-card__list {
  color: var(--vId-color-token-d, #222);
}

.pricing-card:hover,
.pricing-card:focus-within {
  background-color: var(--vId-color-token-a, #1c6758);
}

.pricing-card:hover h2,
.pricing-card:hover .pricing-card__price,
.pricing-card:hover .pricing-card__note,
.pricing-card:hover .pricing-card__list,
.pricing-card:focus-within h2,
.pricing-card:focus-within .pricing-card__price,
.pricing-card:focus-within .pricing-card__note,
.pricing-card:focus-within .pricing-card__list {
  color: #fff;
}

.pricing-card__note {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.pricing-card__list {
  margin: 8px 0 0;
  padding-left: 1.2rem;
  flex: 1;
  font-size: 1rem;
  line-height: 1.5;
}

.pricing-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 8px;
  padding: 12px 22px;
  border-radius: 100px;
  background: #fff;
  color: var(--vId-color-token-a, #1c6758) !important;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  font-size: 0.95rem;
}

.pricing-card:hover .pricing-card__link,
.pricing-card:focus-within .pricing-card__link {
  background: #fff;
  color: var(--vId-color-token-a, #1c6758) !important;
}

.blog-listing,
.blog-article {
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

.blog-listing__header h1,
.blog-article h1 {
  font-weight: 700;
  color: var(--vId-color-token-d, #111);
  line-height: 1.25;
  margin: 0 0 12px;
}

.blog-listing__header p,
.blog-article__lead {
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 0 var(--section-heading-gap);
  color: var(--vId-color-token-d, #333);
}

.blog-listing__grid {
  display: grid;
  gap: 20px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: #7f7f7f19;
  box-shadow: 0 0 3px #0000003b;
  border-radius: 14px;
  padding: 0 0 20px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.blog-card img,
.blog-article img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.blog-card h2,
.blog-card p {
  padding: 0 20px;
}

.blog-card h2 {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 16px 0 8px;
}

.blog-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #24302c;
}

.blog-article img {
  height: min(420px, 50vw);
  border-radius: 14px;
  margin-bottom: 20px;
}

.blog-article h2 {
  font-size: 1.35rem;
  margin: 1.5rem 0 0.5rem;
}

.blog-article p {
  line-height: 1.7;
  margin: 0 0 1rem;
}

.blog-article__back a {
  color: var(--vId-color-token-a, #1c6758);
  font-weight: 600;
  text-decoration: none;
}

[data-displayname="blog"] a {
  color: inherit;
  text-decoration: none;
}

[data-displayname="blog"] a:hover {
  text-decoration: underline;
}

.pricing-page__disclaimer {
  margin: var(--section-gap) auto var(--section-subheading-gap);
  max-width: 42rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #555;
}

.pricing-page__cta {
  text-align: center;
  font-family: var(--vId-font-token-a, "Sofia Sans", "Segoe UI", sans-serif);
  font-size: 1.05rem;
}

.pricing-page__cta a {
  color: var(--vId-color-token-a, #1c6758);
  font-weight: 600;
  text-decoration: none;
}

.pricing-page__cta a:hover {
  text-decoration: underline;
}

.services-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 4000;
  min-width: 220px;
  padding: 8px 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.services-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  color: #111;
  text-decoration: none;
  font-family: var(--vId-font-token-a, "Sofia Sans", sans-serif);
  font-size: 1rem;
  white-space: nowrap;
}

.services-menu a:hover {
  background: #eef2e6;
}

form[data-component-type="form-component-v1"] {
  cursor: pointer;
}

img {
  max-width: 100%;
}

/* Breakpoint layout lives in responsive.css (480 / 768 / 1024 / 1280).
   The old max-width: 1199px block hid the email, stacked the header, and
   clipped the hero. Do not restore it. */


.page-hero-title {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.service-atf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: 1rem;
}

.service-atf-links a {
  color: var(--vId-color-token-d, #1c6758);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.header-phone-link,
a.contact-track,
a[data-clientid="Button0rtx"],
a[data-clientid="ButtonuDgw"] {
  color: inherit;
  text-decoration: none;
}

a.contact-track:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.header-phone-link:hover {
  text-decoration: underline;
}

.pre-footer-cta {
  width: 100%;
  max-width: 1980px;
  margin-inline: auto;
  box-sizing: border-box;
  background: var(--vId-color-token-a, #1c6758);
  color: #fff;
}

.pre-footer-cta__inner {
  width: min(960px, 100%);
  margin: 0 auto;
  text-align: center;
}

.pre-footer-cta h2 {
  color: #fff;
}

.pre-footer-cta p {
  margin: 0;
  font-family: var(--vId-font-token-a, "Sofia Sans", "Segoe UI", sans-serif);
  font-size: 1.05rem;
  line-height: 1.5;
  color: #fff;
}

.pre-footer-cta__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--section-heading-gap);
}

/* The copied control needs the register-band button rules (short label, nowrap).
   Section spacing stays on .pre-footer-cta; this wrapper is not a section. */
.pre-footer-cta [data-displayname="register"] {
  width: auto;
  max-width: 100%;
}

/* .pre-footer-cta p was restyling the button label (1.05rem / 1.5, wrapping). */
.pre-footer-cta form[data-displayname="button"] button p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  white-space: normal;
}

.pre-footer-cta form[data-displayname="button"] [data-displayname="Text"] > p {
  margin: 0;
  color: inherit;
}

/* Service pages «Предимствата» — white band, typography and icons like «Как работим». */
[data-displayname="about section"]:has(.section-heading) {
  background-color: #fff !important;
  background-image: none !important;
}

[data-displayname="about section"]:has(.section-heading) .section-heading {
  color: var(--vId-color-token-d, #111) !important;
}

[data-displayname="about section"]:has(.section-heading) [data-displayname="Column"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* Match .process-steps__num; inline width/height:fit-content on legacy spans must lose. */
[data-displayname="about section"]:has(.section-heading) [data-displayname="Icon"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  max-width: 2.25rem !important;
  max-height: 2.25rem !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border-radius: 100px;
  background: var(--vId-color-token-a, #1c6758) !important;
  color: #fff !important;
  font-family: var(--vId-font-token-a, "Sofia Sans", "Segoe UI", sans-serif);
  font-size: 0 !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
}

[data-displayname="about section"]:has(.section-heading) [data-displayname="Icon"] i {
  display: block !important;
  color: #fff !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

[data-displayname="about section"]:has(.section-heading)
  [data-displayname="Column"]
  > [data-displayname="Text"]:nth-child(2)
  p {
  margin: 0 0 8px !important;
  font-family: var(--vId-font-token-a, "Sofia Sans", "Segoe UI", sans-serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  color: var(--vId-color-token-d, #111) !important;
  text-align: center !important;
}

[data-displayname="about section"]:has(.section-heading)
  [data-displayname="Column"]
  > [data-displayname="Text"]:nth-child(3)
  p {
  margin: 0 !important;
  font-family: var(--vId-font-token-a, "Sofia Sans", "Segoe UI", sans-serif) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 26px !important;
  color: var(--vId-color-token-d, #222) !important;
  text-align: center !important;
}

.process-steps {
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

.process-steps h2 {
  text-align: center;
  color: var(--vId-color-token-d, #111);
}

.process-steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.process-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.process-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 10px;
  border-radius: 100px;
  background: var(--vId-color-token-a, #1c6758);
  color: #fff;
  font-family: var(--vId-font-token-a, "Sofia Sans", "Segoe UI", sans-serif);
  font-weight: 600;
}

.process-steps h3 {
  margin: 0 0 8px;
  font-family: var(--vId-font-token-a, "Sofia Sans", "Segoe UI", sans-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--vId-color-token-d, #111);
}

.process-steps p {
  margin: 0;
  font-family: var(--vId-font-token-a, "Sofia Sans", "Segoe UI", sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--vId-color-token-d, #222);
}

[data-displayname^="ANS "] {
  font-family: var(--vId-font-token-a, "Sofia Sans", "Segoe UI", sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--vId-color-token-d, #111);
}

[data-displayname^="ANS "] p {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

@media (max-width: 800px) {
  .process-steps__list {
    grid-template-columns: 1fr;
  }
}

.mobile-call-bar {
  display: none;
}

@media (max-width: 768px) {
  .mobile-call-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6000;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    background: #e8f5e1;
    color: #1c6758;
    font-family: var(--vId-font-token-a, "Sofia Sans", "Segoe UI", sans-serif);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  }

  .mobile-call-bar__label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    opacity: 0.9;
  }

  .mobile-call-bar__phone {
    font-size: 1.15rem;
  }
}

/* The strip is visible from load on phones (no scroll gate), so an Ads click
   lands on a tappable phone number. The consent banner keeps its own gate and
   slides in above the strip. */

.privacy-page {
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  box-sizing: border-box;
  color: #1a2420;
}

.privacy-page h1,
.privacy-page h2,
.privacy-page p,
.privacy-page li,
.privacy-page td,
.privacy-page th {
  font-family: "Sofia Sans", "Segoe UI", sans-serif;
  overflow-wrap: anywhere;
}

.privacy-page h1 {
  font-weight: 700;
  color: #111;
  line-height: 1.25;
  margin: 0 0 12px;
}

.privacy-page .privacy-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 0 var(--section-heading-gap);
}

.privacy-page h2 {
  font-size: var(--section-subheading-size);
  font-weight: 700;
  line-height: 1.3;
  margin: 1.75rem 0 0.6rem;
  color: #111;
}

.privacy-page p,
.privacy-page li {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

.privacy-page p,
.privacy-page ul,
.privacy-page li,
.privacy-page .privacy-dl,
.privacy-page .cookie-table {
  margin-left: 0;
}

.privacy-page ul {
  /* Pull the marker into the article padding so the item text lines up with the headings. */
  margin: 0 0 0.75rem -1em;
  padding-left: 1em;
}

.privacy-page a {
  color: #1c6758;
  font-weight: 600;
}

.privacy-dl {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0 0 1rem;
}

.privacy-dl dt {
  font-weight: 700;
}

.privacy-dl dd {
  margin: 0;
  min-width: 0;
}

.privacy-note {
  background: #fff;
  border-radius: 12px;
  padding: 10px 0;
}

.cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
}

.cookie-table th,
.cookie-table td {
  border-bottom: 1px solid #d5d5d5;
  padding: 10px 12px 10px 0;
  text-align: left;
  vertical-align: top;
}

.cookie-table th {
  font-weight: 700;
}

@media (max-width: 1023px) {
  .privacy-dl {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }

  .privacy-dl dd {
    margin-bottom: 10px;
  }

  .cookie-table thead {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .cookie-table,
  .cookie-table tbody,
  .cookie-table tr,
  .cookie-table td {
    display: block;
    width: 100%;
  }

  .cookie-table tr {
    margin: 0 0 12px;
    padding: 8px 0;
    background: #fff;
    border-radius: 12px;
  }

  .cookie-table td {
    border-bottom: 0;
    padding: 4px 0;
  }

  .cookie-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
  }
}

/* Inline stand-ins for the Font Awesome Free 6.7.2 icons this site used.
   Icons: CC BY 4.0, Font Awesome — https://fontawesome.com/license/free */
i.ch-icon {
  display: inline-block;
  line-height: 1;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

i.ch-icon svg {
  display: block;
  height: 1em;
  width: auto;
  fill: currentColor;
}

/* Shared responsive layer. Breakpoints: 480, 768, 1024 (desktop nav), 1280.
   Typeface is Sofia Sans (see README Typography). Loaded after site.css. */

html {
  -webkit-text-size-adjust: 100%;
  /* Sticky header covers in-page targets unless the scrollport starts below it.
     Header height matches --header-min-height once the logo block's .cd-padding is zeroed.
     Chrome still snaps the scroll offset to a whole pixel, which tucks the target
     ~0.5px under the header without this 1px. It keeps the landing in the 0–2px band. */
  scroll-padding-top: calc(var(--header-min-height) + 1px);
}

/* clip (not hidden) stops sideways scroll without turning the other axis into a
   nested scrollport, which would trap the sticky header. */
html,
body {
  overflow-x: clip;
}

body {
  color: #1a2420;
  font-family: "Sofia Sans", "Segoe UI", sans-serif;
  line-height: 1.5;
}

body :where(p, h1, h2, h3, li, a, button) {
  font-family: "Sofia Sans", "Segoe UI", sans-serif;
}

body :where(p, li) {
  overflow-wrap: break-word;
}

/* Small template copy becomes at least 16px; larger headings keep their size via 1em. */
[data-displayname="Text"] > p,
[data-displayname^="ANS "] > p {
  font-size: max(1rem, 1em);
  line-height: 1.55;
}

@media (min-width: 1280px) {
  [data-displayname="Text"] > p,
  [data-displayname^="ANS "] > p {
    font-size: max(1.0625rem, 1em);
  }
}

@media (min-width: 1920px) {
  [data-displayname="Text"] > p,
  [data-displayname^="ANS "] > p {
    font-size: max(1.125rem, 1em);
  }
}

h1,
.page-hero-title {
  font-size: clamp(2rem, 0.85rem + 3.2vw, 3.15rem) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  overflow-wrap: break-word;
  text-wrap: balance;
  max-width: 100%;
}

/* Headings wrap on spaces. Body copy is left alone (it does not set hyphens). */
h1,
h2,
h3,
.page-hero-title,
.section-heading,
.service-card-title {
  hyphens: manual;
}

h2 {
  overflow-wrap: break-word;
}

/* Home hero intro only. text-wrap: pretty avoids a one-word last line. */
[data-hero-variant="a"] [data-clientid="SpanD93X"] > p {
  text-wrap: pretty;
}

/* Home mission band only; service «Предимствата» uses .section-heading on white. */
[data-displayname="about section"]:not(:has(.section-heading))
  > [data-displayname="container"]
  > [data-displayname="Text"]:first-child
  > p {
  color: #fff !important;
}

/* ---- Header: one row. Desktop nav from 1024. ---- */

[data-displayname="Header Block"] {
  overflow: visible;
}

[data-displayname="Header Block"] > [data-displayname="Container"] {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px;
  position: relative;
  box-sizing: border-box;
  width: min(1280px, 100%) !important;
  max-width: 1280px !important;
  min-height: var(--header-min-height);
  margin: 0 auto !important;
  padding: var(--header-pad-block) clamp(16px, 3vw, 32px) !important;
}

[data-displayname="Left-block"] {
  order: 1;
  flex: 0 0 auto;
  /* Template .cd-padding is 0.05px (~0.09px used) and makes the header taller than --header-min-height. */
  padding: 0;
}

[data-displayname="Left-block"] [data-displayname="image"] {
  display: block !important;
  width: var(--header-logo-width) !important;
  height: var(--header-logo-height) !important;
  margin: 0 !important;
}

[data-displayname="Left-block"] [data-displayname="image"] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The logo box stays the span. The link is shrink-wrapped to that box so
   the header height does not change. White on the green bar is about 6.7:1. */
a.header-logo {
  display: block;
  width: var(--header-logo-width);
  height: var(--header-logo-height);
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

a.header-logo:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

[data-displayname="Header Block"] > [data-displayname="Container"] > [data-displayname="subscibe button"] {
  order: 3;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
}

[data-displayname="Header Block"] form form[data-displayname="subscibe button"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

[data-displayname="Header Block"] [data-displayname="Text"] {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

[data-displayname="Header Block"] [data-displayname="Text"] > p,
[data-displayname="Header Block"] .header-phone-link,
[data-displayname="Header Block"] .contact-track {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

[data-displayname="hamberger menu"] {
  order: 4;
  display: none;
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background-color: transparent !important;
  background-image: none !important;
  position: relative;
  cursor: pointer;
  color: #fff;
}

[data-displayname="hamberger menu"]::before,
[data-displayname="hamberger menu"]::after {
  content: "";
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transition: transform 0.2s ease, top 0.2s ease;
}

[data-displayname="hamberger menu"]::before {
  top: 16px;
  box-shadow: 0 6px 0 #fff;
}

[data-displayname="hamberger menu"]::after {
  top: 28px;
}

body.nav-open [data-displayname="hamberger menu"]::before {
  top: 21px;
  box-shadow: none;
  transform: rotate(45deg);
}

body.nav-open [data-displayname="hamberger menu"]::after {
  top: 21px;
  transform: rotate(-45deg);
}

[data-displayname="hamberger menu"]:focus-visible,
[data-displayname="Header Block"] [data-displayname="Button"]:focus-visible,
[data-displayname="Header-Links"] a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

[data-displayname="Right- block"] {
  display: none !important;
}

[data-displayname="Header-Links"] > span,
[data-displayname="Header-Links"] a,
.services-menu a,
.footer-nav a,
.footer-link,
.service-atf-links a,
button[data-displayname="Button"],
a[data-displayname="Button"] {
  min-height: 44px;
  box-sizing: border-box;
}

[data-displayname="Header-Links"] p {
  margin: 0;
}

/* Desktop nav: link text, the services label, and the phone/email share one center.
   Link anchors were min-height 44px with the label stuck to the top, so Начало / Цени / Блог
   sat higher than Услуги. Contact icons also carried a leftover bottom margin. */
@media (min-width: 1024px) {
  [data-displayname="Header-Links"] > span {
    display: flex !important;
    align-items: center !important;
    align-self: center;
    box-sizing: border-box;
    min-height: 44px;
    height: auto !important;
    padding: 0 16px !important;
  }

  [data-displayname="Header-Links"] > span > a {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    padding: 0;
    line-height: 1.2;
  }

  [data-displayname="Header-Links"] p,
  .services-trigger .nav-services-label {
    margin: 0;
    line-height: 1.2;
  }

  .services-trigger .nav-services-chevron {
    transform: none;
  }

  [data-displayname="Header Block"] [data-displayname="subscibe button"] [data-displayname="Button"] {
    margin: 0 !important;
  }

  /* Template hover fills these circles with the navbar green. */
  [data-clientid="Button0rtx"]:hover,
  [data-clientid="ButtonuDgw"]:hover {
    background-color: #D6D6D6 !important;
    background-image: none !important;
  }

  [data-displayname="Header Block"] [data-displayname="subscibe button"] {
    align-items: center !important;
  }

  [data-displayname="Header Block"] [data-displayname="Text"] {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: auto !important;
  }

  [data-displayname="Header Block"] [data-displayname="Text"] > p,
  [data-displayname="Header Block"] .header-phone-link,
  [data-displayname="Header Block"] .contact-track {
    line-height: 1.2 !important;
    height: auto !important;
  }
}

@media (max-width: 1023px) {
  [data-displayname="Header Block"] > [data-displayname="Container"] {
    padding-block: var(--header-pad-block) !important;
    justify-content: flex-end !important;
  }

  [data-displayname="Left-block"] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  [data-displayname="hamberger menu"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
  }

  [data-displayname="Header Block"] [data-displayname="Text"] {
    display: none !important;
  }

  [data-displayname="Middile-block"] {
    display: none !important;
  }

  body.nav-open [data-displayname="Middile-block"] {
    display: flex !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 30;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 12px 16px;
    background: #165447;
    flex-direction: column !important;
    align-items: stretch !important;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.18);
  }

  body.nav-open [data-displayname="Header-Links"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  body.nav-open [data-displayname="Header-Links"] > span,
  body.nav-open [data-displayname="Header-Links"] a,
  body.nav-open [data-displayname="Header-Links"] p {
    display: flex;
    align-items: center;
    width: 100%;
    color: #fff !important;
  }

  body.nav-open .services-menu {
    position: static;
    min-width: 0;
    width: 100%;
    padding: 0 0 8px 8px;
    background: transparent;
    box-shadow: none;
  }

  body.nav-open .services-menu a {
    color: #fff;
    white-space: normal;
  }

  body.nav-open .services-menu a:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* Phone link as the last item of the open hamburger menu, phones only.
   Tablet keeps the phone circle in the header bar; desktop never shows it.
   Specificity beats the desktop `Header-Links > span { display: flex !important }`. */
[data-displayname="Header-Links"] > span.nav-menu-phone {
  display: none !important;
}

@media (max-width: 767px) {
  body.nav-open [data-displayname="Header-Links"] > span.nav-menu-phone {
    display: flex !important;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  body.nav-open [data-displayname="Header-Links"] a.nav-menu-phone__link {
    gap: 10px;
    min-height: 48px;
    padding: 12px 16px;
    font-family: var(--vId-font-token-a, "Sofia Sans", "Segoe UI", sans-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    text-decoration: none;
  }
}

/* Tablet only. The template body style sets column-gap: 0 (same specificity as the
   base gap: 8px), and the email circle's margin-right is -10px, so the circle
   overlaps the hamburger. Phone (≤767) hides this cluster; desktop (≥1024)
   already zeros the button margin and has no hamburger. */
@media (min-width: 768px) and (max-width: 1023px) {
  [data-displayname="Header Block"] > [data-displayname="Container"] {
    column-gap: 8px !important;
  }

  [data-displayname="Header Block"] [data-displayname="subscibe button"] [data-displayname="Button"] {
    margin: 0 !important;
  }
}

@media (min-width: 1024px) {
  [data-displayname="Middile-block"] {
    order: 2;
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    background: transparent;
  }

  [data-displayname="Header-Links"] {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  [data-displayname="Header Block"] > [data-displayname="Container"] > [data-displayname="subscibe button"] {
    order: 3;
    margin-left: 0 !important;
    gap: 16px !important;
  }

  [data-displayname="hamberger menu"] {
    display: none !important;
  }
}

/* ---- Hero ---- */

[data-displayname="hero wrap"] {
  box-sizing: border-box;
  width: min(1280px, 100%) !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  align-items: center;
  gap: 24px;
}

[data-displayname="hero wrap"] > [data-displayname="container"] {
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
}

[data-displayname="hero wrap"] [data-displayname="Text"],
[data-displayname="hero wrap"] h1 {
  max-width: 100% !important;
  overflow-wrap: break-word;
}

[data-displayname="hero wrap"] form[data-displayname="button"] {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

[data-displayname="hero wrap"] form[data-displayname="button"] [data-displayname="Text"] {
  margin: 0 !important;
}

[data-displayname="hero wrap"] form[data-displayname="button"] [data-displayname="Text"] > p {
  font-size: clamp(1.05rem, 2vw, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #111 !important;
}

@media (max-width: 1023px) {
  [data-displayname="hero wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px;
  }

  [data-displayname="hero wrap"] > [data-displayname="container"]:first-child > [data-displayname="Text"]:nth-child(2) {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }

  [data-displayname="hero wrap"] > [data-displayname="container"]:first-child > [data-displayname="Text"]:nth-child(3) {
    font-size: 1rem !important;
    line-height: 1.45 !important;
    padding-bottom: 12px !important;
  }

  [data-displayname="hero wrap"] > [data-displayname="container"]:first-child > [data-displayname="Text"]:nth-child(3) > p {
    font-size: 1rem !important;
    line-height: 1.45 !important;
    color: #1a2420 !important;
  }

  [data-displayname="hero wrap"] [data-displayname="images"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px;
    height: auto !important;
    min-height: 0 !important;
  }

  [data-displayname="hero wrap"] [data-displayname="images"] > [data-displayname="image"] {
    flex: 1 1 0;
    width: auto !important;
    max-width: none !important;
    height: 156px !important;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 16px;
  }

  [data-displayname="hero wrap"] [data-displayname="images"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  [data-displayname="hero wrap"] [data-displayname="container"]:has(> [data-displayname="quote"]) {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    gap: 12px;
  }

  [data-displayname="hero wrap"] [data-displayname="quote"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  [data-displayname="hero wrap"] [data-displayname="container"]:has(> [data-displayname="quote"]) > [data-displayname="Text"] {
    width: max-content !important;
    max-width: 100% !important;
    flex: 0 0 auto;
    align-self: flex-start;
  }

  [data-displayname="hero wrap"] [data-displayname="container"]:has(> [data-displayname="quote"]) > [data-displayname="Text"] > p {
    white-space: normal;
  }

  [data-displayname="Row"] {
    flex-wrap: wrap !important;
    gap: 16px 12px;
  }

  [data-displayname="Row"] > [data-displayname="Column"] {
    flex: 1 1 140px;
    width: auto !important;
    min-width: 0;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  [data-displayname="Row"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  [data-displayname="Row"] > [data-displayname="Column"] {
    width: 100% !important;
  }
}

[data-displayname="quote"] p,
[data-displayname="quote"] em {
  color: #fff !important;
}

@media (min-width: 1024px) {
  [data-displayname="hero wrap"] {
    flex-direction: row !important;
  }

  [data-displayname="hero wrap"] > [data-displayname="container"] {
    flex: 1 1 0;
    max-width: 50% !important;
  }

  /* The row centers the shorter copy column on the photos, which puts the
     badge below the padding by half the height difference. Stretch the copy
     column and split that free space 1:3 (top:bottom). This offset is inside
     the hero; it is not the section padding. */
  [data-displayname="hero wrap"] > [data-displayname="container"]:first-child {
    align-self: stretch;
    justify-content: flex-start !important;
  }

  [data-displayname="hero wrap"] > [data-displayname="container"]:first-child::before,
  [data-displayname="hero wrap"] > [data-displayname="container"]:first-child::after {
    content: "";
    flex: 1 1 0px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0;
    line-height: 0;
  }

  [data-displayname="hero wrap"] > [data-displayname="container"]:first-child::after {
    flex-grow: 3;
  }

  /* Default hero (data-hero-variant="a") only. The 1:3 spacer
     would grow when the headline got shorter and push the badge down.
     Lock ::before to the long-copy height so the extra space stays under the
     CTA. Values are that ::before height. 1024–1119 follows the measured
     slope; later steps are the wrap plateaus. */
  :root {
    --hero-badge-lock: calc(10.4px - (100vw - 1024px) * 7 / 190);
  }

  [data-hero-variant="a"] > [data-displayname="container"]:first-child::before {
    flex: 0 0 var(--hero-badge-lock);
  }

  /* /home-b/ keeps the 1:3 split. At 1024 the unhyphenated H1 is one line
     taller, which would shrink ::before and lift the badge. This floor is
     the previous ::before height there (header→badge 87px). Wider desktops
     already sit above it, so their gap does not move. */
  [data-hero-variant="b"] > [data-displayname="container"]:first-child::before {
    min-height: 51px;
  }
}

@media (min-width: 1120px) {
  :root {
    --hero-badge-lock: 12.7px;
  }
}

@media (min-width: 1220px) {
  :root {
    --hero-badge-lock: 27.2px;
  }
}

@media (min-width: 1280px) {
  :root {
    --hero-badge-lock: 28.7px;
  }
}

@media (min-width: 1920px) {
  :root {
    --hero-badge-lock: 30.3px;
  }
}

/* ---- Section rhythm ---- */

[data-displayname="main container"] {
  padding-bottom: 0 !important;
}

[data-displayname="hero wrap"],
.process-steps,
.services-band,
[data-displayname="Service section"],
[data-displayname="testimonial section"],
[data-displayname="blog"],
[data-displayname="register"]:not(.pre-footer-cta [data-displayname="register"]),
[data-displayname="about section"],
.section-muted,
.pre-footer-cta,
[data-displayname="footer"],
.pricing-page,
.blog-listing,
.blog-article,
.privacy-page,
.not-found {
  box-sizing: border-box;
  padding-block: var(--section-block) !important;
  padding-inline: var(--section-pad-inline) !important;
  margin-top: var(--section-margin) !important;
  margin-bottom: 0 !important;
}

/* Phones only. The gap from the navbar to the «Гаранция за удовлетвореност»
   badge equals the gap from the badge to the H1: the 10px padding-top of the
   H1 block (max-width: 1023px hero rule above). Only the hero wrap pages
   (home and the three service pages) have this element.
   Bottom padding and every other section keep the shared rhythm. */
@media (max-width: 767px) {
  [data-displayname="hero wrap"] {
    margin-top: 0 !important;
    padding-top: 10px !important;
  }
}

/* Template cards container adds padding-top: 50px on top of the subheading
   margin. Zero it so headline→cards is only --section-heading-gap. */
[data-displayname="testimonial section"] > [data-displayname="container"]:has([data-displayname^="testimonial"]) {
  padding-top: 0 !important;
}

[data-displayname="Block"] > .services-section-heading + [data-displayname="solutions"] {
  padding-top: 0 !important;
}

[data-displayname="Block"] > .services-section-heading + [data-displayname="solutions"] [data-displayname="image"] {
  margin-top: 0 !important;
}


/* These bands are centered columns. The template sets margin-left: 0 inline and
   leaves margin-right unset. A plain margin-left: auto loses to that inline
   value, while margin-right: auto still applies, so the spare space all sits
   on the right and the column sticks to the left (auto margins also beat the
   parent's align-items: center). Both sides need !important to actually center. */
[data-displayname="hero wrap"],
[data-displayname="about section"] > [data-displayname="container"],
[data-displayname="Block"] > [data-type="grid-layout"],
[data-displayname="Service section"] > [data-displayname="container"],
[data-displayname="testimonial section"] > [data-displayname="container"],
[data-displayname="blog"] > [data-displayname="container"],
[data-displayname="blog"] > [data-displayname="blog container"],
[data-displayname="footer"] > [data-displayname="container"],
[data-displayname="copy right"],
.pricing-page__inner,
.blog-listing,
.blog-article,
.process-steps {
  width: min(var(--content-max), 100%);
  max-width: var(--content-max);
  margin-inline: auto !important;
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  [data-displayname="about section"] > [data-displayname="container"],
  [data-displayname="Block"] > [data-type="grid-layout"],
  [data-displayname="solutions"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px;
  }

  [data-displayname="image container"],
  [data-displayname="text container"],
  [data-displayname="Column"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  [data-displayname="image container"] [data-displayname="image"],
  [data-displayname="images"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  [data-displayname="image container"] [data-displayname="image"] {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 16px;
  }

  [data-displayname="image container"] img,
  [data-displayname="images"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Mission stats: one centered row each. PR #2's wrap + space-between
     packed fit-content items onto one row (or 2+1) instead.
     #DivKzxz keeps max-width 575px and stays left, so stretch it first. */
  #DivKzxz {
    width: 100% !important;
    max-width: 100% !important;
  }

  #DivKzxz > [data-displayname="Text"] {
    width: 100% !important;
    max-width: 40rem !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  #DivKzxz > [data-displayname="Text"] > p {
    text-align: center !important;
  }

  [data-displayname="counter"] {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 16px !important;
  }

  [data-displayname="counter"] > [data-type="grid-layout"] {
    width: auto !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* Feature and blog cards share one grid: 1 column, 2 from 768, 3 from 1024.
   auto-fit minmax(240px) packed five tracks into the 1280px row. */

.card-grid,
[data-displayname="Service section"] > [data-displayname="container"]:has(> [data-displayname="1"]),
[data-displayname="blog container"],
.blog-listing__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 20px;
  width: min(var(--content-max), 100%) !important;
  max-width: var(--content-max) !important;
  margin-inline: auto !important;
  justify-content: center;
  align-items: stretch;
}

@media (min-width: 768px) {
  .card-grid,
  [data-displayname="Service section"] > [data-displayname="container"]:has(> [data-displayname="1"]),
  [data-displayname="blog container"],
  .blog-listing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .card-grid,
  [data-displayname="Service section"] > [data-displayname="container"]:has(> [data-displayname="1"]),
  [data-displayname="blog container"],
  .blog-listing__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

[data-displayname="Service section"] > [data-displayname="container"] > [data-displayname="1"],
[data-displayname="Service section"] > [data-displayname="container"] > [data-displayname="2"],
[data-displayname="Service section"] > [data-displayname="container"] > [data-displayname="3"],
[data-displayname="Service section"] > [data-displayname="container"] > [data-displayname="4"],
[data-displayname="Service section"] > [data-displayname="container"] > [data-displayname="5"],
[data-displayname="Service section"] > [data-displayname="container"] > [data-displayname="6"],
[data-displayname="blog 1"],
[data-displayname="blog 2"],
[data-displayname="blog 3"] {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0;
}

/* Blog intro sits under the headline only through tablet. Desktop keeps the
   template row: title and lede side by side, each capped at 600px. */
@media (max-width: 1023px) {
  [data-displayname="blog"] > [data-displayname="container"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  [data-displayname="blog"] > [data-displayname="container"] > [data-displayname="Text"] {
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
  }
}

@media (min-width: 1024px) {
  [data-displayname="blog"] > [data-displayname="container"] {
    flex-direction: row !important;
    align-items: flex-start !important;
    column-gap: 50px;
  }

  [data-displayname="blog"] > [data-displayname="container"] > [data-displayname="Text"] {
    width: 100% !important;
    max-width: 600px !important;
    flex: 1 1 0;
  }
}

[data-displayname="blog 1"] [data-displayname="image"],
[data-displayname="blog 2"] [data-displayname="image"],
[data-displayname="blog 3"] [data-displayname="image"] {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 0 !important;
}

[data-displayname="container"]:has(> [data-displayname="testimonial 1"]) {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100% !important;
  max-width: none !important;
}

[data-displayname="testimonial 1"] {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0;
}

@media (min-width: 1024px) {
  [data-displayname="container"]:has(> [data-displayname="testimonial 1"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Service sibling links as chips. */

.service-atf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 0;
}

.service-atf-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #1c6758;
  background: #eef2e6;
  color: #1c6758 !important;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
}

.service-atf-links a:hover {
  background: #1c6758;
  color: #fff !important;
}

/* Footer: 3 columns, stacked on small screens. */

[data-displayname="footer"] > [data-displayname="container"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 40px;
  align-items: start;
  width: min(1280px, 100%) !important;
  border-bottom: 1px solid #c5c5c5;
  padding-bottom: var(--section-heading-gap) !important;
}

[data-displayname="footer"] > [data-displayname="container"] > * {
  min-width: 0;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

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

.footer-nav__title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #111;
}

.footer-nav a,
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #1a2420;
  font-size: 1rem;
  text-decoration: none;
}

.footer-nav a:hover,
.footer-link:hover {
  color: #1c6758;
  text-decoration: underline;
}

.footer-nav button.footer-link {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #1a2420;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
}

.footer-nav button.footer-link:hover {
  color: #1c6758;
  text-decoration: underline;
}

[data-displayname="copy right"] {
  padding-inline: var(--section-pad-inline) !important;
}

/* Bottom legal row: «Политика за поверителност» and «Настройки за бисквитки»
   sit in the © band. Phones stack the row above the © line, so © stays last. */
[data-displayname="copy right"] {
  flex-direction: column !important;
  align-items: center !important;
  row-gap: 0 !important;
  /* Half of the white space after ©: the band's own 10px moves into the
     footer's bottom padding below, and that sum is halved. */
  padding-bottom: 0 !important;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 20px;
}

.footer-legal .footer-legal__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #1a2420;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  box-sizing: border-box;
}

.footer-legal .footer-legal__link:hover {
  color: #1c6758;
  text-decoration-thickness: 2px;
}

.footer-legal .footer-legal__link:focus-visible {
  outline: 2px solid #1c6758;
  outline-offset: 2px;
  border-radius: 2px;
}

@media (min-width: 768px) {
  [data-displayname="copy right"] {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .footer-legal {
    flex-wrap: nowrap;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  [data-displayname="footer"] > [data-displayname="container"] {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* FAQ rows and the sticky call bar. */

[data-displayname="Flex - Vertical"] > [data-displayname="Flex - Horizontal"] {
  min-height: 48px;
  align-items: center;
}

@media (max-width: 768px) {
  #heroSection {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }

  body {
    scroll-padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
}

[data-displayname="image"] img {
  max-width: 100%;
}

@media (max-width: 1023px) {
  [data-displayname="Block"] [data-displayname="CTA"] {
    justify-content: center !important;
  }

  [data-displayname="Block"] [data-displayname="CTA"] > [data-displayname="Column"] {
    width: auto !important;
    max-width: 100% !important;
    align-items: center !important;
    margin-inline: auto !important;
  }

  [data-displayname="Block"] [data-displayname="CTA"] button[data-displayname="Button"] {
    width: auto !important;
  }
}

@media (max-width: 480px) {
  [data-displayname="hero wrap"] [data-displayname="images"] > [data-displayname="image"] {
    height: 132px !important;
  }

  [data-displayname="CTA"] {
    align-items: stretch !important;
  }

  [data-displayname="CTA"] button[data-displayname="Button"] {
    width: 100% !important;
  }

  [data-displayname="Block"] [data-displayname="CTA"] {
    align-items: center !important;
  }

  [data-displayname="Block"] [data-displayname="CTA"] button[data-displayname="Button"] {
    width: auto !important;
  }
}

/* Desktop label. The short label is the accessible name on phones. */
.register-cta__short {
  display: none;
}

/* Phone-only. Tablet (768–1023) keeps the previous responsive pass. */
@media (max-width: 767px) {
  [data-displayname="Header Block"] > [data-displayname="Container"] > [data-displayname="subscibe button"] {
    display: none !important;
  }

  /* Hiding the contact cluster removes the auto margin that held the menu button
     at the right. Put that margin on the button itself. */
  [data-displayname="hamberger menu"] {
    margin-left: auto !important;
  }

  [data-displayname="hero wrap"] form[data-displayname="button"] {
    display: none !important;
  }

  /* Same composition as desktop, scaled to the column: shorter image on the
     left, taller on the right, bottoms aligned, badges overlapping that row.
     Width ratio is 225:330, the same as the desktop photos. */
  [data-displayname="hero wrap"] [data-displayname="images"] {
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    column-gap: 10px !important;
    width: 100% !important;
    height: auto !important;
  }

  [data-displayname="hero wrap"] [data-displayname="images"] > [data-displayname="image"] {
    flex: 0 0 auto;
    max-width: none !important;
    margin: 0 !important;
    height: auto !important;
    overflow: hidden;
    border-radius: 16px;
  }

  [data-displayname="hero wrap"] [data-displayname="images"] > [data-displayname="image"]:first-of-type:not(:last-of-type) {
    width: calc((100% - 10px) * 225 / 555) !important;
    aspect-ratio: 225 / 320;
  }

  [data-displayname="hero wrap"] [data-displayname="images"] > [data-displayname="image"]:last-of-type:not(:first-of-type) {
    width: calc((100% - 10px) * 330 / 555) !important;
    aspect-ratio: 330 / 420;
  }

  [data-displayname="hero wrap"] [data-displayname="images"] > [data-displayname="image"]:only-of-type {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 575 / 500;
    flex: 1 1 auto;
  }

  [data-displayname="hero wrap"] [data-displayname="container"]:has(> [data-displayname="quote"]) {
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: -36px 0 0 !important;
    gap: 10px !important;
    column-gap: 10px !important;
  }

  [data-displayname="hero wrap"] [data-displayname="quote"] {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
  }

  [data-displayname="hero wrap"] [data-displayname="container"]:has(> [data-displayname="quote"]) > [data-displayname="Text"] {
    width: auto !important;
    max-width: 8.25rem !important;
    flex: 0 0 auto;
    align-self: flex-end;
  }

  [data-displayname="hero wrap"] [data-displayname="container"]:has(> [data-displayname="quote"]) > [data-displayname="Text"] > p {
    white-space: normal !important;
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
  }

  [data-displayname="hero wrap"] [data-displayname="quote"] [data-displayname="Text"] > p,
  [data-displayname="hero wrap"] [data-displayname="quote"] em {
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
  }

  [data-displayname="hero wrap"] [data-displayname="quote"] [data-displayname="Text"] {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0;
  }

  [data-displayname="register"] form[data-displayname="button"] {
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;
    column-gap: 8px !important;
    row-gap: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding: 6px 10px !important;
    box-sizing: border-box;
  }

  [data-displayname="register"] form[data-displayname="button"] [data-displayname="Text"] {
    margin: 0 !important;
  }

  [data-displayname="register"] form[data-displayname="button"] [data-displayname="Text"] > p {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
  }

  [data-displayname="register"] button[data-displayname="Button"] {
    width: auto !important;
    padding: 8px 12px !important;
  }

  [data-displayname="register"] .register-cta__full {
    display: none;
  }

  [data-displayname="register"] .register-cta__short {
    display: inline;
  }
}