.elementor-kit-5{--e-global-color-primary:#1D3D76;--e-global-color-secondary:#FC6210;--e-global-color-text:#414141;--e-global-color-accent:#121212;--e-global-color-primary_light:#2A5499;--e-global-color-primary_dark:#132A54;--e-global-color-accent_light:#FF8540;--e-global-color-bg_alt:#F5F5F5;--e-global-color-text_white:#FFFFFF;--e-global-color-text_invert:#E7E7E7;--e-global-color-border:#E0E0E0;--e-global-typography-primary-font-family:"Source Sans Pro";--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.1em;--e-global-typography-primary-letter-spacing:-2px;--e-global-typography-secondary-font-family:"Source Sans Pro";--e-global-typography-secondary-font-size:24px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-text-font-family:"Source Sans Pro";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Source Sans Pro";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:10px;--e-global-typography-h1-font-family:"Source Sans Pro";--e-global-typography-h1-font-size:54px;--e-global-typography-h1-font-weight:600;--e-global-typography-h1-line-height:1.1em;--e-global-typography-h1-letter-spacing:-2px;--e-global-typography-h2-font-family:"Source Sans Pro";--e-global-typography-h2-font-size:48px;--e-global-typography-h2-font-weight:600;--e-global-typography-h2-line-height:1.1em;--e-global-typography-h2-letter-spacing:-2px;--e-global-typography-h4-font-family:"Source Sans Pro";--e-global-typography-h4-font-size:32px;--e-global-typography-h4-font-weight:600;--e-global-typography-h4-line-height:1.2em;--e-global-typography-h4-letter-spacing:-2px;--e-global-typography-h6-font-family:"Source Sans Pro";--e-global-typography-h6-font-size:20px;--e-global-typography-h6-font-weight:600;--e-global-typography-h6-line-height:1.2em;--e-global-typography-h6-letter-spacing:-2px;--e-global-typography-text_small-font-family:"Source Sans Pro";--e-global-typography-text_small-font-size:16px;--e-global-typography-text_small-font-weight:400;--e-global-typography-text_small-line-height:1.5em;color:#414141;font-family:"Source Sans Pro", Sans-serif;font-size:18px;font-weight:400;line-height:1.5em;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:#1D3D76;font-family:"Source Sans Pro", Sans-serif;font-size:16px;font-weight:600;color:#FFFFFF;border-radius:0px 0px 0px 0px;padding:16px 32px 16px 32px;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* Form: placeholders only, no labels */ .elementor-field-group > label { display: none !important; } .elementor-field-group > .elementor-field-label { display: none !important; } /* ═══════════════ SECTION PADDING NORMALIZATION (desktop) ══════════════════ 8-point scale: section padding = 96px top/bottom for most sections. Residential + Commercial are a related pair, so they share a tighter 56/96 and 96/56 junction rather than a full 96/96 gap between them. */ @media (min-width: 768px) { .elementor-element-e362f8a, /* Site Work */ .elementor-element-ede82c0, /* Why Owners */ .elementor-element-e777aa8, /* Grade / Our Work Starts */ .elementor-element-e4c18b3, /* What to Expect */ .elementor-element-e996883, /* FAQ */ .elementor-element-e537822, /* Map */ .elementor-element-e4412f0 { /* Talk Through */ padding-top: 96px !important; padding-bottom: 96px !important; } /* Residential + Commercial pair: 96 outside, 56 on the shared edge */ .elementor-element-e0f0713 { padding-top: 96px !important; padding-bottom: 56px !important; } .elementor-element-e1eaa17 { padding-top: 56px !important; padding-bottom: 96px !important; } /* Hero: content centered, 96 below */ .elementor-element-e5ce8ed { padding-bottom: 96px !important; } } /* Mobile: looser vertical padding isn't needed — scale down */ @media (max-width: 767px) { .elementor-element-e362f8a, .elementor-element-ede82c0, .elementor-element-e777aa8, .elementor-element-e4c18b3, .elementor-element-e996883, .elementor-element-e537822, .elementor-element-e4412f0, .elementor-element-e0f0713, .elementor-element-e1eaa17 { padding-top: 56px !important; padding-bottom: 56px !important; } } /* ═══════════════ HEADER ════════════════════════════════════════════════════ */ /* Phone pill: true full-height flush to edge (no white strip below). The -1px margin-bottom closes a persistent 1px subpixel gap between the flex container and its button child that survives align-self: stretch. */ .elementor-element-ed8d611 { align-items: stretch !important; } .elementor-element-e1cd706 { align-self: stretch !important; min-height: 100% !important; display: flex !important; margin: 0 0 -1px 0 !important; } .elementor-element-e1cd706 > .elementor-widget-container { display: flex; width: 100%; height: 100%; } .elementor-element-e1cd706 .elementor-button-wrapper { display: flex; width: 100%; height: 100%; flex: 1; } .elementor-element-e1cd706 .elementor-button { height: 100% !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 0 !important; margin: 0 !important; } /* Generic header button rules (legacy) */ header .elementor-widget-button { align-self: stretch !important; display: flex; } header .elementor-widget-button .elementor-button { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } /* Nav menu: vertically centered in header */ .elementor-12 .elementor-element.elementor-element-e6b0d99 { align-self: center !important; } /* ═══════════════ HERO ══════════════════════════════════════════════════════ */ .elementor-element-e5ce8ed { min-height: 100vh !important; height: 100vh !important; } /* ═══════════════ FAQ ACCORDION ═════════════════════════════════════════════ */ .elementor-widget-accordion .elementor-accordion-icon { font-size: 10px !important; } .elementor-widget-accordion .elementor-accordion-title { letter-spacing: 0 !important; } .elementor-widget-accordion .elementor-accordion-item { border: none !important; border-bottom: 1px solid rgba(255,255,255,0.15) !important; } .elementor-widget-accordion .elementor-accordion-item:last-child { border-bottom: none !important; } /* Tighter gap between "Drainage and Excavation FAQ" heading and the accordion items */ .elementor-element-ef0e2d4 { row-gap: 32px !important; } /* ═══════════════ SERVICE CARD IMAGES + STARS TEXTURE ══════════════════════ */ .elementor-widget-image img { object-fit: cover; } .elementor-element-e0f0713, .elementor-element-e996883, .elementor-element-e4412f0 { background: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px) 0 0 / 24px 24px, #242F6D !important; } /* VIEW MAP h6 stays on one line */ .elementor-element-e32d61a h6, .elementor-element-e601119 h6, .elementor-element-ea5b23d h6, .elementor-element-e6ad86e h6, .elementor-element-eec0d19 h6, .elementor-element-e4c80ed h6 { white-space: nowrap; font-size: 13px !important; letter-spacing: 0.05em; } /* ═══════════════ RESIDENTIAL CAROUSEL (desktop, drag+arrows) ══════════════ */ @media (min-width: 768px) { /* "Residential Services" heading: single line */ .elementor-element-eaa76f6 { flex: 0 0 auto !important; } .elementor-element-eaa76f6 .elementor-heading-title, .elementor-element-eaa76f6 h1, .elementor-element-eaa76f6 h2, .elementor-element-eaa76f6 h3, .elementor-element-eaa76f6 h4 { white-space: nowrap; } /* Tighten internal gaps in the residential section. Note: Elementor "boxed" containers wrap children in .e-con-inner — targeting the outer element has no effect because it only has one child. */ .elementor-element-ef92ef7 > .e-con-inner { row-gap: 30px !important; } /* Track: native horizontal scroll with snap. Mouse-drag handled by JS. */ .elementor-element-eb9deea { overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scroll-behavior: smooth; flex-wrap: nowrap !important; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; cursor: grab; user-select: none; transform: none !important; } .elementor-element-eb9deea::-webkit-scrollbar { display: none; height: 0; } .elementor-element-eb9deea.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } /* Cards: fixed 410px, snap to start */ .elementor-element-eb9deea > .elementor-element { flex: 0 0 410px !important; width: 410px !important; min-width: 410px !important; scroll-snap-align: start; } /* Arrow buttons */ .elementor-element-e607ba1, .elementor-element-eb5cd14 { cursor: pointer; transition: opacity 0.2s ease, transform 0.15s ease; } .elementor-element-e607ba1:hover, .elementor-element-eb5cd14:hover { transform: translateY(-1px); } .ae-carousel-arrow-disabled { opacity: 0.35 !important; pointer-events: none !important; } } /* ═══════════════ CARD IMAGES: EDGE-TO-EDGE (residential + commercial) ══════ */ .elementor-element-eb9deea > .elementor-element, .elementor-element-eb7ceb9 > .elementor-element { align-items: stretch !important; } .elementor-element-eb9deea .elementor-widget-image, .elementor-element-eb7ceb9 .elementor-widget-image, .elementor-element-ea6b3a3, .elementor-element-e7e9725 { width: 100% !important; max-width: 100% !important; align-self: stretch !important; } .elementor-element-eb9deea .elementor-widget-image > .elementor-widget-container, .elementor-element-eb7ceb9 .elementor-widget-image > .elementor-widget-container, .elementor-element-ea6b3a3 > .elementor-widget-container, .elementor-element-e7e9725 > .elementor-widget-container { padding: 0 !important; margin: 0 !important; } .elementor-element-ea6b3a3 img, .elementor-element-e7e9725 img, .elementor-element-eb9deea .elementor-widget-image img { width: 100% !important; max-width: 100% !important; height: 313px !important; display: block !important; object-fit: cover !important; object-position: center !important; } /* ═══════════════ MAP: CITY TABS + IFRAME ══════════════════════════════════ */ /* Force map image widget to stretch full column width (same fix as cards) */ .elementor-element-eba6fb1 .elementor-widget-image, .elementor-element-e16f0df { width: 100% !important; max-width: 100% !important; align-self: stretch !important; } .elementor-element-eba6fb1 { min-height: 500px; position: relative; align-items: stretch !important; } .elementor-element-eba6fb1 iframe.ae-map-iframe { width: 100% !important; max-width: 100% !important; height: 500px; min-height: 500px; border: 0; display: block; border-radius: 4px; } .elementor-element-eba6fb1 .elementor-widget-image > .elementor-widget-container { padding: 0 !important; width: 100%; } /* City rows: clickable */ .elementor-element-e14bf3a, .elementor-element-e814ee9, .elementor-element-e5917ae, .elementor-element-e50bd4e, .elementor-element-edb4b09, .elementor-element-ef021d2 { cursor: pointer; transition: all 0.2s ease; } /* Default city name: muted gray */ .elementor-element-e81a35e .elementor-heading-title, .elementor-element-e2c4091 .elementor-heading-title, .elementor-element-e57cddc .elementor-heading-title, .elementor-element-efcd753 .elementor-heading-title, .elementor-element-e30a2e9 .elementor-heading-title, .elementor-element-e31cd57 .elementor-heading-title { color: #9ca3af !important; font-weight: 400 !important; transition: color 0.2s ease, font-weight 0.2s ease; } /* Active city name: bold black */ .ae-city-active .elementor-element-e81a35e .elementor-heading-title, .ae-city-active .elementor-element-e2c4091 .elementor-heading-title, .ae-city-active .elementor-element-e57cddc .elementor-heading-title, .ae-city-active .elementor-element-efcd753 .elementor-heading-title, .ae-city-active .elementor-element-e30a2e9 .elementor-heading-title, .ae-city-active .elementor-element-e31cd57 .elementor-heading-title { color: #111 !important; font-weight: 700 !important; } /* ═══════════════ MOBILE (≤767px) ═══════════════════════════════════════════ */ @media (max-width: 767px) { .elementor-12 .elementor-element.elementor-element-e1cd706 { display: none !important; } .elementor-element-e5ce8ed { min-height: 100dvh !important; height: auto !important; } .elementor-element-e5ce8ed > .e-con-inner { padding: 100px 24px 60px !important; justify-content: flex-start !important; align-items: flex-start !important; } .elementor-element-e19daed h1 { font-size: 36px !important; line-height: 1.15 !important; letter-spacing: -0.5px !important; } .elementor-element-efc0f10 { gap: 16px !important; width: 100% !important; max-width: 100% !important; } .elementor-element-e5dc1fc { flex-direction: column !important; width: 100% !important; } .elementor-element-e5dc1fc .elementor-widget-button { width: 100% !important; } .elementor-element-e5dc1fc .elementor-button { width: 100% !important; text-align: center !important; } .e-parent { padding-left: 20px !important; padding-right: 20px !important; } h2 { font-size: clamp(22px, 6vw, 30px) !important; } .elementor-element-ee9c505 { flex-direction: column !important; } .elementor-element-e257044 { min-height: auto !important; width: 100% !important; } .elementor-element-e726651 { width: 100% !important; } .elementor-element-e3ae431 { margin: 0 !important; width: 100% !important; } .elementor-element-efcf9ab { flex-direction: column !important; } .elementor-element-eefc990 { flex-direction: column !important; } .elementor-element-e9d7993 { flex-direction: column !important; } .elementor-element-e9f907d { flex-direction: column !important; } .elementor-element-e4830cd { flex-direction: column !important; } .elementor-element-e283929 { width: 100% !important; } /* Residential cards: native horizontal scroll on mobile too */ .elementor-element-eb9deea { flex-direction: row !important; overflow-x: auto !important; flex-wrap: nowrap !important; gap: 16px !important; padding-bottom: 12px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; transform: none !important; } .elementor-element-eb9deea::-webkit-scrollbar { display: none; } .elementor-element-eb9deea > .elementor-element { min-width: 280px !important; width: 280px !important; flex-shrink: 0 !important; } .elementor-element-eb9deea .elementor-widget-image img { height: 200px !important; } /* Hide arrows on mobile */ .elementor-element-e6b25f6 { display: none !important; } .elementor-element-eb7ceb9 { flex-direction: column !important; } .elementor-element-eb7ceb9 > .elementor-element { width: 100% !important; } .elementor-element-ea6b3a3 img, .elementor-element-e7e9725 img { height: 220px !important; } .elementor-element-e190a13 { flex-direction: column !important; } .elementor-element-eb3e2ba { width: 100% !important; } .elementor-element-ee9d1f9 { width: 100% !important; } .elementor-element-e2feedc { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; } .elementor-element-e6b7bd3 { flex-direction: column !important; } .elementor-element-e80a240 { width: 100% !important; } .elementor-element-e3a0766 { width: 100% !important; } .elementor-element-e943d63 img { width: 100% !important; height: auto !important; } .elementor-element-eb02ba9 { flex-direction: column !important; } .elementor-element-e32638b { width: 100% !important; } .elementor-element-eba6fb1 { width: 100% !important; min-height: 380px !important; } .elementor-element-eba6fb1 iframe.ae-map-iframe { height: 380px !important; min-height: 380px !important; } .elementor-element-eba6fb1 img { width: 100% !important; height: auto !important; } .elementor-element-efdcc95 { flex-direction: column !important; } .elementor-element-eac4bfe { width: 100% !important; } .elementor-element-ee001a2 { width: 100% !important; } .elementor-element-e5fa020 { flex-direction: column !important; width: 100% !important; } .elementor-element-e5fa020 .elementor-widget-button { width: 100% !important; } .elementor-element-e5fa020 .elementor-button { width: 100% !important; } /* FAQ mobile gap */ .elementor-element-ef0e2d4 { row-gap: 24px !important; } } /* ═══════════════════════════════════════════════════════════════════════════ */ /* What To Expect: left column does not stretch — image stays at fixed ratio */ .elementor-element-e80a240 { align-self: flex-start !important; } .elementor-element-e943d63 .elementor-widget-container { max-height: 440px; overflow: hidden; } .elementor-element-e943d63 img { width: 100% !important; height: 440px !important; object-fit: cover !important; object-position: center top !important; } /* ROUND3_START */ /* ═══════════════ HERO: content anchored to bottom ══════════════════════════ */ @media (min-width: 768px) { .elementor-element-e5ce8ed, .elementor-element-e5ce8ed > .e-con-inner { justify-content: flex-end !important; } } /* ═══════════════ SITE WORK: big portrait + small overlapping square ════════ */ @media (min-width: 768px) { .elementor-element-e257044 { position: relative !important; min-height: 580px !important; width: 560px !important; max-width: 560px !important; } .elementor-element-e8d4d5a { width: 400px !important; max-width: 400px !important; } .elementor-element-e8d4d5a img { width: 400px !important; height: 560px !important; object-fit: cover !important; display: block !important; } .elementor-element-e3ae431 { position: absolute !important; top: 130px !important; right: 0 !important; width: 260px !important; max-width: 260px !important; z-index: 2; margin: 0 !important; } .elementor-element-e3ae431 img { width: 260px !important; height: 260px !important; object-fit: cover !important; display: block !important; } } /* ═══════════════ RESIDENTIAL CARDS: overlap into commercial section ════════ */ @media (min-width: 768px) { .elementor-element-e0f0713 { overflow: visible !important; } .elementor-element-eb9deea { margin-bottom: -240px !important; position: relative; z-index: 3; } .elementor-element-e1eaa17 { padding-top: 296px !important; } } /* ═══════════════ COMMERCIAL: title one line ════════════════════════════════ */ @media (min-width: 768px) { .elementor-element-e84743c { flex: 0 0 auto !important; } .elementor-element-e84743c .elementor-heading-title, .elementor-element-e84743c h1, .elementor-element-e84743c h2, .elementor-element-e84743c h3, .elementor-element-e84743c h4 { white-space: nowrap; } } /* ═══════════════ GRADE: tighten paragraph → thumbnails gap ═════════════════ */ .elementor-element-ee9d1f9 { row-gap: 32px !important; } .elementor-element-ee9d1f9 > .e-con-inner { row-gap: 32px !important; } /* ═══════════════ MAP: grayscale iframe ═════════════════════════════════════ */ .elementor-element-eba6fb1 iframe.ae-map-iframe { filter: grayscale(1) contrast(1.05) brightness(1.02); } /* ROUND3_END */ /* ROUND4_START */ /* ═══════════════ BACKGROUND IMAGES (per Figma spec) ═══════════════════════ Figma spec for these three dark-navy sections: - Residential (3295:51): solid #242F6D + flag img @ 5% STRETCH - FAQ (3295:15): solid #242F6D + stone img @ 7% FILL - Talk Through (3295:358): solid #242F6D + stone @ 7% + flag @ 7% STRETCH Using ::before/::after pseudo-elements because each layer needs its own opacity (CSS `opacity` on the parent would affect content too). */ .elementor-element-e0f0713, .elementor-element-e996883, .elementor-element-e4412f0 { background: #242F6D !important; position: relative; } /* Residential: flag on the right (matches source image orientation) */ .elementor-element-e0f0713::before { content: ""; position: absolute; inset: 0; background: url('/wp-content/uploads/2026/04/bg-flag.jpg') center center / 100% 100% no-repeat; opacity: 0.05; pointer-events: none; z-index: 0; } .elementor-element-e0f0713 > * { position: relative; z-index: 1; } /* The carousel track has its own z-index:3 for overlap — ensure it's above the bg */ .elementor-element-eb9deea { z-index: 3 !important; } /* FAQ: stone texture */ .elementor-element-e996883::before { content: ""; position: absolute; inset: 0; background: url('/wp-content/uploads/2026/04/bg-stone.jpg') center / cover no-repeat; opacity: 0.07; pointer-events: none; z-index: 0; } .elementor-element-e996883 > * { position: relative; z-index: 1; } /* Talk Through: stone + flag */ .elementor-element-e4412f0::before { content: ""; position: absolute; inset: 0; background: url('/wp-content/uploads/2026/04/bg-stone.jpg') center / cover no-repeat; opacity: 0.07; pointer-events: none; z-index: 0; } .elementor-element-e4412f0::after { content: ""; position: absolute; inset: 0; background: url('/wp-content/uploads/2026/04/bg-flag.jpg') center / 100% 100% no-repeat; opacity: 0.07; pointer-events: none; z-index: 1; transform: scaleX(-1); } .elementor-element-e4412f0 > * { position: relative; z-index: 2; } /* ═══════════════ CAROUSEL: track extends to viewport right edge ═══════════ Elementor's "boxed" inner wrapper centers content at max-width (1280/1376) regardless of viewport, creating an awkward navy gutter to the right of the cards on wide screens. Break out the inner to match the full outer width so the track always runs to the right edge. Heading + sub-head row stay bounded separately to keep them readable at wide viewports. */ @media (min-width: 768px) { .elementor-element-ef92ef7 > .e-con-inner { max-width: none !important; width: 100% !important; margin: 0 !important; } /* Keep the title + sub-heading row bounded to a readable width */ .elementor-element-e79b21e, .elementor-element-ec920be { max-width: 1312px !important; } } /* ROUND4_END */ /* ROUND5_START */ /* ═══════════════ TYPOGRAPHY HIERARCHY ═════════════════════════════════════ H1: 72px (hero) H2: 54px (section titles) — unified across FAQ, Map, etc. H2*: 64px (Talk Through — deliberately larger as the final CTA heading) H3: 32px (form eyebrow "Let's get in touch") H3*: 24px (subsection: "Residential Services", "Commercial Services") H3*: 20px (card titles) — already brand-red uppercase H4: 16px (eyebrows "WHY IT WORKS", "STEP 01") */ /* Section H2s: normalize FAQ to match others (54px) */ .elementor-element-e0e81f6 .elementor-heading-title { font-size: 54px !important; line-height: 1.1 !important; } /* Subsection H3s — reduce so they don't visually dominate the H2 */ .elementor-element-eaa76f6 .elementor-heading-title, .elementor-element-e84743c .elementor-heading-title { font-size: 24px !important; line-height: 1.25 !important; letter-spacing: 0.01em; } /* Form eyebrow: reduce so hierarchy reads H2(64) > H3(32), not H2 > H3(48) */ .elementor-element-e239614 .elementor-heading-title { font-size: 32px !important; line-height: 1.2 !important; } /* Section H2 line-height — allow two-line wraps to breathe */ .elementor-element-e8ca8d3 .elementor-heading-title, .elementor-element-ea90353 .elementor-heading-title, .elementor-element-e894fd0 .elementor-heading-title, .elementor-element-efc571e .elementor-heading-title, .elementor-element-ebd01ee .elementor-heading-title, .elementor-element-eb397ef .elementor-heading-title { line-height: 1.12 !important; } /* ═══════════════ CARD INTERIOR SPACING ═════════════════════════════════════ Text columns inside each card had `padding: 0 24px` — zero vertical padding. Add breathing room above the title and keep text off the card edges. */ /* Residential cards (5) — text column ids */ .elementor-element-e181ed9, /* card 1 */ .elementor-element-e95ba1d, /* card 2 */ .elementor-element-e18374a, /* card 3 */ .elementor-element-ed77093, /* card 4 */ .elementor-element-ebaee39, /* card 5 */ /* Commercial cards (2) */ .elementor-element-e8400e6, .elementor-element-eb51340 { padding-top: 28px !important; padding-bottom: 4px !important; row-gap: 16px !important; } /* Card bottom padding — a little more room under the last line */ .elementor-element-e1c04b0, .elementor-element-e9957fb, .elementor-element-e8b3551, .elementor-element-e7989f6, .elementor-element-eaa1d7f, .elementor-element-e8c85b7, .elementor-element-e41232b { padding-bottom: 36px !important; } /* Card image → text gap: reduce parent flex-gap from 32 to 0 since text column now carries its own top padding (prevents double-spacing). */ .elementor-element-e1c04b0, .elementor-element-e9957fb, .elementor-element-e8b3551, .elementor-element-e7989f6, .elementor-element-eaa1d7f, .elementor-element-e8c85b7, .elementor-element-e41232b { row-gap: 0 !important; } /* Card title (red uppercase) — allow 2 lines to breathe */ .elementor-element-eb9deea .elementor-widget-heading .elementor-heading-title, .elementor-element-eb7ceb9 .elementor-widget-heading .elementor-heading-title { line-height: 1.25 !important; } /* ═══════════════ SECTION CONTENT GAPS ═════════════════════════════════════ */ /* What to Expect H2 → paragraph: ensure breathing room */ .elementor-element-e3a0766 > .e-con-inner, .elementor-element-e3a0766 { row-gap: 24px !important; } /* FAQ heading → accordion: already set to 32, confirm in this pass */ .elementor-element-ef0e2d4 > .e-con-inner, .elementor-element-ef0e2d4 { row-gap: 40px !important; } /* Map section title → cities/map row */ .elementor-element-ec7bf69 > .e-con-inner, .elementor-element-ec7bf69 { row-gap: 48px !important; } /* Talk Through heading → button row */ .elementor-element-eac4bfe > .e-con-inner, .elementor-element-eac4bfe { row-gap: 40px !important; } /* ═══════════════ FORM FIELD SPACING ════════════════════════════════════════ */ /* "Let's get in touch" form — ensure fields have vertical rhythm */ .elementor-element-ee001a2 .elementor-field-group { margin-bottom: 8px !important; } /* ROUND5_END */ /* ROUND6_START */ /* ═══════════════ MOBILE SPECIFIC (max-width 767px) ══════════════════════════ */ @media (max-width: 767px) { /* --- 1. HEADER: logo left, hamburger right, one row ----------------- */ .elementor-element-ed8d611 { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; padding: 12px 20px !important; min-height: 64px; } .elementor-element-e6168c1 { width: auto !important; max-width: 180px !important; align-self: center !important; flex: 0 0 auto !important; padding: 0 !important; } .elementor-element-e6b0d99 { align-self: center !important; flex: 0 0 auto !important; width: auto !important; } /* --- 2. HERO: vertically center content ---------------------------- */ .elementor-element-e5ce8ed { min-height: 100dvh !important; height: auto !important; } .elementor-element-e5ce8ed > .e-con-inner { padding: 80px 24px !important; justify-content: center !important; align-items: flex-start !important; } /* --- 3. SECTION H2s: smaller + spacing ----------------------------- */ h2 { font-size: 32px !important; line-height: 1.15 !important; } .elementor-element-e19daed h1 { font-size: 36px !important; line-height: 1.15 !important; letter-spacing: -0.5px !important; } /* All section H2s pinned the same size on mobile */ .elementor-element-e8ca8d3 .elementor-heading-title, .elementor-element-ea90353 .elementor-heading-title, .elementor-element-e894fd0 .elementor-heading-title, .elementor-element-efc571e .elementor-heading-title, .elementor-element-ebd01ee .elementor-heading-title, .elementor-element-e0e81f6 .elementor-heading-title, .elementor-element-eb397ef .elementor-heading-title, .elementor-element-ef34457 .elementor-heading-title { font-size: 32px !important; line-height: 1.15 !important; } /* --- Section vertical padding normalized to 56px mobile ---------- */ .elementor-element-e362f8a, .elementor-element-ede82c0, .elementor-element-e777aa8, .elementor-element-e4c18b3, .elementor-element-e996883, .elementor-element-e537822, .elementor-element-e4412f0, .elementor-element-e0f0713, .elementor-element-e1eaa17 { padding-top: 56px !important; padding-bottom: 56px !important; } /* Hero bottom padding matches */ .elementor-element-e5ce8ed { padding-bottom: 56px !important; } /* --- 3b. HEADING TOP PADDING (user-flagged against-image headings) - */ /* Site Work text column — heading sits below stacked images */ .elementor-element-e726651 > .e-con-inner, .elementor-element-e726651 { padding-top: 32px !important; row-gap: 16px !important; } /* Why Owners heading block — need bottom padding before features */ .elementor-element-eee8c6f > .e-con-inner, .elementor-element-eee8c6f { row-gap: 48px !important; } .elementor-element-efcf9ab > .e-con-inner, .elementor-element-efcf9ab { row-gap: 16px !important; } /* Grade text column — "WHY IT WORKS" + heading below image */ .elementor-element-ee9d1f9 > .e-con-inner, .elementor-element-ee9d1f9 { padding-top: 32px !important; row-gap: 24px !important; } /* Heading-to-text in Grade */ .elementor-element-eecd461 > .e-con-inner, .elementor-element-eecd461 { row-gap: 12px !important; } /* --- 4. WHY OWNERS feature spacing consistency -------------------- */ /* Between 2 rows of features */ .elementor-element-e9d7993 > .e-con-inner, .elementor-element-e9d7993 { row-gap: 40px !important; } /* Within each row of features (stacked on mobile anyway) */ .elementor-element-e4830cd > .e-con-inner, .elementor-element-e4830cd, .elementor-element-e9f907d > .e-con-inner, .elementor-element-e9f907d { row-gap: 40px !important; } /* Within each feature: icon → heading → body, consistent 16px */ .elementor-element-e523f89 > .e-con-inner, .elementor-element-e523f89, .elementor-element-e26f347 > .e-con-inner, .elementor-element-e26f347, .elementor-element-e8372bd > .e-con-inner, .elementor-element-e8372bd, .elementor-element-e6600d5 > .e-con-inner, .elementor-element-e6600d5 { row-gap: 16px !important; } /* Text container inside feature (heading + body) */ .elementor-element-e5361ca, .elementor-element-ef22e92, .elementor-element-e5ca2ef, .elementor-element-e31e7b8 { row-gap: 12px !important; } /* --- 5 & 6. CARD TEXT: real left/right padding ------------------- */ /* Force 20px inset on card text columns on mobile */ .elementor-element-e181ed9, .elementor-element-e95ba1d, .elementor-element-e18374a, .elementor-element-ed77093, .elementor-element-ebaee39, .elementor-element-e8400e6, .elementor-element-eb51340 { padding: 20px !important; row-gap: 12px !important; } /* Carousel cards: smaller card on mobile, image shorter */ .elementor-element-eb9deea .elementor-widget-image img { height: 180px !important; } .elementor-element-ea6b3a3 img, .elementor-element-e7e9725 img { height: 220px !important; } /* Card bottom padding */ .elementor-element-e1c04b0, .elementor-element-e9957fb, .elementor-element-e8b3551, .elementor-element-e7989f6, .elementor-element-eaa1d7f, .elementor-element-e8c85b7, .elementor-element-e41232b { padding-bottom: 0 !important; } /* --- 8. GRADE THUMBNAILS: stack vertically, full width ---------- */ .elementor-element-e2feedc { flex-direction: column !important; gap: 16px !important; overflow: visible !important; } .elementor-element-e2feedc > .elementor-element { width: 100% !important; min-width: 0 !important; } .elementor-element-e2feedc .elementor-widget-image img { width: 100% !important; height: 220px !important; object-fit: cover !important; } /* --- 10. MAP MOBILE: hide right-side static map (accordion via JS) - */ .elementor-element-eba6fb1 { display: none !important; } /* Inline accordion map styling */ .ae-inline-map { width: 100%; height: 280px; margin: 0 0 16px 0; border-radius: 4px; overflow: hidden; } .ae-inline-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(1.05); } /* City rows tighter on mobile */ .elementor-element-e14bf3a, .elementor-element-e814ee9, .elementor-element-e5917ae, .elementor-element-e50bd4e, .elementor-element-edb4b09, .elementor-element-ef021d2 { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 14px 0 !important; } /* --- 11. TALK THROUGH: gap between buttons column and form --- */ .elementor-element-efdcc95 > .e-con-inner, .elementor-element-efdcc95 { row-gap: 40px !important; } /* Buttons column — consistent internal spacing */ .elementor-element-eac4bfe > .e-con-inner, .elementor-element-eac4bfe { row-gap: 24px !important; } /* Button row itself */ .elementor-element-e5fa020 { flex-direction: column !important; gap: 12px !important; } .elementor-element-e5fa020 .elementor-widget-button { width: 100% !important; } .elementor-element-e5fa020 .elementor-button { width: 100% !important; } /* "Let's get in touch!" + form gap */ .elementor-element-ee001a2 > .e-con-inner, .elementor-element-ee001a2 { row-gap: 20px !important; } /* Hero content column */ .elementor-element-efc0f10 > .e-con-inner, .elementor-element-efc0f10 { row-gap: 16px !important; } /* Hero buttons row */ .elementor-element-e5dc1fc { flex-direction: column !important; gap: 12px !important; } .elementor-element-e5dc1fc .elementor-widget-button { width: 100% !important; } .elementor-element-e5dc1fc .elementor-button { width: 100% !important; text-align: center !important; } /* Hide carousel arrows on mobile (swipe works natively) */ .elementor-element-e6b25f6 { display: none !important; } /* Site-work image column — stack two images vertically */ .elementor-element-e257044 { flex-direction: column !important; gap: 16px !important; } .elementor-element-e8d4d5a, .elementor-element-e3ae431 { position: static !important; width: 100% !important; top: auto !important; right: auto !important; } .elementor-element-e8d4d5a img, .elementor-element-e3ae431 img { width: 100% !important; height: 240px !important; object-fit: cover !important; } /* FAQ heading tightness */ .elementor-element-ef0e2d4 > .e-con-inner, .elementor-element-ef0e2d4 { row-gap: 24px !important; } } /* ROUND6_END */ /* ROUND7_START */ @media (max-width: 767px) { /* --- 4. HEADER LOGO: slightly smaller on mobile ---------------------- */ .elementor-element-e6168c1 { max-width: 140px !important; } .elementor-element-e6168c1 img { width: 140px !important; max-width: 140px !important; } /* --- 1. WHAT TO EXPECT: more gap under each icon ------------------- */ /* Each step is a container with icon col + text col. On mobile they stack to column — the gap between icon and the STEP label is the step container's row-gap. */ .elementor-element-e2865cb, .elementor-element-e4e3d7b, .elementor-element-e2ec8c7, .elementor-element-e3269de, .elementor-element-e7efde9 { row-gap: 20px !important; } .elementor-element-e2865cb > .e-con-inner, .elementor-element-e4e3d7b > .e-con-inner, .elementor-element-e2ec8c7 > .e-con-inner, .elementor-element-e3269de > .e-con-inner, .elementor-element-e7efde9 > .e-con-inner { row-gap: 20px !important; } /* Between steps — consistent spacing */ .elementor-element-e3a0766 > .e-con-inner, .elementor-element-e3a0766 { row-gap: 48px !important; } /* Icon container itself — give it a little extra breathing room */ .elementor-element-e72e364, .elementor-element-e79624e, .elementor-element-e1f073a, .elementor-element-ef3952c, .elementor-element-ea6a572 { padding-bottom: 4px !important; } /* --- 3. COMMERCIAL CARDS: vertical gap between the two ------------- */ /* Belt-and-suspenders alongside the flex_gap_mobile Elementor setting */ .elementor-element-eb7ceb9 { row-gap: 32px !important; } .elementor-element-eb7ceb9 > .e-con-inner { row-gap: 32px !important; } /* --- 2. FOOTER MOBILE: stack layout cleanly ------------------------ */ /* Footer row (logo + nav + socials) — stack vertically with gap */ .elementor-element-e9516a9 { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 20px !important; padding: 24px 20px !important; } /* Logo centered, slightly smaller */ .elementor-element-eb5faf8 { align-self: center !important; } .elementor-element-eb5faf8 img { max-width: 140px !important; width: 140px !important; } /* Nav menu: force links visible as inline list on mobile (widget is in "dropdown-tablet" mode by default — we want a flat wrapping list of text links in the footer regardless of its toggle state) */ .elementor-element-e636579 .elementor-menu-toggle { display: none !important; } .elementor-element-e636579 nav.elementor-nav-menu--main, .elementor-element-e636579 nav { display: block !important; visibility: visible !important; position: static !important; height: auto !important; width: auto !important; max-height: none !important; background: transparent !important; overflow: visible !important; } .elementor-element-e636579 ul.elementor-nav-menu, .elementor-element-e636579 nav ul { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 4px 16px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; background: transparent !important; height: auto !important; } .elementor-element-e636579 ul li, .elementor-element-e636579 ul li.menu-item { display: inline-block !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; } .elementor-element-e636579 ul li a, .elementor-element-e636579 ul li a.elementor-item { display: inline-block !important; padding: 4px 8px !important; font-size: 13px !important; line-height: 1.5 !important; color: #1D3D76 !important; border: 0 !important; background: transparent !important; width: auto !important; height: auto !important; white-space: nowrap !important; } .elementor-element-e636579 ul li a .sub-arrow { display: none !important; } /* Social icons: centered */ .elementor-element-e27b51e { align-self: center !important; } .elementor-element-e27b51e ul { justify-content: center !important; } /* Copyright row */ .elementor-element-ea23ed0 { padding: 16px 20px 24px !important; } .elementor-element-ea23ed0 .elementor-widget-text-editor { text-align: center !important; font-size: 12px !important; } /* Tighter footer overall */ .elementor-element-e4ed2b2 { padding: 0 !important; } } /* ═══════════════ TABLET (768-1024) sanity ═══════════════════════════════════ */ @media (min-width: 768px) and (max-width: 1024px) { /* Commercial cards row gap also applies in tablet portrait */ .elementor-element-eb7ceb9 { row-gap: 24px !important; } /* What to Expect: consistent gap between steps */ .elementor-element-e3a0766 > .e-con-inner, .elementor-element-e3a0766 { row-gap: 32px !important; } /* Footer nav inline on tablet too — same treatment as mobile */ .elementor-element-e636579 .elementor-menu-toggle { display: none !important; } .elementor-element-e636579 nav.elementor-nav-menu--main, .elementor-element-e636579 nav { display: block !important; visibility: visible !important; position: static !important; height: auto !important; width: auto !important; max-height: none !important; background: transparent !important; overflow: visible !important; } .elementor-element-e636579 ul.elementor-nav-menu, .elementor-element-e636579 nav ul { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 6px 20px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; background: transparent !important; height: auto !important; } .elementor-element-e636579 ul li, .elementor-element-e636579 ul li.menu-item { display: inline-block !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; } .elementor-element-e636579 ul li a, .elementor-element-e636579 ul li a.elementor-item { display: inline-block !important; padding: 4px 8px !important; font-size: 13px !important; line-height: 1.5 !important; color: #1D3D76 !important; border: 0 !important; background: transparent !important; width: auto !important; height: auto !important; white-space: nowrap !important; } .elementor-element-e636579 ul li a .sub-arrow { display: none !important; } /* Footer row: keep horizontal but ensure it wraps cleanly */ .elementor-element-e9516a9 { flex-wrap: wrap !important; gap: 20px !important; padding: 24px 32px !important; } /* Social icons: don't wrap */ .elementor-element-e27b51e ul { flex-wrap: nowrap !important; gap: 12px !important; } } /* ROUND7_END */ /* ROUND8_START */ @media (max-width: 767px) { /* Hide the duplicate dropdown nav — Elementor renders both the main horizontal nav AND a dropdown nav (for the hamburger). When we force both visible, every item appears twice. */ .elementor-element-e636579 nav.elementor-nav-menu--dropdown { display: none !important; } /* Footer nav menu: single column, one item per row */ .elementor-element-e636579 nav.elementor-nav-menu--main ul.elementor-nav-menu { flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; } .elementor-element-e636579 ul li { width: auto !important; } /* Footer row: tighter vertical rhythm — logo / nav / socials close together */ .elementor-element-e9516a9 { gap: 20px !important; padding: 28px 20px 16px !important; /* was 24 20 with bigger gap */ } /* Social icons row: less bottom gap */ .elementor-element-e27b51e { margin-top: 4px !important; margin-bottom: 0 !important; } /* Copyright row: tighter */ .elementor-element-ea23ed0 { padding: 10px 20px 16px !important; /* was 16 20 24 */ } } /* Tablet: keep horizontal nav row but tighten footer vertical spacing */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-element-e636579 nav.elementor-nav-menu--dropdown { display: none !important; } .elementor-element-e9516a9 { padding: 24px 32px !important; } .elementor-element-ea23ed0 { padding: 12px 32px 20px !important; } } /* ROUND8_END */ /* ROUND9_START */ /* ═══════════════ MOBILE (≤767px) ═════════════════════════════════════════ */ @media (max-width: 767px) { /* --- 5. HERO: symmetric padding so content visually centers ------- */ /* My earlier rule had padding: 80px 24px — then a later override changed it to 0 20px 56px, pushing content up. Restore symmetric top/bottom. */ .elementor-element-e5ce8ed { padding-top: 40px !important; padding-bottom: 40px !important; } /* --- 1. RESIDENTIAL CARDS: shorter --------------------------------- */ /* Image shorter */ .elementor-element-eb9deea .elementor-widget-image img { height: 150px !important; } /* Text column: slightly less padding */ .elementor-element-e181ed9, .elementor-element-e95ba1d, .elementor-element-e18374a, .elementor-element-ed77093, .elementor-element-ebaee39 { padding: 16px 20px !important; row-gap: 8px !important; } /* Tighten body text line-height for shorter content */ .elementor-element-eb9deea .elementor-widget-text-editor p { line-height: 1.45 !important; margin: 0 !important; } /* --- 2. HOUSTON PARAGRAPH: reduce padding above and below ---------- */ /* e2d242b is the text-editor inside e32638b (city col). Reduce the gap above the paragraph and spacing below it. */ .elementor-element-e32638b > .e-con-inner, .elementor-element-e32638b { row-gap: 20px !important; } .elementor-element-e2d242b { margin: 0 !important; padding: 4px 0 !important; } .elementor-element-e2d242b p { margin: 0 !important; line-height: 1.5 !important; } /* Map section overall: tighter between rows */ .elementor-element-ec7bf69 > .e-con-inner, .elementor-element-ec7bf69 { row-gap: 24px !important; } /* --- 3. FLAG BG: cover with right-center (flag portion visible) --- */ /* Source image has flag on the right half; on narrow mobile viewports, stretching 100% 100% squishes it horizontally. Use cover + right position so the flag region stays properly shaped. */ .elementor-element-e4412f0::after { background-size: cover !important; background-position: right center !important; background-repeat: no-repeat !important; } .elementor-element-e0f0713::before { background-size: cover !important; background-position: right center !important; } /* --- 4. FOOTER: tighter under social icons ------------------------- */ /* Collapse space below socials + reduce copyright top padding */ .elementor-element-e27b51e { margin-top: 4px !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } .elementor-element-ea23ed0 { padding: 6px 20px 12px !important; } .elementor-element-e9516a9 { padding: 24px 20px 8px !important; /* less bottom — socials sit tight */ } } /* ═══════════════ TABLET (768–1024px) ══════════════════════════════════════ */ @media (min-width: 768px) and (max-width: 1024px) { /* Flag bg same treatment on tablet portrait */ .elementor-element-e4412f0::after { background-size: cover !important; background-position: right center !important; } .elementor-element-e0f0713::before { background-size: cover !important; background-position: right center !important; } /* Footer: tighter under socials on tablet too */ .elementor-element-e27b51e { margin-bottom: 0 !important; } .elementor-element-ea23ed0 { padding: 8px 32px 16px !important; } } /* ROUND9_END */ /* ROUND10_START — 2026-08-18 mobile punchlist (Connor, 2026-08-17 email) */ /* ═══════════ FIX A: HEADER 13px HORIZONTAL OVERFLOW ══════════════════════ The header's dropdown