.elementor .e-3a593bf{padding:0px;margin:-20px;flex-direction:column;.hl-section__eyebrow { margin: 0 0 16px !important; font-family: var(--hl-font-sans) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--hl-amber) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; }
.hl-section__heading { margin: 0 0 20px !important; font-family: var(--hl-font-sans) !important; font-size: 32px !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; color: var(--hl-navy) !important; }

.hl-page-hero { position: relative !important; overflow: hidden !important; display: flex !important; align-items: center !important; min-height: 38vh !important; font-family: var(--hl-font-sans) !important; }
.hl-page-hero__bg {
position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
width: 100% !important; height: 100% !important;
background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
z-index: 0 !important;
}
.hl-page-hero__bg--contact { background-image: url('https://h-lelectric.com/wp-content/uploads/2026/07/contact-hero.jpg') !important; }
.hl-page-hero__overlay {
position: absolute !important; inset: 0 !important;
background: linear-gradient(90deg, rgba(16,37,63,0.92) 0%, rgba(16,37,63,0.68) 55%, rgba(16,37,63,0.40) 100%) !important;
z-index: 1 !important;
}
.hl-page-hero__inner { position: relative !important; z-index: 2 !important; max-width: var(--hl-content-max) !important; margin: 0 auto !important; padding: 72px 32px !important; width: 100% !important; }
.hl-page-hero__eyebrow { margin: 0 0 16px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--hl-amber) !important; }
.hl-page-hero__heading { margin: 0 0 16px !important; max-width: 600px !important; font-size: 38px !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; color: var(--hl-white) !important; }
.hl-page-hero__subhead { margin: 0 0 24px !important; max-width: 520px !important; font-size: 17px !important; line-height: 1.55 !important; color: rgba(255,255,255,0.85) !important; }
@media (max-width: 767px) { .hl-page-hero__inner { padding: 56px 24px !important; } .hl-page-hero__heading { font-size: 27px !important; } }

[data-reveal-item] { opacity: 0 !important; transform: translateY(18px) !important; transition: opacity 0.6s ease, transform 0.6s ease !important; }
[data-reveal-item].is-visible { opacity: 1 !important; transform: translateY(0) !important; }

.hl-contact-hero { position: relative !important; overflow: hidden !important; }
.hl-final-cta__status { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 16px !important; border-radius: 999px !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.2) !important; font-size: 13px !important; font-weight: 600 !important; color: rgba(255,255,255,0.9) !important; }
.hl-final-cta__status-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #8BC53F !important; flex-shrink: 0 !important; }
.hl-final-cta__status.is-open .hl-final-cta__status-dot { animation: hlStatusPulse 2s ease-in-out infinite !important; }
.hl-final-cta__status.is-closed .hl-final-cta__status-dot { background: rgba(255,255,255,0.35) !important; }
@keyframes hlStatusPulse { 0%,100%{box-shadow:0 0 0 0 rgba(139,197,63,0.5);} 50%{box-shadow:0 0 0 6px rgba(139,197,63,0);} }

.hl-contact { padding: 96px 0 !important; background: var(--hl-white) !important; font-family: var(--hl-font-sans) !important; }
.hl-contact__details { margin: 28px 0 24px !important; display: flex !important; flex-direction: column !important; gap: 18px !important; }
.hl-contact__detail { display: flex !important; align-items: flex-start !important; gap: 14px !important; }
.hl-contact__icon {
display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important;
width: 38px !important; height: 38px !important; border-radius: 50% !important;
background: rgba(139,197,63,0.12) !important; color: #6FA82E !important; margin-top: 2px !important;
}
.hl-contact__detail dt { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--hl-fog) !important; margin-bottom: 4px !important; }
.hl-contact__detail dd { margin: 0 !important; font-size: 16px !important; color: var(--hl-charcoal) !important; line-height: 1.5 !important; }
.hl-contact__detail dd a { color: var(--hl-navy) !important; text-decoration: none !important; font-weight: 600 !important; transition: color 0.2s ease !important; }
.hl-contact__detail dd a:hover { color: #6FA82E !important; }
.hl-contact__map { aspect-ratio: 16/10 !important; border-radius: 10px !important; overflow: hidden !important; border: 1px solid var(--hl-mist) !important; margin-bottom: 20px !important; }
.hl-contact__map iframe { width: 100% !important; height: 100% !important; border: 0 !important; display: block !important; filter: grayscale(25%) !important; transition: filter 0.4s ease !important; }
.hl-contact__map:hover iframe { filter: grayscale(0%) !important; }
.hl-contact__note { font-size: 14px !important; color: var(--hl-slate) !important; }
.hl-contact__note a { color: var(--hl-amber) !important; font-weight: 600 !important; }

/* ============================================================
 WPFORMS — form 680, styled to match the old hl-cta-form.
 Apply the class "hl-contact__form-wrap" to the WPForms widget
 itself via Elementor's Advanced tab → CSS Classes.
 ============================================================ */
.hl-contact__form-wrap {
padding: 40px !important; background: var(--hl-cloud) !important;
border: 1px solid var(--hl-mist) !important; border-radius: 8px !important;
}
.hl-contact__form-wrap .wpforms-field-label {
font-size: 13px !important; font-weight: 600 !important; color: var(--hl-charcoal) !important; margin-bottom: 6px !important;
}
.hl-contact__form-wrap input[type="text"],
.hl-contact__form-wrap input[type="tel"],
.hl-contact__form-wrap input[type="email"],
.hl-contact__form-wrap select,
.hl-contact__form-wrap textarea {
width: 100% !important; padding: 12px 14px !important; background: var(--hl-white) !important;
border: 1px solid var(--hl-mist) !important; border-radius: 4px !important;
color: var(--hl-charcoal) !important; font-size: 15px !important; font-family: var(--hl-font-sans) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.hl-contact__form-wrap input:focus,
.hl-contact__form-wrap select:focus,
.hl-contact__form-wrap textarea:focus {
outline: none !important; border-color: #8BC53F !important; box-shadow: 0 0 0 3px rgba(139,197,63,0.15) !important;
}
.hl-contact__form-wrap .wpforms-field-checkbox label {
font-size: 13px !important; line-height: 1.5 !important; color: var(--hl-slate) !important;
}
.hl-contact__form-wrap .wpforms-field-checkbox a { color: var(--hl-amber-dark) !important; font-weight: 600 !important; }
.hl-contact__form-wrap .wpforms-submit {
display: inline-flex !important; align-items: center !important; padding: 16px 32px !important; margin-top: 8px !important;
background: var(--hl-amber) !important; color: var(--hl-navy) !important; font-size: 16px !important; font-weight: 700 !important;
border: none !important; border-radius: 4px !important; cursor: pointer !important;
transition: background 0.25s ease, box-shadow 0.25s ease !important;
}
.hl-contact__form-wrap .wpforms-submit:hover,
.hl-contact__form-wrap .wpforms-submit:focus-visible {
background: var(--hl-amber-dark) !important; box-shadow: 0 12px 28px rgba(212,165,71,0.3) !important; outline: none !important;
}

@media (prefers-reduced-motion: reduce) {
[data-reveal-item], .hl-final-cta__status-dot, .hl-contact__map iframe, .hl-contact__detail dd a, .hl-contact__form-wrap .wpforms-submit {
  transition: none !important; animation: none !important;
}
}
@media (max-width: 767px) {
.hl-contact__form-wrap { padding: 24px !important; }
}\n}.elementor .e-3c61224-269f68b{padding-block-end:20px;padding-inline-start:200px;padding-inline-end:200px;margin:0px;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(1, 1fr);}.elementor .e-0d54b25-1b5f0ef{padding:0px;margin:0px;flex-direction:column;.hl-section__eyebrow { margin: 0 0 16px !important; font-family: var(--hl-font-sans) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--hl-amber) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; }
.hl-section__heading { margin: 0 0 20px !important; font-family: var(--hl-font-sans) !important; font-size: 32px !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; color: var(--hl-navy) !important; }

.hl-page-hero { position: relative !important; overflow: hidden !important; display: flex !important; align-items: center !important; min-height: 38vh !important; font-family: var(--hl-font-sans) !important; }
.hl-page-hero__bg {
position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
width: 100% !important; height: 100% !important;
background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
z-index: 0 !important;
}
.hl-page-hero__bg--contact { background-image: url('https://h-lelectric.com/wp-content/uploads/2026/07/contact-hero.jpg') !important; }
.hl-page-hero__overlay {
position: absolute !important; inset: 0 !important;
background: linear-gradient(90deg, rgba(16,37,63,0.92) 0%, rgba(16,37,63,0.68) 55%, rgba(16,37,63,0.40) 100%) !important;
z-index: 1 !important;
}
.hl-page-hero__inner { position: relative !important; z-index: 2 !important; max-width: var(--hl-content-max) !important; margin: 0 auto !important; padding: 72px 32px !important; width: 100% !important; }
.hl-page-hero__eyebrow { margin: 0 0 16px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--hl-amber) !important; }
.hl-page-hero__heading { margin: 0 0 16px !important; max-width: 600px !important; font-size: 38px !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; color: var(--hl-white) !important; }
.hl-page-hero__subhead { margin: 0 0 24px !important; max-width: 520px !important; font-size: 17px !important; line-height: 1.55 !important; color: rgba(255,255,255,0.85) !important; }
@media (max-width: 767px) { .hl-page-hero__inner { padding: 56px 24px !important; } .hl-page-hero__heading { font-size: 27px !important; } }

[data-reveal-item] { opacity: 0 !important; transform: translateY(18px) !important; transition: opacity 0.6s ease, transform 0.6s ease !important; }
[data-reveal-item].is-visible { opacity: 1 !important; transform: translateY(0) !important; }

.hl-contact-hero { position: relative !important; overflow: hidden !important; }
.hl-final-cta__status { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 16px !important; border-radius: 999px !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.2) !important; font-size: 13px !important; font-weight: 600 !important; color: rgba(255,255,255,0.9) !important; }
.hl-final-cta__status-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #8BC53F !important; flex-shrink: 0 !important; }
.hl-final-cta__status.is-open .hl-final-cta__status-dot { animation: hlStatusPulse 2s ease-in-out infinite !important; }
.hl-final-cta__status.is-closed .hl-final-cta__status-dot { background: rgba(255,255,255,0.35) !important; }
@keyframes hlStatusPulse { 0%,100%{box-shadow:0 0 0 0 rgba(139,197,63,0.5);} 50%{box-shadow:0 0 0 6px rgba(139,197,63,0);} }

.hl-contact { padding: 96px 0 !important; background: var(--hl-white) !important; font-family: var(--hl-font-sans) !important; }
.hl-contact__details { margin: 28px 0 24px !important; display: flex !important; flex-direction: column !important; gap: 18px !important; }
.hl-contact__detail { display: flex !important; align-items: flex-start !important; gap: 14px !important; }
.hl-contact__icon {
display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important;
width: 38px !important; height: 38px !important; border-radius: 50% !important;
background: rgba(139,197,63,0.12) !important; color: #6FA82E !important; margin-top: 2px !important;
}
.hl-contact__detail dt { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--hl-fog) !important; margin-bottom: 4px !important; }
.hl-contact__detail dd { margin: 0 !important; font-size: 16px !important; color: var(--hl-charcoal) !important; line-height: 1.5 !important; }
.hl-contact__detail dd a { color: var(--hl-navy) !important; text-decoration: none !important; font-weight: 600 !important; transition: color 0.2s ease !important; }
.hl-contact__detail dd a:hover { color: #6FA82E !important; }
.hl-contact__map { aspect-ratio: 16/10 !important; border-radius: 10px !important; overflow: hidden !important; border: 1px solid var(--hl-mist) !important; margin-bottom: 20px !important; }
.hl-contact__map iframe { width: 100% !important; height: 100% !important; border: 0 !important; display: block !important; filter: grayscale(25%) !important; transition: filter 0.4s ease !important; }
.hl-contact__map:hover iframe { filter: grayscale(0%) !important; }
.hl-contact__note { font-size: 14px !important; color: var(--hl-slate) !important; }
.hl-contact__note a { color: var(--hl-amber) !important; font-weight: 600 !important; }

/* ============================================================
 WPFORMS — form 680, styled to match the old hl-cta-form.
 Apply the class "hl-contact__form-wrap" to the WPForms widget
 itself via Elementor's Advanced tab → CSS Classes.
 ============================================================ */
.hl-contact__form-wrap {
padding: 40px !important; background: var(--hl-cloud) !important;
border: 1px solid var(--hl-mist) !important; border-radius: 8px !important;
}
.hl-contact__form-wrap .wpforms-field-label {
font-size: 13px !important; font-weight: 600 !important; color: var(--hl-charcoal) !important; margin-bottom: 6px !important;
}
.hl-contact__form-wrap input[type="text"],
.hl-contact__form-wrap input[type="tel"],
.hl-contact__form-wrap input[type="email"],
.hl-contact__form-wrap select,
.hl-contact__form-wrap textarea {
width: 100% !important; padding: 12px 14px !important; background: var(--hl-white) !important;
border: 1px solid var(--hl-mist) !important; border-radius: 4px !important;
color: var(--hl-charcoal) !important; font-size: 15px !important; font-family: var(--hl-font-sans) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.hl-contact__form-wrap input:focus,
.hl-contact__form-wrap select:focus,
.hl-contact__form-wrap textarea:focus {
outline: none !important; border-color: #8BC53F !important; box-shadow: 0 0 0 3px rgba(139,197,63,0.15) !important;
}
.hl-contact__form-wrap .wpforms-field-checkbox label {
font-size: 13px !important; line-height: 1.5 !important; color: var(--hl-slate) !important;
}
.hl-contact__form-wrap .wpforms-field-checkbox a { color: var(--hl-amber-dark) !important; font-weight: 600 !important; }
.hl-contact__form-wrap .wpforms-submit {
display: inline-flex !important; align-items: center !important; padding: 16px 32px !important; margin-top: 8px !important;
background: var(--hl-amber) !important; color: var(--hl-navy) !important; font-size: 16px !important; font-weight: 700 !important;
border: none !important; border-radius: 4px !important; cursor: pointer !important;
transition: background 0.25s ease, box-shadow 0.25s ease !important;
}
.hl-contact__form-wrap .wpforms-submit:hover,
.hl-contact__form-wrap .wpforms-submit:focus-visible {
background: var(--hl-amber-dark) !important; box-shadow: 0 12px 28px rgba(212,165,71,0.3) !important; outline: none !important;
}

@media (prefers-reduced-motion: reduce) {
[data-reveal-item], .hl-final-cta__status-dot, .hl-contact__map iframe, .hl-contact__detail dd a, .hl-contact__form-wrap .wpforms-submit {
  transition: none !important; animation: none !important;
}
}
@media (max-width: 767px) {
.hl-contact__form-wrap { padding: 24px !important; }
}\n}