.elementor .e-3a593bf{padding:0px;margin:0px;flex-direction:column;}.elementor .e-bb408bf-ea7f206{padding:0px;margin:0px;flex-direction:column;/* ============================================================
 H&L ELECTRIC — HOMEPAGE SECTIONS (3-9)
 ============================================================ */

/* Shared section styles */
.hl-section__eyebrow {
margin: 0 0 16px;
font-family: var(--hl-font-sans);
font-size: 13px;
font-weight: 600;
color: var(--hl-amber);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.hl-section__heading {
margin: 0 0 20px;
font-family: var(--hl-font-sans);
font-size: 40px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--hl-navy);
}
.hl-section__lede {
margin: 0;
max-width: 720px;
font-family: var(--hl-font-sans);
font-size: 18px;
line-height: 1.55;
color: var(--hl-slate);
}

/* Section 3 — Industries */
.hl-industries {
padding: 96px 0;
background: var(--hl-cloud);
font-family: var(--hl-font-sans);
}
.hl-industries__inner {
max-width: var(--hl-content-max);
margin: 0 auto;
padding: 0 32px;
}
.hl-industries__header {
margin-bottom: 56px;
text-align: left;
max-width: 800px;
}
.hl-industries__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.hl-industry-card {
display: block;
padding: 40px 36px;
background: var(--hl-white);
border: 1px solid var(--hl-mist);
border-radius: 8px;
text-decoration: none;
transition: transform var(--hl-transition), box-shadow var(--hl-transition), border-color var(--hl-transition);
}
.hl-industry-card:hover,
.hl-industry-card:focus-visible {
transform: translateY(-4px);
box-shadow: var(--hl-shadow-md);
border-color: var(--hl-amber);
}
.hl-industry-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: rgba(212, 165, 71, 0.12);
border-radius: 8px;
color: var(--hl-amber);
margin-bottom: 24px;
}
.hl-industry-card__title {
margin: 0 0 12px;
font-size: 22px;
font-weight: 700;
color: var(--hl-navy);
line-height: 1.25;
}
.hl-industry-card__desc {
margin: 0 0 20px;
font-size: 15px;
line-height: 1.55;
color: var(--hl-slate);
}
.hl-industry-card__cta {
display: inline-block;
font-size: 14px;
font-weight: 600;
color: var(--hl-amber);
}

/* Section 4 — Services */
.hl-services {
padding: 96px 0;
background: var(--hl-white);
font-family: var(--hl-font-sans);
}
.hl-services__inner {
max-width: var(--hl-content-max);
margin: 0 auto;
padding: 0 32px;
}
.hl-services__header {
margin-bottom: 56px;
max-width: 800px;
}
.hl-services__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.hl-service-card {
display: block;
padding: 32px 24px;
background: var(--hl-navy);
border-radius: 8px;
text-decoration: none;
transition: background var(--hl-transition), transform var(--hl-transition);
}
.hl-service-card:hover,
.hl-service-card:focus-visible {
background: var(--hl-navy-dark);
transform: translateY(-3px);
}
.hl-service-card__icon {
color: var(--hl-amber);
margin-bottom: 20px;
}
.hl-service-card__title {
margin: 0 0 10px;
font-size: 18px;
font-weight: 700;
color: var(--hl-white);
line-height: 1.3;
}
.hl-service-card__desc {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.75);
}
.hl-service-card__link {
font-size: 13px;
font-weight: 600;
color: var(--hl-amber);
}

/* Section 5 — Why H&L */
.hl-why {
padding: 96px 0;
background: var(--hl-navy);
font-family: var(--hl-font-sans);
}
.hl-why__inner {
max-width: var(--hl-content-max);
margin: 0 auto;
padding: 0 32px;
}
.hl-why__header {
margin-bottom: 56px;
max-width: 800px;
}
.hl-why__header .hl-section__eyebrow { color: var(--hl-amber); }
.hl-why__header .hl-section__heading { color: var(--hl-white); }
.hl-why__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px 48px;
}
.hl-why-item {
padding: 0;
}
.hl-why-item__number {
font-size: 32px;
font-weight: 800;
color: var(--hl-amber);
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.hl-why-item__title {
margin: 0 0 12px;
font-size: 22px;
font-weight: 700;
color: var(--hl-white);
line-height: 1.3;
}
.hl-why-item__desc {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
}

/* Section 6 — Proof */
.hl-proof {
padding: 96px 0;
background: var(--hl-cloud);
font-family: var(--hl-font-sans);
}
.hl-proof__inner {
max-width: var(--hl-content-max);
margin: 0 auto;
padding: 0 32px;
}
.hl-proof__header {
margin-bottom: 48px;
max-width: 800px;
}
.hl-proof__testimonials {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 48px;
}
.hl-testimonial {
margin: 0;
padding: 32px;
background: var(--hl-white);
border-left: 4px solid var(--hl-amber);
border-radius: 4px;
}
.hl-testimonial__quote {
margin: 0 0 20px;
font-size: 17px;
line-height: 1.55;
color: var(--hl-charcoal);
font-style: italic;
}
.hl-testimonial__attribution {
display: flex;
flex-direction: column;
gap: 2px;
}
.hl-testimonial__name {
font-size: 14px;
font-weight: 700;
color: var(--hl-navy);
}
.hl-testimonial__role {
font-size: 13px;
color: var(--hl-slate);
}
.hl-proof__projects {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.hl-project-tile {
background: var(--hl-white);
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--hl-mist);
}
.hl-project-tile__image {
aspect-ratio: 16 / 10;
background: var(--hl-mist);
display: flex;
align-items: center;
justify-content: center;
}
.hl-project-tile__placeholder {
font-size: 12px;
color: var(--hl-fog);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.hl-project-tile__body {
padding: 20px 24px;
}
.hl-project-tile__tag {
display: inline-block;
padding: 4px 10px;
background: rgba(212, 165, 71, 0.12);
color: var(--hl-amber-dark);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 3px;
margin-bottom: 12px;
}
.hl-project-tile__title {
margin: 0 0 6px;
font-size: 16px;
font-weight: 700;
color: var(--hl-navy);
line-height: 1.35;
}
.hl-project-tile__desc {
margin: 0;
font-size: 13px;
color: var(--hl-slate);
}

/* Section 7 — Service Area */
.hl-area {
padding: 96px 0;
background: var(--hl-white);
font-family: var(--hl-font-sans);
}
.hl-area__inner {
max-width: var(--hl-content-max);
margin: 0 auto;
padding: 0 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.hl-area__cities {
list-style: none;
padding: 0;
margin: 32px 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 20px;
}
.hl-area__cities li {
font-size: 15px;
color: var(--hl-charcoal);
padding-left: 24px;
position: relative;
}
.hl-area__cities li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 12px;
height: 12px;
background: var(--hl-amber);
border-radius: 50%;
opacity: 0.6;
}
.hl-area__cta {
display: inline-block;
font-size: 15px;
font-weight: 600;
color: var(--hl-amber);
text-decoration: none;
}
.hl-area__map {
aspect-ratio: 4 / 3;
background: var(--hl-cloud);
border: 1px solid var(--hl-mist);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.hl-area__map-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
color: var(--hl-fog);
font-size: 13px;
}

/* Section 8 — FAQ */
.hl-faq {
padding: 96px 0;
background: var(--hl-cloud);
font-family: var(--hl-font-sans);
}
.hl-faq__inner {
max-width: 900px;
margin: 0 auto;
padding: 0 32px;
}
.hl-faq__header {
margin-bottom: 48px;
max-width: 800px;
}
.hl-faq__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.hl-faq__item {
background: var(--hl-white);
border: 1px solid var(--hl-mist);
border-radius: 6px;
overflow: hidden;
}
.hl-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 28px;
font-size: 17px;
font-weight: 600;
color: var(--hl-navy);
cursor: pointer;
list-style: none;
transition: background var(--hl-transition);
}
.hl-faq__question::-webkit-details-marker {
display: none;
}
.hl-faq__question:hover {
background: var(--hl-cloud);
}
.hl-faq__caret {
display: inline-flex;
color: var(--hl-amber);
transition: transform var(--hl-transition);
flex-shrink: 0;
margin-left: 20px;
}
.hl-faq__item[open] .hl-faq__caret {
transform: rotate(180deg);
}
.hl-faq__answer {
padding: 0 28px 24px;
}
.hl-faq__answer p {
margin: 0;
font-size: 15px;
line-height: 1.65;
color: var(--hl-slate);
}

/* Section 9 — Final CTA */
.hl-final-cta {
padding: 96px 0;
background: var(--hl-navy);
font-family: var(--hl-font-sans);
text-align: center;
}
.hl-final-cta__inner {
max-width: 800px;
margin: 0 auto;
padding: 0 32px;
}
.hl-final-cta__eyebrow {
margin: 0 0 16px;
font-size: 13px;
font-weight: 600;
color: var(--hl-amber);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.hl-final-cta__heading {
margin: 0 0 20px;
font-size: 44px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--hl-white);
}
.hl-final-cta__subhead {
margin: 0 0 40px;
font-size: 18px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.8);
}
.hl-final-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin-bottom: 20px;
}
.hl-final-cta__primary {
display: inline-flex;
align-items: center;
padding: 16px 32px;
background: var(--hl-amber);
color: var(--hl-navy);
font-size: 16px;
font-weight: 700;
text-decoration: none;
border-radius: 4px;
transition: background var(--hl-transition), transform var(--hl-transition);
}
.hl-final-cta__primary:hover,
.hl-final-cta__primary:focus-visible {
background: var(--hl-amber-dark);
transform: translateY(-1px);
color: var(--hl-navy);
}
.hl-final-cta__secondary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 24px;
background: transparent;
color: var(--hl-white);
font-size: 16px;
font-weight: 600;
text-decoration: none;
border: 1.5px solid rgba(255, 255, 255, 0.4);
border-radius: 4px;
transition: background var(--hl-transition), border-color var(--hl-transition);
}
.hl-final-cta__secondary:hover,
.hl-final-cta__secondary:focus-visible {
background: rgba(255, 255, 255, 0.08);
border-color: var(--hl-white);
color: var(--hl-white);
}
.hl-final-cta__secondary svg { color: var(--hl-amber); }
.hl-final-cta__hours {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
 RESPONSIVE — ALL HOMEPAGE SECTIONS
 ============================================================ */
@media (max-width: 1024px) {
.hl-section__heading { font-size: 32px; }
.hl-industries__grid { grid-template-columns: 1fr; gap: 20px; }
.hl-services__grid { grid-template-columns: 1fr 1fr; }
.hl-why__grid { grid-template-columns: 1fr; gap: 32px; }
.hl-proof__testimonials { grid-template-columns: 1fr; }
.hl-proof__projects { grid-template-columns: 1fr; }
.hl-area__inner { grid-template-columns: 1fr; gap: 40px; }
.hl-area__cities { grid-template-columns: 1fr 1fr; }
.hl-final-cta__heading { font-size: 32px; }
}

@media (max-width: 767px) {
.hl-industries, .hl-services, .hl-why, .hl-proof, .hl-area, .hl-faq, .hl-final-cta {
  padding: 64px 0;
}
.hl-section__heading { font-size: 26px; }
.hl-section__lede { font-size: 16px; }
.hl-industry-card { padding: 28px 24px; }
.hl-industry-card__title { font-size: 19px; }
.hl-services__grid { grid-template-columns: 1fr; }
.hl-why-item__title { font-size: 19px; }
.hl-area__cities { grid-template-columns: 1fr; }
.hl-faq__question { padding: 16px 20px; font-size: 15px; }
.hl-faq__answer { padding: 0 20px 20px; }
.hl-final-cta__heading { font-size: 26px; }
.hl-final-cta__actions { flex-direction: column; }
.hl-final-cta__primary, .hl-final-cta__secondary { width: 100%; justify-content: center; }
}

.hl-final-cta {
padding: 96px 0;
background: var(--hl-navy);
font-family: var(--hl-font-sans);
text-align: center;
position: relative;   /* NEW — establishes containing block for the glow */
overflow: hidden;      /* NEW — clips the bleed cleanly at the section edge */
}

/* NEW — decorative bulb watermark, bottom-right bleed */
.hl-final-cta__glow {
position: absolute;
right: -6%;
bottom: -18%;
width: 42%;
max-width: 480px;
aspect-ratio: 370 / 500; /* native art ratio — keeps it from stretching */
background-image: url('/wp-content/uploads/2026/07/cta-bulb-watermark.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
z-index: 0;
}

.hl-final-cta__inner {
max-width: 800px;
margin: 0 auto;
padding: 0 32px;
position: relative;   /* NEW */
z-index: 1;            /* NEW — sits above the glow */
}

@media (max-width: 767px) {
.hl-final-cta__glow {
  width: 60%;
  right: -14%;
  bottom: -8%;
}
}\n}.elementor .e-9f36ee4-82e76a0{padding:0px;margin:0px;flex-direction:column;}.elementor .e-184fb05-364095b{padding:0px;margin:0px;flex-direction:column;}