/* ==========================================================================
   LASSO MOBILE CSS — loaded via <link media="(max-width: 768px)">
   NO redundant @media (max-width: 768px) wrappers — file is already scoped.
   Only @media (max-width: 480px), (max-width: 374px), and tablet ranges used.

   ARCHITECTURE (March 2026 Reset):
   - ONE rule per element per component
   - Max specificity (0,4,1) unless documented with reason
   - Companion PHP <style> blocks eliminated — all rules live here
   - Sections numbered and alphabetically ordered within each section

   TABLE OF CONTENTS:
   1.  Global Mobile Resets
   2.  Header & Navigation
   3.  Hero Section (.elementor-17 / .lasso-hero)
   4.  Stats Strip (.lasso-stat-item / .elementor-element-039e36b)
   5.  Service Cards (.lasso-service-card)
   6.  Process Timeline (.lasso-step)
   7.  Forms & Inputs
   8.  Accordion / FAQ
   9.  Footer
   10. Blog & Content Pages
   11. Injected Components (mobile-bar, float-cta, emergency-banner, progress-bar)
   12. Narrow Viewports (@media max-width: 480px, 374px)
   13. Tablet Range (@media min-width: 768px and max-width: 1024px)
   ========================================================================== */


/* ==========================================================================
   1. GLOBAL MOBILE RESETS
   ========================================================================== */

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; /* Space for sticky bar */
}

/* P2: Prevent sticky header from overlapping scrolled content */
html {
    scroll-padding-top: 80px !important;
}

/* P7: Left-align body text on mobile for readability */
.elementor-widget-text-editor p,
.elementor-widget-heading p.elementor-heading-title,
.e-con p {
    text-align: left !important;
}

/* Responsive images */
.elementor-widget-image img,
.e-con img {
    max-width: 100% !important;
    height: auto !important;
}

.elementor img[style*="height:"] {
    height: auto !important;
    max-width: 100% !important;
}

/* Buttons: full-width, touch-friendly */
.elementor-button,
.elementor-widget-button .elementor-button {
    padding: 12px 20px !important;
    font-size: 16px !important;
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.elementor-button-wrapper {
    width: 100% !important;
}

/* Headings: fluid sizing */
h1.elementor-heading-title {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

h2.elementor-heading-title {
    font-size: clamp(1.4rem, 4.5vw, 2rem) !important;
}

/* Section padding: consistent density (scoped — excludes hero, mobile bar, stats) */
.elementor-section:not(.elementor-inner-section):not(.lasso-hero):not(.lasso-mobile-bar),
.e-con:not(.e-con .e-con):not(.lasso-hero):not(.lasso-mobile-bar) {
    padding-top: var(--gap-section-mobile, 32px) !important;
    padding-bottom: var(--gap-section-mobile, 32px) !important;
    padding-block-start: var(--gap-section-mobile, 32px) !important;
    padding-block-end: var(--gap-section-mobile, 32px) !important;
}

.elementor-section.elementor-section-full_width,
.e-con.e-con-full_width {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.elementor-container,
.e-con-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* M-17: Body text 16px minimum for readability (was 15px) */
.elementor-widget-text-editor p {
    font-size: 16px !important;
    line-height: 1.7 !important;
}

/* Form text: 16px to prevent iOS zoom */
.elementor-field-textual {
    font-size: 16px !important;
}

/* Icon-box widgets: white card on mobile */
.elementor-widget-icon-box .elementor-icon-box-icon img {
    width: 48px !important;
    height: 48px !important;
}


/* ==========================================================================
   2. HEADER & NAVIGATION
   ========================================================================== */

/* Hide top utility bar on mobile — sticky call bar replaces it */
.elementor-location-header .elementor-element-67222c3 {
    display: none !important;
}

/* Sticky header */
/* M-05: Reduce sticky header to 52px max on mobile */
.elementor-location-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.07) !important;
    transition: transform 0.3s ease-out !important;
    overflow: visible !important;
    max-height: 52px !important;
}

/* Smart sticky: hide on scroll down (JS toggles class) */
.elementor-location-header.lasso-header-hidden {
    transform: translateY(-100%) !important;
    box-shadow: none !important;
}

/* Header outer container */
.elementor-location-header .elementor-element[data-id="c7fdd3d"],
.elementor-location-header > .e-con:last-child {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 16px !important;
    min-height: 56px !important;
    max-height: 64px !important;
}

/* Header row: flex row layout */
.elementor-location-header .elementor-element[data-id="232861b"].e-con {
    display: flex !important;
    --flex-direction: row !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    max-height: 64px !important;
    overflow: visible !important;
}

/* Header row inner */
.elementor-location-header .elementor-element[data-id="232861b"] > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 64px !important;
    padding: 8px 16px !important;
    width: 100% !important;
}

/* Logo container
   Fix: changed overflow to visible to prevent text clipping (QA 2026-03-17) */
.elementor-location-header .elementor-element[data-id="56fc079"].e-con {
    --width: 150px !important;
    display: flex !important;
    flex-direction: row !important;
    flex: 0 0 auto !important;
    width: 150px !important;
    max-width: 150px !important;
    height: 48px !important;
    max-height: 48px !important;
    align-items: center !important;
    overflow: visible !important;
}

/* Logo image */
.elementor-location-header .elementor-element[data-id="56fc079"] img {
    max-width: 140px !important;
    max-height: 44px !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
}

/* Generic logo fallback */
.elementor-location-header .elementor-widget-theme-site-logo img,
.elementor-location-header .elementor-widget-site-logo img {
    max-height: 44px !important;
    width: auto !important;
}

/* Nav container: push right */
.elementor-location-header .elementor-element[data-id="ce4c2f1"].e-con {
    --width: 50px !important;
    display: flex !important;
    flex: 0 0 auto !important;
    width: 50px !important;
    max-width: 50px !important;
    height: 48px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    overflow: visible !important;
}

/* Nav menu widget — min-height allows dropdown to expand naturally */
.elementor-location-header .elementor-element-4d7f600 {
    min-height: 48px !important;
    /* REMOVED: height and max-height — these clipped the dropdown menu (Issue #1) */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow: visible !important;
}

/* Dropdown menu: fixed width relative to viewport, not narrow parent (Issue #1) */
.elementor-location-header .elementor-nav-menu--dropdown {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    background-color: var(--lasso-navy, #1B2B3A) !important;
    box-shadow: var(--lasso-shadow-md, 0 4px 6px rgba(0,0,0,0.1)) !important;
}

/* Dropdown links: cream on navy for contrast */
.elementor-location-header .elementor-nav-menu--dropdown a,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
    color: var(--lasso-cream, #F2EDE3) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Dropdown links: hover state */
.elementor-location-header .elementor-nav-menu--dropdown a:hover,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover {
    color: var(--lasso-white, #FFFFFF) !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
}

/* Hamburger toggle — absolute position within nav widget (4d7f600).
   Parent 4d7f600 starts at y=-2 in viewport. Logo center is at y=40.
   Formula: center = parent.top + CSS.top → 40 = -2 + CSS.top → top=42px.
   Then translateY(-50%) shifts element up by half its height (44px/2=22px).
   Specificity: (0,4,0) — DOCUMENTED */
.elementor-24.elementor-24 .elementor-menu-toggle.elementor-menu-toggle {
    position: absolute !important;
    top: 42px !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    z-index: 100 !important;
}

/* Phone icon in header */
.lasso-mobile-phone-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background-color: #BF3A2B !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    border-radius: 100px !important;
    text-decoration: none !important;
    min-height: 38px !important;
    white-space: nowrap !important;
    margin: 0 8px !important;
    letter-spacing: 0.01em !important;
}

.lasso-mobile-phone-link:hover {
    background-color: #A50D26 !important;
}

.lasso-mobile-phone-link::before {
    content: '\1F4DE' !important;
    font-size: 14px !important;
}

/* Phone SVG icons: constrain */
.e-font-icon-svg.e-fas-phone,
.elementor-icon-list-icon svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
}


/* ==========================================================================
   3. HERO SECTION (.elementor-17 / .lasso-hero)
   ========================================================================== */

/* Hero: tighter padding */
.elementor-17 .lasso-hero {
    padding-bottom: 16px !important;
}

/* Hero H1: color and base styles (font-size overridden by M-03 rule below) */
.elementor-17 .lasso-hero h1.elementor-heading-title {
    color: #1B2B3A !important;
    text-shadow: none !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
}

/* Hero text contrast: text-shadow for legibility over images.
   Scoped to .lasso-hero — .e-con:first-child leaked into stats strip first column. */
.elementor-17 .lasso-hero h1.elementor-heading-title,
.elementor-17 .lasso-hero h3.elementor-heading-title,
.elementor-17 .lasso-hero .elementor-heading-title {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Override: Hero on cream card — no text shadow needed */
.elementor-17 .lasso-hero h1.elementor-heading-title {
    text-shadow: none !important;
}

/* Bug 1 FIX: Hero subtitle text — navy on cream card.
   Specificity (0,3,1) beats shared.css:198 attribute selector (0,2,1).
   Both use !important; higher specificity wins regardless of source order. */
.elementor-17 .lasso-hero .elementor-text-editor p,
.elementor-17 .lasso-hero .elementor-widget-text-editor p {
    color: #1B2B3A !important;
}
.elementor-17 .lasso-hero .lasso-hero-stars-count,
.elementor-17 .lasso-hero .lasso-hero-stars-count span {
    color: #1B2B3A !important;
}

/* Hero eyebrow — Issue 2 FIX: data-id selector for reliability, covers H2 and H3.
   All 4 competing rules in shared CSS removed (lines 160, 515, 1483, 3036). */
.elementor-17 .elementor-element[data-id="a34487d"] .elementor-heading-title,
.elementor-17 .elementor-element[data-id="a34487d"] h2.elementor-heading-title,
.elementor-17 .elementor-element[data-id="a34487d"] h3.elementor-heading-title {
    color: #1B2B3A !important;
    text-shadow: none !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    font-family: 'DM Serif Display', Georgia, serif !important;
}

/* Hero CTA: visible, touch-friendly
   Scoped to .lasso-hero — .e-con:first-child leaked into stats strip + other sections */
.elementor-17 .lasso-hero .elementor-widget-button .elementor-button {
    display: inline-flex !important;
    width: auto !important;
    min-width: 200px !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 14px 28px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hero CTA touch targets */
.elementor-17 .lasso-hero a.elementor-button,
.elementor-17 .lasso-hero .elementor-widget-button a {
    display: inline-flex !important;
    min-height: 48px !important;
    min-width: 48px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hero whitespace: reduce gap between hero and form.
   Scoped to .lasso-hero — .e-con:first-child leaked into stats strip first column. */
.elementor-17 .lasso-hero {
    gap: 16px !important;
}
.elementor-17 .lasso-hero > .e-con {
    margin-top: 0 !important;
    padding-top: 0 !important;
    flex-direction: column !important;
}

/* P0 FIX: Hero form column has desktop padding (70px 150px) that crushes inputs at 768px.
   Desktop CSS fix (min-width:769px) doesn't apply at 768px. Override here. */
.elementor-17 .lasso-hero .elementor-element-ce292e6 {
    padding: 0px 20px 32px 20px !important;
    width: 100% !important;
}
.elementor-17 .lasso-hero .elementor-element-d35239c {
    padding: 24px !important;
}

/* Hero subtitle font — scoped to .lasso-hero to avoid bleeding into stats strip */
.elementor-17 .lasso-hero h3.elementor-heading-title {
    font-family: 'DM Serif Display', serif !important;
}

/* M-03: Hero H1 — offer-first headline, bold scale on mobile */
.elementor-17 .lasso-hero h1.elementor-heading-title {
    font-size: clamp(32px, 9vw, 40px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
}

/* Eyebrow: small, uppercase, body font */
.elementor-17 .lasso-hero h3.elementor-heading-title {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-weight: 600 !important;
    color: var(--lasso-red, #BF3A2B) !important;
    font-family: var(--font-body) !important;
}

/* Hero trust bar — navy for contrast on cream overlay */
.lasso-hero-trust-bar {
    color: #1B2B3A !important;
    font-family: "Outfit", -apple-system, sans-serif !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* Blog/post trust bars */
body.blog .lasso-hero-trust-bar,
body.single-post .lasso-hero-trust-bar,
body.blog .wp-block-cover p,
body.single-post .wp-block-cover p {
    color: #F5F0E8 !important;
    font-weight: 600 !important;
}

/* ── Interior page hero: stack text + form vertically at ≤768px ─────────
   Fixes: Services (page-id-32) hero uses flex-direction:row at 768px,
   compressing form inputs to 50-60px wide (phone shows "(xx", email "En").
   Root cause: Elementor container 9171627 stays row at 768px.
   Scoped to body.page-id-32 to avoid homepage interference.
   (QA 2026-03-17) */
body.page-id-32 .elementor-32 .elementor-element-9171627 {
    flex-direction: column !important;
}
body.page-id-32 .elementor-32 .elementor-element-49f313b,
body.page-id-32 .elementor-32 .elementor-element-4d299ea {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
}
/* Ensure form inputs are full width within hero */
body.page-id-32 .elementor-32 .elementor-element-4d299ea input,
body.page-id-32 .elementor-32 .elementor-element-4d299ea select,
body.page-id-32 .elementor-32 .elementor-element-4d299ea textarea {
    width: 100% !important;
    min-width: 0 !important;
}
/* Form wrapper container — remove narrow width constraints */
body.page-id-32 .elementor-32 .elementor-element-4dff0af {
    width: 100% !important;
    max-width: 100% !important;
}

/* Homepage H2 section headings: consistent 22px
   Specificity (0,4,1) — DOCUMENTED: must beat shared.css generic rules */
.elementor-17 .elementor-widget-heading h2.elementor-heading-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
    font-family: "DM Serif Display", Georgia, serif !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* H2 color: navy on light bg */
.elementor-17 [data-id="b73eedf"] h2.elementor-heading-title,
.elementor-17 [data-id="e9ff0df"] h2.elementor-heading-title,
.elementor-17 [data-id="218109c"] h2.elementor-heading-title {
    color: #1B2B3A !important;
}

/* "Proudly Serving Houston" — center align on mobile */
.elementor-17 [data-id="e9ff0df"] h2.elementor-heading-title {
    text-align: center !important;
}

/* H2 color: white on red bg (Storm Season) */
.elementor-17 [data-id="981046e"] h2.elementor-heading-title {
    color: #fff !important;
}

/* Homepage generic H3 */
.elementor-17 .elementor-widget-heading h3.elementor-heading-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-family: "DM Serif Display", Georgia, serif !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}


/* Issue #17: Why Choose Us heading hierarchy on mobile */
body.page-id-34 h1.elementor-heading-title {
    font-size: clamp(26px, 7vw, 32px) !important;
    font-weight: 600 !important;
}
body.page-id-34 h3.elementor-heading-title {
    font-size: clamp(20px, 5vw, 24px) !important;
}


/* ==========================================================================
   4. STATS STRIP
   ========================================================================== */

/* Stats container: horizontal 3-column row */
.elementor-17 .elementor-element-039e36b.e-con {
    --flex-direction: row !important;
    --flex-wrap: nowrap !important;
    --width: 100% !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 12px 8px !important;
    min-height: auto !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Stats columns: equal thirds — Issue 4 FIX: separators + no wrapper boxes */
.elementor-17 .elementor-element-039e36b > .e-con {
    --width: auto !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 33.33% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 12px 0 !important;
    min-height: auto !important;
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-right: 1px solid rgba(13, 27, 42, 0.15) !important;
}
.elementor-17 .elementor-element-039e36b > .e-con:last-child {
    border-right: none !important;
}

/* Stat widgets: full-width so headings center consistently */
.elementor-17 .elementor-element-039e36b .elementor-widget {
    width: 100% !important;
}

/* Stat values (H3/H4): big numbers */
.elementor-17 .elementor-element-039e36b h3.elementor-heading-title,
.elementor-17 .elementor-element-039e36b h4.elementor-heading-title {
    font-size: 24px !important;
    line-height: 1.1 !important;
    color: #1B2B3A !important;
    font-weight: 800 !important;
    text-transform: none !important;
    font-family: "DM Serif Display", Georgia, serif !important;
    white-space: nowrap !important;
    margin-bottom: 2px !important;
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Stat labels (P tags): small uppercase
   ONE rule for all stat labels — no competing declarations */
.elementor-17 .elementor-element-039e36b p.elementor-heading-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
    color: #4A5568 !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    font-family: 'Outfit', -apple-system, sans-serif !important;
    letter-spacing: 1px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

/* Third stat label "Emergency Response" is H3 (not P)
   Specificity (0,4,1) — DOCUMENTED: must beat generic h3 rule above */
.elementor-17 .elementor-element-new_stat_h2 h3.elementor-heading-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #4A5568 !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    line-height: 1.3 !important;
    font-family: 'Outfit', -apple-system, sans-serif !important;
    letter-spacing: 1px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

/* Stat label specific element overrides (same styles, element-class selectors) */
.elementor-17 .elementor-element-abec2f2 .elementor-heading-title,
.elementor-17 .elementor-element-6421931 .elementor-heading-title {
    font-size: 15px !important;
}


/* ==========================================================================
   5. SERVICE CARDS (.lasso-service-card)
   ========================================================================== */

/* Service row: stack vertically, uniform gap.
   Shared CSS sets flex-direction:row + nowrap — override both. */
.lasso-services-row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}
.lasso-services-row > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Service card: white bg, full-width, compact padding */
.lasso-service-card {
    width: 100% !important;
    padding: 16px !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    border-radius: 12px !important;
    text-align: left !important;
}

/* Issue #5: Homepage service card padding with Elementor logical property defense */
.elementor-17 .lasso-service-card {
    padding: 16px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-block-start: 16px !important;
    padding-block-end: 16px !important;
}

/* Service card: grid layout — emoji left of heading.
   Cards have NO .e-con-inner — widgets are direct children of .lasso-service-card */
.lasso-service-card {
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 4px 12px !important;
    align-items: start !important;
}

/* Emoji icon (2nd widget): column 1, row 1 */
.lasso-service-card > .elementor-widget:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
}

/* Title heading (1st widget): column 2, row 1 */
.lasso-service-card > .elementor-widget:nth-child(1) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
}

/* Description (3rd widget): span full width, row 2 */
.lasso-service-card > .elementor-widget:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
}

/* Button (4th widget): span full width, row 3 */
.lasso-service-card > .elementor-widget:nth-child(4) {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
}

.lasso-service-card:active {
    transform: scale(0.98) !important;
}

/* Service card H3: navy on white, centered */
.lasso-service-card h3.elementor-heading-title,
.lasso-service-card h2.elementor-heading-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
    color: #1B2B3A !important;
    font-family: "DM Serif Display", Georgia, serif !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}

/* Service card descriptions: navy on white, left-aligned, reduced top spacing */
.lasso-service-card p.elementor-heading-title {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #1B2B3A !important;
    font-weight: 400 !important;
    text-align: left !important;
    margin-top: 4px !important;
}

/* Service card text-editor paragraphs */
.lasso-service-card .elementor-widget-text-editor p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #2D3748 !important;
    text-align: left !important;
}

/* Service card H3 from section container: navy override
   Beats section 72fcdd3 oklch color */
.elementor-17 .elementor-element-72fcdd3 .elementor-widget-heading h3.elementor-heading-title {
    color: #1B2B3A !important;
    font-size: 20px !important;
}

/* Service card descriptions from section container: navy override */
.elementor-17 .elementor-element-72fcdd3 .elementor-widget-heading p.elementor-heading-title {
    color: #1B2B3A !important;
}

/* Service card descriptions by element-class */
.elementor-17 .elementor-element-eed2daf .elementor-heading-title,
.elementor-17 .elementor-element-fcaab0f .elementor-heading-title,
.elementor-17 .elementor-element-71c2615 .elementor-heading-title,
.elementor-17 .elementor-element-f427c02 .elementor-heading-title,
.elementor-17 .elementor-element-bc8570b .elementor-heading-title,
.elementor-17 .elementor-element-be03c2f .elementor-heading-title {
    color: #1B2B3A !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* Emoji icon (2nd widget child): sized to sit beside heading */
.lasso-service-card .elementor-widget:nth-child(2) .elementor-heading-title {
    font-size: 32px !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
}

/* Re-apply emoji size for P tag variant */
.lasso-service-card .elementor-widget:nth-child(2) p.elementor-heading-title {
    font-size: 32px !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
}

/* "Learn More" button: left-aligned under description */
.lasso-service-card .elementor-button-wrapper {
    text-align: left !important;
}

/* Service card borders: uniform gray (beats oklch from Elementor data) */
.elementor-17 .lasso-service-card.e-con {
    border: 1px solid #D4C9B5 !important;
}

/* Service section: reduce bottom padding */
.lasso-services-section {
    padding-bottom: 32px !important;
}

/* Bug 3 FIX: Services section — uniform 16px gap between ALL 6 cards.
   .e-con-inner has gap:20px + rows have padding:10px = 40px inter-row gap.
   Fix: gap:16px on parent, zero padding on rows → all gaps become 16px. */
.elementor-17 .elementor-element-72fcdd3 > .e-con-inner {
    gap: 16px !important;
}
.elementor-17 .elementor-element-72fcdd3 .e-con .e-con,
.elementor-17 .elementor-element-72fcdd3 .lasso-services-row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

/* Issue 5 FIX: Force light background on services section.
   Root cause: oklch inline color in Elementor data renders as near-black.
   TODO: Remove after verifying Elementor data fix for 72fcdd3 */
.elementor-17 .elementor-element-72fcdd3,
.elementor-17 .elementor-element[data-id="72fcdd3"],
.elementor-17 .elementor-element-72fcdd3 > .e-con-inner {
    background-color: #F5F0E8 !important;
    background-image: none !important;
}

/* Kill Elementor's ::before black overlay on services section */
.elementor-17 .elementor-element-72fcdd3::before,
.elementor-17 .elementor-element[data-id="72fcdd3"]::before {
    display: none !important;
}
.elementor-17 .elementor-element-72fcdd3 .elementor-heading-title {
    color: #1B2B3A !important;
}
.elementor-17 .elementor-element-72fcdd3 .elementor-widget-text-editor p {
    color: #374151 !important;
}

/* P0 FIX: CTA bar heading invisible — navy text on navy background.
   data-id cta_svc_01 has bg #1B2B3A; heading inherits global navy color. */
.elementor-17 .elementor-element-cta_svc_01 h2.elementor-heading-title,
.elementor-17 .elementor-element-cta_svc_01 .elementor-heading-title {
    color: var(--lasso-cream, #F5F0E8) !important;
}


/* ==========================================================================
   6. PROCESS TIMELINE (.lasso-step)
   ========================================================================== */

/* ── Global: Process steps → single column on mobile ─────────────────────
   The shared CSS sets flex-direction:row. Override to single-column for ALL pages.
   Homepage (.elementor-17) has additional styling below; these generic rules
   ensure Services page (page-id-32) and any other page also collapse.
   Fixes: process steps rendering in 2-3 column grid at 393px (QA 2026-03-17) */
.lasso-process-steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

.lasso-process-steps > .e-con,
.lasso-process-steps > .lasso-step,
.lasso-process-steps > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
}

/* ── Global: Service cards row → single column on mobile ─────────────────
   Supplements the flex-direction:column rule at line ~623.
   Ensures children also get full width (flex-basis override).
   Fixes: service cards rendering in 2-column grid at 393px (QA 2026-03-17) */
.lasso-services-row > .e-con,
.lasso-services-row > .elementor-column,
.lasso-services-row > .lasso-service-card {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    flex-shrink: 0 !important;
}

/* Services page — Our Services section: constrain tall illustration images on mobile.
   Images natural size 207-557px wide but stretch to full card width (393px) via
   Astra's width:100% rule, making them 300-430px tall and dominating the card.
   Capped at 160px height, centered within the card. */
body.page-id-32 .elementor-element-5f800d1 img,
body.page-id-32 .elementor-element-e1d6b01 img,
body.page-id-32 .elementor-element-8b3e67d img,
body.page-id-32 .elementor-element-b41a6f2 img {
    max-height: 160px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Services page — Our Process section (f1b7525):
   4-column grid: 1fr [icon] [step-label] 1fr
   The two outer 1fr columns are centering spacers so the icon+label pair
   sits centered in the card. Title/body span all 4 cols (1/-1) → full width. */

/* Step containers: 4-column centering grid */
.elementor-element-76c7de5,
.elementor-element-42b96b8,
.elementor-element-bb9b3cc,
.elementor-element-a785598,
.elementor-element-a7db658,
.elementor-element-5b11a0f {
    display: grid !important;
    grid-template-columns: 1fr auto auto 1fr !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    align-items: start !important;
}

/* Image widget: center column 2, row 1 — centered in card */
.elementor-element-76c7de5 > .elementor-widget-image,
.elementor-element-42b96b8 > .elementor-widget-image,
.elementor-element-bb9b3cc > .elementor-widget-image,
.elementor-element-a785598 > .elementor-widget-image,
.elementor-element-a7db658 > .elementor-widget-image,
.elementor-element-5b11a0f > .elementor-widget-image {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}

/* Image size: 32px — compact to fit beside STEP label */
.elementor-element-f1b7525 .elementor-widget-image img {
    width: 32px !important;
    height: auto !important;
    max-width: 32px !important;
}

/* STEP label (2nd child): center column 3, row 1 — next to icon, both centered */
.elementor-element-76c7de5 > .elementor-widget:nth-child(2),
.elementor-element-42b96b8 > .elementor-widget:nth-child(2),
.elementor-element-bb9b3cc > .elementor-widget:nth-child(2),
.elementor-element-a785598 > .elementor-widget:nth-child(2),
.elementor-element-a7db658 > .elementor-widget:nth-child(2),
.elementor-element-5b11a0f > .elementor-widget:nth-child(2) {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    text-align: left !important;
}

/* Title heading (3rd child — "Reach Out", "Inspection", etc.): full width, centered */
.elementor-element-76c7de5 > .elementor-widget:nth-child(3),
.elementor-element-42b96b8 > .elementor-widget:nth-child(3),
.elementor-element-bb9b3cc > .elementor-widget:nth-child(3),
.elementor-element-a785598 > .elementor-widget:nth-child(3),
.elementor-element-a7db658 > .elementor-widget:nth-child(3),
.elementor-element-5b11a0f > .elementor-widget:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    text-align: center !important;
}

/* Body text (4th child): full width, left-aligned */
.elementor-element-76c7de5 > .elementor-widget:nth-child(4),
.elementor-element-42b96b8 > .elementor-widget:nth-child(4),
.elementor-element-bb9b3cc > .elementor-widget:nth-child(4),
.elementor-element-a785598 > .elementor-widget:nth-child(4),
.elementor-element-a7db658 > .elementor-widget:nth-child(4),
.elementor-element-5b11a0f > .elementor-widget:nth-child(4) {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    text-align: left !important;
}

/* Process steps — single-column grid on mobile.
   Two containers (61293ff, bb24eef) each hold 3 steps.
   Zero out margin/padding so inter-container gap matches intra-container gap. */
/* Process section wrapper: match gap to step grid gap */
.elementor-17 .lasso-process-section > .e-con-inner {
    gap: 16px !important;
}

.elementor-17 .lasso-process-steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Each step card: grid layout — image beside title, description below.
   4 direct children: (1) "STEP N" label, (2) image, (3) title, (4) description.
   Grid: 48px icon column + 1fr text column. */
.elementor-17 .lasso-process-steps > .e-con,
.elementor-17 .lasso-process-steps > .lasso-step,
.elementor-17 .lasso-process-steps > .elementor-element {
    width: 100% !important;
    min-height: auto !important;
    padding: 16px !important;
    background-color: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    border: 1px solid #D4C9B5 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 48px 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 4px 12px !important;
    align-items: start !important;
}

/* "STEP N" label: span full width, row 1 */
.elementor-17 .lasso-process-steps > .e-con > .elementor-widget:nth-child(1),
.elementor-17 .lasso-process-steps > .elementor-element > .elementor-widget:nth-child(1) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}

/* Image icon: column 1, row 2 */
.elementor-17 .lasso-process-steps > .e-con > .elementor-widget:nth-child(2),
.elementor-17 .lasso-process-steps > .elementor-element > .elementor-widget:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: center !important;
}

/* Title heading: column 2, row 2 (beside image) */
.elementor-17 .lasso-process-steps > .e-con > .elementor-widget:nth-child(3),
.elementor-17 .lasso-process-steps > .elementor-element > .elementor-widget:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
}

/* Description: span full width, row 3 */
.elementor-17 .lasso-process-steps > .e-con > .elementor-widget:nth-child(4),
.elementor-17 .lasso-process-steps > .elementor-element > .elementor-widget:nth-child(4) {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
}

/* Kill Elementor's ::before background overlay on process cards */
.elementor-17 .lasso-process-steps > .e-con::before,
.elementor-17 .lasso-process-steps > .lasso-step::before,
.elementor-17 .lasso-process-steps > .elementor-element::before {
    display: none !important;
}

/* Process card text: navy on white, consistent sizing */
.elementor-17 .lasso-process-steps .elementor-heading-title {
    color: #1B2B3A !important;
    font-family: "DM Serif Display", Georgia, serif !important;
    text-align: left !important;
}
.elementor-17 .lasso-process-steps .elementor-widget-text-editor p,
.elementor-17 .lasso-process-steps .elementor-widget-text-editor {
    color: #374151 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-family: "Outfit", sans-serif !important;
    text-align: left !important;
}

/* Individual step: compact card */
.lasso-step {
    padding: 16px !important;
    border-radius: 12px !important;
}

/* Old process layout (non-Elementor) */
.lasso-process {
    padding: 40px 20px;
}

.lasso-process__steps {
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.lasso-process__step::after {
    display: none;
}

.lasso-process__step {
    flex-direction: row;
    gap: 16px;
    text-align: left;
    min-width: 0;
    max-width: 280px;
    width: 100%;
}

.lasso-process__circle {
    flex-shrink: 0;
    margin-bottom: 0;
}

.lasso-process__label {
    text-align: left;
    font-size: 14px;
}


/* ==========================================================================
   7. FORMS & INPUTS
   ========================================================================== */

/* Homepage form fields */
.elementor-17 .elementor-element[data-id="8a45422"] input[type="text"],
.elementor-17 .elementor-element[data-id="8a45422"] input[type="tel"],
.elementor-17 .elementor-element[data-id="8a45422"] input[type="email"],
.elementor-17 .elementor-element[data-id="8a45422"] select,
.elementor-17 .elementor-element[data-id="8a45422"] textarea {
    background-color: #ffffff !important;
    color: #1B2B3A !important;
    border: 1px solid #d0d0d0 !important;
    font-size: 16px !important;
    font-family: "Outfit", -apple-system, sans-serif !important;
    padding: 10px 40px 10px 14px !important;
    border-radius: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Arrow + pseudo-element kill now handled globally in lasso-shared.css */

.elementor-17 .elementor-element[data-id="8a45422"] .elementor-field-group {
    width: 100% !important;
    padding: 0 !important;
}

/* Form labels: white on navy bg */
.elementor-17 .elementor-field-label,
.elementor-17 .elementor-form label {
    color: #FFFFFF !important;
}

/* Form placeholders */
.elementor-17 .elementor-form input::placeholder,
.elementor-17 .elementor-form textarea::placeholder {
    color: #718096 !important;
    opacity: 1 !important;
}

/* GET STARTED heading: white on navy */
.elementor-17 [data-id="8a45422"] .elementor-heading-title,
.elementor-17 [data-id="8a45422"] h2,
.elementor-17 [data-id="8a45422"] h3 {
    color: #FFFFFF !important;
}

/* All form inputs: touch-friendly sizing */
.elementor-field-textual,
.elementor-field,
.elementor-field-group input[type="text"],
.elementor-field-group input[type="email"],
.elementor-field-group input[type="tel"],
.elementor-field-group input[type="url"],
.elementor-field-group input[type="number"],
.elementor-field-group input[type="date"],
.elementor-field-group select,
.elementor-field-group textarea {
    min-height: 44px !important;
    font-size: 16px !important;
}

.elementor-field-group textarea {
    min-height: 100px !important;
}

/* Submit buttons: red, full-width */
.elementor-form .elementor-field-type-submit .elementor-button,
.elementor-form .elementor-button,
.e-form__buttons button[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
    background-color: #BF3A2B !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0.03em !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.elementor-form .elementor-field-type-submit,
.elementor-form .elementor-field-group.elementor-field-type-submit,
.elementor-form .elementor-button-wrapper {
    width: 100% !important;
}

/* H-11: AI Quote form container full-width (prevents content clipping on mobile) */
/* C5: AI Quote — hide redundant dark hero on mobile to show form above fold */
body.page-id-40 .elementor-element-d114d04 {
    display: none !important;
}

body[class*="ai-instant-quote"] .elementor-form {
    width: 100% !important;
    max-width: 100% !important;
}

/* AI Quote form: full-width buttons */
body[class*="ai-instant-quote"] .elementor-button,
body[class*="ai-instant-quote"] .elementor-field-type-submit button,
body[class*="ai-instant-quote"] input[type="submit"],
body[class*="ai-instant-quote"] button[type="submit"] {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    min-height: 52px !important;
    font-size: 16px !important;
}

body[class*="ai-instant-quote"] .e-form__buttons__wrapper,
body[class*="ai-instant-quote"] .elementor-field-type-submit {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* Issue #6: Prevent iOS auto-zoom on Contact form fields */
body.page-id-1180 input[type="text"],
body.page-id-1180 input[type="email"],
body.page-id-1180 input[type="tel"],
body.page-id-1180 textarea,
body.page-id-1180 select {
    font-size: 16px !important;
}

/* Contact page: no bottom padding (no sticky overlap) */
body[class*="contact"] {
    padding-bottom: 0 !important;
}

/* Contact page: city link touch targets (Gutenberg content, not Elementor) */
body.page-id-1180 .wp-block-list a,
body.page-id-1180 .entry-content a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: var(--touch-target, 44px) !important;
    padding: 8px 4px !important;
    font-size: 16px !important;
}


/* Issue #22: Breadcrumb links 44px touch target */
.elementor-widget-breadcrumbs a,
nav.rank-math-breadcrumb a,
.yoast-breadcrumbs a {
    display: inline-block !important;
    min-height: var(--touch-target, 44px) !important;
    line-height: 1.4 !important;
    padding: 10px 4px !important;
}

/* Issue #20: Warranties badge font-size minimum (DOM: spans inside h3 heading widgets) */
body.page-id-38 .elementor-widget-heading .elementor-heading-title span {
    font-size: 14px !important;
}

/* Issue #21: AI Quote step labels minimum font-size (DOM: custom .step-label, not Elementor form) */
.lasso-progress-step .step-label {
    font-size: 14px !important;
}

/* Issue #34: Licensed & Insured trust badge minimum font-size */
.lasso-hero-trust-bar .lasso-hero-stars-count {
    font-size: 14px !important;
}

/* Issue #16: Services page 406px blank spacer — hide on mobile (DOM: spacer widget c94d76c) */
body.page-id-32 .elementor-element-c94d76c {
    display: none !important;
}

/* Issue #25: Homepage sections tighter mobile padding */
.elementor-17 .elementor-section:not(.elementor-inner-section):not(.lasso-hero):not(.lasso-mobile-bar),
.elementor-17 .e-con:not(.e-con .e-con):not(.lasso-hero):not(.lasso-mobile-bar) {
    padding-top: var(--gap-section-mobile, 32px) !important;
    padding-bottom: var(--gap-section-mobile, 32px) !important;
}


/* ==========================================================================
   8. ACCORDION / FAQ
   ========================================================================== */

/* Homepage accordion (data-id 1e1e217) */
.elementor-17 [data-id="1e1e217"] summary.e-n-accordion-item-title,
.elementor-17 [data-id="1e1e217"] .e-n-accordion-item-title {
    background-color: #1A1F2E !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    padding: 14px 16px !important;
}

.elementor-17 [data-id="1e1e217"] .e-n-accordion-item-title-text,
.elementor-17 [data-id="1e1e217"] .e-n-accordion-item-title-header,
.elementor-17 [data-id="1e1e217"] summary span {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.elementor-17 [data-id="1e1e217"] details[open] > summary.e-n-accordion-item-title {
    background-color: #253041 !important;
    color: #fff !important;
}

.elementor-17 [data-id="1e1e217"] details .e-con {
    background-color: #1A1F2E !important;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 16px !important;
}

.elementor-17 [data-id="1e1e217"] details .e-con p,
.elementor-17 [data-id="1e1e217"] details .e-con .elementor-widget-text-editor {
    color: rgba(255, 255, 255, 0.9) !important;
}

.elementor-17 [data-id="1e1e217"] .e-n-accordion-item-title-icon {
    color: #fff !important;
}

.elementor-17 [data-id="1e1e217"] .e-n-accordion-item-title-icon svg {
    fill: #fff !important;
}

/* Accordion touch targets + visual affordance */
.elementor-17 .e-n-accordion-item-title {
    min-height: 48px !important;
}

.elementor-17 .e-n-accordion-item-title-text {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-color: rgba(200, 16, 46, 0.4) !important;
}

/* C3: FAQ titles on white card bg need dark text (mobile) */
.e-n-accordion-item:not(.e-active) .e-n-accordion-item-title-text {
    color: var(--lasso-navy, #1B2B3A) !important;
}
.e-n-accordion-item [role="region"] p,
.elementor-accordion-content p {
    color: var(--lasso-navy, #1B2B3A) !important;
}
.e-n-accordion-item:not(.e-active) .e-n-accordion-item-title {
    background-color: var(--lasso-white, #FFFFFF) !important;
}


/* ==========================================================================
   9. FOOTER
   ========================================================================== */

/* Footer: uniform dark navy background across all sections */
.elementor-location-footer,
.elementor-location-footer > .elementor-element,
.elementor-location-footer .e-con {
    background-color: #0B1525 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Footer section spacing: consistent vertical rhythm */
.elementor-location-footer > .elementor-element > .e-con-inner > .e-con {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.elementor-location-footer > .elementor-element > .e-con-inner > .e-con:last-child {
    border-bottom: none !important;
}

/* Footer headings: white on navy, uppercase, left-aligned, consistent */
.elementor-location-footer .elementor-widget-heading h2.elementor-heading-title,
.elementor-location-footer h2.elementor-heading-title,
.elementor-location-footer h3.elementor-heading-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-family: "DM Serif Display", Georgia, serif !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-align: left !important;
    margin-bottom: 16px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* Footer body text — Issue 9 FIX: explicit cream colors for contrast on dark bg */
.elementor-location-footer p,
.elementor-location-footer .elementor-text-editor p,
.elementor-location-footer .elementor-widget-text-editor p {
    font-size: 15px !important;
    color: rgba(245, 240, 232, 0.85) !important;
    line-height: 1.6 !important;
}

/* Footer links: cream to match contact body text. High specificity to beat inline styles. */
.elementor-location-footer a:not(.elementor-social-icon),
.elementor-location-footer .elementor-widget a:not(.elementor-social-icon),
.elementor-location-footer .elementor-icon-list-item a,
.elementor-location-footer .elementor-widget-text-editor a,
.elementor-location-footer .elementor-icon-list-text {
    color: rgba(245, 240, 232, 0.85) !important;
    font-family: "Outfit", sans-serif !important;
    font-size: 15px !important;
}
.elementor-location-footer a:not(.elementor-social-icon):hover,
.elementor-location-footer .elementor-widget a:not(.elementor-social-icon):hover {
    color: #F5F0E8 !important;
}

/* Footer nav sub-items: same indent level as parent items */
.elementor-location-footer .elementor-icon-list-item .elementor-icon-list-item {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Footer nav — uniform styling for ALL 8 items.
   Match Contact section: cream color, same font family/size as contact body text. */
.elementor-location-footer .elementor-element-b73db75 .elementor-icon-list-text {
    font-weight: 500 !important;
    font-size: 15px !important;
    color: rgba(245, 240, 232, 0.85) !important;
    font-family: "Outfit", sans-serif !important;
}
.elementor-location-footer .elementor-element-b73db75 .elementor-icon-list-item {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
}

/* Footer phone/email: ensure cream text on navy.
   <strong> inside phone link inherits oklch dark color from Elementor — force cream. */
.elementor-location-footer .elementor-widget-text-editor {
    color: rgba(245, 240, 232, 0.85) !important;
}
.elementor-location-footer .elementor-widget-text-editor strong,
.elementor-location-footer .elementor-widget-text-editor a strong,
.elementor-location-footer .elementor-widget-text-editor b {
    color: rgba(245, 240, 232, 0.85) !important;
}

/* Follow Us section: center heading + icons */
.elementor-location-footer [data-id="5471b8d"] .elementor-heading-title {
    text-align: center !important;
}
.elementor-location-footer .elementor-widget-social-icons {
    text-align: center !important;
    width: 100% !important;
}
.elementor-location-footer .elementor-social-icons-wrapper.elementor-grid {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
}
/* Kill any inline-block that breaks flex centering */
.elementor-location-footer .elementor-social-icons-wrapper {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
}
/* Hide Twitter/LinkedIn grid-item wrappers so they don't take flex gap space */
.elementor-location-footer .elementor-grid-item:has(.elementor-social-icon-twitter),
.elementor-location-footer .elementor-grid-item:has(.elementor-social-icon-x-twitter),
.elementor-location-footer .elementor-grid-item:has(.elementor-social-icon-linkedin),
.elementor-location-footer .elementor-grid-item:has(.elementor-social-icon-linkedin-in) {
    display: none !important;
}


/* ==========================================================================
   10. BLOG & CONTENT PAGES
   ========================================================================== */

/* Blog grid: single column — covers both classic posts and loop containers
   Fixes: blog cards rendering in 2-column grid at 393px (QA 2026-03-17) */
.blog .elementor-posts-container,
.blog .elementor-loop-container {
    grid-template-columns: 1fr !important;
}

.blog .elementor-post,
.blog .e-loop-item {
    width: 100% !important;
}

/* Blog/content H1 */
.wp-block-cover .wp-block-cover__inner-container h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
}

/* Blog CTA buttons */
.wp-block-cover .wp-block-buttons .wp-block-button__link {
    min-height: 44px !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
}

/* Services page: reduce top padding
   Scoped to page body — .e-con:first-child matches any first container */
body.page-id-32 > .elementor > .elementor-element:first-child {
    padding-top: 16px !important;
}

/* Contact page double-header: hide on mobile */
.lasso-contact-phone-top {
    display: none !important;
}

/* Bug 4 FIX: Hide "Houston's Top Roofing Company" on mobile */
.elementor-17 .elementor-element-3fdb79e {
    display: none !important;
}

/* Bug 4 FIX: City pills — uniform gaps between ALL rows.
   3 icon-list widgets in flex column. Internal grid gap = 12px.
   Parent gap = 12px to match inter-widget spacing with intra-widget spacing.
   padding: 0 removes Elementor's default 16px side padding so pills use full available width. */
.elementor-17 [data-id="3c7629c"] {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
}
.elementor-17 [data-id="3c7629c"] > .elementor-widget {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Metro city pills — 2-column grid, equal boxes, consistent styling */
.elementor-17 [data-id="3c7629c"] .elementor-icon-list-items {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-17 [data-id="3c7629c"] .elementor-icon-list-item {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 18px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    font-family: 'Outfit', -apple-system, sans-serif !important;
    font-weight: 500 !important;
    color: #1B2B3A !important;
    background-color: #FFFFFF !important;
    border: 1px solid rgba(13, 27, 42, 0.12) !important;
    border-radius: 24px !important;
    text-align: center !important;
    width: 100% !important;
    min-width: unset !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}
.elementor-17 [data-id="3c7629c"] .elementor-icon-list-item a {
    color: #1B2B3A !important;
    text-decoration: none !important;
    width: 100% !important;
    text-align: center !important;
}

/* Bug 5 FIX: "Get a Free Estimate for Your Area →" — keep on single line */
.elementor-17 .lasso-map-cta a,
.elementor-17 [data-id="297dba8"] .lasso-map-cta a {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   11. INJECTED COMPONENTS
   ========================================================================== */

/* --- Mobile sticky bar --- */
/* P1: Consolidate sticky CTA bar — single row, 60/40 split */
.lasso-mobile-bar,
#lasso-mobile-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    padding-top: 6px !important;
    padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    padding-block-start: 6px !important;
    padding-block-end: calc(6px + env(safe-area-inset-bottom)) !important;
    height: auto !important;
    max-height: 60px !important;
    z-index: 1000 !important;
    background-color: var(--lasso-dark, #161E28) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}
.lasso-mobile-bar .elementor-button:first-child {
    flex: 3 !important;
}
.lasso-mobile-bar .elementor-button:last-child {
    flex: 2 !important;
}

.lasso-mobile-bar a {
    flex: 1;
    text-align: center;
    padding: 14px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    font-size: 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
}

.lasso-mobile-bar .call-btn {
    background-color: var(--lasso-red, #BF3A2B);
    color: white;
}

.lasso-mobile-bar .quote-btn,
.lasso-mobile-bar a[href*="quote"],
.lasso-mobile-bar .lasso-mobile-bar-quote {
    background-color: var(--lasso-surface, #F5F0E8) !important;
    color: var(--lasso-navy, #1B2B3A) !important;
    border: none !important;
    font-weight: 700 !important;
}

/* --- Floating CTA --- */
.lasso-float-cta {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #BF3A2B;
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 100px;
    text-decoration: none;
    white-space: nowrap;
    z-index: 8000;
    box-shadow: 0 4px 20px rgba(200, 16, 46, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lasso-float-cta.lasso-float-cta--visible {
    opacity: 1;
    pointer-events: auto;
}

.lasso-float-cta:hover,
.lasso-float-cta:active {
    background-color: #a00d24;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 8px 28px rgba(200, 16, 46, 0.5);
}

.lasso-float-cta.lasso-float-cta--hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* --- Promo strip --- */
.lasso-promo-strip {
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
}

.lasso-promo-strip__text {
    font-size: 14px;
}

.lasso-promo-strip__cta {
    width: 100%;
    justify-content: center;
}

/* --- Emergency banner --- */
.lasso-emergency-banner {
    font-size: 0.9rem !important;
    padding: 12px 16px !important;
}

/* --- CTA banner --- */
.lasso-cta-inner {
    padding-bottom: 48px !important;
}

.lasso-cta-banner {
    padding-bottom: 32px !important;
}

/* --- Progress bar (AI Quote stepper) --- */
.lasso-progress-step .step-num {
    width: 44px !important;
    height: 44px !important;
    font-size: 1rem !important;
}

/* DELETED: step-label 12px self-conflict — correct value (14px) is at line 1058. Rule 13 violation. */

.lasso-progress-connector {
    margin-bottom: 26px !important;
}

.lasso-progress-bar {
    padding: 16px 16px 24px !important;
    gap: 4px !important;
}

/* --- Trust badge carousel --- */
.lasso-trust-strip,
.elementor-section:has(.elementor-widget-image-carousel) {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-height: 0 !important;
}

.lasso-trust-strip img,
.elementor-widget-image-carousel .swiper-slide img {
    max-height: 28px !important;
    width: auto !important;
    object-fit: contain !important;
}

.elementor-widget-image-carousel .swiper-pagination {
    display: none !important;
}

.elementor-widget-image-carousel .swiper-wrapper {
    align-items: center !important;
}


/* ==========================================================================
   12. NARROW VIEWPORTS
   ========================================================================== */

@media (max-width: 480px) {
    h1.elementor-heading-title {
        font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
    }

    .e-con {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .elementor-widget-icon-box .elementor-icon-box-icon img {
        width: 40px !important;
        height: 40px !important;
    }
}

@media (max-width: 374px) {
    .lasso-progress-step .step-label {
        font-size: 10px !important;
    }
}


/* ==========================================================================
   13. TABLET RANGE
   ========================================================================== */

@media (max-width: 1024px) {
    /* Nav: hide desktop menu, show hamburger */
    .elementor-location-header .elementor-nav-menu--main {
        display: none !important;
    }
    .elementor-location-header .elementor-menu-toggle {
        display: flex !important;
    }

    /* Nav links: touch-friendly sizing */
    .elementor-nav-menu a,
    .elementor-nav-menu--dropdown a,
    .elementor-nav-menu--main .elementor-item {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        padding: 12px 20px !important;
    }
}

/* ── Why Choose Us (page-id-34) Mobile Fixes ───────────────────────────────── */

/* C2: Hide broken WCU video embed — renders as 500px black rectangle */
body.page-id-34 .elementor-widget-video {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Step 1: Sticky bar button colors — server PHP injects wrong tokens; M-13 cream redesign */
.lasso-mobile-bar .call-btn {
    background-color: var(--lasso-red) !important;
    color: #ffffff !important;
}
.lasso-mobile-bar .quote-btn,
.lasso-mobile-bar a[href*="quote"],
.lasso-mobile-bar .lasso-mobile-bar-quote {
    background-color: var(--lasso-surface, #F5F0E8) !important;
    color: var(--lasso-navy, #1B2B3A) !important;
    border: none !important;
    font-weight: 700 !important;
}

/* Step 2: Touch target for plain inline links in Gutenberg paragraphs (WCU page) */
/* Note: Link lives in .ast-container p, not .entry-content (Gutenberg layout) */
body.page-id-34 p a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Step 3: Body paragraph font-size — Elementor/Astra default scales to 14.4px; spec is 16px */
body.page-id-34 p {
    font-size: 16px !important;
}


/* ==========================================================================
   14. QUICK MOBILE FIXES (M-05, M-15, M-16, M-21, M-25)
   ========================================================================== */

/* M-15: Form inputs 48px for comfortable touch targets */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    min-height: 48px !important;
}

/* M-16: Replace hover transforms with :active feedback on mobile */
.elementor-button:active,
.lasso-float-cta:active {
    transform: scale(0.97) !important;
    transition: transform 100ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* M-21: Hide floating CTA — sticky mobile bar provides persistent CTA */
.lasso-float-cta {
    display: none !important;
}

/* M-25: Alternate surface-warm backgrounds for visual rhythm */
.elementor-17 .elementor-section:nth-of-type(even) {
    background-color: var(--lasso-surface-warm, #EDE5D8) !important;
}

/* ═══ PHASE 2: Mobile Scroll Reduction (M-06, M-07, M-08, M-14) ═══ */

/* M-06: Hide FAQ accordion on mobile homepage — content moved to dedicated FAQ page */
.elementor-17 .lasso-faq-section,
.elementor-17 .elementor-widget-nested-accordion {
    display: none !important;
}

/* M-07: Hide service area city chips on mobile — replace with summary text */
.elementor-17 .lasso-city-pills,
.elementor-17 .lasso-service-areas .elementor-widget-button-grid {
    display: none !important;
}

/* M-08: Hide Google Map iframe on mobile — prevents scroll-jacking */
.elementor-17 .lasso-map-section iframe,
.elementor-17 .elementor-widget-google_maps iframe {
    display: none !important;
}
.elementor-17 .elementor-widget-google_maps {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
}

/* ==========================================================================
   15. WHY CHOOSE US (page-id-34) + WARRANTIES (page-id-38) MOBILE UX FIXES
   User feedback: 2026-03-17 — contrast, dead images, process icons, layout
   ========================================================================== */

/* UF-1: Fix hero subtitle/text contrast on WCU + Warranties pages.
   Hero background is very dark; default --lasso-navy text is invisible.
   NOTE: WCU page does NOT have .lasso-hero class — target by page + trust bar + first sections */
body.page-id-34 .lasso-hero span,
body.page-id-34 .lasso-hero p,
body.page-id-34 .lasso-hero h1,
body.page-id-34 .lasso-hero h2,
body.page-id-34 .lasso-hero h3,
body.page-id-34 .lasso-hero h4,
body.page-id-34 .lasso-hero .elementor-heading-title,
body.page-id-34 .lasso-hero .elementor-widget-text-editor,
body.page-id-34 .lasso-hero-trust-bar,
body.page-id-34 .lasso-hero-trust-bar span,
body.page-id-34 .lasso-hero-trust-bar p,
body.page-id-34 .elementor-element-67222c3 span,
body.page-id-34 .elementor-element-67222c3 p,
body.page-id-34 .elementor-element-4f83135 span,
body.page-id-34 .elementor-element-4f83135 p,
body.page-id-38 .lasso-hero span,
body.page-id-38 .lasso-hero p,
body.page-id-38 .lasso-hero h1,
body.page-id-38 .lasso-hero h2,
body.page-id-38 .lasso-hero h3,
body.page-id-38 .lasso-hero h4,
body.page-id-38 .lasso-hero .elementor-heading-title,
body.page-id-38 .lasso-hero .elementor-widget-text-editor,
body.page-id-38 .lasso-hero-trust-bar,
body.page-id-38 .lasso-hero-trust-bar span {
    color: var(--lasso-text-inverse, #F2EDE3) !important;
}

/* UF-2: Hide decorative/broken image columns on WCU numbered sections (#1–#4).
   These 550px images occupy half the mobile viewport and push text aside.
   Image-only columns (no heading/text widgets) are hidden; text columns remain. */
body.page-id-34 .elementor-section .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-image):not(:has(.elementor-widget-heading)):not(:has(.elementor-widget-text-editor)) {
    display: none !important;
}
/* Fallback: constrain any remaining WCU section images to not overflow */
body.page-id-34 .elementor-section .elementor-widget-image img {
    max-width: 100% !important;
    height: auto !important;
}

/* UF-3: Reduce "Our Process" step icons on WCU page (default 320×320px → 48px).
   NOTE: Process containers do NOT have .lasso-process or [class*=process] —
   they use generic Elementor classes. Target by alt text pattern and page scope.
   Also ensures the step cards stack as single column on mobile. */
body.page-id-34 .lasso-process__step img,
body.page-id-34 [class*="process"] .elementor-widget-image img,
body.page-id-34 .lasso-process-steps .elementor-widget-image img,
body.page-id-34 .elementor-section .elementor-widget-image img[alt*="process"],
body.page-id-34 .elementor-section .elementor-widget-image img[alt*="step"],
body.page-id-34 .elementor-section .elementor-widget-image img[alt*="Reach Out"],
body.page-id-34 .elementor-section .elementor-widget-image img[alt*="Inspection"],
body.page-id-34 .elementor-section .elementor-widget-image img[alt*="proposal"],
body.page-id-34 .elementor-section .elementor-widget-image img[alt*="Scheduled"],
body.page-id-34 .elementor-section .elementor-widget-image img[alt*="installation"],
body.page-id-34 .elementor-section .elementor-widget-image img[alt*="assurance"],
body.page-id-34 .elementor-section .elementor-widget-image img[alt*="pricing"],
body.page-id-34 .elementor-element .elementor-widget-image img[alt*="process"],
body.page-id-34 .elementor-element .elementor-widget-image img[alt*="pricing"],
body.page-id-34 .elementor-element .elementor-widget-image img[alt*="proposal"],
body.page-id-34 .elementor-element .elementor-widget-image img[alt*="Reach"],
body.page-id-34 .elementor-element .elementor-widget-image img[alt*="Scheduled"],
body.page-id-34 .elementor-element .elementor-widget-image img[alt*="installation"],
body.page-id-34 .elementor-element .elementor-widget-image img[alt*="assurance"] {
    max-width: 48px !important;
    max-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
    display: block !important;
    margin: 0 auto 8px !important;
    object-fit: contain !important;
}
body.page-id-34 .lasso-process-steps,
body.page-id-34 [class*="process-steps"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}
body.page-id-34 .lasso-process-steps > .e-con,
body.page-id-34 .lasso-process-steps > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
}

/* UF-4: Warranties page (page-id-38) — contrast fixes for dark sections.
   Covers hero and any dark-background content sections. */
body.page-id-38 .lasso-hero .elementor-widget,
body.page-id-38 .lasso-hero .elementor-widget * {
    color: var(--lasso-text-inverse, #F2EDE3) !important;
}

/* UF-5: Force single-column, full-width layout on WCU + Warranties on mobile.
   Prevents desktop 2-col flex rows from splitting content at 393px. */
body.page-id-34 .elementor-row,
body.page-id-34 .e-con-inner,
body.page-id-38 .elementor-row,
body.page-id-38 .e-con-inner {
    flex-direction: column !important;
    max-width: 100% !important;
}
body.page-id-34 .elementor-column,
body.page-id-38 .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
}