/* GabionX — /constructions: premium architectural page in the Homepage design
   system. Video hero → centred VS comparison (light) → pinned exploded gabion →
   3-column solutions catalog with per-category project popups → CTA.
   Same tokens, buttons, typography, header/footer as everywhere. */

/* the page runs LIGHT like the homepage — the catalog and the footer are
   the only dark blocks, so they read as the deliberate focus */
.gx-page--constructions { background: var(--bg); }

/* ============================ 01 · HERO ============================ */

.cxr-hero {
	position: relative;
	/* the page hero sits at ~70vh — the catalog breathes right below the fold */
	height: 70vh;
	min-height: 520px;
	background: var(--charcoal);
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

/* the temporary film loops full-bleed under a ~50% wash */
.cxr-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* dot-grid over the video: restrained cinematic / retro-screen texture —
   1px warm-black dots on a 4px grid, depth without hiding the footage */
.cxr-hero__grain {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-image: radial-gradient(rgba(10, 8, 6, .55) 1px, transparent 1.4px);
	background-size: 4px 4px;
}

/* above the dots: a soft dark gradient for copy readability */
.cxr-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	/* darker on the left where the copy sits (eyebrow was barely legible on the
	   muddy poster) + a bottom vignette to ground the headline/CTA */
	background:
		linear-gradient(78deg, rgba(10, 12, 15, .86) 0%, rgba(10, 12, 15, .54) 46%, rgba(10, 12, 15, .2) 100%),
		linear-gradient(to top, rgba(10, 12, 15, .4) 0%, rgba(10, 12, 15, 0) 46%);
}

/* WCAG 2.2.2 pause control — injected by video-lazy.js only where the loop
   actually attaches (desktop); on phones the poster is static, so no button */
.gx-video-toggle {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 5;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--white-24);
	background: rgba(12, 17, 24, .5);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--white);
	cursor: pointer;
	transition: background-color .3s var(--ease), transform .3s var(--ease);
}

.gx-video-toggle:hover { background: rgba(12, 17, 24, .72); transform: translateY(-1px); }
.gx-video-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gx-video-toggle[data-state="playing"] .gx-video-toggle__play,
.gx-video-toggle[data-state="paused"] .gx-video-toggle__pause { display: none; }

/* transparent navigation floats above the film (desktop; mobile header is
   already fixed site-wide) — nav.js flips it solid after scrolling */
@media (min-width: 769px) {
	.gx-page--constructions .gx-hero__head {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 6;
	}
}

.cxr-hero__content {
	position: relative;
	z-index: 4;
	max-width: 780px;
	padding: 0 var(--section-pad-x);
}

.cxr-hero.fx-armed .gx-hero__eyebrow::after { transform: scaleX(0); }

.cxr-hero.is-in .gx-hero__eyebrow::after {
	transform: scaleX(1);
	transition: transform .9s var(--ease) 1.15s;
}

/* the H1 is the shared .gx-h1--display (front-page font) — only rhythm here */
.cxr-hero__h1 {
	margin: 0 0 22px;
	font-size: clamp(42px, 5.2vw, 78px);
	text-wrap: balance;
}

.cxr-hero__sub {
	font: 400 clamp(16px, 1.4vw, 19px)/1.55 var(--font-sans);
	color: var(--white-74, rgba(255, 255, 255, .78));
	margin: 0 0 34px;
	max-width: 46ch;
}

.cxr-hero__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* ============ 02 · VS ПОРІВНЯННЯ — one centred composition (light) ============
   The two photos flank a vs coin on the axis; the comparison itself reads as
   centred rows underneath, criterion on the same axis. Nothing hugs the outer
   edges anymore — the section breathes. */

.vs2 { text-align: center; }

.vs2__head {
	max-width: 720px;
	margin: 0 auto clamp(48px, 6vh, 76px);
}

.vs2 .gx-eyebrow { justify-content: center; color: var(--green-ink); }

.vs2__title {
	font: 300 clamp(34px, 4.6vw, 58px)/1.06 var(--font-serif);
	letter-spacing: -.015em;
	color: var(--ink);
	margin: 0 0 18px;
	text-wrap: balance;
}

.vs2__sub {
	margin: 0;
	font: 400 clamp(15px, 1.2vw, 17px)/1.6 var(--font-sans);
	color: var(--ink-70);
	text-wrap: balance;
}

/* the duel: photo · vs · photo.
	 The figures go display:contents so the images share ONE grid row (identical
	 height, whatever their native ratio) and the captions share the next — which
	 lets the coin sit as a real grid item, perfectly centred on the image band
	 instead of being eyeballed with a magic offset. */
.vs2__duel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	column-gap: 0; /* the two photos touch — the coin welds the seam into one composition */
	row-gap: 18px;
	align-items: start;
	max-width: 1180px;
	margin: 0 auto clamp(52px, 7vh, 88px);
}

.vs2__side {
	display: contents;
	margin: 0;
}

.vs2__side--plain img { grid-column: 1; grid-row: 1; }
.vs2__side--plain .vs2__tag { grid-column: 1; grid-row: 2; }
.vs2__side--gx img { grid-column: 2; grid-row: 1; }
.vs2__side--gx .vs2__tag { grid-column: 2; grid-row: 2; }

.vs2__side img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-md);
	/* a border in the section bg colour: invisible on the outer edges, it opens a
	   clean seam between the two touching photos for the coin to bridge */
	border: 7px solid var(--bg);
	display: block;
	filter: grayscale(1);
	opacity: .82;
	transition: filter .6s var(--ease), opacity .6s var(--ease);
}

/* the ordinary fence stays desaturated; GabionX carries the colour — the
	 hierarchy is visible before a single word is read */
.vs2__side--gx img {
	filter: none;
	opacity: 1;
}

/* the ordinary fence «ages» on arrival: a beat in colour, then drains to grey —
   the section's thesis shown, not told. Ends exactly at the base grayscale state. */
.vs2__duel.is-in .vs2__side--plain img {
	animation: vs2-age 2.4s ease-in-out .9s both;
}

@keyframes vs2-age {
	from { filter: grayscale(0); opacity: 1; }
	to { filter: grayscale(1); opacity: .82; }
}

/* after the pop the coin keeps breathing — shadow only, GSAP owns its transform */
.vs2__duel.is-in .vs2__badge,
.vs2__cards.is-in .vs2__badge {
	animation: vs2-breathe 6s ease-in-out 2.2s infinite;
}

@keyframes vs2-breathe {
	0%, 100% { box-shadow: 0 8px 26px rgba(33, 30, 24, .18); }
	50% { box-shadow: 0 12px 38px rgba(33, 30, 24, .3); }
}

.vs2__tag {
	font: 600 14px/1.3 var(--font-sans);
	letter-spacing: .01em;
	color: var(--ink-58);
}

.vs2__tag--gx { color: var(--ink); }

/* the coin IS the axis: a grid item in the middle column, centred on the images */
.vs2__badge {
	grid-column: 1 / 3; /* span both columns so justify-self:center lands exactly on the seam */
	grid-row: 1;
	align-self: center;
	justify-self: center;
	z-index: 3;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--green-cta);
	border: 4px solid var(--bg); /* page-bg ring detaches the coin from the two photos */
	color: var(--white);
	display: grid;
	place-items: center;
	font: 700 15px/1 var(--font-sans);
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 0 8px 26px rgba(33, 30, 24, .18);
	pointer-events: none;
}

/* centred comparison rows — criterion on the axis, verdicts either side */
.vs2__rows {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

.vs2__row {
	position: relative;
	display: grid;
	grid-template-columns: 1fr minmax(150px, 210px) 1fr;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	padding: clamp(16px, 2.2vh, 24px) 0;
	border-top: 1px solid var(--ink-10);
}

.vs2__row:last-child { border-bottom: 1px solid var(--ink-10); }

/* dividers draw outward from the comparison axis. Armed only when JS+motion run:
   the borders go transparent and pseudo-lines take their exact place, growing
   from the centre with a top-to-bottom stagger once the block reveals. */
.vs2__rows.fx-armed .vs2__row { border-top-color: transparent; }
.vs2__rows.fx-armed .vs2__row:last-child { border-bottom-color: transparent; }

.vs2__rows.fx-armed .vs2__row::before,
.vs2__rows.fx-armed .vs2__row:last-child::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--ink-10);
	transform: scaleX(0);
}

.vs2__rows.fx-armed .vs2__row::before { top: -1px; }
.vs2__rows.fx-armed .vs2__row:last-child::after { bottom: -1px; }

.vs2__rows.is-in .vs2__row::before,
.vs2__rows.is-in .vs2__row:last-child::after {
	transform: scaleX(1);
	transition: transform .9s var(--ease);
}

.vs2__rows.is-in .vs2__row:nth-child(1)::before { transition-delay: .1s; }
.vs2__rows.is-in .vs2__row:nth-child(2)::before { transition-delay: .18s; }
.vs2__rows.is-in .vs2__row:nth-child(3)::before { transition-delay: .26s; }
.vs2__rows.is-in .vs2__row:nth-child(4)::before { transition-delay: .34s; }
.vs2__rows.is-in .vs2__row:nth-child(5)::before { transition-delay: .42s; }
.vs2__rows.is-in .vs2__row:last-child::after { transition-delay: .5s; }

.vs2__crit {
	font: 500 11px/1.3 var(--font-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-58);
}

.vs2__cell {
	position: relative;
	font: 400 14.5px/1.5 var(--font-sans);
	text-wrap: balance;
}

.vs2__cell--x {
	text-align: right;
	padding-right: 28px;
	color: var(--ink-58);
}

.vs2__cell--v {
	text-align: left;
	padding-left: 28px;
	color: var(--ink);
	font-weight: 500;
}

/* the ✕/✓ SVG marks sit on the inner edge of each cell, pointing at the axis */
.vs2__mk {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
}

.vs2__cell--v .vs2__mk { left: 0; color: var(--green-ink); }
.vs2__cell--x .vs2__mk { right: 0; color: var(--ink-58); }

/* ============ 03 · АНАТОМІЯ (.xph): мастер-рендер + підписи на скролі ============
   The homepage's warm void, the assembled render as the hero, four keynote-style
   captions (green dot + hairline) staggering in via the page's [data-fx] reveals.
   No pin, no timeline — calm and light. */

.xph { background: #F8F6F2; position: relative; overflow: hidden; }

/* blueprint grid backdrop (same idiom as the contacts board / homepage .hw) */
.xph__gridbg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 0 0, rgba(33, 30, 24, .12) 1.7px, transparent 2.2px),
		linear-gradient(to bottom, rgba(33, 30, 24, .022) 1px, transparent 1px),
		linear-gradient(to right, rgba(33, 30, 24, .022) 1px, transparent 1px);
	background-size: 72px 72px, 72px 72px, 72px 72px;
	-webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%);
	mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%);
	/* imperceptible diagonal drift — the same living-blueprint language as the home .hw
	   (one 72px tile per 90s; the global reduced-motion kill in base.css stops it) */
	animation: xph-drift 90s linear infinite;
}

@keyframes xph-drift {
	to { background-position: 72px 72px, 72px 72px, 72px 72px; }
}

/* content rides above the grid */
.xph__head, .xph__scene { position: relative; z-index: 1; }

.xph__head {
	max-width: 560px;
	margin: 0 auto clamp(40px, 6vh, 64px);
	text-align: center;
}

.xph .gx-eyebrow { justify-content: center; color: var(--green-ink); }

.xph__title {
	font: 300 clamp(32px, 4vw, 52px)/1.08 var(--font-serif);
	letter-spacing: -.015em;
	color: var(--ink);
	margin: 0 0 14px;
	text-wrap: balance;
}

.xph__lead {
	font: 400 15px/1.6 var(--font-sans);
	color: var(--ink-58);
	margin: 0;
}

/* the scene: render centred, captions live on its sides */
.xph__scene {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
}

.xph__img {
	display: block;
	width: min(660px, 100%);
	height: auto;
	margin: 0 auto;
}

.xph__notes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.xph__note {
	position: absolute;
	width: min(230px, 19vw);
	padding-left: 21px;
}

/* aimed at what the photo actually shows */
.xph__note--mesh { left: 0; top: 12%; text-align: right; padding-left: 0; padding-right: 21px; }
.xph__note--granite { left: 0; top: 52%; text-align: right; padding-left: 0; padding-right: 21px; }
.xph__note--box { right: 0; top: 22%; }
.xph__note--foundation { right: 0; top: 68%; }

.xph__dot {
	position: absolute;
	top: 5px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
}

.xph__note--mesh .xph__dot, .xph__note--granite .xph__dot { right: 0; }
.xph__note--box .xph__dot, .xph__note--foundation .xph__dot { left: 0; }

/* hairline from the dot toward the render */
.xph__note::before {
	content: '';
	position: absolute;
	top: 8px;
	height: 1px;
	background: var(--ink-16);
	width: var(--line, 70px);
}

.xph__note--mesh::before, .xph__note--granite::before { left: 100%; margin-left: 6px; }
.xph__note--box::before, .xph__note--foundation::before { right: 100%; margin-right: 6px; }

.xph__note--mesh { --line: 96px; }
.xph__note--granite { --line: 120px; }
.xph__note--box { --line: 84px; }
.xph__note--foundation { --line: 110px; }

/* keynote entrance: the dot pops, then the hairline draws from the dot toward
   the render (initFx arms the start state and mirrors its reveal with .is-in,
   respecting each note's own data-fx-delay). Static without JS/motion. */
.xph__note.fx-armed .xph__dot { transform: scale(0); }
.xph__note.fx-armed::before { transform: scaleX(0); }

/* origin = the dot's side, so the line grows away from it toward the image */
.xph__note--mesh::before, .xph__note--granite::before { transform-origin: left center; }
.xph__note--box::before, .xph__note--foundation::before { transform-origin: right center; }

.xph__note.is-in .xph__dot {
	transform: scale(1);
	transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) .1s;
}

.xph__note.is-in::before {
	transform: scaleX(1);
	transition: transform .6s var(--ease) .28s;
}

.xph__note b {
	display: block;
	font: 600 14px/1.3 var(--font-sans);
	color: var(--ink);
	margin-bottom: 5px;
}

.xph__note span:not(.xph__dot) {
	font: 400 12.5px/1.55 var(--font-sans);
	color: var(--ink-58);
}

/* ---------- ≤1040: captions become a tidy 2×2 grid under the render ---------- */
@media (max-width: 1040px) {
	.xph__note,
	.xph__note--mesh, .xph__note--granite, .xph__note--box, .xph__note--foundation {
		position: static;
		width: auto;
		text-align: left;
		padding: 0 0 0 20px;
	}
	.xph__note--mesh .xph__dot, .xph__note--granite .xph__dot { right: auto; left: 0; }
	.xph__note::before { display: none; }
	.xph__notes {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 22px 26px;
		max-width: 640px;
		margin: 34px auto 0;
	}
}

@media (max-width: 560px) {
	.xph__notes { grid-template-columns: 1fr; max-width: 420px; }
}

/* ==================== 04 · КАТАЛОГ РІШЕНЬ (3 колонки) ==================== */

/* the one dark block on the page (plus the footer): full-bleed island that
	 makes the catalog the visual focus, exactly like the homepage's dark bands */
.c3 { border-top: none; }

.c3 .gx-eyebrow { color: var(--green-ink); }

.c3__title {
	font: 300 clamp(34px, 4.6vw, 58px)/1.06 var(--font-serif);
	letter-spacing: -.015em;
	color: var(--ink);
	margin: 0 0 48px;
}

.c3__grid {
	display: grid;
	grid-template-columns: 230px 1.45fr 1fr;
	gap: clamp(24px, 3vw, 54px);
	align-items: start;
}

/* left: category navigation inside one bordered panel (mockup) */
.c3__nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px;
	border: 1px solid var(--ink-10);
	border-radius: var(--radius-md);
}

.c3__nav button {
	all: unset;
	box-sizing: border-box;
	position: relative;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px 14px 20px;
	border-radius: var(--radius-sm);
	color: var(--ink-58);
	transition: background-color .3s var(--ease), color .3s var(--ease);
}

.c3__nav button:focus-visible { outline: 2px solid var(--green); }

/* green accent bar of the active row */
.c3__nav button::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%) scaleY(0);
	width: 3px;
	height: 22px;
	border-radius: var(--radius-full);
	background: var(--green);
	transition: transform .3s var(--ease);
}

.c3__nav button.is-active::before { transform: translateY(-50%) scaleY(1); }

.c3__nav .c3__nav-num {
	font: 600 12px/1 var(--font-sans);
	color: var(--ink-40);
	transition: color .3s var(--ease);
}

.c3__nav .c3__nav-label { flex: 1; font: 500 14.5px/1.3 var(--font-sans); }

.c3__nav .c3__nav-arrow {
	color: var(--green-ink);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.c3__nav button:hover { background: var(--ink-10); color: var(--ink); }

.c3__nav button.is-active {
	background: var(--green-wash);
	color: var(--ink);
}

.c3__nav button.is-active .c3__nav-num { color: var(--green-ink); }

.c3__nav button.is-active .c3__nav-arrow { opacity: 1; transform: none; }

/* center: one large image + thumbnails */
.c3__photo {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--cream);
}

/* P7 — magazine location credit; set by JS when a project thumb is active,
   cleared (→ faded out) for the plain category render. 2–3 words (the shot's loc). */
.c3__cap {
	position: absolute;
	left: 14px;
	bottom: 14px;
	max-width: calc(100% - 28px);
	padding: 6px 13px;
	border-radius: var(--radius-full);
	background: rgba(12, 17, 24, .6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--cream);
	font: 600 12px/1 var(--font-sans);
	letter-spacing: .04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.c3__cap:not(:empty) {
	opacity: 1;
	transform: none;
}

.c3__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Ken Burns: the active photo breathes for ~9s (the `scale` property stays out
   of GSAP's transform lane, so the opacity crossfade never fights it); JS
   re-adds .is-kb on every category/thumbnail swap to restart the drift */
.c3__photo img.is-kb {
	animation: c3-kb 9s ease-out both;
}

@keyframes c3-kb {
	to { scale: 1.045; }
}

/* the thumbnails are the category's realised-project slider: a scroll-snap
   strip of up to 10, arrows overlaying the edges (touch-scroll on mobile) */
.c3__thumbs-wrap {
	position: relative;
	margin-top: 12px;
}

.c3__thumbs {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
}

.c3__thumbs::-webkit-scrollbar { display: none; }

.c3__thumbs button {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	flex: 0 0 auto;
	width: clamp(72px, 20%, 92px);
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 1.5px solid var(--ink-10);
	opacity: .62;
	scroll-snap-align: start;
	transition: opacity .3s var(--ease), border-color .3s var(--ease);
}

.c3__thumbs button:hover { opacity: 1; }

.c3__thumbs button.is-active {
	opacity: 1;
	border-color: var(--ink);
}

.c3__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.c3__thumbs-arrow {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	top: calc(50% - 1px);
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--ink-16);
	color: var(--ink);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(33, 30, 24, .16);
	transition: background-color .3s var(--ease), color .3s var(--ease);
}

.c3__thumbs-arrow--prev { left: -8px; }
.c3__thumbs-arrow--next { right: -8px; }
.c3__thumbs-arrow:hover { background: #fff; color: var(--green-ink); }
.c3__thumbs-arrow:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }

/* right: number, title, description, advantages, price, actions */
.c3__num {
	display: block;
	font: 600 15px/1 var(--font-sans);
	letter-spacing: .08em;
	color: var(--green-ink);
	margin-bottom: 12px;
}

.c3__name {
	font: 400 clamp(24px, 2.2vw, 32px)/1.2 var(--font-serif);
	color: var(--ink);
	margin: 0 0 12px;
}

.c3__desc {
	font: 400 14px/1.6 var(--font-sans);
	color: var(--ink-58);
	margin: 0 0 20px;
	max-width: 40ch;
}

/* advantages: circled dot icon + line (mockup) */
.c3__adv {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.c3__adv li {
	position: relative;
	font: 400 13.5px/1.5 var(--font-sans);
	color: var(--ink-70);
	padding-left: 34px;
}

.c3__adv li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--ink-16);
}

.c3__adv li::after {
	content: '';
	position: absolute;
	left: 7px;
	top: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
}

.c3__price-cap {
	display: block;
	font: 400 13px/1 var(--font-sans);
	color: var(--ink-58);
	margin-bottom: 8px;
}

.c3__price {
	display: block;
	font: 700 clamp(24px, 2.2vw, 30px)/1.1 var(--font-sans);
	letter-spacing: -.01em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	margin-bottom: 24px;
}

.c3__price--sm { font-size: 17px; font-weight: 600; color: var(--ink-70); }

.c3__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 320px;
}

.c3__actions .gx-btn { justify-content: center; }

/* secondary «Розрахувати вартість» — gx-btn--outline is white-on-dark, so the
   calc action gets its own ink treatment for the light catalog band */
.c3__calc {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 15px 22px;
	border-radius: var(--radius-full);
	border: 1px solid var(--ink-16);
	color: var(--ink);
	font: 600 13.5px/1 var(--font-sans);
	cursor: pointer;
	transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}

.c3__calc svg { transition: transform .3s var(--ease); }
.c3__calc:hover { border-color: var(--green); background: var(--green-wash); color: var(--green-ink); }
.c3__calc:hover svg { transform: scale(1.06); }
.c3__calc:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }

.c3__info-col { min-width: 0; }

.c3__thumbs button:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 3px; }

/* the whole pane crossfades on category switch */
.c3__media, .c3__info-col { transition: opacity .3s var(--ease), transform .4s var(--ease); }

.c3__grid.is-switching .c3__media,
.c3__grid.is-switching .c3__info-col { opacity: 0; transform: translateY(8px); }

/* ---------- F7: section CTAs (close the VS + anatomy sections) ---------- */
.sec-cta {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: clamp(40px, 6vh, 64px);
}

.sec-cta__q {
	font: 400 clamp(17px, 1.6vw, 22px)/1.3 var(--font-serif);
	color: var(--ink);
}

/* ---------- F5 + F6: trust band ---------- */
.trust__inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 3vw, 48px);
	text-align: center;
}

.trust__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.trust__item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: calc(-1 * clamp(10px, 1.5vw, 24px));
	top: 12%;
	bottom: 12%;
	width: 1px;
	background: var(--ink-10);
}

.trust__num {
	font: 700 clamp(34px, 4vw, 50px)/1 var(--font-sans);
	color: var(--green-ink);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.trust__num i { font-style: normal; font-size: .6em; }

.trust__val {
	font: 600 clamp(20px, 2vw, 26px)/1.1 var(--font-sans);
	color: var(--ink);
}

.trust__label {
	font: 400 13px/1.45 var(--font-sans);
	color: var(--ink-58);
	max-width: 20ch;
}

/* F9: contacts.css (which owns .faq-list) isn't loaded here */
.faq-list { max-width: 820px; margin: 0 auto; }

/* ---------- F8: «або напишіть» messenger row in the consultation modal ---------- */
.cons__alt {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
	font: 400 13px/1 var(--font-sans);
	color: var(--ink-58);
}

.cons__alt-link {
	color: var(--green-ink);
	font-weight: 600;
	text-decoration: none;
	padding: 4px 2px;
}

.cons__alt-link:hover { text-decoration: underline; }

/* ==================================================================
   MOBILE (≤768) — stacked flow: chips navigation, single column.
   ================================================================== */
@media (max-width: 1040px) {
	.c3__grid { grid-template-columns: 200px 1fr; }
	.c3__info-col { grid-column: 2; }
}

@media (max-width: 768px) {

	/* trust band: 2×2, drop the vertical dividers */
	.trust__inner { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
	.trust__item::after { display: none; }
	.sec-cta--split { flex-direction: column; gap: 14px; }

	/* hero: size to content (was a fixed 70svh that clipped the tall copy up under
	   the fixed header — eyebrow collided with the logo). Content sits at the
	   bottom, with a top pad that always clears the ~88px fixed header. */
	.cxr-hero { justify-content: flex-end; height: auto; min-height: 86svh; }
	.cxr-hero__content { padding-top: 100px; padding-bottom: 64px; }
	.cxr-hero__h1 { font-size: clamp(36px, 10.5vw, 48px); }
	.cxr-hero__sub { font-size: 15.5px; margin-bottom: 26px; }
	.cxr-hero__actions { flex-direction: column; }
	.cxr-hero__actions .gx-btn { width: 100%; justify-content: center; padding-top: 17px; padding-bottom: 17px; }

	/* VS: the new centred composition brings its own ≤768 rules (grid rows +
	   coin on the seam) — only the head rhythm tightens here */
	.vs2__head { margin-bottom: 26px; }

	/* catalog: chips nav, stacked content. The desktop bordered panel becomes a
	   full-bleed scroll strip — the panel border/radius must go, or its rounded
	   frame gets clipped by the viewport and reads as broken */
	.c3__grid { grid-template-columns: 1fr; gap: 20px; }
	.c3__nav {
		position: static;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		scrollbar-width: none;
		border: none;
		border-radius: 0;
		margin: 0 calc(-1 * var(--section-pad-x));
		padding: 2px var(--section-pad-x) 6px;
	}
	.c3__nav::-webkit-scrollbar { display: none; }
	.c3__nav button {
		flex: none;
		white-space: nowrap;
		border: 1px solid var(--ink-10);
		border-radius: var(--radius-full);
		padding: 12px 18px;
	}
	/* chip mode: no room for the row accent bar or the trailing arrow — the
	   arrow is opacity:0 yet still holds 14px + gap in EVERY chip (empty tail),
	   and the bar is designed for the vertical list rows */
	.c3__nav button::before { display: none; }
	.c3__nav .c3__nav-arrow { display: none; }
	.c3__info-col { grid-column: auto; }
	.c3__actions { max-width: none; }
	.c3__actions .gx-btn { padding-top: 16px; padding-bottom: 16px; }
}

/* ================= CONSULTATION MODAL (.cons) =================
   The page's single conversion surface. Same design language as the site's
   other dialogs (scrim + blur, cream panel, radius scale), tuned to the brief:
   520–560px on desktop, full-width with margins on phones, 250–350ms ease-out
   micro-interactions throughout. */
.cons {
	position: fixed;
	inset: 0;
	z-index: 9500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	/* NB: the container stays fully opaque — only the scrim + panel fade. Fading
	   opacity here would wrap the scrim's backdrop-filter in an isolation group,
	   and Chromium flashes the blur in as the group dissolves at opacity 1. */
	visibility: hidden; /* leaves the tab order + a11y tree when closed */
	pointer-events: none;
	transition: visibility 0s linear .3s;
}

.cons.is-open {
	visibility: visible;
	pointer-events: auto;
	transition: visibility 0s;
}

.cons__scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 15, .66);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity .3s ease;
}

.cons.is-open .cons__scrim { opacity: 1; }

.cons__panel {
	position: relative;
	width: min(540px, 100%);
	max-height: 100%;
	overflow-y: auto;
	border-radius: var(--radius-lg);
	background: var(--bg);
	border: 1px solid var(--ink-10);
	box-shadow: var(--shadow-md);
	opacity: 0;
	/* P9 — same entrance tokens as the .mp master-popup panel (one dialog language) */
	transform: translateY(14px) scale(.975);
	transition: transform .4s var(--ease) .08s, opacity .35s ease .08s;
}

.cons.is-open .cons__panel {
	opacity: 1;
	transform: none;
}

.cons__body { padding: 40px 40px 32px; }

.cons__eyebrow { margin-bottom: 16px; }

/* the selected construction — read-only, with a check so it reads as confirmed */
.cons__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font: 700 clamp(22px, 2.2vw, 27px)/1.2 var(--font-sans);
	color: var(--ink);
	letter-spacing: -.01em;
}

.cons__title::before {
	content: '';
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	/* green-wash circle + an SVG check (stroke = --green-ink #1B7433) */
	background: var(--green-wash-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B7433' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.cons__note {
	margin: 0 0 28px;
	font: 400 14.5px/1.5 var(--font-sans);
	color: var(--ink-70);
}

.cons__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.cons__field {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.cons__label {
	font: 500 11px/1 var(--font-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-58);
}

.cons__label i {
	font-style: normal;
	letter-spacing: .04em;
	text-transform: none;
	color: var(--ink-58);
}

.cons__input {
	width: 100%;
	padding: 15px 18px;
	border: 1px solid var(--ink-16);
	border-radius: var(--radius-full);
	background: var(--white);
	font: 400 15px/1.4 var(--font-sans);
	color: var(--ink);
	outline: none;
	transition: border-color .25s ease-out, box-shadow .25s ease-out;
}

.cons__input::placeholder { color: var(--ink-40); }

.cons__input:focus {
	border-color: rgba(43, 162, 74, .6);
	box-shadow: 0 0 0 3px rgba(43, 162, 74, .18);
}

.cons__input[aria-invalid="true"] {
	border-color: #b0483a;
	box-shadow: 0 0 0 3px rgba(176, 72, 58, .14);
}

.cons__textarea {
	border-radius: var(--radius-md);
	resize: vertical;
	min-height: 92px;
}

.cons__submit {
	margin-top: 4px;
	position: relative;
	transition: background-color .25s ease-out, transform .25s ease-out, opacity .25s ease-out;
}

.cons__submit:disabled {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
}

.cons__submit:not(:disabled):active { transform: translateY(1px); }

/* sending: the label steps aside for a spinner, the button holds its size */
.cons__spinner {
	display: none;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: var(--white);
	animation: cons-spin .7s linear infinite;
}

.cons.is-sending .cons__submit-label { display: none; }
.cons.is-sending .cons__spinner { display: block; }

@keyframes cons-spin { to { transform: rotate(360deg); } }

.cons__promise {
	margin: 2px 0 0;
	text-align: center;
	font: 400 12.5px/1.5 var(--font-sans);
	color: var(--ink-58);
}

.cons__err { margin-top: 4px; }

/* success state replaces the form inside the same panel */
.cons__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 18px 0 4px;
	animation: cons-rise .35s cubic-bezier(.22, 1, .36, 1) both;
}

.cons__done-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: var(--green-wash-strong);
	color: var(--green-ink);
	animation: cons-pop .4s cubic-bezier(.22, 1.4, .4, 1) both;
}

.cons__done-title { font: 700 22px/1.2 var(--font-sans); color: var(--ink); }

.cons__done-text {
	font: 400 14.5px/1.6 var(--font-sans);
	color: var(--ink-70);
	margin-bottom: 14px;
}

.cons__done-close { min-width: 160px; }

@keyframes cons-rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@keyframes cons-pop {
	from { opacity: 0; transform: scale(.6); }
	to { opacity: 1; transform: none; }
}

.cons__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--charcoal);
	color: var(--cream);
	border: 1px solid var(--white-24);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .3s ease;
}

.cons__close:hover { background: var(--green-cta); }

@media (max-width: 768px) {
	.cons { padding: 16px; align-items: flex-end; }

	.cons__panel {
		width: 100%;
		max-height: calc(100svh - 32px);
	}

	.cons__body { padding: 32px 22px calc(24px + env(safe-area-inset-bottom)); }

	.cons__close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.cons__done, .cons__done-mark { animation: none; }
	.cons__spinner { animation-duration: 1.4s; }
}


/* ---------- VS on mobile: the photo duel + wide table give way to two stacked
   comparison cards, a green coin welding the seam between them ---------- */
@media (max-width: 768px) {
	.vs2__duel,
	.vs2__rows { display: none; }

	.vs2__cards {
		display: flex;
		flex-direction: column;
		max-width: 440px;
		margin: 0 auto;
		text-align: left;
	}

	.vs2c {
		border-radius: 22px;
		padding: 26px 22px 30px;
	}

	.vs2c--plain {
		background: var(--cream);
		border: 1px solid var(--ink-10);
	}

	.vs2c--gx {
		background: var(--charcoal);
		color: var(--cream);
		padding-top: 34px; /* clear the coin overlapping the top seam */
	}

	.vs2c__name {
		margin: 0 0 20px;
		font: 600 15px/1.3 var(--font-sans);
		letter-spacing: .01em;
	}

	.vs2c--plain .vs2c__name {
		text-align: center;
		color: var(--ink);
	}

	.vs2c--gx .vs2c__name { color: var(--cream); }

	.vs2c__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.vs2c__list li {
		position: relative;
		padding-left: 32px;
		font: 400 14px/1.35 var(--font-sans);
	}

	/* SVG mark in a coloured circle (padding insets the icon inside the circle) */
	.vs2c__mk {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 20px;
		height: 20px;
		border-radius: 50%;
		padding: 4px;
	}

	.vs2c--plain .vs2c__list li { color: var(--ink-58); }
	.vs2c--plain .vs2c__mk { background: var(--ink-16); color: var(--ink-58); }

	.vs2c--gx .vs2c__list li { color: var(--cream); }
	.vs2c--gx .vs2c__mk { background: var(--green-cta); color: #fff; }

	/* the coin sits between the two cards, half on each (welds the seam) —
	   keeps the desktop's bg-colour ring */
	.vs2__badge--seam {
		align-self: center;
		margin: -22px 0;
		width: 56px;
		height: 56px;
		font-size: 14px;
	}
}