/*
Theme Name: Monimex
Theme URI: https://www.monimex.bg/
Author: Monimex
Description: Двуезична тема (BG/EN) за Монимекс ЕООД — строителство и инженеринг. Проекти, новини, за нас и контакти, изцяло редактируеми от администрацията.
Version: 1.2.1
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: monimex
Tags: construction, business, bilingual, custom-menu, translation-ready
*/

/* ---------------------------------------------------------------------------
   Design tokens. The palette keeps the warm taupe of the previous site as the
   accent and pairs it with a graphite/paper base, so the photography carries
   the colour.
   --------------------------------------------------------------------------- */

:root {
	--paper: #ffffff;
	--paper-2: #f6f4f1;
	--paper-3: #ece8e3;
	--ink: #14181c;
	--ink-2: #2b3239;
	--muted: #6b7480;
	--line: #dfdad3;
	--line-dark: #2c3238;

	--graphite: #14181c;
	--graphite-2: #1b2126;
	--graphite-3: #262d34;

	--accent: #c0a595;
	--accent-2: #a8836b;
	--accent-ink: #16110d;

	--font-sans: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
	--tracking-tight: -0.02em;

	--wrap: 1200px;
	--wrap-narrow: 760px;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--section-y: clamp(4rem, 9vw, 8rem);
	--radius: 2px;

	--shadow-lg: 0 20px 50px -20px rgb(20 24 28 / 0.35);
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/* The browser hides [hidden] with `display: none`, which any component rule
   setting a display beats on specificity — so an element told to hide stays on
   screen. The scripts here hide things by setting the attribute, so this has to
   win outright. */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
iframe {
	max-width: 100%;
	display: block;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-color: currentColor;
}

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

h1,
h2,
h3,
h4 {
	margin: 0;
	line-height: 1.1;
	letter-spacing: var(--tracking-tight);
	font-weight: 650;
	text-wrap: balance;
}

p {
	margin: 0;
	text-wrap: pretty;
}

ul {
	margin: 0;
	padding: 0;
}

/* --- Layout helpers ------------------------------------------------------ */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap-narrow {
	max-width: var(--wrap-narrow);
}

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

.section--tight {
	padding-block: clamp(3rem, 6vw, 5rem);
}

.section--paper {
	background: var(--paper-2);
}

.section--dark {
	background: var(--graphite);
	color: #eef0f2;
}

.stack > * + * {
	margin-top: var(--stack-gap, 1rem);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--accent);
	color: var(--accent-ink);
	padding: 0.75rem 1.25rem;
	font-weight: 600;
}

.skip-link:focus {
	left: 0;
}

/* --- Type scale ---------------------------------------------------------- */

.display {
	font-size: clamp(2.5rem, 1.4rem + 5vw, 5rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.02;
}

.h1 {
	font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
	letter-spacing: -0.03em;
}

.h2 {
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
	letter-spacing: -0.025em;
}

.h3 {
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
	font-weight: 640;
}

.lead {
	font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
	line-height: 1.55;
	color: var(--ink-2);
}

.section--dark .lead {
	color: #c4ccd4;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.75rem;
	font-weight: 640;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-2);
}

.eyebrow::before {
	content: '';
	width: 1.75rem;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

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

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

/* --- Buttons ------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.9rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font: inherit;
	font-weight: 620;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
		color 0.2s var(--ease), transform 0.2s var(--ease);
}

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

.btn--primary {
	background: var(--accent);
	color: var(--accent-ink);
}

.btn--primary:hover {
	background: #cdb5a6;
}

.btn--ghost {
	border-color: color-mix(in srgb, currentColor 30%, transparent);
	color: inherit;
}

.btn--ghost:hover {
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.btn--dark {
	background: var(--ink);
	color: #fff;
}

.btn--dark:hover {
	background: var(--ink-2);
}

.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 620;
	font-size: 0.9375rem;
	text-decoration: none;
	color: var(--ink);
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
	padding-bottom: 0.2rem;
	transition: gap 0.2s var(--ease), border-color 0.2s var(--ease);
}

.arrow-link:hover {
	gap: 0.85rem;
	border-color: var(--accent-2);
}

.section--dark .arrow-link {
	color: #eef0f2;
	border-color: color-mix(in srgb, #eef0f2 30%, transparent);
}

.arrow-link svg {
	flex: none;
}

/* --- Section heading block ----------------------------------------------- */

.section-head {
	display: grid;
	gap: 1rem;
	max-width: 62ch;
	margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.section-head--split {
	max-width: none;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	gap: 1.25rem;
}

@media (min-width: 900px) {
	.section-head--split {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		column-gap: clamp(2rem, 6vw, 6rem);
	}
}

/* --- Utility ------------------------------------------------------------- */

.visually-hidden,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* --- Site header --------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--graphite) 92%, transparent);
	backdrop-filter: blur(10px);
	color: #eef0f2;
	border-bottom: 1px solid transparent;
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.site-header[data-scrolled] {
	background: var(--graphite);
	border-bottom-color: var(--line-dark);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	/* With the name beside the compass rather than under it, the logo is wide and
	   shallow, so the header no longer has to be tall for the type to read. It
	   still tightens a little once the page is scrolled. */
	min-height: 6rem;
	transition: min-height 0.25s var(--ease);
}

.site-header[data-scrolled] .site-header__inner {
	min-height: 4.5rem;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: inherit;
	flex: none;
}

.brand__mark {
	width: 1.75rem;
	height: 1.75rem;
	color: var(--accent);
	flex: none;
}

.brand__logo {
	max-height: 4.5rem;
	width: auto;
}

/* The logo is one ink drawn with currentColor, so the palette decides its colour
   and the artwork's original navy never enters the site. */
.brand__logo-svg {
	color: var(--accent);
	height: 4rem;
	width: auto;
	flex: none;
	display: block;
	transition: height 0.25s var(--ease);
}

.site-header[data-scrolled] .brand__logo,
.site-header[data-scrolled] .brand__logo-svg {
	height: 3rem;
	max-height: 3rem;
}

/* Same breakpoint the navigation collapses at, so the header changes shape once
   rather than twice. */
@media (max-width: 860px) {
	.site-header__inner,
	.site-header[data-scrolled] .site-header__inner {
		min-height: 5rem;
	}

	.brand__logo,
	.brand__logo-svg,
	.site-header[data-scrolled] .brand__logo,
	.site-header[data-scrolled] .brand__logo-svg {
		height: 2.6rem;
		max-height: 2.6rem;
	}

	.site-footer__logo {
		height: 5rem;
	}
}

/* The wide lockup would crowd the burger on a narrow phone. */
@media (max-width: 400px) {
	.brand__logo,
	.brand__logo-svg,
	.site-header[data-scrolled] .brand__logo,
	.site-header[data-scrolled] .brand__logo-svg {
		height: 2.2rem;
		max-height: 2.2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header__inner,
	.brand__logo-svg {
		transition: none;
	}
}

.brand__text {
	display: grid;
	line-height: 1.05;
}

.brand__name {
	font-weight: 700;
	letter-spacing: 0.14em;
	font-size: 1.0625rem;
}

.brand__sub {
	font-size: 0.625rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--accent);
	opacity: 0.85;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2rem);
	list-style: none;
}

.site-nav__list a {
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 560;
	color: #d5dade;
	padding-block: 0.35rem;
	border-bottom: 1px solid transparent;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
	display: block;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-nav__list .current-menu-parent > a,
.site-nav__list a[aria-current='page'] {
	color: #fff;
	border-bottom-color: var(--accent);
}

.lang-switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.3rem 0.55rem;
	border: 1px solid color-mix(in srgb, #eef0f2 25%, transparent);
	border-radius: var(--radius);
	font-size: 0.75rem;
	font-weight: 680;
	letter-spacing: 0.08em;
	text-decoration: none;
	color: #eef0f2;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.lang-switch:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

.burger {
	display: none;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.7rem 0.6rem;
	background: none;
	border: 1px solid color-mix(in srgb, #eef0f2 22%, transparent);
	border-radius: var(--radius);
	cursor: pointer;
}

.burger span {
	display: block;
	height: 1.5px;
	background: #eef0f2;
	transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.burger span + span {
	margin-top: 0.32rem;
}

.burger[aria-expanded='true'] span:nth-child(1) {
	transform: translateY(0.47rem) rotate(45deg);
}

.burger[aria-expanded='true'] span:nth-child(2) {
	opacity: 0;
}

.burger[aria-expanded='true'] span:nth-child(3) {
	transform: translateY(-0.47rem) rotate(-45deg);
}

@media (max-width: 860px) {
	.burger {
		display: block;
	}

	.site-nav {
		position: fixed;
		inset: 4.5rem 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--graphite);
		border-bottom: 1px solid var(--line-dark);
		padding: 0.5rem var(--gutter) 1.5rem;
		transform: translateY(-120%);
		visibility: hidden;
		transition: transform 0.3s var(--ease), visibility 0.3s;
		max-height: calc(100vh - 4.5rem);
		overflow-y: auto;
	}

	.site-nav[data-open] {
		transform: translateY(0);
		visibility: visible;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav__list a {
		display: block;
		padding: 0.95rem 0;
		font-size: 1.0625rem;
		border-bottom: 1px solid var(--line-dark);
	}

	.site-nav__list a:hover,
	.site-nav__list .current-menu-item > a,
	.site-nav__list .current_page_item > a {
		border-bottom-color: var(--line-dark);
		color: var(--accent);
	}

	.lang-switch {
		align-self: flex-start;
		margin-top: 1.25rem;
		padding: 0.5rem 0.9rem;
	}
}

/* --- Site footer --------------------------------------------------------- */

.site-footer {
	background: var(--graphite);
	color: #c9d0d6;
	padding-top: clamp(3rem, 6vw, 5rem);
	font-size: 0.9375rem;
}

.site-footer__inner {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

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

.site-footer__mark {
	width: 2rem;
	height: 2rem;
	color: var(--accent);
	margin-bottom: 0.9rem;
}

/* Room down here, so the logo runs larger than in the header. */
.site-footer__lockup {
	display: inline-block;
	text-align: center;
}

.site-footer__logo {
	height: 6.5rem;
	width: auto;
	max-width: 100%;
	color: var(--accent);
	display: block;
	margin: 0 auto 0.6rem;
}

.site-footer__lockup .site-footer__tagline {
	margin-top: 0;
	max-width: none;
}

.site-footer__tagline {
	color: var(--muted);
	margin-top: 0.35rem;
	max-width: 34ch;
}

.site-footer__title {
	font-size: 0.75rem;
	font-weight: 660;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 1rem;
}

.site-footer__col ul {
	list-style: none;
	display: grid;
	gap: 0.55rem;
}

.site-footer__col a {
	text-decoration: none;
	transition: color 0.2s var(--ease);
}

.site-footer__col a:hover {
	color: #fff;
	text-decoration: underline;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--line-dark);
	color: var(--muted);
	font-size: 0.875rem;
}

.site-footer__top {
	text-decoration: none;
}

.site-footer__top:hover {
	color: #fff;
}

/* Copyright stays left; the privacy notice and the back-to-top link sit
   together on the right rather than being spread across the bar. */
.site-footer__bottom > p {
	margin-right: auto;
}

.site-footer__legal {
	color: inherit;
}

.site-footer__legal:hover {
	color: #fff;
}

/* --- Project card -------------------------------------------------------- */

.card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
		transform 0.25s var(--ease);
}

.card:hover {
	border-color: var(--accent);
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}

.card__link {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--paper-3);
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

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

.card__period {
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--graphite);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 620;
	letter-spacing: 0.08em;
	padding: 0.4rem 0.75rem;
}

.card__body {
	display: grid;
	align-content: start;
	gap: 0.4rem;
	padding: 1.35rem 1.4rem 1.5rem;
}

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

.card__value {
	font-size: 0.9375rem;
	font-weight: 620;
	color: var(--ink-2);
	margin-top: 0.35rem;
}

.card__share {
	font-weight: 450;
	color: var(--muted);
}

.card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.9rem;
	font-size: 0.875rem;
	font-weight: 620;
	color: var(--accent-2);
	transition: gap 0.2s var(--ease);
}

.card:hover .card__cta {
	gap: 0.8rem;
}

/* --- Page hero ----------------------------------------------------------- */

.page-hero {
	position: relative;
	background: var(--graphite);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.page-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.28;
	z-index: -1;
	filter: grayscale(0.35);
}

.page-hero[data-has-image]::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(20 24 28 / 0.5) 0%, rgb(20 24 28 / 0.92) 100%);
	z-index: -1;
}

.page-hero__inner {
	display: grid;
	gap: 1.1rem;
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
	max-width: min(var(--wrap), 100%);
}

.page-hero .eyebrow {
	color: var(--accent);
}

.page-hero__lead {
	max-width: 60ch;
	color: #c4ccd4;
}

/* --- Home: hero ---------------------------------------------------------- */

.hero {
	position: relative;
	isolation: isolate;
	background: var(--graphite);
	color: #fff;
	overflow: hidden;
}

.hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.42;
	z-index: -2;
	filter: grayscale(0.3) contrast(1.05);
}

.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(105deg, rgb(20 24 28 / 0.95) 12%, rgb(20 24 28 / 0.55) 65%, rgb(20 24 28 / 0.8) 100%),
		linear-gradient(180deg, rgb(20 24 28 / 0.7) 0%, transparent 30%);
}

.hero__inner {
	display: grid;
	gap: 1.4rem;
	padding-block: clamp(5rem, 14vw, 10rem);
	max-width: var(--wrap);
}

.hero__title {
	max-width: 16ch;
}

.hero__lead {
	max-width: 56ch;
	color: #cdd4da;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 0.75rem;
}

/* --- Home: stats --------------------------------------------------------- */

.stats {
	background: var(--graphite-2);
	color: #fff;
	border-top: 1px solid var(--line-dark);
}

.stats__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-block: clamp(2rem, 4vw, 3rem);
}

.stat {
	display: grid;
	gap: 0.25rem;
}

.stat__value {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--accent);
}

.stat__label {
	font-size: 0.875rem;
	color: #a8b2bb;
	letter-spacing: 0.02em;
}

/* --- Home: services ------------------------------------------------------ */

.services {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.service {
	display: grid;
	gap: 0.6rem;
	align-content: start;
	padding-top: 1.6rem;
	border-top: 2px solid var(--ink);
}

.service__icon {
	color: var(--accent-2);
	width: 2rem;
	height: 2rem;
	margin-bottom: 0.35rem;
}

.service__icon svg {
	width: 100%;
	height: 100%;
}

.service p {
	font-size: 0.9375rem;
}

/* --- Grids --------------------------------------------------------------- */

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* --- Home: about teaser and pillars -------------------------------------- */

.about-teaser {
	display: grid;
	gap: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 900px) {
	.about-teaser {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}
}

.about-teaser .muted {
	color: #a8b2bb;
}

.pillars {
	list-style: none;
	display: grid;
	gap: 1.75rem;
}

@media (min-width: 560px) {
	.pillars {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 2rem;
	}
}

.pillars li {
	border-left: 2px solid var(--accent);
	padding-left: 1.1rem;
}

.pillars__title {
	font-size: 1rem;
	font-weight: 650;
	color: #fff;
	margin-bottom: 0.35rem;
}

.pillars p {
	font-size: 0.9375rem;
	color: #a8b2bb;
}

.section--paper .pillars__title {
	color: var(--ink);
}

.section--paper .pillars p {
	color: var(--ink-2);
}

/* --- Home: news teaser and CTA ------------------------------------------- */

.news-teaser {
	max-width: var(--wrap-narrow);
	margin-inline: auto;
}

.news-teaser .stack {
	--stack-gap: 0.9rem;
}

.cta {
	background: var(--accent);
	color: var(--accent-ink);
}

.cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.cta__inner h2 {
	max-width: 24ch;
}

.cta .btn--primary {
	background: var(--graphite);
	color: #fff;
}

.cta .btn--primary:hover {
	background: var(--ink-2);
}

/* --- Projects archive ---------------------------------------------------- */

.filters {
	display: flex;
	gap: 0.5rem;
	padding-bottom: 0.5rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.filter {
	flex: none;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 580;
	color: var(--ink-2);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
		color 0.2s var(--ease);
}

.filter:hover {
	border-color: var(--accent-2);
}

.filter[aria-pressed='true'] {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

/* Category filters on the left, ordering on the right; they stack on a narrow
   screen rather than squeezing the chip row. */
.projects-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.projects-toolbar .filters {
	flex: 1 1 20rem;
	margin-bottom: 0;
}

.sort {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

/* --- Contract values, off until asked for -------------------------------- */

/*
 * Hidden by the stylesheet rather than left out of the markup: the ordering
 * control sorts on these figures whether or not they are on screen. The reveal
 * is a class on the root element, so one button governs every value on the page
 * and the state survives from the list through to a project.
 */
[data-money] {
	display: none;
}

.money-shown [data-money] {
	display: block;
}

.reveal {
	display: flex;
	flex: none;
	align-items: center;
	margin: 0;
}

.project-facts .reveal {
	margin-top: 1.25rem;
}

.reveal__button {
	appearance: none;
	padding: 0.45rem 0.95rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 580;
	color: var(--muted);
	background: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.reveal__button:hover,
.reveal__button:focus-visible {
	color: var(--ink);
	border-color: currentColor;
}

.sort__label {
	font-size: 0.875rem;
	font-weight: 580;
	color: var(--muted);
	white-space: nowrap;
}

.sort__select {
	appearance: none;
	-webkit-appearance: none;
	padding: 0.55rem 2.4rem 0.55rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23596066' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1.75 6 6.25l5-4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.7rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 580;
	color: var(--ink-2);
	cursor: pointer;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.sort__select:hover {
	border-color: var(--accent-2);
}

/* Once the two would fight for the row, the chips take the full width and the
   ordering drops beneath them — better than a chip row scrolled to a stub. */
@media (max-width: 900px) {
	.projects-toolbar .filters {
		flex-basis: 100%;
	}
}

.empty {
	margin-top: 2rem;
	color: var(--muted);
}

/* --- Продажби: buildings and floor plans --------------------------------- */

.building-intro {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: start;
}

@media (max-width: 860px) {
	.building-intro {
		grid-template-columns: 1fr;
	}
}

.floor {
	margin-top: 2rem;
}

.floor__title {
	font-size: 1.1rem;
	font-weight: 640;
	margin: 0 0 1rem;
}

/* The overlay sits exactly on the drawing: same aspect ratio, same box. */
.floorplan {
	position: relative;
	margin: 0 0 1.5rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius, 10px);
	overflow: hidden;
}

.floorplan__bg,
.floorplan__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.floorplan__bg {
	object-fit: contain;
}

.floorplan__unit {
	fill: color-mix(in srgb, var(--accent, #c8724f) 22%, transparent);
	stroke: var(--accent, #c8724f);
	stroke-width: 2;
	cursor: zoom-in;
	transition: fill 0.15s var(--ease), stroke-width 0.15s var(--ease);
}

.floorplan__unit:hover,
.floorplan__unit.is-active {
	fill: color-mix(in srgb, var(--accent, #c8724f) 52%, transparent);
	stroke-width: 3;
}

.floorplan__unit:focus-visible {
	outline: none;
	stroke-width: 4;
}

/* Sold and reserved units stay on the plan — a half-sold building reads as a
   building people are buying — but they are grey and never priced. */
.floorplan__unit[data-status='sold'],
.floorplan__unit[data-status='reserved'] {
	fill: color-mix(in srgb, #6b7280 26%, transparent);
	stroke: #6b7280;
}

.floorplan__unit[data-status='sold']:hover,
.floorplan__unit[data-status='reserved']:hover,
.floorplan__unit[data-status='sold'].is-active,
.floorplan__unit[data-status='reserved'].is-active {
	fill: color-mix(in srgb, #6b7280 42%, transparent);
}

.floorplan__tip {
	position: fixed;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	max-width: 15rem;
	padding: 0.6rem 0.85rem;
	border-radius: 8px;
	background: var(--graphite, #14181c);
	color: #fff;
	font-size: 0.85rem;
	line-height: 1.35;
	pointer-events: none;
	box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
}

.floorplan__price {
	font-size: 1rem;
	font-weight: 680;
	color: var(--accent-2, #e0a184);
}

/* ---------------------------------------------------------------------------
   One unit on its own, cut out of the plan.
   --------------------------------------------------------------------------- */

.unit-zoom {
	width: min(1120px, 94vw);
	max-width: none;
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.unit-zoom::backdrop {
	background: rgb(20 24 28 / 62%);
}

.unit-zoom__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 16rem;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
	max-height: 92vh;
	padding: clamp(1rem, 3vw, 1.75rem);
	overflow: auto;
}

.unit-zoom__cut {
	min-width: 0;
	/* Chequered, so a cut edge reads as a cut and not as white-on-white. */
	background:
		linear-gradient(45deg, var(--paper-2) 25%, transparent 25% 75%, var(--paper-2) 75%) 0 0 / 22px 22px,
		linear-gradient(45deg, var(--paper-2) 25%, transparent 25% 75%, var(--paper-2) 75%) 11px 11px / 22px 22px,
		var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.unit-zoom__svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 74vh;
}

.unit-zoom__edge {
	fill: none;
	stroke: var(--accent-2, #a8836b);
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.unit-zoom__floor {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.unit-zoom__code {
	margin: 0.2rem 0 0;
	font-size: 1.5rem;
	font-weight: 680;
	letter-spacing: var(--tracking-tight);
}

.unit-zoom__type {
	margin: 0.15rem 0 0;
	color: var(--muted);
}

.unit-zoom__facts {
	margin: 1.25rem 0 0;
	display: grid;
	gap: 0.75rem;
}

.unit-zoom__facts dt {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.unit-zoom__facts dd {
	margin: 0.15rem 0 0;
	font-size: 1rem;
}

.unit-zoom__price {
	font-size: 1.25rem;
	font-weight: 680;
	color: var(--accent-2, #a8836b);
}

.unit-zoom__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--paper);
	color: var(--ink);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s var(--ease);
}

.unit-zoom__close:hover {
	background: var(--paper-3);
}

@media (max-width: 780px) {
	.unit-zoom__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.unit-zoom__svg {
		max-height: 52vh;
	}
}

.unit-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.unit-table th,
.unit-table td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

.unit-table thead th {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.unit-table tbody tr.is-active {
	background: color-mix(in srgb, var(--accent, #c8724f) 12%, transparent);
}

.unit-table tbody tr.is-zoomable {
	cursor: zoom-in;
}

/* Sold rows are folded away by the script; the class is never in the markup, so
   with no script the whole table is there as before. */
.unit-table.is-trimmed tbody tr[data-status='sold'] {
	display: none;
}

.unit-table__reveal {
	margin-top: 0.9rem;
}

/* On a desktop the status stays a labelled pill under a named column, as it
   reads everywhere else on the site. The dot is only for the phone layout. */
.unit-table .status-dot {
	display: none;
}

/* Unit codes are written out where there is room; the short form is the phone's. */
.unit-code--short {
	display: none;
}

.status-dot {
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--muted);
	vertical-align: middle;
}

.status-dot--available {
	background: #00733f;
}

.status-dot--reserved {
	background: #b26b00;
}

.status-dot--sold {
	background: #c3c8cd;
}

/* On a phone the table has to fit without sideways scrolling, so it keeps the
   five columns a buyer decides on and drops the two that are reference: the
   room breakdown and the area including common parts. Both are still on the
   plan's hover label and in the unit's own view. */
@media (max-width: 780px) {
	.unit-table th:nth-child(3),
	.unit-table td:nth-child(3),
	.unit-table th:nth-child(5),
	.unit-table td:nth-child(5) {
		display: none;
	}

	/* Tight sideways so the five columns clear the narrowest phone; the row
	   height is left alone so the table is still comfortable to read. */
	.unit-table th,
	.unit-table td {
		padding: 0.55rem 0.3rem;
	}

	/* Only the headings may wrap. A unit's name and a figure with its unit are
	   read as one thing and must never be broken across two lines. */
	.unit-table thead th {
		white-space: normal;
	}

	.unit-table tbody th,
	.unit-table tbody td {
		white-space: nowrap;
	}

	/* The status is a colour, not a word: a column of dots reads at a glance and
	   costs a fraction of the width, which is what a phone is short of. The
	   label survives as the dot's title and for screen readers. */
	.unit-table__status {
		width: 1%;
		text-align: center;
	}

	.unit-table__status-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.unit-table .pill {
		display: none;
	}

	.unit-table .status-dot {
		display: inline-block;
	}

	/* Every building's units read like Добромирка's here — Г.1, М.1, П.1 —
	   which is what keeps the five columns inside a phone. */
	.unit-code--long {
		display: none;
	}

	.unit-code--short {
		display: inline;
	}
}

/* ---------------------------------------------------------------------------
   Where the building is.
   --------------------------------------------------------------------------- */

.building-map {
	position: relative;
	aspect-ratio: 16 / 8;
	min-height: 20rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--paper-2);
}

.building-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.building-map__link {
	margin: 1rem 0 0;
}

@media (max-width: 780px) {
	.building-map {
		aspect-ratio: 4 / 3;
		min-height: 16rem;
	}
}

.unit-table tbody tr[data-status='sold'],
.unit-table tbody tr[data-status='reserved'] {
	color: var(--muted);
}

.pill {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	background: #eef0f2;
	color: var(--ink-2);
}

.pill--available {
	background: color-mix(in srgb, #00733f 14%, transparent);
	color: #00733f;
}

.pill--reserved {
	background: color-mix(in srgb, #b26b00 16%, transparent);
	color: #8a5200;
}

.pill--sold {
	background: #eef0f2;
	color: var(--muted);
}

/* --- Single project ------------------------------------------------------ */

.project-hero {
	position: relative;
	isolation: isolate;
	background: var(--graphite);
	color: #fff;
	overflow: hidden;
}

.project-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.3;
	z-index: -2;
	filter: grayscale(0.4);
}

.project-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgb(20 24 28 / 0.55) 0%, rgb(20 24 28 / 0.94) 100%);
}

.project-hero__inner {
	display: grid;
	gap: 1rem;
	padding-block: clamp(2.5rem, 7vw, 5.5rem);
}

.project-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	font-size: 0.875rem;
	font-weight: 580;
	color: #c4ccd4;
	text-decoration: none;
	margin-bottom: 0.5rem;
	transition: color 0.2s var(--ease);
}

.project-hero__back:hover {
	color: var(--accent);
}

.project-hero h1 {
	max-width: 20ch;
}

.project-body {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 940px) {
	.project-body {
		grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
	}
}

.project-summary {
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.5rem);
}

.project-summary p + p {
	margin-top: -0.75rem;
}

.project-photo {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius);
}

.project-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 1rem;
	list-style: none;
}

.project-gallery img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius);
}

.project-facts {
	background: var(--paper-2);
	border-top: 2px solid var(--ink);
	padding: 1.75rem 1.6rem;
	position: sticky;
	top: 6rem;
}

@media (max-width: 939px) {
	.project-facts {
		position: static;
	}
}

.project-facts__title {
	font-size: 0.75rem;
	font-weight: 660;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-2);
	margin-bottom: 1.25rem;
}

.project-facts dl {
	margin: 0;
	display: grid;
	gap: 1.1rem;
}

.fact dt {
	font-size: 0.75rem;
	font-weight: 640;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.25rem;
}

.fact dd {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.project-nav {
	border-top: 1px solid var(--line);
	background: var(--paper-2);
}

.project-nav__inner {
	display: grid;
	gap: 1px;
	background: var(--line);
}

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

.project-nav a {
	display: grid;
	gap: 0.3rem;
	padding: 1.6rem clamp(1rem, 3vw, 2rem);
	background: var(--paper-2);
	text-decoration: none;
	transition: background-color 0.2s var(--ease);
}

.project-nav a:hover {
	background: var(--paper-3);
}

.project-nav__next {
	text-align: right;
}

.project-nav__label {
	font-size: 0.8125rem;
	color: var(--muted);
}

.project-nav__title {
	font-weight: 620;
}

/* --- About --------------------------------------------------------------- */

.about-layout {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 940px) {
	.about-layout {
		grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
	}
}

.about-copy p {
	font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
	color: var(--ink-2);
}

.about-copy p + p {
	margin-top: 1.5rem;
}

.about-copy p:first-child {
	font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
	color: var(--ink);
}

.about-facts {
	margin: 0;
	display: grid;
	gap: 0;
	border-top: 2px solid var(--ink);
}

.about-facts > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.95rem;
	border-bottom: 1px solid var(--line);
}

.about-facts dt {
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.about-facts dd {
	margin: 0;
	font-weight: 660;
	text-align: right;
}

/* --- News ---------------------------------------------------------------- */

.news-list {
	list-style: none;
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
}

.news-item {
	display: grid;
	gap: 0.65rem;
	justify-items: start;
	padding-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--line);
}

.news-list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.news-item__date {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-2);
	font-weight: 620;
}

.news-item__title a {
	text-decoration: none;
}

.news-item__title a:hover {
	color: var(--accent-2);
}

.back {
	border-bottom: 0;
	color: var(--muted);
	font-weight: 560;
}

.back:hover {
	color: var(--ink);
}

.article-head {
	display: grid;
	gap: 0.75rem;
	margin: 2rem 0 clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
	border-bottom: 1px solid var(--line);
}

.article-date {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-2);
	font-weight: 620;
}

.article-body {
	color: var(--ink-2);
}

.article-body > * + * {
	margin-top: 1.5rem;
}

.article-body > p:first-child {
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
	color: var(--ink);
}

.article-body h2 {
	font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
	color: var(--ink);
	margin-top: 2.5rem;
}

.article-body h3 {
	font-size: 1.1875rem;
	color: var(--ink);
	margin-top: 2rem;
}

.article-body ul,
.article-body ol {
	padding-left: 1.25rem;
	display: grid;
	gap: 0.5rem;
}

.article-body ul {
	list-style: disc;
}

.article-body ol {
	list-style: decimal;
}

.article-body img {
	border-radius: var(--radius);
}

.article-body blockquote {
	margin: 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--accent);
	color: var(--ink);
}

.article-body a {
	color: var(--accent-2);
}

.pagination {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 580;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

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

.contact-layout {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
}

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

.contact-details dl {
	margin: 0;
	border-top: 2px solid var(--ink);
}

.contact-details > dl > div {
	padding-block: 1.1rem;
	border-bottom: 1px solid var(--line);
}

.contact-details dt {
	font-size: 0.75rem;
	font-weight: 640;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.35rem;
}

.contact-details dd {
	margin: 0;
	display: grid;
	gap: 0.2rem;
	font-size: 1rem;
}

.contact-details a {
	text-decoration: none;
	width: fit-content;
}

.contact-details a:hover {
	color: var(--accent-2);
	text-decoration: underline;
}

.contact-form {
	display: grid;
	gap: 1.1rem;
	justify-items: start;
}

.field {
	display: grid;
	gap: 0.4rem;
	width: 100%;
}

.field label {
	font-size: 0.8125rem;
	font-weight: 620;
	letter-spacing: 0.04em;
	color: var(--ink-2);
}

.field input,
.field textarea {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field textarea {
	resize: vertical;
	min-height: 8rem;
}

.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--accent-2);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Honeypot — hidden from people, visible to naive bots. */
.field--hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The challenge widget, when one is switched on. Both providers draw their own
   box at a fixed size, so this only has to give it room and let it shrink on a
   narrow screen rather than push the form sideways. */
.field--captcha {
	min-height: 65px;
	overflow-x: auto;
}

.form-note {
	font-size: 0.8125rem;
	max-width: 46ch;
}

.form-message {
	width: 100%;
	padding: 0.9rem 1.1rem;
	border-radius: var(--radius);
	border-left: 3px solid var(--accent-2);
	background: var(--paper-2);
	font-size: 0.9375rem;
}

.form-message--error {
	border-left-color: #b3261e;
	color: #7f1d1a;
	background: #fdf3f2;
}

.form-message--ok {
	border-left-color: #2f6f4f;
	color: #1f4d37;
	background: #f1f8f4;
}

.map-section {
	border-top: 1px solid var(--line);
}

.map {
	width: 100%;
	height: clamp(300px, 45vh, 460px);
	border: 0;
	display: block;
	filter: grayscale(0.85) contrast(1.05);
	transition: filter 0.4s var(--ease);
}

.map:hover {
	filter: none;
}

/* --- 404 ----------------------------------------------------------------- */

.notfound {
	background: var(--graphite);
	color: #fff;
}

.notfound__inner {
	display: grid;
	gap: 1.1rem;
	padding-block: clamp(5rem, 14vw, 9rem);
	max-width: 60ch;
}

.notfound .lead {
	color: #c4ccd4;
}

.notfound__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 0.75rem;
}

/* --- WordPress admin bar and block alignments ---------------------------- */

.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.alignwide,
.alignfull {
	max-width: 100%;
}

.aligncenter {
	margin-inline: auto;
}