/*
Theme Name: Martin's Heating & Air Conditioning
Theme URI: https://www.martinsheatandair.com/
Author: LMH Agency
Author URI: https://lmh.agency
Description: Custom child theme for Client Name
Version: 1.0.0
License: Proprietary
Template: lmh-parent
Text Domain: client-name
*/

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* CTA section styles — reused by single.php's closing CTA (must always be available) */
@import url('template-parts/block/cta-section/cta-section.css');

/* ==========================================================================
   GLOBAL VARIABLES
   ========================================================================== */

:root {
	/* ── Colors ── */
	--color-dark:        #191032;
	--color-orange:      #F17E25;
	--color-orange-dark: #d9691a;
	--color-bg:          #F4EFE6;
	--color-white:       #FFFFFF;
	--color-border:      rgba(25, 16, 50, 0.2);

	/* ── Typography ── */
	--font-primary: 'Montserrat', sans-serif;

	/* ── Spacing ── */
	--section-pt: 100px;
	--section-pb: 80px;

	/* ── Border radius ── */
	--radius-sm:   6px;
	--radius-md:   12px;
	--radius-lg:   20px;
	--radius-full: 9999px;

	/* ── Shadows ── */
	--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.14);
	--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.20);
}

/* ==========================================================================
   BASE OVERRIDES
   ========================================================================== */

body {
	font-family: var(--font-primary);
	color: var(--color-dark);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
	font-weight: 800;
	color: var(--color-dark);
}

/* ==========================================================================
   HEADER
   Design: Figma → Martin Heat Header (node 7-868)
   ========================================================================== */

/* ── Hello bar (scrolling marquee) ──────────────────────────────────────── */
.hello-bar {
	background: var(--color-dark);
	overflow: hidden;
}

.hello-bar__track {
	display: flex;
	width: max-content;
	animation: hello-bar-scroll 45s linear infinite;
}

.hello-bar:hover .hello-bar__track {
	animation-play-state: paused;
}

.hello-bar__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.hello-bar__item {
	padding: 8px 16px;
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 1.5px;
	color: var(--color-bg);
	white-space: nowrap;
}

.hello-bar__sep {
	font-size: 10px;
	line-height: 1;
	color: var(--color-orange);
}

@keyframes hello-bar-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

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

/* ── Header bar ─────────────────────────────────────────────────────────── */
.site-header {
	background: var(--color-bg);
	border-bottom: 1px solid rgba(25, 16, 50, 0.1);
}

.site-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.site-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

.site-header__logo img {
	height: 44px;
	width: auto;
	display: block;
  /* intrinsic ratio, reserves the box before the file loads and prevents CLS */
  aspect-ratio: 545 / 127;
}

.site-header__logo-text {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 24px;
	letter-spacing: 1.5px;
	color: var(--color-dark);
}

/* Desktop: nav + actions sit directly in the bar */
.site-header__collapse {
	display: contents;
}

.site-nav {
	margin: 0 auto;
}

.site-nav__list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 23px;
	margin: 0;
	padding: 0;
}

.site-nav__list li {
	margin: 0;
}

.site-nav__list a {
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-dark);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
	color: var(--color-orange);
}

/* ── Dropdown (menu items with children) ──────────────────────────────────── */
.site-nav__list .menu-item-has-children {
	position: relative;
}

.site-nav__list .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.site-nav__list .menu-item-has-children > a::after {
	content: '';
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 0.2s ease;
}

.site-nav__list .menu-item-has-children:hover > a::after,
.site-nav__list .menu-item-has-children:focus-within > a::after {
	transform: rotate(180deg);
}

.site-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 200px;
	background: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav__list .sub-menu li {
	margin: 0;
}

.site-nav__list .sub-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	letter-spacing: 0.3px;
	text-transform: none;
	white-space: nowrap;
}

.site-nav__list .sub-menu a:hover {
	background: var(--color-bg);
	color: var(--color-orange);
}

/* Header CTAs */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.header-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 8px 8px 16px;
	border-radius: var(--radius-full);
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.5px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none !important;
	transition: filter 0.2s ease;
}

.header-cta:hover {
	filter: brightness(0.94);
}

.header-cta__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex-shrink: 0;
}

.header-cta--phone {
	background: var(--color-dark);
	color: var(--color-white) !important;
}

.header-cta--phone .header-cta__icon {
	background: var(--color-orange);
	color: var(--color-dark);
}

.header-cta--book {
	background: var(--color-orange);
	color: var(--color-dark) !important;
}

.header-cta--book .header-cta__icon {
	background: var(--color-dark);
	color: var(--color-orange);
}

/* Mobile toggle (hidden on desktop) */
.site-header__toggle-cb,
.site-header__toggle {
	display: none;
}

/* ── Header responsive ──────────────────────────────────────────────────── */
@media (max-width: 991px) {
	.site-header__toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		margin-left: auto;
		cursor: pointer;
	}

	.site-header__toggle span {
		display: block;
		width: 24px;
		height: 2px;
		background: var(--color-dark);
		border-radius: 2px;
	}

	.site-header__collapse {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 50;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 24px;
		background: var(--color-bg);
		border-bottom: 1px solid rgba(25, 16, 50, 0.1);
		box-shadow: var(--shadow-md);
	}

	.site-header__toggle-cb:checked ~ .site-header__collapse {
		display: flex;
	}

	.site-nav {
		margin: 0;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.site-nav__list .menu-item-has-children {
		width: 100%;
	}

	.site-nav__list .menu-item-has-children > a::after {
		display: none;
	}

	.site-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
		box-shadow: none;
		background: transparent;
		margin-top: 8px;
		padding: 0 0 0 16px;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.site-header__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 10px;
	}

	.header-cta {
		justify-content: space-between;
	}
}

/* ==========================================================================
   FOOTER
   Design: Figma → Martin Heat Footer (node 7-1235)
   ========================================================================== */
.site-footer {
	background: var(--color-dark);
	color: var(--color-bg);
}

.site-footer__band--wordmark {
	border-bottom: 1px solid rgba(244, 239, 230, 0.2);
	padding-top: 64px;
}

.site-footer__band--bottom {
	border-top: 1px solid rgba(244, 239, 230, 0.2);
}

/* ── Wordmark band ──────────────────────────────────────────────────────── */
.site-footer__wordmark-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.site-footer__wordmark {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: clamp(56px, 14vw, 180px);
	line-height: 0.8;
	letter-spacing: -0.03em;
	color: var(--color-bg);
}

.site-footer__wordmark-dot {
	color: var(--color-orange);
}

.site-footer__est {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	text-align: right;
	padding-bottom: 8px;
	flex-shrink: 0;
}

.site-footer__est-year {
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 2px;
	color: var(--color-orange);
}

.site-footer__est-loc {
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 2px;
	color: rgba(244, 239, 230, 0.6);
}

/* ── Main columns ───────────────────────────────────────────────────────── */
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 48px;
	padding-top: 48px;
	padding-bottom: 48px;
}

.site-footer__brand {
	max-width: 380px;
}

.site-footer__brand-top {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 28px;
}

.site-footer__logo {
	width: 96px;
	height: auto;
	flex-shrink: 0;
	display: block;
}

.site-footer__about {
	font-family: var(--font-primary);
	font-size: 14px;
	line-height: 1.6;
	color: rgba(244, 239, 230, 0.7);
}

.site-footer__about p {
	margin: 0;
}

.site-footer__contact {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__contact li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-primary);
	font-size: 14px;
	line-height: 1.5;
	color: rgba(244, 239, 230, 0.8);
}

.site-footer__contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-orange);
	flex-shrink: 0;
}

.site-footer__contact a {
	color: rgba(244, 239, 230, 0.8);
	text-decoration: none;
}

.site-footer__contact a:hover {
	color: var(--color-orange);
}

/* Socials */
.site-footer__socials {
	display: flex;
	gap: 12px;
}

.site-footer__social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(244, 239, 230, 0.3);
	border-radius: 50%;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.site-footer__social img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	display: block;
}

.site-footer__social:hover {
	border-color: var(--color-orange);
	background: rgba(241, 126, 37, 0.12);
}

/* Menu columns */
.site-footer__col-title {
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 2px;
	color: var(--color-orange);
	margin: 0 0 20px;
}

.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__menu li {
	margin: 0;
}

.site-footer__menu a {
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.5px;
	color: rgba(244, 239, 230, 0.8);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-footer__menu a:hover {
	color: var(--color-orange);
}

/* ── Bottom band ────────────────────────────────────────────────────────── */
.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 21px;
	padding-bottom: 20px;
}

.site-footer__credit {
	font-family: var(--font-primary);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 3.36px;
	color: var(--color-text-grey, #DADADA);
}

.site-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 24px;
}

.site-footer__legal a {
	font-family: var(--font-primary);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 1.5px;
	color: rgba(244, 239, 230, 0.6);
	text-decoration: none;
}

.site-footer__legal a:hover {
	color: var(--color-orange);
}

/* ── Footer responsive ──────────────────────────────────────────────────── */
@media (max-width: 991px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
		max-width: 100%;
	}
}

@media (max-width: 575px) {
	.site-footer__wordmark-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.site-footer__est {
		align-items: flex-start;
		text-align: left;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.site-footer__brand-top {
		flex-direction: column;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.site-footer__legal {
		flex-wrap: wrap;
		gap: 16px;
	}
}



.services {
	overflow: hidden;
  }

  .reviews {
	overflow: hidden;
  }

/* ==========================================================================
   SINGLE POST
   Hero design: Figma → Martin Heat · Single Post Hero (node 26-597)
   ========================================================================== */

/* ── Hero ───────────────────────────────────────────────────────────────── */
.single-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 440px;
	padding-top: 80px;
	padding-bottom: 80px;
	background: var(--color-dark);
	overflow: hidden;
}

.single-hero__media {
	position: absolute;
	inset: 0;
}

.single-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(39deg, rgba(25, 16, 50, 0.8) 33%, rgba(25, 16, 50, 0) 67%);
}

.single-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.single-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.single-hero__badge {
	display: inline-flex;
	padding: 6px 12px;
	background: var(--color-orange);
	border-radius: 4px;
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-dark);
	text-decoration: none;
}

.single-hero__date {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 14px;
	color: #fff;
}

.single-hero__title {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 56px;
	line-height: 1.05;
	letter-spacing: -2px;
	color: #fff;
	margin: 0;
	max-width: 800px;
}

/* ── Content layout ─────────────────────────────────────────────────────── */
.single-post__content {
	background: var(--color-bg);
	padding-top: 80px;
	padding-bottom: 80px;
}

.single-post__layout {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

/* ── Article body ───────────────────────────────────────────────────────── */
.single-post__body {
	flex: 1;
	min-width: 0;
	font-family: var(--font-primary);
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-dark);
}

.single-post__body > * {
	margin-top: 0;
	margin-bottom: 1.4em;
}

.single-post__body > *:last-child {
	margin-bottom: 0;
}

.single-post__body h2 {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: -1px;
	margin-top: 1.6em;
}

.single-post__body h3 {
	font-weight: 800;
	font-size: 22px;
	line-height: 1.25;
	margin-top: 1.4em;
}

.single-post__body a {
	color: var(--color-orange);
	text-decoration: underline;
}

.single-post__body img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}

.single-post__body ul,
.single-post__body ol {
	padding-left: 1.4em;
}

.single-post__body li {
	margin-bottom: 0.5em;
}

/* Pull quote */
.single-post__body blockquote {
	margin: 0.4em 0;
	padding-left: 24px;
	border-left: 6px solid var(--color-orange);
	font-weight: 600;
	font-style: italic;
	font-size: 24px;
	line-height: 1.4;
	color: var(--color-dark);
}

.single-post__body blockquote p {
	margin: 0;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.single-sidebar {
	flex-shrink: 0;
	width: 360px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.single-sidebar__card {
	padding: 24px;
	border-radius: 20px;
	background: var(--color-white);
	border: 1px solid rgba(25, 16, 50, 0.1);
	box-shadow: 0 4px 2px rgba(0, 0, 0, 0.05);
}

.single-sidebar__title {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 0.5px;
	color: var(--color-dark);
	margin: 0 0 20px;
}

/* Request Service (orange) card */
.single-sidebar__card--cta {
	background: var(--color-orange);
	border: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.single-sidebar__title--light {
	color: #fff;
	margin: 0;
}

.single-sidebar__text {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-dark);
}

.single-sidebar__text p {
	margin: 0;
}

.single-sidebar__button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 20px;
	background: var(--color-dark);
	border-radius: 100px;
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 16px;
	color: #fff !important;
	text-decoration: none !important;
	transition: background 0.2s ease;
}

.single-sidebar__button:hover {
	background: #2a1f55;
}

/* Recent Posts */
.single-sidebar__posts {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.single-sidebar__post {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(25, 16, 50, 0.1);
	text-decoration: none !important;
}

.single-sidebar__post:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.single-sidebar__post-title {
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	color: var(--color-dark);
	transition: color 0.2s ease;
}

.single-sidebar__post:hover .single-sidebar__post-title {
	color: var(--color-orange);
}

.single-sidebar__post-date {
	font-family: var(--font-primary);
	font-weight: 400;
	font-size: 13px;
	color: #5a5470;
}

/* Our Services */
.single-sidebar__services {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.single-sidebar__services a {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 15px;
	color: var(--color-dark);
	text-decoration: none;
	transition: color 0.2s ease;
}

.single-sidebar__services a::before {
	content: '\2192';
	color: var(--color-orange);
	font-weight: 400;
}

.single-sidebar__services a:hover {
	color: var(--color-orange);
}

/* ── Keep Reading ───────────────────────────────────────────────────────── */
.keep-reading {
	background: var(--color-bg);
	padding-bottom: 80px;
}

.keep-reading__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.keep-reading__title {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 40px;
	letter-spacing: -1.5px;
	color: var(--color-dark);
	margin: 0;
}

.keep-reading__view-all {
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 16px;
	color: var(--color-dark);
	text-decoration: underline;
	white-space: nowrap;
}

.keep-reading__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.keep-reading__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
	background: var(--color-white);
	border-radius: 24px;
	box-shadow: 0 12px 16px rgba(0, 0, 0, 0.05);
	text-decoration: none !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.keep-reading__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 28px rgba(0, 0, 0, 0.1);
}

.keep-reading__thumb {
	height: 200px;
	border-radius: 12px;
	overflow: hidden;
	background: #e8e0d2;
}

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

.keep-reading__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.keep-reading__card-title {
	font-family: var(--font-primary);
	font-weight: 800;
	font-size: 18px;
	line-height: 1.3;
	color: var(--color-dark);
	margin: 0;
}

.keep-reading__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
}

.keep-reading__read {
	font-family: var(--font-primary);
	font-weight: 600;
	color: var(--color-orange);
}

.keep-reading__arrow {
	font-family: var(--font-primary);
	color: var(--color-dark);
}

/* ── Single post responsive ─────────────────────────────────────────────── */
@media (max-width: 991px) {
	.single-hero {
		min-height: 360px;
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.single-hero__title {
		font-size: 40px;
		letter-spacing: -1.5px;
	}

	.single-post__layout {
		flex-direction: column;
	}

	.single-sidebar {
		width: 100%;
	}

	.single-post__body {
		font-size: 17px;
	}

	.keep-reading__grid {
		grid-template-columns: 1fr;
		gap: 24px;
		max-width: 480px;
	}
}

@media (max-width: 575px) {
	.single-hero__title {
		font-size: 30px;
		letter-spacing: -1px;
	}

	.single-post__body h2 {
		font-size: 24px;
	}

	.single-post__body blockquote {
		font-size: 20px;
	}
}


/* ── Third-level flyout (Services > group > service) ───────────────────────── */
@media (min-width: 992px) {

  .site-nav__list .sub-menu .menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  /* Point the caret right instead of down on second-level parents */
  .site-nav__list .sub-menu .menu-item-has-children > a::after {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    border-right: 0;
    flex: 0 0 auto;
    transform: none;
  }

  .site-nav__list .sub-menu .menu-item-has-children:hover > a::after,
  .site-nav__list .sub-menu .menu-item-has-children:focus-within > a::after {
    transform: none;
  }

  /* Open the third level to the side of its parent, not below it */
  .site-nav__list .sub-menu .sub-menu {
    top: -8px;
    left: 100%;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    transform: translateX(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }

  .site-nav__list .sub-menu .menu-item-has-children:hover > .sub-menu,
  .site-nav__list .sub-menu .menu-item-has-children:focus-within > .sub-menu {
    transform: translateX(0);
  }

  /* Keep the second-level panel highlighted while a third level is open */
  .site-nav__list .sub-menu .menu-item-has-children:hover > a,
  .site-nav__list .sub-menu .menu-item-has-children:focus-within > a {
    background: var(--color-bg);
    color: var(--color-orange);
  }
}

/* Let long service names wrap instead of pushing the mobile menu wide */
@media (max-width: 991px) {
  .site-nav__list .sub-menu a {
    white-space: normal;
  }
}

/* ── Service pills (city page service links) ───────────────────────────────── */
.single-post__body ul.service-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding-left: 0;
}

.single-post__body ul.service-pills li {
  margin: 0;
}

.single-post__body ul.service-pills a {
  display: inline-block;
  padding: 9px 18px;
  border: 2px solid var(--color-orange);
  border-radius: 999px;
  background: #fff;
  color: var(--color-dark);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.single-post__body ul.service-pills a:hover,
.single-post__body ul.service-pills a:focus-visible {
  background: var(--color-orange);
  color: #fff;
}

/* ── Booking modal ─────────────────────────────────────────────────────────── */
body.booking-modal-open {
  overflow: hidden;
}

.booking-modal[hidden] {
  display: none;
}

.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.booking-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(25, 16, 50, 0.72);
}

.booking-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 820px;
  height: min(90vh, 900px);
  background: var(--color-white, #fff);
  border-radius: var(--radius-md, 16px);
  box-shadow: var(--shadow-md, 0 20px 60px rgba(0, 0, 0, 0.35));
  overflow: hidden;
}

.booking-modal__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.booking-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: var(--color-dark, #191032);
  background: var(--color-white, #fff);
  border: 2px solid var(--color-orange, #f17e25);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.booking-modal__close:hover,
.booking-modal__close:focus-visible {
  background: var(--color-orange, #f17e25);
  color: #fff;
}

@media (max-width: 767px) {
  .booking-modal {
    padding: 0;
  }

  .booking-modal__dialog {
    max-width: none;
    height: 100%;
    border-radius: 0;
  }
}

/* ── Imagify next-gen display guard ── */
/* Imagify rewrites images as <picture> and MOVES the img class attribute onto
   the wrapper, dropping width and height. Class-based image rules then stop
   matching and images render at natural size. Give the wrapper the layout role
   the image used to have and let the image fill it. Added 2026-09-01. */
picture:not([class]) { display: contents; }
picture[class] { display: block; }
picture[class] > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: inherit;
  object-position: inherit;
  border-radius: inherit;
}

/* Hero icons bar: reserve the wrapped height without a media query.
   The bar is one row at 992px and up and two rows below it. WP Rocket Remove
   Unused CSS builds its stylesheet against a desktop viewport and discards
   max-width media blocks, so the wrap rule arrives after first paint and the
   page reflowed, scoring 0.271 CLS on mobile. A media query here would be
   discarded the same way, so the reserve is expressed as a clamp instead:
   below 992px the middle term is a large positive number and clamps to the
   two-row height, at 992px and up it goes negative and clamps to 0.
   Added 2026-09-01. */
.home-hero__icons-bar {
  min-height: clamp(0px, (991.98px - 100vw) * 9999, 362px);
}

/* Font-swap CLS fix, added 2026-09-02.
   Montserrat is served from fonts.gstatic.com with font-display:swap and no
   preload, so the fallback paints first and the ExtraBold hero H1 re-wraps
   when the real font arrives. Measured: H1 151px tall in the fallback vs
   113px in Montserrat at 412px, moving the icons bar 31px. That was the whole
   0.189 CLS. Head injection is not available on this install (Snippet Manager
   does not emit new snippets and PHP edits silently revert on WP Engine), so
   this fixes it in CSS instead: a fallback face whose metrics are adjusted to
   match Montserrat, so the pre-swap and post-swap layouts are identical.
   Verified pixel-identical at 390px, 412px and 768px. */
@font-face {
  font-family: "MontFallback";
  src: local("Arial");
  size-adjust: 115%;
  ascent-override: 90%;
  descent-override: 23%;
  line-gap-override: 0%;
}
.home-hero__title,
.home-hero__body,
.home-hero__badge,
.home-hero__icon-stat,
.home-hero__icon-content,
.home-hero__est-year,
.home-hero__est-label {
  font-family: Montserrat, "MontFallback", sans-serif;
}