/* =========================================================================
   Изолации — visual system
   Tokens come from theme.json (--wp--preset--*). This file styles the
   composed sections. Rules that matter:
     · accent marks the next action and nothing else
     · zero radius on anything structural
     · display type is Light 300, micro-copy is Bold 700
   ====================================================================== */

:root {
	--paper:     var(--wp--preset--color--paper, #fff);
	--paper-alt: var(--wp--preset--color--paper-alt, #f7f7f5);
	--warm:      var(--wp--preset--color--warm, #f2ede6);
	--ink:       var(--wp--preset--color--ink, #16181c);
	--text:      var(--wp--preset--color--text, #101114);
	--muted:     var(--wp--preset--color--muted, #6b7075);
	--line:      var(--wp--preset--color--line, #dededa);
	--accent:    var(--wp--preset--color--accent, #b3121b);
	--accent-dk: var(--wp--preset--color--accent-dk, #8e0e15);
	/* The brand red on the ink background sits at ~2.2:1 and goes muddy. This is
	   the same hue lifted for dark ground only — never use it on paper, or the
	   two reds appear on one screen and neither reads as the brand. */
	--accent-ink: #d4232e;
	--sale:      var(--wp--preset--color--sale, #4e9a3f);
	--build:     var(--wp--preset--color--build, #c9871f);

	--header-h: 64px;
	--gutter: clamp(1rem, 3vw, 2.5rem);
	--maxw: 1360px;

	/* Размерите на червеното лого. Стояха на `.brand` и оттам нищо друго не
	   можеше да ги прочете — а блокът виси НАД страницата, тоест всеки, който
	   иска да сложи нещо до него, трябва да знае колко е широк. Пътеката на
	   „Обекти“ иска точно това. `--brand-w` е изведена, не написана: логото
	   плюс рамката червено от двете му страни. */
	--logo-w: 168px;
	--mark-pad: 9px;
	--brand-w: calc(var(--logo-w) + 2 * (var(--mark-pad) + .35rem));
	/* Колко виси блокът под лентата: височината му (логото е 1.912:1 плюс по
	   една рамка горе и долу) минус самата лента. */
	--brand-drop: calc(var(--logo-w) / 1.912 + 2 * var(--mark-pad) - var(--header-h));
	--brand-gap: clamp(.75rem, 2vw, 2rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }

/* WordPress core applies `margin-block-start: var(--wp--style--block-gap)` to
   every direct child of a flow container, which opened a 24px white band between
   the header and the hero. Sections own their own spacing here.
   .entry-content is the second half of the same bug: every homepage section is a
   sibling inside the post-content flow, so core put 24px of paper between *all*
   of them — visible as a white strip under the hero video, where the dark
   footage meets the stat band. */
.wp-site-blocks > *,
.entry-content > * { margin-block-start: 0; }

/* Cyrillic: the breve on Й sits above the cap line, so display line-height
   below ~1.05 collides with the line above. Learned the hard way on penemat. */
h1, h2, h3, .stat__num, .hero__title { line-height: 1.08; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.u-shell { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.u-label {
	font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--muted);
}
.u-eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	font-size: .8125rem; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--accent); margin-bottom: .9rem;
}
.u-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
/* On ink the brand red goes muddy — same substitution as the stat band. */
.section--ink .u-eyebrow { color: var(--accent-ink); }
.section--ink .u-eyebrow::before { background: var(--accent-ink); }
/* For labels a screen reader needs and the design does not show — the video
   facade's link text, which the „от 2005" plate replaced visually. */
.u-sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Header — BLD structure: red logo block overhanging a dark bar,
   phone first, then sections, then language, then one red CTA.
   ---------------------------------------------------------------------- */

.site-header {
	position: sticky; top: 0; z-index: 60;
	background: var(--ink);
	/* inset shadow, not a border: a 1px border would add to the header height and
	   push the hero 1px past the fold */
	box-shadow: inset 0 -1px 0 rgb(255 255 255 / .08);
}
.site-header__inner {
	max-width: var(--maxw); margin-inline: auto;
	padding-inline: var(--gutter);
	height: var(--header-h);
	display: flex; align-items: center; gap: var(--brand-gap);
}

/* Brand block — the real lockup, knocked out white on the brand red.
   The block is taller than the bar so it overhangs below it. The lockup is
   stacked (roof over wordmark over tagline) at ~1.9:1, so the block is sized
   from the logo rather than the other way round: --logo-w sets the width, the
   height follows from the ratio, and --mark-pad is the even margin of red left
   around the ink. The overhang into the hero is the remainder, and it is what
   makes the block read as a plate laid over the bar rather than a tall bar. */
.brand {
	align-self: stretch; display: flex; align-items: flex-start;
	flex: 0 0 auto; text-decoration: none;
}
/* The stacked lockup is trimmed to its ink and optically centred already, so
   the red is an even frame on all four sides — no asymmetric nudge like the old
   horizontal strip needed. Height is derived, not set: the logo is 1.912:1, so
   the block is its rendered height plus one --mark-pad top and bottom. Hard-
   coding a height here is what clipped the tagline when the lockup changed. */
.brand__mark {
	background: var(--accent);
	padding: var(--mark-pad) calc(var(--mark-pad) + .35rem);
	display: flex; align-items: center;
}
.brand__logo { display: block; width: var(--logo-w); height: auto; }

.site-nav { margin-inline-start: auto; }
/* Scoped to the top level — a bare `.site-nav ul` also matched .subnav and its
   display:flex beat .subnav{display:none}, leaving the dropdown always open. */
.site-nav > ul {
	list-style: none; display: flex; align-items: center;
	gap: clamp(.9rem, 1.8vw, 2rem); margin: 0; padding: 0;
}
/* All top-level links share one box model. When only the item with a chevron was
   inline-flex, its vertical padding counted toward its height (it does not on an
   inline box) and it sat ~6px higher than its siblings. */
.site-nav a {
	display: inline-flex; align-items: center; gap: .4rem;
	color: #fff; text-decoration: none;
	font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	white-space: nowrap; padding-block: .5rem;
	border-block-end: 2px solid transparent;
}
.site-nav a:hover,
.site-nav .current-menu-item > a { color: #fff; border-block-end-color: var(--accent); }
.site-nav li { position: relative; }

/* Submenu — opens on hover and on keyboard focus, so it is reachable by Tab.
   Selectors are kept at the same specificity as the top-level nav rules. */
.site-nav .subnav {
	position: absolute; inset-inline-start: 0; top: 100%;
	min-width: 15rem; background: var(--ink);
	border: 1px solid rgb(255 255 255 / .12); border-block-start: 2px solid var(--accent);
	padding: .4rem 0; margin: 0; list-style: none; z-index: 70;
	display: none; flex-direction: column; gap: 0;
}
.site-nav .has-sub:hover > .subnav,
.site-nav .has-sub:focus-within > .subnav { display: flex; }
.site-nav .subnav li { width: 100%; }
.site-nav .subnav a {
	display: block; padding: .65rem 1.15rem; text-transform: none;
	font-size: .875rem; font-weight: 600; letter-spacing: 0;
	border-block-end: 0; color: rgb(255 255 255 / .82); white-space: nowrap;
}
.site-nav .subnav a:hover { background: var(--accent); color: #fff; }

.header__phone {
	color: #fff; text-decoration: none;
	font-weight: 700; font-size: .95rem; letter-spacing: .02em; white-space: nowrap;
}
.header__phone:hover { color: #fff; text-decoration: underline; }

.lang { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; white-space: nowrap; }
.lang a {
	color: rgb(255 255 255 / .5); text-decoration: none;
	font-size: .8125rem; font-weight: 700; letter-spacing: .04em;
}
.lang a:hover { color: #fff; }
.lang a.is-current { color: #fff; }
.lang a + a { border-inline-start: 1px solid rgb(255 255 255 / .25); padding-inline-start: .4rem; }

.header__cta {
	background: var(--accent); color: #fff; text-decoration: none;
	font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	padding: 1rem 1.5rem; white-space: nowrap; align-self: stretch;
	display: flex; align-items: center;
}
.header__cta:hover { background: var(--accent-dk); color: #fff; }

.nav-toggle {
	display: none; margin-inline-start: auto;
	background: none; border: 0; color: #fff; cursor: pointer;
	align-items: center; gap: .6rem;
	font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	padding: .75rem 0;
}
.nav-toggle__bars { display: grid; gap: 5px; width: 26px; }
.nav-toggle__bars i { height: 2px; background: #fff; display: block; transition: transform .2s ease, opacity .2s ease; }
/* Below 26rem the "Меню" label is hidden, so the burger itself has to show state */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav-toggle__bars i { transition: none; } }

@media (max-width: 1100px) {
	/* The switcher moves into the drawer here — with the full logo lockup it no
	   longer fits beside the toggle, and it pushed the burger off-screen. */
	.site-nav, .header__cta, .header__phone, .site-header .lang { display: none; }
	.nav-toggle { display: flex; }
	:root { --logo-w: 140px; --mark-pad: 8px; }
}
@media (max-width: 26rem) {
	:root { --logo-w: 116px; --mark-pad: 7px; }
	.nav-toggle__text { display: none; }   /* burger alone below ~416px */
}

/* Mobile drawer */
.drawer {
	position: fixed; inset: 0; z-index: 55;
	background: var(--ink); padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
	display: none; overflow-y: auto;
}
.drawer[data-open="true"] { display: block; }
.drawer ul { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .25rem; }
.drawer a {
	color: #fff; text-decoration: none; display: block; padding: .9rem 0;
	font-size: 1.25rem; font-weight: 700; border-block-end: 1px solid rgb(255 255 255 / .1);
}
/* Nested variants — must out-specify `.drawer a`, which is defined above */
.drawer .drawer__sub a {
	padding-inline-start: 1.5rem; font-size: 1rem; font-weight: 600;
	color: rgb(255 255 255 / .68);
}
.drawer .drawer__sub a::before {
	content: ""; display: inline-block; width: .55rem; height: 1px;
	background: var(--accent); vertical-align: middle;
	margin-inline: -.9rem .35rem;
}
/* Gap instead of the header's divider rules — at drawer type size the
   border-inline-start spans the whole line box and reads as a box outline. */
.drawer .lang { margin-block: 2rem; gap: 1.25rem; }
.drawer .lang a { font-size: 1rem; }
.drawer .lang a + a { border-inline-start: 0; padding-inline-start: 0; }
.drawer .drawer__phone {
	display: block; background: var(--accent); color: #fff; text-align: center;
	padding: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	text-decoration: none; font-size: .875rem;
}
body[data-locked="true"] { overflow: hidden; }

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

/* Header + hero fill exactly one screen, so the hero never runs under the fold.
   svh (smallest viewport height) rather than dvh: it accounts for mobile browser
   chrome being visible, so the hero cannot overflow, and it does not resize as
   the toolbar hides mid-scroll. */
.hero {
	position: relative;
	min-height: calc(100vh - var(--header-h));
	min-height: calc(100svh - var(--header-h));
	display: grid; align-items: end;
	overflow: hidden; background: var(--ink);
}
/* Hero background: a still that is always there, and a YouTube frame that fades
   in on top once it has actually loaded. The still is not a decoration — it is
   the fallback for a blocked iframe, a slow connection and reduced-motion. */
.hero__media {
	position: absolute; inset: 0; z-index: 0; overflow: hidden;
	container-type: size;
}
.hero__poster {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover;
}
/* Cover-fill a 16:9 frame inside a box of any ratio: whichever axis is short
   gets driven past 100%, and the centring transform crops the overflow evenly.
   The vw/svh pair is the fallback; the cq pair below wins where supported and
   measures the hero itself rather than the viewport. */
.hero__yt {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	border: 0; pointer-events: none;
	opacity: 0; transition: opacity .8s ease;
	width:  max(100vw, calc((100svh - var(--header-h)) * 16 / 9));
	height: max(calc(100svh - var(--header-h)), calc(100vw * 9 / 16));
	width:  max(100cqw, calc(100cqh * 16 / 9));
	height: max(100cqh, calc(100cqw * 9 / 16));
}
.hero__yt.is-ready { opacity: 1; }
/* Каченият клип ползва същото позициониране като iframe-а; object-fit пълни
   свръхголемия кадър вместо разтягане. */
video.hero__yt { object-fit: cover; }
/* Two-stop scrim: readable type without bleaching the building out.
   Третият слой е равномерен и е добавен на 30.08.2026 по искане на Gabe („darken
   the BG with 20% more“). Нарочно е плосък, а не по-стръмен градиент: градиентите
   отгоре вършат работата да отделят текста от снимката и всяко тяхно засилване
   удря най-силно долния край, който вече е почти черен. Плоските 20% потъмняват
   целия кадър еднакво — горе се усеща, долу почти не се променя, и формата на
   осветяването остава същата. */
.hero::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(to top, rgb(10 11 13 / .88) 0%, rgb(10 11 13 / .45) 42%, rgb(10 11 13 / .12) 72%),
		linear-gradient(to right, rgb(10 11 13 / .5), transparent 60%),
		linear-gradient(rgb(10 11 13 / .2), rgb(10 11 13 / .2));
}
.hero__inner {
	position: relative; z-index: 2;
	max-width: var(--maxw); margin-inline: auto; width: 100%;
	padding: 0 var(--gutter) clamp(3rem, 7vw, 6rem);
}
/* max-width беше 16ch (843px при 88px шрифт) и „Строим за поколения“ се събираше
   на един ред с 5px запас. Пет пиксела не са запас — на 2026-08-30, когато сайтът
   стана триезичен, <html lang> мина от „en-US“ (то беше просто грешно: страницата
   винаги е била на български) на „bg-BG“, а с български език Manrope дава
   българските форми на буквите — друга ширина. Заглавието порасна на 864px и се
   пречупи на два реда.

   18ch (948px) покрива и трите езика с истински запас: bg 864px · en 849px ·
   ru 895px. Забележете, че при 16ch се пречупваше и АНГЛИЙСКОТО заглавие — с 6px.
   Ограничението пак си върши работата (спира заглавието да тръгне по цялата ширина
   на широк екран, където лентата е 1280px).

   Ако някой смени текста на заглавието, мери наново — ключовете са
   `home_hero_title` в трите файла в inc/lang/. */
.hero__title {
	color: #fff; font-weight: 300; letter-spacing: -.03em;
	font-size: clamp(2.5rem, 7.2vw, 5.5rem);
	margin: 0 0 1.25rem; max-width: 18ch;
}
.hero__title strong { font-weight: 800; }
/* The title now carries the hero alone, so it owns the gap down to the buttons
   that .hero__sub used to hold open. */
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-start: 2.25rem; }

.btn {
	display: inline-flex; align-items: center; gap: .75rem;
	padding: 1.15rem 2.25rem; text-decoration: none;
	font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	border: 1px solid transparent; cursor: pointer;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dk); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / .45); }
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }

/* -------------------------------------------------------------------------
   Sections
   ---------------------------------------------------------------------- */

/* The page rhythm. 8vw put 115px of paper above and below every band at 1440,
   which on a page of eleven sections is ~1.3k px of nothing — the homepage read
   as a stack of posters rather than one document. 4.6vw lands at ~66px, which is
   what the reference comp measures, and is still twice the 2rem block-gap inside
   a section, so the sections do not run together. Change this number and the
   whole page re-spaces; nothing below hardcodes a section gap. */
.section { padding-block: clamp(2.75rem, 4.6vw, 4.5rem); }
.section--alt { background: var(--paper-alt); }
.section--warm { background: var(--warm); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink .u-label { color: rgb(255 255 255 / .6); }
.section__head { max-width: 62ch; margin-block-end: clamp(1.5rem, 2.4vw, 2.25rem); }
.section__head--tight { margin-block-end: clamp(1.1rem, 1.8vw, 1.5rem); }
/* Capped at 2.5rem, not 3rem: a section heading that size sat only a step under
   the hero and every band on the page shouted at the same volume. */
.section__title { font-size: clamp(1.625rem, 3.2vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 .75rem; }
/* A heading with nothing under it owns its own gap, so the shared head margin
   does not stack on top of a paragraph margin that is not there. */
.section__title:last-child { margin-block-end: 0; }
.section__title--sm { font-size: clamp(1.375rem, 2.6vw, 1.875rem); margin-block-end: .5rem; }
/* Long positioning statements read as architecture at Light 300, not as a shout */
.section__title--light {
	font-weight: 300; letter-spacing: -.025em; max-width: 30ch;
	font-size: clamp(1.5rem, 2.9vw, 2.375rem); line-height: 1.25;
}
.section__title--light strong { font-weight: 700; }
.section__lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--muted); line-height: 1.7; margin: 0; }

/* About — video left at 60, copy right at 40. Single column until there is
   genuine room for two: at ~62rem a 40% column is still wide enough for the fact
   list to read, below that the video would squeeze the copy to a ribbon.
   The sides are swapped with grid placement, not by reordering the markup: the
   heading stays first in the DOM, so the stacked mobile view still opens with
   „За компанията" rather than a video, and that is also the reading order for a
   screen reader. */
.about { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 62rem) {
	.about { grid-template-columns: 60fr 40fr; gap: clamp(2.5rem, 5vw, 5rem); }
	.about__media { grid-area: 1 / 1; }
	.about__body  { grid-area: 1 / 2; }
}
.about__body { min-width: 0; }
.about__media { min-width: 0; }
@media (min-width: 62rem) {
	/* Optically centre the copy against the video rather than top-aligning it:
	   the column is shorter than the 16:9 frame, so `start` left it floating high. */
	.about { align-items: center; }
}

/* The exception to the Light-300 display rule, and the reason it is one: this is
   a two-line claim, not a paragraph-length positioning statement. At 300 a short
   line goes thin and the section loses its anchor — the long sentence this
   replaced needed the opposite treatment. Sizing stays under .hero__title so the
   fold still owns the page, and is capped at 2.375rem because „Завършваме с
   качество." has to survive on one line in a 40% column — above that it breaks to
   three lines and the manual <br> in the pattern stops meaning anything. */
.about__title {
	font-size: clamp(1.75rem, 2.9vw, 2.375rem); font-weight: 700;
	letter-spacing: -.025em; margin: 0 0 1.25rem;
}
.about__lead { font-size: 1.0625rem; color: var(--muted); line-height: 1.7; margin: 0 0 clamp(1.75rem, 3vw, 2.25rem); }

/* Proof rows — one hairline under each, no line above the first: the rule reads
   as the end of a claim, not as a table. */
.creds { list-style: none; margin: 0 0 clamp(1.75rem, 3vw, 2.25rem); padding: 0; }
/* Долното поле е за двата бутона, които СТОЯХА под списъка — те се преместиха
   в „izolacii/intro-actions“ на 17.08.2026 и полето остана да държи празно
   място под последната линия. `:last-child` го маха точно тогава, когато под
   списъка няма нищо, и го връща само̀, ако някога пак се сложи нещо. */
.creds:last-child { margin-block-end: 0; }
.creds li {
	display: flex; align-items: center; gap: 1rem;
	padding-block: .9rem; border-block-end: 1px solid var(--line);
	font-size: .9375rem; line-height: 1.45;
}
.creds li:first-child { padding-block-start: 0; }
/* Inline <span> ignores width/height — see trap 2 in the README. */
.creds__icon { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; color: var(--accent); }
.creds__icon svg { width: 100%; height: 100%; display: block; }

.about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
/* The secondary action is a text link, not a second button: two buttons side by
   side would put the accent rule in question about which one is next. */
.about__link {
	font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--text); text-decoration: none;
	border-block-end: 2px solid var(--text); padding-block-end: .3rem;
}
.about__link:hover { color: var(--accent); border-block-end-color: var(--accent); }

/* Действия след представянето — „izolacii/intro-actions“.
   Разделянето се постига с тонирания фон на самата секция („section--warm“), както е
   в макета на Gabe. Затова тук НЯМА горна линия — тинтът и линията заедно правят ръба
   двоен. Ако някога върнете фона към бяло, линията трябва да се върне. */
.intro-actions__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.75rem, 2vw, 1.25rem); }

/* Очертаният бутон за светъл фон. „btn--ghost“ е за тъмен фон (бял текст) и тук би
   изчезнал. */
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

/* Video facade — GDPR. A bare YouTube <iframe> contacts Google and sets storage
   on page load, before the visitor has agreed to anything; same objection the
   README makes to the Google Fonts CDN. So this is a local poster plus a play
   button, and app.js builds the real iframe (youtube-nocookie.com) only on click.
   Without JS the element stays what it is in the markup — a plain link that opens
   the video on YouTube. */
.vfacade {
	position: relative; display: block; overflow: hidden;
	background: var(--ink); text-decoration: none; color: #fff;
	aspect-ratio: 16 / 9;
}
.vfacade__poster {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
/* Lighter than it was: the caption that needed a dark foot is gone, and the badge
   now brings its own ground. This only has to keep the play button legible. */
.vfacade::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / .42), rgb(0 0 0 / .06) 60%);
}
.vfacade:hover .vfacade__poster { transform: scale(1.04); }

/* The disc is white and the triangle carries the accent — playing the video is
   the next action here, so the red stays, but a solid red block competed with
   the buttons in the copy column for the same "this is next" signal. */
.vfacade__play {
	position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
	transform: translate(-50%, -50%); z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: clamp(3.75rem, 5.5vw, 4.75rem); aspect-ratio: 1;
	background: #fff; color: var(--accent); border-radius: 50%;
	box-shadow: 0 8px 28px rgb(0 0 0 / .28);
	transition: transform .2s ease, background .2s ease;
}
/* The triangle is optically centred: geometric centring puts a play glyph left-heavy. */
.vfacade__play svg { width: 42%; height: 42%; display: block; margin-inline-start: 8%; }
.vfacade:hover .vfacade__play { transform: translate(-50%, -50%) scale(1.07); }
@media (prefers-reduced-motion: reduce) {
	.vfacade__play, .vfacade__poster { transition: none; }
	.vfacade:hover .vfacade__play { transform: translate(-50%, -50%); }
	.vfacade:hover .vfacade__poster { transform: none; }
}

/* Founding year as a corner plate — same signature as the stat band (Light
   numeral over tiny bold uppercase), so the page says it twice in one voice. */
.vfacade__badge {
	position: absolute; z-index: 2; inset-block-end: 0; inset-inline-end: 0;
	display: block; padding: clamp(.9rem, 1.8vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.75rem);
	background: rgb(22 24 28 / .92); color: #fff; text-align: center;
}
.vfacade__badge b { display: block; font-weight: 300; letter-spacing: -.02em; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.05; }
.vfacade__badge i {
	display: block; font-style: normal; margin-block-start: .35rem;
	font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: rgb(255 255 255 / .72);
}

/* A short accent rule on the frame's opposite corner, to stop it reading as a
   plain screenshot. Decoration, so it is the one accent here that marks nothing —
   kept to 96px on one edge for that reason. It hangs off .vfacade, not the badge,
   which sits in the other corner. ::after is taken by the gradient; ::before needs
   the explicit z-index because it would otherwise paint under the poster. */
.vfacade::before {
	content: ""; position: absolute; z-index: 2; inset-block-end: 0; inset-inline-start: 0;
	width: 96px; height: 4px; background: var(--accent);
}
.vfacade__note { margin: .75rem 0 0; font-size: .8125rem; color: var(--muted); }

/* The swapped-in player keeps the frame the facade had. */
.vfacade--playing { aspect-ratio: 16 / 9; background: var(--ink); }
.vfacade--playing iframe { display: block; width: 100%; height: 100%; border: 0; }
/* …but NOT the decoration. The wrapper reuses .vfacade, so the gradient scrim
   (::after, inset 0) and the accent rule (::before, bottom-left) would paint over
   the player — both are positioned, so they stack above the iframe and eat every
   click, including pause and the scrubber in exactly that bottom-left corner.
   Once the video is running the controls belong to the viewer. */
.vfacade--playing::before, .vfacade--playing::after { content: none; }
/* Once the player is in, the promise has been kept — the note stops being true
   in the present tense and just adds noise under a playing video. */
.vfacade--playing + .vfacade__note { display: none; }

/* Intro bullets — BLD's three red-dot facts */
.facts { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.facts li { list-style: none; position: relative; padding-inline-start: 1.5rem; line-height: 1.6; }
.facts li::before {
	content: ""; position: absolute; inset-inline-start: 0; top: .62em;
	width: 8px; height: 8px; background: var(--accent); border-radius: 50%;
}
.facts strong { font-weight: 700; }

/* Stat band — the signature: Light 300 numeral + tiny bold uppercase label,
   set as a dark band directly under the hero with the label *beside* the
   numeral rather than under it.
   Columns are explicit, never auto-fit: the values have very different widths
   and auto-fit strands the last item on its own row. */
/* Why `auto` tracks and not `1fr`: side by side, `80 000 м²` is ~7 glyphs at
   display size and will not share an equal-width column with its label — an
   earlier pass had to stack the two to fit. Sizing each track to its own content
   and pushing the slack into the gaps (`space-between`) fixes that without
   shrinking one cell off the shared type scale, and it is also why the hairlines
   land at uneven intervals rather than on a strict thirds grid.
   `nowrap` + the NBSP in the markup keep the thousands group intact. */
.stats {
	display: grid; gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 34rem) {
	.stats { grid-template-columns: repeat(2, auto); justify-content: space-between; }
}
@media (min-width: 68rem) { .stats { grid-template-columns: repeat(3, auto); } }

/* The band butts straight onto the hero video: the accent hairline is the seam,
   and the padding stays tight top and bottom so the dark strip reads as part of
   the footage rather than as a section of its own. */
.section--stats {
	padding-block: clamp(2rem, 3.4vw, 3rem);
	border-block-start: 3px solid var(--accent-ink);
}

.stat {
	display: flex; align-items: center; gap: clamp(.75rem, 1.5vw, 1.4rem);
	min-width: 0; padding-block: .35rem;
}
.stat__icon {
	display: block; flex: none;
	width: clamp(2rem, 2.7vw, 2.6rem); height: clamp(2rem, 2.7vw, 2.6rem);
	color: var(--accent-ink); stroke-linejoin: miter;
}
.stat__num {
	font-size: clamp(2.25rem, 3.4vw, 3.4rem); font-weight: 300; letter-spacing: -.04em;
	line-height: 1; color: var(--text); white-space: nowrap;
	font-variant-numeric: lining-nums tabular-nums;
}
/* The unit belongs to the numeral, not to the label — `80 000 м²` is one
   quantity. Sized off the numeral in `em` so it tracks the clamp, and raised
   rather than superscripted so the baseline of the digits stays unbroken. */
.stat__unit {
	font-size: .38em; letter-spacing: 0; margin-inline-start: .28em; vertical-align: .85em;
}
/* Capped in `em` so the label wraps to two short lines against the numeral
   instead of running out to the hairline. 10em clears the longest single word
   in the set (СТРОИТЕЛСТВОТО) — go narrower and it overflows the cell. */
.stat__label {
	font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	line-height: 1.35; color: var(--text); min-width: 0; max-width: 10em; hyphens: none;
}

/* Hairline rules between cells — sharp verticals, same construction logic as the
   zero radius. Scoped per breakpoint so the first cell of each row never gets a
   leading rule: 3-up drops it on 3n+1, 2-up on odd children, 1-up not at all.
   The 3-up block must reset 2n+1 first: at three cells the third one is odd, so
   the 2-up rule would strip the rule it needs. Same specificity, so the reset
   has to stay above the `:not(3n+1)` rule that re-adds it. */
@media (min-width: 34rem) {
	.stat:not(:nth-child(2n+1)) {
		border-inline-start: 1px solid var(--line);
		padding-inline-start: clamp(1.25rem, 2.2vw, 2rem);
	}
}
@media (min-width: 68rem) {
	.stat:nth-child(2n+1) { border-inline-start: 0; padding-inline-start: 0; }
	.stat:not(:nth-child(3n+1)) {
		border-inline-start: 1px solid var(--line);
		padding-inline-start: clamp(1.25rem, 2.2vw, 2rem);
	}
}
.section--ink .stat__num, .section--ink .stat__label { color: #fff; }
.section--ink .stat { border-inline-start-color: rgb(255 255 255 / .18); }

/* A head whose aside sits beside it rather than under it. The comp does this on
   every band that has a second line: the heading owns the left, the sentence (or
   the „Всички проекти“ link) rides the right edge, and the band saves a whole
   line of height. Falls back to stacked below 56rem, where two columns would
   leave the aside a four-word ribbon. */
.section__head--row { display: grid; gap: 1rem; align-items: end; max-width: none; }
@media (min-width: 56rem) {
	.section__head--row { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 2.5rem; }
	.section__head--row > :last-child { justify-self: end; text-align: end; }
}
.section__aside { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.section--ink .section__aside { color: rgb(255 255 255 / .68); }

/* Bands that carry no section title. Their content starts right under the
   eyebrow, so they can afford less air than a section with a heading in it. */
.section--band { padding-block: clamp(2.25rem, 3.8vw, 3.5rem); }

/* -------------------------------------------------------------------------
   Homepage project cards — image, then the caption on paper beneath it.
   The full-bleed knocked-out variant (.pcard, below) is still used elsewhere.
   ---------------------------------------------------------------------- */

.pgrid { display: grid; gap: clamp(1rem, 1.8vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .pgrid { grid-template-columns: repeat(3, 1fr); } }

.pc { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
/* display:block is load-bearing — the card is an <a>, so .pc__media is a span,
   and aspect-ratio/overflow do nothing on an inline box. Trap 2 in the README. */
.pc__media { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 11; background: var(--ink); }
.pc__media img { width: 100%; height: 100%; object-fit: cover;
	transition: transform .6s cubic-bezier(.2,.6,.2,1); }
/* Обект още без визуализация. .ph е grid-плочка и без размер се свива до нула,
   а картата се срутва под етикета — тук ѝ се дава кутията на снимката. */
.pc__media .ph { width: 100%; height: 100%; }
.pc:hover .pc__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .pc__media img { transition: none; } }

/* On the image, so the status costs the card no height at all. */
.pc__status {
	position: absolute; z-index: 2; inset-block-start: 0; inset-inline-start: 0;
	display: block; padding: .45rem .8rem;
	font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	background: var(--sale); color: #fff;
}
.pc__status--build { background: var(--build); }
.pc__status--done  { background: var(--muted); }
/* „Очаквайте скоро“ — обявен обект без наличности. Мастилен фон, същият като
   .ocard__phase--soon на /obekti/, за да чете като едно и също състояние на
   двете страници, а не като трети вид етикет. */
.pc__status--soon  { background: var(--ink); }

.pc__cap { display: block; padding-block-start: 1rem; }
.pc__name {
	display: block; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); font-weight: 700;
	letter-spacing: -.015em; line-height: 1.25;
}
.pc:hover .pc__name { color: var(--accent); }
.pc__loc {
	display: flex; align-items: center; gap: .45rem; margin-block-start: .45rem;
	color: var(--muted); font-size: .875rem; line-height: 1.35;
}
.pc__pin { flex: 0 0 auto; display: block; color: var(--accent); }

/* -------------------------------------------------------------------------
   Values — three columns of promise, hairlines between, no section heading
   ---------------------------------------------------------------------- */

.values { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .values { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 3.5vw, 3.5rem); } }
/* Hairlines between the columns, never before the first — same construction as
   the stat band. One column deep there is nothing to separate, so no rule. */
@media (min-width: 56rem) {
	.value + .value {
		border-inline-start: 1px solid var(--line);
		padding-inline-start: clamp(2rem, 3.5vw, 3.5rem);
	}
}
.value__icon { display: block; width: 34px; height: 34px; margin-block-end: 1rem; color: var(--accent); }
.value__icon svg { width: 100%; height: 100%; display: block; }
.value h3 { font-size: 1.125rem; font-weight: 700; margin: 0 0 .55rem; letter-spacing: -.015em; line-height: 1.25; }
.value p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.65; max-width: 34ch; }
/* -------------------------------------------------------------------------
   Featured project — render on the left, ink data panel on the right
   ---------------------------------------------------------------------- */

/* A <dl> laid out as rows, not as a two-column grid across the whole list: each
   row is its own grid so a long value wraps inside its own cell instead of
   pushing every label on the list to a new column width. */

/* -------------------------------------------------------------------------
   History — ink band, a still behind it, four steps across
   ---------------------------------------------------------------------- */

.hist { position: relative; overflow: hidden; }
/* The image is ground, not subject: at .16 it gives the band depth and texture
   and the type still clears AA against --ink underneath. Anything brighter and
   the four steps start competing with a building nobody is being asked to look at. */
.hist__bg {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: .16; filter: grayscale(1);
}
.hist__inner { position: relative; z-index: 1; }

.hist__steps {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: clamp(1.5rem, 2.6vw, 2.25rem); grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .hist__steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .hist__steps { grid-template-columns: repeat(4, 1fr); } }
/* A rule on top of each step rather than between them: four cells that wrap to
   two rows would otherwise put a vertical hairline at the start of the second
   row — a bar hanging in space, the same trap as the V7 meta dividers. */
.hstep { padding-block-start: 1.1rem; border-block-start: 2px solid rgb(255 255 255 / .22); }
.hstep__k {
	display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--accent-ink); margin-block-end: .6rem;
}
.hstep__t { font-size: 1.125rem; font-weight: 700; margin: 0 0 .5rem; letter-spacing: -.015em; }
.hstep__d { margin: 0; font-size: .9375rem; line-height: 1.6; color: rgb(255 255 255 / .74); }

/* -------------------------------------------------------------------------
   Leadership — portrait, name, role. Three across.
   ---------------------------------------------------------------------- */

.lead-row { display: grid; gap: 1px; background: var(--line); grid-template-columns: 1fr; }
@media (min-width: 44rem) { .lead-row { grid-template-columns: repeat(3, 1fr); } }
/* Centred in the cell, not flush left. A third of a 1360px shell is ~440px and
   the content — a 104px square plus two short lines — fills barely half of it,
   so left-aligning left a hand-width of dead paper against each hairline. */
.ldr {
	display: flex; align-items: center; justify-content: center;
	gap: clamp(1rem, 1.8vw, 1.5rem);
	background: var(--paper); padding: clamp(1.1rem, 1.8vw, 1.5rem);
	min-width: 0;
}
.section--alt .ldr { background: var(--paper-alt); }
/* Both dimensions AND the flex basis are pinned: a flex item with only a width
   gets squeezed by a long name and renders as a rectangle. Zero radius holds
   here too — the contact page uses circles because it is a phonebook; this is a
   portrait wall, and squares are what the comp has. */
.ldr__face {
	flex: 0 0 var(--face); width: var(--face); height: var(--face); aspect-ratio: 1;
	--face: clamp(76px, 7vw, 104px);
	/* Centred, not 18% down from the top: every file here is already a square
	   head-crop, so there is nothing to pull up and an offset would push the chin
	   out of frame. The 4:5 originals that needed the offset live on /kontakti/. */
	object-fit: cover; object-position: 50% 50%;
	background: var(--paper-alt); filter: grayscale(1) contrast(1.04);
}
.ldr__face--mono {
	display: grid; place-items: center; border: 1px solid var(--line);
	font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: 300;
	letter-spacing: -.02em; color: var(--muted);
}
.ldr__who { min-width: 0; }
.ldr__who b { display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.ldr__who span { display: block; font-size: .8125rem; color: var(--muted); margin-block-start: .35rem; }

/* -------------------------------------------------------------------------
   Single testimonial — one quote, the author beside it
   ---------------------------------------------------------------------- */

/* Three tracks, three children — mark, face, body. The mark is display:none
   below 44rem, which takes it out of flow entirely, so the remaining two land in
   the first two tracks and the third goes unused. That is why the columns are
   declared here and not re-declared in the narrow block. */
.quote {
	margin: 0; display: grid; gap: clamp(1rem, 2.2vw, 2rem);
	grid-template-columns: auto auto minmax(0, 1fr); align-items: center;
}
/* Raised, not the Cyrillic low-9 („) a Bulgarian quotation actually opens with.
   The blockquote carries no punctuation of its own — this glyph is decoration and
   aria-hidden, so the choice is visual, and the low-9 sits on the baseline where
   it read as two red slashes floating beside the portrait rather than as a mark.
   It is the one accent on this band that is not a next action. */
.quote__mark {
	align-self: center; display: block;
	font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 700; line-height: .8;
	color: var(--accent); user-select: none;
}
@media (max-width: 44rem) { .quote__mark { display: none; } }
.quote__face {
	width: var(--face); height: var(--face); aspect-ratio: 1;
	--face: clamp(72px, 7vw, 104px);
	object-fit: cover; filter: grayscale(1) contrast(1.04); background: var(--paper);
}
.quote__face--mono {
	display: grid; place-items: center; border: 1px solid var(--line);
	font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 300; color: var(--muted);
}
.quote__body { min-width: 0; }
/* Light 300 at display size — the theme's weight inversion. A quote is the one
   place on this page where a long line is meant to be read slowly. */
.quote__text {
	margin: 0; font-size: clamp(1.125rem, 2.1vw, 1.625rem); font-weight: 300;
	line-height: 1.4; letter-spacing: -.015em; color: var(--text); max-width: 58ch;
}
.quote__by { margin-block-start: 1.1rem; }
.quote__by b { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.quote__by span { display: block; font-size: .8125rem; color: var(--muted); margin-block-start: .2rem; }

/* Project cards — full-bleed render, name over image, status pill, accent CTA */
.projects { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr)); }
.pcard {
	position: relative; min-height: 27rem; display: flex; align-items: flex-end;
	overflow: hidden; background: var(--ink); text-decoration: none; color: #fff;
}
.pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
	transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.pcard:hover .pcard__img { transform: scale(1.04); }
.pcard::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, rgb(10 11 13 / .9) 6%, rgb(10 11 13 / .35) 48%, transparent 80%);
}
/* The card is an <a>, so its children are spans — force them to stack. */
.pcard__body { position: relative; z-index: 2; padding: 2rem; width: 100%; display: block; }
.pcard__body > * { display: block; }
.pcard__status {
	width: max-content; padding: .4rem .85rem; margin-block-end: .9rem;
	font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	background: var(--sale); color: #fff;
}
.pcard__status--build { background: var(--build); }
.pcard__status--done  { background: rgb(255 255 255 / .22); }
.pcard__name {
	font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.02em;
	text-transform: uppercase; margin: 0 0 .5rem;
}
.pcard__loc {
	display: flex; align-items: center; gap: .5rem;
	font-size: .9375rem; color: rgb(255 255 255 / .8); margin-block-end: 1.5rem;
}
.pcard__cta {
	display: inline-flex !important; align-items: center; gap: .6rem;
	background: var(--accent); padding: .9rem 1.75rem;
	font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pcard:hover .pcard__cta { background: var(--accent-dk); }
/* Brand corner motif — the roof/gable mark from the logo, as an SVG outline */
.pcard__motif {
	position: absolute; z-index: 2; top: 1.5rem; right: 1.5rem;
	width: 52px; height: 38px; color: var(--accent); pointer-events: none;
}
.pcard__motif svg { width: 100%; height: 100%; display: block; }

/* Services */
/* Четири карти, един ред на голям екран (искане на клиента, 14.09.2026 —
   „Механизация и транспорт“ отпадна и останалите четири трябва да са на един
   ред). Гридът е само от 62rem нагоре, защото под тази ширина четири колони
   режат „Топлоизолационни системи“ на срички. По-надолу остава flex, който
   разтяга последния ред и не оставя празни клетки — иначе фонът на контейнера
   (хайрлайнът) се показва като сив правоъгълник. */
.services { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); }
@media (min-width: 62rem) { .services { display: grid; grid-template-columns: repeat(4, 1fr); } }
.svc { flex: 1 1 min(16rem, 100%); background: var(--paper); padding: clamp(1.75rem, 3vw, 2.75rem); }
.section--alt .svc { background: var(--paper-alt); }
/* display:block is load-bearing — width/height are ignored on inline spans */
.svc__icon { display: block; width: 42px; height: 42px; margin-block-end: 1.5rem; color: var(--accent); }
.svc__icon svg { width: 100%; height: 100%; display: block; }
.svc h3 { font-size: 1.1875rem; font-weight: 700; margin: 0 0 .75rem; letter-spacing: -.01em; }
.svc p { margin: 0; max-width: 58ch; color: var(--muted); font-size: 1rem; line-height: 1.65; }

/* Awards — still the one warm panel on the page, but the tint is now the band
   itself rather than a box floating inside a white section. Same amount of warm
   on screen, one less frame, and it saves the ~4rem of padding the box carried
   on top of the section's own. */
.awards { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.award__year {
	font-size: 2.5rem; font-weight: 300; letter-spacing: -.04em; line-height: 1;
	color: var(--accent); margin-block-end: .6rem;
}
.award h3 { font-size: 1.0625rem; font-weight: 700; margin: 0 0 .45rem; }
.award p { margin: 0; font-size: .9375rem; color: var(--muted); line-height: 1.6; }

/* Completed projects — Planex's staggered grid */
.staggered { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.staggered > *:nth-child(even) { margin-block-start: clamp(0rem, 6vw, 5rem); }
.ref__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--paper-alt); }
.ref h3 { font-size: 1.0625rem; font-weight: 700; margin: 1.25rem 0 .3rem; }
.ref p { margin: 0; color: var(--muted); font-size: 1rem; }

/* -------------------------------------------------------------------------
   Projects page — shared furniture
   ---------------------------------------------------------------------- */

.demo-note {
	background: var(--warm); border-inline-start: 3px solid var(--build);
	padding: .9rem 1.25rem; margin: 0 0 2.5rem;
	font-size: .875rem; color: #6a5327; max-width: 62ch;
}
/* Variant switcher — lets the client compare the five layouts side by side */

/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: clamp(1.75rem, 3vw, 2.5rem); }
.chips button, .chips span {
	border: 1px solid var(--line); background: var(--paper); color: var(--text);
	padding: .6rem 1.1rem; font: inherit; font-size: .8125rem; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.chips [aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chips button:hover { border-color: var(--ink); }

/* Placeholder tile for a project with no render — deliberate, not broken */
.ph {
	display: grid; place-items: center; background: var(--ink); color: rgb(255 255 255 / .25);
}
.ph svg { width: 48px; height: 34px; }

/* ---- V2 · editorial ------------------------------------------------- */
.ed { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .ed { grid-template-columns: 1fr 1fr; } }
@media (min-width: 52rem) { .ed > *:nth-child(even) { margin-block-start: clamp(2rem, 7vw, 6rem); } }
.ed__item { text-decoration: none; color: inherit; display: block; }
/* display:block again — aspect-ratio and overflow do nothing on an inline span */
.ed__media { display: block; position: relative; overflow: hidden; aspect-ratio: 3/2; }
.ed__media img, .ed__media .ph { width: 100%; height: 100%; object-fit: cover; }
.ed__item:hover .ed__media img { transform: scale(1.03); }
.ed__media img { transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.ed__no { font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--accent); margin: 1.35rem 0 .5rem; }
.ed__name { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; margin: 0 0 .3rem; letter-spacing: -.015em; }
.ed__loc { margin: 0; color: var(--muted); font-size: 1rem; }

/* ---- V3 · register --------------------------------------------------- */
.reg { width: 100%; border-collapse: collapse; }
.reg thead th {
	text-align: start; padding: .85rem 1rem; border-block-end: 2px solid var(--ink);
	font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
	white-space: nowrap;
}
.reg td { padding: .85rem 1rem; border-block-end: 1px solid var(--line); vertical-align: middle; }
.reg tbody tr:hover { background: var(--paper-alt); }
.reg__thumb { width: 84px; height: 56px; object-fit: cover; display: block; }
.reg__thumb.ph svg { width: 26px; height: 19px; }
.reg__name { font-weight: 700; font-size: 1rem; }
.reg__name a { color: inherit; text-decoration: none; }
.reg__name a:hover { color: var(--accent); text-decoration: underline; }
.reg__meta { color: var(--muted); font-size: .9375rem; white-space: nowrap; }
.tag {
	display: inline-block; padding: .32rem .7rem; white-space: nowrap;
	font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	background: var(--sale); color: #fff;
}
.tag--build { background: var(--build); }
.tag--done { background: var(--muted); }
.reg-scroll { overflow-x: auto; }

/* ---- V4 · split screen ------------------------------------------------ */
.split { display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 60rem) { .split { grid-template-columns: 1fr 1fr; } }
.split__stage { position: sticky; top: calc(var(--header-h) + 2rem); aspect-ratio: 4/3; overflow: hidden; background: var(--ink); }
.split__stage img, .split__stage .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity .45s ease; }
.split__stage img.is-on, .split__stage .ph.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .split__stage img { transition: none; } }
.split__list { list-style: none; margin: 0; padding: 0; }
.split__list li { border-block-end: 1px solid var(--line); }
.split__list a {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	padding: 1.35rem .25rem; text-decoration: none; color: var(--text);
}
.split__list a:hover, .split__list a:focus-visible { color: var(--accent); }
.split__list .is-current a { color: var(--accent); }
.split__n { font-size: .75rem; font-weight: 700; color: var(--muted); min-width: 2.25rem; }
.split__t { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 700; flex: 1 1 auto; letter-spacing: -.01em; }
.split__c { font-size: .875rem; color: var(--muted); white-space: nowrap; }

/* ---- V5 · mosaic ------------------------------------------------------ */
/* Fixed row height rather than aspect-ratio: a tile spanning two columns would
   otherwise be twice as tall and punch holes the dense flow cannot fill. */
.mosaic {
	display: grid; gap: 1rem; grid-auto-flow: dense;
	grid-template-columns: repeat(2, 1fr); grid-auto-rows: 11rem;
}
@media (min-width: 48rem) { .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 14rem; } }
.mo {
	position: relative; overflow: hidden; text-decoration: none; color: #fff;
	background: var(--ink); display: block; height: 100%;
}
.mo--wide { grid-column: span 2; }
.mo--tall { grid-row: span 2; }
@media (max-width: 47.99rem) { .mo--tall { grid-row: span 2; } }
.mo img, .mo .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.mo:hover img { transform: scale(1.05); }
.mo::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgb(10 11 13 / .85) 4%, rgb(10 11 13 / .25) 45%, transparent 75%);
}
.mo__body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 1.25rem; }
.mo__name { display: block; font-size: clamp(.9375rem, 1.5vw, 1.25rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.mo__loc { display: block; font-size: .8125rem; color: rgb(255 255 255 / .75); margin-block-start: .25rem; }
.mo__tag { position: absolute; top: 1rem; inset-inline-start: 1rem; z-index: 2; }
/* -------------------------------------------------------------------------
   Projects page · variants 6–9 — the polished round
   Shared: one filter component in three dresses, then one layout each.
   ---------------------------------------------------------------------- */

/* ---- Filter (shared by 6–9) ------------------------------------------- */

/* Rendered [hidden] and unhidden by app.js — see izolacii_filter(). */

/* Load-bearing. Every filterable tile sets its own display (block/grid/flex),
   and a class beats the UA sheet's `[hidden] { display: none }` — so without
   this the "hidden" cards keep their grid cells and the filtered layout tears
   into ragged rows. The attribute pair outspecifies the tile classes. */
[data-status][hidden] { display: none; }
/* The count rides at the end of every tab; muted so the label still leads. */

/* accent-ink, not accent: the brand red sits at ~2.2:1 on --ink and goes muddy. */

/* search inputs get a UA clear button that sits on the dark bar as a grey blob */

/* Outlined button — V9's footer CTA. The only ghost button on paper. */
.btn--outline { background: transparent; color: var(--accent); border-color: var(--accent); gap: .75rem; }
.btn--outline:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--outline svg { display: block; }

/* ---- Stat rows (V6, V7) ----------------------------------------------
   Three dresses over one data shape — see izolacii_stats_row().
   ⚠️ The figures are demo values (izolacii_demo_stats), not facts. */
.stat-i { display: block; flex: 0 0 auto; width: 22px; height: 22px; }
.stat-i svg { width: 100%; height: 100%; display: block; }

/* icons — V6 lead card, over the dark scrim */
.stat-icons { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.35rem; margin-block-start: 1.5rem; }
.stat-icons__i { display: flex; align-items: center; gap: .6rem; }
.stat-icons__i + .stat-icons__i { border-inline-start: 1px solid rgb(255 255 255 / .22); padding-inline-start: 1.35rem; }
.stat-icons__t { display: block; line-height: 1.15; }
.stat-icons__t b { display: block; font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; }
.stat-icons__t > span { display: block; font-size: .75rem; color: rgb(255 255 255 / .72); margin-block-start: .15rem; }
.stat-icons__t--act { font-size: .8125rem; font-weight: 700; }
.stat-icons__i--act .stat-i { color: rgb(255 255 255 / .72); }
/* A leading hairline on a wrapped line is a bar hanging in space — same trap as
   the meta dividers. Narrow screens separate by gap alone. */
@media (max-width: 48rem) {
	.stat-icons__i + .stat-icons__i { border-inline-start: 0; padding-inline-start: 0; }
	.stat-icons { gap: .75rem 1.15rem; }
}

/* inline — V6 small card, where there is no room for icons */
.stat-line {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem;
	margin-block-start: .8rem; font-size: .8125rem; color: rgb(255 255 255 / .8);
}
.stat-line b { font-weight: 800; color: #fff; }
.stat-line i { font-style: normal; color: rgb(255 255 255 / .42); padding-inline: .15rem; }

/* big — V7 zigzag, three numerals over their labels */
.stat-big {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem; margin-block-start: 1.6rem; max-width: 28rem;
}
.stat-big__i { display: block; }
/* Display weight is Light 300 across this theme; the numerals follow it and let
   size, not weight, carry them. */
.stat-big__i b {
	display: block; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 300;
	color: var(--accent); letter-spacing: -.03em; line-height: 1;
}
.stat-big__i > span { display: block; font-size: .8125rem; color: var(--muted); margin-block-start: .4rem; line-height: 1.3; }
/* ---- V6 · lead project + grid ---------------------------------------- */

/* Small cards read bottom-up; the lead card reads left-in, so the building on
   its right stays uncovered — that is the whole point of giving it the width. */

@media (min-width: 60rem) {
/* 46ch held the title nicely but wrapped the four-item stat row, which put a
	   leading hairline on the wrapped line — a bar hanging in space. The measure
	   is set by the stat row now, not the heading. */

}
/* The rule that grows out of the label on hover — the arrow is drawn, not typed,
   so it can animate its own length. */

/* ---- V7 · zigzag ------------------------------------------------------ */

@media (min-width: 64rem) {
/* Zero row gap is what does the weaving: the images alternate sides and meet
	   corner-to-corner, so the column reads as one brick-laid band. Pulling the
	   rows into each other as well was tried and is wrong — the white text panel
	   then paints over the bottom of the image above it. */

}
/* The panel is white on white — its edges never show. It exists to hold the
   text off the image it overlaps, and to centre that text against a media box
   whose height it does not know. */

/* ---- V8 · searchable list -------------------------------------------- */

/* Lifting the row off the page on hover is the only motion here — it stands in
   for the arrow, which is decoration on a row that is entirely a link. */

/* The arrow is pure decoration — the whole row is the link — so it is the first
   thing to go when the row needs the width for figures. */

/* cols — V8. Tabular figures so the numerals line up column-to-column down the
   list; that vertical alignment is the whole reason a register reads as a register. */
.stat-cols {
	grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
	margin-block-start: .35rem; font-variant-numeric: tabular-nums;
}
/* Narrow enough that three figures still fit one line on a 390px screen; the
   desktop block below widens it again so the sub-columns align row to row. */
.stat-cols__i { display: block; min-width: 4.5rem; }
.stat-cols__i b { display: block; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.stat-cols__i > span { display: block; font-size: .6875rem; color: var(--muted); margin-block-start: .15rem; }
@media (min-width: 62rem) {
	.stat-cols { grid-column: auto; margin-block-start: 0; gap: 0 1.75rem; flex-wrap: nowrap; }
	/* 3 × 5.5rem + 2 × 1.75rem gap = the 20rem track on .lrow exactly, so every
	   figure sits under the one above it whether the row carries two or three. */
	.stat-cols__i { min-width: 5.5rem; }
}
/* ---- V9 · gallery, captions on paper ---------------------------------- */

/* Captions sit under the image rather than over it: half these renders are pale
   facades against pale sky, and white-on-image needs a scrim that would bury the
   building. On paper the type is black and the render stays untouched. */

/* The asymmetric grid only exists once there is width for it to be asymmetric
   in. Below that it is one column and the aspect-ratio above governs. */
@media (min-width: 48rem) {
/* Row spans, not aspect-ratio: a tile two columns wide would otherwise be
	   twice as tall and punch holes the dense flow cannot fill. Same lesson as V5. */

/* The media takes whatever the caption leaves, so tiles of different row
	   spans still bottom out on the same caption height. */

}

/* -------------------------------------------------------------------------
   Testimonials — card, then the author beneath it on the page ground
   ---------------------------------------------------------------------- */

.tst { position: relative; }
/* Scroll-snap rather than a JS slider: with JS off this is still a usable
   swipeable row, and the dots simply never appear. */
.tst__track {
	--tst-gap: clamp(1rem, 2.5vw, 2rem);
	display: grid; grid-auto-flow: column;
	/* A bare track size, never minmax(0, …): a 0 minimum lets the columns shrink
	   to fit the container, so three cards silently squeezed into one screen
	   instead of overflowing and the carousel had nothing to scroll. */
	grid-auto-columns: 100%;
	gap: var(--tst-gap);
	overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; padding-block-end: .5rem;
}
.tst__track::-webkit-scrollbar { display: none; }
/* n cards per page means subtracting the n−1 gaps between them; the gap is a
   token here so the arithmetic cannot drift from the declaration above. */
@media (min-width: 46rem) { .tst__track { grid-auto-columns: calc((100% - var(--tst-gap)) / 2); } }
@media (min-width: 68rem) { .tst__track { grid-auto-columns: calc((100% - 2 * var(--tst-gap)) / 3); } }
/* Column flex so the cards stretch to the tallest in the row; without it a
   three-line quote sits shorter than a four-line one and the author rows land
   at different heights across the strip. */
.tst__item { margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; }

.tst__card {
	position: relative; background: var(--paper);
	flex: 1 1 auto; display: flex; flex-direction: column;
	padding: clamp(1.5rem, 2.6vw, 2rem);
	/* The one soft edge in the theme is not allowed; zero radius reads as
	   construction, and that rule holds here too. */
	box-shadow: 0 1px 0 var(--line), 0 10px 30px rgb(16 17 20 / .05);
}
/* The tail that ties the card to the author below it. Two triangles: the outer
   one carries the shadow's edge, the inner one paints paper back over it. */
.tst__card::after {
	content: ""; position: absolute; top: 100%; inset-inline-start: 2rem;
	border: 11px solid transparent; border-block-start-color: var(--paper);
	filter: drop-shadow(0 2px 1px rgb(16 17 20 / .06));
}
.tst__quote {
	margin: 0; font-size: 1rem; line-height: 1.75; color: var(--text);
	quotes: none;
}
/* auto top margin pins the rating to the foot of a stretched card, so the stars
   line up across the strip however long each quote runs. */

/* Gold, not accent: accent marks the next action and a star is decoration.
   --build is the existing amber in the palette, so this adds no new colour;
   there is no status pill on this card for it to be confused with. */

.tst__by { display: flex; align-items: center; gap: 1rem; margin-block-start: 1.75rem; padding-inline-start: .35rem; }
.tst__face {
	flex: 0 0 auto; width: 56px; height: 56px; aspect-ratio: 1;
	border-radius: 50%; object-fit: cover; background: var(--paper);
}
.tst__face--mono {
	display: grid; place-items: center;
	border: 1px solid var(--line); color: var(--muted);
	font-size: 1.0625rem; font-weight: 300; letter-spacing: -.01em;
}
.tst__who { display: block; min-width: 0; }
.tst__who b { display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.tst__who > span { display: block; font-size: .875rem; color: var(--muted); margin-block-start: .15rem; }

.tst__dots { display: flex; justify-content: center; gap: .5rem; margin-block-start: clamp(1.75rem, 3vw, 2.5rem); }
.tst__dots[hidden] { display: none; }
.tst__dots button {
	width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
	background: var(--line); cursor: pointer; font: inherit;
	transition: background .2s ease, transform .2s ease;
}
.tst__dots button:hover { background: var(--muted); }
.tst__dots button[aria-current="true"] { background: var(--ink); transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) { .tst__dots button { transition: none; } }

/* A demo note that has to be impossible to skim past — this one sits on the
   live homepage, not behind a variant switcher. */
.demo-note--hard {
	background: #fdf3f3; border-inline-start-color: var(--accent);
	color: #7a1b1b; max-width: none; margin-block-end: 2rem;
}

/* Simple reference list (no photos yet) */
.reflist { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.reflist li { list-style: none; display: flex; justify-content: space-between; gap: 1rem;
	padding: 1.15rem .25rem; border-block-end: 1px solid var(--line); }
.reflist b { font-weight: 700; }
.reflist span { color: var(--muted); font-size: .9375rem; white-space: nowrap; }

/* CTA band */
.cta-band { background: var(--ink); color: #fff; padding: clamp(2.5rem, 4.2vw, 3.75rem) 0; }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem 2rem; }
/* 2rem cap, down from 2.5: at 2.5 the sentence ran to four lines and the band
   was taller than the awards section above it, which is the one carrying facts. */
.cta-band h2 { font-size: clamp(1.375rem, 2.6vw, 2rem); font-weight: 300; letter-spacing: -.02em; margin: 0; max-width: 30ch; line-height: 1.3; }
/* Заглавието и подкрепящото изречение са един flex-елемент — виж коментара в патерна. */
.cta-band__copy { max-width: 46ch; }
.cta-band__lead { margin: .875rem 0 0; color: rgb(255 255 255 / .72); font-size: 1rem; line-height: 1.6; }
.cta-band strong { font-weight: 800; }

/* -------------------------------------------------------------------------
   Contact page
   ---------------------------------------------------------------------- */

/* Stub pages (see izolacii_stub_page in functions.php) still use this head */
.page-head { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.crumbs { display: flex; align-items: center; gap: .6rem; font-size: .875rem; color: var(--muted); margin-block-end: 1.5rem; }

/* Пътеката веднага под лентата — тази, която е първото нещо на страницата.
   Червеният блок с логото виси под хедъра и оставя ивица, в която иначе няма
   нищо; над 1101px пътеката влиза ТАМ, вместо да бута страницата надолу.

   ⚠️ Правилото стои ТУК, при `.crumbs`, а не при всяка страница поотделно.
   Първо беше в objects.css като `.obekti-head .crumbs` и когато потрябва и на
   страницата на единицата, единственият изход беше втори, същият блок — точно
   начинът две страници да се разминат. Отместването е изведено от логото
   (`--brand-w`, `--brand-drop`, `--brand-gap` в :root), тоест смени ли се то,
   пътеките се местят с него.

   Страницата отгоре трябва само да занули СВОЕТО горно поле: клеймото носи
   собственото си. */
.crumbs--top { padding-block-start: max(.75rem, calc(var(--brand-drop) + .75rem)); }
@media (min-width: 1101px) {
	/* Под 1101px логото пада на 140px (виси 25px), под 26rem — на 116px (виси
	   11px): ивицата вече не побира ред текст и пътеката минава ПОД нея, което
	   е стойността по подразбиране горе. */
	.crumbs--top {
		padding-inline-start: calc(var(--brand-w) + var(--brand-gap));
		/* Оптически по средата на надвисналото, а не залепена за лентата. */
		padding-block: calc((var(--brand-drop) - 1.4em) / 2);
	}
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; display: block; }
.page-title { font-size: clamp(2.25rem, 6.5vw, 5rem); font-weight: 300; letter-spacing: -.035em; margin: 0; }

/* The contact page is a working page, not a showpiece: someone landed here to
   phone, and almost nobody wants a form first. Above the fold is faces on the
   left and the office block on the right — a name, a face and a number to dial.
   The written enquiry gets its own section underneath. */
.section--contact { padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4.5rem); }
/* Anchor target for "Запазете оглед" — the header is sticky, so the jump has to
   clear it or the section title lands underneath. */
.section--form { padding-block: clamp(2.75rem, 5vw, 4.5rem); scroll-margin-block-start: var(--header-h, 4rem); }
.section--legal { padding-block: clamp(2.5rem, 4.5vw, 4rem); }

.contact-head { max-width: 60ch; margin-block-end: clamp(1rem, 2vw, 1.5rem); }
.contact-head .u-eyebrow { margin-bottom: 0; }

/* People take the wider left column, the office panel the narrower right one. */
.contact-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62rem) { .contact-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }

/* The form is no longer a column, so cap its measure — full-shell-wide inputs
   read as a data-entry screen, not an enquiry. */
.contact-form { max-width: 58rem; }

.ccard { border: 1px solid var(--line); padding: clamp(1.5rem, 2.6vw, 2rem); }
/* Dark panel under an accent hairline: the office details read as the fixed
   fact of the page, the faces beside it as the thing to act on. */
.ccard--ink {
	background: var(--ink); border-color: var(--ink); color: #fff;
	border-block-start: 4px solid var(--accent);
	padding: clamp(1.75rem, 3vw, 2.25rem);
}
.ccard--ink a { color: #fff; }
.ccard--form { background: var(--paper); }
.ccard__block + .ccard__block {
	margin-block-start: clamp(1.5rem, 3vw, 2rem);
	padding-block-start: clamp(1.5rem, 3vw, 2rem);
	border-block-start: 1px solid rgb(255 255 255 / .14);
}
.ccard__title {
	font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	margin: 0 0 1.25rem;
}
.ccard__title--dark { color: var(--text); font-size: 1.125rem; letter-spacing: -.01em; text-transform: none; }

/* Icon + text rows. The icon column is a fixed track so every line hangs on
   the same left edge no matter how tall its text runs. */
.ilist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.ilist li { display: grid; grid-template-columns: 24px 1fr; gap: 1rem; align-items: start; }
.ilist__icon { display: block; width: 24px; height: 24px; color: var(--accent-ink); }
.ilist__icon svg { width: 100%; height: 100%; display: block; }
.ilist__text { font-size: 1rem; line-height: 1.5; display: block; }
.ilist__text a { display: block; text-decoration: none; font-weight: 700; width: max-content; max-width: 100%; overflow-wrap: anywhere; }
.ilist__text a + a { margin-block-start: .3rem; }
.ilist__text a:hover { text-decoration: underline; }
.ilist__label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .07em;
	text-transform: uppercase; color: rgb(255 255 255 / .62); margin-block-end: .3rem; }
.ilist__lead { display: block; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.ilist__note { display: block; font-size: .9375rem; color: rgb(255 255 255 / .68); line-height: 1.5; margin-block-start: .2rem; }
/* CTA inside an .ilist row — beats `.ilist__text a`, which would otherwise force
   it to display:block and strip the button back to a plain white link. */
.ilist__text a.ilist__cta {
	display: inline-flex; width: auto;
	padding: .85rem 1.6rem; margin-block-start: .9rem;
	color: #fff;
}
.ilist__text a.ilist__cta:hover { text-decoration: none; }

/* Team — compact contact rows, not portrait tiles. The photo is a fixed square
   circle: both dimensions AND flex-basis are pinned, because a flex item with
   only a width set gets squeezed by a long email and renders as an ellipse. */
.team {
	display: grid; gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
/* In the contact column they stack one per row: the column is too narrow for a
   photo plus an email side by side, and a vertical list scans like a phonebook. */
@media (min-width: 62rem) { .contact-people .team { grid-template-columns: 1fr; } }
.person {
	display: flex; align-items: center; gap: clamp(1rem, 1.5vw, 1.35rem); min-width: 0;
	background: var(--paper); border: 1px solid var(--line);
	padding: clamp(1rem, 1.4vw, 1.25rem) clamp(1.15rem, 1.6vw, 1.5rem);
	--photo: clamp(88px, 7.5vw, 112px);
}
.person__photo {
	flex: 0 0 var(--photo); width: var(--photo); height: var(--photo); aspect-ratio: 1;
	border-radius: 50%; object-fit: cover; object-position: 50% 20%;
	background: var(--paper-alt); filter: saturate(.92);
}
/* Fallback when someone has no photo yet — deliberate, not a broken image */
.person__photo--mono {
	display: grid; place-items: center; border: 1px solid var(--line);
	font-size: clamp(1.5rem, 2vw, 1.875rem); font-weight: 300; letter-spacing: -.02em; color: var(--muted);
}
.person__body { min-width: 0; }
.person__name { font-size: 1rem; font-weight: 700; margin: 0 0 .2rem; letter-spacing: -.01em; }
.person__role {
	font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	color: var(--accent); margin: 0 0 .55rem;
}
.person a {
	display: flex; align-items: center; gap: .5rem;
	text-decoration: none; color: var(--text);
	font-size: .9375rem; min-width: 0; overflow-wrap: anywhere;
}
.person a + a { margin-block-start: .25rem; }
.person a:hover { color: var(--accent); text-decoration: underline; }
.person__icon { display: block; flex: 0 0 15px; width: 15px; height: 15px; color: var(--accent); }
.person__icon svg { width: 100%; height: 100%; display: block; }

/* Map — full-bleed band with the office card floating on the shell grid */
/* height, а не min-height. Височината на iframe-а е 100% и се мери спрямо този
   блок; при auto+min-height процентът е неопределен, Google инициализира картата
   по временния размер и залепва центъра за него — на телефон маркерът и логото
   оставаха извън кадъра. С фиксирана височина рамката е с крайния си размер още
   при първото оформление и топлийката пада в средата. */
.map-band { position: relative; height: clamp(20rem, 32vw, 26rem); background: var(--paper-alt); }
/* Без grayscale върху Google картата: филтърът обезцветяваше и червения
   маркер (сив топлийка върху сива карта), а и условията на Google Maps не
   позволяват преоцветяване на картата извън техните стилове. */
.map-band iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Embedded maps swallow the wheel and zoom instead of letting the page scroll.
   A shield takes the pointer until the user deliberately clicks in; leaving the
   map puts it back, so a stray wheel can never hijack the scroll again. */
.map-band__shield {
	position: absolute; inset: 0; z-index: 2;
	display: grid; place-items: center;
	background: transparent; border: 0; padding: 0; margin: 0;
	cursor: pointer; font: inherit; color: inherit;
}
.map-band__hint {
	background: rgb(22 24 28 / .82); color: #fff;
	padding: .8rem 1.35rem;
	font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.map-band__shield:hover .map-band__hint,
.map-band__shield:focus-visible .map-band__hint { opacity: 1; }
.map-band.is-active .map-band__shield { display: none; }
@media (prefers-reduced-motion: reduce) { .map-band__hint { transition: none; } }

/* Sits above the shield (z-index 3) so its link stays clickable, but the band
   itself must not eat pointer events or the shield below it stops working. */
.map-band__overlay {
	position: absolute; inset: 0; z-index: 3;
	display: flex; align-items: center; pointer-events: none;
}
/* Откакто картата търси адреса, Google рисува собствена картичка с този адрес
   в горния ляв ъгъл. Нашата картичка отива вдясно, за да не се редят две бели
   кутии една под друга; под 900px Google скрива своята и нашата се връща вляво. */
.map-band__overlay .u-shell { width: 100%; }
@media (min-width: 900px) { .map-band__overlay .u-shell { display: flex; justify-content: flex-end; } }
/* На тесен екран картичката е широка колкото лентата и застава точно върху
   маркера в средата. Затова слиза долу — но не до ръба: отдолу остава място за
   атрибуцията на Google, която няма право да се закрива. */
@media (max-width: 899px) {
	.map-band__overlay { align-items: flex-end; padding-block-end: 2.5rem; }
	/* Маркерът стои в центъра на iframe-а. При 20rem височина центърът съвпада
	   с горния ръб на картичката и топлийката се скриваше зад нея — оттам и
	   тези 26rem: пинът остава да се вижда над картичката. */
	.map-band { height: 26rem; }
}
.map-card {
	pointer-events: auto;
	display: inline-flex; align-items: center; gap: 1rem;
	background: var(--paper); border: 1px solid var(--line);
	border-inline-start: 4px solid var(--accent);
	padding: 1.15rem 1.75rem 1.15rem 1.35rem;
	box-shadow: 0 12px 32px rgb(16 17 20 / .12);
}
.map-card__icon { display: block; flex: 0 0 26px; width: 26px; height: 26px; color: var(--accent); }
.map-card__icon svg { width: 100%; height: 100%; display: block; }
.map-card__title { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .3rem; }
/* Адресът под заглавието на картичката (25.08.2026) — по-тих от връзката,
   защото е справка, а не действие. */
.map-card__addr { margin: 0 0 .4rem; font-size: .875rem; line-height: 1.45; color: var(--muted); }
.map-card__link { font-size: .9375rem; font-weight: 700; color: var(--accent); text-decoration: none; }
.map-card__link:hover { text-decoration: underline; }

.legal { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.legal div { border-block-start: 2px solid var(--ink); padding-block-start: 1rem; }

/* Отговорът след изпращане. Стои НАД формата, не под бутона: човек се връща на
   #ogled и погледът му пада на върха на секцията, не на дъното ѝ. */
.form-notice {
	/* Същата мярка като .contact-form — иначе съобщението стърчи по-широко от
	   картата, върху която се отнася. */
	max-width: 58rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-inline-start: 3px solid var(--accent);
	background: var(--paper);
	font-size: .9375rem;
	line-height: 1.6;
}
.form-notice--ok { border-inline-start-color: var(--free, #2e7d5b); }
.form-notice--err { border-inline-start-color: var(--accent); }

/* Form — styled generically so any plugin's markup inherits the system */
.form-slot input[type="text"], .form-slot input[type="email"], .form-slot input[type="tel"],
.form-slot textarea, .form-slot select {
	width: 100%; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 0;
	font: inherit; font-size: 1rem; background: var(--paper); color: var(--text);
}
.form-slot textarea { resize: vertical; }
.form-slot input::placeholder, .form-slot textarea::placeholder { color: var(--muted); opacity: 1; }
.form-slot input:focus, .form-slot textarea:focus, .form-slot select:focus {
	outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.form-slot label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .07em;
	text-transform: uppercase; color: var(--muted); margin-block-end: .4rem; }
.form-slot .form-row { margin-block-end: 1rem; }
/* Name/phone and email/subject pair up — halves the form's height on desktop */
.form-duo { display: grid; gap: 0 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .form-duo { grid-template-columns: 1fr 1fr; } }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form-foot .form-note { margin: 0; flex: 1 1 18ch; }
.form-slot button, .form-slot input[type="submit"] {
	background: var(--accent); color: #fff; border: 0; border-radius: 0; cursor: pointer;
	padding: 1.05rem 2rem; font: inherit; font-size: .8125rem; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
}
.form-slot button:hover, .form-slot input[type="submit"]:hover { background: var(--accent-dk); }
.form-note { font-size: .875rem; color: var(--muted); line-height: 1.6; }

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */

.site-footer { background: var(--paper-alt); border-block-start: 1px solid var(--line);
	padding-block: clamp(3rem, 5vw, 4.5rem) 1.5rem; }

/* Three columns, contact pinned right. The logo column of the V10 comp is
   deliberately absent — Gabe cut it, so the link columns take the width. */
.footer-grid { display: grid; gap: 2.75rem 3.5rem;
	grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 24rem); align-items: start; }

/* Heading + the short accent rule under it. The rule is a pseudo-element so the
   heading stays one node for the block editor. */
.footer-col h4 { font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--text); margin: 0 0 2.25rem; position: relative; }
.footer-col h4::after { content: ""; position: absolute; inset-inline-start: 0; top: 2.15em;
	width: 34px; height: 2px; background: var(--accent); }

.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.footer-links a { color: var(--text); text-decoration: none; font-size: 1.0625rem; line-height: 1.4; }
.footer-links a:hover { color: var(--accent); }

/* Contact rows: icon column + text column, so a wrapped address stays aligned
   with its own first line instead of hanging under the icon. */
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.footer-contact li { display: grid; grid-template-columns: 22px 1fr; gap: .95rem; align-items: start; }
.footer-contact__i { color: var(--accent); width: 22px; height: 22px; margin-block-start: -.05em; }
.footer-contact__i svg { width: 100%; height: 100%; display: block; }
.footer-contact a { color: var(--text); text-decoration: none; font-size: 1.0625rem; line-height: 1.45; }
.footer-contact a:hover { color: var(--accent); }
.footer-addr a { cursor: pointer; }

.footer-cta { margin-block-start: 1.75rem; padding: .95rem 1.75rem; justify-content: space-between;
	min-width: 15rem; font-size: .875rem; letter-spacing: .04em; text-transform: none; font-weight: 500; }

.footer-bottom { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; justify-content: space-between; align-items: center;
	margin-block-start: clamp(2.5rem, 4vw, 3.5rem); padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.footer-legal a { color: var(--muted); text-decoration: none; }
.footer-legal a:hover { color: var(--accent); }
/* Middle dots between the legal links, drawn rather than typed so the last one
   has no trailing separator. */
.footer-legal a + a { position: relative; padding-inline-start: 1rem; }
.footer-legal a + a::before { content: "·"; position: absolute; inset-inline-start: .35rem; color: var(--muted); opacity: .6; }

/* The to-top button is fixed, so at the bottom of a page it lands inside the
   footer's bottom-right corner — which is where the comp shows it. */
@media (max-width: 860px) {
	.footer-grid { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
	.footer-cta { min-width: 0; width: 100%; }
	.footer-bottom { justify-content: flex-start; padding-inline-end: 4.5rem; }
	/* Stacked, the drawn separators wrap to the start of a line and read as
	   stray bullets — the links get their own row instead. */
	.footer-legal { gap: .35rem 1.25rem; }
	.footer-legal a + a { padding-inline-start: 0; }
	.footer-legal a + a::before { content: none; }
}

/* Back to top */
.to-top {
	position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 50;
	width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
	border: 1px solid var(--accent); background: var(--paper); color: var(--accent);
	display: grid; place-items: center;
	opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.to-top[data-show="true"] { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* -------------------------------------------------------------------------
   Правни страници (Общи условия · Поверителност · Бисквитки)
   ----------------------------------------------------------------------
   Дълъг текст, който хората четат само когато вече са ядосани или предпазливи.
   Затова: тясна мярка (~68 знака), едро междуредие и заглавия, които се хващат
   с око при превъртане. Никакви декорации — тук нищо не трябва да се „продава“.
   Таблиците се превъртат в собствен контейнер, за да не бута страницата встрани
   на телефон. */
.legaldoc { max-width: 44rem; margin-inline: auto; }
.legaldoc > * + * { margin-block-start: 1.15rem; }
.legaldoc p, .legaldoc li { line-height: 1.75; }
.legaldoc__meta {
	font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
	font-weight: 700; color: var(--muted);
}
.legaldoc__lead { font-size: 1.125rem; line-height: 1.7; }
.legaldoc h2 {
	margin-block-start: 2.75rem; margin-block-end: .35rem;
	font-size: clamp(1.2rem, 2.1vw, 1.45rem); font-weight: 700; letter-spacing: -.01em;
	scroll-margin-block-start: calc(var(--header-h) + 1rem);
}
/* Подзаглавия (3.1, 10.1 …) — въведени 31.08.2026 с новата политика за
   поверителност, първият правен текст тук с две нива. Мери се спрямо h2:
   по-малък, по-близо до предходния абзац, но с ясна междина отгоре, за да не
   се слепва с текста над него. */
.legaldoc h3 {
	margin-block-start: 1.9rem; margin-block-end: .3rem;
	font-size: clamp(1.02rem, 1.5vw, 1.1rem); font-weight: 700; letter-spacing: -.005em;
	scroll-margin-block-start: calc(var(--header-h) + 1rem);
}
.legaldoc ul { padding-inline-start: 1.25rem; }
.legaldoc ul li + li { margin-block-start: .5rem; }
.legaldoc code { font-size: .9em; padding: .1em .35em; background: rgb(127 127 127 / .14); border-radius: 3px; }

/* Идентификационните редове (ЕИК, адрес, имейл) са данни, не изброяване —
   двойка етикет/стойност, а не водещи точки. */
.legaldoc__facts { list-style: none; padding-inline-start: 0; }
.legaldoc__facts li {
	display: grid; grid-template-columns: 8.5rem 1fr; gap: .25rem 1rem;
	padding-block: .6rem; border-block-end: 1px solid rgb(127 127 127 / .22);
}
.legaldoc__facts li + li { margin-block-start: 0; }
.legaldoc__facts span {
	font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--muted); align-self: center;
}
@media (max-width: 34rem) { .legaldoc__facts li { grid-template-columns: 1fr; } }

.legaldoc__tablewrap { overflow-x: auto; }
.legaldoc__table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 32rem; }
.legaldoc__table th, .legaldoc__table td {
	text-align: start; vertical-align: top; padding: .75rem .85rem;
	border-block-end: 1px solid rgb(127 127 127 / .22);
}
.legaldoc__table th {
	font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
	border-block-end-width: 2px;
}
.legaldoc__table td { line-height: 1.6; }

@media print { .site-header, .to-top, .hero__yt { display: none; } }

/* =========================================================================
   Съгласие за външно съдържание — банерът и плочката пред картата
   Добавени 30.08.2026 заедно с inc/consent.php. Виж consent.js за логиката.
   ========================================================================= */

/* Лента долу, не модал: модалът блокира четенето, докато не бъде отговорено,
   а това превръща „Приемам“ в единствения изход и обезсмисля отказа. */
.consent {
	position: fixed; z-index: 90; inset-inline: 0; inset-block-end: 0;
	background: var(--ink); color: #fff;
	border-block-start: 3px solid var(--accent);
	box-shadow: 0 -12px 40px rgb(0 0 0 / .28);
}
.consent[hidden] { display: none; }
.consent__inner {
	/* Същата ширина и същият вътрешен отстъп като .u-shell, за да се подреди
	   по съдържанието над него, а не по своя си решетка. */
	max-width: var(--maxw); margin-inline: auto;
	padding: 1.1rem var(--gutter);
	display: grid; gap: .75rem 2rem; align-items: center;
	grid-template-columns: 1fr auto;
}
.consent__title {
	font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .2rem;
}
.consent__body {
	margin: 0; font-size: .8125rem; line-height: 1.55; color: rgb(255 255 255 / .78);
	max-width: 68ch;
}
/* Двата бутона са с еднаква големина по замисъл — вж. бележката в consent.js. */
.consent__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.consent__btn { white-space: nowrap; }
.consent .btn--outline { border-color: rgb(255 255 255 / .4); color: #fff; }
.consent .btn--outline:hover { border-color: #fff; background: rgb(255 255 255 / .08); }
.consent__more { grid-column: 1 / -1; margin: 0; font-size: .75rem; }
.consent__more a { color: rgb(255 255 255 / .6); text-decoration: underline; }
.consent__more a:hover { color: #fff; }

@media (max-width: 720px) {
	.consent__inner { grid-template-columns: 1fr; }
	/* Пълна ширина на телефон: два бутона един до друг под 360px се смачкват
	   и „Само необходимите“ се пренася на два реда, което го прави да изглежда
	   като второстепенния избор. */
	.consent__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* Плочката на мястото на незаредена карта. Абсолютна, защото стои върху
   контейнера на iframe-а и трябва да покрие точно неговата кутия. */
.cgate {
	position: absolute; inset: 0; z-index: 3;
	display: grid; place-items: center; text-align: center;
	padding: 1.5rem;
	background: var(--ink); color: #fff;
}
.cgate[hidden] { display: none; }
.cgate__inner { max-width: 34ch; }
.cgate__title { margin: 0 0 .35rem; font-size: 1rem; font-weight: 700; }
.cgate__body {
	margin: 0 0 1rem; font-size: .8125rem; line-height: 1.5;
	color: rgb(255 255 255 / .72);
}

/* Щитът срещу превъртане няма какво да пази, докато картата я няма — иначе
   стои прозрачен бутон върху плочката и поглъща клика по „Зареди картата“. */
[data-map]:not([data-loaded]) .map-band__shield,
[data-map]:not([data-loaded]) .map-wrap__shield { display: none; }

/* =========================================================================
   Телефон — разчистване по бележките на Gabe (06.09.2026)
   =========================================================================
   Накрая на файла нарочно: медия заявка не добавя специфичност, така че
   override, написан над правилото, което сменя, е мълчаливо мъртъв.
   Виж README „Five traps“, #3.
   ---------------------------------------------------------------------- */

@media (max-width: 640px) {

	/* ── Хероят: една трета екран, не цял ────────────────────────────────
	   „Kill the white space on top, let's just leave the banner to take 1/3
	   of the screen and directly you see the stats about the company.“

	   Дотук `100svh - header` пълнеше целия екран, а съдържанието в него е
	   ~240px: заглавие на два реда и едно копче. Останалото беше визуализация
	   без текст върху нея — и лентата с „21 години опит“, първото твърдение
	   на фирмата, оставаше под сгъвката при всяко отваряне.

	   `max(280px, 36svh)` е таванът отдолу: 36svh е 307px на iPhone 14 и 253px
	   на най-малките екрани, където 280px поема заглавие на два реда, бутона и
	   долното поле, за да не се смачка. */
	.hero { min-height: max(280px, 36svh); }
	.hero__inner { padding-block-end: clamp(1.5rem, 5vw, 2.5rem); }
	.hero__title { font-size: 2.125rem; margin-block-end: .75rem; }
	.hero__actions { margin-block-start: 1.5rem; }

	/* ── Кадърът „от 2005“ пада на телефон ───────────────────────────────
	   В две колони той е доказателството до текста. В една колона става
	   самостоятелна снимка между представянето и следващата секция — не
	   казва нищо ново (годината е и в „История“, и в лентата с числата) и
	   струва цял екран превъртане. Скрит със CSS, а не махнат от patterns/
	   intro.php: съдържанието на патърните е замразено в базата от
	   bin/setup.php и промяна там иска пълно пресъздаване на страницата. */
	.about__media { display: none; }

	/* ── Двете копчета на тъмната лента — на един ред ────────────────────
	   Дотук всяко заемаше цяла ширина и телефонът показваше два еднакво
	   тежки бутона един под друг. Телефонният номер е втори избор, не втора
	   покана — на един ред йерархията се вижда.

	   `.hero__actions` е същият блок и в хероя, затова стеснението виси на
	   `.cta-band` — там бутонът е сам и има цяла ширина на разположение. */
	/* `flex: 1 1 100%` — самата лента е flex и без него блокът с копчетата
	   се свива до съдържанието си, така че `flex: 1` вътре няма какво да
	   раздели и двете копчета остават слепени вляво. */
	/* ── Шевът между представянето и лентата с копчето ──────────────────
	   Gabe, 06.09.2026: „too much whitespace… above the button and prev
	   section — kill it fully“. Три полета се събираха в 108px бяло между
	   последната линия на списъка и копчето: 28px мъртво поле под списъка
	   (горе), 44px долно поле на секцията с представянето и 36px горно поле
	   на самата лента.

	   Тинтът на лентата е разделителят — той не се нуждае от бяла ивица
	   пред себе си, за да се види. Затова секцията отгоре свива своето поле
	   почти до нула и разстоянието остава едно, а не три. */
	.section:has(.about) { padding-block-end: 1.25rem; }
	.section--band { padding-block: 1.5rem; }

	.cta-band .hero__actions { flex: 1 1 100%; flex-wrap: nowrap; gap: .5rem; }
	.cta-band .hero__actions .btn {
		flex: 1 1 0;
		justify-content: center;
		padding: 1rem .5rem;
		font-size: clamp(.625rem, 2.9vw, .8125rem);
		letter-spacing: .03em;
		white-space: nowrap;
	}
}