/* ==========================================================================
   LASSO DESKTOP CSS — min-width: 769px+
   Includes tablet landscape and desktop rules.
   Consolidated from 14 source files. Do NOT add new files.
   ========================================================================== */

@media (min-width: 1025px) {
    .ast-mobile-header-wrap {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* BUG-T01: Logo clipped at tablet width
       Fix: 150px clipped "G" from "LASSO ROOFING" — increased to 200px (QA 2026-03-17)
       Also fix container 56fc079 width and link overflow to prevent clipping */
    .custom-logo,
    .ast-site-identity img,
    header img[src*="logo"] {
        max-width: 200px !important;
        height: auto !important;
    }
    /* Logo container: Elementor sets --width:29% which computes to ~151px at 769px.
       Override to ensure logo has enough room for full "LASSO ROOFING" text. */
    .elementor-location-header .elementor-element-56fc079 {
        --width: 220px !important;
        min-width: 200px !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
    }
    /* Logo link wrapper: remove overflow:hidden that clips the enlarged logo image */
    .elementor-location-header .elementor-element-c3b2530 a {
        overflow: visible !important;
        width: auto !important;
    }

    /* Show some nav links at tablet if there's room */
    /* This requires Elementor nav breakpoint adjustment — see PROJECT-PLAN.md Phase 6 */

    /* T2: Hero blank space below hero text */
    .elementor-17 .elementor-element-75a7995 {
        margin-bottom: 0 !important;
        padding-bottom: 20px !important;
    }
}

@media (min-width: 1024px) {
    .elementor-column:has(.elementor-widget-form),
    .elementor-col-50:has(.elementor-widget-form) {
        background-color: #ffffff !important;
        border-radius: var(--radius-md) !important;
        padding: 32px !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
    }
    .elementor-widget-form label,
    .elementor-widget-form .elementor-field-label {
        color: #1B2B3A !important;
        font-weight: 600 !important;
    }
    .elementor-widget-form .elementor-field-group {
        margin-bottom: 16px !important;
    }
    /* Form input fields — readable on white card */
    .elementor-widget-form input,
    .elementor-widget-form textarea,
    .elementor-widget-form select {
        background-color: #f9f9f9 !important;
        border: 1px solid #e2e8f0 !important;
        color: #1B2B3A !important;
        border-radius: var(--radius-md) !important;
    }
}

@media (min-width: 1024px) {
    .elementor-row:has(.elementor-widget-counter) {
        display: flex !important;
        justify-content: space-around !important;
        align-items: baseline !important; /* AUDIT: Counter baseline alignment */
        flex-wrap: nowrap !important;
        gap: 24px !important;
    }
    .elementor-widget-counter {
        text-align: center !important;
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .elementor-counter-number-wrapper {
        font-family: var(--font-accent, 'Barlow Condensed', sans-serif) !important;
        font-size: clamp(3.5rem, 5vw, 4.5rem) !important; /* D-15: commanding stats at desktop */
        line-height: 1 !important;
        color: var(--lasso-navy, #1B2B3A) !important;
        align-self: baseline !important;
    }
    .elementor-counter-title {
        font-size: 14px !important;
        color: var(--lasso-brown, #8B7355) !important;
        text-transform: uppercase !important;
        letter-spacing: var(--tracking-wide, 0.04em) !important;
        margin-top: 4px !important;
        white-space: nowrap !important;
        align-self: baseline !important;
    }
    /* Footer columns top-alignment */
    .elementor-location-footer .elementor-container,
    .elementor-location-footer .elementor-row,
    .elementor-location-footer .elementor-section,
    .elementor-location-footer .elementor-widget-wrap {
        align-items: flex-start !important;
    }
    /* Header logo and Call Now button padding
       Fix: removed 20px side padding that clipped logo text at 769px (QA 2026-03-17) */
    .custom-logo-link img,
    .custom-logo,
    img[alt*="Lasso Roofing logo"] {
        max-width: 200px !important;
        width: auto !important;
        height: auto !important;
        aspect-ratio: 1045 / 443;
        object-fit: contain !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .ast-header-custom-item a[href^="tel:"],
    .elementor-widget-text-editor a[href^="tel:"],
    header a[href^="tel:"] {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: #BF3A2B !important;
        font-family: 'Outfit', sans-serif !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: var(--radius-md) !important;
    }
    header a[href^="tel:"]:hover {
        color: #9E2E20 !important;
    }
    /* Header CTA button border-radius and min size */
    .ast-primary-header-bar .elementor-button,
    .main-header-bar .elementor-button {
        background-color: #BF3A2B !important;
        color: #ffffff !important;
        border-radius: var(--radius-md) !important;
        min-width: 44px !important;
        min-height: 48px !important;
    }
    /* Eyebrow H3 before H1 — visual differentiation (desktop) */
    h3.eyebrow, .eyebrow-h3, h3.eyebrow-before-h1 {
        font-size: 0.85rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.15em !important;
        font-weight: 600 !important;
        color: var(--lasso-red) !important;
        margin-bottom: 0.5rem !important;
    }
    /* N2 (P1) FIX: Hero eyebrow H3 — cream on cream is invisible on desktop.
       Override shared CSS cream (#F5F0E8) to red (#BF3A2B) to match mobile.
       Must match specificity of shared rule: .elementor-17 .lasso-hero > .elementor-widget-heading:first-child h3.elementor-heading-title */
    .elementor-17 .lasso-hero > .elementor-widget-heading:first-child h3.elementor-heading-title,
    .elementor-17.elementor-17 .elementor-element-a34487d h3.elementor-heading-title,
    .elementor-17.elementor-17 .lasso-hero h3.elementor-heading-title {
        color: #BF3A2B !important;
        text-shadow: none !important;
    }
}

@media (min-width: 1024px) {
    /* Section background → navy */
    .elementor-section:has(.elementor-widget-icon-box) {
        background-color: #1B2B3A !important;
    }
    /* Cards → white with hover lift */
    .elementor-icon-box-wrapper {
        background-color: #ffffff !important;
        border-radius: var(--radius-md) !important;
        padding: 32px 24px !important;
        border-top: 3px solid transparent !important;
        transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    .elementor-icon-box-wrapper:hover {
        border-top-color: #BF3A2B !important;
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
    }
    /* Icon → navy on white card */
    .elementor-icon-box-wrapper .elementor-icon i,
    .elementor-icon-box-wrapper .elementor-icon svg {
        color: #BF3A2B !important;
        fill: #BF3A2B !important;
    }
    /* Title → navy */
    .elementor-icon-box-wrapper .elementor-icon-box-title,
    .elementor-icon-box-wrapper .elementor-icon-box-title a {
        color: #1B2B3A !important;
    }
    /* Description → body color */
    .elementor-icon-box-wrapper .elementor-icon-box-description {
        color: #4a5568 !important;
    }
    /* Buttons → red, replacing any orange */
    .elementor-icon-box-wrapper .elementor-button,
    .elementor-icon-box-wrapper a.elementor-button {
        background-color: #BF3A2B !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: var(--radius-md) !important;
    }
    .elementor-icon-box-wrapper .elementor-button:hover,
    .elementor-icon-box-wrapper a.elementor-button:hover {
        background-color: #9E2E20 !important;
    }
}

@media (min-width: 1024px) {
    .elementor-section[style*="#BF3A2B"],
    .elementor-section[style*="#BF3A2B"],
    .elementor-section[style*="rgb(232, 119, 34)"] {
        background-color: #1B2B3A !important;
    }
    /* Text on these sections → cream */
    .elementor-section[style*="#BF3A2B"] *,
    .elementor-section[style*="#BF3A2B"] *,
    .elementor-section[style*="rgb(232, 119, 34)"] * {
        color: #F5F0E8 !important;
    }
    /* Buttons within orange bars → red */
    .elementor-section[style*="#BF3A2B"] .elementor-button,
    .elementor-section[style*="#BF3A2B"] .elementor-button,
    .elementor-section[style*="rgb(232, 119, 34)"] .elementor-button {
        background-color: #BF3A2B !important;
        color: #ffffff !important;
    }
}

@media (min-width: 1024px) {
    /* D-15: Section H2s smaller — subordinate to hero (was 52px, now 36-48px) */
    .elementor-widget-heading h2.elementor-heading-title,
    h2.elementor-heading-title {
        font-size: clamp(2.25rem, 3vw, 3rem) !important;
        font-family: 'DM Serif Display', serif !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em !important;
    }
    .elementor-widget-heading h3,
    h3.elementor-heading-title {
        font-size: clamp(22px, 2vw, 32px) !important;
        font-family: 'DM Serif Display', serif !important;
        line-height: 1.2 !important;
    }
    /* ALL CAPS headings in formerly-orange bars → title case visual treatment */
    .elementor-section[style*="#BF3A2B"] .elementor-widget-heading h2,
    .elementor-section[style*="#BF3A2B"] .elementor-widget-heading h2,
    .elementor-section[style*="rgb(232, 119, 34)"] .elementor-widget-heading h2 {
        text-transform: none !important;
        font-size: 40px !important;
        color: #ffffff !important;
    }
}

@media (min-width: 1024px) {
    .elementor-widget-image-carousel .swiper-slide {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .elementor-widget-image-carousel img {
        max-height: 60px !important;
        width: auto !important;
        object-fit: contain !important;
        filter: grayscale(100%) !important;
        opacity: 1 !important;
        transition: opacity 0.3s !important;
    }
    .elementor-widget-image-carousel img:hover {
        filter: grayscale(0%) !important;
        opacity: 1 !important;
    }
}

@media (min-width: 1024px) {
    .elementor-widget-icon-list .elementor-icon-list-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 20px !important;
        margin-bottom: 24px !important;
    }
    .elementor-icon-list-icon {
        flex-shrink: 0 !important;
        width: 56px !important;
        height: 56px !important;
        background-color: #1B2B3A !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
    }
    /* Process steps section → light cream background */
    .elementor-section:has(.elementor-widget-icon-list) {
        background-color: #F5F0E8 !important;
    }
    /* Icon list text → navy */
    .elementor-widget-icon-list .elementor-icon-list-text {
        color: #1B2B3A !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
}

@media (min-width: 1024px) {
    .widget_media_image a img,
    footer .ast-social-links a,
    footer .ast-custom-widget-tag a,
    .footer-social-icons a,
    .ast-footer-widget .ast-social-links a,
    .ast-site-footer .ast-social-links a,
    .elementor-social-icons-wrapper .elementor-icon,
    .elementor-social-icon {
        color: #ffffff !important;
        fill: #ffffff !important;
    }
    .elementor-social-icon:hover,
    footer .ast-social-links a:hover {
        color: #D4A843 !important;
        fill: #D4A843 !important;
        background-color: transparent !important;
    }
    /* Force SVG icon color */
    .elementor-social-icon svg path,
    footer .ast-social-links a svg path {
        fill: #ffffff !important;
    }
    .elementor-social-icon:hover svg path,
    footer .ast-social-links a:hover svg path {
        fill: #D4A843 !important;
    }
}

@media (min-width: 1024px) {
    .ast-footer-copyright,
    .footer-copyright-wrap,
    #ast-hf-custom-footer-1,
    .site-below-footer-wrap,
    [class*="footer-bar"],
    [class*="footer-bottom"] {
        background-color: #0B1520 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    .ast-footer-copyright *,
    .footer-copyright-wrap *,
    .site-below-footer-wrap * {
        color: #a0aec0 !important;
    }
    .ast-footer-copyright a,
    .footer-copyright-wrap a {
        color: #F5F0E8 !important;
    }
    .ast-footer-copyright a:hover {
        color: #D4A843 !important;
    }
}

@media (min-width: 1024px) {
    .elementor-widget-posts .elementor-posts-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }
    .elementor-post {
        background-color: #ffffff !important;
        border-radius: var(--radius-md) !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        transition: box-shadow 0.2s ease !important;
    }
    .elementor-post:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    }
    .elementor-post .elementor-post__thumbnail img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
    }
    .elementor-post__text {
        padding: 20px !important;
    }
    .elementor-post__title a {
        font-family: 'DM Serif Display', serif !important;
        color: #1B2B3A !important;
        font-size: 18px !important;
    }
    .elementor-post__excerpt p {
        font-size: 14px !important;
        color: var(--lasso-text, #2A3340) !important;
    }
}

@media (min-width: 1024px) {
    .elementor-widget-form .elementor-field-type-submit button,
    .elementor-widget-form .elementor-field-type-submit .elementor-button,
    .elementor-form .elementor-button[type="submit"] {
        background-color: #BF3A2B !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        border-radius: 6px !important;
        border: none !important;
        width: 100% !important;
        min-height: 50px !important;
    }
    .elementor-widget-form .elementor-field-type-submit button:hover,
    .elementor-form .elementor-button[type="submit"]:hover {
        background-color: #9E2E20 !important;
    }
}

@media (min-width: 1024px) {
    .ast-header-custom-item a[href^="tel:"],
    .elementor-widget-text-editor a[href^="tel:"],
    header a[href^="tel:"] {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: #BF3A2B !important;
        font-family: 'Outfit', sans-serif !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: var(--radius-md) !important;
    }
    header a[href^="tel:"]:hover {
        color: #9E2E20 !important;
    }
}

@media (min-width: 1024px) {
    /* Orange buttons → red */
    .elementor-button[style*="#BF3A2B"],
    .elementor-button[style*="#BF3A2B"],
    .elementor-button[style*="rgb(232, 119, 34)"],
    a.elementor-button[style*="#BF3A2B"],
    a.elementor-button[style*="#BF3A2B"] {
        background-color: #BF3A2B !important;
        border-color: #BF3A2B !important;
        color: #ffffff !important;
    }
    /* Ensure .ast- theme buttons also follow the red system */
    .ast-primary-header-bar .elementor-button,
    .main-header-bar .elementor-button {
        background-color: #BF3A2B !important;
        color: #ffffff !important;
        border-radius: 6px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .custom-logo,
    .ast-site-identity img,
    .site-logo img,
    .ast-mobile-site-logo img {
        max-width: 200px !important;
        max-height: 55px !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    /* Ensure the logo container doesn't clip */
    .site-logo,
    .ast-site-identity,
    .ast-logo-container {
        overflow: visible !important;
        flex-shrink: 0 !important;
        min-width: 180px !important;
    }
    /* Header flex layout — give logo room */
    .ast-mobile-header-wrap,
    .main-header-bar-wrap .main-header-bar .ast-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        overflow: visible !important;
    }
}

/* Tablet: show hamburger, hide desktop nav links (Issue #1, Rule 9) */
@media (min-width: 769px) and (max-width: 1024px) {
    .elementor-menu-toggle {
        display: flex !important;
        width: 44px !important;
        height: 44px !important;
    }
    .elementor-location-header .elementor-nav-menu--main {
        display: none !important;
    }
    /* Nav widget container — allow dropdown on tablet too */
    .elementor-location-header .elementor-element-4d7f600 {
        min-height: 48px !important;
        overflow: visible !important;
    }
}

/* D-06 (tablet): Hero H1 scaling for tablet viewport */
@media (min-width: 769px) and (max-width: 1024px) {
    .lasso-hero h1.elementor-heading-title {
        font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
    }
}

/* Desktop: hide hamburger, show nav links (Issue #1, Rule 9) */
@media (min-width: 1025px) {
    .elementor-menu-toggle,
    .ast-mobile-menu-trigger,
    .menu-toggle,
    .ast-button-wrap.ast-mobile-menu-trigger {
        display: none !important;
    }
    .elementor-location-header .elementor-nav-menu--main {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .elementor-location-header .elementor-nav-menu--main .elementor-item {
        display: inline-flex !important;
        align-items: center !important;
        min-height: var(--touch-target, 44px) !important;
    }
    /* Nav widget: no height cap at desktop */
    .elementor-location-header .elementor-element-4d7f600 {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    /* CTA button: ensure visible at desktop (Issue #3, #35) */
    .elementor-location-header .elementor-widget-button .elementor-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: max-content !important;
        min-height: var(--touch-target-lg, 48px) !important;
        padding: 12px 24px !important;
        background-color: var(--lasso-red, #BF3A2B) !important;
        color: var(--lasso-white, #FFFFFF) !important;
        border-radius: var(--radius-md, 6px) !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
    }
    /* Utility bar (section 67222c3): must be visible at desktop for CTA
     * UF-06: Add navy background for contrast when scrolling over light sections */
    .elementor-location-header .elementor-element-67222c3 {
        display: flex !important;
        background-color: var(--lasso-navy, #0D1B2A) !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Show desktop nav links */
    #ast-hf-menu-1,
    .main-header-bar-navigation,
    .ast-primary-menu-disabled,
    .main-navigation {
        display: flex !important;
        visibility: visible !important;
    }
    /* Compact nav link sizing for tablet */
    .main-header-menu .menu-item > a,
    #ast-hf-menu-1 .menu-item > a {
        font-size: 13px !important;
        padding: 8px 10px !important;
        font-weight: 600 !important;
        color: var(--lasso-text-inverse, #F2EDE3) !important;
        white-space: nowrap !important;
    }
    .main-header-menu .menu-item > a:hover,
    #ast-hf-menu-1 .menu-item > a:hover {
        color: var(--lasso-red, #BF3A2B) !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Cards → white on navy background (same as desktop) */
    .elementor-section:has(.elementor-widget-icon-box) {
        background-color: #1B2B3A !important;
    }
    .elementor-icon-box-wrapper {
        background-color: #ffffff !important;
        border-radius: var(--radius-md) !important;
        padding: 24px 20px !important;
    }
    .elementor-icon-box-wrapper .elementor-icon-box-title,
    .elementor-icon-box-wrapper .elementor-icon-box-title a {
        color: #1B2B3A !important;
    }
    .elementor-icon-box-wrapper .elementor-icon-box-description {
        color: #4a5568 !important;
    }
    .elementor-icon-box-wrapper .elementor-button,
    .elementor-icon-box-wrapper a.elementor-button {
        background-color: #BF3A2B !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 6px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* For image-backed service tiles, ensure text is readable */
    .elementor-widget-image-box .elementor-image-box-img img {
        border-radius: 8px !important;
    }
    /* Services main page card tiles with photographic backgrounds */
    .elementor-section .elementor-column .elementor-widget-wrap:has(img) {
        position: relative !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Hide sticky CTA bar entirely on the Contact page */
    body.page-template-contact .lasso-sticky-bar,
    body.page-template-contact [class*="sticky-cta"],
    body.page-template-contact [class*="sticky-bar"],
    .ast-page-builder-template .lasso-sticky-bar {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* N1 (P0) FIX: Hero row must stack at tablet — two-column too narrow for form */
    .elementor-element-678931f {
        flex-direction: column !important;
    }
    /* N1 (P0) FIX: Form column — remove desktop padding that crushes form inputs */
    .elementor-element-ce292e6 {
        padding: 0px 20px 32px 20px !important;
        width: 100% !important;
    }
    .elementor-element-d35239c {
        padding: 24px !important;
    }
    /* Form widget container — reasonable padding */
    .e-con:has(.elementor-form) {
        padding: 24px !important;
        background-color: #1B2B3A !important;
        border-radius: var(--radius-md) !important;
    }
    /* Form column → navy background (remove purple/violet) */
    .elementor-column:has(.elementor-widget-form) {
        background-color: #1B2B3A !important;
        border-radius: var(--radius-md) !important;
        padding: 24px !important;
    }
    /* Labels → white/cream on dark navy */
    .elementor-column:has(.elementor-widget-form) .elementor-widget-form label,
    .elementor-column:has(.elementor-widget-form) .elementor-field-label,
    .e-con:has(.elementor-form) label,
    .e-con:has(.elementor-form) .elementor-field-label {
        color: #F5F0E8 !important;
        font-weight: 600 !important;
    }
    /* Inputs → white with navy text, FULL WIDTH */
    .elementor-column:has(.elementor-widget-form) input,
    .elementor-column:has(.elementor-widget-form) textarea,
    .elementor-column:has(.elementor-widget-form) select,
    .e-con:has(.elementor-form) input,
    .e-con:has(.elementor-form) textarea,
    .e-con:has(.elementor-form) select,
    .elementor-form input,
    .elementor-form textarea,
    .elementor-form select {
        background-color: #ffffff !important;
        color: #1B2B3A !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: var(--radius-md) !important;
        width: 100% !important;
        min-height: 44px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }
    /* N1 (P0) FIX: Form field groups must be full-width at tablet */
    .elementor-form .elementor-field-group {
        width: 100% !important;
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
    .elementor-form .elementor-field-textual,
    .elementor-form .elementor-field {
        width: 100% !important;
    }
    /* Submit button → red */
    .elementor-column:has(.elementor-widget-form) .elementor-button[type="submit"],
    .elementor-column:has(.elementor-widget-form) .elementor-field-type-submit button {
        background-color: #BF3A2B !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        border-radius: var(--radius-md) !important;
        width: 100% !important;
        min-height: 48px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Stats counter typography at tablet — layout handled by 768-900/901+ canonical blocks below */
    .elementor-widget-counter {
        text-align: center !important;
        padding: 20px !important;
    }
    .elementor-counter-number-wrapper {
        font-family: var(--font-accent, 'Barlow Condensed', sans-serif) !important;
        font-size: clamp(2.8rem, 5vw, 3.5rem) !important; /* T-14: commanding stats at tablet */
        color: var(--lasso-navy, #1B2B3A) !important;
        line-height: 1 !important;
    }
    .elementor-counter-title {
        font-size: 14px !important;
        color: var(--lasso-brown, #8B7355) !important;
        text-transform: uppercase !important;
        letter-spacing: var(--tracking-wide, 0.04em) !important;
        margin-top: 6px !important;
        font-weight: 600 !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .footer-widget-area .ast-row,
    #colophon .ast-container,
    .ast-footer-widget-area .ast-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;
    }
    .footer-widget-area .widget,
    .ast-footer-widget-area .widget {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-section[style*="#BF3A2B"],
    .elementor-section[style*="#BF3A2B"],
    .elementor-section[style*="rgb(232, 119, 34)"] {
        background-color: #1B2B3A !important;
    }
    .elementor-section[style*="#BF3A2B"] *,
    .elementor-section[style*="#BF3A2B"] *,
    .elementor-section[style*="rgb(232, 119, 34)"] * {
        color: #F5F0E8 !important;
    }
    /* Orange buttons within these sections → red */
    .elementor-section[style*="#BF3A2B"] .elementor-button,
    .elementor-section[style*="#BF3A2B"] .elementor-button {
        background-color: #BF3A2B !important;
        color: #ffffff !important;
    }
    /* Remaining orange standalone buttons → red */
    .elementor-button[style*="#BF3A2B"],
    .elementor-button[style*="#BF3A2B"],
    a.elementor-button[style*="#BF3A2B"] {
        background-color: #BF3A2B !important;
        border-color: #BF3A2B !important;
        color: #ffffff !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Social icons → white */
    footer .ast-social-links a,
    .elementor-social-icons-wrapper .elementor-icon,
    .elementor-social-icon {
        color: #ffffff !important;
        fill: #ffffff !important;
    }
    .elementor-social-icon:hover,
    footer .ast-social-links a:hover {
        color: #D4A843 !important;
        fill: #D4A843 !important;
    }
    .elementor-social-icon svg path,
    footer .ast-social-links a svg path {
        fill: #ffffff !important;
    }
    .elementor-social-icon:hover svg path {
        fill: #D4A843 !important;
    }
    /* Orange copyright bar → dark navy */
    .ast-footer-copyright,
    .footer-copyright-wrap,
    .site-below-footer-wrap,
    [class*="footer-bar"],
    [class*="footer-bottom"] {
        background-color: #0B1520 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    .ast-footer-copyright *,
    .footer-copyright-wrap *,
    .site-below-footer-wrap * {
        color: #a0aec0 !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .ast-header-custom-item a[href^="tel:"],
    header a[href^="tel:"] {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        color: #BF3A2B !important;
        font-family: 'Outfit', sans-serif !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }
    header a[href^="tel:"]:hover {
        color: #9E2E20 !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-section-boxed > .elementor-container {
        max-width: 740px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    /* Ensure headings don't overflow at this breakpoint */
    .elementor-widget-heading h2,
    h2.elementor-heading-title {
        font-size: clamp(28px, 4vw, 40px) !important;
        font-family: 'DM Serif Display', serif !important;
        line-height: 1.15 !important;
    }
    .elementor-widget-heading h3,
    h3.elementor-heading-title {
        font-size: clamp(20px, 3vw, 28px) !important;
        font-family: 'DM Serif Display', serif !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .lasso-process__step {
        min-width: 140px;
        max-width: 160px;
    }
    .lasso-process__step:nth-child(3)::after {
        display: none;
    }
}

@media (min-width: 1024px) {
    /* Target the last column in the hero section (the form side)
       Scoped to .lasso-hero — .elementor-section:first-of-type leaked to all pages */
    .lasso-hero .elementor-column:last-child,
    .lasso-hero .elementor-col-50:last-child {
        background-color: rgba(13, 27, 42, 0.75) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: var(--radius-md) !important;
        padding: 40px 32px !important;
        /* Override the white card box-shadow from BUG-D01 */
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    }
    /* Form heading on dark glass → white */
    .lasso-hero .elementor-column:last-child .elementor-widget-heading h2,
    .lasso-hero .elementor-column:last-child .elementor-widget-heading h3 {
        color: #ffffff !important;
    }
    /* Form labels → cream on dark glass (overrides BUG-D01 navy labels) */
    .lasso-hero .elementor-column:last-child label,
    .lasso-hero .elementor-column:last-child .elementor-field-label {
        color: #F5F0E8 !important;
        font-weight: 600 !important;
    }
    /* Input fields → semi-transparent white on dark glass */
    .lasso-hero .elementor-column:last-child input,
    .lasso-hero .elementor-column:last-child select,
    .lasso-hero .elementor-column:last-child textarea {
        background-color: rgba(255, 255, 255, 0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        color: #ffffff !important;
        border-radius: 8px !important;
    }
    /* White arrow for select on dark glass background */
    .lasso-hero .elementor-column:last-child select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8.5L1 3.5h10L6 8.5z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
    }
    .lasso-hero .elementor-column:last-child input::placeholder,
    .lasso-hero .elementor-column:last-child textarea::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }
    /* Submit button on glass → full red (not ghost) */
    .lasso-hero .elementor-column:last-child .elementor-button[type="submit"],
    .lasso-hero .elementor-column:last-child .elementor-field-type-submit button {
        background-color: #BF3A2B !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        border-radius: 6px !important;
        border: none !important;
        width: 100% !important;
        min-height: 50px !important;
    }
    .lasso-hero .elementor-column:last-child .elementor-button[type="submit"]:hover {
        background-color: #9E2E20 !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Blog/archive hero: hide form column, expand text column on tablet
       Scoped to .lasso-hero — :first-of-type leaked to all sections */
    body.blog .lasso-hero .elementor-col-33:last-child,
    body.archive .lasso-hero .elementor-col-33:last-child,
    body.blog .lasso-hero .elementor-col-50:last-child,
    body.archive .lasso-hero .elementor-col-50:last-child {
        display: none !important;
    }

    body.blog .lasso-hero .elementor-col-66,
    body.archive .lasso-hero .elementor-col-66,
    body.blog .lasso-hero .elementor-col-50:first-child,
    body.archive .lasso-hero .elementor-col-50:first-child {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 768px) {
    /* Elementor icon-box widgets used as service cards */
    .elementor-widget-icon-box .elementor-icon-box-wrapper,
    .lasso-service-card,
    .elementor-widget-icon-box .elementor-widget-container {
        transition: transform 0.25s ease, box-shadow 0.25s ease !important;
        border-radius: var(--radius-md) !important;
    }

    .elementor-widget-icon-box .elementor-icon-box-wrapper:hover,
    .lasso-service-card:hover,
    .elementor-widget-icon-box .elementor-widget-container:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    }

    /* Subtle border on idle state for card definition */
    .elementor-widget-icon-box .elementor-icon-box-wrapper {
        border: 1px solid rgba(13, 27, 42, 0.06) !important;
        padding: 24px !important;
        background-color: #FFFFFF !important;
    }

    /* Hover border color shift */
    .elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
        border-color: rgba(200, 16, 46, 0.15) !important;
    }

    /* "Learn More" link styling inside cards */
    .elementor-icon-box-content .elementor-icon-box-description + a,
    .elementor-icon-box-content a.elementor-button {
        color: #BF3A2B !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        text-decoration: none !important;
        transition: color 0.2s ease !important;
    }

    .elementor-icon-box-content .elementor-icon-box-description + a:hover,
    .elementor-icon-box-content a.elementor-button:hover {
        color: #9E2E20 !important;
        text-decoration: underline !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .lasso-trust-strip img,
    .elementor-widget-image-carousel .swiper-slide img {
        max-height: 32px !important;
    }

    .lasso-trust-strip,
    .elementor-section:has(.elementor-widget-image-carousel) {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    /* Elementor columns containing icon-box (service card) widgets */
    .elementor-column:has(.elementor-widget-icon-box),
    .elementor-col-33:has(.elementor-widget-icon-box),
    .elementor-col-25:has(.elementor-widget-icon-box),
    .e-con:has(.elementor-widget-icon-box) > .e-con-inner > .elementor-element {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

    /* Row / flex container — ensure wrapping with proper gap */
    .elementor-row:has(.elementor-widget-icon-box),
    .e-con-inner:has(.elementor-widget-icon-box) {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    /* Account for gap in width calculations */
    .elementor-column:has(.elementor-widget-icon-box) {
        width: calc(50% - 8px) !important;
        flex: 0 0 calc(50% - 8px) !important;
    }

    /* Service card inner padding — comfortable at 2-col tablet */
    .elementor-widget-icon-box .elementor-icon-box-wrapper {
        padding: 20px !important;
    }

    /* Card description — show 2 lines max at this cramped width */
    .elementor-icon-box-description {
        -webkit-line-clamp: 2 !important;
        max-height: calc(2 * 1.6 * 1rem) !important;
    }
}

@media (min-width: 901px) {
    .elementor-column:has(.elementor-widget-icon-box),
    .elementor-col-33:has(.elementor-widget-icon-box) {
        width: 33.333% !important;
        max-width: 33.333% !important;
        flex: 0 0 33.333% !important;
    }

    .elementor-row:has(.elementor-widget-icon-box),
    .e-con-inner:has(.elementor-widget-icon-box) {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
    }

    /* Account for gap in 3-col width */
    .elementor-column:has(.elementor-widget-icon-box) {
        width: calc(33.333% - 14px) !important;
        flex: 0 0 calc(33.333% - 14px) !important;
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    /* Override the 25% from fix-mobile-ux.css at this narrower range */
    .elementor-widget-counter,
    .elementor-column:has(.elementor-widget-counter) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* Container: flex-wrap to enable 2x2 layout */
    .elementor-row:has(.elementor-widget-counter),
    .e-con-inner:has(.elementor-widget-counter),
    .elementor-container:has(.elementor-widget-counter) {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* Counter numbers: scale down slightly to fit 2-col */
    .elementor-counter-number-wrapper {
        font-size: 2.2rem !important;
    }

    /* Counter titles: ensure legibility */
    .elementor-counter-title {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
}

@media (min-width: 901px) {
    .elementor-widget-counter,
    .elementor-column:has(.elementor-widget-counter) {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }

    .elementor-row:has(.elementor-widget-counter),
    .e-con-inner:has(.elementor-widget-counter),
    .elementor-container:has(.elementor-widget-counter) {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .elementor-counter-number-wrapper {
        font-size: 2.8rem !important;
    }
}

/* ========================================================================
 * QA ROUND 3 — Desktop-Specific Fixes (March 2026)
 * ======================================================================== */
@media (min-width: 769px) {

    /* P2 #16: Nav duplication — hide mobile nav at desktop */
    .ast-mobile-header-wrap,
    .elementor-17 .elementor-location-header .e-con[data-id] + .e-con[data-id]:last-child {
        display: none !important;
    }

}

/* ==========================================================================
   AUDIT REPORT — Desktop UI Fixes (March 2026)
   ========================================================================== */
@media (min-width: 769px) {

    /* Audit Fix 1: Skip-to-content link — proper sr-only sizing */
    a[href="#content"],
    .skip-link,
    a.screen-reader-text {
        position: absolute !important;
        left: -9999px !important;
        width: auto !important;
        height: auto !important;
        padding: 8px 16px !important;
    }
    a[href="#content"]:focus,
    .skip-link:focus,
    a.screen-reader-text:focus {
        position: fixed !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 100000 !important;
        background-color: var(--lasso-navy) !important;
        color: #fff !important;
    }

    /* Audit Fix 2: Header CTA buttons (Call Now, Get Free Quote) — ensure visible sizing */
    .elementor-location-header .elementor-widget-button a.elementor-button {
        display: inline-flex !important;
        min-height: 44px !important;
        min-width: 44px !important;
        align-items: center !important;
        padding: 10px 24px !important;
    }

    /* Audit Fix 3: Footer columns top-alignment */
    .elementor-location-footer .e-con-inner {
        align-items: flex-start !important;
    }

    /* Audit Fix 4: Logo and Call Now asymmetrical padding */
    .elementor-location-header > .e-con > .e-con-inner {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* Audit Fix 5: Eyebrow H3 before H1 — visual differentiation
       SCOPED to .lasso-hero to avoid hitting stat 500+ heading (QA iter 1 fix) */
    .elementor-17 .lasso-hero > .e-con:first-child > .elementor-widget-heading:first-child h3.elementor-heading-title {
        font-size: 0.75rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.15em !important;
        font-weight: 600 !important;
        color: var(--lasso-red) !important;
    }
}

/* QA Iteration 1 Fix: Stat value headings (500+, $0, 24/7) must stay large.
   Generic H3 clamp rule was capping them. Use element-specific selectors. */
@media (min-width: 769px) {
    .elementor-17 .elementor-element-599fd0d h3.elementor-heading-title,
    .elementor-17 .elementor-element-1875adc h3.elementor-heading-title,
    .elementor-17 .elementor-element-new_stat_h1 h3.elementor-heading-title {
        font-size: 56px !important;
        line-height: 1 !important;
        letter-spacing: normal !important;
        text-transform: none !important;
    }
}

/* ========================================================================
 * QA Round 2+3 Desktop Fixes (merged from fix-qa-round2.css 2026-03-07)
 * These rules were in fix-qa-round2.css which was never enqueued after
 * the CSS consolidation. Merging critical desktop-only rules here.
 * ======================================================================== */

@media (min-width: 1025px) {

    /* D6: Hero subtitle at 12px — bump to 20px */
    .elementor-17 .elementor-element-a34487d .elementor-heading-title {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }

    /* D8: Header layout — logo/nav alignment */
    .elementor-location-header .e-con-inner {
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .elementor-location-header .elementor-element-232861b {
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* D10: Hide sticky mobile bar on desktop */
    .lasso-mobile-bar,
    #lasso-mobile-bar,
    [class*="mobile-bar"],
    [class*="sticky-bar"] {
        display: none !important;
    }

    /* D-04: Sticky header on desktop + tablet */
    .elementor-location-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        transition: padding 300ms cubic-bezier(0.25, 1, 0.5, 1),
                    box-shadow 300ms cubic-bezier(0.25, 1, 0.5, 1) !important;
    }
    .elementor-location-header.scrolled {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        padding-block-start: 8px !important;
        padding-block-end: 8px !important;
        box-shadow: 0 12px 40px rgba(22, 30, 40, 0.14) !important;
    }

    /* D12: Accordion label contrast — dark text on light bg */
    .elementor-17 .elementor-element-7a79b65 .e-n-accordion-item-title-text {
        color: #1B2B3A !important;
        font-weight: 700 !important;
    }
    .elementor-17 .elementor-element-7a79b65 .e-n-accordion-item-title {
        background-color: #F5F0E8 !important;
    }

    /* D13: Footer 3-column layout */
    .elementor-location-footer .elementor-element-d9fc8a3 {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    .elementor-location-footer .elementor-element-d9fc8a3 > .e-con {
        flex: 1 !important;
        max-width: 33.33% !important;
    }

    /* D5: Footer social icons — ensure white on dark bg */
    .elementor-location-footer .elementor-social-icon {
        color: #FFFFFF !important;
        fill: #FFFFFF !important;
    }
    .elementor-location-footer .elementor-social-icon svg {
        fill: #FFFFFF !important;
    }

    /* D14: Footer nav links — ensure visibility on dark bg */
    .elementor-location-footer .elementor-element-b73db75 .elementor-icon-list-text {
        color: #FFFFFF !important;
    }

    /* QA4: Stat labels — bump from 14px to 16px on desktop */
    .elementor-17 .elementor-element-abec2f2 .elementor-heading-title.elementor-size-default,
    .elementor-17 .elementor-element-6421931 .elementor-heading-title.elementor-size-default {
        font-size: 16px !important;
    }

    /* QA4: Footer contact info — ensure 15px minimum on desktop */
    .elementor-location-footer p,
    .elementor-location-footer .elementor-text-editor p {
        font-size: 15px !important;
    }

    /* ── PHP Inline Style Migration (Phase 3) ─────────────────────────── */

    /* Stats strip: 4-column layout on desktop (from stats-strip.php) */
    .lasso-stats-strip > .e-con {
        width: 25% !important;
        border-right: 1px solid rgba(13, 27, 42, 0.08) !important;
        border-bottom: none !important;
    }
    .lasso-stats-strip > .e-con:last-child {
        border-right: none !important;
    }
    .lasso-stats-strip > .e-con:nth-child(2n) {
        border-right: 1px solid rgba(13, 27, 42, 0.08) !important;
    }
    .lasso-stat-item h3.elementor-heading-title {
        font-size: 56px !important;
    }
    .lasso-stat-item p.elementor-heading-title {
        font-size: 15px !important;
    }

    /* Brand strip: single row on desktop (from stats-strip.php) */
    .lasso-brand-inner {
        flex-direction: row;
        justify-content: center;
    }
    .lasso-brand-pills {
        flex-wrap: nowrap;
        width: auto;
    }

    /* Process section heading: larger on desktop (from process-timeline.php) */
    .lasso-process-section > .e-con > .elementor-widget-heading h2.elementor-heading-title,
    .lasso-process-section > .elementor-widget-heading h2.elementor-heading-title {
        font-size: 40px !important;
    }

    /* Process connecting line on desktop (from process-timeline.php) */
    .lasso-process-steps::before {
        content: '';
        position: absolute;
        top: 32px;
        left: calc(50px + 20px);
        right: calc(50px + 20px);
        height: 2px;
        background: linear-gradient(90deg, var(--lasso-red, #BF3A2B), rgba(200, 49, 43, 0.2));
        z-index: 0;
    }
}

/* D-06 / D-15: Hero headline redesign — dramatic scale, H2 subordination */
@media (min-width: 1025px) {
    /* D-06: Hero H1 — dramatic scale, 80-88px at desktop */
    .lasso-hero h1.elementor-heading-title {
        font-size: clamp(3.5rem, 6vw, 5.5rem) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em !important;
    }
}

/* Issue #12: Explicit desktop grid for service cards
 * Updated UF-08: 4 cards per row (was 3) */
@media (min-width: 1025px) {
    .elementor-17 .lasso-services-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: var(--gap-card, 16px) !important;
    }
    .elementor-17 .lasso-service-card {
        flex: 1 1 0% !important;
        max-width: calc(25% - 12px) !important;
        min-width: 0 !important;
    }
}

/* D-16: Break boxed layout — full-bleed hero and CTA, varied section spacing */
@media (min-width: 1025px) {
    .elementor-17 .lasso-hero > .e-con-inner {
        max-width: none !important;
    }
    .lasso-cta-banner > .e-con-inner {
        max-width: none !important;
    }

    /* Section spacing: major sections breathe more (use named sections, not nth-child) */
    .elementor-17 .lasso-hero,
    .elementor-17 .lasso-services-section,
    .elementor-17 .lasso-cta-banner {
        padding-top: var(--space-3xl, 6rem) !important;
        padding-bottom: var(--space-3xl, 6rem) !important;
        padding-block-start: var(--space-3xl, 6rem) !important;
        padding-block-end: var(--space-3xl, 6rem) !important;
    }
    .elementor-17 .lasso-faq-section,
    .elementor-17 .lasso-service-areas {
        padding-top: var(--space-2xl, 4rem) !important;
        padding-bottom: var(--space-2xl, 4rem) !important;
        padding-block-start: var(--space-2xl, 4rem) !important;
        padding-block-end: var(--space-2xl, 4rem) !important;
    }
}

/* ==========================================================================
 * TASK 18: Orientation-Aware Hero (T-08, T-09)
 * ========================================================================== */

/* T-08: Tablet landscape — side-by-side hero */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .lasso-hero .elementor-row,
    .lasso-hero .e-con-inner {
        flex-direction: row !important;
        gap: 32px !important;
    }
    .lasso-hero .elementor-col-50:first-child {
        flex: 0 0 55% !important;
    }
    .lasso-hero .elementor-col-50:last-child {
        flex: 0 0 42% !important;
    }
}

/* T-08: Tablet portrait — stacked hero */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .lasso-hero .elementor-row,
    .lasso-hero .e-con-inner {
        flex-direction: column !important;
    }
}

/* T-09: Featured storm card at narrow tablet */
@media (min-width: 769px) and (max-width: 900px) {
    .elementor-17 .lasso-services-section .elementor-column:first-child {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .elementor-17 .lasso-services-section .elementor-column:first-child .elementor-icon-box-wrapper {
        flex-direction: row !important;
        align-items: center !important;
        gap: 24px !important;
        padding: 28px 32px !important;
        border-left: 4px solid var(--lasso-red, #BF3A2B) !important;
    }
}

/* ==========================================================================
 * TASK 18A: Tablet Polish (T-10, T-13, T-15, T-17, T-18)
 * ========================================================================== */

/* T-13: 2-column FAQ at tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .elementor-widget-accordion .elementor-accordion {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px 24px !important;
    }
}

/* T-15: 2-column form short fields at tablet
   NOTE: Overrides the full-width rule (N1 fix) for the first two fields only */
@media (min-width: 769px) and (max-width: 1024px) {
    .elementor-form .elementor-field-group:nth-child(1),
    .elementor-form .elementor-field-group:nth-child(2) {
        width: 48% !important;
        flex-basis: 48% !important;
        display: inline-block !important;
    }
}

/* T-10: Touch target active states for tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .elementor-icon-box-wrapper:active {
        transform: scale(0.98) !important;
    }
}

/* T-17: Trust strip logos 44px at tablet
   NOTE: Increases from 32px (BUG-T02 fix at 768-1024px) to 44px at 769-1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .lasso-trust-strip img,
    .elementor-widget-image-carousel .swiper-slide img {
        max-height: 44px !important;
    }
}

/* T-18: Section spacing 48px at tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .elementor-section,
    .elementor-top-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        padding-block-start: 48px !important;
        padding-block-end: 48px !important;
    }
    .lasso-hero {
        padding-top: 0 !important;
        padding-block-start: 0 !important;
    }
}

/* ==========================================================================
 * DESKTOP UX FEEDBACK FIXES (2026-03-17)
 * ========================================================================== */

@media (min-width: 1025px) {

    /* UF-01: Hide phone icon circle in header top bar
     * The blue circle with phone SVG is removed; phone number text remains */
    .elementor-location-header .elementor-element-21c4d3f .elementor-icon-list-icon {
        display: none !important;
    }

    /* UF-02: Align top bar items horizontally on one line
     * Contact US, phone number, AI Instant Quote, CTA button — single row */
    .elementor-location-header .elementor-element-07f3a7e {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 24px !important;
        flex-wrap: nowrap !important;
    }
    .elementor-location-header .elementor-element-21c4d3f {
        flex-shrink: 0 !important;
    }
    .elementor-location-header .elementor-element-21c4d3f .elementor-icon-list-items {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 24px !important;
    }
    /* Top bar text must be white/cream on navy background */
    .elementor-location-header .elementor-element-21c4d3f .elementor-icon-list-text {
        color: var(--lasso-white, #FFFFFF) !important;
    }
    .elementor-location-header .elementor-element-c5ea0f0 {
        flex-shrink: 0 !important;
    }

    /* UF-03: Widen hero heading text box so "Free Roof Inspections
     * for Houston Homeowners" doesn't overflow the cream background */
    .elementor-17 .lasso-hero .elementor-element-5c6ff64 {
        max-width: 720px !important;
        width: 100% !important;
        padding: 48px 40px !important;
    }

    /* UF-04: Hero text box and Get Started form — aligned horizontally
     * Ensure the inner row stays side-by-side with proper proportions */
    .elementor-17 .lasso-hero .elementor-element-678931f {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 40px !important;
    }
    .elementor-17 .lasso-hero .elementor-element-6e131e8 {
        flex: 1 1 55% !important;
        max-width: 55% !important;
    }
    .elementor-17 .lasso-hero .elementor-element-ce292e6 {
        flex: 1 1 40% !important;
        max-width: 40% !important;
    }

    /* UF-05: Logo — increase max-width so full text is visible.
     * Natural image is 1584x672 (2.36:1 ratio). Container is ~271px.
     * Need enough width to show "LASSO ROOFING" clearly */
    .elementor-location-header .elementor-element-c3b2530 img {
        max-width: 320px !important;
        width: 320px !important;
        height: auto !important;
        object-fit: contain !important;
    }
    .elementor-location-header .elementor-element-56fc079 {
        min-width: 340px !important;
        flex-shrink: 0 !important;
    }

    /* UF-06: Nav menu + header background contrast when scrolling
     * Add dark navy background to header so nav text remains readable
     * over light page sections. 67222c3 bg set in existing block above. */
    .elementor-location-header .elementor-element-c7fdd3d {
        background-color: var(--lasso-navy, #0D1B2A) !important;
    }

    /* UF-07: Service card title and text contrast — force navy on cream cards
     * astra-child-refined-industrial.css sets oklch(0.98 0.01 85) !important
     * on .elementor-element-72fcdd3 (services section). Need (0,3,1)+ specificity.
     * Using .lasso-services-section (semantic alias for 72fcdd3) */
    .elementor-17 .lasso-services-section .elementor-heading-title {
        color: var(--lasso-navy, #1B2B3A) !important;
    }
    .elementor-17 .lasso-services-section .elementor-widget-heading .elementor-heading-title {
        color: var(--lasso-navy, #1B2B3A) !important;
    }
    .elementor-17 .lasso-service-card .elementor-widget-container p,
    .elementor-17 .lasso-service-card .elementor-widget-container span {
        color: var(--lasso-navy, #1B2B3A) !important;
    }

    /* UF-08: Service cards 4-per-row — see updated Issue #12 block above */

    /* P3: Services hero icon-list items — white text on navy hero bg
       "Houston Local", "Insurance Claims", "Same-Day Free Inspections", "Professional Roofing"
       were invisible (navy text on navy background = 0 contrast).
       Note: .lasso-hero does NOT exist on Services page; target icon-list-text directly. */
    body.page-id-32 .elementor-icon-list-text {
        color: var(--lasso-white, #FFFFFF) !important;
    }

    /* CON-DOD: Contact page header/nav dark-on-dark text
       The <li> menu items and .lasso-cph-label/.lasso-cph-hours inherit dark navy text
       color (rgb(42,51,64)) on a navy bg (rgb(27,43,58)) — invisible.
       Scope to body.page-id-1180 to avoid affecting other pages' headers. */
    body.page-id-1180 .lasso-contact-phone-top .lasso-cph-label,
    body.page-id-1180 .lasso-contact-phone-top .lasso-cph-hours {
        color: var(--lasso-cream, #F5F0E8) !important;
    }
    body.page-id-1180 .elementor-location-header .menu-item,
    body.page-id-1180 .elementor-location-header .elementor-icon-list-item {
        color: var(--lasso-cream, #F5F0E8) !important;
    }

    /* P7: AI Quote hero subtext — cream text on dark navy bg for contrast
     * Gray rgb(85,85,85) on navy = 2.3:1; cream on navy ≈ 12:1
     * Note: AI Quote is page-id-40 (not 5506). .lasso-hero does NOT exist on this page. */
    body.page-id-40 .elementor-element-278ed59 p,
    body.page-id-40 [data-elementor-type="wp-page"] .e-con:first-child p {
        color: var(--lasso-cream, #F5F0E8) !important;
    }
    /* P7: AI Quote stepper inactive labels — darken for contrast on cream bg
     * rgb(170,170,170) on cream = 2.0:1; body-text on cream ≈ 7:1 */
    body.page-id-40 [class*="step"] span,
    body.page-id-40 [class*="stepper"] span {
        color: var(--lasso-body-text, #374151) !important;
    }
}