/* =========================================================================
   Изолации — 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;
}

* { 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: clamp(.75rem, 2vw, 2rem);
}

/* 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 logo is centred
   in the block, not against the bar: with a 6:1 lockup the old bar-centring left
   it visibly high in the box. The overhang is therefore kept small (14px) so the
   logo still reads level with the nav. */
.brand {
	--logo-w: 190px;
	align-self: stretch; display: flex; align-items: flex-start;
	flex: 0 0 auto; text-decoration: none;
}
/* Asymmetric by 4px on purpose. The lockup is trimmed to its ink, but its left
   edge is the thin apex of the roof (~4px of near-empty column) while its right
   edge is the solid stem of the last И. Equal padding therefore *looks* left-
   heavy; the extra 4px on the right is what makes it read as centred. */
.brand__mark {
	background: var(--accent);
	height: 78px; padding-inline: 1.25rem 1.5rem;
	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; }
	.brand { --logo-w: 150px; }
	.brand__mark { height: 72px; padding-inline: .9rem 1.15rem; }
}
@media (max-width: 26rem) {
	.brand { --logo-w: 124px; }
	.brand__mark { padding-inline: .7rem .95rem; }
	.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__video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; z-index: 0;
}
/* Two-stop scrim: readable type without bleaching the building out */
.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%);
}
.hero__inner {
	position: relative; z-index: 2;
	max-width: var(--maxw); margin-inline: auto; width: 100%;
	padding: 0 var(--gutter) clamp(3rem, 7vw, 6rem);
}
.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: 16ch;
}
.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; }
.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); }
.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); }

.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
   ---------------------------------------------------------------------- */

.feat { display: grid; grid-template-columns: 1fr; }
/* 58/42, not half and half: the panel holds four short label/value rows and a
   name, and at 50% it ran out of things to say while the render lost width it
   could use. Stacked below 60rem — a 42% column cannot hold „бул. „Цар Борис III“
   177, София“ on one line, and the wrap put the pin on its own row. */
@media (min-width: 60rem) { .feat { grid-template-columns: 58fr 42fr; } }
.feat__media { position: relative; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 10; }
@media (min-width: 60rem) { .feat__media { aspect-ratio: auto; } }
.feat__media img { width: 100%; height: 100%; object-fit: cover; }

.feat__panel {
	background: var(--ink); color: #fff;
	padding: clamp(1.75rem, 3.4vw, 3rem);
	display: flex; flex-direction: column; justify-content: center;
}
.feat__panel .u-eyebrow { color: var(--accent-ink); }
.feat__panel .u-eyebrow::before { background: var(--accent-ink); }
.feat__name {
	margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 700;
	letter-spacing: -.025em; line-height: 1.15;
}
.feat__place {
	display: flex; align-items: center; gap: .5rem; margin: .8rem 0 0;
	font-size: .9375rem; color: rgb(255 255 255 / .8);
}
.feat__place svg { flex: 0 0 auto; display: block; color: var(--accent-ink); }

/* 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. */
.feat__specs {
	margin: clamp(1.5rem, 2.6vw, 2rem) 0 0; padding: 0;
	border-block-start: 1px solid rgb(255 255 255 / .16);
}
.feat__spec {
	display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 1rem;
	align-items: baseline; padding-block: .85rem;
	border-block-end: 1px solid rgb(255 255 255 / .16);
}
.feat__spec dt {
	font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	color: rgb(255 255 255 / .6);
}
.feat__spec dd { margin: 0; font-size: .9375rem; font-weight: 700; text-align: end; overflow-wrap: anywhere; }
.feat__spec dd a { color: #fff; text-decoration: none; border-block-end: 1px solid var(--accent-ink); padding-block-end: .1rem; }
.feat__spec dd a:hover { color: var(--accent-ink); }

/* -------------------------------------------------------------------------
   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 */
.services { display: grid; gap: 1px; background: var(--line); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.svc { 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; 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 */
.variants { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); margin-block-end: clamp(2rem, 4vw, 3rem); }
.variants a {
	flex: 1 1 auto; text-align: center; background: var(--paper-alt); color: var(--muted);
	text-decoration: none; padding: .95rem 1.15rem; white-space: nowrap;
	font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.variants a:hover { background: var(--line); color: var(--text); }
.variants a[aria-current="page"] { background: var(--accent); color: #fff; }

/* 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(). */
.pfilter { margin-block-end: clamp(1.75rem, 3.5vw, 3rem); }
.pfilter[hidden] { display: none; }
/* 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; }
.pfilter__tabs { display: flex; flex-wrap: wrap; }
.pfilter__tabs button {
	font: inherit; cursor: pointer; display: inline-flex; align-items: baseline; gap: .5rem;
	font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
/* The count rides at the end of every tab; muted so the label still leads. */
.pfilter__n { font-size: .6875rem; font-weight: 700; opacity: .55; }
.pfilter__empty { margin: 1.5rem 0 0; color: var(--muted); font-size: 1rem; }

/* Boxed — V6 */
.pfilter--chips .pfilter__tabs { gap: .5rem; }
.pfilter--chips .pfilter__tabs button {
	border: 1px solid var(--line); background: var(--paper); color: var(--text);
	padding: .7rem 1.2rem;
}
.pfilter--chips .pfilter__tabs button:hover { border-color: var(--ink); }
.pfilter--chips .pfilter__tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Underlined — V7, V9 */
.pfilter--tabs .pfilter__tabs { gap: clamp(1.25rem, 3vw, 2.5rem); border-block-end: 1px solid var(--line); }
.pfilter--tabs .pfilter__tabs button {
	border: 0; background: none; color: var(--muted); padding: 0 0 1rem;
	border-block-end: 2px solid transparent; margin-block-end: -1px;
}
.pfilter--tabs .pfilter__tabs button:hover { color: var(--text); }
.pfilter--tabs .pfilter__tabs button[aria-pressed="true"] { color: var(--text); border-block-end-color: var(--accent); }
.pfilter--tabs .pfilter__tabs button[aria-pressed="true"] .pfilter__n { color: var(--accent); opacity: 1; }

/* Dark bar with search — V8 */
.pfilter--bar {
	background: var(--ink); color: #fff;
	display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 1rem;
	padding-inline: clamp(1rem, 2vw, 1.5rem);
}
.pfilter--bar .pfilter__tabs { gap: clamp(.75rem, 2vw, 2rem); }
.pfilter--bar .pfilter__tabs button {
	border: 0; background: none; color: rgb(255 255 255 / .62); padding: 1.35rem 0;
	border-block-end: 3px solid transparent;
}
.pfilter--bar .pfilter__tabs button:hover { color: #fff; }
/* accent-ink, not accent: the brand red sits at ~2.2:1 on --ink and goes muddy. */
.pfilter--bar .pfilter__tabs button[aria-pressed="true"] { color: #fff; border-block-end-color: var(--accent-ink); }
.pfilter__search { display: flex; align-items: center; gap: .65rem; flex: 1 1 16rem; max-width: 26rem; color: rgb(255 255 255 / .55); }
.pfilter__search svg { flex: 0 0 auto; display: block; }
.pfilter__search input {
	flex: 1 1 auto; min-width: 0; font: inherit; font-size: .9375rem;
	background: transparent; border: 0; border-block-end: 1px solid rgb(255 255 255 / .22);
	color: #fff; padding: .55rem 0; border-radius: 0;
}
.pfilter__search input::placeholder { color: rgb(255 255 255 / .45); opacity: 1; }
.pfilter__search input:focus { outline: 0; border-block-end-color: var(--accent-ink); }
.pfilter--bar .pfilter__empty { color: rgb(255 255 255 / .7); padding-block-end: 1.25rem; }
/* search inputs get a UA clear button that sits on the dark bar as a grey blob */
.pfilter__search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

/* 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 ---------------------------------------- */
.hstack { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 42rem) { .hstack { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .hstack { grid-template-columns: repeat(3, 1fr); } }
.hcard {
	position: relative; overflow: hidden; display: block; text-decoration: none;
	color: #fff; background: var(--ink); min-height: 21rem;
}
/* The lead card takes the whole row and goes cinematic. */
.hcard--lead { grid-column: 1 / -1; min-height: clamp(20rem, 32vw, 26rem); }
.hcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
	transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.hcard:hover .hcard__img { transform: scale(1.04); }
.hcard .ph { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 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. */
.hcard::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, rgb(10 11 13 / .88) 2%, rgb(10 11 13 / .35) 48%, rgb(10 11 13 / .05) 78%);
}
@media (min-width: 60rem) {
	.hcard--lead::after {
		background: linear-gradient(to right, rgb(10 11 13 / .92) 12%, rgb(10 11 13 / .55) 42%, rgb(10 11 13 / 0) 78%);
	}
}
.hcard__body {
	position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start;
	justify-content: flex-end; height: 100%; padding: clamp(1.5rem, 2.5vw, 2.25rem);
}
@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. */
	.hcard--lead .hcard__body { justify-content: center; max-width: 62ch; padding-inline: clamp(2rem, 4vw, 3.5rem); }
	.hcard--lead .hcard__name { max-width: 18ch; }
}
.hcard__tag { display: block; margin-block-end: 1rem; }
.hcard__name {
	display: block; font-weight: 800; letter-spacing: -.02em; line-height: 1.12;
	font-size: clamp(1.25rem, 2vw, 1.625rem); text-transform: uppercase;
}
.hcard--lead .hcard__name { font-size: clamp(1.625rem, 3.4vw, 2.75rem); }
.hcard__loc {
	display: flex; align-items: center; gap: .5rem; margin-block-start: .7rem;
	font-size: .9375rem; color: rgb(255 255 255 / .82);
}
.hcard__loc svg { flex: 0 0 auto; display: block; }
.hcard__cta {
	display: flex; align-items: center; gap: .9rem; margin-block-start: 1.35rem;
	font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
/* The rule that grows out of the label on hover — the arrow is drawn, not typed,
   so it can animate its own length. */
.hcard__cta i { display: block; width: 2.75rem; height: 1px; background: currentColor; transition: width .3s ease; }
.hcard:hover .hcard__cta i { width: 4.5rem; }
@media (prefers-reduced-motion: reduce) {
	.hcard__img, .hcard__cta i { transition: none; }
}

/* ---- V7 · zigzag ------------------------------------------------------ */
.zz { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.zz__row { position: relative; display: grid; gap: 0; }
@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. */
	.zz { gap: 0; }
	.zz__row { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); align-items: stretch; }
	.zz__row--flip .zz__media { order: 2; }
	.zz__body { margin-inline-start: -4rem; }
	.zz__row--flip .zz__body { margin-inline-start: 0; margin-inline-end: -4rem; }
}
.zz__media { position: relative; z-index: 0; overflow: hidden; aspect-ratio: 3 / 2; }
/* Must come after the rule above, not inside the block before it: a media query
   adds no specificity, so the later declaration wins regardless of viewport.
   3:2 renders at half-shell width made every row ~450px tall and left the text
   floating in an ocean of white; letterboxing the crop takes ~1.5k px off. */
@media (min-width: 64rem) { .zz__media { aspect-ratio: 16 / 9; } }
.zz__media img, .zz__media .ph { width: 100%; height: 100%; object-fit: cover;
	transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.zz__row:hover .zz__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .zz__media img { transition: none; } }
/* 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. */
.zz__body {
	position: relative; z-index: 2; background: var(--paper);
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(1.5rem, 3vw, 3rem) clamp(0rem, 3vw, 3rem);
}
@media (min-width: 64rem) { .zz__body { padding-inline: clamp(2rem, 3.5vw, 3.5rem); } }
.zz__status {
	margin: 0 0 .9rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--sale);
}
.zz__status--build { color: var(--build); }
.zz__status--done { color: var(--muted); }
.zz__name {
	margin: 0; font-size: clamp(1.375rem, 2.8vw, 2.125rem); font-weight: 800;
	letter-spacing: -.025em; text-transform: uppercase;
}
.zz__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: .65rem;
	margin: .9rem 0 0; color: var(--muted); font-size: .9375rem;
}
.zz__meta i { display: block; width: 1px; height: 1em; background: var(--line); }
.zz__place { display: inline-flex; align-items: center; gap: .45rem; }
.zz__place svg { flex: 0 0 auto; display: block; }
.zz__desc { margin: 1.1rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 46ch; }
.zz__cta {
	display: inline-flex; align-items: center; gap: .8rem; margin-block-start: 1.5rem;
	text-decoration: none; color: var(--text);
	font-size: .875rem; font-weight: 700; letter-spacing: .04em;
	border-block-end: 1px solid var(--ink); padding-block-end: .5rem;
}
.zz__cta svg { display: block; color: var(--accent); transition: transform .25s ease; }
.zz__cta:hover { color: var(--accent); border-block-end-color: var(--accent); }
.zz__cta:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .zz__cta svg { transition: none; } }

/* ---- V8 · searchable list -------------------------------------------- */
.lrows { display: grid; }
.lrow {
	display: grid; align-items: center; gap: clamp(1rem, 2vw, 1.75rem);
	grid-template-columns: auto 1fr; padding: 1rem;
	text-decoration: none; color: inherit;
	border-block-end: 1px solid var(--line);
	transition: box-shadow .2s ease, transform .2s ease;
}
/* Narrow: thumb + body, with the stat column dropping to its own full-width band
   underneath. Wide: four columns, figures sitting between the name and the arrow. */
/* The stat track is a fixed width, not `auto`. Each row is its own grid, so an
   auto track sizes to that row's own content — rows carrying two figures then
   start further right than rows carrying three, and the column stops being a
   column. 20rem holds three 5.5rem items plus their gaps. */
@media (min-width: 62rem) { .lrow { grid-template-columns: auto minmax(0, 1fr) 20rem auto; } }
/* 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. */
.lrow:hover, .lrow:focus-visible {
	background: var(--paper); border-block-end-color: transparent;
	box-shadow: 0 10px 34px rgb(16 17 20 / .13); position: relative; z-index: 1;
}
@media (prefers-reduced-motion: reduce) { .lrow { transition: none; } }
.lrow__thumb { display: block; width: clamp(88px, 14vw, 170px); }
.lrow__thumb img, .lrow__thumb .ph { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; height: auto; }
.lrow__thumb .ph { display: grid; }
.lrow__body { display: block; min-width: 0; }
.lrow__status {
	display: flex; align-items: center; gap: .5rem;
	font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--sale);
}
.lrow__dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lrow__status:has(.lrow__dot--build) { color: var(--build); }
.lrow__status:has(.lrow__dot--done) { color: var(--muted); }
.lrow__name {
	display: block; margin-block-start: .45rem;
	font-size: clamp(1.0625rem, 1.8vw, 1.375rem); font-weight: 800;
	letter-spacing: -.02em; text-transform: uppercase; line-height: 1.15;
}
.lrow__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
	margin-block-start: .5rem; color: var(--muted); font-size: .875rem;
}
.lrow__meta > i { display: block; width: 1px; height: 1em; background: var(--line); }
.lrow__place { display: inline-flex; align-items: center; gap: .4rem; }
.lrow__place svg { flex: 0 0 auto; display: block; }
.lrow__act { font-weight: 700; color: var(--text); }
/* 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. */
.lrow__go { display: none; color: var(--accent); padding-inline-end: .75rem; }
@media (min-width: 62rem) { .lrow__go { display: block; } }

/* 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; }
}
.lrow__go svg { display: block; transition: transform .25s ease; }
.lrow:hover .lrow__go svg { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .lrow__go svg { transition: none; } }

/* ---- 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. */
.gagrid { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); grid-template-columns: 1fr; }
.ga { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--paper); }
.ga__media { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.ga__media img, .ga__media .ph { width: 100%; height: 100%; object-fit: cover;
	transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.ga:hover .ga__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .ga__media img { transition: none; } }
.ga__cap { display: block; padding: 1.1rem .25rem 0; }
.ga__status {
	display: flex; align-items: center; gap: .5rem;
	font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--sale);
}
.ga__dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ga__status:has(.ga__dot--build) { color: var(--build); }
.ga__status:has(.ga__dot--done) { color: var(--muted); }
.ga__name {
	display: block; margin-block-start: .5rem;
	font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 800;
	letter-spacing: -.02em; text-transform: uppercase; line-height: 1.18;
}
.ga__loc {
	display: flex; align-items: center; gap: .4rem; margin-block-start: .4rem;
	color: var(--muted); font-size: .875rem;
}
.ga__loc svg { flex: 0 0 auto; display: block; }

/* 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) {
	.gagrid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 7rem; grid-auto-flow: dense; }
	/* 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. */
	.ga { grid-column: span 1; grid-row: span 2; }
	.ga--hero { grid-column: span 2; grid-row: span 4; }
	.ga--wide, .ga--half { grid-column: span 2; grid-row: span 2; }
	/* The media takes whatever the caption leaves, so tiles of different row
	   spans still bottom out on the same caption height. */
	.ga__media { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
	.ga__cap { flex: 0 0 auto; }
}

.ga__foot { margin-block-start: clamp(2.5rem, 5vw, 4rem); text-align: center; }

/* The hairline between location and type is a flex item, so when the meta line
   wraps it can land first on the new line as a bar hanging in space. Narrow
   screens drop it and let the wrap itself be the separator.
   Placed here, after the V7 and V8 blocks: same specificity as the rules it
   overrides, so it only wins by coming later in the file. */
@media (max-width: 40rem) {
	.zz__meta > i, .lrow__meta > i { display: none; }
}

/* -------------------------------------------------------------------------
   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. */
.tst__stars { display: flex; gap: .28rem; margin-block-start: auto; padding-block-start: 1.35rem; }
.tst__stars svg { display: block; width: 17px; height: 17px; fill: var(--line); }
/* 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__stars svg.is-on { fill: var(--build); }

.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; }
.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 */
.map-band { position: relative; min-height: clamp(20rem, 32vw, 26rem); background: var(--paper-alt); }
.map-band iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }

/* 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;
}
.map-band__overlay .u-shell { width: 100%; }
.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; }
.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; }

/* 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); border-block-start: 1px solid var(--line); padding-block: clamp(2.5rem, 4.2vw, 3.5rem) 1.75rem; }
.footer-grid { display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.footer-grid h4 { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.15rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer-grid li { position: relative; padding-inline-start: 1.1rem; }
.footer-grid li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.footer-grid a { color: var(--text); text-decoration: none; font-size: 1rem; }
.footer-grid a:hover { color: var(--accent); text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
	margin-block-start: clamp(2rem, 3.4vw, 2.75rem); padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--line); font-size: .875rem; color: var(--muted); }

/* Back to top */
.to-top {
	position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 50;
	width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--accent); color: #fff; 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-dk); }

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