/* ==========================================================================
   BJM Door Solutions -- hand-authored stylesheet (no Elementor dependency)
   ========================================================================== */

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../media/fonts/bricolage-grotesque-variable.woff2') format('woff2');
}

:root {
	--navy-darkest: #101C5E;
	--navy-dark: #2D3979;
	--navy-mid: #474E6B;
	--blue-primary: #4361EE;
	--blue-secondary: #1F3BC0;
	--blue-tint: #EFF1FE;
	--blue-tint-2: #D5DBFB;
	--text-dark: #222222;
	--text-muted: #706F6F;
	--border-light: #D6D5D5;
	--white: #FFFFFF;
	--emergency-bg: #FBEAEA;
	--emergency-text: #532D2D;

	--font-heading: "Bricolage Grotesque", system-ui, sans-serif;
	--font-body: "Bricolage Grotesque", system-ui, sans-serif;

	--container-width: 1240px;
	--radius: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--text-dark);
	line-height: 1.6;
	background: var(--white);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.5em;
}
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--blue-primary);
	color: #fff;
	padding: 10px 16px;
	z-index: 1000;
}
.skip-link:focus { left: 0; }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 2px;
	font-weight: 600;
	font-size: 15px;
	border: 1px solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
	white-space: nowrap;
}
.btn-primary { background: var(--blue-primary); color: #fff; }
.btn-primary:hover { background: var(--blue-secondary); }
.btn-dark { background: #000; color: #fff; }
.btn-dark:hover { background: #222; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); }
.btn-outline-dark { background: transparent; color: var(--text-dark); border-color: var(--border-light); }
.btn-outline-dark:hover { background: var(--text-dark); color: #fff; }
.btn-block { width: 100%; justify-content: center; }

/* ==========================================================================
   Header top bar (scrolls away; main bar below sticks)
   ========================================================================== */
.header-topbar {
	background: linear-gradient(90deg, var(--navy-darkest) 0%, #182865 100%);
	color: rgba(255,255,255,.75);
	font-size: 13px;
	font-weight: 500;
}
.header-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 8px;
	padding-bottom: 8px;
}
.topbar-contact,
.topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar-contact a,
.topbar-hours {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: rgba(255,255,255,.75);
}
.topbar-contact a:hover { color: #fff; }
.topbar-contact svg,
.topbar-hours svg { color: #9fb0ff; flex-shrink: 0; }
.topbar-social { display: flex; align-items: center; gap: 6px; }
.topbar-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	color: rgba(255,255,255,.75);
	background: rgba(255,255,255,.08);
	transition: background-color .15s ease, color .15s ease;
}
.topbar-social a:hover { background: rgba(255,255,255,.18); color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255,255,255,.88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 1px 0 rgba(16,28,94,.08), 0 8px 24px rgba(16,28,94,.05);
}
.header-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-top: 12px;
	padding-bottom: 12px;
}
.logo img { width: 100px; height: auto; }

.main-nav { flex: 1; }
.main-nav > ul { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: nowrap; }
.main-nav > ul > li > a,
.main-nav .dropdown-toggle { white-space: nowrap; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a,
.main-nav .dropdown-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 9px 14px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text-dark);
	transition: background-color .15s ease, color .15s ease;
}
.main-nav > ul > li > a:hover,
.main-nav .dropdown-toggle:hover,
.has-dropdown:focus-within .dropdown-toggle {
	background: var(--blue-tint);
	color: var(--blue-primary);
}
.main-nav > ul > li > a[aria-current="page"] {
	background: var(--blue-tint);
	color: var(--blue-primary);
}

/* Emergency Callouts — red accent to stand out */
.main-nav > ul > li > a.nav-emergency {
	background: #FDECEA;
	color: #C9302C;
}
.main-nav > ul > li > a.nav-emergency:hover {
	background: #D9534F;
	color: #fff;
}
.main-nav > ul > li > a.nav-emergency[aria-current="page"] {
	background: #D9534F;
	color: #fff;
}
.main-nav .dropdown-toggle svg { transition: transform .2s ease; }
.has-dropdown:hover .dropdown-toggle svg,
.has-dropdown:focus-within .dropdown-toggle svg { transform: rotate(180deg); }

.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 256px;
	background: #fff;
	border: 1px solid var(--blue-tint);
	border-radius: 14px;
	box-shadow: 0 20px 40px rgba(16,28,94,.14);
	padding: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.dropdown-menu li a {
	display: block;
	padding: 10px 14px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-dark);
	transition: background-color .12s ease, color .12s ease;
}
.dropdown-menu li a:hover { background: var(--blue-tint); color: var(--blue-primary); }
.dropdown-menu li a[aria-current="page"] {
	background: var(--blue-tint);
	color: var(--blue-primary);
	font-weight: 700;
}

/* Services mega-menu: two labelled columns in one panel.
   Anchored to the nav's right edge (the li goes static) so the wide
   panel can't overflow the right-aligned nav's container. */
.main-nav { position: relative; }
.main-nav > ul > li:has(> .megamenu) { position: static; }
.megamenu {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 32px;
	width: 620px;
	padding: 22px 24px;
	left: auto;
	right: 0;
}
.megamenu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
}
.megamenu-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 8px;
	padding: 0 14px;
}
.megamenu-col > ul { list-style: none; margin: 0; padding: 0; }
.megamenu-col:nth-child(3) { margin-top: 16px; }

.header-actions { display: flex; align-items: center; margin-left: auto; }

.mobile-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	background: var(--blue-tint);
	border: 1px solid var(--blue-tint-2);
	border-radius: 12px;
	padding: 0;
	transition: background-color .15s ease, border-color .15s ease;
}
.mobile-menu-toggle:hover { background: var(--blue-tint-2); border-color: var(--blue-primary); }
.mobile-menu-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--blue-primary);
}

/* Mobile off-canvas menu */
.mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(320px, 85vw);
	background: var(--navy-darkest);
	color: #fff;
	z-index: 200;
	transform: translateX(-100%);
	transition: transform .25s ease;
	overflow-y: auto;
	padding: 24px;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.mobile-menu-header img { width: 130px; }
.mobile-menu-close { background: none; border: none; color: #fff; font-size: 28px; line-height: 1; }
.mobile-menu > ul > li { border-bottom: 1px solid rgba(255,255,255,.15); }
.mobile-menu > ul > li > a,
.mobile-menu .dropdown-toggle {
	display: flex;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	padding: 14px 4px;
	text-align: left;
}
.mobile-menu .dropdown-toggle { align-items: center; }
.mobile-menu .dropdown-toggle::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid #9fb0ff;
	border-bottom: 2px solid #9fb0ff;
	transform: rotate(45deg);
	transition: transform .2s ease;
	flex-shrink: 0;
	margin-right: 4px;
}
.mobile-menu .mobile-has-dropdown.is-open .dropdown-toggle::after { transform: rotate(225deg); }

/* Neutralise the desktop dropdown styling inside the off-canvas menu */
.mobile-menu .dropdown-menu {
	display: none;
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	min-width: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0 0 10px 14px;
	transition: none;
}
.mobile-menu .mobile-has-dropdown.is-open .dropdown-menu { display: block; }
.mobile-menu .dropdown-menu li a {
	display: block;
	padding: 9px 4px;
	border-radius: 0;
	font-size: 14px;
	color: rgba(255,255,255,.8);
}
.mobile-menu .dropdown-menu li a:hover,
.mobile-menu .dropdown-menu li a[aria-current="page"] {
	background: transparent;
	color: #9fb0ff;
}

.mobile-menu > ul > li > a.nav-emergency { color: #FF9B96; }

.mobile-menu .mobile-group-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #9fb0ff;
	padding: 10px 4px 2px;
}

.mobile-menu-footer { margin-top: 24px; }
.mobile-menu-footer .btn { border-radius: 999px; margin-bottom: 16px; }
.mobile-menu-footer .footer-social { display: flex; justify-content: center; gap: 12px; }

.mobile-menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 199;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s;
}
.mobile-menu-overlay.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	position: relative;
	color: #fff;
	padding: 88px 0 120px;
	overflow: hidden;
}
.hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 80% at 85% 20%, rgba(67,97,238,.35) 0%, transparent 60%),
		linear-gradient(100deg, rgba(11,20,64,.95) 0%, rgba(16,28,94,.85) 45%, rgba(16,28,94,.55) 100%);
}
.hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: center;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 18px;
	border-radius: 999px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.18);
	backdrop-filter: blur(4px);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255,255,255,.9);
	margin-bottom: 22px;
}
.hero-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 0 rgba(74,222,128,.6);
	animation: hero-pulse 2s infinite;
}
@keyframes hero-pulse {
	0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); }
	70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
	100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

.hero-copy h1 {
	font-size: clamp(36px, 4.5vw, 56px);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: .35em;
}
.hero-accent {
	background: linear-gradient(90deg, #9fb0ff 0%, #6d87f5 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hero-lede { font-size: 18px; max-width: 46ch; color: rgba(255,255,255,.85); line-height: 1.7; }
.hero-lede a { color: #9fb0ff; text-decoration: underline; }
.hero-lede a:hover { color: #fff; }
.hero-ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-ctas .btn { border-radius: 999px; padding: 14px 30px; font-size: 15.5px; }
.hero-ctas .btn svg { flex-shrink: 0; }
.hero-ctas .btn-primary { box-shadow: 0 10px 26px rgba(67,97,238,.45); }
.hero-ctas .btn-outline-light { backdrop-filter: blur(4px); background: rgba(255,255,255,.06); }

.hero-trust {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.15);
}
.hero-trust li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255,255,255,.8);
}
.hero-trust svg { color: #4ade80; flex-shrink: 0; }

.hero-form-card {
	position: relative;
	background: #fff;
	color: var(--text-dark);
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 30px 60px rgba(4,10,40,.4);
	border-top: 4px solid var(--blue-primary);
	scroll-margin-top: 100px;
}

.price-badge {
	position: absolute;
	top: -28px;
	right: -28px;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	background: linear-gradient(155deg, var(--navy-dark) 0%, var(--navy-darkest) 100%);
	border: 3px solid #D4AF37;
	box-shadow: 0 0 0 4px #fff, 0 12px 26px rgba(4,10,40,.45);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	transform: rotate(-9deg);
	z-index: 5;
	font-family: var(--font-heading);
	color: #fff;
}
.price-badge-eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	color: #D4AF37;
	line-height: 1.2;
}
.price-badge-amount { font-size: 29px; font-weight: 800; line-height: 1.05; margin: 3px 0 2px; }
.price-badge-label {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .2px;
	line-height: 1.2;
	max-width: 88px;
}
.hero-form-card.urgent { border-top-color: #D9534F; }
.hero-form-card h2 { font-size: 23px; margin-bottom: 4px; }
.hero-form-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 18px; }
.quote-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quote-form input,
.quote-form textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--border-light);
	border-radius: 10px;
	background: #FAFBFF;
	font-family: inherit;
	font-size: 14px;
	margin-bottom: 12px;
	resize: vertical;
	transition: border-color .15s ease, background-color .15s ease;
}
.quote-form input:hover,
.quote-form textarea:hover { border-color: var(--blue-tint-2); }
.quote-form input:focus,
.quote-form textarea:focus {
	outline: none;
	border-color: var(--blue-primary);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(67,97,238,.15);
}
.quote-form .btn-block { border-radius: 999px; padding: 14px 24px; }

/* Honeypot: visually removed but present for bots */
.hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.hero-contact-list {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--border-light);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hero-contact-list li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 500;
}
.hero-contact-list svg { color: var(--blue-primary); flex-shrink: 0; }
.hero-contact-list a:hover { color: var(--blue-primary); }

/* Compact hero for utility pages (contact etc.) */
.hero-compact { padding: 72px 0 80px; text-align: center; }
.hero-compact .container { position: relative; }
.hero-compact .hero-copy { max-width: 640px; margin: 0 auto; }
.hero-compact .hero-lede { margin: 0 auto; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-section { padding: 88px 0 140px; }
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 56px;
	align-items: start;
}
.contact-info h2 { font-size: clamp(26px, 3vw, 32px); }
.contact-intro { color: var(--text-muted); margin-bottom: 28px; }
.contact-cards { display: flex; flex-direction: column; gap: 14px; }
.contact-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #FAFBFF;
	border: 1px solid var(--blue-tint);
	border-radius: 14px;
	padding: 16px 18px;
	transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
a.contact-card:hover { border-color: var(--blue-tint-2); background: var(--blue-tint); transform: translateY(-2px); }
.contact-card .why-icon { margin-bottom: 0; flex-shrink: 0; }
.contact-card strong {
	display: block;
	font-family: var(--font-heading);
	font-size: 15px;
	color: var(--text-dark);
}
.contact-card span { font-size: 14.5px; color: var(--text-muted); }
.contact-card span a { color: var(--blue-primary); font-weight: 600; }
.contact-card span a:hover { text-decoration: underline; }

.contact-form-card { border-top-color: var(--blue-primary); }
.quote-form select {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--border-light);
	border-radius: 10px;
	background: #FAFBFF;
	font-family: inherit;
	font-size: 14px;
	margin-bottom: 12px;
	color: var(--text-dark);
	appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6" width="10" height="6"><path d="M1 1l4 4 4-4" stroke="%234361EE" stroke-width="1.5" fill="none"/></svg>');
	background-repeat: no-repeat;
	background-position: right 16px center;
	transition: border-color .15s ease, background-color .15s ease;
}
.quote-form select:hover { border-color: var(--blue-tint-2); }
.quote-form select:focus {
	outline: none;
	border-color: var(--blue-primary);
	box-shadow: 0 0 0 3px rgba(67,97,238,.15);
}
.quote-form select:invalid { color: var(--text-muted); }

/* ==========================================================================
   Shared section elements
   ========================================================================== */
.section-eyebrow {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blue-primary);
	background: var(--blue-tint);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}
.section-eyebrow.on-dark {
	color: #9fb0ff;
	background: rgba(159,176,255,.12);
}
.section-heading { font-size: clamp(24px, 3vw, 32px); margin-bottom: 32px; }

/* ==========================================================================
   Reviews / certifications
   ========================================================================== */
.reviews-section { padding: 72px 0 48px; text-align: center; }
.section-heading-sm { font-size: clamp(22px, 2.5vw, 28px); margin-bottom: 28px; }

.certifications { padding: 32px 0 72px; text-align: center; }
.certifications-label {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--text-dark);
	font-size: 18px;
	margin-bottom: 26px;
}
.cert-logos { display: flex; align-items: stretch; justify-content: center; gap: 20px; flex-wrap: wrap; }
.cert-card {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px 34px;
	background: #fff;
	border: 1px solid var(--blue-tint-2);
	border-radius: 16px;
	box-shadow: 0 6px 18px rgba(16,28,94,.06);
	transition: transform .15s ease, box-shadow .15s ease;
}
.cert-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(16,28,94,.12); }
.cert-card img { max-height: 56px; width: auto; }

/* ==========================================================================
   Coverage section (what we repair)
   ========================================================================== */
.coverage-section { padding: 72px 0 88px; text-align: center; }
.coverage-intro { max-width: 620px; margin: 0 auto 32px; color: var(--text-muted); font-size: 16px; }
.coverage-section .why-grid { margin-bottom: 36px; }

/* ==========================================================================
   Gallery grid
   ========================================================================== */
.gallery-section { padding: 88px 0; text-align: center; }
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 8px;
	text-align: left;
}
.gallery-item {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(16,28,94,.08);
	transition: transform .15s ease, box-shadow .15s ease;
}
.gallery-item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16,28,94,.16); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item figcaption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 30px 16px 12px;
	background: linear-gradient(to top, rgba(16,28,94,.85), rgba(16,28,94,0));
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Dark two-column sections
   ========================================================================== */
.dark-section {
	background: linear-gradient(160deg, var(--navy-darkest) 0%, #0B1440 100%);
	color: #fff;
	padding: 88px 0;
}
.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.two-col.reverse .col-image { order: 2; }
.two-col.reverse .col-text { order: 1; }
@media (min-width: 768px) {
	.two-col.reverse { grid-template-columns: 1fr 1fr; }
}
.dark-section h2 { font-size: clamp(26px, 3vw, 34px); }
.dark-section p { color: rgba(255,255,255,.85); }
.dark-section a:not(.btn) { color: #9fb0ff; text-decoration: underline; }
.col-image img {
	border-radius: 20px;
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	box-shadow: 0 24px 48px rgba(4,10,40,.35);
}
.dark-section .col-image img { border: 1px solid rgba(255,255,255,.12); }

.en16005-badge {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-top: 30px;
	background: linear-gradient(120deg, rgba(67,97,238,.18) 0%, rgba(255,255,255,.05) 100%);
	border: 1px solid rgba(159,176,255,.3);
	border-radius: 16px;
	padding: 24px;
}
.en16005-badge-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--blue-primary);
	color: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 18px rgba(67,97,238,.4);
}
.en16005-badge h3 { font-size: 18px; margin-bottom: 14px; }
.en16005-badge .btn { border-radius: 999px; padding: 10px 24px; font-size: 14px; }

.en16005-panel {
	max-width: 860px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 16px;
	padding: 36px;
	margin-top: 40px;
}

.dark-section > .container:only-child > .dark-quote { margin-top: 0; }
.dark-quote {
	margin: 56px auto 0;
	max-width: 920px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12);
	border-left: 4px solid var(--blue-primary);
	border-radius: 16px;
	padding: 32px 36px;
}
.dark-quote p {
	font-size: 16.5px;
	line-height: 1.8;
	color: rgba(255,255,255,.88);
	font-style: italic;
	margin-bottom: 20px;
}
.en16005-panel h3 { font-size: 19px; margin-top: 1.2em; }
.en16005-panel h3:first-child { margin-top: 0; }
.en16005-panel p { color: rgba(255,255,255,.85); }
.en16005-panel a { color: #9fb0ff; }

/* ==========================================================================
   Light two-column (specialist / tailored) sections
   ========================================================================== */
.specialist-section { padding: 88px 0; }
.specialist-section h3 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 18px; }
.specialist-section .col-image img {
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: 0 20px 44px rgba(16,28,94,.16);
}
.specialist-section .btn-primary { border-radius: 999px; padding: 13px 28px; }

.feature-list { margin-bottom: 28px; }
.feature-list li {
	margin-bottom: 12px;
	padding: 14px 16px 14px 46px;
	position: relative;
	color: var(--text-dark);
	background: #FAFBFF;
	border: 1px solid var(--blue-tint);
	border-radius: 12px;
	transition: border-color .15s ease, background-color .15s ease;
}
.feature-list li:hover { border-color: var(--blue-tint-2); background: var(--blue-tint); }
.feature-list li::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 19px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--blue-primary) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/11px no-repeat;
}
.feature-list li strong { color: var(--navy-dark); }

.feature-list.on-dark li {
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.14);
	color: rgba(255,255,255,.85);
}
.feature-list.on-dark li:hover {
	background: rgba(255,255,255,.1);
	border-color: rgba(159,176,255,.4);
}
.feature-list.on-dark li strong { color: #fff; }

/* ==========================================================================
   Why-choose card grid
   ========================================================================== */
.why-choose-section { padding: 88px 0; background: #FAFBFF; text-align: center; }
.why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 18px;
	text-align: left;
}
.why-card {
	background: #fff;
	border: 1px solid var(--blue-tint);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 6px 16px rgba(16,28,94,.05);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.why-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(16,28,94,.1);
	border-color: var(--blue-tint-2);
}
.why-icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--blue-tint);
	color: var(--blue-primary);
	border-radius: 12px;
	margin-bottom: 16px;
}
.why-card p { margin: 0; font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }
.why-card strong {
	display: block;
	font-family: var(--font-heading);
	font-size: 16px;
	color: var(--text-dark);
	margin-bottom: 4px;
}
.why-footnote { margin: 28px 0 18px; color: var(--text-muted); font-weight: 600; }
.services-intro { max-width: 68ch; margin: 0 auto 32px; color: var(--text-muted); }

/* ==========================================================================
   Stat strip (quick trust numbers band, e.g. below hero)
   ========================================================================== */
.stat-strip { background: var(--blue-tint); padding: 36px 0; }
.stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-align: center;
}
.stat-item strong {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(22px, 3vw, 30px);
	color: var(--navy-dark);
	line-height: 1.2;
}
.stat-item span { font-size: 13.5px; color: var(--text-muted); }
@media (max-width: 700px) { .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

/* ==========================================================================
   Local-context section (single-column prose + pull-quote)
   ========================================================================== */
.local-context-section { padding: 88px 0; }
.local-context-section .container { max-width: 760px; margin: 0 auto; text-align: left; }
.local-context-section .section-eyebrow { text-align: left; }
.local-context-section .container.two-col-reviews {
	max-width: 1180px;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 40px;
	align-items: center;
}
.local-context-section .reviews-card { text-align: left; }
@media (max-width: 900px) {
	.local-context-section .container.two-col-reviews { grid-template-columns: 1fr; }
}
.pull-quote {
	border-left: 4px solid var(--blue-primary);
	background: var(--blue-tint);
	padding: 22px 28px;
	border-radius: 0 16px 16px 0;
	margin: 32px 0;
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 600;
	color: var(--navy-dark);
	line-height: 1.6;
}

/* ==========================================================================
   Process steps (numbered how-it-works timeline)
   ========================================================================== */
.process-section { padding: 88px 0; background: #FAFBFF; text-align: center; }
.process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin-top: 40px;
	text-align: left;
}
.process-step {
	background: #fff;
	border: 1px solid var(--blue-tint-2);
	border-radius: 20px;
	padding: 28px 22px;
}
.process-step-number {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--blue-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 16px;
}
.process-step h3 { font-size: 16.5px; margin-bottom: 8px; color: var(--navy-dark); }
.process-step p { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Fault grid (common-fault cards)
   ========================================================================== */
.fault-section { padding: 88px 0; text-align: center; }
.fault-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
	text-align: left;
}
.fault-card {
	background: var(--blue-tint);
	border: 1px solid transparent;
	border-radius: 20px;
	padding: 26px 24px;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.fault-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(16,28,94,.12);
	background: #fff;
	border-color: var(--blue-tint-2);
}
.fault-icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--blue-primary);
	border-radius: 12px;
	margin-bottom: 14px;
}
.fault-card h3 { font-size: 16.5px; margin-bottom: 8px; color: var(--navy-dark); }
.fault-card p { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 900px) { .fault-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fault-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Photo banner (full-width decorative image break)
   ========================================================================== */
.photo-banner { padding: 72px 0 88px; }
.photo-banner img {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: 0 20px 44px rgba(16,28,94,.16);
}

/* Centered variant of specialist-section, for text-only (no image column) sections */
.specialist-section.text-center { text-align: center; }
.specialist-section.text-center .services-intro { margin-left: auto; margin-right: auto; }
.feature-list-centered {
	max-width: 780px;
	margin: 0 auto 32px;
	text-align: left;
}

/* ==========================================================================
   Areas Covered directory (areas-covered.html)
   ========================================================================== */
.areas-directory-section { padding: 0 0 140px; }

.areas-search-card {
	max-width: 640px;
	margin: 56px auto 48px;
	background: linear-gradient(120deg, var(--blue-primary) 0%, var(--blue-secondary) 100%);
	border-radius: 16px;
	padding: 44px 40px;
	box-shadow: 0 20px 44px rgba(16,28,94,.2);
	text-align: center;
}
.areas-search-card h2 { color: #fff; font-size: 20px; margin-bottom: 6px; }
.areas-search-card p { color: rgba(255,255,255,.85); font-size: 14.5px; margin-bottom: 20px; }
.areas-search-form { display: flex; gap: 10px; }
.areas-search-form input {
	flex: 1;
	padding: 13px 16px;
	border: none;
	border-radius: 10px;
	font-family: inherit;
	font-size: 14px;
}
.areas-search-form input:focus { outline: 3px solid rgba(255,255,255,.4); }
.areas-search-form button {
	background: #101C5E;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 13px 22px;
	font-family: inherit;
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease;
}
.areas-search-form button:hover { background: #0B1440; }
.areas-search-result {
	margin-top: 14px;
	min-height: 22px;
	font-size: 14.5px;
	font-weight: 600;
}
.areas-search-result.success { color: #baffc9; }
.areas-search-result.warning { color: #ffe1a8; }
.areas-search-result a { color: #fff; text-decoration: underline; }

.areas-filter-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 48px;
}
.filter-btn {
	background: #fff;
	border: 1px solid var(--blue-tint-2);
	border-radius: 999px;
	padding: 8px 18px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--navy-dark);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.filter-btn:hover { background: var(--blue-tint); border-color: var(--blue-primary); }
.filter-btn.active { background: var(--blue-primary); border-color: var(--blue-primary); color: #fff; }

#areas-directory {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	align-items: start;
}
@media (max-width: 900px) { #areas-directory { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { #areas-directory { grid-template-columns: 1fr; } }

.area-group {
	background: #fff;
	border: 1px solid var(--blue-tint-2);
	border-top: 3px solid var(--blue-primary);
	border-radius: 10px;
	padding: 24px 22px;
	text-align: left;
}
.area-group-title {
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: 700;
	color: var(--blue-primary);
	padding-bottom: 12px;
	margin: 0 0 14px;
	border-bottom: 1px solid var(--blue-tint-2);
}
.areas-list-grouped {
	display: flex;
	flex-direction: column;
}
.areas-list-grouped .area-item {
	padding: 10px 0;
	border-bottom: 1px dashed var(--blue-tint-2);
	font-size: 15px;
	font-weight: 600;
	color: var(--navy-dark);
}
.areas-list-grouped .area-item:last-child { border-bottom: none; }
.areas-list-grouped .area-item a { color: inherit; text-decoration: none; }
.areas-list-grouped .area-item a:hover { color: var(--blue-primary); text-decoration: underline; }
.areas-no-results {
	display: none;
	text-align: center;
	color: var(--text-muted);
	padding: 24px 0;
}
.areas-no-results.is-visible { display: block; }

/* ==========================================================================
   Form status pages (success.html / fail.html)
   ========================================================================== */
.status-section {
	padding: 140px 0 180px;
	background: linear-gradient(160deg, var(--navy-darkest) 0%, #0B1440 100%);
	min-height: 72vh;
	display: flex;
	align-items: center;
}
.status-card {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}
.status-icon {
	width: 88px;
	height: 88px;
	margin: 0 auto 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.status-icon--success { background: rgba(74,222,128,.15); color: #4ade80; border: 1px solid rgba(74,222,128,.35); }
.status-icon--error { background: rgba(217,83,79,.15); color: #ff8f8c; border: 1px solid rgba(217,83,79,.4); }
.status-eyebrow--error { color: #ff8f8c; background: rgba(217,83,79,.15); }
.status-card h1 {
	font-size: clamp(28px, 4vw, 40px);
	margin-bottom: 20px;
}
.hero-accent-dark {
	background: linear-gradient(90deg, #9fb0ff 0%, #6d87f5 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.status-lede {
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255,255,255,.85);
	margin-bottom: 40px;
}
.status-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 32px;
}
.status-actions .btn { border-radius: 999px; padding: 15px 32px; }
.status-actions .btn-outline-dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); color: #fff; }
.status-actions .btn-outline-dark:hover { background: rgba(255,255,255,.14); }
.status-footnote { font-size: 14px; color: rgba(255,255,255,.6); }
.status-footnote a { color: #9fb0ff; font-weight: 600; }

/* ==========================================================================
   Legal pages (privacy policy etc.)
   ========================================================================== */
.legal-section { padding: 72px 0 140px; }
.legal-prose { max-width: 760px; }
.legal-updated {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text-muted);
	background: var(--blue-tint);
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 8px;
}
.legal-prose h2 {
	font-size: 22px;
	margin: 40px 0 12px;
	color: var(--navy-dark);
}
.legal-prose p { margin-bottom: 14px; color: var(--text-muted); line-height: 1.75; }
.legal-prose p strong { color: var(--text-dark); }
.legal-prose ul { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
.legal-prose li { margin-bottom: 8px; color: var(--text-muted); line-height: 1.7; }
.legal-prose a { color: var(--blue-primary); font-weight: 600; }
.legal-prose a:hover { text-decoration: underline; }

/* ==========================================================================
   Guides / blog-post articles
   ========================================================================== */
.article-meta-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: rgba(255,255,255,.7);
	margin-top: 18px;
}
.article-meta-row .dot { opacity: .5; }

.article-section { padding: 72px 0 110px; }
.article-prose { max-width: 780px; margin: 0 auto; }
.article-prose h2 { font-size: clamp(22px, 2.6vw, 26px); margin: 48px 0 16px; color: var(--navy-dark); }
.article-prose h2:first-child { margin-top: 0; }
.article-prose h3 { font-size: 18.5px; margin: 30px 0 10px; color: var(--navy-dark); }
.article-prose p { margin-bottom: 16px; color: var(--text-muted); line-height: 1.8; font-size: 16px; }
.article-prose p strong { color: var(--text-dark); }
.article-prose ul, .article-prose ol { margin: 0 0 16px; padding-left: 22px; }
.article-prose ul { list-style: disc; }
.article-prose ol { list-style: decimal; }
.article-prose li { margin-bottom: 10px; color: var(--text-muted); line-height: 1.75; font-size: 16px; }
.article-prose li strong { color: var(--text-dark); }
.article-prose a { color: var(--blue-primary); font-weight: 600; }
.article-prose a:hover { text-decoration: underline; }
.article-prose img {
	width: 100%;
	border-radius: 16px;
	margin: 8px 0 32px;
	box-shadow: 0 14px 30px rgba(16,28,94,.14);
}
.article-lede { font-size: 18.5px !important; color: var(--text-dark) !important; line-height: 1.7 !important; }

.article-callout {
	background: var(--blue-tint);
	border-left: 4px solid var(--blue-primary);
	border-radius: 12px;
	padding: 20px 24px;
	margin: 12px 0 32px;
}
.article-callout p:last-child { margin-bottom: 0; }
.article-callout strong { color: var(--navy-dark); }

.article-table-wrap { overflow-x: auto; margin: 12px 0 32px; border: 1px solid var(--blue-tint); border-radius: 14px; }
.article-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.article-table th {
	background: var(--blue-tint);
	color: var(--navy-dark);
	text-align: left;
	padding: 13px 18px;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .5px;
	white-space: nowrap;
}
.article-table td { padding: 14px 18px; border-top: 1px solid var(--blue-tint); color: var(--text-muted); }
.article-table tr:first-child td { border-top: none; }
.article-table td strong { color: var(--text-dark); }

.article-video-wrap {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	margin: 8px 0 12px;
	box-shadow: 0 14px 30px rgba(16,28,94,.14);
	background: var(--navy-darkest);
}
.article-video-wrap iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.article-video-caption { font-size: 13.5px; color: var(--text-muted); margin: 0 0 32px; }

/* Article layout with sidebar */
.article-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 56px;
	align-items: start;
	max-width: 1080px;
	margin: 0 auto;
}
.article-layout .article-prose { max-width: none; margin: 0; }

.article-sidebar {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.sidebar-card {
	background: #FAFBFF;
	border: 1px solid var(--blue-tint);
	border-radius: 18px;
	padding: 26px;
}
.sidebar-card h3 {
	font-size: 13.5px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--navy-dark);
	margin-bottom: 16px;
}
.sidebar-reviews .elfsight-app-724f138a-28f4-4ca5-8067-f46a25e57ebb { display: block; }

.sidebar-cta {
	background: linear-gradient(155deg, var(--navy-dark) 0%, var(--navy-darkest) 100%);
	border: none;
	color: #fff;
	text-align: center;
}
.sidebar-cta h3 { color: #fff; }
.sidebar-cta p { color: rgba(255,255,255,.75); font-size: 14px; margin-bottom: 18px; }
.sidebar-cta .btn { width: 100%; justify-content: center; }
.sidebar-cta .btn-outline-light { margin-top: 10px; }
.sidebar-phone {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

.article-inline-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	background: linear-gradient(155deg, var(--navy-dark) 0%, var(--navy-darkest) 100%);
	border-radius: 16px;
	padding: 28px 32px;
	margin: 12px 0 32px;
	color: #fff;
}
.article-inline-cta-copy h3 { color: #fff; margin: 0 0 4px; font-size: 19px; }
.article-inline-cta-copy p { color: rgba(255,255,255,.75); margin: 0; font-size: 14.5px; }
.article-inline-cta .btn { flex-shrink: 0; }
.article-prose .article-inline-cta a.btn { color: #fff; text-decoration: none; }
.article-prose .article-inline-cta a.btn:hover { text-decoration: none; }

@media (max-width: 1000px) {
	.article-layout { grid-template-columns: 1fr; }
	.article-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
	.sidebar-card { flex: 1; min-width: 260px; }
}
@media (max-width: 600px) {
	.article-sidebar { flex-direction: column; }
	.article-inline-cta { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ==========================================================================
   Guides hub
   ========================================================================== */
.guides-section { padding: 88px 0 140px; }
.guides-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.guide-card {
	display: block;
	background: #fff;
	border: 1px solid var(--blue-tint);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(16,28,94,.06);
	transition: transform .15s ease, box-shadow .15s ease;
}
.guide-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(16,28,94,.14); }
.guide-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.guide-card-body { padding: 26px 28px 30px; }
.guide-card-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--blue-primary);
	background: var(--blue-tint);
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 14px;
}
.guide-card h3 { font-size: 19.5px; margin-bottom: 10px; color: var(--text-dark); }
.guide-card p { color: var(--text-muted); font-size: 14.5px; line-height: 1.65; margin-bottom: 18px; }
.guide-card-link { color: var(--blue-primary); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.guide-card-link svg { transition: transform .15s ease; }
.guide-card:hover .guide-card-link svg { transform: translateX(3px); }

/* ==========================================================================
   CTA panel section
   ========================================================================== */
.cta-section { padding: 88px 0; text-align: center; }
.cta-intro { max-width: 62ch; margin: 0 auto 28px; color: var(--text-muted); }
.cta-section .section-heading { margin-bottom: 16px; }

/* ==========================================================================
   FAQ sections
   ========================================================================== */
.faq-section { padding: 88px 0 140px; text-align: center; }
.faq-section .section-heading { margin-bottom: 36px; }
.faq-section .faq-grid { text-align: left; }
.faq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.faq-item {
	background: #FAFBFF;
	border: 1px solid var(--blue-tint);
	border-radius: 16px;
	padding: 26px;
}
.faq-item h3 { font-size: 17px; margin-bottom: 10px; color: var(--navy-dark); }
.faq-item p { margin: 0; font-size: 14.5px; color: var(--text-muted); line-height: 1.7; }
.faq-item a { color: var(--blue-primary); font-weight: 600; }

/* ==========================================================================
   Areas covered
   ========================================================================== */
.areas-section {
	padding: 72px 0 140px;
	background: #FAFBFF;
	text-align: center;
}
.areas-intro { color: var(--text-muted); margin-bottom: 26px; }
.area-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	max-width: 820px;
	margin: 0 auto 28px;
}
.area-chips li {
	background: #fff;
	border: 1px solid var(--blue-tint-2);
	border-radius: 999px;
	padding: 9px 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--navy-dark);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.area-chips li:hover { background: var(--blue-tint); border-color: var(--blue-primary); color: var(--blue-primary); }
.area-chips li a { color: inherit; text-decoration: none; }
.area-chips li a:hover { text-decoration: underline; }
.areas-cta { color: var(--text-muted); margin: 0; }
.areas-cta a { color: var(--blue-primary); font-weight: 700; }
.areas-cta a:hover { text-decoration: underline; }
.areas-tagline {
	margin: 26px auto 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 17px;
	color: var(--navy-dark);
	font-style: italic;
}

/* ==========================================================================
   Emergency card
   ========================================================================== */
.emergency-section { padding: 32px 0 88px; }
.emergency-card {
	position: relative;
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
	background: linear-gradient(140deg, #FFF5F5 0%, var(--emergency-bg) 100%);
	border: 1px solid #F3D4D4;
	border-radius: 20px;
	padding: 56px 48px 44px;
	box-shadow: 0 18px 40px rgba(83,45,45,.1);
}
.emergency-icon {
	position: absolute;
	top: -28px;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #D9534F;
	color: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 24px rgba(217,83,79,.4);
}
.emergency-card h3 {
	font-size: clamp(22px, 3vw, 28px);
	color: var(--emergency-text);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}
.emergency-tag {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: #D9534F;
	color: #fff;
	padding: 5px 13px;
	border-radius: 999px;
	white-space: nowrap;
}
.emergency-card p { color: #6b4a4a; margin: 16px auto 28px; max-width: 62ch; }
.btn-emergency {
	background: #D9534F;
	color: #fff;
	border-radius: 999px;
	padding: 14px 30px;
	box-shadow: 0 10px 24px rgba(217,83,79,.35);
}
.btn-emergency:hover { background: #C9302C; }

/* ==========================================================================
   Sticky mobile call bar
   ========================================================================== */
.mobile-call-bar { display: none; }

/* ==========================================================================
   Video showcase
   ========================================================================== */
.video-showcase { padding: 0 0 88px; text-align: center; }
.video-showcase.single { padding: 88px 0; }
.video-grid.single { grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; }
.video-grid.single .video-card { box-shadow: 0 20px 44px rgba(16,28,94,.18); }
.video-grid.single video { aspect-ratio: 16/9; background: var(--navy-darkest); }
.video-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.video-card {
	position: relative;
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 44px rgba(16,28,94,.18);
}
.video-card video {
	width: 100%;
	aspect-ratio: 16/10;
	object-fit: cover;
	display: block;
}
.video-card figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 44px 24px 20px;
	background: linear-gradient(180deg, transparent 0%, rgba(11,20,64,.85) 100%);
	color: #fff;
	font-family: var(--font-heading);
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 700;
	text-align: left;
}

/* ==========================================================================
   Projects gallery
   ========================================================================== */
.projects-section { padding: 0 0 88px; text-align: center; }
.projects-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 36px;
}
.project-card {
	position: relative;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 24px rgba(16,28,94,.1);
}
.project-card img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.project-card:hover img { transform: scale(1.05); }
.project-card figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32px 16px 14px;
	background: linear-gradient(180deg, transparent 0%, rgba(11,20,64,.8) 100%);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
}
.projects-section .btn-outline-dark { border-radius: 999px; padding: 13px 30px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: linear-gradient(180deg, var(--navy-darkest) 0%, #0B1440 100%);
	color: #fff;
	padding: 0 0 28px;
}

/* CTA strip that bridges into the footer */
.footer-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	padding: 40px 36px;
	margin-top: -48px;
	margin-bottom: 56px;
	background: linear-gradient(120deg, var(--blue-primary) 0%, var(--blue-secondary) 100%);
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(16,28,94,.35);
	position: relative;
	z-index: 5;
}
.footer-cta h2 { font-size: clamp(20px, 2.5vw, 26px); margin-bottom: 4px; }
.footer-cta p { margin: 0; color: rgba(255,255,255,.85); font-size: 15px; }
.footer-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-cta .btn-primary { background: #fff; color: var(--blue-secondary); }
.footer-cta .btn-primary:hover { background: var(--blue-tint); }
.footer-cta .btn { border-radius: 999px; padding: 12px 28px; }

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 48px;
	padding-bottom: 44px;
}
.footer-brand img { width: 150px; margin-bottom: 18px; }
.footer-brand > p {
	color: rgba(255,255,255,.65);
	font-size: 14px;
	line-height: 1.7;
	max-width: 34ch;
	margin-bottom: 20px;
}
.footer-social { display: flex; gap: 12px; }
.social-icon {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 10px;
	transition: background-color .15s ease, border-color .15s ease;
}
.social-icon:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }

.footer-col h3 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.5);
	margin-bottom: 18px;
}
.footer-col ul li { margin-bottom: 11px; }
.footer-col ul a {
	color: rgba(255,255,255,.85);
	font-size: 14.5px;
	transition: color .15s ease;
}
.footer-col ul a:hover { color: #9fb0ff; }

.footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: rgba(255,255,255,.85);
	font-size: 14.5px;
}
.footer-contact svg { flex-shrink: 0; margin-top: 3px; color: #9fb0ff; }

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.1);
}
.footer-bottom p { margin: 0; color: rgba(255,255,255,.55); font-size: 13px; }
.footer-bottom strong { color: rgba(255,255,255,.8); }
.footer-bottom a:hover { color: #9fb0ff; }
.footer-divider { margin: 0 10px; color: rgba(255,255,255,.25); }

/* ==========================================================================
   Feedback page
   ========================================================================== */
.feedback-section { padding: 88px 0 110px; background: #FAFBFF; }
.feedback-container {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 32px;
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
}
.feedback-card,
.reviews-card {
	background: #fff;
	border-radius: 20px;
	padding: 44px 40px;
	border: 1px solid var(--blue-tint);
	box-shadow: 0 20px 50px rgba(16,28,94,.08);
	display: flex;
	flex-direction: column;
}
.feedback-card { border-top: 4px solid var(--blue-primary); text-align: center; }
.feedback-card h2 { font-size: 24px; margin-bottom: 10px; }
.feedback-rating-intro { color: var(--text-muted); margin-bottom: 30px; font-size: 15px; }

.feedback-quote {
	margin: 28px 0 0;
	text-align: left;
	background: var(--blue-tint);
	border-left: 4px solid var(--blue-primary);
	border-radius: 12px;
	padding: 20px 24px;
}
.feedback-quote p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--text-dark);
	font-style: italic;
	margin-bottom: 10px;
}
.feedback-quote cite {
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	color: var(--navy-dark);
}

.star-rating { display: inline-flex; flex-direction: row-reverse; gap: 10px; margin-bottom: 10px; }
.star-rating input { position: absolute; opacity: 0; pointer-events: none; }
.star-rating label {
	font-size: 2.6rem;
	line-height: 1;
	color: var(--blue-tint-2);
	cursor: pointer;
	transition: color .15s ease, transform .1s ease;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label { color: #F5A623; }
.star-rating label:hover { transform: scale(1.12); }
.star-rating-hint {
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--text-muted);
	margin-top: 6px;
}

.rating-step { animation: feedbackFadeIn .35s ease-out; }
@keyframes feedbackFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

#step-improve, #step-thanks { text-align: left; }
#step-improve h2, #step-thanks h2 { text-align: center; }
#step-improve .feedback-rating-intro,
#step-thanks .feedback-rating-intro { text-align: center; }

.review-platforms {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-top: 8px;
}
.platform-btn {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: #FAFBFF;
	border: 1px solid var(--blue-tint);
	border-radius: 14px;
	text-align: left;
	transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.platform-btn:hover { border-color: var(--blue-tint-2); background: var(--blue-tint); transform: translateY(-2px); }
.platform-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.platform-btn strong { display: block; font-family: var(--font-heading); font-size: 14.5px; color: var(--text-dark); }
.platform-btn span { font-size: 12.5px; color: var(--text-muted); }

.feedback-quote-note {
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--blue-tint);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--text-muted);
	text-align: center;
}

.reviews-card { border-top: 4px solid #F5A623; }
.reviews-card h2 { font-size: 22px; margin-bottom: 4px; }
.reviews-card-sub { color: var(--text-muted); font-size: 14.5px; margin-bottom: 20px; }
.reviews-card .elfsight-app-724f138a-28f4-4ca5-8067-f46a25e57ebb { flex: 1; }
.reviews-card-photos {
	display: flex;
	gap: 10px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--blue-tint);
}
.reviews-card-photos img {
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 12px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1140px) {
	.main-nav { display: none; }
	.mobile-menu-toggle { display: flex; }
}

@media (max-width: 1024px) {
	.hero-grid { grid-template-columns: 1fr; }
	.two-col,
	.specialist-section .two-col { grid-template-columns: 1fr; }
	.two-col.reverse .col-image,
	.two-col.reverse .col-text { order: initial; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.guides-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	.topbar-email, .topbar-hours { display: none; }
}

@media (max-width: 560px) {
	.header-topbar { display: none; }
	.price-badge {
		width: 100px;
		height: 100px;
		top: -20px;
		right: -16px;
	}
	.price-badge-eyebrow { font-size: 9px; }
	.price-badge-amount { font-size: 23px; }
	.price-badge-label { font-size: 8.5px; max-width: 68px; }
}

@media (max-width: 900px) {
	.video-grid { grid-template-columns: 1fr; }
	.faq-grid { grid-template-columns: 1fr; }
	.contact-grid { grid-template-columns: 1fr; }
	.feedback-container { grid-template-columns: 1fr; }
	.guides-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	body.has-mobile-call-bar { padding-bottom: 60px; }
	.mobile-call-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 200;
		padding: 15px 16px;
		background: var(--blue-primary);
		color: #fff;
		font-weight: 700;
		font-size: 15px;
		text-decoration: none;
		box-shadow: 0 -4px 16px rgba(16,28,94,.2);
	}
	.mobile-call-bar svg { flex-shrink: 0; }
}

@media (max-width: 640px) {
	.hero { padding: 56px 0 80px; }
	.hero-ctas { flex-direction: column; align-items: stretch; }
	.hero-ctas .btn { justify-content: center; }
	.hero-trust { flex-direction: column; gap: 12px; }
	.quote-form .form-row { grid-template-columns: 1fr; }
	.cert-logos { gap: 14px; }
	.cert-card { padding: 16px 22px; }
	.projects-grid { grid-template-columns: 1fr 1fr; }
	.footer-grid { grid-template-columns: 1fr; text-align: left; }
	.emergency-card { padding: 48px 24px 36px; }
	.footer-cta { padding: 32px 24px; }
	.feedback-card, .reviews-card { padding: 32px 24px; }
	.review-platforms { grid-template-columns: 1fr; }
	.reviews-card-photos { flex-wrap: wrap; }
	.star-rating label { font-size: 2.2rem; }
}