/* ==========================================================================
   Atlanta Discount Blinds (adb1) — homepage design tokens & modern-rebuild
   styling. Layered on top of Elementor/HFE-generated markup; does not modify
   any plugin or theme core file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Share Dev Reviews — prevent horizontal overflow on narrow screens.
   Real widget classes confirmed from assets/css/reviews.css: .sdgr is the
   root, .sdgr-carousel__viewport/.sdgr-carousel__track/.sdgr-card are the
   carousel internals. Applies everywhere the widget is used (home + Reviews
   page) since the overflow risk is the same in both places.
   -------------------------------------------------------------------------- */
.sdgr {
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}
@media (max-width: 767px) {
	.sdgr-carousel__track {
		gap: 0;
	}
	.sdgr-card {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}
/* Exactly 3 cards on desktop, matching the spec (plugin default is 4). */
@media (min-width: 981px) {
	.sdgr-card {
		flex-basis: calc((100% - 2.5rem) / 3) !important;
	}
}
/* 2 on tablet -- the plugin's own default breakpoints don't land on exactly
   2 cards in this range (980px and down still shows 3 until 720px), so this
   is an explicit override to match the 3/2/1 spec. */
@media (min-width: 768px) and (max-width: 980px) {
	.sdgr-card {
		flex-basis: calc((100% - 1.25rem) / 2) !important;
	}
}
/* Equal card heights regardless of review length. */
.sdgr-card {
	height: auto;
	align-self: stretch;
}
.sdgr-carousel__track {
	align-items: stretch;
}

/* Reviews section polish: filled/bordered CTA buttons instead of plain
   text links, consistent styling for the Google/Houzz profile links. */
.elementor-element-2773cd8 .elementor-button {
	background: #ffffff !important;
	color: var(--color-primary-text) !important;
	border: 2px solid var(--color-primary-text);
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 24px;
	padding-right: 24px;
}
.sdgr__profile-links {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.sdgr__profile-links a {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid var(--color-primary-text);
	border-radius: 8px;
	font-family: var(--font-nav);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--color-primary-text);
}
.sdgr-write-button {
	background: var(--color-button-turquoise) !important;
}

:root {
	/* Legacy tokens (still referenced by earlier rules below). */
	--color-primary-text: #222222;
	--color-body-text: #000000;
	--color-turquoise: #35cec2;
	--color-button-turquoise: #2fc0b5;
	--color-reference-link: #37b0b9;
	--color-toolbar: #808080;
	--color-icon-background: #f5f5f5;
	--color-icon: #999999;
	--color-yellow: #ffbd0b;
	--color-off-white: #f7f5ee;
	--color-white: #ffffff;

	/* Current token set: two teals with two different jobs -- dark for
	   readable text/buttons, bright for decoration only. */
	--adb-ink: #222222;
	--adb-body: #3d4548;
	--adb-teal-dark: #147a74;
	--adb-teal: #2fc0b5;
	--adb-teal-bright: #35cec2;
	--adb-teal-soft: #e7f7f5;
	--adb-cream: #f7f5ee;
	--adb-yellow: #ffbd0b;
	--adb-charcoal: #202426;
	--adb-blue-slate: #294c60;
	--adb-white: #ffffff;

	--font-body: "Montserrat", sans-serif;
	--font-nav: "Poppins", sans-serif;
}

body,
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title,
.adb-toolbar-phone {
	font-family: var(--font-body);
}

body {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--adb-body);
}

/* Standardize typography that was falling back to Roboto in places
   (hero/trust/product/motorization/CTA/footer copy) -- headings Montserrat
   700, body Montserrat 400/500, buttons/nav Poppins 600/700, and body text
   uses a softened ink color instead of pure black. */
h1, h2, h3 {
	font-family: var(--font-body);
	font-weight: 700;
	color: var(--adb-ink);
}
p {
	font-family: var(--font-body);
	color: var(--adb-body);
}
.elementor-button, nav, .hfe-nav-menu {
	font-family: var(--font-nav);
}

html {
	overflow-x: hidden;
}
body {
	max-width: 100%;
}

a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
input:focus-visible,
select:focus-visible,
iframe:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--color-reference-link);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Toolbar — compact, ~40px tall
   -------------------------------------------------------------------------- */
.elementor-element-70e7888 {
	min-height: 38px;
}
.adb-toolbar-phone {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}
/* Colors (bg #343a40, phone #7ce4dc, social bg rgba(255,255,255,.12)/white
   icons) are set directly in the widget settings now, not overridden here --
   just sizing stays as a CSS concern. */
.elementor-element-f1389ba .elementor-social-icon {
	width: 34px !important;
	height: 34px !important;
}

/* --------------------------------------------------------------------------
   Main navigation — sticky after scroll, Poppins nav links, gold active underline
   -------------------------------------------------------------------------- */
.elementor-element-01a8095 {
	position: sticky;
	top: 0;
	z-index: 999;
	min-height: 90px;
}

.elementor-element-5dc77a7 .hfe-nav-menu li > a,
.elementor-element-5dc77a7 nav a {
	font-family: var(--font-nav) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--color-primary-text) !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
}
.elementor-element-5dc77a7 .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item:not(:last-child) {
	margin-right: 4px !important;
}
/* Keep the desktop menu to a single row at 1280px: a touch smaller and a
   narrower logo column frees up the width the full menu needs. */
@media (min-width: 1025px) and (max-width: 1366px) {
	.elementor-element-5dc77a7 .hfe-nav-menu li > a {
		font-size: 14px !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
	.elementor-element-295823c .hfe-site-logo .hfe-site-logo-container img {
		width: 120px !important;
	}
}

/* --------------------------------------------------------------------------
   Logo — small bounce-in on page load
   -------------------------------------------------------------------------- */
@keyframes adb-logo-bounce {
	0% { transform: translateY(-30px); opacity: 0; }
	55% { transform: translateY(6px); opacity: 1; }
	75% { transform: translateY(-4px); }
	100% { transform: translateY(0); }
}
.elementor-element-295823c .hfe-site-logo-img {
	animation: adb-logo-bounce 0.7s ease-out;
}

/* --------------------------------------------------------------------------
   Scroll-to-top button — injected by adb-design-tokens.js, shown after
   scrolling past the hero.
   -------------------------------------------------------------------------- */
.adb-scroll-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--adb-blue-slate);
	color: var(--adb-white);
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
	z-index: 998;
}
.adb-scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.adb-scroll-top:hover {
	background: var(--adb-teal-bright);
	color: var(--adb-ink);
}
.adb-scroll-top svg {
	width: 20px;
	height: 20px;
}

/* --------------------------------------------------------------------------
   Mobile "Call or Text" bar — fixed to the bottom of the screen, mobile
   only. Hidden on tablet/desktop, where the toolbar's phone number is
   already visible without scrolling.
   -------------------------------------------------------------------------- */
.adb-mobile-call-bar {
	display: none;
}
@media (max-width: 767px) {
	.adb-mobile-call-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 54px;
		background: var(--adb-blue-slate);
		color: var(--adb-white);
		font-family: var(--font-nav);
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
		z-index: 997;
	}
	.adb-mobile-call-bar:active {
		background: var(--adb-teal-dark);
	}
	/* Sit above the call bar instead of behind it. */
	.adb-scroll-top {
		bottom: 70px;
	}
	/* Keep the fixed bar from permanently covering the last bit of the
	   footer's own content. */
	body {
		padding-bottom: 54px;
	}
}

/* HFE's own built-in "pointer" indicator (.hfe-pointer__underline) is what
   actually draws the active/hover underline -- it wins the cascade over a
   plain .current-menu-item::after rule since its own selectors carry far
   higher specificity (six classes vs. two). Recolor and de-animate HFE's
   pseudo-elements directly rather than fighting them with a parallel rule:
   var(--e-global-color-accent) was teal, and the fade animation is what
   made the underline appear to linger under the previously-hovered item
   when moving to another. */
.elementor-element-5dc77a7 .hfe-nav-menu-layout .menu-item a.hfe-menu-item:before,
.elementor-element-5dc77a7 .hfe-nav-menu-layout .menu-item a.hfe-menu-item:after {
	background-color: var(--color-yellow) !important;
	transition-duration: 0s !important;
}

/* --------------------------------------------------------------------------
   Boxed content sections — capped at 1200px and centered on wide screens.
   -------------------------------------------------------------------------- */
body .elementor-element-e4a4ab3,
body .elementor-element-9459af1,
body .elementor-element-a241df0,
body .elementor-element-da0c8ae > .e-con-inner,
body .elementor-element-89bca0e,
body .elementor-element-a44f9c0 > .e-con-inner,
body .elementor-element-56a5e35 > .e-con-inner,
body .elementor-element-555f007 > .e-con-inner,
body .elementor-element-8f9c3f0 > .e-con-inner {
	width: 100% !important;
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   Hero v3 — full-bleed real photo + overlaid teal consultation card.
   Desktop: photo is the section's own background, card floats over it with
   a left offset, rating badge sits near the lower edge. Mobile: card, then
   the photo as a real stacked block, then the badge -- no overlay.
   -------------------------------------------------------------------------- */
.elementor-element-5e8ed6f {
	position: relative;
}
/* Dark gradient over the left side of the photo, behind the card, for
   text/card contrast against a bright room photo. */
.elementor-element-5e8ed6f::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 20, 20, 0.55) 0%, rgba(10, 20, 20, 0.15) 55%, rgba(10, 20, 20, 0) 80%);
	pointer-events: none;
	z-index: 0;
}
.elementor-element-5e8ed6f > * {
	position: relative;
	z-index: 1;
}

/* Card content is center-aligned per the reference screenshot. */
.elementor-element-fc889ca {
	text-align: center;
}
.adb-hero-book-now {
	display: block;
	width: 100%;
	height: 44px;
	margin-top: 14px;
	background: var(--adb-white);
	color: var(--adb-ink);
	border: 0;
	border-radius: 10px;
	font-family: var(--font-nav);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.adb-hero-book-now:hover {
	background: #f2f2f2;
}

.adb-hero-call-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	margin-top: 10px;
	background: transparent;
	color: var(--adb-white);
	border: 2px solid var(--adb-white);
	border-radius: 10px;
	font-family: var(--font-nav);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	box-sizing: border-box;
}
.adb-hero-call-btn svg {
	flex-shrink: 0;
}
.adb-hero-call-btn:hover {
	background: rgba(255, 255, 255, 0.15);
}

.adb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 26px;
	border-radius: 10px;
	font-family: var(--font-nav);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	border: 0;
}
.adb-btn--primary {
	background: var(--adb-teal-bright);
	color: var(--adb-ink);
}
/* Consultation-request button: white with a blue-slate label so it reads as
   the primary action on the blue-slate CTA section, turquoise on hover. */
.adb-btn--white {
	background: var(--adb-white);
	color: var(--adb-blue-slate);
	border: 2px solid var(--adb-white);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.adb-btn--white:hover {
	background: var(--adb-teal-bright);
	color: var(--adb-ink);
	border-color: var(--adb-teal-bright);
}
.adb-btn--secondary {
	background: transparent;
	color: var(--adb-white);
	border: 2px solid var(--adb-white);
}
.adb-btn--yellow {
	background: var(--adb-yellow);
	color: var(--adb-ink);
	transition: background-color 0.2s ease;
}
.adb-btn--yellow:hover {
	background: #e6a800;
}
/* For light-background heroes (e.g. About Us's two-column hero), where
   .adb-btn--secondary's white-on-white styling has no contrast. */
.adb-btn--outline-dark {
	background: transparent;
	color: var(--adb-blue-slate);
	border: 2px solid var(--adb-blue-slate);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.adb-btn--outline-dark:hover {
	background: var(--adb-blue-slate);
	color: var(--adb-white);
}

/* Mobile-only hero image (hidden on desktop, where the photo is the section
   background instead). */
.adb-hero-mobile-img {
	display: none !important;
	visibility: hidden;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Floating Google rating badge. */
.adb-floating-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--adb-white);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	padding: 12px 16px;
	font-family: var(--font-body);
	font-weight: 700;
	color: var(--adb-ink);
}
.adb-floating-rating .stars {
	color: var(--adb-yellow);
}

@media (min-width: 768px) {
	/* First pass (500px) still left the trust bar mostly below the fold --
	   tightened further, alongside shrinking the card's own internal type
	   scale/margins (see the widget settings), rather than just capping the
	   section height and leaving the card to force it back up. */
	.elementor-element-5e8ed6f {
		min-height: 380px;
		align-items: flex-start !important;
		padding-top: 24px !important;
		padding-bottom: 24px !important;
		padding-left: 56px !important;
	}
	.adb-hero-mobile-img {
		display: none !important;
	}
	/* Elementor wraps every widget's content (.adb-floating-rating,
	   .adb-hero-mobile-img) in its own wrapper div (.elementor-element-*,
	   .elementor-widget-container). Pulling only the *inner* badge div out
	   of flow with position:absolute left that outer wrapper behind as a
	   normal flex child of the column-direction hero -- an empty box that
	   still took up a row's worth of space/gap, which is what showed up as
	   the stray bar. Positioning the wrapper itself removes it from flow
	   properly. */
	.elementor-element-5080eab {
		position: absolute;
		right: 40px;
		bottom: 40px;
		width: auto;
	}
	.elementor-element-cb83738 {
		display: none !important;
	}
	.adb-floating-rating {
		position: static;
	}
}

@media (max-width: 767px) {
	.elementor-element-5e8ed6f {
		background-image: none !important;
	}
	.elementor-element-5e8ed6f::before {
		display: none;
	}
	.elementor-element-cb83738 {
		display: block !important;
	}
	.adb-hero-mobile-img {
		display: block !important;
		visibility: visible;
		border-radius: 12px;
		margin-top: 20px;
	}
	.adb-floating-rating {
		margin-top: 16px;
	}
}

/* --------------------------------------------------------------------------
   Hero tagline -- sits in the open area beside the consultation card
   (5e8ed6f's 4th child, added after the card/mobile-img/rating-badge). The
   card itself (fc889ca) is untouched; this is purely an added, independently
   positioned element. No background box per spec -- just a text-shadow for
   legibility against the photo.
   -------------------------------------------------------------------------- */
.elementor-element-b3a91f2 .elementor-heading-title {
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.35);
	margin: 0;
}

/* Wide desktop only: the card is a fixed 520px + 56px left padding, so this
   only has safe clearance on genuinely wide viewports -- absolutely
   positioned in the remaining open area to the right, vertically centered,
   independent of the card's own layout. */
/* left/top are plain offsets, not a transform: translate(-50%,-50%) trick --
   Elementor's own entrance-animation (added via the editor's Motion Effects
   panel) drives the SAME element's transform via its own keyframes, which
   collided with a transform-based centering rule here: mid-animation the
   keyframe's transform won, then the instant the animation finished this
   rule's transform reasserted itself, causing a visible snap into place.
   Fixed offsets have nothing left to fight over. */
@media (min-width: 1200px) {
	.elementor-element-b3a91f2 {
		position: absolute;
		top: 128px;
		left: calc(60% - 18%);
		width: 36%;
		text-align: center;
		z-index: 1;
	}
}

/* Below 1200px there isn't reliable open space beside the card without
   risking overlap, so the tagline drops into normal flow instead, ordered
   ahead of the card (order:-1) so it reads as a headline above it rather
   than competing with it. */
@media (max-width: 1199px) {
	.elementor-element-b3a91f2 {
		order: -1;
		text-align: center;
		width: 100%;
		padding: 0 20px 20px;
	}
	.elementor-element-b3a91f2 .elementor-heading-title {
		font-size: 40px;
		line-height: 1.2;
	}
}

@media (max-width: 767px) {
	.elementor-element-b3a91f2 .elementor-heading-title {
		font-size: 34px !important;
		line-height: 1.2 !important;
	}
}

/* --------------------------------------------------------------------------
   Trust bar & icon-box based sections (trust bar, why-choose-us)
   -------------------------------------------------------------------------- */
/* The "stacked" view draws its own circle via .elementor-icon (not the
   .elementor-icon-box-icon wrapper), and Elementor sizes both the circle
   and the glyph off a single font-size (glyph = 1em, padding = 0.5em each
   side, so total circle = 2em). Forcing the svg's own pixel box fights that
   em-relative model and clips/misaligns the glyph -- setting font-size
   alone keeps Elementor's own centering math intact. 28px font-size = a
   56px circle with a proportionally-scaled, centered icon. */
.elementor-element-e4a4ab3 .elementor-icon-box-icon .elementor-icon,
.elementor-element-da0c8ae .elementor-icon-box-icon .elementor-icon {
	font-size: 28px !important;
}
.elementor-element-e4a4ab3 .elementor-icon-box-title,
.elementor-element-da0c8ae .elementor-icon-box-title {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 18px;
	color: var(--color-primary-text);
}

/* --------------------------------------------------------------------------
   Product cards — 4:3 image, hover zoom + shadow
   -------------------------------------------------------------------------- */
.adb-product-media,
.elementor-element-22974b2,
.elementor-element-8ec2bc3,
.elementor-element-b0a96a3,
.elementor-element-108adab {
	overflow: hidden;
	border-radius: 14px;
	/* Fixed pixel height rather than aspect-ratio: at 270px-wide columns,
	   sub-pixel flex-basis rounding made aspect-ratio boxes 131px vs 140px
	   depending on column. An explicit height is pixel-identical everywhere.
	   ID selectors are a reliable fallback in case css_classes doesn't
	   render on this container widget. */
	height: 200px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s ease;
}
.adb-product-media img,
.elementor-element-22974b2 img,
.elementor-element-8ec2bc3 img,
.elementor-element-b0a96a3 img,
.elementor-element-108adab img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.adb-product-media:hover,
.elementor-element-22974b2:hover,
.elementor-element-8ec2bc3:hover,
.elementor-element-b0a96a3:hover,
.elementor-element-108adab:hover {
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}
.adb-product-media:hover img,
.elementor-element-22974b2:hover img,
.elementor-element-8ec2bc3:hover img,
.elementor-element-b0a96a3:hover img,
.elementor-element-108adab:hover img {
	transform: scale(1.06);
}

/* Equal-height cards: stretch every column to the row's tallest card, then
   pin each button to the bottom regardless of description length. */
.elementor-element-a241df0 {
	align-items: stretch !important;
}
.elementor-element-45775c9,
.elementor-element-e72d8da,
.elementor-element-38a6e90,
.elementor-element-3f66e09 {
	display: flex !important;
	flex-direction: column !important;
	height: 100%;
}
body .elementor-element-d61ccdf,
body .elementor-element-1808ccf,
body .elementor-element-c2c2e0d,
body .elementor-element-8d26f09 {
	margin-top: auto;
}
body .elementor-element-d61ccdf .elementor-button,
body .elementor-element-1808ccf .elementor-button,
body .elementor-element-c2c2e0d .elementor-button,
body .elementor-element-8d26f09 .elementor-button {
	width: 100%;
	max-width: 270px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Turquoise is the recognizable brand color -- blue-slate and yellow do the
   structural/secondary work so the page doesn't read as all-teal. Product
   buttons go blue-slate (turquoise hover keeps the accent alive on
   interaction without covering every button in it); the gallery button is a
   different kind of action so it gets yellow instead of matching the
   products. */
.elementor-element-d61ccdf .elementor-button,
.elementor-element-1808ccf .elementor-button,
.elementor-element-c2c2e0d .elementor-button,
.elementor-element-8d26f09 .elementor-button {
	background-color: var(--adb-blue-slate) !important;
	color: var(--adb-white) !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.elementor-element-d61ccdf .elementor-button:hover,
.elementor-element-1808ccf .elementor-button:hover,
.elementor-element-c2c2e0d .elementor-button:hover,
.elementor-element-8d26f09 .elementor-button:hover {
	background-color: var(--adb-teal-bright) !important;
	color: var(--adb-ink) !important;
}
.elementor-element-85dfb1e .elementor-button {
	background-color: var(--adb-yellow) !important;
	color: var(--adb-ink) !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.elementor-element-85dfb1e .elementor-button:hover {
	background-color: var(--adb-ink) !important;
	color: var(--adb-white) !important;
}

/* --------------------------------------------------------------------------
   Section background rhythm
   -------------------------------------------------------------------------- */
body .elementor-element-89bca0e {
	background: linear-gradient(135deg, #e7f7f5 0%, #f7f5ee 100%) !important;
}
body .elementor-element-8f9c3f0 {
	background-color: var(--adb-teal-soft) !important;
}
body .elementor-element-e3c9131,
body .elementor-element-196a43c {
	background-color: var(--adb-charcoal) !important;
}

/* Final consultation (CTA) section: blue-slate instead of deep teal, keeps
   the turquoise buttons reading as the accent. */
body .elementor-element-63c2c77 {
	background-color: var(--adb-blue-slate) !important;
}
.elementor-element-63c2c77 h2.elementor-heading-title {
	color: var(--adb-white) !important;
}
.elementor-element-63c2c77 p {
	color: #e4eef2 !important;
}
/* "Choose an Appointment Time" -- restyle from a plain underlined link into
   the requested outlined secondary button. */
.elementor-element-0614b64 a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 26px;
	border-radius: 10px;
	background: transparent !important;
	color: var(--adb-white) !important;
	border: 2px solid var(--adb-white);
	font-family: var(--font-nav);
	font-weight: 700;
	text-decoration: none !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.elementor-element-0614b64 a:hover {
	background: var(--adb-teal-bright) !important;
	color: var(--adb-ink) !important;
	border-color: var(--adb-teal-bright);
}

/* Footer text colors -- headings stay the existing #ffbd0b, links/supporting
   text move to the softer palette so they read clearly on charcoal. */
.elementor-element-e3c9131 a {
	color: #e4e7e8 !important;
}
.elementor-element-e3c9131 a:hover {
	color: #7ce4dc !important;
}
.elementor-element-a419079 p[style*="999999"] {
	color: #b8c0c3 !important;
}

/* --------------------------------------------------------------------------
   Motorization spotlight
   -------------------------------------------------------------------------- */
.elementor-element-89bca0e .adb-video-frame {
	max-width: 100%;
	aspect-ratio: 16 / 9;
}
.adb-video-frame {
	position: relative;
	width: 100%;
}
.adb-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 12px;
}
.adb-video-card {
	background: #ffffff;
	padding: 12px;
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(34, 34, 34, 0.12);
}

/* Turquoise accent bar above the motorization heading. widget css_classes
   doesn't reliably render on heading widgets via direct JSON writes here --
   the ID selector is the guaranteed-reliable path (see adb-product-media
   precedent), so this targets the widget wrapper directly instead. */
.elementor-element-4d844c8 .elementor-heading-title::before {
	content: "";
	display: block;
	width: 64px;
	height: 5px;
	margin-bottom: 20px;
	border-radius: 999px;
	background: var(--adb-teal-bright);
}

/* FAQ section: center the 890px question list in the middle of the screen. */
body .elementor-element-68556ed {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --------------------------------------------------------------------------
   Gallery — auto-scrolling marquee. The JSON now holds 12 items (the
   original 6 followed by an identical duplicate set with fresh IDs) so the
   track can translate exactly -50% and loop with no visible seam. Images
   stay real <a> links the whole time -- a CSS transform on the track never
   blocks pointer-events on its children, so clicking through to the full
   photo still works mid-animation.
   -------------------------------------------------------------------------- */
.elementor-element-56a5e35 > .e-con-inner {
	overflow: hidden;
}
.elementor-element-704cfa0 {
	flex-wrap: nowrap !important;
	justify-content: flex-start;
	gap: 16px;
	width: max-content;
	animation: adb-gallery-marquee 32s linear infinite;
}
.elementor-element-704cfa0:hover {
	animation-play-state: paused;
}
@keyframes adb-gallery-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.elementor-element-704cfa0 {
		animation: none;
	}
}
.elementor-element-29ada0e,
.elementor-element-9c736f9,
.elementor-element-506a57e,
.elementor-element-6d8052b,
.elementor-element-060c916,
.elementor-element-fec3fb7,
.elementor-element-704cfa0 > .e-con {
	max-width: 200px !important;
	flex: 0 0 auto !important;
}
.adb-gallery-item {
	position: relative;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	min-width: 0;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.adb-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
	display: block;
}
.adb-gallery-item:hover img {
	transform: scale(1.06);
}
.adb-gallery-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px 14px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
	color: #fff;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
}

/* Final-CTA trigger row: the button is a raw HTML widget now (needed a real
   <button> for a11y), which has no Elementor "align" control the way the
   native button widget did -- its wrapper defaults to left-aligned block
   content instead of centering the inline-flex button inside it. */
.elementor-element-a868c24,
.elementor-element-a707a14 {
	text-align: center;
}
.elementor-element-a868c24 {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 10px;
}
.elementor-element-a868c24 .elementor-widget {
	margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   Homepage quick-consultation form
   -------------------------------------------------------------------------- */
.elementor-element-16c1bd1 .wpcf7-form label {
	display: block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	color: var(--color-primary-text);
	margin-bottom: 6px;
}
.elementor-element-16c1bd1 .uk-input,
.elementor-element-16c1bd1 .uk-select,
.elementor-element-16c1bd1 .uk-textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
	font-family: var(--font-body);
	font-size: 15px;
}
.elementor-element-16c1bd1 .uk-margin {
	margin-bottom: 16px;
}
.adb-submit-btn {
	width: 100%;
	height: 48px;
	background: var(--adb-ink);
	color: #ffffff;
	border: 0;
	border-radius: 10px;
	font-family: var(--font-nav);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.adb-submit-btn:hover {
	background: var(--adb-teal-bright);
	color: var(--adb-ink);
}
.elementor-element-16c1bd1 input:focus,
.elementor-element-16c1bd1 select:focus,
.elementor-element-16c1bd1 textarea:focus {
	outline: 2px solid var(--adb-teal-dark);
	outline-offset: 1px;
}
.elementor-element-16c1bd1 .wpcf7-not-valid-tip {
	color: #c0392b;
	font-size: 13px;
	margin-top: 4px;
}
.elementor-element-16c1bd1 .wpcf7-response-output {
	border-radius: 8px;
	font-family: var(--font-body);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   FAQ accordion — native <details>/<summary>, no JS required
   -------------------------------------------------------------------------- */
.adb-faq-item {
	background: var(--color-white);
	border-radius: 10px;
	padding: 4px 20px;
	margin-bottom: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.adb-faq-item summary {
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 700;
	color: var(--color-primary-text);
	padding: 16px 0;
	list-style: none;
}
.adb-faq-item summary::-webkit-details-marker {
	display: none;
}
.adb-faq-item summary::after {
	content: "+";
	float: right;
	font-weight: 700;
	color: var(--color-button-turquoise);
}
.adb-faq-item[open] summary::after {
	content: "\2212";
}
.adb-faq-item p {
	margin: 0 0 16px;
	color: var(--color-body-text);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Responsive breakpoints
   -------------------------------------------------------------------------- */

/* Tablet: product/why/gallery grids go to 2 columns. */
@media (max-width: 1024px) {
	.elementor-element-a241df0,
	.elementor-element-620faf4,
	.elementor-element-704cfa0 {
		flex-wrap: wrap;
	}
	.elementor-element-45775c9,
	.elementor-element-e72d8da,
	.elementor-element-38a6e90,
	.elementor-element-3f66e09,
	.elementor-element-d35af38,
	.elementor-element-ac7253b,
	.elementor-element-5ca5950,
	.elementor-element-b86726f,
	.elementor-element-bb9cd5e,
	.elementor-element-6c94de5,
	.elementor-element-29ada0e,
	.elementor-element-9c736f9,
	.elementor-element-506a57e,
	.elementor-element-6d8052b,
	.elementor-element-060c916,
	.elementor-element-fec3fb7 {
		width: 50% !important;
	}
}

/* Mobile: single column everywhere, full-width buttons, tighter gutters. */
@media (max-width: 767px) {
	/* --- All buttons: centered text sitewide. Buttons are flex-centered as
	   blocks already, but wrapped multi-line text (common on narrow screens,
	   e.g. "Book a Free" / "Consultation") defaults to left-aligned within
	   its own line unless text-align is set explicitly. Also let height grow
	   instead of clipping a wrapped second line. --- */
	.adb-btn,
	.elementor-button {
		text-align: center !important;
		height: auto !important;
		min-height: 44px !important;
		white-space: normal !important;
		line-height: 1.3 !important;
	}

	/* --- Compact mobile header: target ~110-160px total instead of ~465px. --- */
	.elementor-element-70e7888 {
		flex-wrap: nowrap !important;
		min-height: 0;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
		/* Desktop's 40px left/right padding was still active on mobile,
		   which left too little room for the phone number and pushed the
		   "Free Consultation" button on top of it. */
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
	/* Hide social icons from the header on mobile; they remain in the footer. */
	.elementor-element-180de32 {
		display: none !important;
	}
	.elementor-element-9b46156 {
		width: 60% !important;
		min-width: 0 !important;
	}
	.elementor-element-37d7286 {
		width: 40% !important;
		flex-shrink: 0 !important;
	}
	.adb-toolbar-phone {
		font-size: 12px !important;
		white-space: nowrap;
	}
	.elementor-element-afdf651 .elementor-button {
		font-size: 11px !important;
		padding: 7px 8px !important;
		white-space: nowrap;
	}

	.elementor-element-01a8095 {
		min-height: 0 !important;
		padding-top: 6px !important;
		padding-bottom: 6px !important;
		/* Same desktop 40px left/right padding bug as the toolbar row above
		   -- was never overridden here, eating width on both sides and
		   leaving the hamburger sitting inward from the true edge. */
		padding-left: 14px !important;
		padding-right: 14px !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
	/* Elementor's own responsive default stacks this row to a column on
	   mobile, which is what put the logo above a lonely, oddly-centered
	   hamburger with a big empty gap between them. Forcing row + explicit
	   auto widths keeps logo-left / hamburger-right on one line instead. */
	.elementor-element-5ed1ca4 {
		width: auto !important;
	}
	.elementor-element-5dc77a7 {
		width: auto !important;
		flex-grow: 1 !important;
		justify-content: flex-end !important;
	}
	/* Source logo file is only 144x100px natively, so this is close to its
	   upscaling limit -- pushed up anyway per explicit sign-off, accepting
	   some softness, since a properly high-res logo isn't available yet. */
	.elementor-element-295823c .hfe-site-logo .hfe-site-logo-container img {
		width: 180px !important;
	}
	/* HFE's hamburger toggle button carries its own generous default
	   padding; tighten it so it doesn't inflate the nav row height. */
	.elementor-element-5dc77a7 .hfe-nav-menu__toggle {
		padding: 8px !important;
		min-height: 0 !important;
	}

	/* --- Mobile typography: smaller, tighter headings so the page isn't ~13,000px tall. --- */
	h1 {
		font-size: 42px !important;
		line-height: 1.08 !important;
	}
	h2 {
		font-size: 32px !important;
		line-height: 1.18 !important;
	}
	/* Hero card headline stays smaller than the generic mobile h1 rule above
	   -- it lives inside a padded card, not the full viewport width. */
	.elementor-element-fc889ca .elementor-heading-title {
		font-size: 26px !important;
		line-height: 1.25 !important;
	}
	.elementor-element-5e8ed6f {
		padding-top: 30px !important;
		padding-bottom: 30px !important;
	}

	/* --- Trust bar & Why Choose Us: two-column grid instead of full stack. --- */
	.elementor-element-e4a4ab3,
	.elementor-element-620faf4 {
		flex-wrap: wrap !important;
	}
	.elementor-element-1c7dc60,
	.elementor-element-6686763,
	.elementor-element-4f60351,
	.elementor-element-78846c9,
	.elementor-element-d35af38,
	.elementor-element-ac7253b,
	.elementor-element-5ca5950,
	.elementor-element-b86726f,
	.elementor-element-bb9cd5e,
	.elementor-element-6c94de5 {
		width: 50% !important;
		align-items: center !important;
		text-align: center !important;
	}
	.elementor-element-e4a4ab3 .elementor-icon-box-description,
	.elementor-element-da0c8ae .elementor-icon-box-description {
		font-size: 13px;
	}
	/* Homepage's second top-level section (the 4.7 rating / customers
	   served / family run / lifetime warranty stat row): make sure the
	   icon, heading and description are all genuinely centered within
	   each 50%-wide cell, not just the description text. */
	.elementor-element-e4a4ab3 .elementor-widget-icon-box .elementor-icon-box-wrapper {
		text-align: center !important;
		align-items: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.elementor-element-e4a4ab3 .elementor-icon-box-icon {
		display: flex !important;
		justify-content: center !important;
		width: 100% !important;
	}
	.elementor-element-e4a4ab3 .elementor-icon-box-title,
	.elementor-element-e4a4ab3 .elementor-icon-box-description {
		text-align: center !important;
		width: 100% !important;
	}

	/* --- Product cards: less vertical padding/gaps. --- */
	.elementor-element-a241df0 {
		padding-top: 10px !important;
		padding-bottom: 30px !important;
	}

	/* --- Footer: two columns instead of one long stack. --- */
	.elementor-element-e3c9131 {
		flex-wrap: wrap !important;
	}
	.elementor-element-390bca1,
	.elementor-element-dbfc214,
	.elementor-element-a419079,
	.elementor-element-afc39c7 {
		width: 50% !important;
	}

	.elementor-element-a241df0,
	.elementor-element-620faf4,
	.elementor-element-704cfa0,
	.elementor-element-b75700c {
		flex-wrap: wrap;
	}
	.elementor-element-45775c9,
	.elementor-element-e72d8da,
	.elementor-element-38a6e90,
	.elementor-element-3f66e09,
	.elementor-element-d35af38,
	.elementor-element-ac7253b,
	.elementor-element-5ca5950,
	.elementor-element-b86726f,
	.elementor-element-bb9cd5e,
	.elementor-element-6c94de5,
	.elementor-element-29ada0e,
	.elementor-element-9c736f9,
	.elementor-element-506a57e,
	.elementor-element-6d8052b,
	.elementor-element-060c916,
	.elementor-element-fec3fb7,
	.elementor-element-375ce83,
	.elementor-element-2d5e273,
	.elementor-element-388f679 {
		width: 100% !important;
	}

	.elementor-element-5e8ed6f,
	.elementor-element-e4a4ab3,
	.elementor-element-a241df0,
	.elementor-element-da0c8ae,
	.elementor-element-89bca0e,
	.elementor-element-a44f9c0,
	.elementor-element-56a5e35,
	.elementor-element-555f007,
	.elementor-element-8f9c3f0,
	.elementor-element-63c2c77 {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.elementor-element-4dcd0f8 {
		flex-wrap: wrap;
	}

	body .elementor-element-d61ccdf .elementor-button,
	body .elementor-element-1808ccf .elementor-button,
	body .elementor-element-c2c2e0d .elementor-button,
	body .elementor-element-8d26f09 .elementor-button {
		max-width: 100%;
	}

	.elementor-element-16c1bd1 {
		width: 100% !important;
	}

	/* Nav tap targets >= 44x44px on the collapsed mobile menu. */
	.elementor-element-5dc77a7 .hfe-nav-menu li > a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}

/* --------------------------------------------------------------------------
   Free-consultation modal. IDs (580106b/16c1bd1/405e736/16c1bd1's heading)
   are also given the requested .adb-contact-modal / .adb-contact-modal__dialog
   classes via the widget's css_classes setting; ID selectors stay as the
   guaranteed-reliable primary targeting (see adb-product-media precedent).
   -------------------------------------------------------------------------- */
.elementor-element-580106b,
.adb-contact-modal {
	display: none !important;
	visibility: hidden;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.55);
	padding: 20px;
	box-sizing: border-box;
	overflow-y: auto;
}
.elementor-element-580106b.is-open,
.adb-contact-modal.is-open {
	display: flex !important;
	visibility: visible;
}
html.adb-modal-open-body,
body.adb-modal-open-body {
	overflow: hidden !important;
	height: 100%;
}
.elementor-element-580106b > .e-con-inner {
	margin: auto;
}
.elementor-element-16c1bd1,
.adb-contact-modal__dialog {
	position: relative;
	margin: auto;
	max-height: 90vh;
	/* The dialog itself no longer scrolls (see .adb-contact-modal__scroll
	   below) -- it just clips. Windows renders scrollbars as solid,
	   non-overlay bars that sit flush against whatever element actually
	   has overflow-y:auto; when that was this same rounded+padded box, the
	   scrollbar visually squared off the right corner. Moving the scroll to
	   an inner wrapper means the scrollbar renders inboard of this box's own
	   padding and never touches its rounded edge at all. */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* Slides in from the left on open, back out to the left on close (JS
	   toggles .is-shown after a frame so this transform actually animates
	   instead of jumping straight to its end state -- see adb-design-tokens.js).
	   The dialog keeps its own border-radius throughout the whole motion, so
	   it never docks flush against the viewport edge with a squared-off
	   side -- both corners stay rounded the entire time, not just at rest. */
	transform: translateX(-130%);
	transition: transform 0.35s ease;
}
.elementor-element-9f2b3a1,
.adb-contact-modal__scroll {
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}
.adb-contact-modal.is-shown .elementor-element-16c1bd1,
.adb-contact-modal.is-shown .adb-contact-modal__dialog {
	transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
	.elementor-element-16c1bd1,
	.adb-contact-modal__dialog {
		transition: none;
		transform: none;
	}
}
/* Close button + heading share a flex row instead of the button being
   absolutely positioned over the heading -- position:absolute needed the
   heading's own width/wrap math to leave exactly the right amount of
   clearance, which kept breaking (the button either overlapped the text or
   lost its click target under a stretched sibling). Flexbox reserves real,
   guaranteed space for both: the heading takes the remaining room via
   flex:1, the button never shrinks via flex-shrink:0, so they can't overlap
   regardless of how long the heading text is or how it wraps. */
.elementor-element-a1b2c3d,
.adb-contact-modal__titlebar {
	display: flex;
	flex-direction: row !important;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.elementor-element-a1b2c3d .elementor-element-0413749,
.adb-contact-modal__titlebar .elementor-element-0413749 {
	flex: 1;
	min-width: 0;
}
.elementor-element-a1b2c3d .elementor-element-405e736,
.adb-contact-modal__titlebar .elementor-element-405e736 {
	flex: 0 0 auto;
}
.adb-modal__close {
	background: transparent;
	border: 0;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #666666;
	padding: 6px 10px;
	margin: -6px -10px 0 0;
}
.elementor-element-580106b h3.elementor-heading-title {
	margin-bottom: 12px;
}

@media (max-width: 767px) {
	.elementor-element-580106b,
	.adb-contact-modal {
		width: 100%;
		height: 100dvh;
		padding: 20px;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.elementor-element-16c1bd1,
	.adb-contact-modal__dialog {
		width: 100%;
		max-width: 350px;
		margin: 0 auto;
		padding: 24px 20px;
	}

	/* Force every level inside the dialog to stack, regardless of whichever
	   flex-direction/flex-basis the underlying Elementor container/CF7 form
	   markup was rendering at this width. */
	.elementor-element-16c1bd1,
	.elementor-element-9f2b3a1,
	.elementor-element-16c1bd1 > .e-con-inner,
	.elementor-element-16c1bd1 .elementor-container,
	.adb-contact-modal__content {
		display: flex;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 16px;
	}

	.elementor-element-16c1bd1 > *,
	.elementor-element-9f2b3a1 > *,
	.adb-contact-modal__content > *,
	.elementor-element-16c1bd1 form,
	.elementor-element-16c1bd1 input,
	.elementor-element-16c1bd1 select,
	.elementor-element-16c1bd1 textarea,
	.elementor-element-16c1bd1 .uk-margin {
		width: 100% !important;
		max-width: 100% !important;
		flex-basis: auto !important;
	}
	/* The close button's wrapper also matches ".elementor-element-9f2b3a1 > *"
	   above -- stretched to 100% width it lost its top-right position (the
	   button, with no alignment of its own, then rendered at the wrapper's
	   left edge instead, landing on top of the heading). It's absolutely
	   positioned by .elementor-element-405e736 below regardless of width, so
	   forcing width back to auto here just undoes the unwanted stretch. */
	.elementor-element-405e736 {
		width: auto !important;
		max-width: none !important;
	}

	.elementor-element-16c1bd1 h3,
	.adb-contact-modal h3 {
		font-size: 24px;
		line-height: 1.15;
	}

	/* Compress the form so it fits on one screen without the inner scroll
	   kicking in on typical phone heights. */
	.elementor-element-16c1bd1,
	.adb-contact-modal__dialog {
		padding: 20px 18px;
	}
	.elementor-element-9f2b3a1,
	.adb-contact-modal__scroll {
		gap: 10px !important;
	}
	.elementor-element-16c1bd1 .wpcf7-form label {
		font-size: 13px;
		margin-bottom: 4px;
	}
	.elementor-element-16c1bd1 .uk-input,
	.elementor-element-16c1bd1 .uk-select,
	.elementor-element-16c1bd1 .uk-textarea {
		padding: 8px 10px;
		font-size: 14px;
	}
	.elementor-element-16c1bd1 .uk-textarea {
		min-height: 60px;
	}
	.elementor-element-16c1bd1 .uk-margin {
		margin-bottom: 8px;
	}
	.adb-submit-btn {
		height: 42px;
		font-size: 15px;
	}
}

/* Desktop: tall enough to need internal scroll -- trim field spacing a bit
   so the submit button comes into view sooner. */
@media (min-width: 768px) {
	.elementor-element-16c1bd1 .uk-margin {
		margin-bottom: 12px !important;
	}
}

/* --------------------------------------------------------------------------
   Blinds page (post 18) -- modernized rebuild.
   -------------------------------------------------------------------------- */
.elementor-element-4460b8e {
	position: relative;
}
.elementor-element-4460b8e::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 30, 35, 0.35) 0%, rgba(20, 30, 35, 0.1) 100%);
	pointer-events: none;
}

/* CSS Grid instead of Elementor's flex-wrap custom-property system for the
   2x2 product grid -- direct-JSON writes to nested flex containers on this
   page repeatedly hit real Elementor reliability gaps (background/shadow
   settings silently dropped, and here a card's width failing to resolve to
   a definite value, collapsing its text into a tall single-column stack
   and dragging the row below it far down the page). Grid sidesteps all of
   that: fixed 2-column tracks, no flex-basis resolution involved. */
.elementor-element-303b420 {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.elementor-element-303b420 > .e-con {
	width: 100% !important;
	max-width: 100% !important;
	height: auto;
}
.elementor-element-f03861b,
.elementor-element-2610765,
.elementor-element-38be3b9,
.elementor-element-c20949e {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(34, 34, 34, 0.08);
	overflow: hidden;
}

.adb-blinds-product-media {
	width: 100%;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.adb-blinds-product-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.elementor-element-bd3981c img {
	border-radius: 0;
	width: 34px !important;
	height: 34px !important;
	object-fit: contain;
}

/* CTA row buttons need a minimum touch-target height regardless of widget
   type (raw HTML widgets here, same .adb-btn base used on the homepage). */
.elementor-element-1d2f75f .adb-btn {
	min-height: 44px;
}

.adb-blinds-gallery-grid {
	display: grid !important;
	grid-template-columns: repeat( 3, 1fr );
}
.adb-blinds-gallery-grid > .e-con {
	width: 100% !important;
	max-width: 100% !important;
}

@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-element-22ccd81 {
		flex-wrap: wrap !important;
	}
	.elementor-element-ccfdea6,
	.elementor-element-bd3981c {
		width: 100% !important;
	}
	.adb-blinds-gallery-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}


@media (max-width: 767px) {
	.elementor-element-4460b8e {
		min-height: 260px !important;
	}
	.elementor-element-07bd993 .elementor-heading-title {
		font-size: 34px !important;
		line-height: 1.15 !important;
	}
	.elementor-element-0ee3f62 .elementor-heading-title {
		font-size: 17px !important;
	}
	.elementor-element-22ccd81 {
		flex-wrap: wrap !important;
	}
	.elementor-element-ccfdea6,
	.elementor-element-bd3981c {
		width: 100% !important;
	}
	.elementor-element-303b420 {
		grid-template-columns: 1fr;
	}
	.adb-blinds-gallery-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
	.elementor-element-94aac6a .elementor-heading-title {
		font-size: 30px !important;
	}
}

/* --------------------------------------------------------------------------
   Shades page (post 19) -- modernized rebuild. Product/benefit/gallery
   grids use CSS Grid directly (not Elementor's flex-wrap custom-property
   system) from the start -- the Blinds page rebuild hit real reliability
   gaps there (background/shadow settings silently dropped, a child's width
   failing to resolve to a definite value and blowing out the whole page).
   Grid sidesteps that class of bug entirely.
   -------------------------------------------------------------------------- */
.elementor-element-3cd8128 {
	position: relative;
}
.elementor-element-3cd8128::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 30, 35, 0.35) 0%, rgba(20, 30, 35, 0.1) 100%);
	pointer-events: none;
}

.adb-shades-product-media {
	width: 100%;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.adb-shades-product-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.elementor-element-50eeec9 {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.elementor-element-50eeec9 > .e-con {
	width: 100% !important;
	max-width: 100% !important;
}
.elementor-element-32deb87,
.elementor-element-0ad72d6,
.elementor-element-7fd1627,
.elementor-element-92a23fd {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(34, 34, 34, 0.08);
	overflow: hidden;
}

.elementor-element-4be79cb {
	display: grid !important;
	grid-template-columns: repeat( 4, 1fr );
	gap: 24px;
}
.elementor-element-4be79cb > .e-con {
	width: 100% !important;
	max-width: 100% !important;
}
.elementor-element-4be79cb img {
	width: 34px !important;
	height: 34px !important;
	object-fit: contain;
}

.elementor-element-6311dfe .adb-btn {
	min-height: 44px;
}

.elementor-element-7033fa2 {
	display: grid !important;
	grid-template-columns: repeat( 3, 1fr );
	gap: 20px;
}
.elementor-element-7033fa2 > .e-con {
	width: 100% !important;
	max-width: 100% !important;
}

@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-element-50eeec9,
	.elementor-element-4be79cb {
		grid-template-columns: 1fr 1fr;
	}
	.elementor-element-7033fa2 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (max-width: 767px) {
	.elementor-element-3cd8128 {
		min-height: 260px !important;
	}
	.elementor-element-e6a09b8 .elementor-heading-title {
		font-size: 34px !important;
		line-height: 1.15 !important;
	}
	.elementor-element-83564e7 .elementor-heading-title {
		font-size: 17px !important;
	}
	.elementor-element-50eeec9,
	.elementor-element-4be79cb {
		grid-template-columns: 1fr;
	}
	.elementor-element-7033fa2 {
		grid-template-columns: repeat( 2, 1fr );
	}
	.elementor-element-4ae6147 .elementor-heading-title,
	.elementor-element-9721e9c .elementor-heading-title,
	.elementor-element-bc25f5e .elementor-heading-title {
		font-size: 30px !important;
	}
}

/* --------------------------------------------------------------------------
   Shutters page (post 20) -- modernized rebuild. Grid-based product/gallery
   layout from the start, same reasoning as the Shades page rebuild.
   -------------------------------------------------------------------------- */
.elementor-element-4943b68 {
	position: relative;
}
.elementor-element-4943b68::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 25, 30, 0.55) 0%, rgba(15, 25, 30, 0.35) 100%);
	pointer-events: none;
}
.elementor-element-4943b68 > * {
	position: relative;
	z-index: 1;
}
.elementor-element-e74e03b .adb-btn {
	min-height: 44px;
}

.elementor-element-54dae67 img {
	height: auto;
}
.elementor-element-b1a2c3d {
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
}
.elementor-element-b1a2c3e {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: 220px !important;
}
.elementor-element-b1a2c3f {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: 110px !important;
}
.elementor-element-b1a2c3e img {
	max-width: 220px;
}
.elementor-element-b1a2c3f img {
	max-width: 110px;
}

@media (max-width: 480px) {
	.elementor-element-b1a2c3d {
		flex-direction: column !important;
	}
	.elementor-element-b1a2c3e,
	.elementor-element-b1a2c3f {
		max-width: 100% !important;
	}
	.elementor-element-b1a2c3e img,
	.elementor-element-b1a2c3f img {
		margin: 0 auto;
	}
}

/* --------------------------------------------------------------------------
   Drapes page (post 21) -- modernized rebuild. Same Grid-based pattern as
   the Shutters rebuild (reliable from the start, see notes above).
   -------------------------------------------------------------------------- */
.elementor-element-885fbfa {
	position: relative;
}
.elementor-element-885fbfa::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 25, 30, 0.55) 0%, rgba(15, 25, 30, 0.35) 100%);
	pointer-events: none;
}
.elementor-element-885fbfa > * {
	position: relative;
	z-index: 1;
}
.elementor-element-0948830 .adb-btn {
	min-height: 44px;
}

.elementor-element-daff6e2 {
	display: grid !important;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}
.elementor-element-daff6e2 > .e-con {
	width: 100% !important;
	max-width: 100% !important;
	height: 100%;
}
.elementor-element-05e8b32,
.elementor-element-13f232d,
.elementor-element-3e2f7cd,
.elementor-element-c175c5f,
.elementor-element-d4728d0,
.elementor-element-75e1a76 {
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(34, 34, 34, 0.06);
}
.elementor-element-daff6e2 img {
	width: 34px !important;
	height: 34px !important;
	object-fit: contain;
}

.elementor-element-59cec13 {
	display: grid !important;
	grid-template-columns: repeat( 2, 1fr );
	gap: 24px;
}
.elementor-element-59cec13 > .e-con {
	width: 100% !important;
	max-width: 100% !important;
}
.elementor-element-59cec13 .adb-gallery-item {
	aspect-ratio: 4 / 3;
}

@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-element-daff6e2 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (max-width: 767px) {
	.elementor-element-885fbfa {
		min-height: 320px !important;
	}
	.elementor-element-413b0e9 .elementor-heading-title {
		font-size: 32px !important;
		line-height: 1.15 !important;
	}
	.elementor-element-daff6e2 {
		grid-template-columns: 1fr;
	}
	.elementor-element-59cec13 {
		grid-template-columns: 1fr;
	}
	.elementor-element-639dc09 .elementor-heading-title,
	.elementor-element-b22a9e0 .elementor-heading-title {
		font-size: 28px !important;
	}
}

.elementor-element-e8be47e {
	display: grid !important;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}
.elementor-element-e8be47e > .e-con {
	width: 100% !important;
	max-width: 100% !important;
	height: 100%;
}
.elementor-element-4754d97,
.elementor-element-c0f2f3e,
.elementor-element-3ae79db,
.elementor-element-8656060,
.elementor-element-0a30532,
.elementor-element-265e941 {
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(34, 34, 34, 0.06);
}
.elementor-element-e8be47e img {
	width: 34px !important;
	height: 34px !important;
	object-fit: contain;
}

.elementor-element-d3faff3 {
	display: grid !important;
	grid-template-columns: repeat( 3, 1fr );
	gap: 20px;
}
.elementor-element-d3faff3 > .e-con {
	width: 100% !important;
	max-width: 100% !important;
}

@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-element-b7992a6 {
		flex-wrap: wrap !important;
	}
	.elementor-element-25c3d72,
	.elementor-element-54dae67 {
		width: 100% !important;
	}
	.elementor-element-e8be47e {
		grid-template-columns: repeat( 2, 1fr );
	}
	.elementor-element-d3faff3 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (max-width: 767px) {
	.elementor-element-4943b68 {
		min-height: 320px !important;
	}
	.elementor-element-c1cde0e .elementor-heading-title {
		font-size: 32px !important;
		line-height: 1.15 !important;
	}
	.elementor-element-b7992a6 {
		flex-wrap: wrap !important;
	}
	.elementor-element-25c3d72,
	.elementor-element-54dae67 {
		width: 100% !important;
	}
	.elementor-element-e8be47e {
		grid-template-columns: 1fr;
	}
	.elementor-element-d3faff3 {
		grid-template-columns: 1fr;
	}
	.elementor-element-d0e2bf6 .elementor-heading-title,
	.elementor-element-ed83204 .elementor-heading-title {
		font-size: 28px !important;
	}
}

/* --------------------------------------------------------------------------
   Motorization page (post 22) -- modernized rebuild. Same Grid-based
   pattern as the Shutters/Drapes rebuilds.
   -------------------------------------------------------------------------- */
.elementor-element-1ac82d4 {
	position: relative;
}
.elementor-element-1ac82d4::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 25, 30, 0.55) 0%, rgba(15, 25, 30, 0.35) 100%);
	pointer-events: none;
}
.elementor-element-1ac82d4 > * {
	position: relative;
	z-index: 1;
}
.elementor-element-1eecfb9 {
	display: grid !important;
	grid-template-columns: repeat( 4, 1fr );
	gap: 24px;
}
.elementor-element-1eecfb9 > .e-con {
	width: 100% !important;
	max-width: 100% !important;
	height: 100%;
}
.elementor-element-61795f5,
.elementor-element-da43bb7,
.elementor-element-bfc016b,
.elementor-element-375e2d9 {
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(34, 34, 34, 0.06);
}
.elementor-element-1eecfb9 img {
	width: 34px !important;
	height: 34px !important;
	object-fit: contain;
}

/* Two solution cards. The Horizon logo is a wide-aspect SVG with no
   intrinsic size cap of its own -- without max-height it would stretch to
   fill the card's full width, so both logos are explicitly capped here
   rather than trusting the image widget's own width control. */
.elementor-element-53add45 {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.elementor-element-53add45 > .e-con {
	width: 100% !important;
	max-width: 100% !important;
	height: 100%;
}
/* Both cards are flex columns already (settings.flex_direction:'column');
   giving the logo a fixed-height, centered slot means the ALTA and HORIZONS
   logos -- very different aspect ratios -- occupy the same vertical space,
   so the heading/text/button below start at the same Y in both cards. The
   button's own margin-top:auto then pins it to the bottom of the card
   regardless of how much the description text wraps.
   widget css_classes doesn't reliably render via direct JSON writes here
   (confirmed: the <img> has none of the classes set in settings) -- the ID
   selector on the wrapper is the guaranteed-reliable path used throughout
   this build, and overflow:hidden is a defensive backstop in case an image
   is still unconstrained for any reason. */
.elementor-element-c8cbf04,
.elementor-element-378ffa0 {
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.elementor-element-c8cbf04 img,
.elementor-element-378ffa0 img {
	max-height: 90px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	margin: 0 auto;
}
.elementor-element-87dcd89,
.elementor-element-bdeab4c {
	margin-top: auto;
	padding-top: 18px;
}
.adb-moto-kids-badge img {
	max-height: 110px;
	width: auto;
	max-width: 130px;
	object-fit: contain;
	margin: 0 auto 28px;
}
.elementor-element-f4b3a91 .adb-btn {
	height: auto;
	min-height: 44px;
	white-space: normal;
	text-align: center;
	line-height: 1.3;
	padding-top: 12px;
	padding-bottom: 12px;
}

.elementor-element-820db89 {
	display: grid !important;
	grid-template-columns: repeat( 2, 1fr );
	gap: 24px;
}
.elementor-element-820db89 > .e-con {
	width: 100% !important;
	max-width: 100% !important;
}
.elementor-element-820db89 .adb-gallery-item {
	aspect-ratio: 4 / 3;
}

.elementor-element-d8fe3d1 .adb-btn {
	min-height: 44px;
}

@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-element-1eecfb9 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (max-width: 767px) {
	.elementor-element-1ac82d4 {
		min-height: 320px !important;
	}
	.elementor-element-46f1884 .elementor-heading-title {
		font-size: 32px !important;
		line-height: 1.15 !important;
	}
	.elementor-element-1eecfb9 {
		grid-template-columns: 1fr;
	}
	.elementor-element-53add45 {
		grid-template-columns: 1fr;
	}
	.elementor-element-820db89 {
		grid-template-columns: 1fr;
	}
	.elementor-element-e0bb175 .elementor-heading-title,
	.elementor-element-b0cea6a .elementor-heading-title,
	.elementor-element-403f977 .elementor-heading-title {
		font-size: 28px !important;
	}
}

/* --------------------------------------------------------------------------
   About Us page (post 56) -- modernized rebuild. Same Grid-based pattern as
   the Shutters/Drapes/Motorization rebuilds.
   -------------------------------------------------------------------------- */
.elementor-element-5cbfdc0 {
	flex-wrap: wrap;
}
.adb-about-photo-frame {
	max-width: 480px;
	margin: 0 auto;
}
.adb-about-photo-frame .elementor-widget-image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(34, 34, 34, 0.12);
}
.adb-about-photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.elementor-element-72d80f1 .adb-btn,
.elementor-element-1d74bcb .adb-btn {
	min-height: 44px;
}

.elementor-element-35091c8 {
	display: grid !important;
	grid-template-columns: repeat( 4, 1fr );
	gap: 20px;
}
.elementor-element-35091c8 > .e-con {
	width: 100% !important;
	max-width: 100% !important;
}

.elementor-element-bdeec81 {
	display: grid !important;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}
.elementor-element-bdeec81 > .e-con {
	width: 100% !important;
	max-width: 100% !important;
	height: 100%;
}
.elementor-element-8f1bb43,
.elementor-element-ef9acac,
.elementor-element-7828908,
.elementor-element-fe81ced,
.elementor-element-d8e5ebc,
.elementor-element-8888c8a {
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(34, 34, 34, 0.06);
}
.elementor-element-bdeec81 img {
	width: 30px !important;
	height: 30px !important;
	object-fit: contain;
}

.adb-about-city-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	max-width: 900px;
	margin: 0 auto;
}
.adb-about-city-badge {
	display: inline-block;
	background: #ffffff;
	color: var(--adb-ink);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid rgba(34, 34, 34, 0.1);
}

@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-element-35091c8 {
		grid-template-columns: repeat( 2, 1fr );
	}
	.elementor-element-bdeec81 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (max-width: 767px) {
	.elementor-element-84847c9,
	.elementor-element-7690f63 {
		width: 100% !important;
	}
	.elementor-element-da7c226 .elementor-heading-title {
		font-size: 34px !important;
		line-height: 1.15 !important;
	}
	.adb-about-photo-frame {
		max-width: 320px;
	}
	.elementor-element-35091c8 {
		grid-template-columns: repeat( 2, 1fr );
	}
	.elementor-element-bdeec81 {
		grid-template-columns: 1fr;
	}
	.elementor-element-2a83cec .elementor-heading-title,
	.elementor-element-ed6ddd8 .elementor-heading-title,
	.elementor-element-01aec97 .elementor-heading-title {
		font-size: 28px !important;
	}
}

/* --------------------------------------------------------------------------
   Our Blog archive (post 65) -- dynamic WP_Query output from the
   [adb_blog_archive] shortcode (see adb-blog-archive.php). Filters, grid,
   and pagination are plain CSS Grid/Flexbox, matching the reliable pattern
   used across the other rebuilt pages.
   -------------------------------------------------------------------------- */
.adb-blog-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 36px;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(34, 34, 34, 0.1);
}
.adb-blog-filter-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.adb-blog-filter-field label {
	font-family: var(--font-nav);
	font-size: 13px;
	font-weight: 600;
	color: var(--adb-ink);
}
.adb-blog-filter-field input[type="search"],
.adb-blog-filter-field select {
	height: 44px;
	min-width: 220px;
	padding: 0 14px;
	border: 1px solid rgba(34, 34, 34, 0.2);
	border-radius: 8px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--adb-ink);
	background: #ffffff;
}
.adb-blog-filter-field input[type="search"]:focus,
.adb-blog-filter-field select:focus {
	outline: 3px solid var(--adb-teal-bright);
	outline-offset: 1px;
}
.adb-blog-filters .adb-btn {
	height: 44px;
}
.adb-blog-clear {
	display: inline-flex;
	align-items: center;
	height: 44px;
	font-family: var(--font-nav);
	font-size: 14px;
	font-weight: 600;
	color: var(--adb-blue-slate);
	text-decoration: underline;
}
.adb-blog-empty {
	text-align: center;
	font-size: 16px;
	color: var(--adb-body);
	padding: 40px 0;
}

.adb-blog-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 32px;
}
.adb-blog-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(34, 34, 34, 0.07);
	height: 100%;
}
.adb-blog-card-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--adb-teal-soft);
}
.adb-blog-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
.adb-blog-card:hover .adb-blog-card-media img {
	transform: scale(1.04);
}
.adb-blog-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--adb-teal-soft);
}
.adb-blog-card-placeholder img {
	width: auto !important;
	height: auto !important;
	max-width: 120px;
	max-height: 60px;
	object-fit: contain;
	transform: none !important;
}
.adb-blog-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px;
}
.adb-blog-card-cat {
	display: inline-block;
	align-self: flex-start;
	background: var(--adb-teal-soft);
	color: var(--adb-teal-dark);
	font-family: var(--font-nav);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 10px;
}
.adb-blog-card-date {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	color: #8a8f91;
	margin-bottom: 6px;
}
.adb-blog-card-title {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 10px;
}
.adb-blog-card-title a {
	color: var(--adb-ink);
	text-decoration: none;
}
.adb-blog-card-title a:hover {
	color: var(--adb-teal-dark);
}
.adb-blog-card-excerpt {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--adb-body);
	margin: 0 0 16px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.adb-blog-card-link {
	margin-top: auto;
	font-family: var(--font-nav);
	font-size: 14px;
	font-weight: 700;
	color: var(--adb-blue-slate);
	text-decoration: none;
}
.adb-blog-card-link:hover {
	color: var(--adb-teal-dark);
}

.adb-blog-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 44px;
}
.adb-blog-page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.adb-blog-page-link,
.adb-blog-page-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 8px;
	font-family: var(--font-nav);
	font-size: 14px;
	font-weight: 600;
	color: var(--adb-ink);
	background: #ffffff;
	border: 1px solid rgba(34, 34, 34, 0.15);
	text-decoration: none;
}
.adb-blog-page-num.is-current {
	background: var(--adb-blue-slate);
	border-color: var(--adb-blue-slate);
	color: #ffffff;
}
.adb-blog-page-link:hover,
.adb-blog-page-num:hover {
	border-color: var(--adb-blue-slate);
}
.adb-blog-page-link:focus,
.adb-blog-page-num:focus {
	outline: 3px solid var(--adb-teal-bright);
	outline-offset: 1px;
}

@media (max-width: 1024px) and (min-width: 768px) {
	.adb-blog-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (max-width: 767px) {
	.elementor-element-e7502dd {
		min-height: 0 !important;
	}
	.elementor-element-dce147a .elementor-heading-title {
		font-size: 32px !important;
		line-height: 1.15 !important;
	}
	.adb-blog-grid {
		grid-template-columns: 1fr;
	}
	.adb-blog-filters {
		flex-direction: column;
		align-items: stretch;
	}
	.adb-blog-filter-field input[type="search"],
	.adb-blog-filter-field select {
		min-width: 0;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   FAQ accordion (post 58) -- native <details>/<summary> from the
   [adb_faq_accordion] shortcode (see adb-faq-accordion.php). Keyboard
   toggling, focus, and collapsed-by-default state all come from the browser
   natively -- no JS needed for the accordion itself.
   -------------------------------------------------------------------------- */
.adb-faq-group-title {
	font-family: var(--font-body);
	font-size: 24px;
	font-weight: 700;
	color: var(--adb-ink);
	margin: 40px 0 16px;
}
.adb-faq-group-title:first-child {
	margin-top: 0;
}
.adb-faq-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.adb-faq-item {
	background: #ffffff;
	border: 1px solid rgba(34, 34, 34, 0.1);
	border-radius: 10px;
	padding: 4px 22px;
}
.adb-faq-item[open] {
	border-color: var(--adb-teal-bright);
}
.adb-faq-question {
	list-style: none;
	cursor: pointer;
	padding: 16px 36px 16px 0;
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	color: var(--adb-ink);
	position: relative;
}
.adb-faq-question::-webkit-details-marker {
	display: none;
}
.adb-faq-question::after {
	content: "+";
	position: absolute;
	top: 14px;
	right: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--adb-teal-soft);
	color: var(--adb-teal-dark);
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	text-align: center;
}
.adb-faq-item[open] .adb-faq-question::after {
	content: "\2212";
}
.adb-faq-question:focus-visible {
	outline: 3px solid var(--adb-teal-bright);
	outline-offset: 2px;
	border-radius: 6px;
}
.adb-faq-answer {
	padding: 0 0 20px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--adb-body);
}
.adb-faq-answer p {
	margin: 0 0 12px;
}
.adb-faq-answer p:last-child {
	margin-bottom: 0;
}
.adb-faq-answer ul {
	margin: 0 0 12px;
	padding-left: 20px;
}
.adb-faq-answer li {
	margin-bottom: 8px;
}
.adb-faq-answer a {
	color: var(--adb-blue-slate);
	font-weight: 700;
}
.elementor-element-dc0131d .adb-btn {
	min-height: 44px;
}

/* Dark overlay for legibility -- this hero never got the gradient overlay
   the other rebuilt heroes (Shutters/Drapes/Motorization) have, so the
   white heading text was sitting directly on the busy stock photo. */
.elementor-element-51f9d64 {
	position: relative;
}
.elementor-element-51f9d64::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 25, 30, 0.65) 0%, rgba(15, 25, 30, 0.5) 100%);
	pointer-events: none;
}
.elementor-element-51f9d64 > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 767px) {
	.elementor-element-51f9d64 {
		min-height: 0 !important;
	}
	.elementor-element-6ec10df .elementor-heading-title {
		font-size: 32px !important;
		line-height: 1.15 !important;
	}
	.adb-faq-group-title {
		font-size: 20px;
		margin: 32px 0 12px;
	}
	.adb-faq-question {
		font-size: 17px;
	}
}

/* --------------------------------------------------------------------------
   Service Areas system (hub + 6 city pages) -- [adb_city_page] /
   [adb_service_areas_hub] shortcodes, see adb-service-areas.php. Grid
   layouts use CSS Grid directly, same reasoning as every other rebuild in
   this project (reliable from the start; Elementor's own flex-wrap custom
   properties repeatedly proved unreliable when written directly to JSON).
   -------------------------------------------------------------------------- */
.adb-sa-page {
	overflow-x: hidden;
}
.adb-sa-boxed {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;
}
.adb-sa-hero {
	position: relative;
	min-height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center center;
	padding: 40px;
	box-sizing: border-box;
}
.adb-sa-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Bumped darker -- 0.6/0.45 wasn't enough contrast against this
	   particular hero photo's bright window/blinds area, where the
	   subtitle text sits. */
	background: linear-gradient(180deg, rgba(10, 16, 20, 0.72) 0%, rgba(10, 16, 20, 0.62) 100%);
}
.adb-sa-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 680px;
	text-align: center;
}
.adb-sa-hero-inner h1,
.adb-sa-hero-inner p,
.adb-sa-hero-inner .elementor-widget-text-editor,
.adb-sa-hero-inner .elementor-widget-heading {
	/* Belt-and-suspenders on top of the darker overlay above -- a subtle
	   shadow keeps white text readable even in the brightest spots of
	   whatever photo ends up behind it. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.adb-sa-hero-inner h1 {
	font-family: var(--font-body);
	color: #ffffff;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
}
.adb-sa-hero-inner p {
	font-family: var(--font-body);
	color: #f0f4f5;
	font-size: 17px;
	line-height: 1.6;
	margin: 14px 0 0;
}
.adb-sa-hero-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 24px;
}
.adb-sa-hero-buttons .adb-btn {
	min-height: 44px;
}

.adb-breadcrumbs {
	margin: 24px 0;
}
.adb-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 13px;
	color: #8a8f91;
}
.adb-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 6px;
	color: #c7cbcd;
}
.adb-breadcrumbs a {
	color: var(--adb-blue-slate);
	text-decoration: none;
}
.adb-breadcrumbs a:hover {
	text-decoration: underline;
}
.adb-breadcrumbs li[aria-current="page"] {
	color: var(--adb-ink);
	font-weight: 600;
}

.adb-sa-summary {
	background: var(--adb-teal-soft);
	border-radius: 12px;
	padding: 20px 24px;
	margin-bottom: 40px;
}
.adb-sa-summary p {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--adb-body);
	margin: 0;
}
.adb-sa-summary a {
	color: var(--adb-blue-slate);
	font-weight: 700;
}

.adb-sa-page h2 {
	font-family: var(--font-body);
	font-size: 34px;
	font-weight: 700;
	color: var(--adb-ink);
	margin: 0 0 20px;
}
.adb-sa-intro p,
.adb-sa-why-intro,
.adb-sa-communities p {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--adb-body);
	max-width: 800px;
}
.adb-sa-intro,
.adb-sa-why,
.adb-sa-communities,
.adb-sa-products,
.adb-sa-process-section,
.adb-sa-gallery-section,
.adb-sa-reviews-section,
.adb-sa-related-posts,
.adb-sa-faqs,
.adb-sa-nearby,
.adb-sa-cities,
.adb-sa-trust {
	margin-bottom: 48px;
}

.adb-sa-product-grid {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 20px;
}
.adb-sa-product-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(34, 34, 34, 0.1);
	border-radius: 12px;
	padding: 22px;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.adb-sa-product-card:hover {
	border-color: var(--adb-teal-bright);
	box-shadow: 0 6px 18px rgba(34, 34, 34, 0.08);
}
.adb-sa-product-card h3 {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	color: var(--adb-ink);
	margin: 0 0 8px;
}
.adb-sa-product-card p {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--adb-body);
	margin: 0 0 14px;
	flex: 1;
}
.adb-sa-product-link {
	font-family: var(--font-nav);
	font-size: 14px;
	font-weight: 700;
	color: var(--adb-blue-slate);
}

.adb-sa-promise-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 20px;
	margin-top: 24px;
}
.adb-sa-promise-card {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(34, 34, 34, 0.06);
	padding: 22px;
}
.adb-sa-promise-card h3 {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	color: var(--adb-ink);
	margin: 0 0 8px;
}
.adb-sa-promise-card p {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--adb-body);
	margin: 0;
}

.adb-sa-process {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}
.adb-sa-process-step {
	text-align: center;
	padding: 24px;
	background: var(--adb-cream);
	border-radius: 12px;
}
.adb-sa-process-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--adb-blue-slate);
	color: #ffffff;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 12px;
}
.adb-sa-process-step h3 {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	color: var(--adb-ink);
	margin: 0 0 8px;
}
.adb-sa-process-step p {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--adb-body);
	margin: 0;
}

.adb-sa-gallery {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 20px;
}
.adb-sa-gallery-item {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.adb-sa-gallery-item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.adb-sa-gallery-item figcaption {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--adb-body);
	padding: 8px 10px;
}

.adb-sa-reviews-note {
	font-family: var(--font-body);
	font-size: 14px;
	color: #8a8f91;
	margin: -8px 0 20px;
}
.adb-sa-reviews {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 20px;
}
.adb-sa-review-card {
	background: var(--adb-teal-soft);
	border-radius: 12px;
	padding: 22px;
	margin: 0;
}
.adb-sa-review-card p {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--adb-ink);
	font-style: italic;
	margin: 0 0 10px;
}
.adb-sa-review-card cite {
	font-family: var(--font-nav);
	font-size: 13px;
	font-weight: 700;
	color: var(--adb-blue-slate);
	font-style: normal;
}

.adb-sa-related-posts ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.adb-sa-related-posts li {
	margin-bottom: 8px;
}
.adb-sa-related-posts a {
	color: var(--adb-blue-slate);
	font-weight: 700;
	text-decoration: none;
}
.adb-sa-related-posts a:hover {
	text-decoration: underline;
}

.adb-sa-nearby-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.adb-sa-nearby-links a {
	display: inline-block;
	background: #ffffff;
	border: 1px solid rgba(34, 34, 34, 0.15);
	border-radius: 999px;
	padding: 8px 16px;
	font-family: var(--font-nav);
	font-size: 14px;
	font-weight: 600;
	color: var(--adb-ink);
	text-decoration: none;
}
.adb-sa-nearby-links a:hover {
	border-color: var(--adb-teal-bright);
}

.adb-sa-city-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}
.adb-sa-city-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(34, 34, 34, 0.1);
	border-radius: 12px;
	padding: 24px;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.adb-sa-city-card:hover {
	border-color: var(--adb-teal-bright);
	box-shadow: 0 6px 18px rgba(34, 34, 34, 0.08);
}
.adb-sa-city-card h3 {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	color: var(--adb-ink);
	margin: 0 0 4px;
}
.adb-sa-city-county {
	font-family: var(--font-nav);
	font-size: 13px;
	font-weight: 600;
	color: var(--adb-teal-dark);
	margin: 0 0 10px;
}
.adb-sa-city-card p {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--adb-body);
	margin: 0 0 14px;
	flex: 1;
}

.adb-sa-stat-bar {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 20px;
	background: var(--adb-teal-soft);
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 24px;
	text-align: center;
}
.adb-sa-stat-bar strong {
	display: block;
	font-family: var(--font-body);
	font-size: 24px;
	font-weight: 800;
	color: var(--adb-blue-slate);
}
.adb-sa-stat-bar span {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--adb-body);
}

.adb-sa-cta {
	background: var(--adb-blue-slate);
	padding: 48px 40px;
	text-align: center;
}
.adb-sa-cta h2 {
	font-family: var(--font-body);
	color: #ffffff;
	font-size: 30px;
	font-weight: 700;
	margin: 0;
}
.adb-sa-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 20px;
}
.adb-sa-cta-buttons .adb-btn {
	min-height: 44px;
}

@media (max-width: 1024px) and (min-width: 768px) {
	.adb-sa-product-grid,
	.adb-sa-city-grid,
	.adb-sa-gallery,
	.adb-sa-reviews {
		grid-template-columns: repeat( 2, 1fr );
	}
	.adb-sa-promise-grid,
	.adb-sa-process,
	.adb-sa-stat-bar {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (max-width: 767px) {
	.adb-sa-boxed {
		padding: 0 20px;
	}
	.adb-sa-hero {
		min-height: 280px;
		padding: 30px 20px;
	}
	.adb-sa-hero-inner h1 {
		font-size: 32px;
	}
	.adb-sa-page h2 {
		font-size: 26px;
	}
	.adb-sa-product-grid,
	.adb-sa-city-grid,
	.adb-sa-gallery,
	.adb-sa-reviews,
	.adb-sa-promise-grid,
	.adb-sa-process,
	.adb-sa-stat-bar {
		grid-template-columns: 1fr;
	}
	.adb-sa-cta {
		padding: 36px 20px;
	}
}

/* --------------------------------------------------------------------------
   Contact page (post 62): hero, info card + CF7 form, map, alt-booking.
   -------------------------------------------------------------------------- */
.adb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.elementor-element-255c962 .adb-btn {
	min-height: 48px;
}

/* -- Contact info card -- */
.adb-contact-card {
	background: var(--adb-teal-soft);
	border-radius: 16px;
	padding: 32px 28px;
	height: 100%;
	box-sizing: border-box;
}
.adb-contact-card-heading {
	font-family: var(--font-body);
	font-size: 22px;
	font-weight: 700;
	color: var(--adb-ink);
	margin: 0 0 20px;
}
.adb-contact-card-label {
	font-family: var(--font-nav);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--adb-blue-slate);
	margin: 18px 0 4px;
}
.adb-contact-card-label:first-of-type {
	margin-top: 0;
}
.adb-contact-address {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}
.adb-contact-address a {
	color: var(--adb-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--adb-teal-bright);
}
.adb-contact-address a:hover {
	color: var(--adb-blue-slate);
}
.adb-contact-phone {
	margin: 0;
	font-size: 18px;
}
.adb-contact-phone a {
	color: var(--adb-blue-slate);
	font-weight: 700;
	text-decoration: none;
}
.adb-contact-phone a:hover {
	text-decoration: underline;
}
.adb-contact-consult-note {
	margin: 20px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--adb-body);
}
.adb-contact-areas {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(41, 76, 96, 0.15);
}
.adb-contact-areas-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 12px;
}
.adb-contact-areas-list a {
	font-size: 14px;
	color: var(--adb-body);
	text-decoration: none;
}
.adb-contact-areas-list a:hover {
	color: var(--adb-blue-slate);
	text-decoration: underline;
}
.adb-contact-areas-all {
	display: inline-block;
	margin-top: 14px;
	font-family: var(--font-nav);
	font-size: 14px;
	font-weight: 600;
	color: var(--adb-blue-slate);
	text-decoration: underline;
}

/* -- CF7 form fields -- */
.adb-field {
	margin-bottom: 18px;
}
.adb-field label {
	display: block;
	font-family: var(--font-nav);
	font-size: 14px;
	font-weight: 600;
	color: var(--adb-ink);
	margin-bottom: 6px;
}
.adb-required {
	color: #c0392b;
}
.adb-input,
.adb-textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--adb-ink);
	background: var(--adb-white);
	border: 1px solid #c9d0d3;
	border-radius: 8px;
	padding: 12px 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.adb-textarea {
	resize: vertical;
}
.adb-input:focus,
.adb-textarea:focus {
	outline: none;
	border-color: var(--adb-teal-bright);
	box-shadow: 0 0 0 3px rgba(53, 206, 194, 0.3);
}
.adb-input.wpcf7-not-valid,
.adb-textarea.wpcf7-not-valid {
	border-color: #c0392b;
}
.wpcf7-not-valid-tip {
	display: block;
	color: #c0392b;
	font-size: 13px;
	margin-top: 6px;
}
.wpcf7 form.invalid .wpcf7-response-output {
	border-color: #c0392b;
	color: #c0392b;
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--adb-teal-bright);
	color: var(--adb-blue-slate);
}
.wpcf7-response-output {
	border-radius: 8px;
	font-size: 14px;
	padding: 12px 16px;
	margin: 18px 0 0;
}
.wpcf7 .adb-btn--primary {
	border: none;
	cursor: pointer;
	font-size: 16px;
}
.wpcf7-spinner {
	margin-left: 10px;
}

/* -- Map -- */
.adb-contact-map-wrap {
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	height: 420px;
}
.adb-contact-map-wrap iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.adb-contact-directions {
	display: inline-block;
	margin-top: 16px;
	font-family: var(--font-nav);
	font-size: 15px;
	font-weight: 600;
	color: var(--adb-blue-slate);
	text-decoration: underline;
}

/* -- Alt booking -- */
.adb-contact-altbooking {
	text-align: center;
}
.adb-contact-altbooking-text {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 600;
	color: var(--adb-ink);
	margin: 0 0 16px;
}

/* -- Responsive: stack the two-column grid, resize the map -- */
@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-element-d006deb {
		flex-wrap: wrap !important;
	}
	.elementor-element-bb3f49f,
	.elementor-element-fa9cef8 {
		width: 100% !important;
	}
}
@media (max-width: 767px) {
	.elementor-element-d006deb {
		flex-wrap: wrap !important;
	}
	.elementor-element-bb3f49f,
	.elementor-element-fa9cef8 {
		width: 100% !important;
	}
	.adb-contact-areas-list {
		grid-template-columns: 1fr;
	}
	.adb-contact-map-wrap {
		height: 320px;
	}
}

/* --------------------------------------------------------------------------
   Blog post comments -- Hello Elementor's comments.php ships with zero
   styling of its own (no theme CSS targets .comments-area at all), so this
   rendered as completely bare, unstyled default WordPress markup. Matches
   the same input/button language already established for the Contact
   page's form (.adb-input-style borders, turquoise submit button).
   -------------------------------------------------------------------------- */
.comments-area {
	max-width: 800px;
	margin: 0 auto;
	padding: 48px 40px;
	box-sizing: border-box;
}
.title-comments,
.comment-reply-title {
	font-family: var(--font-body);
	font-size: 26px;
	font-weight: 700;
	color: var(--adb-ink);
	margin: 0 0 20px;
}
.comment-list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}
.comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0 0 0 32px;
}
.comment-list > li {
	background: var(--adb-cream);
	border-radius: 12px;
	padding: 20px 24px;
	margin-bottom: 16px;
}
.comment-body {
	position: relative;
}
.comment-author.vcard {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.comment-author .avatar {
	border-radius: 50%;
	display: block;
}
.comment-author .fn {
	font-family: var(--font-nav);
	font-weight: 700;
	font-style: normal;
	color: var(--adb-ink);
	font-size: 15px;
}
.comment-metadata {
	font-family: var(--font-body);
	font-size: 13px;
	color: #8a8a8a;
	margin-bottom: 10px;
}
.comment-metadata a {
	color: inherit;
	text-decoration: none;
}
.comment-content p {
	font-family: var(--font-body);
	color: var(--adb-body);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 8px;
}
.comment-content p:last-child {
	margin-bottom: 0;
}
.comment .reply {
	margin-top: 10px;
}
.comment .reply a {
	font-family: var(--font-nav);
	font-size: 13px;
	font-weight: 600;
	color: var(--adb-blue-slate);
	text-decoration: none;
	border: 1px solid var(--adb-blue-slate);
	border-radius: 6px;
	padding: 4px 12px;
	display: inline-block;
}
.comment .reply a:hover {
	background: var(--adb-blue-slate);
	color: var(--adb-white);
}
.comment-awaiting-moderation {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	font-style: italic;
	color: #a06a00;
	margin-top: 6px;
}

/* Comment form. */
.comment-notes,
.comment-form-cookies-consent {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--adb-body);
}
.comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0;
}
.comment-form p {
	margin: 0 0 18px;
}
.comment-form label {
	display: block;
	font-family: var(--font-nav);
	font-size: 14px;
	font-weight: 600;
	color: var(--adb-ink);
	margin-bottom: 6px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--adb-ink);
	background: var(--adb-white);
	border: 1px solid #c9d0d3;
	border-radius: 8px;
	padding: 12px 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.comment-form textarea {
	resize: vertical;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--adb-teal-bright);
	box-shadow: 0 0 0 3px rgba(53, 206, 194, 0.3);
}
.comment-form .form-submit {
	margin-bottom: 0;
}
.comment-form #submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 28px;
	border-radius: 10px;
	background: var(--adb-teal-bright);
	color: var(--adb-ink);
	border: 0;
	font-family: var(--font-nav);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.comment-form #submit:hover {
	background: var(--adb-teal-dark);
	color: var(--adb-white);
}
@media (max-width: 767px) {
	.comments-area {
		padding: 32px 20px;
	}
	.comment-list .children {
		padding-left: 16px;
	}
}

/* --------------------------------------------------------------------------
   Individual blog post (Hello Elementor's bare template-parts/single.php)
   -- unstyled by the theme, same gap as comments. Matches the rest of the
   site: Montserrat headings/body, Poppins links/nav, the established
   color tokens, boxed 800px content width.
   -------------------------------------------------------------------------- */
.site-main.post {
	max-width: 800px;
	margin: 0 auto;
	padding: 48px 40px 0;
	box-sizing: border-box;
}
.site-main.post .entry-title {
	font-family: var(--font-body);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--adb-ink);
	margin: 0 0 24px;
}
.adb-blog-featured-image {
	width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 0 0 28px;
	display: block;
}
.page-content h2 {
	font-family: var(--font-body);
	font-size: 28px;
	font-weight: 700;
	color: var(--adb-ink);
	margin: 36px 0 16px;
}
.page-content h3 {
	font-family: var(--font-body);
	font-size: 22px;
	font-weight: 700;
	color: var(--adb-ink);
	margin: 28px 0 14px;
}
.page-content p {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--adb-body);
	margin: 0 0 18px;
}
.page-content a {
	color: var(--adb-blue-slate);
	text-decoration: underline;
	text-decoration-color: var(--adb-teal-bright);
	text-underline-offset: 2px;
}
.page-content a:hover {
	color: var(--adb-teal-dark);
}
.page-content ul,
.page-content ol {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--adb-body);
	margin: 0 0 18px;
	padding-left: 24px;
}
.page-content li {
	margin-bottom: 8px;
}
.page-content strong {
	color: var(--adb-ink);
}
.page-content blockquote {
	border-left: 4px solid var(--adb-teal-bright);
	background: var(--adb-teal-soft);
	padding: 16px 24px;
	margin: 0 0 24px;
	font-family: var(--font-body);
	font-style: italic;
	color: var(--adb-ink);
	border-radius: 0 8px 8px 0;
}
.page-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
	margin: 0 0 20px;
}
.page-content figure {
	margin: 0 0 24px;
}
.post-tags {
	margin: 24px 0 8px;
	font-family: var(--font-nav);
	font-size: 14px;
	color: var(--adb-body);
}
.post-tags .tag-links a {
	display: inline-block;
	background: var(--adb-teal-soft);
	color: var(--adb-blue-slate);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 6px;
	margin: 0 6px 6px 0;
}
@media (max-width: 767px) {
	.site-main.post {
		padding: 32px 20px 0;
	}
	.site-main.post .entry-title {
		font-size: 30px;
	}
	.page-content h2 {
		font-size: 24px;
	}
	.page-content h3 {
		font-size: 20px;
	}
	.page-content p,
	.page-content ul,
	.page-content ol {
		font-size: 16px;
	}
}