/* ============================ GC — Lead Form (reusable global component) ============================
   Home-parity lead-form section: a translucent slate info card overlapping the left edge of a light
   form card, over a navy photo background. Used on the Home page (#2226) and above the footer on the
   service-category template (#2582) — the SAME component, so this stylesheet loads on both (see
   inc/leadform.php). All content is dynamic from the "GC — Lead Form" ACF group (Global Components).
   Brand: navy #170D3D, slate #354D70, teal #0AA3D6. */

/* Elementor drops the overlay-opacity control when the overlay COLOR is a dynamic tag (it emits the
   color but not the opacity), so the translucency that lets the bg image / navy show through — as on
   Home — is restored here. The .gc-leadform* class sits on the same element as Elementor's overlay
   ::before, so this targets that pseudo. */
.gc-leadform::before{opacity:.94;}
.gc-leadform .gc-leadform__form::before{opacity:.84;}
.gc-leadform .gc-leadform__info::before{opacity:.5;}
.gc-leadform .gc-leadform__inner{position:relative;max-width:1140px;margin:0 auto;display:flex;flex-direction:row;align-items:center;padding:0 15px;}
/* LEFT — slate info card (30% col, offset from the left edge, overlapping the form by ~60px;
   overflow:hidden clips the overlay ::before to the 20px radius — the box-shadow is unaffected). */
.gc-leadform .gc-leadform__info{position:relative;z-index:2;flex:0 0 30%;margin-left:40px;margin-right:-60px;padding:40px;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.28);}
.gc-leadform__title .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:26px;line-height:1.25;color:#fff;margin:0 0 16px;}
.gc-leadform__desc,.gc-leadform__desc p{color:rgba(255,255,255,.9);font-size:16px;line-height:1.7;margin:0 0 20px;}
.gc-leadform__desc strong{color:#fff;font-weight:700;}
.gc-leadform__contacts{display:flex;flex-direction:column;gap:12px;}
.gc-leadform__contact .elementor-heading-title{position:relative;padding-left:30px;color:#fff;font-family:"Heebo",sans-serif;font-weight:500;font-size:16px;line-height:1.5;margin:0;word-break:break-word;}
/* Clickable mailto/tel links (added by leadform.js) inherit the card colour + accent on hover. */
.gc-leadform__contact .elementor-heading-title a{color:inherit;text-decoration:none;transition:color .2s ease;}
.gc-leadform__contact .elementor-heading-title a:hover{color:#0AA3D6;}
.gc-leadform__contact .elementor-heading-title::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;background:#0AA3D6;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;}
.gc-leadform__contact--email .elementor-heading-title::before{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 6L2 7'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 6L2 7'/></svg>");}
.gc-leadform__contact--phone .elementor-heading-title::before{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");}
/* RIGHT — light form card (bg image + white overlay via Elementor); extra left padding so the form
   fields clear the overlapping info card. */
.gc-leadform .gc-leadform__form{flex:1 1 auto;min-width:0;border-radius:20px;overflow:hidden;box-shadow:0 24px 70px rgba(17,17,51,.14);padding:50px 50px 50px 100px;}
.gc-leadform__ff{width:100%;position:relative;z-index:1;}
@media (max-width:880px){
	.gc-leadform .gc-leadform__inner{flex-direction:column;align-items:stretch;padding:0 16px;}
	.gc-leadform .gc-leadform__info{flex:1 1 auto;margin:0 16px -40px;padding:32px 28px 60px;}
	.gc-leadform .gc-leadform__form{flex:1 1 auto;padding:60px 28px 40px;}
	.gc-leadform__title .elementor-heading-title{font-size:24px;}
}

/* Eyebrow above the lead-form heading. It was hardcoded uppercase Elementor text; now that it comes
   from the lf_eyebrow field the stored value is normal case, so the uppercasing lives here. Nothing
   else about the heading changes, so the rendered result is identical to the hand-typed version. */
.gc-leadform__eyebrow .elementor-heading-title{text-transform:uppercase;}