/**
 * PA&MA GROUP — base layout styles.
 *
 * Intentionally minimal: enough structure to verify templates, menus, CPT archives and
 * responsiveness. Final design is a later stage.
 */

/* -------------------------------------------------- Tokens */
:root {
	--color-text: #12110f;
	--color-muted: #5f5c56;
	--color-bg: #ffffff;
	--color-surface: #f5f4f1;
	--color-border: #e3e0da;
	/* One step darker than the resting border — enough to read as "active", never as ink. */
	--color-border-strong: #c8c3b9;
	--color-dark: #0e0e0e;
	--color-accent: #ff5a1f;
	--color-accent-dark: #e0430c;
	/* Reserved for "this is open / running": a recruitment badge reads as a state, not a brand mark. */
	--color-positive: #1a7f4b;

	/* Dusk render shared by every CTA surface. The small file is for boxes and phones,
	   where the wide crop would only be downscaled anyway. */
	--cta-photo: url("../images/cta-background.jpg");
	--cta-photo-sm: url("../images/cta-background-sm.jpg");

	/* Every dark section hero (page, Kontakt, Kariera) paints this: brand glow from the top-left
	   corner, a cool counter-light on the right, then the base slab. */
	--hero-surface:
		radial-gradient(120% 90% at 0% 0%, rgba(255, 90, 31, 0.22), transparent 55%),
		radial-gradient(80% 70% at 100% 20%, rgba(255, 255, 255, 0.06), transparent 50%),
		linear-gradient(165deg, #171614 0%, #0e0e0e 48%, #1a1714 100%);

	/* The same reading translucent, for the heroes that carry a photo. The renders are pale —
	   dawn mist, blue sky — so the wash stays heavy where the copy is and only thins out past it.
	   Narrow screens get an even wash because the copy spans the full width there. */
	--hero-photo-scrim:
		radial-gradient(120% 90% at 0% 0%, rgba(255, 90, 31, 0.18), transparent 55%),
		linear-gradient(
			180deg,
			rgba(14, 14, 14, 0.88) 0%,
			rgba(14, 14, 14, 0.76) 55%,
			rgba(14, 14, 14, 0.64) 100%
		);
	--hero-photo-scrim-wide:
		radial-gradient(120% 90% at 0% 0%, rgba(255, 90, 31, 0.18), transparent 55%),
		linear-gradient(
			100deg,
			rgba(14, 14, 14, 0.93) 0%,
			rgba(14, 14, 14, 0.86) 34%,
			rgba(14, 14, 14, 0.58) 66%,
			rgba(14, 14, 14, 0.38) 100%
		);

	--container: 1280px;
	--container-narrow: 760px;
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	/*
	 * The two largest steps scale with the viewport. A 64px break is a comfortable pause between
	 * sections on a wide screen and a hole on a phone, where it can swallow most of the visible
	 * height — the gap before every H2 in an article was the worst of it. The upper bounds are
	 * the old fixed values, so nothing above roughly a tablet moves.
	 */
	--space-lg: clamp(2rem, 5vw, 2.5rem);
	--space-xl: clamp(2.5rem, 6vw, 4rem);
	--space-2xl: clamp(3.5rem, 9vw, 6rem);
	--section-space: clamp(2.75rem, 6vw, 6rem);
	--radius: 6px;
	--radius-lg: 18px;
	--radius-pill: 999px;
	--header-height: 64px;
	/* No utility bar on phones. Both values are fallbacks: main.js measures the real header. */
	--topbar-height: 0px;
	--header-total: calc(var(--header-height) + var(--topbar-height));
	/* Set by height, not width, so the mark is exactly the same size in the header and the footer. */
	--logo-height: 38px;
	--font-stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* -------------------------------------------------- Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Anchor targets stop below the sticky header instead of under it. */
:target,
[id] {
	scroll-margin-top: calc(var(--header-total) + var(--space-sm));
}

body {
	margin: 0;
	/*
	 * hidden turns the body into a scroll container, which takes the scrollport away from the
	 * viewport and leaves the header drifting with the page on phones instead of staying pinned.
	 * clip trims the same horizontal overflow without that side effect; hidden stays first as the
	 * fallback for browsers that do not know clip yet.
	 */
	overflow-x: hidden;
	overflow-x: clip;
	font-family: var(--font-stack);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
	line-height: 1.2;
	margin: 0 0 var(--space-sm);
	font-weight: 600;
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }

p, ul, ol, dl {
	margin: 0 0 var(--space-sm);
}

a {
	color: var(--color-accent);
}

a:hover,
a:focus {
	color: var(--color-accent-dark);
}

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

/* -------------------------------------------------- Accessibility */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	padding: var(--space-xs) var(--space-sm);
	background: var(--color-text);
	color: #fff;
	z-index: 100;
}

.skip-link:focus {
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
	position: fixed;
}

/* -------------------------------------------------- Icons */
.icon {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	display: block;
}

/* Framed icon shared by USP, technology points, variants and panels. */
.usp__icon,
.dom-stats--strip .dom-stats__icon,
.point-list__icon,
.reason-grid__icon,
.variants__icon,
.turnkey__panel-icon,
.quote__icon,
.section__note-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/*
	 * Several of these sit beside a paragraph in a flex row. Width is a starting size to a flex
	 * item, not a promise, so a long line squeezed the frame narrower while the height held and
	 * the square came out as a flattened rectangle.
	 */
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	color: var(--color-accent);
	background: rgba(255, 90, 31, 0.1);
	border: 1px solid rgba(255, 90, 31, 0.22);
}

/* On dark bands the tinted square would muddy the background. */
.section--dark .usp__icon,
.section--dark .dom-stats--strip .dom-stats__icon,
.section--dark .turnkey__panel-icon,
.section--dark .quote__icon {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
}

/* -------------------------------------------------- Layout */
.container {
	width: min(100% - 2rem, var(--container));
	margin-inline: auto;
}

.container--narrow {
	width: min(100% - 2rem, var(--container-narrow));
}

.site-main {
	display: block;
	padding-block: var(--space-lg);
}

/* A full-bleed closing section must touch the dark footer, with no white strip between.
   Section-built templates put that section directly in the main element, the single/page
   templates wrap it in the entry article, so both nesting levels have to drop the padding.
   Pages that close with plain content (blog index, legal pages) keep their breathing room. */
.site-main:has(> .section:last-child),
.site-main:has(> :last-child > .section:last-child) {
	padding-bottom: 0;
}

.section {
	padding-block: var(--section-space);
}

/* Background rhythm is set per section in the templates, never by source order. */
.section--surface {
	background: var(--color-surface);
}

.section--dark {
	background: var(--color-dark);
	color: rgba(255, 255, 255, 0.82);
}

.section--dark .section__title,
.section--dark h3 {
	color: #fff;
}

.section--dark .section__eyebrow {
	color: var(--color-accent);
}

.section--dark .section__subtitle,
.section--dark .section__content {
	color: rgba(255, 255, 255, 0.75);
}

.section__title {
	margin-bottom: var(--space-sm);
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	letter-spacing: -0.02em;
	max-width: 22ch;
}

.section__subtitle,
.section__eyebrow {
	color: var(--color-muted);
	max-width: 62ch;
}

.section__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-accent);
	margin-bottom: var(--space-xs);
}

.section__header {
	margin-bottom: var(--space-lg);
}

.section__header--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.section__header--split .section__title {
	margin-bottom: var(--space-xs);
}

.section__header-action {
	margin: 0;
	flex-shrink: 0;
}

.section__header--center {
	text-align: center;
	max-width: 62ch;
	margin-inline: auto;
}

.section__header--center .section__title {
	max-width: none;
}

.section__header--center .section__subtitle {
	margin-inline: auto;
}

.section__content > :last-child {
	margin-bottom: 0;
}

.section__action {
	margin-top: var(--space-lg);
}

.section__note {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 var(--space-md);
	align-items: start;
	margin-top: var(--space-xl);
	padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-md);
	background: var(--color-surface);
	border-left: 3px solid var(--color-accent);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/*
 * A disc rather than the rounded square the rest of the icons wear, and paler: this one closes a
 * section instead of labelling an item in a row, so it should read as a seal, not as a seventh
 * entry in the grid above it.
 */
.section__note-icon {
	grid-row: span 2;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #fff;
	border-color: var(--color-border);
}

.section__note-icon .icon {
	width: 2rem;
	height: 2rem;
}

.section__note-title {
	font-size: 1.25rem;
	margin-bottom: var(--space-xs);
}

@media (min-width: 700px) {
	.section__note {
		padding-inline: var(--space-lg);
		column-gap: var(--space-lg);
	}
}

/*
 * The warranty note runs to a fixed measure, so on a wide screen its right third is empty. A line
 * drawing of the thing being guaranteed fills it without competing with the text. Only where there
 * is room to spare: below this the paragraphs reach the edge and would run over it.
 */
@media (min-width: 1100px) {
	.section__note--decor {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 100' fill='none' stroke='%23d6cec4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 46 60 6l54 40'/%3E%3Cpath d='M16 46v48M104 46v48'/%3E%3Cpath d='M104 60l30-18 30 18'/%3E%3Cpath d='M112 60v34M158 60v34'/%3E%3Cpath d='M4 94h160'/%3E%3Cpath d='M36 58h20v16H36z'/%3E%3Cpath d='M68 94V64h18v30'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right var(--space-lg) center;
		background-size: auto 58%;
	}

	.section__note--decor > :not(.section__note-icon) {
		max-width: 62ch;
	}
}

.section__note p:last-child {
	margin-bottom: 0;
}

/* Only editors see this: it explains why a dynamic section stays hidden. */
.editor-hint-wrap {
	padding-block: var(--space-md);
}

.editor-hint {
	margin: 0;
	padding: var(--space-sm) var(--space-md);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius);
	color: var(--color-muted);
	font-size: 0.9375rem;
}

.realizacje-preview-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-sm);
	align-items: center;
	justify-content: center;
	padding: var(--space-xs) var(--space-md);
	background: #fef3c7;
	color: #713f12;
	font-size: 0.875rem;
	text-align: center;
}

.realizacje-preview-bar a {
	color: inherit;
	font-weight: 600;
}

/* -------------------------------------------------- Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--color-dark);
	color: #fff;
	transition: background-color 0.25s ease;
}

/*
 * Fixed, so the bar keeps floating over the hero and pins on scroll; sticky cannot do that here
 * because body carries overflow-x and stops behaving as the scrollport.
 *
 * The width is stated outright instead of being stretched with left/right, which measures the
 * initial containing block — on phones that block can be far wider than the screen, and the bar
 * then carried the call and menu buttons off the right edge, leaving the front page with a bare
 * logo. min() takes the viewport where those two disagree and the containing block on desktop,
 * where 100vw would otherwise reach under the scrollbar and nudge the header out of line with the
 * rest of the page.
 */
.site-header--overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: min(100vw, 100%);
	background: transparent;
}

.site-header--overlay.is-scrolled {
	background: rgba(14, 14, 14, 0.92);
	backdrop-filter: blur(10px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: var(--header-height);
}

/* Utility bar with opening hours, office address and phone. */
.site-topbar {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.7);
}

.site-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	min-height: var(--topbar-height);
}

.site-topbar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--space-md);
	min-width: 0;
}

.site-topbar__item,
.site-topbar__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.site-topbar__item span,
.site-topbar__item a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.site-topbar .icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	color: var(--color-accent);
	display: block;
	margin: 0;
}

.site-topbar a {
	color: inherit;
	text-decoration: none;
}

.site-topbar a:hover,
.site-topbar a:focus {
	color: #fff;
}

.site-topbar__phone {
	flex-shrink: 0;
	align-items: center;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.site-topbar__phone span {
	line-height: 1;
	display: inline-block;
}

/* Over the hero video the bar needs a touch more contrast. */
.site-header--overlay .site-topbar {
	color: rgba(255, 255, 255, 0.85);
	border-bottom-color: rgba(255, 255, 255, 0.18);
}

/*
 * Phones get a bare header — logo plus the menu button — so the utility bar only appears once
 * there is room for it. The number lives in the compact call button and inside the mobile menu.
 */
.site-topbar {
	display: none;
}

.site-topbar__item--address {
	display: none;
}

@media (min-width: 900px) {
	:root {
		--header-height: 88px;
		--topbar-height: 34px;
	}

	.site-topbar {
		display: block;
		font-size: 0.8125rem;
	}

	.site-topbar__list {
		gap: var(--space-lg);
	}

	.site-topbar__item--address {
		display: inline-flex;
	}
}

@media (min-width: 1080px) {
	:root {
		--topbar-height: 42px;
	}
}

/* Both stay clickable above the open drawer, which spans the header row too. */
.site-header__brand,
.site-header__actions {
	position: relative;
	z-index: 2;
}

.site-header__brand {
	flex-shrink: 0;
}

.site-header__title {
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: #fff;
}

.custom-logo {
	height: var(--logo-height);
	width: auto;
	max-height: none;
	display: block;
}

.site-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-pill);
	cursor: pointer;
}

.site-header__toggle-bar,
.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
	display: block;
	width: 18px;
	height: 2px;
	background: #fff;
	position: relative;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
	content: "";
	position: absolute;
	left: 0;
}

.site-header__toggle-bar::before { top: -6px; }
.site-header__toggle-bar::after { top: 6px; }

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar {
	background: transparent;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::before {
	transform: translateY(6px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::after {
	transform: translateY(-6px) rotate(-45deg);
}

.site-nav {
	position: fixed;
	/* Covers the whole viewport, header included, and pads its contents past the pinned header.
	   Starting the panel at a measured offset instead left a transparent strip whenever that
	   measurement and the header's real position disagreed. The explicit width matches the screen
	   even where the containing block is wider, as it is on the front page. */
	inset: 0;
	width: min(100vw, 100%);
	/* The drawer is a child of the header, so this only orders it against the logo and the menu
	   button; the header's own z-index keeps the whole lot above the page. */
	z-index: 1;
	background: var(--color-dark);
	padding: calc(var(--header-total) + var(--space-md)) 1rem var(--space-lg);
	display: none;
	overflow-x: hidden;
	overflow-y: auto;
	/* Keeps a swipe that reaches the end of the menu from scrolling the page behind it. */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.site-nav.is-open {
	display: block;
}

.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.site-nav__list a {
	display: block;
	padding: 0.5rem 0;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.0625rem;
}

.site-nav__list a:hover,
.site-nav__list a:focus,
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
	color: #fff;
}

.site-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding-left: var(--space-sm);
}

.site-nav__mobile-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* The header CTA lives inside the mobile menu to keep the bar compact. */
@media (max-width: 1079px) {
	.site-header__actions .button {
		display: none;
	}
}

/* Icon-sized dial button: the only place the number is reachable in one tap on phones. */
.site-header__call {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-pill);
	color: #fff;
}

.site-header__call .icon {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
	margin: 0;
}

@media (max-width: 1079px) {
	.site-header__call {
		display: inline-flex;
	}
}

.site-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.site-header__phone span {
	line-height: 1;
	display: inline-block;
}

.site-nav__info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.7);
}

.site-nav__info a {
	color: inherit;
	text-decoration: none;
}

.site-header__phone .icon,
.site-nav__info .icon {
	width: 1.0625rem;
	height: 1.0625rem;
	color: var(--color-accent);
	flex-shrink: 0;
	display: block;
	margin: 0;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-shrink: 0;
}

.site-nav__notice {
	margin: 0;
	font-size: 0.875rem;
}

@media (min-width: 1080px) {
	.site-header__toggle {
		display: none;
	}

	.site-nav {
		position: static;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		z-index: auto;
		width: auto;
		display: block;
		background: none;
		padding: 0;
		max-height: none;
		overflow: visible;
		flex: 1;
	}

	.site-nav__list {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: clamp(1rem, 2.2vw, 2.25rem);
	}

	.site-nav__list a {
		padding: 0;
		font-size: 0.9375rem;
		font-weight: 500;
	}

	.site-nav__list li {
		position: relative;
	}

	.site-nav__list .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		background: var(--color-dark);
		border-radius: var(--radius);
		padding: var(--space-sm);
		min-width: 220px;
		margin-top: var(--space-sm);
		z-index: 20;
	}

	.site-nav__list li:hover > .sub-menu,
	.site-nav__list li:focus-within > .sub-menu {
		display: block;
	}

	.site-nav__mobile-actions {
		display: none;
	}
}

/* Solid header pages need spacing compensation only when the header overlays content. */
body.has-hero-overlay .site-main {
	padding-top: 0;
}

/* Dark flush heroes (Kontakt, Kariera) sit directly under the sticky header — no white stripe. */
body.has-flush-dark-hero .site-main {
	padding-top: 0;
}

/* -------------------------------------------------- Buttons */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.2;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.button:hover {
	transform: translateY(-1px);
}

.button--primary {
	background: var(--color-accent);
	color: #fff;
}

.button--primary:hover,
.button--primary:focus {
	background: var(--color-accent-dark);
	color: #fff;
}

.button--secondary {
	background: var(--color-dark);
	color: #fff;
}

.button--secondary:hover,
.button--secondary:focus {
	background: #000;
	color: #fff;
}

/* Solid dark pill used in the header. */
.button--dark {
	background: var(--color-dark);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.12);
}

.button--dark:hover,
.button--dark:focus {
	background: var(--color-accent);
	color: #fff;
	border-color: transparent;
}

/* Light pill on dark media. */
.button--light {
	background: rgba(18, 17, 15, 0.75);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(8px);
}

.button--light:hover,
.button--light:focus {
	background: var(--color-accent);
	color: #fff;
	border-color: transparent;
}

/* Glass pill on dark media. */
.button--glass {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(8px);
}

.button--glass:hover,
.button--glass:focus {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.button--ghost {
	border-color: var(--color-border);
	color: var(--color-text);
	background: transparent;
}

.button--ghost:hover,
.button--ghost:focus {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/*
 * On phones every call to action spans the content column and stacks one per row. Buttons used to
 * size themselves to their label, so the same action looked different from page to page depending
 * on how long its wording was.
 */
@media (max-width: 599px) {
	.button {
		width: 100%;
	}

	/* Sits in a flex row next to the section title, so it has to claim the row to fill it. */
	.section__header-action {
		width: 100%;
	}

	/* The consent bar is chrome, not page content — its paired choices stay on one row. */
	.cookie-bar__actions .button {
		width: auto;
		flex: 1 1 auto;
	}

	/*
	 * "Zobacz wszystkie…" belongs after the cards on a phone, not wedged between the title and a
	 * row the reader still has to swipe through. The header dissolves into the container so its
	 * heading and its button can be ordered around the card row that sits between them.
	 */
	.container:has(> .section__header--split) {
		display: flex;
		flex-direction: column;
		/* Desktop air reads as a hole on a narrow column, so these three rows sit closer. */
		gap: var(--space-md);
	}

	.section__header--split {
		display: contents;
	}

	.section__header--split > :not(.section__header-action) {
		order: 1;
	}

	.container:has(> .section__header--split) > :not(.section__header--split) {
		order: 2;
		/*
		 * The column gap is the only spacing here. The card row also carries block margins of its
		 * own for the grid layouts it normally sits in, and those stacked on top of the gap, which
		 * is how the space above and below the row ended up close to double what it looked like.
		 */
		margin-block: 0;
		/* A flex item defaults to min-width:auto and grows with the swipe row's full scroll width. */
		min-width: 0;
		max-width: 100%;
	}

	/* Same reason on the other side: the intro paragraph's trailing margin would add to the gap. */
	.section__header--split > :not(.section__header-action) > :last-child,
	.section__header--split > .section__subtitle {
		margin-bottom: 0;
	}

	.section__header--split > .section__header-action {
		order: 3;
		margin: 0;
	}
}

/* -------------------------------------------------- Hero */
.section--hero {
	/* One measure for the title and the lead below it: 11.8em equals the 18ch the headline
	   used to wrap at, so both blocks end on the same line. */
	--hero-title-size: clamp(2.5rem, 7.5vw, 5.5rem);
	--hero-measure: min(100%, calc(var(--hero-title-size) * 11.8));

	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100svh;
	padding: 0;
	color: #fff;
	background: var(--color-dark);
	overflow: hidden;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__image,
.hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 28%, rgba(0, 0, 0, 0) 45%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 25%, rgba(0, 0, 0, 0) 60%);
}

.hero__inner {
	position: relative;
	z-index: 1;
	/*
	 * The header floats over the hero, so the first line has to clear it whenever the copy is tall
	 * enough to reach the top of the block — a short hero on a phone, or any hero in landscape.
	 */
	padding-block: max(var(--space-xl), calc(var(--header-total) + var(--space-md))) clamp(2rem, 5vh, 3.5rem);
	width: min(100% - 2rem, var(--container));
}

.hero__label {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
	margin-bottom: var(--space-md);
}

/*
 * Accent orange belongs to the calls to action. Worn by a label sitting a few centimetres above
 * the real button, it promised a click that was not there, so the pill reads as frosted glass over
 * the photo instead: same prominence, no competition.
 */
.hero__badge {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hero__eyebrow {
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.hero__eyebrow::before {
	content: "— ";
}

.hero__title {
	font-size: var(--hero-title-size);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.02;
	margin: 0 0 var(--space-lg);
	max-width: var(--hero-measure);
}

.hero__title-accent {
	display: block;
	color: rgba(255, 255, 255, 0.5);
}

.hero__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-lg);
	flex-wrap: wrap;
}

/* Takes whatever the buttons leave on the row, but never runs wider than the headline. */
.hero__text {
	flex: 1 1 24rem;
	max-width: var(--hero-measure);
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1rem;
	line-height: 1.55;
}

.hero__actions {
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
	margin: 0;
}

.hero__highlights {
	list-style: none;
	padding: 0;
	margin: var(--space-lg) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.hero__highlights li {
	padding: var(--space-xs) var(--space-sm);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--radius-pill);
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 719px) {
	.hero__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-md);
	}

	/* In a column the same rule would stretch the paragraph vertically. */
	.hero__text {
		flex: 0 0 auto;
	}

	.hero__actions .button {
		flex: 1 1 auto;
	}

	/* Portrait crop puts text over brighter parts of the frame — darken more. */
	.hero__overlay {
		background:
			linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 22%, rgba(0, 0, 0, 0) 38%),
			linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 32%, rgba(0, 0, 0, 0) 62%);
	}

	/*
	 * The copy sits on the bottom edge, so a full-height hero spent its top two thirds on empty
	 * photo before the visitor reached a single word. This is a floor rather than a height: the
	 * padding below carries the real clearance, and the block grows if the headline wraps further.
	 */
	.section--hero {
		min-height: 60svh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.button:hover {
		transform: none;
	}
}

/* -------------------------------------------------- USP strip */
.section--usp {
	padding-block: clamp(2.25rem, 4vw, 3.5rem);
}

.usp__title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-accent);
	margin-bottom: var(--space-lg);
}

.usp {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 640px) {
	.usp {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.usp {
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
	}

	.usp__item {
		padding-inline: clamp(1rem, 2vw, 2rem);
		border-left: 1px solid rgba(255, 255, 255, 0.16);
	}

	.usp__item:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.usp__item:last-child {
		padding-right: 0;
	}
}

.usp__icon {
	margin-bottom: var(--space-sm);
}

.usp__item-title {
	font-size: 1.0625rem;
	margin-bottom: var(--space-xs);
}

.usp__item-text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
}

/* -------------------------------------------------- Technologia */
.tech {
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 900px) {
	.tech {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(2rem, 4vw, 4rem);
		align-items: start;
	}

	.tech__media {
		position: sticky;
		top: calc(var(--header-total) + var(--space-sm));
	}
}

/*
 * Stacked on phones the photo must not open the section — a reader needs the heading and the
 * pitch first. Flattening the copy column lets the picture slot in after the text, and row-gap
 * goes to 0 because the promoted children already carry their own vertical rhythm.
 */
@media (max-width: 899px) {
	.tech {
		row-gap: 0;
	}

	.tech > .tech__body {
		display: contents;
	}

	.tech > .tech__body > .section__eyebrow {
		order: 1;
	}

	.tech > .tech__body > .section__title {
		order: 2;
	}

	.tech > .tech__body > .section__content {
		order: 3;
	}

	.tech > .tech__media {
		order: 4;
		margin-top: var(--space-lg);
	}

	.tech .tech__points {
		order: 5;
	}

	/* The panel variant zeroes its margin to sit flush in the desktop column; with row-gap gone
	   it needs that spacing back. */
	.tech .tech__points--panel {
		margin-top: var(--space-lg);
	}

	.tech > .tech__body > .section__action {
		order: 6;
	}
}

.tech__media {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.tech__media .media__image {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.point-list {
	list-style: none;
	margin: var(--space-lg) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 600px) {
	.point-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.point-list__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
}

.point-list__icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
}

.point-list__icon .icon {
	width: 1.25rem;
	height: 1.25rem;
}

.point-list__body {
	min-width: 0;
}

.point-list__title {
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.point-list__text {
	margin: 0;
	color: var(--color-muted);
	font-size: 0.9375rem;
}

/* Without a photo the points carry the section visually, so they sit in a panel. */
.tech__points--panel {
	margin-top: 0;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	align-content: start;
}

@media (min-width: 900px) {
	.tech--no-media {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	}

	.tech__points--panel {
		grid-template-columns: minmax(0, 1fr);
	}
}

.tech__points--panel .point-list__item:first-child {
	padding-top: 0;
	border-top: 0;
}

/* -------------------------------------------------- Gotowy / indywidualny */
.variants {
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 860px) {
	.variants {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-lg);
	}
}

.variants__item {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg);
	overflow: hidden;
}

/* Oversized watermark of the same icon gives each panel its own character. */
.variants__item::after {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -70px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: rgba(255, 90, 31, 0.045);
	pointer-events: none;
}

.variants__item > * {
	position: relative;
	z-index: 1;
}

.variants__icon {
	margin-bottom: var(--space-md);
}

.variants__item:first-child {
	background: var(--color-dark);
	border-color: transparent;
	color: rgba(255, 255, 255, 0.78);
}

.variants__item:first-child .variants__icon {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
}

.variants__item:first-child::after {
	background: rgba(255, 255, 255, 0.04);
}

.variants__item:first-child .variants__title {
	color: #fff;
}

.variants__item:first-child .button--ghost {
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
}

.variants__item:first-child .button--ghost:hover,
.variants__item:first-child .button--ghost:focus {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.variants__title {
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
}

.variants__text {
	margin-bottom: var(--space-md);
}

.variants__action {
	margin: auto 0 0;
	padding-top: var(--space-md);
}

/* -------------------------------------------------- Dom pod klucz */
.turnkey {
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 900px) {
	.turnkey {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		gap: clamp(2rem, 5vw, 4.5rem);
		align-items: center;
	}
}

.turnkey__text {
	color: rgba(255, 255, 255, 0.78);
	max-width: 54ch;
}

.turnkey__actions {
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
	margin: var(--space-lg) 0 0;
}

.turnkey__panel {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.04);
}

.turnkey__panel-icon {
	margin-bottom: var(--space-md);
}

.section--dark .turnkey__panel-title {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: var(--space-md);
}

.turnkey__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-sm);
}

.turnkey__list li {
	position: relative;
	padding-left: 1.75rem;
	color: #fff;
}

.turnkey__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 12px;
	height: 2px;
	background: var(--color-accent);
}

.turnkey__media {
	margin: var(--space-md) 0 0;
	border-radius: var(--radius);
	overflow: hidden;
}

/* -------------------------------------------------- Dlaczego my */
.reason-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-lg) var(--space-md);
}

/*
 * Icon to the left, numbered copy to the right, and the cells divided by hairlines rather than
 * fenced off by the heavy rule each one used to wear. The lines read as one quiet grid instead of
 * six separate headings, which lets the icons carry the eye down the section.
 */
.reason-grid__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.reason-grid__body {
	min-width: 0;
}

/* Larger than the frames elsewhere: here the icon is the only thing anchoring a three-line cell. */
.reason-grid__icon {
	width: 72px;
	height: 72px;
	border-radius: 20px;
}

.reason-grid__icon .icon {
	width: 1.75rem;
	height: 1.75rem;
}

/* One column on a phone, so the frame is taking width the sentence next to it needs. */
@media (max-width: 599px) {
	.reason-grid__icon {
		width: 56px;
		height: 56px;
		border-radius: 16px;
	}

	.reason-grid__icon .icon {
		width: 1.5rem;
		height: 1.5rem;
	}
}

@media (min-width: 640px) {
	.reason-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Divider on every cell, lifted from whichever one closes the row. */
	.reason-grid__item {
		padding-right: var(--space-md);
		border-right: 1px solid var(--color-border);
	}

	.reason-grid__item:nth-child(2n) {
		padding-right: 0;
		border-right: 0;
	}
}

@media (min-width: 1000px) {
	.reason-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.reason-grid__item:nth-child(2n) {
		padding-right: var(--space-md);
		border-right: 1px solid var(--color-border);
	}

	.reason-grid__item:nth-child(3n) {
		padding-right: 0;
		border-right: 0;
	}
}

.reason-grid__number {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--color-accent);
	margin-bottom: var(--space-xs);
}

.reason-grid__title {
	font-size: 1.125rem;
	margin-bottom: var(--space-xs);
}

.reason-grid__text {
	margin: 0;
	color: var(--color-muted);
}

/* -------------------------------------------------- Proces (timeline) */
.timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-lg);
	position: relative;
}

.timeline__item {
	position: relative;
	padding-left: 3.25rem;
}

.timeline__number {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-dark);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
}

.timeline__title {
	font-size: 1.0625rem;
	margin-bottom: var(--space-xs);
	padding-top: 0.4rem;
}

.timeline__text {
	margin: 0;
	color: var(--color-muted);
	font-size: 0.9375rem;
}

@media (max-width: 999px) {
	.timeline__item::before {
		content: "";
		position: absolute;
		left: 17px;
		top: 42px;
		bottom: calc(var(--space-lg) * -1);
		width: 1px;
		background: var(--color-border);
	}

	.timeline__item:last-child::before {
		display: none;
	}
}

@media (min-width: 1000px) {
	.timeline {
		grid-template-columns: repeat(5, 1fr);
		gap: var(--space-md);
	}

	.timeline::before {
		content: "";
		position: absolute;
		top: 18px;
		left: 18px;
		right: 18px;
		height: 1px;
		background: var(--color-border);
	}

	.timeline__item {
		padding-left: 0;
		padding-top: 3.25rem;
		padding-right: var(--space-sm);
	}

	.timeline__title {
		padding-top: 0;
	}
}

/* -------------------------------------------------- Obszar działania
 * Dark band + typographic «200 km» radius. Region links are solid rows —
 * no radar rings, no floating white chips.
 */
.section--area {
	background: var(--color-dark);
	color: rgba(255, 255, 255, 0.78);
	position: relative;
	overflow: hidden;
	/* Decorative rings sit outside the box; clip keeps them from widening the document. */
	overflow-x: clip;
}

.section--area::before {
	content: "";
	position: absolute;
	inset: -20% auto auto -10%;
	width: min(48vw, 520px);
	aspect-ratio: 1;
	border: 1px solid rgba(255, 90, 31, 0.14);
	border-radius: 50%;
	pointer-events: none;
}

.section--area::after {
	content: "";
	position: absolute;
	right: -12%;
	bottom: -35%;
	width: min(55vw, 640px);
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 50%;
	pointer-events: none;
}

.section--area .section__title {
	color: #fff;
	max-width: 16ch;
}

.section--area .section__eyebrow {
	color: var(--color-accent);
}

.section--area .section__content {
	color: rgba(255, 255, 255, 0.72);
	max-width: 46ch;
}

.section--area .section__content p {
	margin-bottom: var(--space-sm);
}

.section--area .section__action {
	margin-top: var(--space-md);
	margin-bottom: 0;
}

.area {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 960px) {
	.area {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: clamp(2.5rem, 6vw, 5rem);
		align-items: end;
	}
}

.area__note {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.9375rem;
	max-width: 46ch;
}

.area__panel {
	display: grid;
	gap: var(--space-md);
}

.area__radius {
	display: flex;
	align-items: flex-end;
	gap: 0.85rem;
	animation: area-radius-in 0.7s ease both;
}

.area__radius-value {
	font-size: clamp(4.5rem, 12vw, 7.5rem);
	font-weight: 700;
	line-height: 0.85;
	letter-spacing: -0.06em;
	color: #fff;
}

.area__radius-meta {
	display: grid;
	gap: 0.15rem;
	padding-bottom: 0.55rem;
}

.area__radius-unit {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.area__radius-label {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

/* No rule above the first row: closing the radius figure and opening the list stacked two
   near-identical lines a few pixels apart. The row separators alone carry the list. */
.area__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.area__item + .area__item {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.area__link,
.area__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 0.15rem 1.05rem 0;
	text-decoration: none;
	color: #fff;
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.015em;
	transition: color 0.2s ease, padding-left 0.22s ease;
}

.area__link-name {
	position: relative;
}

.area__link-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: var(--color-accent);
	flex-shrink: 0;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		transform 0.22s ease,
		color 0.2s ease;
}

.area__link-go .icon {
	width: 1rem;
	height: 1rem;
}

.area__link:hover,
.area__link:focus,
.area__link:focus-visible {
	color: #fff;
	padding-left: 0.55rem;
	outline: none;
}

.area__link:hover .area__link-go,
.area__link:focus .area__link-go,
.area__link:focus-visible .area__link-go {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
	transform: translateX(3px);
}

.area__label {
	color: rgba(255, 255, 255, 0.7);
	cursor: default;
}

@keyframes area-radius-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.area__radius {
		animation: none;
	}

	.area__link,
	.area__link-go {
		transition: none;
	}

	.area__link:hover,
	.area__link:focus,
	.area__link:focus-visible {
		padding-left: 0;
	}

	.area__link:hover .area__link-go,
	.area__link:focus .area__link-go,
	.area__link:focus-visible .area__link-go {
		transform: none;
	}
}

/* -------------------------------------------------- Wycena */
.quote {
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 960px) {
	.quote--with-form {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(2rem, 5vw, 4rem);
		align-items: start;
	}
}

.quote__icon {
	margin-bottom: var(--space-md);
}

.quote__text {
	color: rgba(255, 255, 255, 0.78);
	max-width: 56ch;
}

.quote__factors {
	list-style: none;
	margin: var(--space-lg) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-xs);
}

@media (min-width: 600px) {
	.quote__factors {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Without a connected form the list fills the width instead of leaving a gap. */
@media (min-width: 900px) {
	.quote:not(.quote--with-form) .quote__factors {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-sm) var(--space-md);
	}
}

.quote__factors li {
	position: relative;
	padding-left: 1.5rem;
	color: #fff;
	font-size: 0.9375rem;
}

.quote__factors li::before {
	content: "+";
	position: absolute;
	left: 0;
	color: var(--color-accent);
	font-weight: 700;
}

.quote__note {
	margin: var(--space-md) 0 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.9375rem;
}

.quote__form {
	padding: clamp(1.5rem, 3vw, 2rem);
	background: #fff;
	color: var(--color-text);
	border-radius: var(--radius-lg);
}

/* -------------------------------------------------- Media */
.media {
	display: block;
	background: var(--color-surface);
	border-radius: var(--radius);
	overflow: hidden;
}

.media__image {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.media__placeholder {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--color-surface);
}

.media-text {
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 900px) {
	.media-text {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
}

/* -------------------------------------------------- Cards */
.card-grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: 1fr;
	margin-block: var(--space-md);
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.card-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.card-grid--compact {
		grid-template-columns: repeat(4, 1fr);
	}
}

/*
 * Explicit column counts for archive-style grids that still opt in.
 */
@media (min-width: 960px) {
	.card-grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
	.card-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Home «Nasze domy» — even catalogue rhythm, no lead/split imbalance. */
.section--domy {
	background: var(--color-bg);
}

.domy__header {
	align-items: flex-end;
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.domy__intro .section__title {
	max-width: 18ch;
}

.card-grid--domy {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	grid-template-columns: 1fr;
	margin-block: 0;
}

@media (min-width: 640px) {
	.card-grid--domy {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

.card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg);
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover lifts the card with a soft shadow instead of inking the outline. */
.card:hover,
.card:focus-within {
	border-color: var(--color-border-strong);
	box-shadow: 0 16px 36px -24px rgba(18, 17, 15, 0.5);
	transform: translateY(-2px);
}

.card__media {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--color-surface);
}

.card__media .media__image,
.card__media .media__placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.card:hover .card__media .media__image {
	transform: scale(1.04);
}

.card__media-shade {
	position: absolute;
	inset: auto 0 0 0;
	height: 42%;
	background: linear-gradient(180deg, rgba(14, 14, 14, 0) 0%, rgba(14, 14, 14, 0.28) 100%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.card--dom:hover .card__media-shade,
.card--dom:focus-within .card__media-shade {
	opacity: 1;
}

/* -------------------------------------------------- House card — image-first catalogue tile */
.card--dom {
	height: 100%;
	border-color: transparent;
	background: var(--color-surface);
	box-shadow: none;
}

.card--dom .card__media .media__image,
.card--dom .card__media .media__placeholder {
	aspect-ratio: 16 / 10;
}

.card--dom .card__body {
	padding: 1.15rem 1.2rem 1.25rem;
	gap: 0.65rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-top: 0;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.card--dom .card__title {
	font-size: clamp(1.2rem, 2vw, 1.375rem);
	letter-spacing: -0.02em;
}

.card--dom .card__specs {
	margin: 0;
	gap: 0.35rem 0.85rem;
}

.card--dom .card__spec {
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-muted);
	letter-spacing: 0.01em;
}

.card--dom .card__spec + .card__spec::before {
	content: "·";
	margin-right: 0.85rem;
	color: var(--color-border-strong);
}

.card--dom .card__footer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.85rem;
	border-top: 1px solid var(--color-border);
}

.card--dom .card__price {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-text);
}

.card--dom .card__action {
	margin: 0;
	padding: 0;
}

.card--dom .link-arrow {
	font-size: 0.875rem;
}

.card--dom:hover,
.card--dom:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 22px 40px -28px rgba(18, 17, 15, 0.55);
	border-color: transparent;
}

.card--dom:hover .card__body,
.card--dom:focus-within .card__body {
	border-color: rgba(255, 90, 31, 0.28);
}

.card--dom:hover .card__title a,
.card--dom:focus-within .card__title a {
	color: var(--color-accent);
}

.card--dom:hover .link-arrow,
.card--dom:focus-within .link-arrow {
	color: var(--color-accent);
}

.card--dom:hover .link-arrow .icon,
.card--dom:focus-within .link-arrow .icon {
	transform: translateX(3px);
}

/* Blog / post cards — orange edge hint on hover, stronger lift. */
.card--post {
	height: 100%;
}

/*
 * Excerpt length varies a lot between posts, and on a narrow screen the difference ran to a couple
 * of hundred pixels — cards side by side in a swipe row ended at visibly different points and each
 * one filled most of the viewport. Capping the two variable blocks keeps them compact and even;
 * the full text is one tap away.
 */
@media (max-width: 599px) {
	.card--post .card__body {
		padding: var(--space-sm);
	}

	/* The default crop is nearly square, which on a full-width card is a lot of screen for a photo
	   that only sets the topic. */
	.card--post .card__media .media__image,
	.card--post .card__media .media__placeholder {
		aspect-ratio: 16 / 10;
	}

	.card--post .card__title,
	.card--post .card__text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.card--post .card__title {
		-webkit-line-clamp: 2;
		font-size: 1.0625rem;
	}

	.card--post .card__text {
		-webkit-line-clamp: 3;
		font-size: 0.9375rem;
	}
}

.card--post:hover,
.card--post:focus-within {
	border-color: rgba(255, 90, 31, 0.35);
	transform: translateY(-4px);
	box-shadow:
		0 20px 42px -28px rgba(18, 17, 15, 0.55),
		0 0 0 1px rgba(255, 90, 31, 0.08);
}

.card--post:hover .link-arrow,
.card--post:focus-within .link-arrow {
	color: var(--color-accent);
}

.card--post:hover .link-arrow .icon,
.card--post:focus-within .link-arrow .icon {
	transform: translateX(3px);
}

/* Job cards on /kariera/. The row variant lives with the .job-list rules further down. */
.card--job {
	height: 100%;
	border-left: 3px solid transparent;
}

.card--job:hover,
.card--job:focus-within {
	border-color: var(--color-border-strong);
	border-left-color: var(--color-accent);
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -28px rgba(18, 17, 15, 0.5);
}

.card--job-closed:hover,
.card--job-closed:focus-within {
	border-left-color: var(--color-border-strong);
}

.card--job .card__body {
	gap: var(--space-sm);
}

.card__status {
	display: inline-flex;
	align-self: flex-start;
	margin: 0;
	padding: 0.25rem 0.7rem;
	border-radius: var(--radius-pill);
	background: rgba(26, 127, 75, 0.12);
	color: var(--color-positive);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.card__status--closed {
	background: var(--color-surface);
	color: var(--color-muted);
}

.card--job .card__text {
	max-width: 62ch;
}

.card__aside {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
	padding: var(--space-md);
	border-top: 1px solid var(--color-border);
	background: var(--color-surface);
}

.card__salary-label {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.card__salary {
	margin: 0 0 var(--space-xs);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.card__aside .card__action {
	margin: 0;
}

.card__aside .button {
	width: 100%;
}

.card--dom.card--no-image {
	/* Compact text-first card when Media Library has no real photo. */
	min-height: 0;
}

.card--dom.card--no-image .card__body {
	border-top: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

/* -------------------------------------------------- Location card — photo tile on /lokalizacje/ */
/* Built on the house card: same seam between photo and body, only larger, because the archive
   shows a handful of regions two-up rather than a full catalogue. */
.card--lokalizacja {
	height: 100%;
	border-color: transparent;
	background: var(--color-surface);
	box-shadow: none;
}

.card--lokalizacja .card__media .media__image,
.card--lokalizacja .card__media .media__placeholder {
	aspect-ratio: 16 / 10;
}

.card--lokalizacja:hover .card__media-shade,
.card--lokalizacja:focus-within .card__media-shade {
	opacity: 1;
}

.card--lokalizacja .card__body {
	padding: clamp(1.25rem, 2.4vw, 1.75rem);
	gap: 0.6rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-top: 0;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.card--lokalizacja.card--no-image .card__body {
	border-top: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.card--lokalizacja .card__title {
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	letter-spacing: -0.02em;
}

.card--lokalizacja .card__region {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-muted);
}

.card--lokalizacja .card__region .icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	color: var(--color-accent);
}

.card--lokalizacja .card__footer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-sm);
	margin-top: auto;
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
}

.card--lokalizacja .card__action {
	margin: 0;
}

.card--lokalizacja:hover,
.card--lokalizacja:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 24px 46px -30px rgba(18, 17, 15, 0.55);
	border-color: transparent;
}

.card--lokalizacja:hover .card__body,
.card--lokalizacja:focus-within .card__body {
	border-color: rgba(255, 90, 31, 0.28);
}

.card--lokalizacja:hover .card__title a,
.card--lokalizacja:focus-within .card__title a {
	color: var(--color-accent);
}

.card--lokalizacja:hover .link-arrow,
.card--lokalizacja:focus-within .link-arrow {
	color: var(--color-accent);
}

.card--lokalizacja:hover .link-arrow .icon,
.card--lokalizacja:focus-within .link-arrow .icon {
	transform: translateX(3px);
}

.card-grid--lokalizacje {
	margin-block: 0;
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

/*
 * Teaser rows swipe sideways on phones. Stacked, three full-width cards pushed everything after
 * them more than a screen down; side by side they stay one glance, and the card peeking in at the
 * edge advertises that there is more. Full listings keep stacking — you cannot swipe your way
 * through a paginated archive. Declared after the grid modifiers so it wins over their columns.
 */
@media (max-width: 599px) {
	.card-grid--swipe {
		display: flex;
		gap: var(--space-sm);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		/*
		 * Without layout containment, off-screen swipe cards still widen the document on phones
		 * even though this row scrolls inside its box — that is the horizontal white gutter.
		 * `content` keeps height from children; `strict`/size containment would collapse the row.
		 */
		max-width: 100%;
		min-width: 0;
		contain: content;
	}

	.card-grid--swipe::-webkit-scrollbar {
		display: none;
	}

	/*
	 * A fixed basis, so the row overflows on purpose and the next card stays partly visible.
	 * height:auto undoes the height:100% the cards carry for grid layouts — a specified height
	 * opts an item out of stretching, which left neighbours in the row ending at different points.
	 */
	.card-grid--swipe > * {
		flex: 0 0 72%;
		height: auto;
		scroll-snap-align: start;
	}

	/* A shallower crop keeps the whole card inside the screen next to the trimmed copy below. */
	.card-grid--swipe .card__media .media__image,
	.card-grid--swipe .card__media .media__placeholder {
		aspect-ratio: 16 / 10;
	}
}

.card__price-badge {
	position: absolute;
	left: var(--space-sm);
	bottom: var(--space-sm);
	padding: 0.35rem 0.75rem;
	border-radius: var(--radius-pill);
	background: rgba(14, 14, 14, 0.88);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.card__kicker {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.card__specs {
	list-style: none;
	margin: var(--space-xs) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.card__spec {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text);
}

.card__spec .icon {
	width: 1rem;
	height: 1rem;
	color: var(--color-accent);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	color: var(--color-text);
}

.link-arrow .icon {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-accent);
	transition: transform 0.2s ease;
}

.link-arrow:hover,
.link-arrow:focus {
	color: var(--color-accent);
}

.link-arrow:hover .icon,
.link-arrow:focus .icon {
	transform: translateX(4px);
}

.back-link {
	margin: 0 0 var(--space-md);
}

.link-arrow--back .icon {
	transform: none;
}

.link-arrow--back:hover .icon,
.link-arrow--back:focus .icon {
	transform: translateX(-4px);
}

.dom-hero .back-link {
	margin: 0 0 var(--space-sm);
}

.dom-hero .link-arrow--back {
	color: rgba(255, 255, 255, 0.92);
}

.dom-hero .link-arrow--back:hover,
.dom-hero .link-arrow--back:focus {
	color: #fff;
}

.dom-hero .link-arrow--back .icon {
	color: var(--color-accent);
}

/* Fewer columns mean wider cards, so the photos get a flatter crop. */
@media (min-width: 960px) {
	.card-grid--cols-1 .card__media .media__image,
	.card-grid--cols-1 .card__media .media__placeholder,
	.card-grid--cols-2 .card__media .media__image,
	.card-grid--cols-2 .card__media .media__placeholder {
		aspect-ratio: 16 / 10;
	}
}

/* -------------------------------------------------- Photo tile (realizacje) */
.card--realizacja {
	border: 0;
	background: var(--color-dark);
	height: 100%;
}

.tile__link {
	position: relative;
	display: block;
	color: #fff;
	text-decoration: none;
	min-height: 320px;
	height: 100%;
}

.tile__media,
.tile__media .media__image,
.tile__media .media__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tile__media {
	position: absolute;
	inset: 0;
}

.tile__media .media__image {
	transition: transform 0.5s ease;
}

.tile__link:hover .media__image,
.tile__link:focus-visible .media__image {
	transform: scale(1.05);
}

.tile__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 14, 14, 0) 35%, rgba(14, 14, 14, 0.82) 100%);
}

.tile__content {
	position: absolute;
	inset: auto 0 0 0;
	display: block;
	padding: var(--space-md);
}

.tile__title {
	margin: 0 0 0.25rem;
	font-size: 1.1875rem;
	color: #fff;
}

.tile__meta {
	display: block;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.75);
}

.tile__excerpt {
	display: block;
	margin-top: 0.5rem;
	max-width: 36ch;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.7);
}

.tile__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.85rem;
	padding-right: 3rem;
}

.tile__cta-label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
}

.tile__cta .tile__icon {
	position: static;
}

.card--realizacja .media__placeholder {
	background: #1c1c1c;
}

.tile__icon {
	position: absolute;
	right: var(--space-md);
	bottom: var(--space-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.24);
	color: #fff;
	transition: background 0.2s ease;
}

.tile__link:hover .tile__icon,
.tile__link:focus-visible .tile__icon {
	background: var(--color-accent);
	border-color: var(--color-accent);
}

/* Mosaic: with an odd number of projects the first tile takes the tall slot. */
@media (min-width: 960px) {
	.card-grid--tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 220px;
		gap: var(--space-md);
	}

	.card-grid--tiles > * {
		grid-column: span 2;
	}

	.card-grid--tiles:has(> :nth-child(3):last-child) > :first-child,
	.card-grid--tiles:has(> :nth-child(5):last-child) > :first-child {
		grid-row: span 2;
	}

	.card-grid--tiles .tile__link {
		min-height: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.card__media .media__image,
	.tile__media .media__image,
	.link-arrow .icon {
		transition: none;
	}

	.card:hover .card__media .media__image,
	.tile__link:hover .media__image {
		transform: none;
	}

	.link-arrow:hover .icon,
	.link-arrow:focus .icon,
	.link-arrow--back:hover .icon,
	.link-arrow--back:focus .icon {
		transform: none;
	}

	.card:hover,
	.card:focus-within,
	.card--dom:hover,
	.card--dom:focus-within,
	.card--post:hover,
	.card--post:focus-within,
	.card--job:hover,
	.card--job:focus-within {
		transform: none;
	}

	.card--post:hover .link-arrow .icon,
	.card--post:focus-within .link-arrow .icon {
		transform: none;
	}
}

.card__body {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	flex: 1;
}

.card__title {
	font-size: 1.125rem;
	margin: 0;
}

.card__title a {
	text-decoration: none;
	color: var(--color-text);
}

.card__title a:hover,
.card__title a:focus {
	color: var(--color-accent);
}

.card__text {
	color: var(--color-muted);
	margin: 0;
}

.card__meta,
.card__meta-date {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	font-size: 0.875rem;
	color: var(--color-muted);
}

.card__meta li::after {
	content: "•";
	margin-left: var(--space-xs);
	color: var(--color-border);
}

.card__meta li:last-child::after {
	content: "";
}

.card__price {
	font-weight: 700;
	margin: 0;
}

.card__badge {
	font-weight: 600;
	color: var(--color-accent);
}

.card__action {
	margin: var(--space-xs) 0 0;
}

/* -------------------------------------------------- Page header / hero */
.page-header {
	margin-bottom: var(--space-lg);
}

.page-header__title {
	margin-bottom: var(--space-xs);
}

.page-header__intro {
	color: var(--color-muted);
	max-width: 65ch;
}

/* Long SEO copy sits above and below a full-width card grid, where a single 68ch column left the
   page looking unfinished. Splitting the paragraphs across columns fills the grid width while
   keeping each line at a readable measure. */
.prose-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
	gap: var(--space-md) var(--space-xl);
	align-items: start;
}

.prose-columns > * {
	margin: 0;
	max-width: none;
}

/* The lede introduces the catalogue, so it needs air before the cards start. */
.archive-lede {
	margin-bottom: var(--space-xl);
	color: var(--color-muted);
	font-size: 1.0625rem;
}

/* With an odd number of paragraphs the grid above leaves a visible hole in the last column, so
   longer copy flows as real columns and lets the browser balance their height. */
.prose-flow {
	columns: 2 26rem;
	column-gap: var(--space-xl);
}

.prose-flow > *,
.entry-content.prose-flow > * + * {
	margin: 0 0 var(--space-md);
	max-width: none;
	break-inside: avoid;
}

.prose-flow > :last-child {
	margin-bottom: 0;
}

/* Shared background photo for the dark section heroes. It layers over the hero's own gradient
   instead of replacing it, so a slow or missing image never leaves light text on light ground. */
.hero-photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.hero-photo__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-photo-position, 50% 50%);
}

/* Sits over the still, which stays underneath as the poster whenever the clip is skipped. */
.hero-photo__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-photo__scrim {
	position: absolute;
	inset: 0;
	background: var(--hero-photo-scrim);
}

@media (min-width: 700px) {
	.hero-photo__scrim {
		background: var(--hero-photo-scrim-wide);
	}
}

/* Section header, not a landing hero: it opens the page under the sticky header and hands over
   to the content, so it is sized by padding rather than by viewport height. */
.page-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	margin-bottom: var(--space-lg);
	padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
	background: var(--hero-surface);
	color: #fff;
}

/* That breathing room is meant to separate the hero from light content. Against a dark band it
   just shows up as a white stripe between two dark blocks, so the two are let to meet. */
.page-hero:has(+ .section--dark) {
	margin-bottom: 0;
}

.page-hero__inner {
	position: relative;
	z-index: 1;
}

.page-hero__eyebrow {
	margin: 0 0 var(--space-sm);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.page-hero__title {
	margin: 0 0 var(--space-sm);
	font-size: clamp(2.25rem, 5.5vw, 3.75rem);
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: #fff;
}

.page-hero__text {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.82);
}

.page-hero__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-sm);
	padding: 0;
	margin: var(--space-md) 0 0;
}

.page-hero__meta li {
	padding: var(--space-xs) var(--space-sm);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--radius-pill);
	font-size: 0.875rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.9);
}

.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: var(--space-lg) 0 0;
}

/* -------------------------------------------------- Single layouts */
.single__layout {
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 960px) {
	.single__layout {
		grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
		align-items: start;
	}

	.single__aside {
		position: sticky;
		/* Clears the sticky header, otherwise the panel parks underneath it. */
		top: calc(var(--header-total) + var(--space-md));
	}
}

.single__block {
	margin-block: var(--space-lg);
}

.single__actions {
	margin-block: var(--space-xl) var(--space-md);
}

.single__note {
	color: var(--color-muted);
}

.summary-box {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-md);
	background: var(--color-surface);
}

.summary-box__price {
	font-size: 1.375rem;
	font-weight: 700;
	margin: 0;
}

.summary-box__note {
	font-size: 0.875rem;
	color: var(--color-muted);
}

/* -------------------------------------------------- Lokalizacje */
/* Closing invitation on the archive: the header above it is centred, so the copy and the button
   follow it instead of drifting back to the left edge. */
.lokalizacje-note {
	text-align: center;
}

.lokalizacje-note .section__content {
	margin-inline: auto;
	max-width: 62ch;
	color: var(--color-muted);
}

.lokalizacje-note .section__action {
	margin-top: var(--space-md);
}

/* The distance field holds a sentence ("w promieniu do 200 km — potwierdzamy indywidualnie"),
   so the hero chips have to wrap rather than run the row off the screen. */
.single--lokalizacja .page-hero__meta li {
	max-width: 52ch;
}

.lokalizacja-panel {
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.lokalizacja-panel__eyebrow {
	margin: 0 0 var(--space-xs);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.lokalizacja-panel__title {
	margin: 0 0 var(--space-xs);
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	letter-spacing: -0.01em;
}

.lokalizacja-panel__text {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-muted);
}

.lokalizacja-panel__actions {
	margin: var(--space-md) 0 0;
}

/* The column is narrow, so the button fills it instead of leaving a ragged edge. */
.lokalizacja-panel__actions .button {
	width: 100%;
}

.lokalizacja-panel__list {
	list-style: none;
	display: grid;
	gap: var(--space-sm);
	margin: var(--space-md) 0 0;
	padding: var(--space-md) 0 0;
	border-top: 1px solid var(--color-border);
}

.lokalizacja-panel__list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

.lokalizacja-panel__list .icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
	color: var(--color-accent);
}

.lokalizacja-panel__list a {
	color: inherit;
	text-decoration: none;
}

.lokalizacja-panel__list a:hover,
.lokalizacja-panel__list a:focus {
	color: var(--color-accent);
}

/* -------------------------------------------------- Specs & lists */
.specs {
	margin: var(--space-sm) 0;
}

.specs__row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-xs) 0;
	border-bottom: 1px solid var(--color-border);
}

.specs__label {
	color: var(--color-muted);
	margin: 0;
}

.specs__value {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.check-list {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--space-xs);
}

.check-list li::before {
	content: "—";
	margin-right: var(--space-xs);
	color: var(--color-accent);
}

.link-list {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--space-xs);
}

.link-list--inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.feature-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 600px) {
	.feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.feature-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.feature-grid--compact {
	gap: var(--space-sm);
}

.feature-grid--compact .feature-grid__item {
	padding: var(--space-sm) var(--space-md);
}

.feature-grid--compact .feature-grid__title {
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.feature-grid--compact .feature-grid__text {
	font-size: 0.9375rem;
}

.feature-grid__item {
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg);
}

.feature-grid__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--color-accent);
	color: #fff;
	font-weight: 700;
	margin-bottom: var(--space-xs);
}

.feature-grid__title {
	font-size: 1.0625rem;
	margin-bottom: var(--space-xs);
}

.feature-grid__text {
	color: var(--color-muted);
	margin: 0;
}

/* -------------------------------------------------- Gallery & plans */
.gallery {
	margin-block: var(--space-lg);
}

.gallery__grid,
.plans {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-sm);
	grid-template-columns: repeat(2, 1fr);
}

/* Floor descriptions are paragraphs, not thumbnails — they need the full width on phones. */
.plans {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
	.gallery__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.plans {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gallery__image,
.plans__image {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.plans__item {
	margin: 0;
}

.plans__caption {
	font-size: 0.9375rem;
	color: var(--color-muted);
	margin-top: var(--space-sm);
}

/* A floor described in words only still needs the frame the drawing would give it. */
.plans__item--text .plans__caption {
	margin-top: 0;
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	height: 100%;
}

.plans__title {
	font-size: 1.0625rem;
	color: var(--color-text);
	margin-bottom: var(--space-xs);
}

.plans__text {
	margin: 0;
}

.plans__file {
	display: inline-block;
	margin-top: var(--space-xs);
	font-weight: 600;
}

/* -------------------------------------------------- FAQ accordion */
.faq-layout {
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 900px) {
	.faq-layout {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
		gap: clamp(2rem, 5vw, 4rem);
		align-items: start;
	}

	.faq-layout__aside {
		position: sticky;
		top: calc(var(--header-total) + var(--space-sm));
	}
}

.faq-layout__note {
	color: var(--color-muted);
	max-width: 38ch;
}

.faq-layout__action {
	margin: var(--space-md) 0 0;
}

.faq {
	border-top: 1px solid var(--color-border);
}

.faq__item {
	border-bottom: 1px solid var(--color-border);
}

.faq__heading {
	margin: 0;
	font-size: 1rem;
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	width: 100%;
	padding: var(--space-md) 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	color: var(--color-text);
	cursor: pointer;
}

.faq__question:hover .faq__question-text,
.faq__question:focus-visible .faq__question-text {
	color: var(--color-accent);
}

.faq__icon {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.faq__icon::before,
.faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--color-accent);
	transform: translateY(-50%);
	transition: transform 0.2s ease;
}

.faq__icon::after {
	transform: translateY(-50%) rotate(90deg);
}

.faq__question[aria-expanded="true"] .faq__icon::after {
	transform: translateY(-50%) rotate(0deg);
}

.faq__answer {
	padding-bottom: var(--space-md);
	color: var(--color-muted);
	max-width: 68ch;
}

.faq__answer > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.faq__icon::before,
	.faq__icon::after {
		transition: none;
	}
}

/* -------------------------------------------------- Reviews */
.reviews {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 720px) {
	.reviews {
		grid-template-columns: repeat(2, 1fr);
	}
}

.reviews__item figure {
	position: relative;
	margin: 0;
	padding: var(--space-lg) var(--space-md) var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg);
	height: 100%;
}

.reviews__item figure::before {
	content: "\201C";
	position: absolute;
	top: 0.35rem;
	left: var(--space-md);
	font-size: 4rem;
	line-height: 1;
	color: var(--color-accent);
	opacity: 0.35;
}

.reviews__quote {
	position: relative;
	margin: 0 0 var(--space-xs);
}

.reviews__author {
	font-weight: 600;
	font-size: 0.9375rem;
}

.reviews__location {
	display: block;
	font-weight: 400;
	color: var(--color-muted);
}

/* -------------------------------------------------- CTA */
/* The photo sits under a scrim rather than replacing the dark band, so the colour token
   still shows if the image is slow or missing. Narrow screens get an even wash because the
   copy spans the full width; from 700px the gradient thins out to the right, where there is
   no text and the lit facade can come through. */
.section--cta {
	background-color: var(--color-dark);
	background-image:
		linear-gradient(rgba(14, 14, 14, 0.94), rgba(14, 14, 14, 0.86)),
		var(--cta-photo-sm);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

@media (min-width: 700px) {
	.section--cta {
		background-image:
			linear-gradient(
				100deg,
				rgba(14, 14, 14, 0.96) 0%,
				rgba(14, 14, 14, 0.92) 40%,
				rgba(14, 14, 14, 0.74) 72%,
				rgba(14, 14, 14, 0.6) 100%
			),
			var(--cta-photo);
	}
}

.cta {
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 900px) {
	.cta--with-form {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: clamp(2rem, 5vw, 4rem);
	}
}

.cta__title {
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	letter-spacing: -0.02em;
	max-width: 24ch;
	color: #fff;
}

.cta__text {
	color: rgba(255, 255, 255, 0.75);
	max-width: 55ch;
}

.cta__actions {
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
	margin: var(--space-md) 0 0;
}

.cta__phone {
	margin-left: 0.35rem;
	font-weight: 500;
	opacity: 0.85;
}

.cta__form {
	padding: clamp(1.5rem, 3vw, 2rem);
	background: #fff;
	color: var(--color-text);
	border-radius: var(--radius-lg);
}

/*
 * Fluent Forms is skinned per container, so every panel that embeds a form has to opt in or it
 * falls back to the plugin's own look. One selector list for all of them — adding a container here
 * is what keeps the forms identical across the site.
 */
.cta__form .form-wrapper {
	margin-top: 0;
}

.cta__form .ff-el-input--label label,
.cta__form .ff-el-form-control,
.cta__form .ff-el-form-check-content,
.quote__form .ff-el-input--label label,
.quote__form .ff-el-form-control,
.quote__form .ff-el-form-check-content,
.kontakt-stage__form .ff-el-input--label label,
.kontakt-stage__form .ff-el-form-control,
.kontakt-stage__form .ff-el-form-check-content,
.section--model-form .ff-el-input--label label,
.section--model-form .ff-el-form-control,
.section--model-form .ff-el-form-check-content,
.consult-popup__form .ff-el-input--label label,
.consult-popup__form .ff-el-form-control,
.consult-popup__form .ff-el-form-check-content {
	font: inherit;
}

.cta__form .ff-el-group,
.quote__form .ff-el-group,
.kontakt-stage__form .ff-el-group,
.section--model-form .ff-el-group,
.consult-popup__form .ff-el-group {
	margin-bottom: var(--space-sm) !important;
}

.cta__form .ff-el-input--label,
.quote__form .ff-el-input--label,
.kontakt-stage__form .ff-el-input--label,
.section--model-form .ff-el-input--label,
.consult-popup__form .ff-el-input--label {
	margin-bottom: 0.3rem !important;
}

.cta__form .ff-el-input--label label,
.quote__form .ff-el-input--label label,
.kontakt-stage__form .ff-el-input--label label,
.section--model-form .ff-el-input--label label,
.consult-popup__form .ff-el-input--label label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text);
}

.cta__form .ff-el-form-control,
.quote__form .ff-el-form-control,
.kontakt-stage__form .ff-el-form-control,
.section--model-form .ff-el-form-control,
.consult-popup__form .ff-el-form-control {
	width: 100%;
	padding: 0.7rem 0.9rem;
	min-height: 2.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: #fff;
	color: var(--color-text);
	font-size: 0.9375rem;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cta__form textarea.ff-el-form-control,
.quote__form textarea.ff-el-form-control,
.kontakt-stage__form textarea.ff-el-form-control,
.section--model-form textarea.ff-el-form-control,
.consult-popup__form textarea.ff-el-form-control {
	min-height: 5.5rem;
	resize: vertical;
}

.cta__form .ff-el-form-control:focus,
.quote__form .ff-el-form-control:focus,
.kontakt-stage__form .ff-el-form-control:focus,
.section--model-form .ff-el-form-control:focus,
.consult-popup__form .ff-el-form-control:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.18);
	outline: none;
}

.cta__form .ff-el-form-control::file-selector-button,
.quote__form .ff-el-form-control::file-selector-button,
.kontakt-stage__form .ff-el-form-control::file-selector-button,
.section--model-form .ff-el-form-control::file-selector-button,
.consult-popup__form .ff-el-form-control::file-selector-button {
	margin-right: 0.65rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
}

.cta__form .ff-btn-submit,
.cta__form .ff-btn.ff-btn-submit,
.quote__form .ff-btn-submit,
.quote__form .ff-btn.ff-btn-submit,
.kontakt-stage__form .ff-btn-submit,
.kontakt-stage__form .ff-btn.ff-btn-submit,
.section--model-form .ff-btn-submit,
.section--model-form .ff-btn.ff-btn-submit,
.consult-popup__form .ff-btn-submit,
.consult-popup__form .ff-btn.ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.85rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: #fff !important;
	/* The plugin ships its own family on the submit button, which read as a foreign control. */
	font-family: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.cta__form .ff-btn-submit:hover,
.cta__form .ff-btn-submit:focus,
.quote__form .ff-btn-submit:hover,
.quote__form .ff-btn-submit:focus,
.kontakt-stage__form .ff-btn-submit:hover,
.kontakt-stage__form .ff-btn-submit:focus,
.section--model-form .ff-btn-submit:hover,
.section--model-form .ff-btn-submit:focus,
.consult-popup__form .ff-btn-submit:hover,
.consult-popup__form .ff-btn-submit:focus {
	background: var(--color-accent-dark);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.cta__form .ff-btn-submit:hover,
	.cta__form .ff-btn-submit:focus,
	.quote__form .ff-btn-submit:hover,
	.quote__form .ff-btn-submit:focus,
	.kontakt-stage__form .ff-btn-submit:hover,
	.kontakt-stage__form .ff-btn-submit:focus,
	.section--model-form .ff-btn-submit:hover,
	.section--model-form .ff-btn-submit:focus,
	.consult-popup__form .ff-btn-submit:hover,
	.consult-popup__form .ff-btn-submit:focus {
		transform: none;
	}
}

.cta__form-note {
	margin: var(--space-sm) 0 0;
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
	color: var(--color-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.cta__form-note a {
	color: var(--color-accent-dark);
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------- Forms */
.form-block {
	margin-block: var(--space-lg);
}

.form-placeholder {
	padding: var(--space-sm);
	border: 1px dashed var(--color-border);
	color: var(--color-muted);
	border-radius: var(--radius);
}

.search-form {
	display: flex;
	gap: var(--space-xs);
	flex-wrap: wrap;
	align-items: flex-end;
}

.search-form__label {
	display: block;
	width: 100%;
	font-size: 0.875rem;
	color: var(--color-muted);
}

.search-form__input {
	flex: 1 1 220px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font: inherit;
}

.contact-layout {
	display: grid;
	gap: var(--space-lg);
	margin-block: var(--space-lg);
}

@media (min-width: 900px) {
	.contact-layout {
		grid-template-columns: 1fr 1fr;
	}
}

.contact-info__group + .contact-info__group {
	margin-top: var(--space-md);
}

.contact-info__title {
	font-size: 1.0625rem;
}

.contact-info__list {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--space-xs);
}

.contact-info__label {
	display: block;
	font-size: 0.8125rem;
	color: var(--color-muted);
}

.contact-info__note {
	display: block;
	color: var(--color-muted);
	font-size: 0.9375rem;
	margin-top: 0.25rem;
}

.contact-info__address {
	font-style: normal;
}

.map-embed iframe {
	width: 100%;
	min-height: 360px;
	border: 0;
	border-radius: var(--radius);
}

/* -------------------------------------------------- Kontakt page */
.page-single--kontakt {
	overflow: clip;
}

.kontakt-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
	background: var(--hero-surface);
	color: #fff;
}

.kontakt-hero__atmosphere {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.35;
	background-image:
		repeating-linear-gradient(
			-18deg,
			transparent 0,
			transparent 11px,
			rgba(255, 255, 255, 0.035) 11px,
			rgba(255, 255, 255, 0.035) 12px
		);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.85), transparent 72%);
}

.kontakt-hero__inner {
	position: relative;
	z-index: 1;
}

.kontakt-hero__brand {
	margin: 0 0 var(--space-sm);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.kontakt-hero__title {
	margin: 0 0 var(--space-sm);
	font-size: clamp(2.5rem, 6vw, 4rem);
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: #fff;
}

.kontakt-hero__text {
	margin: 0;
	max-width: 38ch;
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

.kontakt-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: var(--space-lg) 0 0;
}

.kontakt-hero__call {
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

.kontakt-hero__call:hover,
.kontakt-hero__call:focus {
	border-color: #fff;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

.kontakt-hero__call .icon {
	width: 1.1rem;
	height: 1.1rem;
}

.kontakt-intro {
	padding-block: var(--space-lg) 0;
}

.kontakt-stage {
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.kontakt-stage__grid {
	display: grid;
	gap: clamp(1.75rem, 4vw, 2.75rem);
	align-items: start;
}

@media (min-width: 960px) {
	.kontakt-stage__grid {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: clamp(2rem, 4vw, 3.5rem);
	}
}

.kontakt-stage__info,
.kontakt-stage__form {
	color: var(--color-text);
}

.kontakt-stage.has-reveal .kontakt-stage__info,
.kontakt-stage.has-reveal .kontakt-stage__form {
	opacity: 0;
	transform: translateY(1.1rem);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.kontakt-stage.has-reveal .kontakt-stage__info.is-visible,
.kontakt-stage.has-reveal .kontakt-stage__form.is-visible {
	opacity: 1;
	transform: none;
}

.kontakt-stage.has-reveal .kontakt-stage__form {
	transition-delay: 0.08s;
}

.page-single--kontakt .contact-info {
	position: relative;
	padding-left: 1.15rem;
}

.page-single--kontakt .contact-info::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35rem;
	bottom: 0.35rem;
	width: 3px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--color-accent) 0%, rgba(255, 90, 31, 0.15) 100%);
}

.contact-info__header {
	margin-bottom: var(--space-md);
}

.contact-info__eyebrow {
	margin: 0 0 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.contact-info__heading {
	margin: 0;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	letter-spacing: -0.02em;
	max-width: 16ch;
}

.contact-info__channels {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.15rem;
}

.contact-info__channel {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.85rem;
	align-items: start;
	padding: 0.85rem 0.35rem;
	border-bottom: 1px solid var(--color-border);
}

.contact-info__channel:last-child {
	border-bottom: 0;
}

.contact-info__icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(255, 90, 31, 0.1);
	color: var(--color-accent);
	flex-shrink: 0;
}

.contact-info__icon .icon {
	width: 1.15rem;
	height: 1.15rem;
}

.contact-info__value {
	display: block;
	margin: 0.15rem 0 0;
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
	line-height: 1.35;
}

a.contact-info__value:hover,
a.contact-info__value:focus {
	color: var(--color-accent);
}

.contact-info__map-link {
	display: inline-block;
	margin-top: 0.45rem;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.contact-info__hours {
	list-style: none;
	margin: 0.2rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.2rem;
	font-weight: 600;
	color: var(--color-text);
}

.kontakt-stage__form .form-block {
	margin: 0;
	padding: clamp(1.35rem, 3vw, 2rem);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background:
		linear-gradient(180deg, #fff 0%, var(--color-surface) 140%);
	box-shadow: 0 18px 40px rgba(18, 17, 15, 0.06);
}

.kontakt-stage__form .form-block__title {
	margin: 0 0 0.35rem;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	letter-spacing: -0.02em;
}

.kontakt-stage__form .form-block__description {
	margin: 0 0 var(--space-md);
	color: var(--color-muted);
	max-width: 42ch;
}

.kontakt-stage__form .form-wrapper {
	margin-top: var(--space-sm);
}

@media (prefers-reduced-motion: reduce) {
	.kontakt-stage.has-reveal .kontakt-stage__info,
	.kontakt-stage.has-reveal .kontakt-stage__form {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.kontakt-stage__form .ff-btn-submit:hover,
	.kontakt-stage__form .ff-btn-submit:focus,
	.button:hover {
		transform: none;
	}
}

/* -------------------------------------------------- Kariera archive */
/* Kill the default site-main top padding so the dark hero sits under the header. */
.site-main:has(> .page-archive--kariera) {
	padding-top: 0;
}

.page-archive--kariera {
	overflow: clip;
}

.kariera-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding: clamp(3.25rem, 7vw, 5.5rem) 0 clamp(2.75rem, 5vw, 4.25rem);
	background: var(--hero-surface);
	color: #fff;
}

.kariera-hero__atmosphere {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.35;
	background-image:
		repeating-linear-gradient(
			-18deg,
			transparent 0,
			transparent 11px,
			rgba(255, 255, 255, 0.035) 11px,
			rgba(255, 255, 255, 0.035) 12px
		);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.85), transparent 72%);
}

.kariera-hero__inner {
	position: relative;
	z-index: 1;
}

.kariera-hero__brand {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.kariera-hero__title {
	margin: 0 0 var(--space-sm);
	font-size: clamp(2.5rem, 6vw, 4rem);
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: #fff;
	max-width: 14ch;
}

.kariera-hero__text {
	margin: 0;
	max-width: 42ch;
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

.kariera-hero__text p {
	margin: 0 0 0.75rem;
}

.kariera-hero__text p:last-child {
	margin-bottom: 0;
}

.kariera-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: var(--space-lg) 0 0;
}

.kariera-hero__call {
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

.kariera-hero__call:hover,
.kariera-hero__call:focus {
	border-color: #fff;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

.kariera-hero__call .icon {
	width: 1.1rem;
	height: 1.1rem;
}

/* Job list — one column, so a single open position fills the band instead of sitting in a
   third of a card grid. The row layout below turns each card sideways once there is room. */
.job-list {
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 720px) {
	.job-list .card--job {
		flex-direction: row;
		align-items: stretch;
	}

	.job-list .card__body {
		padding: clamp(1.5rem, 3vw, 2.25rem);
	}

	.job-list .card__title {
		font-size: clamp(1.25rem, 2.4vw, 1.625rem);
		letter-spacing: -0.02em;
	}

	/* Side by side the tinted footer would read as a hole punched in the card, because the band
	   behind it is the same surface colour — the divider alone separates the two columns. */
	.job-list .card__aside {
		flex: 0 0 clamp(13rem, 26%, 17rem);
		justify-content: center;
		padding: clamp(1.5rem, 3vw, 2rem);
		border-top: 0;
		border-left: 1px solid var(--color-border);
		background: transparent;
	}
}

.job-list__subhead {
	margin: var(--space-xl) 0 var(--space-md);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-muted);
}

/* Closed offers stay legible but must not compete with the open ones above them. */
.job-list--closed .card--job,
.job-list--closed .card__aside {
	background: transparent;
}

.job-empty {
	display: grid;
	justify-items: start;
	gap: var(--space-sm);
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-lg);
	background: var(--color-bg);
}

.job-empty__icon {
	color: var(--color-accent);
}

.job-empty__icon .icon {
	width: 1.75rem;
	height: 1.75rem;
}

.job-empty__text {
	margin: 0;
	max-width: 52ch;
	font-size: 1.0625rem;
	color: var(--color-muted);
}

.job-empty__action {
	margin: 0;
}

/* -------------------------------------------------- Job single */
.job-panel {
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.job-panel__status {
	display: inline-flex;
	margin: 0 0 var(--space-md);
	padding: 0.25rem 0.7rem;
	border-radius: var(--radius-pill);
	background: rgba(26, 127, 75, 0.12);
	color: var(--color-positive);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.job-panel__status--closed {
	background: var(--color-bg);
	color: var(--color-muted);
}

.job-panel__facts {
	display: grid;
	gap: var(--space-sm);
	margin: 0;
}

.job-panel__fact dt {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.job-panel__fact dd {
	margin: 0.15rem 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

.job-panel__actions {
	margin: var(--space-md) 0 0;
}

.job-panel__actions .button {
	width: 100%;
}

.job-panel__closed {
	margin: var(--space-md) 0 0;
	font-size: 0.9375rem;
	color: var(--color-muted);
}

.job-panel__list {
	list-style: none;
	display: grid;
	gap: var(--space-sm);
	margin: var(--space-md) 0 0;
	padding: var(--space-md) 0 0;
	border-top: 1px solid var(--color-border);
}

.job-panel__list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9375rem;
	font-weight: 600;
	/* Long e-mail addresses would otherwise widen the sticky column. */
	min-width: 0;
}

.job-panel__list .icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
	color: var(--color-accent);
}

.job-panel__list a {
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.job-panel__list a:hover,
.job-panel__list a:focus {
	color: var(--color-accent);
}

.job-details {
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 800px) {
	.job-details {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-lg);
	}
}

.job-details__block {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg);
}

.job-details__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: var(--space-sm);
	font-size: 1.0625rem;
}

.job-details__icon {
	display: inline-flex;
	color: var(--color-accent);
}

.job-details__icon .icon {
	width: 1.25rem;
	height: 1.25rem;
}

.job-details__block .check-list {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-muted);
}

/* -------------------------------------------------- Filters & pagination */
.tax-filter__list,
.pagination__list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-md);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.tax-filter__link,
.pagination__list a,
.pagination__list .current {
	display: inline-block;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--color-text);
	font-size: 0.9375rem;
}

.tax-filter__link.is-active,
.pagination__list .current {
	border-color: var(--color-accent);
	color: var(--color-accent);
	font-weight: 600;
}

.pagination {
	margin-top: var(--space-lg);
}

/* -------------------------------------------------- Content */
.entry-content > * + * {
	margin-top: var(--space-sm);
}

.entry-content img {
	border-radius: var(--radius);
}

/* -------------------------------------------------- Long-form content */
.entry-content {
	font-size: 1.0625rem;
}

.entry-content > h2 {
	margin-top: var(--space-xl);
	font-size: clamp(1.375rem, 2.6vw, 1.75rem);
	letter-spacing: -0.01em;
}

.entry-content > h3 {
	margin-top: var(--space-lg);
	font-size: clamp(1.125rem, 2vw, 1.3125rem);
}

.entry-content > h2 + *,
.entry-content > h3 + * {
	margin-top: var(--space-sm);
}

.entry-content p {
	max-width: 68ch;
}

.entry-content a {
	color: var(--color-accent);
	text-underline-offset: 0.2em;
}

.entry-content ul,
.entry-content ol {
	max-width: 66ch;
	padding-left: 1.25rem;
	display: grid;
	gap: var(--space-xs);
}

.entry-content li > ul,
.entry-content li > ol {
	margin-top: var(--space-xs);
}

.entry-content figure {
	margin: var(--space-lg) 0;
}

.entry-content figcaption,
.wp-element-caption {
	margin-top: var(--space-xs);
	font-size: 0.875rem;
	color: var(--color-muted);
}

/* Checkmark list: core list block with the theme style applied. */
.entry-content .is-style-pama-check {
	list-style: none;
	padding-left: 0;
	gap: var(--space-sm);
}

.entry-content .is-style-pama-check li {
	position: relative;
	padding-left: 2rem;
}

.entry-content .is-style-pama-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 1.1rem;
	height: 0.6rem;
	border-left: 2px solid var(--color-accent);
	border-bottom: 2px solid var(--color-accent);
	transform: rotate(-45deg);
}

/* Numbered steps: the counter becomes a badge, the list stays a plain <ol> in the editor. */
.entry-content .is-style-pama-steps {
	list-style: none;
	padding-left: 0;
	counter-reset: pama-step;
	gap: var(--space-sm);
}

.entry-content .is-style-pama-steps > li {
	position: relative;
	padding-left: 3rem;
	counter-increment: pama-step;
	min-height: 2rem;
}

.entry-content .is-style-pama-steps > li::before {
	content: counter(pama-step);
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--color-accent);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
}

/*
 * Tables scroll sideways instead of breaking the layout on phones. The paired gradients are
 * the usual scroll-shadow trick: they only show while there is more table to the side.
 */
.wp-block-table {
	margin: var(--space-lg) 0;
	overflow-x: auto;
	max-width: 100%;
	contain: content;
	background:
		linear-gradient(to right, var(--color-bg) 40%, rgba(255, 255, 255, 0)) left center / 3rem 100% no-repeat,
		linear-gradient(to left, var(--color-bg) 40%, rgba(255, 255, 255, 0)) right center / 3rem 100% no-repeat,
		radial-gradient(farthest-side at 0 50%, rgba(18, 17, 15, 0.14), rgba(18, 17, 15, 0)) left center / 1rem 100% no-repeat,
		radial-gradient(farthest-side at 100% 50%, rgba(18, 17, 15, 0.14), rgba(18, 17, 15, 0)) right center / 1rem 100% no-repeat;
	background-attachment: local, local, scroll, scroll;
}

.wp-block-table table,
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	min-width: 32rem;
}

.wp-block-table th,
.wp-block-table td,
.entry-content th,
.entry-content td {
	padding: 0.7rem var(--space-sm);
	border: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead th,
.entry-content thead th {
	background: var(--color-dark);
	color: #fff;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-color: var(--color-dark);
}

.wp-block-table tbody tr:nth-child(even) td,
.entry-content tbody tr:nth-child(even) td {
	background: var(--color-surface);
}

.wp-block-table.is-style-pama-clean table {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
}

.wp-block-table.is-style-pama-clean th,
.wp-block-table.is-style-pama-clean td {
	border: 0;
	border-bottom: 1px solid var(--color-border);
}

.wp-block-table.is-style-pama-clean tbody tr:last-child td {
	border-bottom: 0;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--color-surface);
}

/* Callout and in-text CTA, both core group blocks with a theme style. */
.entry-content .is-style-pama-callout {
	margin: var(--space-lg) 0;
	padding: var(--space-md);
	border-left: 3px solid var(--color-accent);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	background: var(--color-surface);
}

.entry-content .is-style-pama-callout > *:first-child {
	margin-top: 0;
}

/*
 * Core's constrained group layout centres narrow children with !important, which pushes the
 * text of these boxes off-axis — hence the counter-!important here.
 */
.entry-content .is-style-pama-callout > *,
.entry-content .is-style-pama-cta > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 62ch;
}

/* Same dusk photo as the closing section, but a tighter scrim: these boxes are small and
   carry more text per pixel, so the image reads as texture rather than as a picture. */
.entry-content .is-style-pama-cta {
	margin: var(--space-xl) 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--radius-lg);
	background-color: var(--color-dark);
	background-image:
		linear-gradient(
			100deg,
			rgba(14, 14, 14, 0.97) 0%,
			rgba(14, 14, 14, 0.93) 50%,
			rgba(14, 14, 14, 0.78) 100%
		),
		var(--cta-photo-sm);
	/* Biased low so the short crop catches the lit windows rather than the dark roof. */
	background-position: 50% 65%;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
}

.entry-content .is-style-pama-cta :where(h2, h3, h4) {
	margin-top: 0;
	color: #fff;
}

.entry-content .is-style-pama-cta p {
	color: rgba(255, 255, 255, 0.78);
}

.entry-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	padding-left: 0;
	list-style: none;
	margin-top: var(--space-md);
}

.entry-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus-visible {
	background: var(--color-accent-dark);
}

.entry-content blockquote,
.entry-content .wp-block-quote {
	margin: var(--space-lg) 0;
	padding-left: var(--space-md);
	border-left: 3px solid var(--color-border);
	font-size: 1.125rem;
}

.entry-content .is-style-pama-quote {
	border-left: 0;
	padding: var(--space-md) var(--space-md) var(--space-md) 3.25rem;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	position: relative;
}

.entry-content .is-style-pama-quote::before {
	content: "\201C";
	position: absolute;
	left: var(--space-sm);
	top: 0.35em;
	font-size: 3rem;
	line-height: 1;
	color: var(--color-accent);
}

.entry-content .is-style-pama-quote cite {
	display: block;
	margin-top: var(--space-xs);
	font-size: 0.875rem;
	font-style: normal;
	color: var(--color-muted);
}

.entry-meta {
	color: var(--color-muted);
	font-size: 0.9375rem;
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

.entry-thumbnail {
	margin: 0 0 var(--space-md);
}

.post-navigation {
	display: flex;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-block: var(--space-lg);
	flex-wrap: wrap;
}

.empty-state {
	padding: var(--space-lg);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius);
	color: var(--color-muted);
}

/* Realizacje archive stub (admin-editable załączka) */
.archive-stub {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	max-width: 42rem;
}

.archive-stub .section__title {
	max-width: 18ch;
}

.archive-stub__text {
	margin-top: var(--space-sm);
	color: var(--color-muted);
	max-width: 65ch;
}

.archive-stub__text p {
	margin: 0 0 var(--space-sm);
}

.archive-stub__text p:last-child {
	margin-bottom: 0;
}

.archive-stub__actions {
	margin: var(--space-lg) 0 0;
}

/* Comments sit in the article content column — footer section, not a floating card. */
.comments {
	margin: var(--space-xl) 0 0;
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.comments__list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-md);
}

.comments__title {
	margin: 0 0 var(--space-sm);
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	letter-spacing: -0.02em;
}

.comment-respond,
#respond.comment-respond {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.comments__list + .comment-respond {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.comment-reply-title {
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	letter-spacing: -0.02em;
	margin: 0 0 0.35rem;
}

.comment-form,
.comment-notes {
	font-size: 0.9375rem;
}

.comment-notes {
	margin: 0 0 var(--space-sm);
	color: var(--color-muted);
	line-height: 1.45;
}

.comment-form p {
	display: grid;
	gap: 0.3rem;
	margin: 0 0 0.75rem;
}

.comment-form__row {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
}

.comment-form__row > p {
	margin-bottom: 0;
}

@media (min-width: 640px) {
	.comment-form__row {
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem 1rem;
	}
}

.comment-form label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text);
}

.comment-form .required {
	color: var(--color-accent);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: #fff;
	color: var(--color-text);
	font: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.18);
	outline: none;
}

.comment-form textarea {
	min-height: 7.5rem;
	resize: vertical;
}

.comment-form-cookies-consent {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0.55rem;
}

.comment-form-cookies-consent input {
	margin-top: 0.2rem;
}

.comment-form-cookies-consent label {
	font-weight: 500;
	color: var(--color-muted);
	line-height: 1.45;
}

.comment-form .form-submit {
	margin-top: 0.25rem;
	margin-bottom: 0;
}

.comment-form .comment-form__submit,
.comment-form .submit,
.comment-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: auto;
	padding: 0.85rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--color-dark);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.comment-form .comment-form__submit:hover,
.comment-form .comment-form__submit:focus-visible,
.comment-form .submit:hover,
.comment-form .submit:focus-visible,
.comment-form input[type="submit"]:hover,
.comment-form input[type="submit"]:focus-visible {
	background: var(--color-accent);
	color: #fff;
	transform: translateY(-1px);
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.comment-form .comment-form__submit:hover,
	.comment-form .comment-form__submit:focus-visible,
	.comment-form .submit:hover,
	.comment-form .submit:focus-visible,
	.comment-form input[type="submit"]:hover,
	.comment-form input[type="submit"]:focus-visible {
		transform: none;
	}
}

/* -------------------------------------------------- Footer */
.site-footer {
	background: var(--color-dark);
	color: rgba(255, 255, 255, 0.72);
	padding-block: var(--space-xl) var(--space-lg);
	/* Keeps the footer readable as its own block when the closing CTA is dark as well. */
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--color-accent);
}

.site-footer__top {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.site-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.site-footer__top {
		grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
		gap: clamp(2rem, 4vw, 4rem);
	}
}

.site-footer__brand {
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.01em;
	color: #fff;
	margin: 0 0 var(--space-xs);
}

.site-footer__logo {
	display: inline-block;
	margin-bottom: var(--space-xs);
}

.site-footer__logo-image {
	display: block;
	height: var(--logo-height);
	width: auto;
	max-width: none;
}

.site-footer__tagline {
	color: rgba(255, 255, 255, 0.6);
	max-width: 34ch;
}

.site-footer__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--space-xs);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.site-footer__phone .icon {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-accent);
	display: block;
	margin: 0;
}

.site-footer__phone span {
	line-height: 1;
	display: inline-block;
}

.site-footer__socials {
	list-style: none;
	margin: var(--space-md) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.social-link .icon {
	width: 1.25rem;
	height: 1.25rem;
}

.social-link:hover,
.social-link:focus-visible {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
	transform: translateY(-2px);
}

.social-link--pending {
	opacity: 0.55;
	cursor: default;
	pointer-events: none;
}

/* Keep the glyph white on the accent disc — footer link hover would otherwise tint it orange. */
.site-footer .social-link:hover,
.site-footer .social-link:focus,
.site-footer .social-link:focus-visible {
	color: #fff;
}

.site-footer__title {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: var(--space-sm);
}

.site-footer__list,
.site-footer__menu,
.site-footer__legal-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-xs);
	font-size: 0.9375rem;
}

.site-footer__note {
	color: rgba(255, 255, 255, 0.5);
}

/* A long main menu would stretch the footer, so it wraps into two link columns. */
@media (min-width: 1000px) {
	.site-footer__menu {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-md);
	}
}

.site-footer__areas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm) var(--space-md);
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__areas-title {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}

.site-footer__area-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

/*
 * Wide enough for both to share a line: the label holds the left edge and the pills run to the
 * right edge of the container, so the row is anchored at both ends instead of trailing off in the
 * middle. Narrower screens keep the plain wrap, where pushing the list right would only strand it.
 */
@media (min-width: 1000px) {
	.site-footer__areas {
		flex-wrap: nowrap;
		align-items: baseline;
	}

	.site-footer__areas-title {
		flex-shrink: 0;
	}

	.site-footer__areas .site-footer__area-list {
		margin-left: auto;
		justify-content: flex-end;
	}
}

.site-footer__area-list li {
	padding: 0.3rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-pill);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.78);
}

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: var(--space-sm);
	flex-wrap: wrap;
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.5);
}

.site-footer__copy {
	margin: 0;
}

.site-footer__legal-menu {
	display: flex;
	gap: var(--space-md);
}

.site-footer__nip {
	margin-left: var(--space-xs);
}

.site-footer .editor-hint {
	margin-top: var(--space-md);
	border-color: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.6);
}

@media (prefers-reduced-motion: reduce) {
	.social-link:hover,
	.social-link:focus-visible {
		transform: none;
	}
}

body.is-nav-open {
	overflow: hidden;
}

/* The drawer scrolls on its own; locking the root as well stops iOS from dragging the page under it. */
html:has(body.is-nav-open) {
	overflow: hidden;
}

/*
 * Locking the root suspends position: sticky, so on a scrolled page the header snapped back to the
 * top of the document — off screen, taking the close button with it. Pinning it to the viewport
 * keeps the control reachable and covers the drawer's top edge.
 */
body.is-nav-open .site-header {
	position: fixed;
	top: 0;
	left: 0;
	/* Measured against the viewport rather than the containing block, which the front page proved
	   can be wider than the screen and would push the close button out of reach. */
	width: min(100vw, 100%);
	background: var(--color-dark);
	/*
	 * These make the header a containing block for its fixed descendants, which collapses the
	 * drawer inside it — on the front page, once scrolled, the menu became a 128px sliver over the
	 * header instead of a full-screen panel. The header is opaque while the drawer is open, so
	 * none of them have anything left to do here.
	 */
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transform: none;
	filter: none;
}

/* Sits above the header, so it would punch through the open drawer. */
body.is-nav-open .cookie-bar {
	display: none;
}

/* -------------------------------------------------- Blog article */
/* site-main (space-lg) + section (section-space) stacked ~150–200px under the sticky header. */
body.single-post .site-main {
	padding-top: 0;
}

.article-head__inner {
	margin-top: var(--space-md);
}

.article-head__category {
	margin: 0 0 var(--space-xs);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.article-head__category a {
	color: var(--color-accent);
	text-decoration: none;
}

.article-head__title {
	font-size: clamp(1.875rem, 4.4vw, 3rem);
	letter-spacing: -0.02em;
	margin-bottom: var(--space-sm);
}

.article-head__lead {
	font-size: 1.125rem;
	color: var(--color-muted);
	max-width: 60ch;
}

.article-meta {
	list-style: none;
	margin: var(--space-md) 0 0;
	padding: var(--space-sm) 0 0;
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-lg);
	font-size: 0.875rem;
}

.article-meta li {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	align-items: center;
	column-gap: 0.65rem;
}

.article-meta .icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--color-accent);
	flex-shrink: 0;
	display: block;
	margin: 0;
	justify-self: center;
}

.article-meta__avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	flex-shrink: 0;
	justify-self: center;
	object-fit: cover;
}

.article-meta__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.article-head__media {
	margin-top: var(--space-lg);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.post-single {
	--article-aside: 320px;
	--article-gap: clamp(2.5rem, 5vw, 4.5rem);
}

.article-head__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.article-body {
	padding-top: var(--space-md);
}

.article-layout {
	display: grid;
	/* minmax(0,…) lets wide tables scroll inside their own box instead of stretching the grid. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-lg);
}

.article-layout__head,
.article-layout__main,
.article-layout__aside {
	min-width: 0;
}

.article-layout__aside {
	display: grid;
	gap: var(--space-md);
}

/*
 * On phones the order follows the markup: title, image, contents, article. From 1000px the head
 * and body share the left column while the sidebar spans both rows, so the table of contents
 * starts level with the title instead of below the hero image.
 */
@media (min-width: 1000px) {
	.article-layout {
		grid-template-columns: minmax(0, 1fr) minmax(260px, var(--article-aside));
		column-gap: var(--article-gap);
		row-gap: var(--space-lg);
		align-items: start;
	}

	.article-layout__head {
		grid-column: 1;
		grid-row: 1;
	}

	.article-layout__main {
		grid-column: 1;
		grid-row: 2;
	}

	.article-layout__aside {
		grid-column: 2;
		grid-row: 1 / span 2;
		position: sticky;
		top: calc(var(--header-total) + var(--space-sm));
		gap: var(--space-md);
	}
}

/*
 * Long service pages (regulamin, polityka prywatności, cookies, offer subpages) put the contents
 * list beside the copy. The hero already carries the title, so this is a plain two-column split
 * rather than the article's head/body/aside arrangement. Without the list it stays a single
 * column, so ordinary pages keep the full measure.
 */
.page-layout--has-aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-lg);
}

.page-layout__main,
.page-layout__aside {
	min-width: 0;
}

@media (min-width: 1000px) {
	.page-layout--has-aside {
		grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
		column-gap: clamp(2.5rem, 5vw, 4.5rem);
		align-items: start;
	}

	/* The list follows the copy in the markup order that suits phones, then swaps sides here. */
	.page-layout__main {
		grid-column: 1;
		grid-row: 1;
	}

	.page-layout__aside {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: calc(var(--header-total) + var(--space-sm));
	}
}

/* -------------------------------------------------- Table of contents */
.toc {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	padding: var(--space-sm) var(--space-md);
}

.toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	cursor: pointer;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-muted);
	list-style: none;
}

.toc__summary::-webkit-details-marker {
	display: none;
}

.toc__marker {
	position: relative;
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.toc__marker::before,
.toc__marker::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 2px;
	background: var(--color-accent);
	transform: translateY(-50%);
}

.toc__marker::after {
	transform: translateY(-50%) rotate(90deg);
	transition: opacity 0.2s ease;
}

.toc[open] .toc__marker::after {
	opacity: 0;
}

.toc__list {
	list-style: none;
	margin: var(--space-sm) 0 0;
	padding: 0;
	counter-reset: toc;
	display: grid;
	gap: 0.35rem;
	font-size: 0.9375rem;
}

.toc__item--level-3 {
	padding-left: var(--space-sm);
}

.toc__link {
	display: block;
	padding: 0.25rem 0;
	color: var(--color-text);
	text-decoration: none;
	border-left: 2px solid transparent;
	padding-left: 0.65rem;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.toc__link:hover,
.toc__link:focus-visible {
	color: var(--color-accent);
	border-left-color: var(--color-accent);
}

.toc__link.is-current {
	color: var(--color-accent);
	border-left-color: var(--color-accent);
	font-weight: 600;
}

/* -------------------------------------------------- Article sidebar CTA */
.article-cta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.85rem;
	padding: 1.25rem;
	border-radius: var(--radius-lg);
	background-color: var(--color-dark);
	background-image:
		linear-gradient(rgba(14, 14, 14, 0.96), rgba(14, 14, 14, 0.88)),
		var(--cta-photo-sm);
	background-position: 50% 65%;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
}

.article-cta__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

.article-cta__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.75);
}

.article-cta .button {
	width: 100%;
	margin: 0;
}

.article-cta__phone {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-decoration: none;
}

.article-cta__phone .icon {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-accent);
	display: block;
	margin: 0;
	flex-shrink: 0;
	/* Optical center — phone glyph sits slightly high in the 24 viewBox. */
	transform: translateY(1px);
}

.article-cta__phone span {
	line-height: 1;
	display: inline-block;
}

/* -------------------------------------------------- Article footer bits */
.entry-footer {
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.entry-footer__title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: var(--space-sm);
}

.tag-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.tag-list a {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: 0.8125rem;
	color: var(--color-muted);
	text-decoration: none;
}

.tag-list a:hover,
.tag-list a:focus {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.author-box {
	margin-top: var(--space-lg);
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	display: flex;
	gap: var(--space-md);
	align-items: flex-start;
}

.author-box__avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.author-box__name {
	margin: 0;
	font-weight: 700;
}

.author-box__bio {
	margin: 0.25rem 0 0;
	color: var(--color-muted);
	font-size: 0.9375rem;
}

/* -------------------------------------------------- Breadcrumbs */
.breadcrumbs {
	font-size: 0.8125rem;
	color: var(--color-muted);
	margin-bottom: var(--space-md);
}

/* Catalogue archives share the home «Nasze domy» column rhythm. */
.post-type-archive-dom .card-grid--domy,
.tax-typ_domu .card-grid--domy,
.tax-technologia .card-grid--domy {
	margin-block: var(--space-md) 0;
}

.breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.6rem;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	margin-right: 0.6rem;
	color: currentColor;
	opacity: 0.5;
}

.breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus {
	color: var(--color-accent);
}

.breadcrumbs--light {
	color: rgba(255, 255, 255, 0.7);
}

/* -------------------------------------------------- House model page */
/* The page opens with a full-bleed hero, so it cancels the main padding above it. */
.single--dom {
	margin-top: calc(var(--space-lg) * -1);
}

.dom-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(72vh, 680px);
	padding: 0;
	overflow: hidden;
}

.dom-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.dom-hero__image,
.dom-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dom-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.15) 30%, rgba(0, 0, 0, 0) 50%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 32%, rgba(0, 0, 0, 0) 70%);
}

.dom-hero__inner {
	position: relative;
	z-index: 1;
	/* Width comes from `.container` — do not cap below --container or the hero drifts off the site grid. */
	padding-block: var(--space-lg) var(--space-xl);
}

.dom-hero__label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: var(--space-lg) 0 var(--space-sm);
}

/* Same label on the model hero, kept in step with the one on the front page. */
.dom-hero__badge {
	padding: 0.35rem 0.85rem;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dom-hero__eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.dom-hero__title {
	max-width: min(18ch, 100%);
	font-size: clamp(1.625rem, 4.2vw + 0.4rem, 3.25rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #fff;
	margin-bottom: var(--space-sm);
	text-wrap: balance;
}

/* The single number a visitor compares between models, right under the heading. */
.dom-hero__measure {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: var(--space-sm);
	color: rgba(255, 255, 255, 0.75);
}

.dom-hero__measure strong {
	font-size: clamp(1.25rem, 2.6vw, 1.625rem);
	color: #fff;
}

.dom-hero__text {
	color: rgba(255, 255, 255, 0.82);
	max-width: 58ch;
	font-size: 1.0625rem;
}

.dom-hero__facts {
	list-style: none;
	margin: var(--space-lg) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-sm);
}

.dom-hero__facts li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
}

.dom-hero__facts .icon {
	width: 1.0625rem;
	height: 1.0625rem;
	color: var(--color-accent);
}

/* -------------------------------------------------- House model layout */
.dom-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-lg);
}

.dom-layout__main,
.dom-layout__aside,
.dom-layout__full {
	min-width: 0;
}

.dom-layout__full {
	margin-top: var(--space-xl);
}

/* On narrow screens the price and the call button come before the long description. */
.dom-layout__aside {
	order: -1;
}

@media (min-width: 1000px) {
	.dom-layout {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
		gap: clamp(1.75rem, 3.5vw, 3rem);
		align-items: start;
	}

	.dom-layout__aside {
		order: 0;
		position: sticky;
		top: calc(var(--header-total) + var(--space-sm));
		align-self: start;
	}
}

.dom-block {
	margin-top: var(--space-xl);
}

.dom-block:first-child {
	margin-top: 0;
}

.dom-block__title {
	position: relative;
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--color-border);
}

/* A short accent segment marks the section without drawing a heavy rule across the column. */
.dom-block__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 2.25rem;
	height: 2px;
	border-radius: 2px;
	background: var(--color-accent);
}

.dom-block__intro {
	color: var(--color-muted);
	max-width: 62ch;
}

.dom-block__subtitle {
	font-size: 1.0625rem;
	margin: var(--space-lg) 0 var(--space-sm);
}

.dom-block__text {
	max-width: 68ch;
}

.dom-block__text p {
	margin-bottom: var(--space-sm);
}

.dom-block__text p:last-child {
	margin-bottom: 0;
}

.dom-block__action {
	margin: var(--space-md) 0 0;
}

/* -------------------------------------------------- Model key figures */
.dom-stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	/* The gap doubles as a hairline grid: cells sit on a border-coloured backdrop. */
	background: var(--color-border);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.dom-stats__item {
	display: grid;
	gap: 0.15rem;
	padding: var(--space-md) var(--space-sm);
	background: var(--color-bg);
}

.dom-stats__icon {
	color: var(--color-accent);
	margin-bottom: 0.5rem;
}

.dom-stats__icon .icon {
	width: 1.25rem;
	height: 1.25rem;
}

.dom-stats__value {
	font-size: clamp(1.125rem, 2.4vw, 1.375rem);
	font-weight: 700;
	line-height: 1.2;
}

.dom-stats__label {
	font-size: 0.8125rem;
	color: var(--color-muted);
}

/*
 * O nas and Kariera open with these figures in the slot the front page fills with the USP strip,
 * so they borrow that band instead of the boxed card the model pages use: columns divided by
 * hairlines on a dark ground, no frame around the whole row.
 */
.dom-stats--strip {
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	/* Clears the eyebrow above by the same distance the front page leaves. */
	margin-top: var(--space-lg);
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.dom-stats--strip .dom-stats__item {
	padding: 0;
	background: none;
	gap: 0.25rem;
}

.dom-stats--strip .dom-stats__icon {
	margin-bottom: var(--space-sm);
}

.dom-stats--strip .dom-stats__icon .icon {
	width: 1.5rem;
	height: 1.5rem;
}

.dom-stats--strip .dom-stats__value {
	color: #fff;
}

.dom-stats--strip .dom-stats__label {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9375rem;
	line-height: 1.5;
}

@media (min-width: 640px) {
	.dom-stats--strip {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	/* auto-fit rather than a fixed four, because the client controls how many figures there are. */
	.dom-stats--strip {
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		gap: 0;
	}

	.dom-stats--strip .dom-stats__item {
		padding-inline: clamp(1rem, 2vw, 2rem);
		border-left: 1px solid rgba(255, 255, 255, 0.16);
	}

	.dom-stats--strip .dom-stats__item:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.dom-stats--strip .dom-stats__item:last-child {
		padding-right: 0;
	}
}

/* -------------------------------------------------- Model price block */
.dom-price {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

/* Bottom price section: distinct from the sticky conversion card — hero price moment. */
.dom-block--price-detail > .dom-block__title {
	margin-bottom: var(--space-lg);
}

.dom-price--detail {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	border: 1px solid var(--color-border);
	border-style: solid;
	background:
		linear-gradient(135deg, rgba(255, 90, 31, 0.06) 0%, transparent 42%),
		linear-gradient(180deg, #fff 0%, var(--color-surface) 120%);
	box-shadow: 0 14px 36px rgba(18, 17, 15, 0.05);
}

@media (min-width: 800px) {
	.dom-price--detail {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
		align-items: stretch;
		gap: clamp(1.75rem, 4vw, 2.75rem);
	}
}

.dom-price__hero {
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--color-border);
}

@media (min-width: 800px) {
	.dom-price__hero {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding-bottom: 0;
		padding-right: clamp(1rem, 2vw, 1.5rem);
		border-bottom: 0;
		border-right: 1px solid var(--color-border);
	}
}

.dom-block--price-detail .dom-price__amount {
	font-size: clamp(2.35rem, 6vw, 3.5rem);
	letter-spacing: -0.03em;
}

.dom-price__amount {
	margin: 0;
	font-size: clamp(1.875rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.05;
}

.dom-price__amount span {
	font-size: 0.42em;
	font-weight: 600;
	color: var(--color-muted);
	margin-left: 0.35rem;
	letter-spacing: 0;
}

.dom-price__vat {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--color-muted);
}

.dom-price__text {
	margin-top: 0;
	max-width: 62ch;
	color: var(--color-muted);
}

.dom-price__text p {
	margin-bottom: var(--space-xs);
}

.dom-price__text p:last-child {
	margin-bottom: 0;
}

.dom-price__action {
	margin: var(--space-md) 0 0;
}

.dom-block--build .dom-build {
	max-width: min(100%, 50rem);
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: 0 12px 32px rgba(18, 17, 15, 0.04);
}

.dom-block--build .dom-block__title {
	margin-bottom: var(--space-md);
}

.dom-build__text {
	max-width: 70ch;
	color: var(--color-text);
}

.dom-build__text p {
	margin-bottom: 0.85rem;
}

.dom-build__text p:last-child {
	margin-bottom: 0;
}

.dom-block--build .dom-block__action {
	margin-top: var(--space-lg);
}

/* Model lead form — match Kontakt form polish */
.section--model-form {
	background:
		radial-gradient(90% 70% at 0% 0%, rgba(255, 90, 31, 0.08), transparent 55%),
		var(--color-surface);
}

.section--model-form .form-block {
	margin: 0;
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background:
		linear-gradient(180deg, #fff 0%, var(--color-surface) 140%);
	box-shadow: 0 18px 40px rgba(18, 17, 15, 0.06);
}

.section--model-form .form-block__title {
	margin: 0 0 0.35rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	letter-spacing: -0.02em;
}

.section--model-form .form-block__description {
	margin: 0 0 var(--space-md);
	color: var(--color-muted);
	max-width: 46ch;
}

.section--model-form .form-wrapper {
	margin-top: var(--space-sm);
}

.check-list--columns {
	gap: var(--space-xs) var(--space-md);
}

@media (min-width: 640px) {
	.check-list--columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Spec rows read as one quiet card: an outline plus hairlines, no zebra stripes. */
.specs--table {
	margin: var(--space-md) 0 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg);
}

.specs--table .specs__row {
	align-items: baseline;
	padding: 0.85rem var(--space-md);
	border-bottom: 1px solid var(--color-border);
}

.specs--table .specs__row:last-child {
	border-bottom: 0;
}

.specs--table .specs__label {
	font-size: 0.9375rem;
}

.specs--table .specs__value {
	font-weight: 600;
}

/* Rows whose value is a sentence, not a number — those read better left aligned. */
.specs--wide .specs__value {
	text-align: left;
	font-weight: 500;
}

.specs--wide .specs__label {
	font-weight: 600;
	color: var(--color-text);
}

@media (min-width: 620px) {
	.specs--wide .specs__row {
		display: grid;
		grid-template-columns: minmax(140px, 30%) minmax(0, 1fr);
		gap: var(--space-md);
	}
}

/* -------------------------------------------------- Materials */
.material-grid {
	list-style: none;
	margin: var(--space-md) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 620px) {
	.material-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.material-grid__item {
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg);
}

.material-grid__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	margin-bottom: var(--space-sm);
	color: var(--color-accent);
	background: rgba(255, 90, 31, 0.1);
	border: 1px solid rgba(255, 90, 31, 0.22);
}

.material-grid__icon .icon {
	width: 1.25rem;
	height: 1.25rem;
}

.material-grid__title {
	font-size: 1.0625rem;
	margin-bottom: var(--space-xs);
}

.material-grid__text {
	margin: 0;
	color: var(--color-muted);
	font-size: 0.9375rem;
}

/* -------------------------------------------------- Price card */
.price-card {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg);
	box-shadow: 0 24px 48px -36px rgba(18, 17, 15, 0.5);
}

.price-card__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.price-card__basis {
	font-size: 0.5em;
	font-weight: 600;
	color: var(--color-muted);
	margin-left: 0.3rem;
}

.price-card__vat {
	margin: -0.25rem 0 var(--space-sm);
	font-size: 0.875rem;
	color: var(--color-muted);
}

.price-card__price {
	margin: 0.25rem 0 var(--space-sm);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.price-card__rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
	font-size: 0.9375rem;
	color: var(--color-muted);
}

.price-card__rows li {
	display: flex;
	justify-content: space-between;
	gap: var(--space-sm);
	padding-block: 0.35rem;
	border-top: 1px solid var(--color-border);
}

.price-card__rows strong {
	color: var(--color-text);
	white-space: nowrap;
}

.price-card__note {
	margin: var(--space-sm) 0 0;
	font-size: 0.875rem;
	color: var(--color-muted);
}

.price-card__actions {
	margin-top: var(--space-md);
	display: grid;
	gap: var(--space-sm);
	justify-items: center;
}

.price-card__actions .button {
	width: 100%;
}

.price-card__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--color-text);
}

.price-card__phone .icon {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-accent);
}

/* The facts are short enough to read as one line of key numbers; wrapping only kicks in when a
   third fact joins them. */
.price-card__facts {
	list-style: none;
	margin: var(--space-md) 0 0;
	padding: var(--space-md) 0 0;
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--space-md);
	row-gap: var(--space-xs);
	font-size: 0.9375rem;
}

.price-card__facts li,
.price-card__warranty {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.price-card__facts .icon,
.price-card__warranty .icon {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-accent);
	flex-shrink: 0;
}

.price-card__warranty {
	margin: var(--space-md) 0 0;
	font-size: 0.875rem;
	color: var(--color-muted);
}

/* -------------------------------------------------- Contact panel */
.contact-panel {
	display: grid;
	gap: var(--space-lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg);
}

@media (min-width: 780px) {
	.contact-panel {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		align-items: center;
	}
}

.contact-panel__title {
	font-size: clamp(1.375rem, 2.6vw, 1.875rem);
	margin-bottom: var(--space-xs);
}

.contact-panel__text {
	color: var(--color-muted);
	max-width: 52ch;
}

.contact-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.contact-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-sm);
}

.contact-panel__list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
}

.contact-panel__list .icon {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-accent);
	flex-shrink: 0;
}

.contact-panel__list a {
	color: inherit;
	text-decoration: none;
}

.contact-panel__list a:hover,
.contact-panel__list a:focus {
	color: var(--color-accent);
}

/* -------------------------------------------------- Carousel */
.carousel__title {
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	margin-bottom: var(--space-md);
}

.carousel__frame {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface);
	max-width: 100%;
	contain: content;
}

.carousel__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	min-width: 0;
	max-width: 100%;
	contain: content;
}

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

.carousel__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.carousel__image {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: rgba(14, 14, 14, 0.7);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.carousel__arrow:hover:not(:disabled),
.carousel__arrow:focus-visible:not(:disabled) {
	background: var(--color-accent);
}

.carousel__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.carousel__arrow--prev {
	left: var(--space-sm);
}

.carousel__arrow--prev .icon {
	transform: rotate(180deg);
}

.carousel__arrow--next {
	right: var(--space-sm);
}

.carousel__counter {
	position: absolute;
	right: var(--space-sm);
	bottom: var(--space-sm);
	margin: 0;
	padding: 0.25rem 0.7rem;
	border-radius: var(--radius-pill);
	background: rgba(14, 14, 14, 0.7);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
}

.carousel__thumbs {
	list-style: none;
	margin: var(--space-sm) 0 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	overflow-x: auto;
	scrollbar-width: none;
	max-width: 100%;
	min-width: 0;
	contain: content;
}

.carousel__thumbs > li {
	flex: 0 0 auto;
}

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

.carousel__thumb {
	display: block;
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--radius);
	background: none;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
	opacity: 0.6;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.carousel__thumb img {
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.carousel__thumb.is-active,
.carousel__thumb:hover,
.carousel__thumb:focus-visible {
	opacity: 1;
	border-color: var(--color-accent);
}

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

/* -------------------------------------------------- Contact widget */
.contact-widget {
	position: fixed;
	z-index: 70;
	right: var(--space-sm);
	bottom: var(--space-sm);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-xs);
}

/* The cookie bar owns the bottom edge until the visitor answers it. */
body.has-cookie-bar .contact-widget {
	bottom: calc(var(--cookie-bar-height, 8rem) + var(--space-sm) * 2);
}

/* The open mobile menu is a full-screen layer; the widget would float on top of it. */
body.is-nav-open .contact-widget {
	display: none;
}

.contact-widget__launcher {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: 0.75rem 1.25rem 0.75rem 0.9rem;
	/* The hairline keeps the edge visible where the pill lands on a white card. */
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--radius-pill);
	/* White keeps the widget readable on both the dark hero and the light sections, and
	   leaves the accent colour to the CTA buttons. */
	background: #fff;
	color: var(--color-text);
	font: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-widget__launcher:hover,
.contact-widget__launcher:focus-visible {
	box-shadow: 0 22px 45px -16px rgba(0, 0, 0, 0.55);
	transform: translateY(-2px);
}

.contact-widget__launcher-icon {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--color-accent);
	color: #fff;
}

.contact-widget__launcher-icon .icon {
	grid-area: 1 / 1;
	width: 1.1rem;
	height: 1.1rem;
}

/* Second glyph is the "close" state of the same button. */
.contact-widget__launcher-icon .icon--zamknij,
.contact-widget.is-open .contact-widget__launcher-icon .icon--rozmowa {
	opacity: 0;
}

.contact-widget.is-open .contact-widget__launcher-icon .icon--zamknij {
	opacity: 1;
}

.contact-widget__panel {
	position: relative;
	width: min(21rem, calc(100vw - var(--space-sm) * 2));
	/* Short screens (landscape phones) scroll the panel instead of pushing it off the top. */
	max-height: calc(100svh - 7rem);
	overflow-y: auto;
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	background: #fff;
	color: var(--color-text);
	box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.55);
	animation: pama-widget-in 0.2s ease;
}

@keyframes pama-widget-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

.contact-widget__close {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-muted);
	cursor: pointer;
}

.contact-widget__close:hover,
.contact-widget__close:focus-visible {
	color: var(--color-text);
}

.contact-widget__close .icon {
	width: 1rem;
	height: 1rem;
}

.contact-widget__title {
	margin: 0 2rem 0.5rem 0;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.contact-widget__message {
	padding: var(--space-sm);
	border-radius: var(--radius);
	background: var(--color-surface);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.contact-widget__message p {
	margin: 0;
}

.contact-widget__message .contact-widget__author {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--space-xs);
	color: var(--color-muted);
	font-size: 0.8125rem;
}

.contact-widget__avatar {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	object-fit: cover;
}

.contact-widget__channels {
	list-style: none;
	margin: var(--space-sm) 0 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

.contact-widget__channel {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.contact-widget__channel:hover,
.contact-widget__channel:focus-visible {
	border-color: var(--color-accent);
	background: var(--color-surface);
}

.contact-widget__channel-icon {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-text);
	flex-shrink: 0;
}

.contact-widget__channel-icon .icon {
	width: 1.15rem;
	height: 1.15rem;
}

/* Brand colours make the channels recognisable at a glance. */
.contact-widget__channel--whatsapp .contact-widget__channel-icon {
	background: #25d366;
	color: #fff;
}

.contact-widget__channel--telegram .contact-widget__channel-icon {
	background: #29a9eb;
	color: #fff;
}

.contact-widget__channel--messenger .contact-widget__channel-icon {
	background: #0084ff;
	color: #fff;
}

.contact-widget__channel--telefon .contact-widget__channel-icon,
.contact-widget__channel--formularz .contact-widget__channel-icon {
	background: var(--color-accent);
	color: #fff;
}

.contact-widget__channel-text {
	display: grid;
	gap: 0.1rem;
	font-size: 0.9375rem;
	min-width: 0;
}

.contact-widget__channel-text span {
	color: var(--color-muted);
	font-size: 0.8125rem;
	overflow-wrap: anywhere;
}

.contact-widget__note {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: var(--space-sm) 0 0;
	color: var(--color-muted);
	font-size: 0.8125rem;
}

.contact-widget__note .icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

@media (max-width: 599px) {
	/* Only the icon fits next to the content on a phone. */
	.contact-widget__launcher-label {
		display: none;
	}

	/*
	 * Without its label the pill collapsed to a white lozenge with a small orange dot inside,
	 * which floating over the page read as a rendering fault rather than a button. A phone has one
	 * convention for this and it is a round accent button, so the launcher becomes one: the frame
	 * around the glyph is dropped and the button itself takes the colour.
	 */
	.contact-widget__launcher {
		width: 56px;
		height: 56px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
		border-color: transparent;
		background: var(--color-accent);
		color: #fff;
	}

	.contact-widget__launcher-icon {
		width: 1.5rem;
		height: 1.5rem;
		background: none;
		color: inherit;
	}

	.contact-widget__launcher-icon .icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	/*
	 * The consent notice is a full-width card down here, so there is no corner left to sit in.
	 * Stacking above it stranded the button a third of the way up the screen, detached from any
	 * edge. It waits instead, and docks as soon as the visitor answers.
	 */
	body.has-cookie-bar .contact-widget {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact-widget__launcher,
	.contact-widget__panel {
		transition: none;
		animation: none;
	}
}

/* -------------------------------------------------- Consultation popup */
.consult-popup {
	position: fixed;
	inset: 0;
	/* Over the contact widget and under the cookie bar, which must stay answerable. */
	z-index: 75;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-sm);
}

.consult-popup[hidden] {
	display: none;
}

.consult-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 14, 14, 0.6);
	animation: pama-fade-in 0.25s ease;
}

.consult-popup__dialog {
	position: relative;
	width: min(30rem, 100%);
	/* Short screens scroll the dialog rather than pushing its top off the viewport. */
	max-height: calc(100svh - var(--space-sm) * 2);
	overflow-y: auto;
	padding: var(--space-lg);
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.6);
	animation: pama-widget-in 0.25s ease;
}

.consult-popup__close {
	position: absolute;
	top: var(--space-sm);
	right: var(--space-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-text);
	cursor: pointer;
	transition: background 0.2s ease;
}

.consult-popup__close:hover,
.consult-popup__close:focus-visible {
	background: var(--color-border);
}

.consult-popup__eyebrow {
	margin: 0 0 var(--space-xs);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.consult-popup__title {
	/* Clears the close button, which overlaps the first line on a narrow dialog. */
	margin: 0 2.5rem var(--space-xs) 0;
	font-size: clamp(1.375rem, 4vw, 1.75rem);
	letter-spacing: -0.01em;
}

.consult-popup__text {
	margin: 0 0 var(--space-md);
	color: var(--color-muted);
}

.consult-popup__actions .button {
	width: 100%;
}

.consult-popup__phone {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: var(--space-md) 0 0;
	font-weight: 700;
}

.consult-popup__phone .icon {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-accent);
}

.consult-popup__phone a {
	color: inherit;
	text-decoration: none;
}

.consult-popup__phone a:hover,
.consult-popup__phone a:focus-visible {
	color: var(--color-accent);
}

.consult-popup__note {
	margin: var(--space-xs) 0 0;
	font-size: 0.8125rem;
	color: var(--color-muted);
}

/* On a phone the dialog is a sheet on the bottom edge, where the thumb already is. */
@media (max-width: 599px) {
	.consult-popup {
		align-items: flex-end;
		padding: 0;
	}

	.consult-popup__dialog {
		width: 100%;
		max-height: 88svh;
		padding: var(--space-md);
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		animation: pama-sheet-in 0.28s ease;
	}
}

@keyframes pama-fade-in {
	from {
		opacity: 0;
	}
}

@keyframes pama-sheet-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.consult-popup__backdrop,
	.consult-popup__dialog {
		animation: none;
	}
}

/* -------------------------------------------------- Cookie bar */
.cookie-bar {
	position: fixed;
	z-index: 80;
	left: var(--space-sm);
	right: var(--space-sm);
	bottom: var(--space-sm);
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	/* Translucent rather than solid, so the notice reads as a layer over the page instead of a
	   slab covering it. The blur keeps the copy legible over whatever it lands on. */
	background: rgba(14, 14, 14, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.78);
	box-shadow: 0 28px 60px -30px rgba(0, 0, 0, 0.75);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.cookie-bar.is-visible {
	opacity: 1;
	transform: none;
}

.cookie-bar__inner {
	width: min(100%, var(--container));
	margin-inline: auto;
	display: grid;
	gap: var(--space-md);
}

/* A third of a phone screen for a consent notice is too much; the desktop card is already small. */
@media (max-width: 599px) {
	.cookie-bar {
		padding: var(--space-sm);
	}

	.cookie-bar__inner {
		gap: var(--space-sm);
	}

	.cookie-bar__text {
		font-size: 0.875rem;
	}
}

/*
 * On wide screens the notice is a compact card in the free bottom-left corner rather than a band
 * across the whole page — the contact widget owns the opposite corner.
 */
@media (min-width: 860px) {
	.cookie-bar {
		right: auto;
		max-width: 25rem;
		padding: var(--space-sm) var(--space-md) var(--space-md);
	}

	.cookie-bar__inner {
		gap: var(--space-sm);
	}

	.cookie-bar__title {
		font-size: 0.9375rem;
	}

	.cookie-bar__text {
		font-size: 0.875rem;
	}

	/* The card sits in the opposite corner now, so the widget stays where it belongs. */
	body.has-cookie-bar .contact-widget {
		bottom: var(--space-sm);
	}
}

.cookie-bar__title {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}

.cookie-bar__text {
	margin: 0;
	font-size: 0.9375rem;
	max-width: 78ch;
}

.cookie-bar__text a {
	color: #fff;
	text-underline-offset: 0.2em;
}

.cookie-bar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.cookie-bar__actions .button--ghost {
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
}

.cookie-bar__actions .button--ghost:hover,
.cookie-bar__actions .button--ghost:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.site-footer__cookies {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.8125rem;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.site-footer__cookies:hover,
.site-footer__cookies:focus-visible {
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.cookie-bar {
		transition: none;
	}
}

/* -------------------------------------------------- Utilities */
.alignwide {
	width: min(100%, 1200px);
	margin-inline: auto;
}

.alignfull {
	width: 100%;
}

/* -------------------------------------------------- Pill chips (link badges + share bar) */
.chip-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
}

.chip-row--lg {
	margin-top: var(--space-md);
	gap: 0.6rem;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.95rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-bg);
	color: var(--color-text);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.15;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.chip:hover,
.chip:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.chip--accent {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

.chip--accent:hover,
.chip--accent:focus-visible {
	background: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: #fff;
}

/* Share bar under blog articles: label + channel chips on the left, views on the right. */
.share-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.share-bar__label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.share-bar__views {
	margin-left: auto;
	color: var(--color-muted);
	font-size: 0.875rem;
	white-space: nowrap;
}

.share-bar__copy.is-copied {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

@media (max-width: 599px) {
	.share-bar__views {
		margin-left: 0;
	}
}

/* Chip links inside .entry-content must beat the default `.entry-content a` colour. */
.entry-content a.chip,
.entry-content a.chip:visited {
	color: var(--color-text);
	text-decoration: none;
}

.entry-content a.chip:hover,
.entry-content a.chip:focus-visible {
	color: var(--color-accent);
}

.entry-content a.chip--accent,
.entry-content a.chip--accent:visited,
.entry-content a.chip--accent:hover,
.entry-content a.chip--accent:focus-visible {
	color: #fff;
}