/* ==========================================================================
   Level 5 Roofs & Exteriors — Design tokens
   ========================================================================== */
:root {
	--l5-black:        #0B0C0E;
	--l5-charcoal:     #1A1C20;
	--l5-charcoal-2:   #24262B;
	--l5-steel:        #9AA1A8;
	--l5-steel-light:  #E7E9EB;
	--l5-red:          #D11F2E;
	--l5-red-dark:     #8C0F1C;
	--l5-white:        #FFFFFF;
	--l5-offwhite:     #F4F5F6;
	--l5-ink:          #1A1C20;
	--l5-ink-soft:     #4A4E54;
	--l5-border:       #E1E3E5;

	--l5-font-display: 'Oswald', Impact, 'Arial Narrow', sans-serif;
	--l5-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--l5-container: 1200px;
	--l5-radius: 4px;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--l5-font-body);
	color: var(--l5-ink);
	background: var(--l5-white);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
	font-family: var(--l5-font-display);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.15;
	margin: 0 0 .5em;
	color: var(--l5-ink);
}
p { margin: 0 0 1em; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.l5-skip-link {
	position: absolute; left: -999px; top: 0; background: var(--l5-red); color: #fff;
	padding: .75rem 1.25rem; z-index: 10000;
}
.l5-skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--l5-red); outline-offset: 2px; }

.l5-container { max-width: var(--l5-container); margin: 0 auto; padding: 0 24px; }
.l5-container-narrow { max-width: 820px; }
.l5-center { text-align: center; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.l5-btn {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--l5-font-display); text-transform: uppercase; letter-spacing: .04em;
	font-size: 15px; font-weight: 600; padding: .9rem 1.75rem; border-radius: var(--l5-radius);
	border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
	white-space: nowrap;
}
.l5-btn:hover { transform: translateY(-1px); }
.l5-btn-red { background: var(--l5-red); color: #fff; box-shadow: 0 6px 18px rgba(209,31,46,.35); }
.l5-btn-red:hover { background: var(--l5-red-dark); }
.l5-btn-outline-light { border-color: rgba(255,255,255,.5); color: #fff; }
.l5-btn-outline-light:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.l5-btn-outline-dark { border-color: var(--l5-ink); color: var(--l5-ink); }
.l5-btn-outline-dark:hover { background: var(--l5-ink); color: #fff; }
.l5-btn-lg { padding: 1.1rem 2.2rem; font-size: 16px; }

/* ==========================================================================
   Top bar + Header
   ========================================================================== */
.l5-topbar { background: var(--l5-red); color: #fff; font-size: 13px; }
.l5-topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 7px 24px; gap: 12px; flex-wrap: wrap; }
.l5-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; margin-right: 6px; animation: l5-pulse 1.8s infinite; }
@keyframes l5-pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.l5-topbar-area { opacity: .9; font-family: var(--l5-font-display); letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }

.l5-header {
	background: var(--l5-black);
	position: sticky; top: 0; z-index: 999;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.l5-header-inner { display: flex; align-items: center; gap: 24px; padding: 6px 24px; }
.l5-logo { flex-shrink: 0; }
.l5-logo img { height: 88px; width: auto; }

.l5-nav { flex: 1; }
.l5-nav-list { display: flex; gap: 22px; flex-wrap: wrap; }
.l5-nav-list a {
	color: var(--l5-steel-light); font-family: var(--l5-font-display); text-transform: uppercase;
	font-size: 14px; letter-spacing: .03em; padding: 8px 0; position: relative;
}
.l5-nav-list a::after {
	content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--l5-red);
	transition: width .2s ease;
}
.l5-nav-list a:hover::after, .l5-nav-list a:focus::after { width: 100%; }

.l5-header-cta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.l5-phone-link { color: #fff; font-family: var(--l5-font-display); font-size: 16px; display: flex; gap: 8px; align-items: center; }
.l5-phone-icon { color: var(--l5-red); }
.l5-header-btn { padding: .65rem 1.3rem; font-size: 13px; }

.l5-menu-toggle {
	display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px;
}
.l5-menu-toggle span { width: 26px; height: 2px; background: #fff; display: block; }

/* ==========================================================================
   Hero
   ========================================================================== */
.l5-hero {
	background: linear-gradient(160deg, var(--l5-black) 0%, var(--l5-charcoal) 65%, #2b1113 100%);
	color: #fff; padding: 90px 0 70px; position: relative; overflow: hidden;
}
.l5-hero::after {
	content: ''; position: absolute; right: -10%; bottom: -20%; width: 60%; height: 140%;
	background: radial-gradient(circle, rgba(209,31,46,.18) 0%, transparent 70%);
	pointer-events: none; z-index: 1;
}
.l5-hero-inner { display: grid; grid-template-columns: 1.4fr .6fr; gap: 40px; align-items: center; position: relative; z-index: 2; }

/* Optional hero video/image background, set via Appearance -> Customize -> Header Media */
.l5-hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.l5-hero-media::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(160deg, rgba(11,12,14,.62) 0%, rgba(26,28,32,.55) 65%, rgba(43,17,19,.6) 100%);
}
.l5-hero-media #wp-custom-header,
.l5-hero-media video,
.l5-hero-media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Video/image background is skipped on small screens to protect mobile load time and battery. */
@media (max-width: 780px) {
	.l5-hero-media { display: none; }
}
.l5-eyebrow {
	font-family: var(--l5-font-display); text-transform: uppercase; letter-spacing: .12em; font-size: 13px;
	color: var(--l5-red); margin-bottom: 14px; font-weight: 600;
}
.l5-eyebrow-hero { color: var(--l5-steel); }
.l5-eyebrow-center { text-align: center; }
.l5-hero-title {
	font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--l5-steel-light); margin-bottom: 20px; font-weight: 700;
}
.l5-steel-text {
	background: linear-gradient(180deg, #ffffff 0%, #eef0f1 18%, #b7bec3 38%, #8b9198 50%, #b7bec3 62%, #eef0f1 82%, #ffffff 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	-webkit-text-stroke: 0.6px rgba(11,12,14,.5);
	text-shadow: 0 1px 0 rgba(11,12,14,.25);
}
.l5-red-text { color: var(--l5-red); }
.l5-hero-sub { color: var(--l5-steel); max-width: 560px; font-size: 17px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.l5-hero-actions { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.l5-hero-sub-light { color: var(--l5-steel); }

.l5-hero-badge { display: flex; justify-content: center; }
.l5-hero-badge-inner {
	width: 220px; height: 220px; position: relative;
	display: flex; align-items: center; justify-content: center;
}
.l5-hero-badge-inner::before {
	content: ''; position: absolute; inset: 10%; border-radius: 50%;
	background: radial-gradient(circle, rgba(209,31,46,.22) 0%, transparent 72%);
	z-index: 0;
}
.l5-hero-badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.l5-hero-badge-label {
	position: absolute; left: 0; right: 0; top: 132px;
	font-family: var(--l5-font-display); text-transform: uppercase; font-size: 12px; letter-spacing: .05em;
	color: var(--l5-steel); text-align: center; line-height: 1.4;
}

/* ==========================================================================
   Trust bar
   ========================================================================== */
.l5-trustbar { background: var(--l5-offwhite); border-bottom: 1px solid var(--l5-border); }
.l5-trustbar-inner { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 40px; padding: 18px 24px; }
.l5-trustbadge {
	font-family: var(--l5-font-display); text-transform: uppercase; font-size: 13px; letter-spacing: .04em;
	color: var(--l5-ink-soft); display: flex; align-items: center; gap: 8px;
}
.l5-trustbadge::before { content: '✓'; color: var(--l5-red); font-weight: 700; }

/* ==========================================================================
   Section basics
   ========================================================================== */
section { padding: 80px 0; }
.l5-section-title { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.l5-section-sub { color: var(--l5-ink-soft); max-width: 640px; }
.l5-section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; }

/* ==========================================================================
   Services grid
   ========================================================================== */
.l5-services { background: var(--l5-white); }
.l5-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.l5-service-card {
	background: var(--l5-offwhite); border: 1px solid var(--l5-border); border-radius: var(--l5-radius);
	padding: 32px 28px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
	position: relative; overflow: hidden;
}
.l5-service-card::before {
	content: ''; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: var(--l5-steel);
	transition: background .2s ease;
}
.l5-service-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.08); border-color: var(--l5-red); }
.l5-service-card:hover::before { background: var(--l5-red); }
.l5-service-card h3 { font-size: 20px; }
.l5-service-card p { color: var(--l5-ink-soft); font-size: 15px; margin-bottom: 1.4em; }
.l5-card-link { font-family: var(--l5-font-display); text-transform: uppercase; font-size: 13px; letter-spacing: .04em; color: var(--l5-red); }

/* ==========================================================================
   Five-step process (signature element)
   ========================================================================== */
.l5-process { background: var(--l5-black); color: #fff; }
.l5-process .l5-section-title, .l5-process .l5-section-sub { color: var(--l5-steel-light); }
.l5-process .l5-section-sub { color: var(--l5-steel); margin: 0 auto 50px; }
.l5-process-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.l5-process-track::before {
	content: ''; position: absolute; top: 28px; left: 6%; right: 6%; height: 2px;
	background: linear-gradient(90deg, var(--l5-steel), var(--l5-red));
}
.l5-process-step { text-align: center; padding: 0 14px; position: relative; }
.l5-process-num {
	display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
	background: var(--l5-charcoal); border: 2px solid var(--l5-red); color: #fff; font-family: var(--l5-font-display);
	font-size: 22px; font-weight: 700; position: relative; z-index: 1; margin-bottom: 18px;
}
.l5-process-step h3 { font-size: 16px; color: #fff; }
.l5-process-step p { color: var(--l5-steel); font-size: 14px; }

/* ==========================================================================
   Projects
   ========================================================================== */
.l5-projects-teaser { background: var(--l5-offwhite); }
.l5-projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 10px; }
.l5-projects-grid-archive { margin-top: 44px; }
.l5-project-card { background: #fff; border: 1px solid var(--l5-border); border-radius: var(--l5-radius); overflow: hidden; display: block; }
.l5-project-thumb { aspect-ratio: 4/3; background: var(--l5-charcoal-2); overflow: hidden; }
.l5-project-thumb img { width: 100%; height: 100%; object-fit: cover; }
.l5-project-placeholder {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	color: var(--l5-steel); font-family: var(--l5-font-display); text-transform: uppercase; letter-spacing: .05em; font-size: 13px;
	background: repeating-linear-gradient(45deg, #24262B, #24262B 10px, #1E2024 10px, #1E2024 20px);
}
.l5-project-card h3 { font-size: 16px; padding: 16px 18px; margin: 0; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.l5-reviews { background: #fff; }
.l5-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.l5-review-card { background: var(--l5-offwhite); border: 1px solid var(--l5-border); border-radius: var(--l5-radius); padding: 28px; }
.l5-stars { color: var(--l5-red); letter-spacing: 2px; margin-bottom: 10px; font-size: 18px; }
.l5-review-card p { font-style: italic; color: var(--l5-ink); }
.l5-review-name { font-family: var(--l5-font-display); text-transform: uppercase; font-size: 13px; letter-spacing: .03em; color: var(--l5-ink-soft); }

/* ==========================================================================
   Financing teaser + page cards
   ========================================================================== */
.l5-financing-teaser { background: var(--l5-charcoal); color: #fff; }
.l5-financing-teaser .l5-section-title, .l5-financing-teaser p { color: #fff; }
.l5-financing-teaser .l5-section-sub { color: var(--l5-steel); }
.l5-financing-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.l5-financing-inner .l5-btn-outline-dark { border-color: #fff; color: #fff; }
.l5-financing-inner .l5-btn-outline-dark:hover { background: #fff; color: var(--l5-ink); }
.l5-financing-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 40px; }
.l5-financing-partners-title { margin-top: 60px; text-align: center; font-size: 24px; }
.l5-partner-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 30px; }
.l5-partner-card {
	border: 1px solid var(--l5-border); border-radius: var(--l5-radius); padding: 32px;
	background: #fff; text-align: center; display: flex; flex-direction: column; align-items: center;
}
.l5-partner-logo { max-height: 48px; max-width: 200px; margin-bottom: 18px; object-fit: contain; }
.l5-partner-card h3 { font-size: 19px; }
.l5-partner-card p { color: var(--l5-ink-soft); font-size: 15px; margin-bottom: 1.6em; }
.l5-financing-disclosure { font-size: 12.5px; color: var(--l5-ink-soft); margin-top: 40px; line-height: 1.6; }
.l5-financing-card { border: 1px solid var(--l5-border); border-radius: var(--l5-radius); padding: 26px; background: var(--l5-offwhite); }

/* ==========================================================================
   Inspection form
   ========================================================================== */
.l5-inspection { background: var(--l5-offwhite); }
.l5-inspection-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.l5-inspection-points { margin: 20px 0; }
.l5-inspection-points li { padding: 8px 0 8px 26px; position: relative; color: var(--l5-ink-soft); }
.l5-inspection-points li::before { content: '✓'; position: absolute; left: 0; color: var(--l5-red); font-weight: 700; }
.l5-inspection-phone a { color: var(--l5-red); font-weight: 600; }

.l5-form { background: #fff; border: 1px solid var(--l5-border); border-radius: var(--l5-radius); padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.l5-form-row { display: flex; flex-direction: column; gap: 6px; }
.l5-form-row-full { grid-column: 1 / -1; }
.l5-form label { font-family: var(--l5-font-display); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--l5-ink-soft); }
.l5-form input, .l5-form textarea {
	border: 1px solid var(--l5-border); border-radius: var(--l5-radius); padding: 12px 14px; font-family: var(--l5-font-body); font-size: 15px;
}
.l5-form input:focus, .l5-form textarea:focus { border-color: var(--l5-red); outline: none; }
.l5-form-submit { grid-column: 1 / -1; margin-top: 6px; }
.l5-form-status { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.l5-form-status.is-success { color: #1a7a3c; }
.l5-form-status.is-error { color: var(--l5-red); }
.l5-hp { position: absolute; left: -9999px; }

.l5-calendly-wrap { background: #fff; border: 1px solid var(--l5-border); border-radius: var(--l5-radius); overflow: hidden; }

/* Inspection Modal */
.l5-modal {
	position: fixed; inset: 0; z-index: 2000; display: none;
	align-items: center; justify-content: center; padding: 24px;
}
.l5-modal.is-open { display: flex; }
.l5-modal-backdrop {
	position: absolute; inset: 0; background: rgba(11,12,14,.72); backdrop-filter: blur(2px);
	animation: l5-fade-in .18s ease;
}
.l5-modal-panel {
	position: relative; background: #fff; border-radius: 6px; max-width: 640px; width: 100%;
	max-height: 88vh; overflow-y: auto; padding: 40px; z-index: 1;
	animation: l5-modal-in .22s ease;
}
.l5-modal-title { margin-bottom: 22px; font-size: 22px; }
.l5-modal-close {
	position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
	border: 1px solid var(--l5-border); background: #fff; font-size: 22px; line-height: 1; color: var(--l5-ink-soft);
	cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.l5-modal-close:hover { border-color: var(--l5-red); color: var(--l5-red); }
.l5-form-modal { grid-template-columns: 1fr; padding: 0; border: 0; }
@keyframes l5-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes l5-modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 600px) {
	.l5-modal-panel { padding: 28px 20px; max-height: 92vh; }
}

/* FAQ */
.l5-faq { background: var(--l5-offwhite); }
.l5-faq-list { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; }
.l5-faq-item { background: #fff; border: 1px solid var(--l5-border); border-radius: var(--l5-radius); padding: 4px 22px; }
.l5-faq-item summary {
	cursor: pointer; padding: 16px 0; font-family: var(--l5-font-display); text-transform: uppercase;
	font-size: 15px; letter-spacing: .02em; list-style: none; position: relative; padding-right: 30px;
}
.l5-faq-item summary::-webkit-details-marker { display: none; }
.l5-faq-item summary::after {
	content: '+'; position: absolute; right: 0; top: 14px; font-size: 22px; color: var(--l5-red); font-family: var(--l5-font-body);
}
.l5-faq-item[open] summary::after { content: '−'; }
.l5-faq-item p { color: var(--l5-ink-soft); padding-bottom: 18px; margin: 0; font-size: 15.5px; }

/* Inspection Scheduler */
.l5-scheduler { margin-bottom: 4px; }
.l5-scheduler > label { margin-bottom: 4px; display: block; }
.l5-scheduler-dates { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.l5-scheduler-loading { color: var(--l5-ink-soft); font-size: 14px; }
.l5-date-btn, .l5-time-btn {
	font-family: var(--l5-font-body); font-size: 13.5px; font-weight: 500; padding: 9px 14px;
	border: 1px solid var(--l5-border); background: #fff; border-radius: var(--l5-radius); cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.l5-date-btn:hover:not(:disabled), .l5-time-btn:hover:not(:disabled) { border-color: var(--l5-red); }
.l5-date-btn.is-selected, .l5-time-btn.is-selected { background: var(--l5-red); border-color: var(--l5-red); color: #fff; }
.l5-date-btn:disabled, .l5-time-btn:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.l5-scheduler-times { margin-top: 14px; }
.l5-scheduler-times > label { margin-bottom: 4px; display: block; }
.l5-scheduler-times-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.l5-scheduler-selected { font-size: 14px; font-weight: 600; color: var(--l5-red); margin: 10px 0 0; }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.l5-final-cta { background: linear-gradient(120deg, var(--l5-black), #2b1113); color: #fff; padding: 60px 0; }
.l5-final-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.l5-final-cta h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 6px; }
.l5-final-cta-sub { color: var(--l5-steel); margin: 0; }
.l5-final-cta-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ==========================================================================
   Footer
   ========================================================================== */
.l5-footer { background: var(--l5-black); color: var(--l5-steel); padding-top: 60px; }
.l5-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.l5-footer-brand img { margin-bottom: 16px; width: 240px; height: auto; }
.l5-footer-brand p { font-size: 14px; margin-bottom: 4px; }
.l5-footer-social { display: flex; gap: 14px; margin-top: 14px; }
.l5-footer-social a { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--l5-steel-light); }
.l5-footer-col h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.l5-footer-col ul li { margin-bottom: 10px; font-size: 14px; }
.l5-footer-col a:hover { color: var(--l5-red); }
.l5-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; }
.l5-footer-bottom-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; }

/* ==========================================================================
   Generic page / blog
   ========================================================================== */
.l5-page-hero { background: var(--l5-black); color: #fff; padding: 60px 0; }
.l5-page-hero h1 { color: var(--l5-steel-light); margin-bottom: 6px; }
.l5-page-content { padding: 70px 0; }
.l5-page-featured-img { margin-bottom: 30px; border-radius: var(--l5-radius); overflow: hidden; }
.l5-page-featured-img img { width: 100%; height: auto; display: block; }
.l5-prose { font-size: 17px; color: var(--l5-ink); }
.l5-prose h2, .l5-prose h3 { margin-top: 1.4em; }
.l5-prose a { color: var(--l5-red); text-decoration: underline; }

/* Service Areas hub page */
.l5-areas-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 30px; }
.l5-areas-group h3 {
	font-size: 16px; text-transform: uppercase; letter-spacing: .04em; color: var(--l5-red);
	border-bottom: 2px solid var(--l5-border); padding-bottom: 10px; margin-bottom: 14px;
}
.l5-areas-list li { margin-bottom: 10px; }
.l5-areas-list a { font-size: 16px; color: var(--l5-ink); }
.l5-areas-list a:hover { color: var(--l5-red); }
@media (max-width: 600px) {
	.l5-areas-groups { grid-template-columns: 1fr; gap: 24px; }
}
.l5-prose .l5-lede { font-size: 19px; color: var(--l5-ink-soft); margin-bottom: 1.6em; }
.l5-prose ul { margin: 0 0 1.6em; padding-left: 1.4em; }
.l5-prose ul li { margin-bottom: .5em; }

.l5-area-hero { background: linear-gradient(160deg, var(--l5-black), var(--l5-charcoal)); color: #fff; padding: 80px 0 60px; text-align: center; position: relative; }
.l5-area-hero-photo {
	background-size: cover; background-position: center;
}
.l5-area-hero-photo::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(160deg, rgba(11,12,14,.68), rgba(26,28,32,.6));
	z-index: 0;
}
.l5-area-hero-photo .l5-container { position: relative; z-index: 1; }
.l5-area-hero .l5-hero-title { font-size: clamp(2rem, 4vw, 2.8rem); }
.l5-area-hero .l5-hero-actions { justify-content: center; }
.l5-area-hero .l5-hero-sub { margin: 0 auto; }

.l5-blog-layout { display: grid; grid-template-columns: 2.2fr 1fr; gap: 50px; align-items: start; }
.l5-blog-card { display: grid; grid-template-columns: 260px 1fr; gap: 24px; margin-bottom: 40px; border-bottom: 1px solid var(--l5-border); padding-bottom: 40px; }
.l5-blog-card-thumb { border-radius: var(--l5-radius); overflow: hidden; aspect-ratio: 4/3; background: var(--l5-charcoal-2); }
.l5-blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.l5-blog-date { font-family: var(--l5-font-display); text-transform: uppercase; font-size: 12px; letter-spacing: .04em; color: var(--l5-ink-soft); }
.l5-blog-date-hero { color: var(--l5-steel); display: block; margin-bottom: 8px; }
.l5-blog-card h2 { font-size: 20px; margin: 6px 0 10px; }
.l5-widget { background: var(--l5-offwhite); border: 1px solid var(--l5-border); border-radius: var(--l5-radius); padding: 24px; margin-bottom: 24px; }
.l5-widget-title { font-size: 16px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
	.l5-hero-inner { grid-template-columns: 1fr; }
	.l5-hero-badge { order: -1; }
	.l5-hero-badge-inner { width: 150px; height: 150px; }
	.l5-hero-badge-label { top: 90px; font-size: 10px; }
	.l5-services-grid, .l5-projects-grid, .l5-reviews-grid, .l5-financing-cards { grid-template-columns: repeat(2,1fr); }
	.l5-process-track { grid-template-columns: repeat(5,1fr); }
	.l5-inspection-inner { grid-template-columns: 1fr; }
	.l5-footer-grid { grid-template-columns: 1fr 1fr; }
	.l5-blog-layout { grid-template-columns: 1fr; }
}

/* Switch to the hamburger menu earlier than the content-stacking breakpoint below —
   with 6 nav items + phone + CTA button, a plain flex-wrap nav can start wrapping
   awkwardly on medium/laptop widths well before the phone layout kicks in. */
@media (max-width: 1050px) {
	.l5-topbar-inner { justify-content: center; text-align: center; }
	.l5-topbar-area { display: none; }
	.l5-nav, .l5-header-cta .l5-phone-link { display: none; }
	.l5-menu-toggle { display: flex; }
	.l5-header-inner { justify-content: space-between; }
	.l5-logo img { height: 62px; }
	.l5-nav {
		display: block; position: fixed; inset: 0 0 0 auto; width: 78%; max-width: 320px;
		background: var(--l5-black); padding: 90px 28px 28px; transform: translateX(100%);
		transition: transform .25s ease; z-index: 1000;
	}
	.l5-nav.is-open { transform: translateX(0); }
	.l5-nav-list { flex-direction: column; gap: 4px; }
	.l5-nav-list a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
}

@media (max-width: 720px) {
	.l5-services-grid, .l5-projects-grid, .l5-reviews-grid, .l5-financing-cards, .l5-partner-cards { grid-template-columns: 1fr; }
	.l5-process-track { grid-template-columns: 1fr; gap: 30px; }
	.l5-process-track::before { display: none; }
	.l5-form { grid-template-columns: 1fr; }
	.l5-footer-grid { grid-template-columns: 1fr; }
	.l5-final-cta-inner { flex-direction: column; text-align: center; }
	.l5-blog-card { grid-template-columns: 1fr; }
	section { padding: 56px 0; }
}