/* ==========================================================================
   Ganzha Siteworks — main stylesheet
   --------------------------------------------------------------------------
   Values are taken from the Figma file (frames "Landing_Ganzha 3" @1920 and
   "Phone - Головна" @414). Base rules = mobile frame, >=992px = desktop frame.

   1. Fonts
   2. Design tokens
   3. Base
   4. Layout
   5. Buttons & badges
   6. Header & navigation
   7. Hero
   8. Features
   9. About
   10. Estimate form (fallback + Contact Form 7)
   11. Social badges
   12. Footer
   13. Blog / fallback templates
   14. Accessibility & motion
   ========================================================================== */

/* 1. Fonts
   ========================================================================== */
/* Single face (Eurostile Extended Black) mapped to every weight used. */
@font-face {
	font-family: "Eurostile Extd";
	src: url("../fonts/EurostileExt-Bla.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

/* 2. Design tokens
   ========================================================================== */
:root {
	--gz-red: #c10016;
	--gz-red-dark: #9e0012;
	--gz-red-rgb: 193, 0, 22;
	--gz-navy: #101820;
	--gz-navy-rgb: 16, 24, 32;
	--gz-light: #f4f5f6;
	--gz-grey: #c3c3c3;
	--gz-white: #fff;

	--gz-font: "Eurostile Extd", "Eurostile", "Microgramma", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--gz-radius-sm: 11.25px; /* social badges */
	--gz-radius: 20px;       /* buttons, inputs, benefit cards */
	--gz-radius-lg: 40px;    /* section cards */

	--gz-header-h: 90px;
	--gz-gutter: 20px;       /* mobile side padding (414 frame) */
	--gz-transition: all 0.3s ease;

	/* Bootstrap overrides */
	--bs-body-font-family: var(--gz-font);
	--bs-body-font-weight: 900;
	--bs-body-bg: var(--gz-white);
	--bs-body-color: var(--gz-navy);
}

/* 3. Base
   ========================================================================== */
html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--gz-header-h);
}

body {
	font-family: var(--gz-font);
	font-weight: 900;
	background-color: var(--gz-white);
	color: var(--gz-navy);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gz-font);
	font-weight: 900;
	margin: 0;
}

p {
	margin: 0;
}

a {
	transition: var(--gz-transition);
}

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

::selection {
	background: var(--gz-red);
	color: var(--gz-white);
}

/* 4. Layout
   ========================================================================== */
@media (max-width: 575.98px) {
	.container {
		--bs-gutter-x: calc(var(--gz-gutter) * 2);
	}
}

/*
 * Desktop grid: 1240px content column (Figma x = 340…1580 on a 1920 frame).
 * The container keeps Bootstrap's standard horizontal padding on top of it.
 */
@media (min-width: 1200px) {
	.container {
		max-width: calc(1240px + var(--bs-gutter-x, 1.5rem));
	}
}

/* 5. Buttons & badges
   ========================================================================== */
.btn-gz {
	--bs-btn-font-family: var(--gz-font);
	--bs-btn-font-weight: 900;
	--bs-btn-font-size: 16px;
	--bs-btn-line-height: 1;
	--bs-btn-padding-x: 1.5rem;
	--bs-btn-padding-y: 0;
	--bs-btn-border-width: 0;
	--bs-btn-border-radius: var(--gz-radius);
	--bs-btn-color: var(--gz-white);
	--bs-btn-hover-color: var(--gz-white);
	--bs-btn-active-color: var(--gz-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 70px;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	transition: var(--gz-transition);
}

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

.btn-gz:active {
	transform: translateY(0);
}

.btn-gz--dark {
	--bs-btn-bg: var(--gz-navy);
	--bs-btn-hover-bg: #000;
	--bs-btn-active-bg: #000;
	--bs-btn-focus-shadow-rgb: var(--gz-navy-rgb);
	box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6);
}

.btn-gz--dark:hover {
	box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.75);
}

.btn-gz--red {
	--bs-btn-bg: var(--gz-red);
	--bs-btn-hover-bg: var(--gz-red-dark);
	--bs-btn-active-bg: var(--gz-red-dark);
	--bs-btn-focus-shadow-rgb: var(--gz-red-rgb);
}

.btn-gz--red:hover {
	box-shadow: 0 18px 36px -16px rgba(var(--gz-red-rgb), 0.9);
}

@media (min-width: 992px) {
	.btn-gz {
		--bs-btn-font-size: 20px;
		height: 82px;
	}
}

/* Red rounded square with a white check (Figma "Check 1"). */
.check-badge {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 13.46px;
	background: var(--gz-red);
	transition: var(--gz-transition);
}

/* 6. Header & navigation
   ========================================================================== */
.site-header {
	background-color: var(--gz-red);
	box-shadow: -20px 17px 25px rgba(0, 0, 0, 0.2);
	transition: var(--gz-transition);
}

.site-header.is-scrolled {
	background-color: rgba(var(--gz-red-rgb), 0.88);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	box-shadow: -20px 17px 35px rgba(0, 0, 0, 0.28);
}

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

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

body:not(.has-hero) .site-main {
	padding-top: var(--gz-header-h);
}

/* The bar row is locked to 90px; the mobile dropdown never changes its geometry. */
.site-header__inner {
	position: relative;
	height: var(--gz-header-h);
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.site-header__brand {
	margin: 0;
	padding: 0;
}

.site-logo,
.custom-logo-link {
	display: inline-block;
	line-height: 0;
}

.site-header .site-logo img,
.site-header .custom-logo {
	width: 217px;
	height: 45px;
}

/* Mobile toggler: 54px white rounded square with red bars. */
.navbar-toggler {
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c10016' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M8 9h14M8 15h14M8 21h14'/%3e%3c/svg%3e");
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	padding: 0;
	border: 0;
	transition: var(--gz-transition);
}

.navbar-toggler-icon {
	width: 30px;
	height: 30px;
}

.navbar-toggler:hover {
	transform: scale(1.05);
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.site-header__call {
	display: inline-flex;
	line-height: 0;
	transition: var(--gz-transition);
}

.site-header__call:hover {
	transform: scale(1.05);
	opacity: 0.9;
}

.site-menu .nav-link {
	position: relative;
	padding: 0;
	font-size: 14px;
	line-height: 1.105;
	color: var(--gz-white);
}

.site-menu .nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 2px;
	background: var(--gz-white);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
}

.site-menu .nav-link:hover,
.site-menu .nav-link:focus-visible,
.site-menu .nav-link.active {
	color: var(--gz-white);
}

.site-menu .nav-link:hover::after,
.site-menu .nav-link:focus-visible::after,
.site-menu .nav-link.active::after {
	transform: scaleX(1);
	transform-origin: left;
}

.site-phone {
	font-size: 20px;
	line-height: 1.105;
	color: var(--gz-white);
	text-decoration: none;
	white-space: nowrap;
}

.site-phone:hover,
.site-phone:focus-visible {
	color: var(--gz-white);
	opacity: 0.8;
}

.site-header__meta {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* Mobile / tablet dropdown panel: floats below the bar, aligned to the container gutters. */
@media (max-width: 1199.98px) {
	.site-header__nav {
		position: absolute;
		top: 100%;
		right: calc(var(--bs-gutter-x) * 0.5);
		left: calc(var(--bs-gutter-x) * 0.5);
		max-height: calc(100vh - var(--gz-header-h) - 16px);
		max-height: calc(100dvh - var(--gz-header-h) - 16px);
		overflow-y: auto;
		border-radius: var(--gz-radius);
		box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.5);
	}

	/* Keep Bootstrap's clipping during the height transition. */
	.site-header__nav.collapsing {
		overflow: hidden;
	}

	.site-menu {
		padding: 24px 24px 8px;
		border-radius: var(--gz-radius) var(--gz-radius) 0 0;
		background: var(--gz-navy);
	}

	.site-menu .nav-link {
		display: block;
		padding: 14px 0;
		font-size: 16px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.site-menu .nav-link::after {
		display: none;
	}

	.site-menu .nav-link:hover,
	.site-menu .nav-link.active {
		color: var(--gz-red);
	}

	.site-header__meta {
		justify-content: space-between;
		padding: 16px 24px 24px;
		border-radius: 0 0 var(--gz-radius) var(--gz-radius);
		background: var(--gz-navy);
	}
}

/* Desktop header (Figma: logo 254×53 @ x0, menu @ x326 gap 20, phone, socials). */
@media (min-width: 1200px) {
	.site-header__inner {
		justify-content: flex-start;
	}

	.site-header .site-logo img,
	.site-header .custom-logo {
		width: 254px;
		height: 53px;
	}

	.site-menu {
		gap: 20px;
		margin-left: 72px;
	}

	.site-header__meta {
		margin-left: auto;
	}
}

/* 7. Hero (Figma "Block 1")
   ========================================================================== */
.hero {
	position: relative;
	padding-top: calc(var(--gz-header-h) + 31px);
	padding-bottom: 120px;
	background: var(--gz-red);
	color: var(--gz-white);
}

.hero__media img {
	display: block;
	width: calc(100% + 7px);
	max-width: none;
	margin-left: -7px;
}

.hero__badge {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 64px;
	margin-top: 26px;
	padding: 0 23px 0 67px;
	border: 3px solid var(--gz-white);
	border-radius: var(--gz-radius);
	font-size: 16px;
	line-height: 1;
	letter-spacing: -0.04em;
	text-transform: uppercase;
}

.hero__badge-icon {
	position: absolute;
	top: 50%;
	left: 20px; /* 23px from the outer edge incl. 3px border */
	transform: translateY(-50%);
}

.hero__title {
	margin-top: 30px;
	font-size: 26px;
	line-height: 1;
	color: var(--gz-white);
	text-transform: uppercase;
}

.hero__area {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.2;
}

.hero__area img {
	width: 11px;
	height: 13px;
}

.hero__cta {
	margin-top: 22px;
}

@media (min-width: 576px) {
	.hero__media img {
		width: 100%;
		margin-left: 0;
	}

	.hero__media {
		max-width: 610px;
		margin-inline: auto;
	}
}

@media (min-width: 992px) {
	.hero {
		padding-top: 152px;
		padding-bottom: 147px;
	}

	.hero__row {
		--bs-gutter-x: 20px;
	}

	.hero__badge {
		display: inline-flex;
		width: auto;
		margin-top: 0;
		font-size: 20px;
	}

	.hero__title {
		max-width: 611px;
		margin-top: 36px;
		font-size: clamp(32px, 3.34vw, 40px);
	}

	.hero__area {
		gap: 6px;
		margin-top: 11px;
		padding-left: 3px;
		font-size: 18px;
	}

	.hero__area img {
		width: 15px;
		height: 18px;
	}

	.hero__cta {
		max-width: 506px;
		margin-top: 24px;
	}

	.hero__media {
		max-width: none;
	}
}

/* 8. Features (Figma "Block 2")
   ========================================================================== */
.features {
	position: relative;
	z-index: 2;
	margin-top: -90px;
}

.features__box {
	display: grid;
	gap: 10px;
	margin: 0 auto;
	padding: 49px 32px 32px;
	border-radius: var(--gz-radius-lg);
	background: var(--gz-light);
}

.feature-card {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 82px;
	padding: 0 17px;
	border-radius: var(--gz-radius);
	background: var(--gz-navy);
	transition: var(--gz-transition);
}

.feature-card:hover {
	box-shadow: 0 16px 30px -16px rgba(var(--gz-navy-rgb), 0.8);
	transform: translateY(-3px);
}

.feature-card:hover .check-badge {
	transform: rotate(-8deg) scale(1.05);
}

.feature-card__text {
	font-size: 18px;
	line-height: 1;
	color: var(--gz-white);
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.features__box {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
		padding: 32px;
	}

	.feature-card {
		gap: 12px;
		padding: 0 12px;
	}

	.feature-card__text {
		font-size: 14px;
	}
}

@media (min-width: 1200px) {
	.features__box {
		max-width: 1029px;
		gap: 20px;
		padding: 49px 52px;
	}

	.feature-card {
		gap: 18px;
		padding: 0 17px;
	}

	.feature-card__text {
		font-size: 18px;
	}
}

/* 9. About (Figma "ABOUT US")
   ========================================================================== */
.about {
	position: relative;
	z-index: 2;
	margin-top: 40px;
	margin-bottom: -111px; /* card overlaps the navy estimate block */
}

.about__card {
	position: relative;
	overflow: hidden;
	padding: 62px 25px 0;
	border-radius: var(--gz-radius-lg);
	background: var(--gz-red);
	color: var(--gz-white);
}

.about__title {
	font-size: 26px;
	line-height: 1;
	color: var(--gz-white);
	text-transform: uppercase;
}

.about__subtitle {
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.4;
	text-transform: uppercase;
}

.about__text {
	margin-top: 20px;
	font-size: 12px;
	line-height: 1.2;
}

.about__text p + p {
	margin-top: 1.2em;
}

.about__media {
	margin: 15px -25px 0;
	line-height: 0;
	pointer-events: none;
}

.about__media img {
	display: block;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
}

@media (min-width: 992px) {
	.about {
		margin-top: 20px;
		margin-bottom: -104px;
		padding-top: 114px; /* phone image rises above the card */
	}

	.about__card {
		overflow: visible;
		min-height: 590px;
		padding: 46px 50px 32px;
	}

	.about__content {
		position: relative;
		z-index: 1;
		max-width: min(555px, 46%);
	}

	.about__title {
		font-size: 40px;
	}

	.about__subtitle {
		max-width: 504px;
		font-size: 18px;
		line-height: 1.2;
	}

	.about__text {
		margin-top: 25px;
		font-size: 16px;
	}

	/* Figma mask: 721×704, radius 40, anchored bottom-right of the card. */
	.about__media {
		position: absolute;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		width: 58.15%;
		max-width: 721px;
		aspect-ratio: 721 / 704;
		margin: 0;
		overflow: hidden;
		border-radius: var(--gz-radius-lg);
	}

	.about__media img {
		width: 97.92%; /* 706 / 721 */
		max-width: none;
		margin: 0;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.about {
		padding-top: 60px;
	}

	.about__content {
		max-width: 44%;
	}

	.about__text {
		font-size: 14px;
	}
}

/* 10. Estimate form (Figma "Phone")
   ========================================================================== */
.estimate {
	padding: 163px 0 40px;
	background: var(--gz-navy);
	color: var(--gz-white);
	text-align: center;
}

.estimate__inner {
	max-width: 1030px;
	margin-inline: auto;
}

.estimate__title {
	font-size: 26px;
	line-height: 1;
	color: var(--gz-white);
	text-transform: uppercase;
}

.estimate__lead {
	margin-top: 5px;
	font-size: 12px;
	line-height: 1.2;
}

/*
 * Shared by the native fallback and Contact Form 7 (same class names, see the
 * template in inc/contact-form.php). CF7 adds its own wrappers
 * (.wpcf7-form-control-wrap, .wpcf7-spinner, .wpcf7-response-output), which
 * are normalised in the "Contact Form 7 wrappers" block below.
 */
.estimate-form {
	margin-top: 20px;
	text-align: left;
}

.estimate-form__grid {
	position: relative;
	display: grid;
	gap: 9px;
}

.estimate-field {
	position: relative;
}

/* Icon is pinned to the 82px input row, so validation tips below never shift it. */
.estimate-field::before {
	content: "";
	position: absolute;
	top: 41px;
	left: 32px;
	z-index: 1;
	width: 21px;
	height: 21px;
	background: url("../images/icon-phone.svg") center / contain no-repeat;
	transform: translateY(-50%);
	pointer-events: none;
}

.estimate-field--email::before {
	left: 29px;
	height: 16px;
	background-image: url("../images/icon-mail.svg");
}

.estimate-field__input {
	display: block;
	width: 100%;
	height: 82px;
	padding: 0 24px 0 59px;
	border: 2px solid transparent;
	border-radius: var(--gz-radius);
	background: var(--gz-white);
	color: var(--gz-navy);
	font-family: var(--gz-font);
	font-size: 16px;
	font-weight: 900;
	transition: var(--gz-transition);
}

.estimate-field__input::placeholder {
	color: var(--gz-grey);
	text-transform: uppercase;
	opacity: 1;
}

.estimate-field__input:hover {
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8);
}

.estimate-field__input:focus {
	border-color: var(--gz-red);
	outline: 0;
	box-shadow: 0 0 0 4px rgba(var(--gz-red-rgb), 0.3);
}

.estimate-form.was-validated .estimate-field__input:invalid,
.estimate-field__input.wpcf7-not-valid {
	border-color: #ff4d5e;
}

.estimate-form__submit {
	height: 82px;
	margin-top: 6px; /* 15px total below the last field */
	cursor: pointer;
}

/* Honeypot field (fallback form). */
.estimate-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Status messages: fallback notice + CF7 response output. */
.estimate-form__notice,
.estimate-form .wpcf7 form .wpcf7-response-output {
	margin: 0 0 16px;
	padding: 14px 20px;
	border: 0;
	border-radius: var(--gz-radius);
	background: rgba(255, 255, 255, 0.08);
	font-size: 14px;
	color: var(--gz-white);
	text-align: center;
}

.estimate-form .wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
}

.estimate-form__notice--success,
.estimate-form .wpcf7 form.sent .wpcf7-response-output {
	background: rgba(25, 135, 84, 0.35);
}

.estimate-form__notice--danger,
.estimate-form__notice--warning,
.estimate-form .wpcf7 form.invalid .wpcf7-response-output,
.estimate-form .wpcf7 form.unaccepted .wpcf7-response-output,
.estimate-form .wpcf7 form.failed .wpcf7-response-output,
.estimate-form .wpcf7 form.spam .wpcf7-response-output,
.estimate-form .wpcf7 form.aborted .wpcf7-response-output {
	background: rgba(var(--gz-red-rgb), 0.45);
}

/* Contact Form 7 wrappers. */
.estimate-form .wpcf7-form-control-wrap {
	display: block;
}

.estimate-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	padding-left: 20px;
	font-size: 12px;
	color: #ff8a95;
}

/* CF7 injects the spinner after the submit button; keep it out of the grid flow. */
.estimate-form__grid .wpcf7-spinner {
	position: absolute;
	right: 24px;
	bottom: 29px;
	margin: 0;
}

@media (min-width: 768px) {
	.estimate-form__grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px 20px;
	}

	.estimate-form__submit {
		grid-column: 1 / -1;
		margin-top: 0;
	}
}

@media (min-width: 992px) {
	.estimate {
		padding: 168px 0 90px;
	}

	.estimate__title {
		font-size: 40px;
		line-height: 1.1;
	}

	.estimate__lead {
		margin-top: 6px;
		font-size: 18px;
		line-height: 1.4;
	}

	.estimate-form {
		margin-top: 35px;
	}

	.estimate-field__input {
		font-size: 18px;
	}

	.estimate-form__submit {
		--bs-btn-font-size: 33px;
		line-height: 0.8;
	}
}

/* 11. Social badges (40×40, radius 11.25, white with red glyph)
   ========================================================================== */
.social {
	display: flex;
	gap: 6px;
	margin: 0;
}

.social__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--gz-radius-sm);
	background: var(--gz-white);
	transition: var(--gz-transition);
}

.social__badge img {
	display: block;
	transition: var(--gz-transition);
}

.social__badge:hover,
.social__badge:focus-visible {
	background: var(--gz-navy);
	box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6);
	transform: translateY(-3px);
}

.social__badge:hover img,
.social__badge:focus-visible img {
	filter: brightness(0) invert(1);
}

/* 12. Footer (Figma "Footer")
   ========================================================================== */
.site-footer {
	padding-top: 69px;
	background: var(--gz-white);
}

.footer-cta {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	border-radius: var(--gz-radius-lg);
	background: var(--gz-navy);
	color: var(--gz-white);
}

.footer-cta__media {
	width: 302px;
	max-width: 100%;
	margin: -41px auto 0;
	line-height: 0;
}

.footer-cta__media img {
	display: block;
	width: 100%;
	transition: transform 0.6s ease;
}

.footer-cta:hover .footer-cta__media img {
	transform: rotate(-3deg) scale(1.03);
}

.footer-cta__content {
	padding: 20px 17px 26px 29px;
}

.footer-cta__title {
	font-size: 26px;
	line-height: 1;
	color: var(--gz-white);
	text-transform: uppercase;
}

.footer-cta__text {
	margin-top: 5px;
	font-size: 12px;
	line-height: 1.2;
}

.site-footer__bar {
	margin-top: -120px;
	padding: 155px 0 37px;
	background: var(--gz-red);
	color: var(--gz-white);
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.site-footer__logo img,
.site-footer__logo .custom-logo {
	width: 324px;
	height: 66px;
}

.site-footer__services {
	margin: 27px 0 0;
	font-size: 26px;
	line-height: 1.2;
	text-transform: uppercase;
}

.site-footer__email {
	margin-top: 27px;
	font-size: 12px;
	line-height: 1;
	color: var(--gz-white);
	text-decoration: none;
}

.site-footer__email:hover,
.site-footer__email:focus-visible {
	color: var(--gz-white);
	opacity: 0.8;
}

.site-footer__phone {
	margin-top: 8px;
	font-size: 26px;
}

.site-footer__social {
	margin-top: 11px;
}

@media (min-width: 992px) {
	.site-footer {
		padding-top: 63px;
	}

	.footer-cta {
		flex-direction: row;
		align-items: flex-start;
		min-height: 290px;
	}

	.footer-cta__media {
		flex: 0 0 auto;
		width: min(438px, 38%);
		margin: -41px 0 0 50px;
	}

	.footer-cta__content {
		max-width: 660px;
		padding: 58px 50px 51px 37px;
	}

	.footer-cta__title {
		font-size: 40px;
	}

	.footer-cta__text {
		margin-top: 13px;
		font-size: 18px;
	}

	.site-footer__bar {
		margin-top: -135px;
		padding-top: 165px;
	}
}

/* Desktop bottom row: logo · services · email · phone · socials. */
@media (min-width: 1200px) {
	.site-footer__inner {
		flex-direction: row;
		text-align: left;
	}

	.site-footer__logo img,
	.site-footer__logo .custom-logo {
		width: 254px;
		height: 53px;
	}

	.site-footer__services {
		margin: 0 0 0 61px;
		font-size: 14px;
		line-height: 1.105;
	}

	.site-footer__email {
		margin: 0 0 0 40px;
		font-size: 14px;
	}

	.site-footer__phone {
		margin: 0 0 0 auto;
		font-size: 20px;
	}

	.site-footer__social {
		margin: 0 0 0 20px;
	}
}

/* 13. Blog / fallback templates
   ========================================================================== */
.section {
	padding-block: clamp(3rem, 7vw, 5rem);
}

.section__title {
	margin-bottom: 1.25rem;
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1;
	text-transform: uppercase;
}

.section__lead {
	margin-bottom: 2rem;
	font-weight: 400;
}

.page-content__header {
	margin-bottom: 2.5rem;
}

.entry__content {
	max-width: 48rem;
	font-weight: 400;
	line-height: 1.7;
}

.entry__content p + p {
	margin-top: 1em;
}

.entry__content a {
	color: var(--gz-red);
}

.post-card {
	height: 100%;
	padding: 28px;
	border-radius: var(--gz-radius);
	background: var(--gz-light);
	transition: var(--gz-transition);
}

.post-card:hover {
	box-shadow: 0 20px 40px -24px rgba(var(--gz-navy-rgb), 0.5);
	transform: translateY(-4px);
}

.post-card__title {
	margin-bottom: 8px;
	font-size: 18px;
	text-transform: uppercase;
}

.post-card__title a {
	color: inherit;
	text-decoration: none;
}

.post-card__title a:hover {
	color: var(--gz-red);
}

.post-card__meta {
	margin-bottom: 12px;
	font-size: 12px;
	color: #6b7280;
}

.post-card__excerpt {
	font-weight: 400;
}

.pagination-wrap .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pagination-wrap .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	border-radius: var(--gz-radius-sm);
	background: var(--gz-light);
	color: var(--gz-navy);
	text-decoration: none;
}

.pagination-wrap .page-numbers.current,
.pagination-wrap a.page-numbers:hover {
	background: var(--gz-red);
	color: var(--gz-white);
}

/* 14. Accessibility & motion
   ========================================================================== */
.skip-link {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 1100;
	padding: 0.75rem 1.25rem;
	border-radius: var(--gz-radius-sm);
	background: var(--gz-navy);
	color: var(--gz-white);
}

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

.hero :focus-visible,
.about :focus-visible,
.estimate :focus-visible,
.site-header :focus-visible,
.site-footer__bar :focus-visible {
	outline-color: var(--gz-white);
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.wow {
		visibility: visible !important;
	}
}