/* self-hosted from Google Fonts (SIL Open Font License): Noto Serif Display (as "SK Serif"), Geist; latin + cyrillic */
@font-face{font-family:"SK Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/sk/fonts/sk-serif-cyrillic.woff2) format("woff2");ascent-override:108%;descent-override:31%;line-gap-override:0%;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"SK Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/sk/fonts/sk-serif-latin.woff2) format("woff2");ascent-override:108%;descent-override:31%;line-gap-override:0%;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}
@font-face{font-family:"Geist";font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/sk/fonts/geist-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Geist";font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/sk/fonts/geist-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---- base.css */
/* СтройКонсулт brand layer (lead-owned). Meridian stays the design system; this file only:
   1. swaps the Latin-only Gambarino for "SK Serif" (Noto Serif Display at wdth 76 / wght 460, metric-matched to
      Gambarino in get-fonts.mjs), through the template's own font variable;
   2. keeps standard Cyrillic letterforms (the Bulgarian "locl" forms look italic in a serif and mix with Geist);
   3. the skip link and the statements-slider mark. */
:root {
  --_typography---font--secondary-family: "SK Serif", "Times New Roman", serif;
}
html, body, input, textarea, select, button {
  font-feature-settings: "locl" 0;
}

.sk-skip {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 10000;
  padding: .75rem 1rem;
  border-radius: .25rem;
  background: var(--swatch--dark);
  color: var(--swatch--light);
  font: 500 1rem/1.2 Geist, sans-serif;
  text-decoration: none;
  transition: top .2s;
}
.sk-skip:focus { top: 1rem; }

.card_testimonial_photo .sk-quote-mark { object-fit: cover; }

/* Long Bulgarian compounds must never push a phone layout sideways */
h1, h2, h3, h4, h5, h6, p, li, a, .u-text-style-h1, .u-text-style-h2, .u-text-style-h3 { overflow-wrap: break-word; }

/* The phone menu holds more links than the template's (two audiences + overview links): let it scroll inside the
   screen instead of pushing the call to action below the fold. Lenis leaves it alone (data-lenis-prevent). */
@media screen and (max-width: 991px) {
  .nav_menu { max-height: calc(100dvh - 6.5rem); overflow-y: auto; overscroll-behavior: contain; }
}

/* Small laptops (992-1100 px): the Bulgarian nav labels are longer than the template's, so the links and the button
   use the template's next smaller spacing step there; from 1100 px up everything is the template's own spacing. */
@media screen and (min-width: 992px) and (max-width: 1100px) {
  .nav_link_wrap { padding-left: var(--_size---space--extra-small); padding-right: var(--_size---space--extra-small); }
  .nav_btn_wrap { padding-left: var(--_size---space--small); padding-right: var(--_size---space--small); }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {
  .nav_menu_left { grid-column-gap: 0; }
}

/* ---- Empty-void fixes (owner review 2026-10-20). Meridian's split layouts push the heading to the top and the text
   to the bottom of a column as tall as its photo, and leave side columns empty beside long step lists and forms.
   On desktop (where columns sit side by side) the content is grouped instead, with the template's own spacing:
   - text beside a photo: one block, centred against the photo;
   - side columns beside long lists/forms: content at the top, and the column stays in view while the long side
     scrolls (sticky under the nav). */
@media screen and (min-width: 992px) {
  .split_main_content { justify-content: center; row-gap: var(--_size---space--huge); }
  .layout_horizontal_left,
  .form_contact_left { position: sticky; top: 7.5rem; align-self: start; }
  .form_contact_left { justify-content: flex-start; row-gap: var(--_size---space--huge); }
}

/* ---- Production pass (2026-10-20 audit) ----------------------------------------------------------------------- */
/* Anchors (#paketi, #kak-rabotim, #firmi) and focused form fields land below the floating nav, not under it. */
html { scroll-padding-top: 7.5rem; }
.form_main_input, .w-input, .w-select, .sk-check input, input[type="checkbox"], textarea { scroll-margin-top: 8.5rem; }
@media screen and (max-width: 991px) { html { scroll-padding-top: 6rem; } }

/* Headings never leave one word alone on their last line. Balancing only moves words between the same number of
   lines, so the 1:1 line counts are unchanged; SplitText splits the balanced lines as they are. */
h1, h2, h3, h4, .g_heading, .card_main_heading, .card_pricing_price, .footer_cta_heading h2 { text-wrap: balance; }
/* body paragraphs avoid a single word on their last line */
.g_description p, .u-rich-text-accordion p, .split_main_description p, .card_image_content p, .card_icon_content p { text-wrap: pretty; }
/* numbers with their units and one-letter prepositions with their word (lib.mjs finalize wraps them;   does not
   survive SplitText) */
.sk-nowrap { white-space: nowrap; }

/* Visible keyboard focus everywhere (Webflow's base CSS removes it from dropdowns, slider arrows, the menu button and
   inputs). Colours are the template's own text/light swatches. */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--_theme---text, currentColor);
  outline-offset: 3px;
}
.u-theme-dark :focus-visible, .nav_wrap :focus-visible, .footer_card :focus-visible, .footer_cta_wrap :focus-visible,
.card_pricing_wrap.w-variant-98b93382-1bc8-dc43-0509-6d50bb00a3c9 :focus-visible { outline-color: var(--swatch--light); }
.nav_dropdown_toggle:focus-visible, .w-nav-button:focus-visible, .w-slider-arrow-left:focus-visible, .w-slider-arrow-right:focus-visible,
.accordion_title:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: var(--_size---radius--small); }
main:focus { outline: none; }

/* Phone and tablet menu: the two audience groups open on tap (the template keeps them always open, which made the
   menu taller than a phone screen); the template's own chevron shows the state. */
@media screen and (max-width: 991px) {
  .nav_dropdown_menu:not(.w--open) { display: none; }
  .nav_dropdown_toggle .nav_dropdown_icon { display: block; transition: transform .3s cubic-bezier(.165, .84, .44, 1); }
  .nav_dropdown_toggle.w--open .nav_dropdown_icon { transform: rotate(180deg); }
  .nav_dropdown_toggle { display: flex; justify-content: space-between; align-items: center; }
}

/* Tablet (768-991): the template drops 3-card grids to 2 columns, which leaves the third card alone beside an empty
   cell. Keep them three across, as on desktop. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .cms_grid_item, .card_service_wrap, .card_team_wrap { grid-column: span 4; }
  /* price cards are too text-heavy for three across: one centred column (the template's phone layout, its card
     max-width) instead of 2 + 1 */
  .card_pricing_wrap { grid-column: span 12; width: 100%; max-width: 36rem; margin-left: auto; margin-right: auto; }
}

/* Small laptops (992-1199): the step list's duration labels stack under every title (the template's phone layout),
   instead of some beside and some under their titles. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .item_feature_row { flex-flow: column; align-items: flex-start; row-gap: var(--_size---space--extra-small); }
  /* the big h2 in half-width columns (splits, the process column) uses the template's next size here, so Bulgarian
     headings keep the template's 3 lines instead of 4 lines of one or two words */
  .split_main_content .g_heading, .layout_horizontal_left .g_heading, .layout_vertical_wrap .heading_wrap:not(.is-hero) .g_heading { --_text-style---font-size: var(--_size---font-size--h3); }
}

/* Four price cards (lib fillPricingGrid): four across on wide screens, 2 x 2 from 768 px (the template's own tablet
   layout for price cards), stacked on phones. Never 3 + 1. */
@media screen and (min-width: 768px) {
  .sk-pricing-4 > .card_pricing_wrap { grid-column: span 6; max-width: none; margin-left: 0; margin-right: 0; }
}
@media screen and (min-width: 1280px) {
  .sk-pricing-4 > .card_pricing_wrap { grid-column: span 3; padding-left: var(--_size---space--main); padding-right: var(--_size---space--main); }
}

/* Touch targets of at least 44 px on phones, without changing the template's look. */
@media screen and (max-width: 767px) {
  .footer_link_wrap { min-height: 2.75rem; display: flex; align-items: center; }
  .w-nav-button, .nav_hamburger { min-width: 2.75rem; min-height: 2.75rem; }
  .testimonials_slider_arrow { min-width: 2.75rem; min-height: 2.75rem; }
  .btn_main_wrap { min-height: 2.75rem; }
}

/* The side column's fact list (fillSideIntro) */
.sk-side-intro .form_demo_list { margin-top: var(--_size---space--small); }

/* ---- Phones (owner 2026-10-22: "mobile native", desktop untouched) ---------------------------------------------
   Everything below sits inside a phone media query (767 px and narrower); 768 px and up stay exactly as they were.
   The values are the template's own tokens, shared by every page's CSS so the phone rhythm is one system:
   - swipe rows: teaser groups of 3-4 cards scroll sideways, snap to a card and let the next one peek in;
   - section spacers: shorter than the template's 64-80 px phone spacers, so same-colour sections do not leave
     empty bands of 130-160 px between them;
   - headings and statements read from the left edge like the cards and accordions under them. */
@media screen and (max-width: 767px) {
  /* section rhythm (the spacer heights, not the body tokens, which the slider padding also uses) */
  .g_section_padding:where(.w-variant-a65b70c0-c6e4-2337-a6e8-23a3768d855e) { height: 3rem; }
  .g_section_padding:where(.w-variant-66dc506c-bba1-d1e0-e82c-f2f306114cf6) { height: 3.5rem; }
  .g_section_padding[data-wf--section-padding--padding="huge"] { height: 4rem; }

  /* swipe rows: the price tables (home #paketi, both /tseni grids; not the 1-card order summary) and the 3-card
     example teasers (home, the audience pages, „Още примери“ under every example). The /primeri listing stays a list. */
  .layout_vertical_grid:has(> .card_pricing_wrap),
  :is([data-sk-src="index.html#5"], [data-sk-src="services.html#7"], [data-sk-src^="case-study/"][data-sk-src$=".html#3"]) .cms_grid_list {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--_size---site--margin);
    margin-inline: calc(var(--_size---site--margin) * -1); padding-inline: var(--_size---site--margin);
    column-gap: var(--_size---site--gutter); scrollbar-width: none;
  }
  .layout_vertical_grid:has(> .card_pricing_wrap)::-webkit-scrollbar,
  :is([data-sk-src="index.html#5"], [data-sk-src="services.html#7"], [data-sk-src^="case-study/"][data-sk-src$=".html#3"]) .cms_grid_list::-webkit-scrollbar { display: none; }
  .layout_vertical_grid:has(> .card_pricing_wrap) > .card_pricing_wrap,
  :is([data-sk-src="index.html#5"], [data-sk-src="services.html#7"], [data-sk-src^="case-study/"][data-sk-src$=".html#3"]) .cms_grid_item { flex: 0 0 85%; scroll-snap-align: start; }

  /* photos: landscape crops on phones, so a photo never fills half the screen before its text */
  .split_main_visual { aspect-ratio: 4 / 3; }
  .card_team_visual { aspect-ratio: 4 / 3; }
  .card_service_visual { aspect-ratio: 3 / 2; }
  .callout_row_visual { aspect-ratio: 2 / 1; }

  /* 4-up icon cards: the icon beside the text (list rows) instead of on its own row above it */
  .card_icon_wrap { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--_size---space--main); row-gap: 0; align-items: start; }
  /* check lists: the icon at the first line of a two-line item */
  .item_main_wrap { align-items: flex-start; }
  /* case tags: 12 px like the eyebrows (the template drops them to 11 px on phones) */
  .tag_main_text { font-size: var(--_size---font-size--text-extra-small); }

  /* left-aligned section headings: the centred heading rows (prices, examples, FAQ, audiences), the statements
     (.text_callout_wrap) and the centred page heroes of /tseni, /kontakti, /vaprosi. The service heroes, the
     statements slider and the 404 card stay centred. */
  .heading_wrap:where(.w-variant-128b6ffe-0ffe-ec91-ea0d-96c95e3f4838),
  :is(.sk-pricing, .sk-contact, .sk-faq, .sk-primeri, .sk-blog-index, .sk-blog-category, .sk-legal, .sk-checkout) .heading_wrap.is-hero:where(.w-variant-0ec8cf91-c3c5-258e-abae-e89a73b223b4),
  .text_callout_wrap { text-align: left; align-items: flex-start; margin-left: 0; }
  .heading_title:where(.w-variant-128b6ffe-0ffe-ec91-ea0d-96c95e3f4838),
  :is(.sk-pricing, .sk-contact, .sk-faq, .sk-primeri, .sk-blog-index, .sk-blog-category, .sk-legal, .sk-checkout) .is-hero .heading_title:where(.w-variant-0ec8cf91-c3c5-258e-abae-e89a73b223b4) { align-items: flex-start; }
  /* the statements run to 7-10 lines on phones, past what balancing handles: no single word on the last line */
  .text_callout_heading { text-wrap: pretty; }
  /* the FAQ title at the h2 size (32 px, 2 lines instead of 3 lines of 40 px above the accordion) */
  .faq_list_wrap .heading_wrap .g_heading { --_text-style---font-size: var(--_size---font-size--h2); }
  /* the company statements: the template's next serif size, about two lines shorter; still centred */
  .card_testimonial_quote.u-text-style-h4 { --_text-style---font-size: var(--_size---font-size--h5); }
  /* long-form text never ends a paragraph on one word (desktop wrapping is unchanged) */
  .u-rich-text--blog p, .u-rich-text--blog li, .u-rich-text p, .u-rich-text li, .utility_main_title p { text-wrap: pretty; }
  .u-rich-text--blog blockquote { text-wrap: balance; }

  /* home hero: the heading, text and button as one group (the template's 80 px gap left a hole) */
  .hero_visual_layout { row-gap: var(--_size---space--huge); }

  /* footer: the link groups in two columns (each link keeps its 44 px target); the bottom bar one column, its two
     links with 44 px targets that do not overlap */
  .footer_links_wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--_size---space--main); align-items: start; }
  .footer_link_text { white-space: normal; }
  .footer_bottom.u-grid { grid-template-columns: minmax(0, 1fr); }
  .footer_bottom_left, .footer_text_link.u-text-style-micro { grid-column: 1 / -1; }
  .footer_text_link a { display: inline-block; padding-block: .875rem; margin-block: -.3125rem; }

  /* nav and footer: the logo links are 44 px targets; the page under the open menu does not scroll */
  .nav_brand { min-height: 2.75rem; }
  .footer_brand { padding-block: .5rem; margin-block: -.5rem; }
  html:has(.w-nav-button.w--open) { overflow: hidden; }

  /* slider arrows: the template's 8 px gap between the two (now 44 px) circles */
  .testimonials_slider_arrow.is-prev { left: calc(50% - 3rem); }
  .testimonials_slider_arrow.is-next { right: calc(50% - 3rem); }
}
/* narrow phones (374 px and below): the display and large headings one step smaller, so no line holds a single word */
@media screen and (max-width: 374px) {
  body { --_size---font-size--display: 2.5rem; --_size---font-size--h1: 2.125rem; }
}
/* the phone menu's contact link (lib chrome) exists on phones only */
@media screen and (min-width: 768px) {
  .sk-nav-phone { display: none; }
}

/* Phones: a statements quote never ends on a single word (lib fillQuotes wraps its last two words). */
@media screen and (max-width: 767px) {
  .card_testimonial_quote .sk-tail { white-space: nowrap; }
}

/* Phones, second review (2026-10-22). */
@media screen and (max-width: 767px) {
  /* swipe rows move one card per flick (a fast flick no longer skips the featured SILVER card) */
  .layout_vertical_grid:has(> .card_pricing_wrap) > .card_pricing_wrap,
  :is([data-sk-src="index.html#5"], [data-sk-src="services.html#7"], [data-sk-src^="case-study/"][data-sk-src$=".html#3"]) .cms_grid_item,
  .sk-service [data-sk-src="services/operations-audit.html#6"] .layout_vertical_grid > .card_team_wrap,
  .sk-blog-article main > section:nth-of-type(3) .cms_grid_item,
  .sk-primeri .cms_featured_list > .cms_featured_item { scroll-snap-stop: always; }
  /* phone-only glue (lib pnwHtml, finalize): numbers with their units, the statements' last two words */
  .sk-pnw, .text_callout_heading .sk-tail { white-space: nowrap; }
  /* the link under the home price row aligns with the left-aligned heading and cards */
  .sk-pricing-more { justify-content: flex-start; }
  /* the open menu dims the page under it, like a native sheet (a tap on the dimmed page still closes it) */
  html:has(.w-nav-button.w--open) body::after { content: ""; position: fixed; inset: 0; z-index: 998; background: rgb(20 16 14 / .5); }
  /* /za-nas: the story's text right after the hero photo, its own photo after the text */
  .sk-about [data-sk-src="about.html#1"] .split_main_visual { order: 1; }
  /* short intro and CTA paragraphs never end on one word */
  .hero_visual_description, .footer_cta_description { text-wrap: pretty; }
}
@media screen and (max-width: 359px) {
  /* the 404 card's two buttons stack at one width */
  .sk-404 .utility_main_btn { flex-direction: column; align-items: stretch; }
  .sk-404 .utility_main_btn .btn_main_wrap { justify-content: center; }
}

/* ---- blog.css */
/* Blog (pages/articles.mjs): fit rules only, scoped to the blog pages (body.sk-blog). */

/* Tablet (768-991): base.css keeps the card grid three across, so a card is about 230 px wide and the template's
   one-row details (category tag + date) no longer fit: the tag text broke inside its pill and the date wrapped,
   differently from card to card. There the tag and the date stack, the same way in every card (the template's own
   spacing step). */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .sk-blog .card_main_details { flex-flow: column; align-items: flex-start; row-gap: var(--_size---space--extra-small); }
  .sk-blog .card_main_details .tag_main_text, .sk-blog .card_main_details .u-text-style-eyebrow { white-space: nowrap; }
}

/* ---- phones (below 768 px only; tablet and desktop stay as they are) */
@media screen and (max-width: 767px) {
  /* the category pills: a 2 x 2 grid of 44 px targets instead of the template's full-width column of 33 px rows */
  .sk-blog .filters_blog_wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-blog .filters_blog_cms, .sk-blog .filters_blog_list, .sk-blog .filters_blog_item { display: contents; }
  .sk-blog .filter_link_wrap {
    display: flex; align-items: center; justify-content: center; min-height: 2.75rem;
    padding-left: var(--_size---space--extra-small); padding-right: var(--_size---space--extra-small);
    white-space: normal; text-wrap: balance;
  }
  /* the newsletter row: the eyebrow sits left, like its heading and the form under it */
  .sk-blog .newsletter_row_title.u-vflex-stretch-top.u-gap-medium { align-items: flex-start; }

  /* /statii and the category pages: the newest article stays a full card, the others are compact rows (a square
     thumbnail beside the tag, the date and the title at h6; the whole row is still the card's link) */
  :is(.sk-blog-index, .sk-blog-category) .cms_grid_list.u-grid { row-gap: var(--_size---space--main); }
  :is(.sk-blog-index, .sk-blog-category) .cms_grid_item:first-child .card_blog_wrap { padding-bottom: var(--_size---space--large); }
  :is(.sk-blog-index, .sk-blog-category) .cms_grid_item + .cms_grid_item .card_blog_wrap {
    display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--_size---space--main); align-items: start;
    padding-bottom: var(--_size---space--main);
  }
  :is(.sk-blog-index, .sk-blog-category) .cms_grid_item + .cms_grid_item .card_blog_visual { aspect-ratio: 1; }
  :is(.sk-blog-index, .sk-blog-category) .cms_grid_item + .cms_grid_item .card_main_content { row-gap: var(--_size---space--extra-small); }
  /* the tag and the date stack in every row (as on tablet), so the rows keep one rhythm whatever the tag's length */
  :is(.sk-blog-index, .sk-blog-category) .cms_grid_item + .cms_grid_item .card_main_details { flex-flow: column; align-items: flex-start; row-gap: var(--_size---space--extra-small); }
  :is(.sk-blog-index, .sk-blog-category) .cms_grid_item + .cms_grid_item .card_main_details > * { white-space: nowrap; }
  :is(.sk-blog-index, .sk-blog-category) .cms_grid_item + .cms_grid_item .card_main_heading { --_text-style---font-size: var(--_size---font-size--h6); }

  /* article pages, „Прочетете още“: the three related articles as a swipe row, the next card peeking */
  .sk-blog-article main > section:nth-of-type(3) .cms_grid_list.u-grid {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--_size---site--margin);
    margin-inline: calc(var(--_size---site--margin) * -1); padding-inline: var(--_size---site--margin);
    column-gap: var(--_size---site--gutter); scrollbar-width: none;
  }
  .sk-blog-article main > section:nth-of-type(3) .cms_grid_list.u-grid::-webkit-scrollbar { display: none; }
  .sk-blog-article main > section:nth-of-type(3) .cms_grid_item { flex: 0 0 85%; min-width: 0; scroll-snap-align: start; }
  .sk-blog-article main > section:nth-of-type(3) .card_blog_wrap { padding-bottom: var(--_size---space--large); }
  .sk-blog-article main > section:nth-of-type(3) .card_main_details > * { white-space: nowrap; }

  /* article body: the reading text one template step up (text-large), as long-form copy on a phone */
  .sk-blog-article .u-rich-text--blog p, .sk-blog-article .u-rich-text--blog li {
    font-size: var(--_size---font-size--text-large); line-height: var(--_typography---line-height--1-5);
  }
  /* the author link is a 44 px target */
  .sk-blog-article .hero_article_author { min-height: 2.75rem; }
}
/* below 360 px the template's phone h1 (40 px) breaks long Bulgarian words („подизпълнителите“) inside a 288 px column:
   one template step down, as examples.css does for the legal titles */
@media screen and (max-width: 359px) {
  .sk-blog-article .hero_article_heading { --_text-style---font-size: var(--_size---font-size--h2); }
  /* „Прочетете още“ in a 272 px card: the tag above the date (they no longer fit side by side) and the title at h6 */
  .sk-blog-article main > section:nth-of-type(3) .card_main_details { flex-flow: column; align-items: flex-start; row-gap: var(--_size---space--extra-small); }
  .sk-blog-article main > section:nth-of-type(3) .card_main_heading { --_text-style---font-size: var(--_size---font-size--h6); }
}
/* Phones, second review: the newsletter note aligns with the form; the article starts right under its photo; on
   narrow phones the category pills fit on one line and the list thumbnails get smaller. */
@media screen and (max-width: 767px) {
  .sk-blog .form_newsletter_layout > .u-text-style-extra-small { text-align: left; }
  .sk-blog-article .u-rich-text--blog > :first-child { margin-top: 0; }
}
@media screen and (max-width: 359px) {
  .sk-blog .filter_link_text { font-size: .6875rem; }
  :is(.sk-blog-index, .sk-blog-category) .cms_grid_item + .cms_grid_item .card_blog_wrap { grid-template-columns: 5rem minmax(0, 1fr); }
}

/* ---- company.css */
/* company pages (pages/audiences, pricing, about, contact, faq, notfound). Only what fits our content into the
   template's components; nothing here restyles the template. */

/* /kontakti: the contact details under the form intro (template label style + main text) */
.sk-contact .sk-contact-details { display: flex; flex-direction: column; gap: var(--_size---space--main); margin-top: var(--_size---space--small); }
.sk-contact .sk-contact-item { display: flex; flex-direction: column; }
.sk-contact .sk-contact-item a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
/* the tap-to-call copy of the number exists for phones only */
.sk-contact .sk-contact-tel { display: none; }
@media screen and (max-width: 767px) {
  /* phones: the number becomes a tel: link in place of the plain text, and both links are 44 px tap targets */
  .sk-contact .sk-contact-item > div.u-text-style-main { display: none; }
  .sk-contact .sk-contact-item a { display: inline-flex; align-items: center; align-self: flex-start; min-height: 2.75rem; white-space: nowrap; }
  .sk-contact .sk-contact-details { gap: var(--_size---space--small); }
}

/* /kontakti: the "Услуга" select looks like the template's inputs; its arrow is the template's accordion chevron */
.sk-contact .sk-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding-right: 3.25rem;
  background-image: url("/assets/69d92b47060ac703de9f43af/69d92b47060ac703de9f43ca_df543aec53bbb016f9ad21d8a88c1b81_accordion-plus.svg");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  background-size: 1.25rem;
  cursor: pointer;
}
/* 320-359 px: the select's first option („Помогнете ми да избера услуга“) was cut under the chevron; the chevron
   moves closer to the edge, the text keeps the inputs' left padding */
@media screen and (max-width: 359px) {
  .sk-contact .sk-select { padding-right: 1.75rem; background-position: right .5rem center; background-size: 1rem; }
}

/* Small laptops (992-1199): the template's own tablet layout for the 4-up icon cards (2 x 2, as Meridian does at
   991 px and below), so single long Bulgarian nouns („Поверителност“) never run past their card and the longer
   Bulgarian card texts do not stack into narrow six-line columns (/za-nas values, the audience pages' cards). */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .sk-about .card_icon_wrap, .sk-audience .card_icon_wrap { border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: var(--_theme---border); grid-column: span 6; }
}

/* Tablet (768-991): the template's 2 columns leave a third card alone beside an empty cell.
   - /za-nas team roles (photo cards): three across, as on desktop;
   - /tseni price tables (text-heavy cards, too narrow at three across): the third card keeps the template's tablet
     width (6 of 12 columns) and sits centred under the first two. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .sk-about .team_grid_list { grid-template-columns: 1fr 1fr 1fr; }
}

/* /tseni#firmi, 992-1199: the cards are too narrow for "от 399 €" and its unit on one row, so the unit sits under
   the price in all three cards (never squeezed beside it). */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .sk-pricing #firmi .card_pricing_row { flex-direction: column; align-items: flex-start; }
  /* /za-nas: the display title in its six columns keeps "Над 40 години" on one line (one template size down) */
  .sk-about .hero_image_heading .g_heading { --_text-style---font-size: var(--_size---font-size--h1); }
}
/* audience pages: a short section title alone in the template's half-width title column broke into two lines; it
   spans the row, as on the service pages */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .sk-audience section[data-sk-src="services.html#5"] .heading_title { grid-column: span 12; }
}

/* 404: the utility card is the main landmark (focused by the skip link, like <main tabindex="-1">) */
.sk-404 .utility_main_wrap:focus { outline: none; }

/* Phones: the consent note's privacy link is a 44 px target (/kontakti). */
@media screen and (max-width: 767px) {
  .sk-contact .u-text-style-extra-small a { display: inline-block; padding-block: .875rem; margin-block: -.875rem; }
}

/* ---- examples.css */
/* ---- examples owner: /primeri, /primeri/<slug>, legal pages ---------------------------------------------------- */

/* /primeri: three featured examples in the template's featured list (the detailed BRONZE, SILVER and GOLD results),
   stacked with the grid's own row gap, so the six below are two complete rows of three. */
.sk-primeri .cms_featured_list { display: flex; flex-direction: column; row-gap: var(--_size---space--extra-large); }

/* Case pages, 992-1199: the template keeps its desktop h1 size in a six-column title, where the longest Bulgarian words
   („Подизпълнител“, „Топлоизолация“) are wider than the column and broke mid-word. One more grid column (the
   summary stays at 9 / span 4) fits them. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .sk-case .hero_cs_left { grid-column: span 7; }
}

/* Case pages: the client's tables (offer and market price, plan and done, totals), lists and check lists inside the
   template's rich text. Template tokens only: hairline rows in the theme border, header cells and captions in the
   template's eyebrow text style, the body text size and colour of the rich text, figures right-aligned with tabular
   numbers. The status is plain text; a flagged status („Надценка“, „Над плана“) and a total row take the theme's text
   colour. */
.sk-case .sk-case-data { margin: var(--_size---space--main) 0 var(--_size---space--large); }
.sk-case .sk-case-data > h3:first-child { margin-top: 0; }
.sk-case .sk-table { width: 100%; margin: 0 0 var(--_size---space--large); border-collapse: collapse; color: var(--_theme---text-faded); font-size: var(--_size---font-size--text-main); line-height: var(--_typography---line-height--1-5); font-variant-numeric: tabular-nums; }
.sk-case .sk-table:last-child { margin-bottom: 0; }
.sk-case .sk-table caption { caption-side: top; padding-bottom: var(--_size---space--small); text-align: left; }
.sk-case .sk-table th, .sk-case .sk-table td { padding: var(--_size---space--small) 0; border-bottom: 1px solid var(--_theme---border); text-align: left; vertical-align: top; font-weight: inherit; }
.sk-case .sk-table tr > * + * { padding-left: var(--_size---space--main); }
.sk-case .sk-table thead th { padding-top: 0; }
.sk-case .sk-table .is-num { text-align: right; white-space: nowrap; }
.sk-case .sk-table .is-flag, .sk-case .sk-table .is-total > * { color: var(--_theme---text); }
.sk-case .sk-case-data .sk-list { margin-bottom: var(--_size---space--large); }
.sk-case .sk-case-data .sk-list:last-child, .sk-case .sk-case-data .form_demo_list:last-child { margin-bottom: 0; }
.sk-case .sk-case-data .item_main_text { margin-bottom: 0; }

/* Phones: tables of three or four columns stack each row: the position on its own line, then the figures and the status
   on the next (the header row the same way), so nothing scrolls sideways at 320 px. */
@media screen and (max-width: 479px) {
  .sk-case .sk-table.is-stack, .sk-case .sk-table.is-stack caption, .sk-case .sk-table.is-stack thead, .sk-case .sk-table.is-stack tbody { display: block; }
  .sk-case .sk-table.is-stack tr { display: grid; grid-template-columns: auto 1fr; column-gap: var(--_size---space--main); row-gap: .25rem; padding: var(--_size---space--small) 0; border-bottom: 1px solid var(--_theme---border); }
  .sk-case .sk-table.is-stack.is-4 tr { grid-template-columns: 5.5rem 5.5rem 1fr; column-gap: var(--_size---space--small); }
  .sk-case .sk-table.is-stack thead tr { padding-top: 0; }
  .sk-case .sk-table.is-stack th, .sk-case .sk-table.is-stack td { padding: 0; border: 0; }
  .sk-case .sk-table.is-stack tr > :first-child { grid-column: 1 / -1; }
  .sk-case .sk-table.is-stack .is-num { text-align: left; }
  .sk-case .sk-table.is-stack .is-status { text-align: right; }
}

/* Legal pages, phones narrower than 360 px: the one-word display title („Поверителност“) is wider than the screen and
   splits its letters over two lines; it steps down one template size (h1) there. */
@media screen and (max-width: 359px) {
  .sk-legal .section_hero h1.g_heading { --_text-style---font-size: var(--_size---font-size--h1); }
}

/* /obshti-usloviya: the sample withdrawal form, one field per line in a bordered box (template border, radius and
   spacing tokens; body text style) */
.sk-form-sample { margin: var(--_size---space--main) 0; padding: var(--_size---space--main) var(--_size---space--large); border: 1px solid var(--_theme---border); border-radius: var(--_size---radius--main); }
.sk-form-sample p { margin: 0 0 var(--_size---space--extra-small); text-align: left; }
.sk-form-sample p:last-child { margin-bottom: 0; }

/* ---- Phones (mobile pass 2026-10-22). Nothing below applies from 768 px up; the case button and the legal contents
   list exist only here. */
.sk-case .sk-case-cta, .sk-legal .sk-legal-toc { display: none; }
@media screen and (max-width: 767px) {
  /* /primeri: the three featured examples as a swipe row, the next card peeking */
  .sk-primeri .cms_featured_list {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--_size---site--margin);
    margin-inline: calc(var(--_size---site--margin) * -1); padding-inline: var(--_size---site--margin);
    column-gap: var(--_size---site--gutter); row-gap: 0; scrollbar-width: none;
  }
  .sk-primeri .cms_featured_list::-webkit-scrollbar { display: none; }
  .sk-primeri .cms_featured_list > .cms_featured_item { flex: 0 0 85%; scroll-snap-align: start; display: flex; }
  .sk-primeri .cms_featured_item .card_case_wrap { width: 100%; }
  /* /primeri: the six other examples as compact list rows, a square thumbnail beside the tag and the title. The whole
     row stays the template's full-card link; the per-card button is hidden from view but stays reachable by keyboard and
     screen readers, and its focus ring is drawn around the row. */
  .sk-primeri [data-sk-src="case-studies.html#2"] .cms_grid_list { row-gap: var(--_size---space--main); }
  .sk-primeri [data-sk-src="case-studies.html#2"] .card_case_wrap { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--_size---space--main); align-items: start; padding-bottom: var(--_size---space--main); }
  .sk-primeri [data-sk-src="case-studies.html#2"] .card_case_image { aspect-ratio: 1; height: auto; }
  .sk-primeri [data-sk-src="case-studies.html#2"] .card_main_heading { --_text-style---font-size: var(--_size---font-size--h6); }
  .sk-primeri [data-sk-src="case-studies.html#2"] .card_case_cta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sk-primeri [data-sk-src="case-studies.html#2"] .card_case_wrap:has(.card_case_cta a:focus-visible) { outline: 2px solid var(--_theme---text); outline-offset: 3px; border-radius: var(--_size---radius--small); }

  /* case pages: a 44 px back link in the same place; the summary card as label | value rows; the button after the
     article */
  .sk-case .breadcrumb_item_wrap { min-height: 2.75rem; margin-top: -.8125rem; margin-bottom: -.8125rem; }
  .sk-case .cs_sidebar_wrap { row-gap: var(--_size---space--small); }
  .sk-case .cs_sidebar_item { display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: var(--_size---space--main); align-items: baseline; padding-bottom: var(--_size---space--small); }
  .sk-case .cs_sidebar_item.is-last { padding-bottom: 0; }
  .sk-case .sk-case-cta { display: flex; margin-top: var(--_size---space--large); }
  .sk-case .sk-case-cta .btn_main_wrap { width: 100%; justify-content: space-between; }

  /* legal pages: the contents list after the hero (one 44 px row per section, the template's hairline border) and the
     body text one template size larger for reading */
  .sk-legal .sk-legal-toc { display: block; }
  .sk-legal .sk-legal-toc > .u-text-style-eyebrow { margin: 0 0 var(--_size---space--small); }
  .sk-legal .sk-legal-toc ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--_theme---border); }
  .sk-legal .sk-legal-toc li { margin: 0; padding: 0; border-bottom: 1px solid var(--_theme---border); }
  .sk-legal .sk-legal-toc a { display: flex; align-items: center; min-height: 2.75rem; padding-top: var(--_size---space--extra-small); padding-bottom: var(--_size---space--extra-small); color: var(--_theme---text); text-decoration: none; }
  .sk-legal .u-rich-text p, .sk-legal .u-rich-text ul { --_text-style---font-size: var(--_size---font-size--text-large); }
}

/* Phones, second review: the case summary's service link is a 44 px target; on narrow phones the /primeri featured
   titles step down one size and the list thumbnails get smaller, so rows stay even. */
@media screen and (max-width: 767px) {
  .sk-case .cs_sidebar_text a { display: inline-block; padding-block: .8125rem; margin-block: -.8125rem; }
}
@media screen and (max-width: 359px) {
  .sk-primeri .cms_featured_item .card_main_heading { --_text-style---font-size: var(--_size---font-size--h4); }
  .sk-primeri [data-sk-src="case-studies.html#2"] .card_case_wrap { grid-template-columns: 5rem minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- the visual result card (examples.mjs audit())
   The client's mockup (2026-10-22) in the template's language: a lighter paper card with the template's hairline
   border and radius, the serif title, eyebrow labels, and colour only where it carries meaning: status pills, the
   problem figure in each row, the counters' dots and the tinted total. Status tones are warm (brick, ochre, sage,
   slate) so they sit with the cream and brown palette; every text colour keeps at least 4.5:1 on its tint. */
.sk-case .sk-audit {
  --sk-card: color-mix(in oklab, var(--swatch--light) 45%, #fff);
  --sk-bad: #9a3a24; --sk-bad-bg: #f6e0d6;
  --sk-warn: #855600; --sk-warn-bg: #f7e9c8;
  --sk-ok: #3d6a3d; --sk-ok-bg: #e2ecdc;
  --sk-info: #4b4f59; --sk-info-bg: #e9e6e2;
  --sk-brand-bg: color-mix(in oklab, var(--swatch--brand) 24%, var(--sk-card));
  max-width: none; margin: var(--_size---space--large) 0 var(--_size---space--huge); padding: var(--_size---space--large);
  background: var(--sk-card); border: 1px solid var(--_theme---border); border-radius: var(--_size---radius--main);
  color: var(--_theme---text); font-variant-numeric: tabular-nums;
}
.sk-case .sk-audit:last-child { margin-bottom: 0; }
/* Webflow's rich text and the template style every figure (max-width 60%), the divs inside it (transparent, size 0)
   and figcaption (small faded capitals with a top margin), all meant for image captions: undone here */
.sk-case .sk-audit div { color: inherit; font-size: inherit; }
.sk-case .sk-audit p, .sk-case .sk-audit ul, .sk-case .sk-audit li { margin: 0; padding: 0; }
.sk-case .sk-audit ul { list-style: none; }
.sk-case .sk-audit li::before, .sk-case .sk-audit li::marker { content: none; }
.sk-case .sk-audit-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--_size---space--main); margin: 0; padding-bottom: var(--_size---space--main); border-bottom: 1px solid var(--_theme---border); color: var(--_theme---text); font-size: var(--_size---font-size--text-main); text-align: left; text-transform: none; }
.sk-case .sk-audit-titles { display: flex; flex-direction: column; gap: var(--_size---space--extra-small); min-width: 0; }
.sk-case .sk-audit-kicker { color: var(--_theme---text-faded); }
.sk-case .sk-audit .sk-audit-title { margin: 0; font-family: var(--_typography---font--secondary-family); font-weight: var(--_typography---font--secondary-regular); font-size: var(--_size---font-size--h5); line-height: var(--_typography---line-height--1-2); letter-spacing: var(--_typography---letter-spacing--0-01em); color: var(--_theme---text); text-wrap: balance; }
.sk-case .sk-audit-meta { color: var(--_theme---text-faded); font-size: var(--_size---font-size--text-small); }
/* status pills (the template tag's shape, filled) */
.sk-case .sk-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: var(--_size---radius--round); font-family: var(--_typography---font--primary-family); font-size: .8125rem; font-weight: 500; line-height: 1.25; white-space: nowrap; }
.sk-case .sk-pill.is-bad { color: var(--sk-bad); background: var(--sk-bad-bg); }
.sk-case .sk-pill.is-warn { color: var(--sk-warn); background: var(--sk-warn-bg); }
.sk-case .sk-pill.is-ok { color: var(--sk-ok); background: var(--sk-ok-bg); }
.sk-case .sk-pill.is-info { color: var(--sk-info); background: var(--sk-info-bg); }
.sk-case .sk-pill.is-badge { flex: none; }
/* the table */
.sk-case .sk-audit-table { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--_size---font-size--text-main); line-height: var(--_typography---line-height--1-5); }
.sk-case .sk-audit-table th, .sk-case .sk-audit-table td { padding: var(--_size---space--small) 0; border-bottom: 1px solid var(--_theme---border); text-align: left; vertical-align: middle; font-weight: inherit; }
.sk-case .sk-audit-table tr > * + * { padding-left: var(--_size---space--main); }
.sk-case .sk-audit-table thead th { padding-top: var(--_size---space--main); color: var(--_theme---text-faded); }
.sk-case .sk-audit-table .is-name { width: 42%; }
.sk-case .sk-audit-table tbody .is-name { color: var(--_theme---text); }
.sk-case .sk-audit-table .is-status { white-space: nowrap; }
.sk-case .sk-audit-table.is-novalue .is-status { text-align: right; }
.sk-case .sk-audit-table .is-num { text-align: right; white-space: nowrap; }
.sk-case .sk-audit-table .is-num.is-text { white-space: normal; }
.sk-case .sk-audit-table .is-group > * { padding-top: var(--_size---space--large); color: var(--_theme---text-faded); white-space: normal; }
.sk-case .sk-was, .sk-case .sk-now { display: inline-block; }
.sk-case .sk-was { color: var(--_theme---text-faded); text-decoration: line-through; text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.sk-case .sk-was + .sk-now { margin-left: .4em; }
.sk-case .sk-now { color: var(--_theme---text); font-weight: 500; }
/* colour marks the problem figure: the struck offer on an overpriced row (the market figure beside it stays plain),
   the lone figure of a missing item, and "done" over plan */
.sk-case .sk-audit-table tr.is-bad .sk-was, .sk-case .sk-audit-table tr.is-bad .sk-now:only-child { color: var(--sk-bad); }
.sk-case .sk-audit-table tr.is-warn .sk-was, .sk-case .sk-audit-table tr.is-warn .sk-now:only-child { color: var(--sk-warn); }
.sk-case .sk-audit-table.is-4 td.is-num:last-child { font-weight: 500; }
.sk-case .sk-audit-table.is-4 tr.is-bad td.is-num:last-child { color: var(--sk-bad); }
.sk-case .sk-audit-table.is-4 tr.is-warn td.is-num:last-child { color: var(--sk-warn); }
.sk-case .sk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* counters */
.sk-case .sk-audit .sk-audit-counts { display: flex; flex-wrap: wrap; gap: var(--_size---space--small) var(--_size---space--large); margin-top: var(--_size---space--main); color: var(--_theme---text-faded); font-size: var(--_size---font-size--text-small); }
.sk-case .sk-audit-counts li { display: inline-flex; align-items: flex-start; gap: .4rem; }
.sk-case .sk-audit-counts strong { color: var(--_theme---text); font-weight: 500; }
.sk-case .sk-dot { width: .5rem; height: .5rem; margin-top: .45em; border-radius: 50%; background: var(--sk-info); flex: none; }
.sk-case .sk-audit-counts .is-bad .sk-dot { background: var(--sk-bad); }
.sk-case .sk-audit-counts .is-warn .sk-dot { background: var(--sk-warn); }
.sk-case .sk-audit-counts .is-ok .sk-dot { background: var(--sk-ok); }
/* the highlighted total: the figure moves under its label when the two do not fit side by side */
.sk-case .sk-audit-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--_size---space--small) var(--_size---space--main); margin-top: var(--_size---space--main); padding: var(--_size---space--main) var(--_size---space--large); border-radius: var(--_size---radius--main); background: var(--sk-brand-bg); }
.sk-case .sk-audit-total > div { flex: 1 1 14rem; min-width: 0; }
.sk-case .sk-audit-total.is-ok { background: var(--sk-ok-bg); }
.sk-case .sk-audit-total .u-text-style-eyebrow { color: var(--_theme---text); }
.sk-case .sk-audit .sk-audit-sub { margin-top: var(--_size---space--extra-small); color: var(--_theme---text-faded); font-size: var(--_size---font-size--text-small); }
.sk-case .sk-audit-value { flex: none; font-family: var(--_typography---font--secondary-family); font-weight: var(--_typography---font--secondary-regular); font-size: var(--_size---font-size--h3); line-height: 1.1; color: var(--_theme---text); white-space: nowrap; }
.sk-case .sk-audit-value.is-long { font-size: var(--_size---font-size--h4); }
/* high-contrast mode drops the tints: keep the shapes */
@media (forced-colors: active) {
  .sk-case .sk-pill, .sk-case .sk-audit-total { border: 1px solid CanvasText; }
}
/* phones: each row is the position on one line, then its pill and figures */
@media screen and (max-width: 767px) {
  .sk-case .sk-audit { padding: var(--_size---space--main); }
  .sk-case .sk-audit-head { flex-direction: column; gap: var(--_size---space--small); }
  /* the column names leave the screen but stay for screen readers */
  .sk-case .sk-audit-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sk-case .sk-audit-table, .sk-case .sk-audit-table tbody { display: block; }
  .sk-case .sk-audit-table tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--_size---space--small); row-gap: .35rem; padding: var(--_size---space--small) 0; border-bottom: 1px solid var(--_theme---border); }
  .sk-case .sk-audit-table th, .sk-case .sk-audit-table td { padding: 0; border: 0; }
  .sk-case .sk-audit-table tr > * + * { padding-left: 0; }
  .sk-case .sk-audit-table .is-name { flex: 1 0 100%; width: auto; }
  .sk-case .sk-audit-table .is-num { white-space: normal; }
  .sk-case .sk-audit-table :is(.is-name, .is-status) + .is-num { margin-left: auto; }
  .sk-case .sk-audit-table tr.is-group { justify-content: space-between; align-items: baseline; padding-top: var(--_size---space--main); }
  .sk-case .sk-audit-table tr.is-group > * { padding-top: 0; }
  .sk-case .sk-audit-table tr.is-group > td { margin-left: auto; text-align: right; }
  /* two columns: the name and its one figure or pill share the line while they fit */
  .sk-case .sk-audit-table.is-2 .is-name { flex: 1 1 auto; }
  .sk-case .sk-audit-table.is-2 .is-name + * { margin-left: auto; }
  /* two figures (plan / done, price / difference): a 2 x 2 grid, the name and its pill on the first line, the
     figures under them with the column names as small labels */
  .sk-case .sk-audit-table.is-4 tr:not(.is-group) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--_size---space--main); row-gap: .5rem; }
  .sk-case .sk-audit-table.is-4 .is-name { flex: none; }
  .sk-case .sk-audit-table.is-4.is-nostatus .is-name { grid-column: 1 / -1; }
  .sk-case .sk-audit-table.is-4 .is-status { justify-self: end; }
  .sk-case .sk-audit-table.is-4 td.is-num { margin-left: 0; text-align: left; }
  .sk-case .sk-audit-table.is-4 td.is-num:last-child { text-align: right; }
  .sk-case .sk-audit-table.is-4 td.is-num::before { content: attr(data-label); content: attr(data-label) / ""; display: block; color: var(--_theme---text-faded); font-size: var(--_size---font-size--text-small); font-weight: 400; line-height: 1.3; }
  .sk-case .sk-audit-total { flex-direction: column; align-items: flex-start; padding: var(--_size---space--main); }
  .sk-case .sk-audit-total > div { flex: none; }
  .sk-case .sk-audit-value { font-size: var(--_size---font-size--h2); }
  .sk-case .sk-audit-value.is-long { font-size: var(--_size---font-size--h4); }
}

/* ---- home.css */
/* home (pages/home.mjs). The link under the private price table, centred like the template's section CTAs. */
.sk-pricing-more { display: flex; justify-content: center; margin-top: 2.5rem; }

/* ---- services.css */
/* Service pages (/uslugi/*, body.sk-service). Only fits our content into the template's own components. */

/* Small laptops (992-1279): the „Какво проверяваме / включва / получавате“ heading takes the full row, as the template
   lays it out below 992 (its half-width column wrapped the Bulgarian word onto a second line; nothing sits beside it). */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .sk-service section[data-sk-src="services/operations-audit.html#3"] .heading_title { grid-column: span 12; }
}

/* The disclaimer under the deliverables button: the template's small form note, kept to the list's measure. */
.sk-service .sk-service-note { margin-bottom: 0; }

/* „Примерен резултат“ (the home stats row after the deliverables): the template's eyebrow, heading and tertiary
   button stacked in its title column, with the template's eyebrow-to-heading gap. */
.sk-service .sk-band .stats_row_title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--_size---space--medium); }
.sk-service .sk-band .sk-band-extra--desk { margin-top: var(--_size---space--extra-small); }
/* The band's caption and link sit in the title column on desktop and after the figures once the band stacks
   (below 992 px), so it reads heading → figures → link, as the template's row reads heading → figures. */
.sk-service .sk-band .sk-band-extra { display: flex; flex-direction: column; align-items: flex-start; gap: var(--_size---space--small); }
.sk-service .sk-band .sk-band-text { margin: 0; color: var(--_theme---text-faded); }
.sk-service .sk-band .sk-band-extra--mob { display: none; }
@media screen and (max-width: 991px) {
  .sk-service .sk-band .sk-band-extra--desk { display: none; }
  .sk-service .sk-band .sk-band-extra--mob { display: flex; }
}

/* ---- Phones (mobile pass 2026-10-22). Nothing below applies from 768 px up; the hero button exists only here. */
.sk-service .sk-hero-cta { display: none; }
@media screen and (max-width: 767px) {
  /* the buy / inquiry button under the hero title (the same link and text as the deliverables button) */
  .sk-service .sk-hero-cta { display: flex; margin-top: var(--_size---space--large); }
  /* the overview statement: the shared phone spacer instead of 7rem above and below */
  .sk-service .g_section_padding[data-wf--section-padding--padding="huge"] { height: 4rem; }
  /* the deliverables photo is a 3:2 band, so the checklist and the buy button follow sooner */
  .sk-service [data-sk-src="services/operations-audit.html#5"] .split_main_visual { aspect-ratio: 3 / 2; height: auto; }
  /* the buy button takes the column width: text left, arrow box at the right edge */
  .sk-service .split_main_cta .btn_main_wrap { width: 100%; justify-content: space-between; }
  /* „Подходящо за“: the three photo cards as a swipe row, the next card peeking */
  .sk-service [data-sk-src="services/operations-audit.html#6"] .layout_vertical_grid {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--_size---site--margin);
    margin-inline: calc(var(--_size---site--margin) * -1); padding-inline: var(--_size---site--margin);
    column-gap: var(--_size---site--gutter); scrollbar-width: none;
  }
  .sk-service [data-sk-src="services/operations-audit.html#6"] .layout_vertical_grid::-webkit-scrollbar { display: none; }
  .sk-service [data-sk-src="services/operations-audit.html#6"] .layout_vertical_grid > .card_team_wrap { flex: 0 0 85%; scroll-snap-align: start; }
}
/* small phones: the step card keeps its frame with the template's main space inside, so the text gains width */
@media screen and (max-width: 479px) {
  .sk-service .layout_horizontal_content { padding: var(--_size---space--main); }
}
/* the hero title: one template size smaller below 390 px and two below 360 px, so the long single words
   („подизпълнители“, „Инвестиционен“, „Предремонтен“) fit the column instead of breaking inside the word */
@media screen and (max-width: 389px) {
  .sk-service .section_hero .heading_wrap.is-hero h1.g_heading { --_text-style---font-size: var(--_size---font-size--h1); }
}
@media screen and (max-width: 359px) {
  .sk-service .section_hero .heading_wrap.is-hero h1.g_heading { --_text-style---font-size: var(--_size---font-size--h2); }
}

/* ---- shop.css */
/* shop (pages/shop.mjs): /poruchka, /plashtane, /dokumenti, /klientska-zona. Only fits for content the template has no
   slot for: consent checkboxes, the order rows, the drop zone states and the upload list. Template tokens only. */
.sk-shop .sk-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* states the script switches (template classes such as .u-btn-group set their own display) */
.sk-shop [hidden] { display: none !important; }
.sk-shop .form_main_btn:disabled { cursor: progress; transform: none; }
.sk-shop .form_main_btn:focus-visible,
.sk-shop .sk-check input:focus-visible,
.sk-shop .sk-file-remove:focus-visible { outline: 2px solid var(--_theme---text); outline-offset: 2px; }

/* ---- checkout (step 1): summary card under the intro, the documents and the consent in the form */
.sk-checkout .form_contact_left { justify-content: flex-start; }
.sk-checkout .sk-summary { margin-top: var(--_size---space--large); }
.sk-checkout .sk-summary .card_pricing_wrap { max-width: none; }
/* desktop: the column's own gap (base.css) already separates the intro from the card */
@media screen and (min-width: 992px) { .sk-checkout .sk-summary { margin-top: 0; } }
/* small laptops: the template's 4 of 12 columns squeeze the card (every feature on two lines); 5 columns, the form
   keeps its own 6 / span 7 */
@media screen and (min-width: 992px) and (max-width: 1199px) { .sk-checkout .form_contact_left { grid-column: span 5; } }
/* Телефон | Фирма и ЕИК: the inputs stay on one line when the longer label wraps */
@media screen and (min-width: 768px) { .sk-checkout .form_main_columns { align-items: end; } }
.sk-checks { display: flex; flex-direction: column; gap: var(--_size---space--small); }
.sk-check { display: flex; align-items: flex-start; gap: var(--_size---space--small); min-height: 1.75rem; cursor: pointer; text-align: left; }
.sk-check input {
  flex: none; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; border: 1px solid color-mix(in srgb, var(--_theme---text) 55%, transparent);
  border-radius: var(--_size---radius--small); background: transparent center / 85% no-repeat;
  transition: background-color .3s cubic-bezier(.165,.84,.44,1), border-color .3s cubic-bezier(.165,.84,.44,1);
}
.sk-check input:hover { border-color: var(--_theme---text); }
/* checked: the template's own check icon (item_main_wrap), in the canvas colour on the text colour */
.sk-check input:checked {
  border-color: var(--_theme---text); background-color: var(--_theme---text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3ebe4' stroke='%23f3ebe4' stroke-width='.9' d='M21.2655 7.01552L9.26552 19.0155C9.23069 19.0504 9.18934 19.078 9.14381 19.0969C9.09829 19.1158 9.04949 19.1255 9.00021 19.1255C8.95093 19.1255 8.90213 19.1158 8.85661 19.0969C8.81108 19.078 8.76972 19.0504 8.7349 19.0155L3.4849 13.7655C3.41453 13.6952 3.375 13.5997 3.375 13.5002C3.375 13.4007 3.41453 13.3053 3.4849 13.2349C3.55526 13.1645 3.6507 13.125 3.75021 13.125C3.84972 13.125 3.94516 13.1645 4.01552 13.2349L9.00021 18.2196L20.7349 6.4849C20.8053 6.41453 20.9007 6.375 21.0002 6.375C21.0997 6.375 21.1952 6.41453 21.2655 6.4849C21.3359 6.55526 21.3754 6.6507 21.3754 6.75021C21.3754 6.84972 21.3359 6.94516 21.2655 7.01552Z'/%3E%3C/svg%3E");
}
.sk-check span { color: var(--_theme---text); }
.sk-check a, .sk-note a, .sk-card .form_main_success a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.sk-shop .sk-demo { color: var(--_theme---text-faded); margin-top: var(--_size---space--extra-small); }

/* ---- the 401 card pages: the order rows, the template's button group, the success block */
.sk-order { margin: 0 0 var(--_size---space--large); border-top: 1px solid var(--_theme---border); text-align: left; }
.sk-order-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--_size---space--main); padding: var(--_size---space--small) 0; border-bottom: 1px solid var(--_theme---border); }
.sk-order dt { margin: 0; }
.sk-order dd { margin: 0; text-align: right; text-wrap: balance; }
.sk-card .utility_main_btn { margin-bottom: var(--_size---space--large); }
.sk-card .utility_main_title + .utility_main_btn { margin-bottom: 0; }
.sk-card .form_main_success { margin-top: 0; }
/* payment: the template's check list (payment facts) left-aligned in the centred card */
.sk-payment .sk-pay-facts { text-align: left; }

/* ---- drop zone: the template's text-area input, as a label around a visually hidden file input */
.sk-drop {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--_size---space--extra-small); text-align: center; cursor: pointer;
}
.sk-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; scroll-margin-top: 8.5rem; }
.sk-drop-hint { color: var(--_theme---text-faded); }
.sk-drop:hover, .sk-drop.is-over { border-color: var(--_theme---text); }
.sk-drop.is-over { background-color: color-mix(in srgb, var(--_theme---text) 4%, transparent); }
/* keyboard focus on the hidden input: the template's input focus (dark border) plus the ring of our other controls */
.sk-drop:has(.sk-drop-input:focus-visible) { border-color: var(--_theme---text); outline: 2px solid var(--_theme---text); outline-offset: 2px; }
.sk-drop.is-busy { opacity: .6; cursor: progress; }
.sk-drop.is-busy .sk-drop-input { cursor: progress; }
/* the template's error block under the drop zone: the layout's gap spaces it */
.sk-shop .form_main_layout > .form_main_error { margin-top: 0; overflow-wrap: break-word; }
.sk-files { margin: 0; padding: 0; list-style: none; text-align: left; }
.sk-file { border-bottom: 1px solid var(--_theme---border); }
.sk-file .sk-file-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sk-file-size { flex: none; color: var(--_theme---text-faded); }
.sk-file-remove {
  flex: none; min-height: 2.75rem; padding: 0 0 0 var(--_size---space--small); border: 0; background: none;
  color: var(--_theme---text); text-decoration: underline; text-underline-offset: .15em; cursor: pointer;
}
.sk-file-remove:disabled { opacity: .5; cursor: default; }
.sk-note { color: var(--_theme---text-faded); text-align: center; }

/* ---- phones (below 768 px only; tablet and desktop stay as they are) */
@media screen and (max-width: 767px) {
  /* checkout: the visitor chose the package on the previous page, so the form starts on the first screen. A smaller
     hero title (the template's h1 size instead of display), the summary heading at h4, and the package card compact:
     tier, price and „Сменете пакета“ (its description and feature list are the price table they just left) */
  .sk-checkout .section_hero h1.g_heading { --_text-style---font-size: var(--_size---font-size--h1); }
  .sk-checkout .form_contact_text > .g_heading { --_text-style---font-size: var(--_size---font-size--h4); }
  .sk-checkout .form_contact_text { row-gap: var(--_size---space--small); }
  .sk-checkout .form_contact_left { row-gap: var(--_size---space--main); }
  .sk-checkout .sk-summary { margin-top: 0; }
  .sk-checkout .sk-summary .card_pricing_wrap { padding-top: var(--_size---space--main); padding-bottom: var(--_size---space--main); row-gap: var(--_size---space--small); }
  .sk-checkout .sk-summary .card_pricing_header { padding-bottom: var(--_size---space--small); }
  .sk-checkout .sk-summary .card_pricing_content { row-gap: var(--_size---space--main); }
  .sk-checkout .sk-summary .card_pricing_description,
  .sk-checkout .sk-summary .card_pricing_list { display: none; }
  /* the form: tighter steps between the intro, the card and the fields; the optional note and the drop zone shorter */
  .sk-checkout .form_contact_wrap.u-grid { row-gap: var(--_size---space--large); }
  .sk-checkout #sk-note { min-height: 6rem; height: 6rem; }
  .sk-checkout .sk-drop { min-height: 7.5rem; }
  /* the upload list: the row's items sit at its top on phones (base.css check lists), so the remove button's text
     sits there too, on the line of the file name and its size; the button keeps its 44 px target under it */
  .sk-file .sk-file-remove { display: inline-flex; align-items: flex-start; }
  /* consent: the whole label is a 44 px target (its links stay inline in the sentence) */
  .sk-check { min-height: 2.75rem; padding-top: .25rem; padding-bottom: .25rem; }
  .sk-check a { padding-top: .35rem; padding-bottom: .35rem; }
}
/* small phones: on /plashtane the consent and the pay button come before the payment facts, so the button stays on
   the first screen (the facts are not interactive, so the tab order is unchanged) */
@media screen and (max-width: 479px) {
  .sk-payment #sk-pay .form_main_layout > .sk-pay-facts { order: 1; }
  .sk-payment #sk-pay .form_main_layout > .sk-demo,
  .sk-payment #sk-pay .form_main_layout > .sk-sr { order: 2; }
}
/* 320-359 px: the bordered 401 card keeps a little more room for the order rows; a value that does not fit beside
   its label moves under it, right-aligned */
@media screen and (max-width: 359px) {
  .sk-card .utility_main_card { padding-left: var(--_size---space--medium); padding-right: var(--_size---space--medium); }
  .sk-order-row { flex-wrap: wrap; column-gap: var(--_size---space--small); }
  .sk-order dd { margin-left: auto; }
}

/* Phones, second review: small links are 44 px targets; short notes never end on one word. */
@media screen and (max-width: 767px) {
  .sk-payment [data-sk="more"], .sk-login .u-text-style-extra-small a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .sk-shop p.u-text-style-extra-small.u-text-align-center, .sk-shop .sk-note { text-wrap: balance; }
  .sk-payment .sk-pay-facts .item_main_text { text-wrap: pretty; }
}