/* ==========================================================================
   LASSO SHARED CSS — All Viewports
   Consolidated from 14 source files. Do NOT add new files.
   ========================================================================== */

/*
 * Lasso Roofing — Design System v3.0 "Lone Star Bold"
 *
 * What this does:
 * 1. DM Serif Display (headings) + Outfit (body) + Barlow Condensed (stats/accents)
 * 2. Expanded color system: amber accent, storm urgency, warm surface tiers
 * 3. Red reserved for CTAs ONLY — amber handles decorative accents
 * 4. Fluid typography with clamp() for dramatic scale across viewports
 * 5. Exponential easing (ease-out-quart) for natural, confident motion
 *
 * v3.0 CHANGES from v2.0:
 *   - Replaced Outfit with Outfit (less overused, same geometric clarity)
 *   - Added --lasso-amber for non-CTA accents (stars, badges, GAF cert, highlights)
 *   - Added --lasso-storm for storm-season urgency messaging
 *   - Added --lasso-surface-warm for alternating section backgrounds
 *   - Fluid type scale with 3-5x jumps between body and display sizes
 *   - Exponential easing replaces generic ease for all transitions
 *   - Added --font-accent (Barlow Condensed) for stat numbers and condensed labels
 *   - Backup: lasso-shared.css.bak-colors-2026-03-11
 */

/* ─── CSS CUSTOM PROPERTIES (DESIGN TOKENS) ─────────────────────────────── */
:root {
    /* ── Color Palette — Lone Star Bold (updated 2026-03-17) ──────────── */

    /* Core Brand */
    --lasso-navy: #1B2B3A;             /* Ironclad Slate — primary brand dark */
    --lasso-navy-light: #243446;       /* Ironclad Slate light variant */
    --lasso-dark: #161E28;             /* Charred Oak — hero/footer near-black, warm undertone */

    /* CTA — Red is EXCLUSIVELY for actionable elements (buttons, links, CTAs) */
    --lasso-red: #BF3A2B;              /* Lone Star Rust — CTA ONLY, not decorative */
    --lasso-red-hover: #9E2E20;        /* Rust darkened for hover/active */
    --lasso-red-light: rgba(191, 58, 43, 0.10); /* CTA focus rings, subtle CTA backgrounds */

    /* Accent — Amber for non-CTA highlights (badges, stars, certs, inline accents) */
    --lasso-amber: #C78D2E;            /* Texas Gold — ratings, GAF badge, accent text */
    --lasso-amber-hover: #A87525;      /* Texas Gold darkened */
    --lasso-amber-light: rgba(199, 141, 46, 0.12); /* Badge backgrounds, highlight tints */

    /* Urgency — Storm messaging, time-sensitive content */
    --lasso-storm: #2C5F7C;            /* Storm Steel — storm season, urgency banners */
    --lasso-storm-dark: #1E4358;       /* Storm Steel deep — hover/emphasis */
    --lasso-storm-light: rgba(44, 95, 124, 0.10); /* Urgency tint backgrounds */

    /* Secondary */
    --lasso-brown: #8B7355;            /* Texas Limestone — secondary, Hill Country stone */
    --lasso-brown-light: rgba(139, 115, 85, 0.12);
    --lasso-green: #2D6A4F;            /* Prairie Green — trust badges, checkmarks, success */
    --lasso-green-light: rgba(45, 106, 79, 0.10);

    /* Surfaces — warm-tinted, never pure white */
    --lasso-white: #FDFCFA;            /* Warm white — barely perceptible cream tint */
    --lasso-surface: #F5F0E8;          /* Caliche Cream — primary surface/card bg */
    --lasso-cream: #F5F0E8;            /* Alias for --lasso-surface */
    --lasso-surface-warm: #EDE5D8;     /* Sunbaked Clay — alternating sections, deeper warmth */
    --lasso-surface-dark: #243446;     /* Ironclad Slate — dark sections */

    /* Text — warm-tinted grays, never pure gray */
    --lasso-text: #2A3340;             /* Ironwood — body copy */
    --lasso-text-light: #5C6878;       /* Ironwood muted — secondary/caption */
    --lasso-text-heading: #111C27;     /* Near-black — headings */
    --lasso-text-inverse: #F2EDE3;     /* Ranch White — text on dark backgrounds */

    /* Borders */
    --lasso-border: #D4C9B5;           /* Sundried Adobe — card/form borders */
    --lasso-border-light: #E4DDD0;     /* Lighter border for subtle dividers */

    /* Shadows — warm-tinted, increasingly dramatic */
    --lasso-shadow-sm: 0 1px 3px rgba(22, 30, 40, 0.08);
    --lasso-shadow-md: 0 4px 16px rgba(22, 30, 40, 0.10);
    --lasso-shadow-lg: 0 12px 40px rgba(22, 30, 40, 0.14);
    --lasso-shadow-xl: 0 24px 64px rgba(22, 30, 40, 0.18);     /* Hero/modal level */
    --lasso-shadow-amber: 0 4px 20px rgba(199, 141, 46, 0.20); /* Gold glow for cert badges */
    --lasso-shadow-red: 0 4px 20px rgba(191, 58, 43, 0.25);    /* CTA emphasis glow */

    /* ── Typography ───────────────────────────────────────────────────── */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-accent: 'Barlow Condensed', 'Arial Narrow', sans-serif;

    /* Font Weights */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* Type Scale — Fluid with clamp() for dramatic viewport-responsive sizing
     * Scale ratio: ~1.25 (major third) mobile → ~1.33 (perfect fourth) desktop
     * Body-to-hero jump: 4-6x for confident visual hierarchy */
    --text-xs:  clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);      /* 11.2px → 12px */
    --text-sm:  clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);      /* 12.8px → 14px */
    --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);   /* 15px → 17px */
    --text-lg:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);      /* 17px → 19px */
    --text-xl:  clamp(1.2rem, 1.1rem + 0.5vw, 1.375rem);        /* 19.2px → 22px */
    --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);          /* 24px → 30px */
    --text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);        /* 30px → 40px */
    --text-4xl: clamp(2.375rem, 1.8rem + 2.5vw, 3.5rem);        /* 38px → 56px */
    --text-5xl: clamp(3rem, 2rem + 3.5vw, 4.5rem);              /* 48px → 72px */
    --text-6xl: clamp(3.75rem, 2.5rem + 4.5vw, 6rem);           /* 60px → 96px */

    /* Line Heights */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* Letter Spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.08em;

    /* ── Spacing — Dramatic jumps for visual rhythm ───────────────────── */
    --space-xs: 0.25rem;    /*  4px */
    --space-sm: 0.5rem;     /*  8px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2.5rem;     /* 40px */
    --space-2xl: 4rem;      /* 64px */
    --space-3xl: 6rem;      /* 96px */
    --space-4xl: 8rem;      /* 128px */
    --space-section: clamp(4rem, 3rem + 4vw, 8rem);

    /* Mobile Spacing */
    --gap-section-mobile: 48px;

    /* ── Border Radius ────────────────────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 100px;
    --radius-round: 50%;

    /* ── Motion — Exponential easing for confident, natural movement ─── */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --transition-fast: 150ms cubic-bezier(0.25, 1, 0.5, 1);
    --transition-base: 300ms cubic-bezier(0.25, 1, 0.5, 1);
    --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-dramatic: 800ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Stagger delays for choreographed animations */
    --stagger-1: 0ms;
    --stagger-2: 60ms;
    --stagger-3: 120ms;
    --stagger-4: 180ms;
    --stagger-5: 240ms;

    /* ── Astra Theme Overrides ────────────────────────────────────────── */
    --ast-global-color-0: #111C27;
    --ast-global-color-1: #BF3A2B;
    --ast-global-color-2: #111C27;
    --ast-global-color-3: #2A3340;
    --ast-global-color-4: #FDFCFA;
    --ast-global-color-5: #F5F0E8;
    --ast-global-color-6: #111C27;
    --ast-global-color-7: #D4C9B5;
    --ast-global-color-8: #111C27;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL: SVG Icon Sizing Constraint
   Prevents Elementor icon SVGs from rendering at viewport size when no
   explicit width/height is set by Elementor. Without this, .e-font-icon-svg
   elements inherit 1em sizing from huge parent font-sizes, producing
   500-700px icons on Why Choose Us, Warranties, and similar pages.
   Fixes: QA 2026-03-17 — giant icon bug
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bare inline SVG icons — constrain any SVG used as a decorative icon.
   Targets SVGs with aria-hidden (icon pattern) that lack explicit sizing.
   Covers: checkmarks in <li>, social birds in <p>, FAQ +/- in <summary>,
   and CTA arrows in <a>. Uses fixed 24px to prevent inheriting huge
   parent font-size values. */
svg[aria-hidden="true"] {
    max-width: 24px !important;
    max-height: 24px !important;
    width: 24px !important;
    height: 24px !important;
}

/* FAQ accordion +/- toggle icons — slightly smaller */
summary > svg[aria-hidden="true"],
details summary svg[aria-hidden="true"] {
    max-width: 16px !important;
    max-height: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

/* Elementor icon system — same constraint */
.e-font-icon-svg,
.elementor-icon svg,
.elementor-icon-list-icon svg,
.e-n-accordion-item-title-icon svg,
.elementor-accordion-icon svg,
.elementor-tab-title svg,
.elementor-icon i {
    max-width: 24px !important;
    max-height: 24px !important;
    width: 24px !important;
    height: 24px !important;
}

/* Icon-list items (checkmarks, bullets) — 24px */
.elementor-icon-list-icon .e-font-icon-svg,
.elementor-icon-list-icon svg {
    max-width: 24px !important;
    max-height: 24px !important;
    width: 24px !important;
    height: 24px !important;
}

/* Icon box icons (service cards, feature cards) — 48px */
.elementor-icon-box-icon svg,
.elementor-icon-box-icon .e-font-icon-svg,
.elementor-icon-box-icon i {
    max-width: 48px !important;
    max-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
}

/* Social icons — 24px */
.elementor-social-icon svg,
.elementor-social-icon .e-font-icon-svg {
    max-width: 24px !important;
    max-height: 24px !important;
    width: 24px !important;
    height: 24px !important;
}

/* Carousel/slider navigation arrows — 24px */
.elementor-swiper-button svg,
.elementor-swiper-button .e-font-icon-svg {
    max-width: 24px !important;
    max-height: 24px !important;
    width: 24px !important;
    height: 24px !important;
}

/* Menu toggle icon — preserve existing 22px behavior */
.elementor-menu-toggle svg,
.elementor-menu-toggle .e-font-icon-svg {
    max-width: 22px !important;
    max-height: 22px !important;
    width: 22px !important;
    height: 22px !important;
}

/* ─── GLOBAL TYPOGRAPHY ──────────────────────────────────────────────────── */
/*
 * CRITICAL: font-family uses !important to override Elementor/Astra defaults.
 * color does NOT use !important — lets Elementor's white-on-dark sections work.
 * font-size does NOT use !important on base body — prevents breaking Elementor sizing.
 */
body,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.e-con p,
p {
    font-family: var(--font-body) !important;
    line-height: 1.7 !important;
    color: var(--lasso-text);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* M-1: Body text font-size — needs !important to override Elementor 3-class specificity */
/* Scoped to text-editor widget only; heading widget sizing is NOT affected */
.elementor-widget-text-editor p {
    font-size: 1rem !important;
}

/* Issue #28: Homepage body text force body font */
.elementor-17 .elementor-widget-text-editor,
.elementor-17 .elementor-widget-text-editor p,
.elementor-17 .elementor-widget-text-editor span {
    font-family: var(--font-body) !important;
}

/* ── HERO SECTION BASE (migrated from hero-styles.php) ── */
.lasso-hero {
    background-color: var(--lasso-navy, #1B2B3A) !important;
    position: relative;
    overflow: hidden;
    min-height: auto;
}

/* Radial gradient overlay — red accent */
.lasso-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 80% 60% at 70% 50%, rgba(200,49,43,0.15) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 85% 20%, rgba(200,49,43,0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Subtle grid pattern overlay */
.lasso-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* Content above overlays */
.lasso-hero > .elementor-container,
.lasso-hero > * {
    position: relative;
    z-index: 1;
}

/* Hero badge chip */
.lasso-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(200,49,43,0.15);
    border: 1px solid rgba(200,49,43,0.3);
    color: rgba(255,255,255,0.9);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

/* Trust badges */
.lasso-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}
.lasso-trust-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    font-weight: 500;
}
.lasso-trust-badge::before {
    content: '\2713';
    color: var(--lasso-amber, #C78D2E);
    font-weight: 700;
}

/* TABLET HERO CONTRAST FIX — scoped to .lasso-hero to avoid leaking into stats strip */
@media (min-width: 768px) and (max-width: 1024px) {
    .lasso-hero h1,
    .lasso-hero h1.elementor-heading-title,
    .lasso-hero .elementor-widget-heading h1,
    .lasso-hero h2.elementor-heading-title[style*="11"],
    .elementor-17 .lasso-hero > .elementor-widget-heading:first-child .elementor-heading-title {
        text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    }
}

/* All headings → Display serif font */
h1, h2, h3, h4, h5, h6,
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
h4.elementor-heading-title,
h5.elementor-heading-title,
h6.elementor-heading-title {
    font-family: var(--font-display) !important;
    color: var(--lasso-text-heading);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Elementor heading widgets rendering as <p> use body font */
p.elementor-heading-title {
    font-family: var(--font-body) !important;
    line-height: 1.6;
    letter-spacing: normal;
}

/* H1 — Hero / Page Title */
h1,
h1.elementor-heading-title,
.elementor-widget-heading h1 {
    font-size: clamp(2rem, 5vw, var(--text-6xl)) !important;
    font-family: var(--font-display) !important;
    font-weight: 400;
    line-height: 1.25;
}

/* H2 — Section Titles */
h2,
h2.elementor-heading-title,
.elementor-widget-heading h2 {
    font-size: clamp(1.875rem, 4vw, var(--text-4xl));
    font-weight: 400;
}

/* H3 — Subsection / Card Titles */
h3,
h3.elementor-heading-title,
.elementor-widget-heading h3 {
    font-size: clamp(1.25rem, 2.5vw, var(--text-2xl));
    font-weight: 400;
}

/* H4-H6 — Supporting headings */
h4, h5, h6 {
    font-family: var(--font-body) !important;
    font-weight: 600;
    font-size: var(--text-lg);
}

/* REMOVED: Fragile [style*="11"] eyebrow rule — superseded by data-id rule in mobile CSS.
   Issue 2 FIX: All eyebrow styling now via .elementor-element[data-id="a34487d"] */

/* Nav links */
nav a,
.elementor-nav-menu a,
.elementor-widget-nav-menu a {
    font-family: var(--font-body) !important;
    font-weight: 500;
    font-size: 14px !important;
    letter-spacing: 0.02em;
}

/* Header nav links — Ranch White over transparent/dark header (Lone Star Ironclad) */
.elementor-location-header .elementor-nav-menu a,
.elementor-location-header .elementor-nav-menu .elementor-item,
.elementor-location-header .main-navigation a,
.elementor-location-header .menu-item > a {
    color: var(--lasso-text-inverse, #F2EDE3) !important;
}
.elementor-location-header .elementor-nav-menu a:hover,
.elementor-location-header .elementor-nav-menu .elementor-item:hover,
.elementor-location-header .menu-item > a:hover {
    color: var(--lasso-red, #BF3A2B) !important;
}

/* Form labels and inputs */
.elementor-field-label,
.elementor-field-textual,
input,
textarea,
select {
    font-family: var(--font-body) !important;
}

/* ─── DARK SECTION TEXT PRESERVATION ─────────────────────────────────────── */
/*
 * Ensure white text stays white on Elementor's dark background sections.
 * These selectors match Elementor's element-specific CSS specificity.
 */
.elementor [style*="color:#FFFFFF"] h1,
.elementor [style*="color:#FFFFFF"] h2,
.elementor [style*="color:#FFFFFF"] h3,
.elementor [style*="color:#FFFFFF"] p,
.elementor [style*="color:#ffffff"] h1,
.elementor [style*="color:#ffffff"] h2,
.elementor [style*="color:#ffffff"] h3,
.elementor [style*="color:#ffffff"] p,
.elementor [style*="color: #FFFFFF"] h1,
.elementor [style*="color: #FFFFFF"] h2,
.elementor [style*="color: #FFFFFF"] h3,
.elementor [style*="color: #FFFFFF"] p {
    color: #FFFFFF !important;
}

/* Elementor icon-list white text (hero bullet points on dark bg) */
.elementor-icon-list-text {
    color: inherit;
}

/* ─── BUTTON / CTA REDESIGN ─────────────────────────────────────────────── */
.elementor-button,
.elementor-widget-button .elementor-button,
a.elementor-button,
.e-form__buttons__wrapper button,
.elementor-button-wrapper .elementor-button {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: var(--text-sm) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 32px !important;
    min-width: 44px !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--transition-base) !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    cursor: pointer !important;
}

.elementor-button[style*="background-color"],
.elementor-widget-button .elementor-button {
    background-color: var(--lasso-red) !important;
    color: var(--lasso-white) !important;
    box-shadow: var(--lasso-shadow-sm);
}

.elementor-button:hover,
.elementor-widget-button .elementor-button:hover {
    background-color: var(--lasso-red-hover) !important;
    color: var(--lasso-white) !important;
    transform: translateY(-2px);
    box-shadow: var(--lasso-shadow-md);
}

.elementor-button:active {
    transform: translateY(0);
    box-shadow: var(--lasso-shadow-sm);
}

.e-form__buttons button[type="submit"],
.elementor-form .elementor-button {
    background-color: var(--lasso-red) !important;
    color: var(--lasso-white) !important;
    border-radius: var(--radius-md) !important;
    min-height: 48px !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    transition: all var(--transition-base);
}

.e-form__buttons button[type="submit"]:hover,
.elementor-form .elementor-button:hover {
    background-color: var(--lasso-red-hover) !important;
    transform: translateY(-2px);
    box-shadow: var(--lasso-shadow-md);
}

a.elementor-button[href*="services"],
a.elementor-button[href*="#"] {
    background-color: transparent !important;
    color: var(--lasso-red) !important;
    border: 2px solid var(--lasso-red) !important;
    box-shadow: none !important;
}

a.elementor-button[href*="services"]:hover,
a.elementor-button[href*="#"]:hover {
    background-color: var(--lasso-red) !important;
    color: var(--lasso-white) !important;
    transform: translateY(-2px);
}

/* ─── FORM STYLING ───────────────────────────────────────────────────────── */
.elementor-field-textual {
    border: 1.5px solid var(--lasso-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 16px !important;
    font-size: var(--text-base) !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
    background-color: var(--lasso-white) !important;
    color: var(--lasso-text) !important;
}

.elementor-field-textual:focus {
    border-color: var(--lasso-red) !important;
    box-shadow: 0 0 0 3px var(--lasso-red-light) !important;
    outline: none !important;
}

/* Dropdown arrow — single source of truth, all viewports, all forms */
.elementor-field-textual.elementor-field-select,
.elementor-field-group select {
    -webkit-appearance: none !important;
    appearance: none !important;
    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='%232D3748'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    padding-right: 40px !important;
}

/* Kill ALL Elementor dropdown arrows — pseudo-elements + DOM caret wrapper */
.elementor-select-wrapper::before,
.elementor-select-wrapper::after {
    display: none !important;
    content: none !important;
}
.elementor-select-wrapper .select-caret-down-wrapper {
    display: none !important;
}

/* ─── NAVIGATION REFINEMENT ──────────────────────────────────────────────── */
.elementor-widget-icon-list .elementor-icon-list-text {
    font-family: var(--font-body) !important;
    font-weight: 500;
}

.elementor-nav-menu--main .elementor-item {
    font-family: var(--font-body) !important;
    font-weight: 500;
    font-size: 14px !important;
    color: var(--lasso-text-heading);
    transition: color var(--transition-fast);
    padding: 8px 16px;
}

.elementor-nav-menu--main .elementor-item:hover {
    color: var(--lasso-red) !important;
}

/* ─── CARD / SERVICE ITEM REFINEMENT ─────────────────────────────────────── */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Service card icon images — consistent sizing */
.elementor-widget-icon-box .elementor-icon-box-icon {
    margin-bottom: 12px;
}

.elementor-widget-icon-box .elementor-icon-box-icon img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain;
}

/* Service card descriptions */
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-icon-box .elementor-icon-box-content {
    font-family: var(--font-body) !important;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--lasso-text);
}

/* Service card titles */
.elementor-widget-icon-box .elementor-icon-box-title {
    font-family: var(--font-display) !important;
    font-size: var(--text-xl);
    color: var(--lasso-text-heading);
    margin-bottom: 8px;
}

/* ─── FAQ ACCORDION ──────────────────────────────────────────────────────── */
.elementor-widget-nested-accordion .e-n-accordion-item-title {
    font-family: var(--font-body) !important;
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--lasso-text-heading);
    padding: 16px 20px;
    min-height: 48px;
    transition: color var(--transition-fast);
}

.elementor-widget-nested-accordion .e-n-accordion-item-title:hover {
    color: var(--lasso-amber, #C78D2E) !important;
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
footer, .elementor-location-footer {
    font-family: var(--font-body) !important;
}

footer h2,
.elementor-location-footer h2 {
    font-family: var(--font-display) !important;
    font-size: var(--text-xl);
}

/* Footer text — Issue 9 FIX: explicit cream instead of inherit.
   Inherit resolved to transparent/low-contrast on dark bg. */
footer p, footer a, footer span,
.elementor-location-footer p,
.elementor-location-footer a,
.elementor-location-footer span {
    color: rgba(245, 240, 232, 0.85);
}

/* ─── MOBILE-SPECIFIC IMAGE/ICON FIXES ───────────────────────────────────── */

/*
 * Lasso Roofing — UX Fixes
 *
 * What this does:
 * 1. Fixes mobile touch targets (31/39 elements under 44px minimum)
 * 2. Fixes heading hierarchy visual issues
 * 3. Improves form usability
 * 4. Fixes accessibility issues
 */

/* ─── MOBILE TOUCH TARGETS ───────────────────────────────────────────────── */
nav a,
.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
}

footer a,
.elementor-location-footer a,
.elementor-widget-icon-list a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 0 !important;
}

.elementor-social-icon {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.elementor-icon-list-item a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Breadcrumb touch targets */
.wpseo-breadcrumbs {
    position: relative;
    z-index: 3;
}
.wpseo-breadcrumbs a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
}

/* S2: Header overflow — prevent clipping dropdown menus */
.elementor-location-header .e-con-inner {
    overflow: visible !important;
}

/* S3: READ MORE button touch targets */
.elementor-post__read-more {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.elementor-swiper-button {
    min-width: 44px !important;
    min-height: 44px !important;
}

.swiper-pagination-bullet {
    min-width: 12px !important;
    min-height: 12px !important;
    position: relative !important;
}

.swiper-pagination-bullet::before {
    content: '' !important;
    position: absolute !important;
    top: -16px !important;
    left: -16px !important;
    right: -16px !important;
    bottom: -16px !important;
}

.e-n-accordion-item-title {
    min-height: 48px !important;
    cursor: pointer !important;
}

/* ─── HEADING HIERARCHY FIXES ────────────────────────────────────────────── */
/* REMOVED: Hero eyebrow first-child rule — superseded by data-id rule in mobile CSS (Issue 2) */

h2[style*="font-size: 15"],
h2[style*="font-size: 18"],
h2[style*="font-weight: 400"] {
    font-family: var(--font-body, 'Outfit', sans-serif) !important;
    line-height: 1.7 !important;
}

/* ─── FORM USABILITY ─────────────────────────────────────────────────────── */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--lasso-red, #BF3A2B) !important;
    outline-offset: 2px !important;
}

.elementor-field.elementor-error {
    border-color: #DC2626 !important;
}

.elementor-field-group {
    margin-bottom: 12px !important;
}

.elementor-field-label {
    font-weight: 500 !important;
    margin-bottom: 4px !important;
    font-size: 0.875rem !important;
    color: #2D3748 !important;
}

/* Issue #30: Contact form submit red CTA pattern */
body.page-id-1180 .elementor-field-type-submit .elementor-button {
    background-color: var(--lasso-red, #BF3A2B) !important;
    color: var(--lasso-white, #FFFFFF) !important;
    border-radius: var(--radius-md, 6px) !important;
    min-height: var(--touch-target-lg, 48px) !important;
}

/* Issue #31: Contact form select custom styling */
body.page-id-1180 select.elementor-field-textual,
body.page-id-1180 select.elementor-field {
    min-height: var(--touch-target, 44px) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    padding-right: 36px !important;
}

/* ─── SCROLL BEHAVIOR ────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth !important;
    scroll-padding-top: 80px !important;
}

/* ─── SKIP TO CONTENT LINK (ACCESSIBILITY) ───────────────────────────────── */
a[href="#content"] {
    position: absolute !important;
    top: -100px !important;
    left: 0 !important;
    z-index: 10000 !important;
    background-color: #1B2B3A !important;
    color: #FFFFFF !important;
    padding: 12px 24px !important;
    font-size: 1rem !important;
    border-radius: var(--radius-md) !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: top 0.2s !important;
    /* Ensures skip link is always a usable touch target */
}

a[href="#content"]:focus {
    top: 0 !important;
}

/* ─── RESPONSIVE FIXES ───────────────────────────────────────────────────── */

/* ─── FIX M3: LOGO OPTIMIZATION ──────────────────────────────────────────── */
/* Logo is 1045x443px but displayed small — constrain properly */
.custom-logo-link img,
.custom-logo,
img[alt*="Lasso Roofing logo"] {
    max-width: 160px !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1045 / 443;
    object-fit: contain !important;
}

/* ─── FIX M9: SOCIAL MEDIA ICONS VISIBILITY ──────────────────────────────── */
/* Ensure footer social icons are visible and properly sized */
.elementor-location-footer .elementor-social-icon,
footer .elementor-social-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}
.elementor-location-footer .elementor-social-icon:hover,
footer .elementor-social-icon:hover {
    transform: scale(1.1) !important;
    opacity: 0.85 !important;
}

/* ─── FIX M8: REDUCE DUPLICATE NAV VISUAL CLUTTER ────────────────────────── */
/* Hide duplicate mobile nav on desktop */

/* ─── FIX L6: SERVICE AREAS PAGE VISUAL HIERARCHY ────────────────────────── */
/* Make the service area city links more visually organized */
.elementor-icon-list-item {
    transition: transform 0.2s ease !important;
}
.elementor-icon-list-item:hover {
    transform: translateX(4px) !important;
}

/* ─── INJECTED FORM STYLES ───────────────────────────────────────────────── */
.lasso-injected-form input:focus,
.lasso-injected-form select:focus,
.lasso-injected-form textarea:focus {
    border-color: var(--lasso-red, #BF3A2B) !important;
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1) !important;
    outline: none !important;
}
.lasso-injected-form button:hover {
    background-color: var(--lasso-red-hover, #A50D26) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE STICKY ACTION BAR
   Full-width two-button bar: Call + Quote, mobile only
   - Consolidated from duplicate blocks
   - z-index reduced from 9999 to 1000 for proper stacking
   - Single body padding declaration
   ═══════════════════════════════════════════════════════════════ */

/* Hide the old floating CTA pill button (HTML still injected but hidden) */
.lasso-float-cta {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX: Header phone icon oversized on mobile
   The SVG phone icon in the header utility bar renders huge on mobile.
   Constrain it and hide the redundant utility bar on mobile since
   there's already a sticky call bar at the bottom.
   ═══════════════════════════════════════════════════════════════ */

/*
 * Lasso Roofing — Animations & Motion
 *
 * What this does:
 * 1. Staggered hero entrance animations on page load
 * 2. Scroll-triggered fade-in reveals for content sections
 * 3. Service card hover micro-interactions
 * 4. CTA button pulse/attention animation
 * 5. FAQ accordion smooth transitions
 * 6. Subtle background grain texture for depth
 */

/* ─── RESPECT REDUCED MOTION ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── KEYFRAME DEFINITIONS ───────────────────────────────────────────────── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes subtlePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 119, 34, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(232, 119, 34, 0); }
}

@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -25%); }
    40% { transform: translate(-5%, 25%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(3%, 35%); }
    90% { transform: translate(-10%, 10%); }
}

/* ─── 1. HERO ENTRANCE ANIMATIONS ────────────────────────────────────────── */
/* Scoped to .lasso-hero — .e-con:first-of-type leaked animations to non-hero sections */
body:not(.elementor-editor-active) .lasso-hero h2:first-of-type {
    animation: fadeUp 0.6s ease-out 0.1s both;
}

body:not(.elementor-editor-active) .lasso-hero h1 {
    animation: fadeUp 0.7s ease-out 0.2s both;
}

body:not(.elementor-editor-active) .lasso-hero h2:nth-of-type(2) {
    animation: fadeUp 0.7s ease-out 0.35s both;
}

body:not(.elementor-editor-active) .lasso-hero .elementor-widget-icon-list {
    animation: fadeUp 0.7s ease-out 0.45s both;
}

body:not(.elementor-editor-active) .lasso-hero .elementor-widget-button {
    animation: fadeUp 0.7s ease-out 0.55s both;
}

body:not(.elementor-editor-active) .lasso-hero .elementor-widget-form {
    animation: slideInRight 0.8s ease-out 0.4s both;
}

body:not(.elementor-editor-active) .lasso-hero .elementor-widget-carousel,
body:not(.elementor-editor-active) .lasso-hero .elementor-widget-testimonial-carousel {
    animation: fadeIn 0.8s ease-out 0.6s both;
}

/* ─── 2. SCROLL-TRIGGERED REVEALS ────────────────────────────────────────── */
.lasso-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.lasso-reveal.lasso-visible {
    opacity: 1;
    transform: translateY(0);
}

.lasso-stagger > .elementor-widget {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.lasso-stagger.lasso-visible > .elementor-widget:nth-child(1) { transition-delay: 0ms; }
.lasso-stagger.lasso-visible > .elementor-widget:nth-child(2) { transition-delay: 100ms; }
.lasso-stagger.lasso-visible > .elementor-widget:nth-child(3) { transition-delay: 200ms; }
.lasso-stagger.lasso-visible > .elementor-widget:nth-child(4) { transition-delay: 300ms; }
.lasso-stagger.lasso-visible > .elementor-widget:nth-child(5) { transition-delay: 400ms; }
.lasso-stagger.lasso-visible > .elementor-widget:nth-child(6) { transition-delay: 500ms; }

.lasso-stagger.lasso-visible > .elementor-widget {
    opacity: 1;
    transform: translateY(0);
}

.elementor-widget-icon-box {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.elementor-widget-icon-box.lasso-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── 3. SERVICE CARD HOVER INTERACTIONS ─────────────────────────────────── */
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.e-con .elementor-widget-icon-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.elementor-widget-icon-box:hover .elementor-icon-box-wrapper,
.e-con .elementor-widget-icon-box:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(11, 29, 58, 0.1) !important;
}

.elementor-widget-icon-box:hover .elementor-icon-box-icon img {
    transform: scale(1.08);
    transition: transform 0.3s ease;
}

.elementor-widget-image img {
    transition: transform 0.4s ease !important;
}

.elementor-widget-image:hover img {
    transform: scale(1.02) !important;
}

/* ─── 4. CTA BUTTON ATTENTION ────────────────────────────────────────────── */
/* Scoped to .lasso-hero — .e-con:first-of-type leaked pulse to non-hero buttons */
.lasso-hero .elementor-widget-button .elementor-button {
    animation: subtlePulse 3s ease-in-out 2s infinite;
}

.lasso-hero .elementor-widget-button .elementor-button:hover {
    animation: none;
}

.e-con:last-of-type .elementor-widget-button .elementor-button {
    animation: subtlePulse 3s ease-in-out 1s infinite;
}

.e-con:last-of-type .elementor-widget-button .elementor-button:hover {
    animation: none;
}

/* ─── 5. FAQ ACCORDION TRANSITIONS ───────────────────────────────────────── */
.e-n-accordion-item {
    overflow: hidden;
}

.e-n-accordion-item-title {
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.e-n-accordion-item-title:hover {
    background-color: rgba(232, 119, 34, 0.05) !important;
}

.e-n-accordion-item-title-icon {
    transition: transform 0.3s ease !important;
}

.e-n-accordion-item[open] .e-n-accordion-item-title-icon {
    transform: rotate(180deg) !important;
}

.e-n-accordion-item > [role="region"] {
    animation: fadeIn 0.3s ease-out;
}

/* ─── 6. BACKGROUND GRAIN TEXTURE ────────────────────────────────────────── */
.e-con[style*="background-color: rgb(26"],
.e-con[style*="background-color: #1"],
.e-con[style*="background-color: #0"] {
    position: relative;
}

.e-con[style*="background-color: rgb(26"]::after,
.e-con[style*="background-color: #1"]::after,
.e-con[style*="background-color: #0"]::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 150%;
    height: 150%;
    will-change: transform;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    animation: grain 8s steps(10) infinite;
    opacity: 0.4;
}

.e-con[style*="background-color: rgb(26"] > *,
.e-con[style*="background-color: #1"] > *,
.e-con[style*="background-color: #0"] > * {
    position: relative;
    z-index: 2;
}

/* ─── 7. SCROLL-TO-TOP BUTTON ────────────────────────────────────────────── */
[class*="scroll-to-top"],
.e-scroll-to-top {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #1B2B3A !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(11, 29, 58, 0.2) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

[class*="scroll-to-top"]:hover,
.e-scroll-to-top:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(11, 29, 58, 0.3) !important;
}

/*
 * Lasso Roofing — Phase 1: Critical Bug Fixes
 *
 * WPCode Installation: CSS Snippet > Site Wide Header > Active
 * Priority: IMMEDIATE — these bugs cause direct revenue loss
 *
 * Fixes:
 *   BUG-01: Hamburger menu detached/floating over content
 *   BUG-02: Logo floating independently over body content
 *   BUG-03: Right service card rendering as black void
 *   BUG-05: $0 stat cut off / invisible on mobile
 *   BUG-06: CTA button invisible (orange on orange)
 *   DESIGN-02: Lead form purple section → navy
 *   DESIGN-08: Footer social icons → monochrome white
 *   DESIGN-09: Orange copyright bar → dark navy
 *   UX-01: Phone number visible in header on mobile
 */

/*
 * NOTE (2026-03-04): The live site uses an Elementor header template, NOT
 * Astra's theme header. The BUG-01/BUG-02 selectors (.ast-mobile-menu-trigger,
 * .ast-site-identity, etc.) match nothing on the live site. These rules are
 * left in place for safety but are effectively no-ops.
 *
 * The actual header fix is in fix-phase8-mobile.css (Phase 8).
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BUG-01 + BUG-02 — Fix header layout: anchor hamburger + logo inside header
   ═══════════════════════════════════════════════════════════════════════════

   Root cause: The hamburger icon and/or logo have independent position:fixed
   or position:sticky applied, detaching them from the header container.

   Fix: Force both elements to position:relative, make the HEADER be sticky.

   If this doesn't fully fix it, open DevTools and find the element
   that has position:fixed and add its selector below.
*/

/* Ensure the header container itself is the sticky element */
.site-header,
#masthead,
.ast-primary-header-bar,
.ast-main-header-bar,
.elementor-location-header,
.ast-desktop-header,
header.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* Remove any independent fixed/sticky from the hamburger toggle */
.ast-mobile-menu-trigger,
.ast-mobile-menu-trigger-1,
button.ast-mobile-menu-trigger,
div.ast-mobile-menu-trigger,
.ast-header-break-point .ast-mobile-menu-trigger,
.menu-toggle,
.ast-menu-toggle,
[class*="hamburger"],
[class*="menu-toggle"],
[class*="mobile-trigger"],
.elementor-menu-toggle,
.elementor-nav-menu .elementor-menu-toggle {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    transform: none !important;
    /* display controlled by lasso-mobile.css / lasso-desktop.css */
    align-items: center !important;
    justify-content: center !important;
}

/* Remove any independent fixed/sticky from the logo */
.ast-site-identity,
#ast-site-identity,
.custom-logo-link,
.custom-logo,
.site-logo,
.ast-logo-container,
.ast-header-logo,
.elementor-widget-site-logo,
.elementor-widget-theme-site-logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    transform: none !important;
}

/* The logo image should be reasonable size on mobile */


/* ═══════════════════════════════════════════════════════════════════════════
   BUG-03 — Fix service card rendering as black void
   ═══════════════════════════════════════════════════════════════════════════

   Root cause: Likely black background with white/black text, or the card
   is hidden by z-index or overflow. Fix: Force visible background + text.
*/

/* Service cards in the 2-column mobile grid */

/* ═══════════════════════════════════════════════════════════════════════════
   BUG-05 — Fix $0 stat cut off and invisible on mobile
   ═══════════════════════════════════════════════════════════════════════════

   Root cause: Stats section uses horizontal overflow or fixed columns
   that hide the 4th stat on narrow screens.
*/

/* ═══════════════════════════════════════════════════════════════════════════
   BUG-06 — Fix CTA button invisible on orange/dark backgrounds
   ═══════════════════════════════════════════════════════════════════════════

   Root cause: Orange outline button on orange card background = invisible.
   The storm section (burgundy/orange bg) has a button with matching colour.
*/

/*
   Target: Buttons inside orange/red/dark sections.
   Strategy: Make buttons white (solid) with dark text OR invert the outline.
   The orange section likely has a background-color inline style containing
   #FF, #E8, #C8, or rgb values for orange/red.
*/

/* Buttons on dark/orange sections — make them WHITE with dark text */
/* BUG-06 FIX: Use style*= (Elementor inline styles), NOT data-settings*= */
.elementor-section[style*="#BF3A2B"] .elementor-button,
.elementor-section[style*="#BF3A2B"] .elementor-button,
.elementor-section[style*="rgb(232, 119, 34)"] .elementor-button,
.elementor-section[style*="rgb(232,119,34)"] .elementor-button,
.elementor-section[style*="#BF3A2B"] .elementor-button,
.elementor-section[style*="#BF3A2B"] .elementor-button,
.elementor-section[style*="rgb(200, 16, 46)"] .elementor-button,
.e-con[style*="#E87"] .elementor-button,
.e-con[style*="#C81"] .elementor-button,
.e-con[style*="#FF6"] .elementor-button,
.e-con[style*="#FF7"] .elementor-button,
.e-con[style*="#FF8"] .elementor-button,
[class*="storm"] .elementor-button,
[class*="orange-bg"] .elementor-button,
[id*="storm"] .elementor-button {
    background-color: #ffffff !important;
    color: #1B2B3A !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

[class*="storm"] .elementor-button:hover,
[id*="storm"] .elementor-button:hover {
    background-color: #F5F0E8 !important;
    color: #1B2B3A !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN-02 — Fix purple lead form section → navy background
   ═══════════════════════════════════════════════════════════════════════════

   Root cause: The "GET STARTED" form section has a purple/violet gradient
   that has zero connection to the brand palette.
*/

/*
   Purple RGB values used: ~rgb(95, 44, 130) or similar.
   Target: The section with a form widget on it that has a purple background.
*/

/* Override purple/violet backgrounds */
.elementor-section[style*="95, 44"],
.elementor-section[style*="103, 36"],
.elementor-section[style*="purple"],
.elementor-section[style*="violet"],
.e-con[style*="95, 44"],
.e-con[style*="103, 36"],
/* Also catch via background-image gradient purple */
.elementor-section[style*="linear-gradient"][style*="95"],
.e-con[style*="linear-gradient"][style*="95"] {
    background: #1B2B3A !important;
    background-image: none !important;
}

/* Fix form field backgrounds inside the (now navy) section */
.elementor-section[style*="95, 44"] .elementor-field-textual,
.elementor-section[style*="103, 36"] .elementor-field-textual,
.e-con[style*="95, 44"] .elementor-field-textual,
.e-con[style*="103, 36"] .elementor-field-textual {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.elementor-section[style*="95, 44"] .elementor-field-label,
.e-con[style*="95, 44"] .elementor-field-label {
    color: rgba(255, 255, 255, 0.7) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN-08 — Footer social icons → monochrome (white)
   ═══════════════════════════════════════════════════════════════════════════
*/

/* Force all social icons to white (monochrome) on dark footer */
footer .elementor-social-icon,
.elementor-location-footer .elementor-social-icon,
footer [class*="social"] a,
.elementor-location-footer [class*="social"] a {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

footer .elementor-social-icon:hover,
.elementor-location-footer .elementor-social-icon:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Facebook, Twitter, Instagram, LinkedIn, YouTube → all white */
footer .elementor-social-icon i,
footer .elementor-social-icon svg,
.elementor-location-footer .elementor-social-icon i,
.elementor-location-footer .elementor-social-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN-09 — Orange copyright bar → dark navy
   ═══════════════════════════════════════════════════════════════════════════
*/

/* The copyright bar is typically inside footer or a dedicated bottom section */
footer .elementor-section:last-child,
footer .e-con:last-child,
.elementor-location-footer .elementor-section:last-of-type,
.elementor-location-footer .e-con:last-of-type,
/* Catch any orange/amber footer bar */
footer [style*="#BF3A2B"],
footer [style*="#BF3A2B"],
footer [style*="rgb(232, 119"],
.elementor-location-footer [style*="#BF3A2B"],
.elementor-location-footer [style*="#BF3A2B"],
.ast-footer-copyright,
.ast-small-footer {
    background-color: #0B1525 !important;
    background-image: none !important;
}

/* Footer copyright text — scoped to avoid bleeding into nav links */
.ast-footer-copyright *,
.ast-small-footer * {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 13px !important;
}

footer .elementor-section:last-child a,
.ast-footer-copyright a,
.ast-small-footer a {
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
}

footer .elementor-section:last-child a:hover,
.ast-small-footer a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UX-01 — Show phone number in mobile header
   ═══════════════════════════════════════════════════════════════════════════

   Strategy: If the header already has a phone widget, make it visible.
   We also inject a tap-to-call button via JS (see fix-mobile-ux.js).
*/

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN-01 — Enforce 3-color background system
   ═══════════════════════════════════════════════════════════════════════════

   Allowed backgrounds: Navy, Cream, Red (accent only), White
   Eliminate: Purple, Burgundy, Orange, Mixed gradients, Near-black variants

   Strategy: Target known "wrong" background colors and override.
   Note: We cannot override ALL section backgrounds without breaking layout.
   We target the specific offenders.
*/

/* ── BURGUNDY/MAROON sections → Navy ────────────────────────────────── */
/* The storm CTA section has a burgundy/maroon color */
.elementor-section[style*="rgb(100, 2"],   /* ~rgb(100,20,XX) maroon range */
.elementor-section[style*="rgb(80, 2"],
.elementor-section[style*="rgb(139, 0"],   /* darkred */
.elementor-section[style*="#8B0000"],
.elementor-section[style*="#6B1414"],
.elementor-section[style*="#4A0000"],
.e-con[style*="rgb(100, 2"],
.e-con[style*="rgb(80, 2"],
.e-con[style*="#8B0000"],
.e-con[style*="#6B1414"] {
    background-color: #1B2B3A !important;
    background-image: linear-gradient(
        135deg,
        rgba(200, 16, 46, 0.15) 0%,
        transparent 60%
    ) !important;
}

/* ── NEAR-BLACK sections that aren't quite navy → unify ─────────────── */
.elementor-section[style*="rgb(26, 26"],   /* #1a1a1a type */
.elementor-section[style*="rgb(17, 24"],   /* #111827 type */
.elementor-section[style*="rgb(15, 23"],   /* #0f1729 type */
.elementor-section[style*="#111827"],
.elementor-section[style*="#1a1a2e"],
.e-con[style*="rgb(26, 26"],
.e-con[style*="#111827"],
.e-con[style*="#1a1a2e"] {
    background-color: #1B2B3A !important;
}

/* ── Sections that remain CREAM (#F5F0E8) ────────────────────────────── */
/* Stats, partner logos, service areas, about sections */
/* These are typically already cream — keep them, just ensure contrast */
.elementor-section:not([style*="background-color"]) {
    /* Default to white (not beige) for un-styled sections */
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN-03 — Service cards: reduce text density
   ═══════════════════════════════════════════════════════════════════════════
*/

/* Limit description text in icon-box (service) cards */
.elementor-icon-box-description,
.elementor-icon-box-description p {
    /* Clamp to ~3 lines using line-clamp */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    /* Fallback height: 3 lines × 1.6 line-height × 1rem */
    max-height: calc(3 * 1.6 * 1rem) !important;
}

/* On mobile: even tighter — 2 lines only */

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN-04 — Cap oversized seasonal heading
   ═══════════════════════════════════════════════════════════════════════════
   "PREPARE YOUR HOME FOR WINTER WITH EXPERT SERVICES" fills entire mobile screen.
*/

/* Target large H2 headings that appear in light/cream sections */

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN-05 — Trusted Partners section: hide empty slides
   ═══════════════════════════════════════════════════════════════════════════
*/

/* Hide empty/blank carousel slides */
.swiper-slide:empty,
.swiper-slide:not(:has(*)),
.elementor-slides .swiper-slide:empty {
    display: none !important;
}

/* Carousel dots: reduce spacing on empty sections */
.elementor-widget-slides .swiper-pagination {
    bottom: 8px !important;
}

/* If using text pills for partners, style them better */
.elementor-widget-text-editor [class*="partner"],
.elementor-widget-icon-list[class*="partner"] li {
    background-color: #F3F4F6 !important;
    border-radius: 100px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1B2B3A !important;
    display: inline-block !important;
    margin: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN-06 — Bottom sticky CTA bar: fix visual weight
   ═══════════════════════════════════════════════════════════════════════════
   Current: Red "Call Now" button + Dark charcoal "Get Free Quote" button.
   Target:  Red left button + White/cream right button — clear visual pair.
*/

/* The sticky bottom bar (common Elementor sticky footer widget) */
[data-settings*='"sticky"'],
.elementor-sticky,
[class*="sticky-footer"],
[class*="sticky-cta"],
[class*="bottom-bar"],
.ast-site-below-header-fixed-bottom {
    /* Ensure consistent height */
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
}

/* Left/primary button in sticky bar → solid red */
[data-settings*='"sticky"'] .elementor-button:first-of-type,
[class*="sticky-cta"] .elementor-button:first-child,
[class*="bottom-bar"] a:first-child {
    background-color: #BF3A2B !important;
    color: #ffffff !important;
    border: 2px solid #BF3A2B !important;
    flex: 1 !important;
    justify-content: center !important;
}

/* Right/secondary button in sticky bar → white with navy text */
[data-settings*='"sticky"'] .elementor-button:last-of-type,
[class*="sticky-cta"] .elementor-button:last-child,
[class*="bottom-bar"] a:last-child {
    background-color: #ffffff !important;
    color: #1B2B3A !important;
    border: 2px solid #1B2B3A !important;
    flex: 1 !important;
    justify-content: center !important;
}


/* N7 (P1) FIX: Services page H1 — renders as 14px Outfit
   because .elementor-size-default overrides inline font. Force DM Serif Display. */
.elementor-32 h1.elementor-heading-title,
.elementor-32 h1.elementor-heading-title.elementor-size-default {
    font-family: 'DM Serif Display', serif !important;
    font-size: clamp(28px, 5vw, 48px) !important;
    color: #1B2B3A !important;
    line-height: 1.2 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN-07 — Unify typography system
   ═══════════════════════════════════════════════════════════════════════════
   Issue: 5 different typographic treatments. No single voice.
   Fix: Enforce DM Serif Display for headings, Outfit for body.
   This EXTENDS design-overhaul.css which already does most of this.
*/

/* ALL CAPS section labels: ONE consistent style */
/* FIXED: Removed font-size: 0.75rem — was forcing all headings with letter-spacing to 12px.
   These headings should keep their Elementor-set sizes. Only style the font treatment. */
.elementor-heading-title[style*="letter-spacing"],
h2[style*="letter-spacing"],
h3[style*="letter-spacing"] {
    font-family: var(--font-body, 'Outfit', sans-serif) !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

/* REMOVED: Duplicate hero eyebrow rule — superseded by data-id rule in mobile CSS (Issue 2) */

/* Italic gold taglines (the "italic serif" treatment) */
em, i,
h1 em, h2 em,
.elementor-heading-title em {
    color: #D4A843 !important;
    font-style: italic !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRIMARY CTA COLOR OVERRIDE
   Ensure ALL primary buttons use red (not orange) to match redesign
   ═══════════════════════════════════════════════════════════════════════════ */

.elementor-button,
.elementor-widget-button .elementor-button,
.e-form__buttons button[type="submit"],
.elementor-form .elementor-button,
a.elementor-button:not([href*="services"]):not([href*="#"]) {
    background-color: #BF3A2B !important;
    color: #ffffff !important;
}

.elementor-button:hover,
.elementor-widget-button .elementor-button:hover,
.e-form__buttons button[type="submit"]:hover {
    background-color: #A50D26 !important;
    box-shadow: 0 4px 16px rgba(200, 16, 46, 0.4) !important;
}

/* Outline/ghost buttons → red border and text */
a.elementor-button[href*="services"],
a.elementor-button[href*="#"] {
    background-color: transparent !important;
    color: #BF3A2B !important;
    border: 2px solid #BF3A2B !important;
}

a.elementor-button[href*="services"]:hover,
a.elementor-button[href*="#"]:hover {
    background-color: #BF3A2B !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ ACCORDION — Active state styling (UX-06)
   ═══════════════════════════════════════════════════════════════════════════
   Add a red left border + background tint to the expanded FAQ item.
*/

/* Elementor Accordion active state */
.elementor-widget-nested-accordion .e-n-accordion-item[open] .e-n-accordion-item-title,
.elementor-widget-nested-accordion .e-n-accordion-item.active .e-n-accordion-item-title,
.elementor-toggle .elementor-toggle-item.elementor-active .elementor-toggle-title {
    background-color: rgba(139, 115, 85, 0.05) !important;
    border-left: 3px solid rgba(139, 115, 85, 0.4) !important;
    color: var(--lasso-amber, #C78D2E) !important;
}

/* Smooth open/close transition */
.e-n-accordion-item-body,
.elementor-toggle-content {
    transition: max-height 0.3s ease, opacity 0.3s ease !important;
}

/* Chevron rotation on open */
.e-n-accordion-item[open] .e-n-accordion-item-title-icon,
.elementor-toggle-item.elementor-active .elementor-toggle-icon {
    transform: rotate(180deg) !important;
    transition: transform 0.3s ease !important;
    color: var(--lasso-amber, #C78D2E) !important;
}

/*
 * Lasso Roofing — Phase 3: Mobile UX Improvements
 *
 * WPCode Installation: CSS Snippet > Site Wide Header > Active
 * Run AFTER fix-critical-bugs.css and fix-design-system.css
 *
 * Fixes:
 *   UX-01: Add phone number above fold (mobile)
 *   UX-02: Improve trust signal display (stars visible in hero)
 *   UX-03: Service section visual improvements for wrong order
 *   UX-04: Service cards → single column on mobile
 *   UX-05: Service area pills → better hierarchy
 *   UX-07: Map section → add visual context
 *   BUG-05: Stats section → 2×2 grid (extended fix)
 *
 * 90% of traffic is mobile — this file is critical.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE HEADER — Target layout: [Logo] [📞] [☰]
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   HERO TRUST SIGNALS (UX-02)
   ═══════════════════════════════════════════════════════════════════════════
   The hero has no star rating or badge visible above fold.
   We inject stars via JS. This CSS styles them.
*/

/* Injected trust bar by fix-mobile-ux.js */
.lasso-hero-trust-bar {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

.lasso-hero-stars {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #D4A843 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.lasso-hero-stars-count {
    color: #1B2B3A !important;
    font-size: 13px !important;
}

.lasso-gaf-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--radius-md) !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICE CARDS — Single column + full-card tappable (UX-04)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICE AREA PILLS (UX-05)
   ═══════════════════════════════════════════════════════════════════════════
   Make Houston/primary areas visually prominent, secondary areas quieter.
*/

/* Primary service area chips */
.elementor-widget-icon-list .elementor-icon-list-item a,
[class*="area-chip"],
[class*="city-chip"] {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #ffffff !important;
    border: 1px solid #D4C9B5 !important;
    border-radius: 100px !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B2B3A !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    min-height: 44px !important;
}

.elementor-widget-icon-list .elementor-icon-list-item a:hover,
[class*="area-chip"]:hover {
    background-color: #1B2B3A !important;
    color: #ffffff !important;
    border-color: #1B2B3A !important;
}

/* Houston = primary (highlighted with red) */
.elementor-widget-icon-list .elementor-icon-list-item:first-child a,
[class*="area-chip"]:first-child {
    background-color: #BF3A2B !important;
    color: #ffffff !important;
    border-color: #BF3A2B !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAP SECTION (UX-07)
   ═══════════════════════════════════════════════════════════════════════════
   Add visual context around the embedded Google Map.
*/

/* Style the container holding the map widget */
.elementor-widget-google_maps,
[class*="map-widget"],
.elementor-widget-google_maps .elementor-custom-embed {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* The injected CTA below the map (via fix-mobile-ux.js) */
.lasso-map-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-top: 20px !important;
    padding: 0 4px !important;
}

.lasso-map-caption {
    font-size: 14px !important;
    color: #6B7280 !important;
    line-height: 1.5 !important;
}

.lasso-map-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: #BF3A2B !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
    min-height: 44px !important;
}

.lasso-map-cta-btn:hover {
    background-color: #A50D26 !important;
}

/* ─── PROCESS TIMELINE ("How It Works") ────────────────────────────────── */
.lasso-process {
    background-color: #F5F0E8;
    padding: 60px 20px;
    text-align: center;
}
.lasso-process__heading {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(28px, 4vw, 40px);
    color: #1B2B3A;
    margin: 0 0 40px;
    line-height: 1.2;
}
.lasso-process__steps {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}
.lasso-process__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 120px;
    max-width: 175px;
    position: relative;
    padding: 0 8px;
}
/* Connector line between steps */
.lasso-process__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 27px;
    left: calc(50% + 28px);
    width: calc(100% - 28px);
    height: 2px;
    background: linear-gradient(90deg, #D4A843 0%, rgba(212, 168, 67, 0.3) 100%);
    z-index: 0;
}
.lasso-process__circle {
    width: 56px;
    height: 56px;
    background-color: #1B2B3A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: 'DM Serif Display', serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(13, 27, 42, 0.25);
}
.lasso-process__label {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #1B2B3A;
    text-align: center;
    line-height: 1.4;
}
/* Mobile: vertical list */

/* ─────────────────────────────────────────────────────────────────────────── */
/* 7C: Review / testimonial carousel — white cards with gold stars            */
/* ─────────────────────────────────────────────────────────────────────────── */
.elementor-testimonial-wrapper,
.elementor-testimonial-content {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 28px !important;
    box-shadow: 0 4px 16px rgba(13, 27, 42, 0.08) !important;
    border: 1px solid rgba(13, 27, 42, 0.06) !important;
    text-align: left !important;
}
/* Gold stars above quote */
.elementor-testimonial-wrapper::before {
    content: '★★★★★';
    display: block;
    color: #D4A843;
    font-size: 18px;
    letter-spacing: 3px;
    margin-bottom: 14px;
    line-height: 1;
}
.elementor-testimonial-content {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #374151 !important;
    font-style: italic !important;
}
.elementor-testimonial-name {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: #1B2B3A !important;
    font-style: normal !important;
    font-size: 14px !important;
    margin-top: 16px !important;
}
.elementor-testimonial-job,
.elementor-testimonial-company {
    color: #6b7280 !important;
    font-size: 12px !important;
    font-style: normal !important;
}
/* Testimonial section background → navy */
.elementor-section:has(.elementor-widget-testimonial),
.elementor-section:has(.elementor-testimonial-wrapper) {
    background-color: #F5F0E8 !important;
}
/* Carousel navigation → red */
.swiper-pagination-bullet-active {
    background-color: #BF3A2B !important;
}
.swiper-button-next,
.swiper-button-prev {
    color: #BF3A2B !important;
}
.swiper-button-next::after,
.swiper-button-prev::after {
    color: #BF3A2B !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 7D: Hero form — glassmorphic dark glass card (desktop)                      */
/* OVERRIDES BUG-D01 white card on the first-section hero form only           */
/* Higher specificity: descendent selector + :first-of-type wins over         */
/* fix-desktop.css BUG-D01 (:has selector, same media query)                  */
/* ─────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────── */
/* Promo strip: $149 Roof Check-Up (UX-T02 / UX-S01 fix)                      */
/* Injected below hero via JS (Phase 7 additions)                              */
/* ─────────────────────────────────────────────────────────────────────────── */
.lasso-promo-strip {
    background-color: #1B2B3A;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    text-align: center;
}
.lasso-promo-strip__text {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #F5F0E8;
    margin: 0;
}
.lasso-promo-strip__text strong {
    color: #D4A843;
}
.lasso-promo-strip__cta {
    display: inline-flex;
    align-items: center;
    background-color: #BF3A2B;
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s;
}
.lasso-promo-strip__cta:hover {
    background-color: #a00d24;
}

/**
 * Lasso Roofing — Phase 5 CSS Fixes
 *
 * Deployment: mu-plugins via SFTP → lasso-optimization/css/
 * Loaded by: loader.php (auto-loaded with all CSS in css/)
 *
 * Issues fixed:
 *   UX-T07        Storm Damage emergency banner styling
 *   UX-T03/S05    AI Quote step indicator + progress bar styling
 *   UX-S06        Contact phone above-fold banner styling
 *   BUG-S03       AI Quote hero navy background
 *   DESIGN-T05    Blog page: form column removed from hero at tablet
 *   SEO-T05       Blog heading "Suggested Reading" → handled in fix-phase5.js
 *   UX-T04/S07    City ZIP / city name pill grid styling
 *   UX-S09        Service Areas styled pill grid
 *   UX-T08        Contact page redundant info block hidden
 *   DESIGN-T06    Services hero: gradient text legibility overlay
 *   BUG-S05       $149 badge repositioned below service card grid
 */

/* ─── STORM DAMAGE EMERGENCY BANNER (UX-T07) ────────────────────────────── */

.lasso-emergency-banner {
    background-color: var(--lasso-red, #BF3A2B) !important;
    color: #fff !important;
    padding: 14px 20px !important;
    text-align: center !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    border: none !important;
    border-radius: 0 !important;
}

.lasso-emergency-banner a {
    color: #fff !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

/* ─── AI QUOTE STEP INDICATOR (UX-T03 / UX-S05) ─────────────────────────── */

.lasso-quote-frame {
    background-color: var(--lasso-cream, #F5F0E8) !important;
    padding: 28px 24px 12px !important;
    text-align: center !important;
    font-family: 'Outfit', sans-serif !important;
    border-bottom: 3px solid var(--lasso-navy, #1B2B3A) !important;
}

.lasso-quote-frame h1,
.lasso-quote-frame h2 {
    font-family: 'DM Serif Display', serif !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    color: var(--lasso-navy, #1B2B3A) !important;
    margin: 0 0 8px !important;
    line-height: 1.25 !important;
}

.lasso-quote-frame p {
    font-size: 0.95rem !important;
    color: #555 !important;
    margin: 0 !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.lasso-progress-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 16px 24px 24px !important;
    background-color: var(--lasso-cream, #F5F0E8) !important;
    font-family: 'Outfit', sans-serif !important;
}

.lasso-progress-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

.lasso-progress-step .step-num {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    background-color: #d1d5db !important;
    color: #374151 !important;
    transition: background-color 0.2s !important;
}

.lasso-progress-step.active .step-num {
    background-color: var(--lasso-red, #BF3A2B) !important;
    color: #fff !important;
}

.lasso-progress-step .step-label {
    font-size: 0.7rem !important;
    color: #aaa !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
}

.lasso-progress-step.active .step-label {
    color: var(--lasso-red, #BF3A2B) !important;
    font-weight: 700 !important;
}

.lasso-progress-connector {
    flex: 1 !important;
    height: 2px !important;
    background-color: #ddd !important;
    max-width: 48px !important;
    margin-bottom: 22px !important;
}

/* ─── CONTACT PHONE ABOVE FOLD (UX-S06) ─────────────────────────────────── */

.lasso-contact-phone-top {
    background-color: var(--lasso-navy, #1B2B3A) !important;
    color: #fff !important;
    padding: 20px 24px !important;
    text-align: center !important;
    font-family: 'Outfit', sans-serif !important;
}

.lasso-contact-phone-top .lasso-cph-label {
    font-size: 0.9rem !important;
    opacity: 0.8 !important;
    margin: 0 0 6px !important;
}

.lasso-contact-phone-top .lasso-cph-number {
    font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-decoration: none !important;
    display: block !important;
    font-family: 'DM Serif Display', serif !important;
}

.lasso-contact-phone-top .lasso-cph-hours {
    font-size: 0.85rem !important;
    opacity: 0.75 !important;
    margin: 6px 0 0 !important;
}

/* ─── AI QUOTE HERO NAVY BACKGROUND (BUG-S03) ────────────────────────────── */
/* Applied to AI Quote hero section via body class detection in JS */

.lasso-quote-navy-hero.elementor-section {
    background-color: var(--lasso-navy, #1B2B3A) !important;
    background-image: none !important;
}

.lasso-quote-navy-hero .elementor-heading-title {
    color: #fff !important;
    font-family: 'DM Serif Display', serif !important;
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
}

.lasso-quote-navy-hero .elementor-widget-text-editor {
    color: rgba(255,255,255,0.85) !important;
}

/* AI Quote "Next Step" button — override orange bg for WCAG AA contrast */
button.next-step-btn,
.button-group button[type="submit"] {
    background-color: #BF3A2B !important;
    color: #ffffff !important;
    min-height: 44px !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer !important;
}

/* ─── BLOG FORM COLUMN SUPPRESSED AT TABLET (DESIGN-T05) ────────────────── */

/* ─── CITY / SERVICE AREA PILL GRID (UX-T04 / UX-S07 / UX-S09) ──────────── */

.lasso-pill-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 16px 0 !important;
    font-family: 'Outfit', sans-serif !important;
}

.lasso-pill-item {
    background-color: var(--lasso-cream, #F5F0E8) !important;
    border: 1px solid rgba(13,27,42,0.15) !important;
    border-radius: 24px !important;
    padding: 7px 16px !important;
    font-size: 0.875rem !important;
    color: var(--lasso-navy, #1B2B3A) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

.lasso-pill-item:hover {
    background-color: var(--lasso-navy, #1B2B3A) !important;
    color: #fff !important;
    border-color: var(--lasso-navy, #1B2B3A) !important;
}

/* ─── SERVICES HERO GRADIENT OVERLAY (DESIGN-T06) ───────────────────────── */
/* Improves H1 legibility on photo backgrounds */

body:not(.home) .elementor-section:first-of-type.elementor-section-has-bg,
body:not(.home) .lasso-hero[style*="background-image"] {
    position: relative !important;
}

body:not(.home) .elementor-section:first-of-type.elementor-section-has-bg::after,
body:not(.home) .lasso-hero[style*="background-image"]::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        to bottom,
        rgba(13,27,42,0.55) 0%,
        rgba(13,27,42,0.3) 60%,
        rgba(13,27,42,0.1) 100%
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

body:not(.home) .elementor-section:first-of-type.elementor-section-has-bg .elementor-container,
body:not(.home) .lasso-hero[style*="background-image"] > * {
    position: relative !important;
    z-index: 2 !important;
}

/* ─── $149 PROMO BADGE: DETACH FROM SERVICE CARD GRID (BUG-S05) ──────────── */
/* Hide the in-hero badge — Phase 7 already injects it as a standalone strip */

body.page-id-services .elementor-widget-image .wp-image-badge,
.lasso-promo-badge-overlay {
    display: none !important;
}

/* ─── GOOGLE MAPS EMBED (Service Areas / Contact) ────────────────────────── */

.lasso-map-embed {
    width: 100% !important;
    border: 0 !important;
    border-radius: 8px !important;
    display: block !important;
    margin-top: 16px !important;
}

/**
 * Lasso Roofing — Phase 8: Mobile UX Round 2
 *
 * Deployment: mu-plugins via SFTP → lasso-optimization/css/
 * Loaded by: lasso-enqueue-phases.php (wp_enqueue_scripts priority 1001)
 *
 * IMPORTANT: The site uses Elementor header templates, NOT Astra theme header.
 * All selectors target Elementor classes (.elementor-*, .e-con, .e-n-accordion)
 * and custom .lasso-* classes from server-side PHP modules.
 *
 * Issues fixed:
 *   FIX-01   Hide top bar on mobile to reduce header height (~140px → ~60px)
 *   FIX-02   Mobile nav dropdown z-index + pointer-events
 *   FIX-03   FAQ accordion (<details>/<summary>) click reliability
 *   FIX-04   Empty phantom sections (data-id e6acf26, 233ae7e) removed
 *   FIX-05   Empty children in Why Lasso section hidden
 *   FIX-06   Service card "Learn More" buttons placeholder styling
 *   FIX-07   CTA banner excessive bottom padding
 *   FIX-08   Fixed bottom bar z-index hierarchy
 *   FIX-10   Smart sticky header — hide on scroll down, show on scroll up
 */

/* ═══════════════════════════════════════════════════════════════════════════
   FIX-01: Mobile header — hide top bar to reclaim viewport space

   The Elementor header has 2 rows:
     Row 1 (data-id="67222c3"): Contact info + CTA button (~80px tall)
     Row 2 (data-id="c7fdd3d"): Logo + hamburger nav (~60px tall)

   Together they consume ~140px of mobile viewport (37% of 375px screen).
   Hide Row 1 on mobile to keep just logo + nav.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   FIX-02: Mobile nav dropdown — Elementor nav-menu widget

   The hamburger is .elementor-menu-toggle (Elementor widget, NOT Astra).
   The dropdown is .elementor-nav-menu--dropdown.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hamburger toggle: ensure it's tappable and properly positioned */
.elementor-menu-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
    /* display controlled by lasso-mobile.css / lasso-desktop.css */
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Mobile dropdown nav: must appear above everything */
.elementor-nav-menu--dropdown {
    z-index: 1100 !important;
    background-color: #ffffff !important;
}

/* Nav menu items must be clickable */
.elementor-nav-menu--dropdown .menu-item a,
.elementor-nav-menu--dropdown .elementor-item {
    pointer-events: all !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
    text-decoration: none !important;
    color: #1B2B3A !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border-bottom: 1px solid #F3F4F6 !important;
}

.elementor-nav-menu--dropdown .menu-item a:active,
.elementor-nav-menu--dropdown .elementor-item:active {
    background-color: #F5F0E8 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX-03: FAQ accordion — <details>/<summary> native HTML5

   The FAQ uses Elementor's nested accordion (.e-n-accordion) which renders
   as <details>/<summary> elements. These work natively but can be blocked
   by overlapping elements or z-index issues.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ensure the FAQ section is above any floating elements */
.lasso-faq-section {
    position: relative !important;
    z-index: 5 !important;
}

.e-n-accordion {
    position: relative !important;
    z-index: 5 !important;
}

/* Each FAQ item's summary (question) must be tappable */
.e-n-accordion-item summary,
.e-n-accordion-item-title {
    pointer-events: all !important;
    cursor: pointer !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    padding: 16px 20px !important;
    font-weight: 600 !important;
    position: relative !important;
    z-index: 5 !important;
    -webkit-tap-highlight-color: rgba(200, 16, 46, 0.1) !important;
}

/* FAQ answer content area */
.e-n-accordion-item > [role="region"],
.e-n-accordion-item-body {
    padding: 0 20px 20px !important;
    pointer-events: all !important;
}

/* Hide default browser disclosure triangle (Chrome/Safari) */
.e-n-accordion-item summary::-webkit-details-marker {
    display: none !important;
}

/* Plus/minus icon toggle */
.e-n-accordion-item[open] .e-closed {
    display: none !important;
}

.e-n-accordion-item:not([open]) .e-opened {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX-04: Remove empty phantom sections

   Two confirmed empty sections on homepage:
   - data-id="e6acf26": empty carousel between Brand Strip and Services
   - data-id="233ae7e": empty section between Services and Why Lasso
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide specific known empty sections by Elementor data-id */
.elementor-element[data-id="e6acf26"],
.elementor-element[data-id="233ae7e"] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* JS also adds this class to dynamically-detected empty sections */
.lasso-empty-section-hidden {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX-05: Empty children in Why Lasso section

   data-id="1d3eefd" and data-id="e13e926" are empty child containers
   inside the Why Lasso section that add unwanted spacing.
   ═══════════════════════════════════════════════════════════════════════════ */

.elementor-element[data-id="1d3eefd"],
.elementor-element[data-id="e13e926"] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX-06: Service card "Learn More" buttons — style for href="#"

   All 6 "Learn More" buttons link to href="#" (placeholder). Until real
   URLs are added in Elementor, hide them to avoid user confusion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   FIX-07: CTA banner excessive bottom padding

   .lasso-cta-inner has padding-bottom: 100px which creates excessive
   whitespace. Reduce to 48px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   FIX-08: Fixed mobile bottom bar z-index hierarchy

   The .lasso-mobile-bar has z-index: 9999 which can overlap FAQ and footer.
   Lower to 999 (below header's 1000 but above content).
   Also add body padding-bottom so content isn't hidden behind the bar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL: Services section consistency on mobile

   Services use .lasso-service-card inside .lasso-services-row.
   On mobile they stack to single column which is correct.
   Ensure consistent spacing and font sizes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ========================================
 * Phase 2A — Mobile UX Critical Fixes
 * March 2026
 * ======================================== */

/* ========================================
 * Phase 4A — UX Polish
 * March 2026
 * ======================================== */

/* Hero text contrast — text-shadow for readability */
.wp-block-cover .wp-block-cover__inner-container h1,
.wp-block-cover .wp-block-cover__inner-container p {
  text-shadow: 0 2px 8px rgba(0,0,0,0.7) !important;
}

/* Warranty card text sizing */
.page-id-38 .elementor-widget-text-editor { font-size: 14px !important; }

/* Siding hero text overlap fix */
.page-id-1199 .wp-block-cover .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* Insurance Claims hero styling */
.page-id-1177 .entry-content > .wp-block-group:first-child {
  background: linear-gradient(135deg, #1B2B3A 0%, #1a2744 100%);
  padding: 60px 20px;
  color: #F5F0E8;
}

/**
 * Lasso Roofing — Sprint Final: Remaining CSS Fixes (Sprints 1-4)
 *
 * Deployment: mu-plugins via SFTP → lasso-optimization/css/
 * Loaded by: lasso-enqueue-phases.php (wp_enqueue_scripts priority 1001)
 *
 * IMPORTANT: The site uses Elementor Pro header templates, NOT Astra theme.
 * All selectors target Elementor classes (.elementor-*, .e-con) and custom
 * .lasso-* classes. Uses !important on overrides since Elementor has high
 * specificity from inline styles and widget CSS.
 *
 * Design tokens:
 *   Navy:  #1B2B3A
 *   Red:   #BF3A2B
 *   Cream: #F5F0E8
 *   Gold:  #D4A843
 *   White: #FFFFFF
 *   Heading font: 'DM Serif Display', serif
 *   Body font:    'Outfit', sans-serif
 *
 * Issues fixed:
 *   ── Sprint 2 ──────────────────────────────────────────────────
 *   TASK-008  AI Quote "Next Step" button contrast (P0)
 *   TASK-018  Contact form field borders site-wide (P1)
 *   TASK-040  "SEND MESSAGE" button full-width mobile (P2)
 *   TASK-019  Hide sticky CTA bar on /contact/ page (P1)
 *
 *   ── Sprint 4 ──────────────────────────────────────────────────
 *   TASK-011  Service card click/tap indicators (P1)
 *   TASK-048  AI Quote stepper touch targets enlarged (P2)
 *   TASK-049  Trust badge stripe height reduction (P2)
 *   TASK-065  Skip to content accessibility fix (P3)
 *   TASK-067  Service card spacing at tablet 768-900px (P3)
 *   TASK-068  Stats strip layout at 769px breakpoint (P3)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   ██ SPRINT 2 FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── TASK-008: AI Quote "Next Step" Button Contrast (P0) ────────────────
   Page: /ai-instant-quote/
   Problem: Orange button on dark orange background fails WCAG AA contrast.
   Fix: Brand red (#BF3A2B) on white background, full-width on mobile,
        minimum 48px touch target height.
   ──────────────────────────────────────────────────────────────────────── */

/* Scope to the AI Quote page via body class detection */
body[class*="ai-instant-quote"] .elementor-button,
body[class*="ai-instant-quote"] .elementor-field-type-submit button,
body[class*="ai-instant-quote"] .elementor-field-type-submit .elementor-button,
body[class*="ai-instant-quote"] .e-form__buttons button,
body[class*="ai-instant-quote"] .e-form__buttons__wrapper button,
body[class*="ai-instant-quote"] input[type="submit"],
body[class*="ai-instant-quote"] button[type="submit"] {
    background-color: #BF3A2B !important;
    color: #FFFFFF !important;
    border: 2px solid #BF3A2B !important;
    min-height: 48px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0.02em !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

body[class*="ai-instant-quote"] .elementor-button:hover,
body[class*="ai-instant-quote"] .elementor-field-type-submit button:hover,
body[class*="ai-instant-quote"] .e-form__buttons button:hover,
body[class*="ai-instant-quote"] button[type="submit"]:hover {
    background-color: #A50D26 !important;
    border-color: #A50D26 !important;
    box-shadow: 0 4px 16px rgba(200, 16, 46, 0.35) !important;
}

/* Focus state for keyboard accessibility */
body[class*="ai-instant-quote"] .elementor-button:focus-visible,
body[class*="ai-instant-quote"] button[type="submit"]:focus-visible {
    outline: 3px solid #1B2B3A !important;
    outline-offset: 2px !important;
}

/* Mobile: full-width quote navigation/submit buttons */

/* Secondary/back buttons in the quote flow — ghost style for hierarchy */
body[class*="ai-instant-quote"] .e-form__buttons__wrapper button.e-form__buttons__wrapper__button-previous,
body[class*="ai-instant-quote"] .elementor-button.elementor-button--previous {
    background-color: #FFFFFF !important;
    color: #1B2B3A !important;
    border: 2px solid #D0D0D0 !important;
}

body[class*="ai-instant-quote"] .e-form__buttons__wrapper button.e-form__buttons__wrapper__button-previous:hover,
body[class*="ai-instant-quote"] .elementor-button.elementor-button--previous:hover {
    background-color: #F5F0E8 !important;
    border-color: #1B2B3A !important;
    color: #1B2B3A !important;
}

/* ─── TASK-018: Contact Form Field Borders (P1) ─────────────────────────
   Pages: /contact/ and all forms site-wide
   Problem: Form inputs have no visible border, poor affordance.
   Fix: 1px solid #D0D0D0 border, 44px min-height on mobile,
        focus state with navy/red border color.
   ──────────────────────────────────────────────────────────────────────── */

/* All Elementor form text fields — site-wide */
.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 {
    border: 1px solid #D0D0D0 !important;
    border-radius: var(--radius-md) !important;
    background-color: #FFFFFF !important;
    color: #1B2B3A !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    padding: 10px 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Focus state — navy border with subtle glow */
.elementor-field-textual:focus,
.elementor-field:focus,
.elementor-field-group input[type="text"]:focus,
.elementor-field-group input[type="email"]:focus,
.elementor-field-group input[type="tel"]:focus,
.elementor-field-group input[type="url"]:focus,
.elementor-field-group input[type="number"]:focus,
.elementor-field-group select:focus,
.elementor-field-group textarea:focus {
    border-color: #1B2B3A !important;
    box-shadow: 0 0 0 3px rgba(13, 27, 42, 0.1) !important;
    outline: none !important;
}

/* Focus-visible for keyboard navigation — red ring for higher visibility */
.elementor-field-textual:focus-visible,
.elementor-field:focus-visible,
.elementor-field-group input:focus-visible,
.elementor-field-group select:focus-visible,
.elementor-field-group textarea:focus-visible {
    border-color: #BF3A2B !important;
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15) !important;
}

/* Placeholder text */
.elementor-field-textual::placeholder,
.elementor-field::placeholder,
.elementor-field-group input::placeholder,
.elementor-field-group textarea::placeholder {
    color: #9CA3AF !important;
    opacity: 1 !important;
}

/* Form labels — consistent typography */
.elementor-field-label {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1B2B3A !important;
    margin-bottom: 6px !important;
}

/* Mobile: enforce minimum touch target height */

/* Exception: Do NOT override the glassmorphic hero form inputs on desktop
   (handled in fix-advanced-ux.css 7D). Scope these to non-hero forms. */

/* ─── TASK-040: "SEND MESSAGE" Button Full-Width Mobile (P2) ────────────
   Page: /contact/
   Problem: Submit button doesn't span full width on mobile, poor tap target.
   Fix: 100% width on mobile (<768px), min 48px height, brand red fill.
   ──────────────────────────────────────────────────────────────────────── */

/* ─── TASK-019: Hide Sticky CTA on /contact/ Page (P1 — CSS only) ───────
   Page: /contact/
   Problem: Competing CTAs — sticky CTA bar overlaps the contact form,
            creating redundant calls-to-action on a page already dedicated
            to conversions.
   Fix: Hide all floating/sticky CTA elements on the contact page.
   ──────────────────────────────────────────────────────────────────────── */

/* WordPress body class detection for the contact page */
body[class*="contact"] .lasso-float-cta,
body[class*="contact"] .lasso-floating-cta,
body[class*="contact"] .lasso-bottom-bar,
body[class*="contact"] .lasso-mobile-bar,
body[class*="contact"] [class*="sticky-cta"],
body[class*="contact"] [class*="sticky-bar"],
body[class*="contact"] [class*="floating-cta"],
body.page-slug-contact .lasso-float-cta,
body.page-slug-contact .lasso-floating-cta,
body.page-slug-contact .lasso-mobile-bar {
    display: none !important;
    visibility: hidden !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: opacity 0.3s;
}

/* Remove body padding-bottom override on contact page since bar is hidden */

/* ═══════════════════════════════════════════════════════════════════════════
   ██ SPRINT 4 FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── TASK-011: Service Card Click/Tap Indicators (P1) ──────────────────
   Pages: Homepage, /services/
   Problem: Service cards lack hover feedback on desktop and tap affordance
            on mobile, making them appear non-interactive.
   Fix: Desktop gets lift+shadow on hover. Mobile gets visible arrow.
   Note: Mobile arrow is already handled in fix-mobile-ux.css (UX-04)
         via .elementor-icon-box-wrapper::after { content: '→' }.
         This adds the DESKTOP hover state and reinforces mobile.
   ──────────────────────────────────────────────────────────────────────── */

/* Desktop: hover lift + shadow on service cards */

/* Mobile: reinforce tap indicators (supplements fix-mobile-ux.css UX-04) */

/* ─── TASK-048: Enlarge AI Quote Stepper Touch Targets (P2) ─────────────
   Page: /ai-instant-quote/
   Problem: Step indicator circles are 36px (below 44px WCAG touch target).
            Step labels have <12px font size on mobile.
   Fix: Mobile override — circles to 44px, labels to 12px minimum.
   Note: Base styles in fix-phase5.css (.lasso-progress-step .step-num at 36px).
   ──────────────────────────────────────────────────────────────────────── */

/* ─── TASK-049: Trust Badge Stripe Height Reduction (P2) ────────────────
   Pages: All pages with trust badges
   Problem: Trust badge strip is 40-60px tall on mobile, consuming
            excessive viewport space for small logos.
   Fix: Reduce to 28-32px height on mobile, compact padding,
        scaled-down badge images.
   ──────────────────────────────────────────────────────────────────────── */

/* Tablet: slightly larger but still compact */

/* ─── TASK-065: Skip to Content Accessibility Fix (P3) ──────────────────
   Pages: All pages
   Problem: "Skip to content" link is visible as plain text at the top of
            every page, pushing down the header.
   Fix: Screen-reader-only pattern — visually hidden by default, visible
        on keyboard :focus for accessibility compliance.
   ──────────────────────────────────────────────────────────────────────── */

/* Visually hide skip link by default */
.skip-link,
a[href="#content"],
a.skip-link,
.screen-reader-text,
a.screen-reader-text,
.elementor-screen-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Issue #33: Screen-reader text: proper clip pattern instead of font-size: 0 */
.elementor-social-icon .elementor-screen-only,
.elementor-icon .elementor-screen-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    font-size: inherit !important;
}

/* Show skip link on keyboard focus — visible, styled, on top of everything */
.skip-link:focus,
a[href="#content"]:focus,
a.skip-link:focus,
.screen-reader-text:focus,
a.screen-reader-text:focus {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 24px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    z-index: 100000 !important;
    background-color: #1B2B3A !important;
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    outline: 3px solid #BF3A2B !important;
    outline-offset: 2px !important;
}

/* Also handle focus-visible for modern browsers */
.skip-link:focus-visible,
a[href="#content"]:focus-visible {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 24px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    z-index: 100000 !important;
}

/* ─── TASK-067: Service Card Spacing at Tablet 768-900px (P3) ──────────
   Pages: Homepage, /services/
   Problem: At 768-900px, 3-column layout squeezes service cards into
            unreadable widths with overlapping text.
   Fix: Force 2-column grid at 768-900px with 16px+ gap.
        Switch to 3-column only at 901px+.
   Note: fix-mobile-ux.css sets 50% at 768-1024px range. This narrows
         the 2-col range to 768-900px and introduces 3-col at 901px.
   ──────────────────────────────────────────────────────────────────────── */

/* 768-900px: Force 2-column layout for service cards */

/* 901px+: Allow 3-column layout for service cards */

/* ─── TASK-068: Stats Strip Layout at 769px Breakpoint (P3) ─────────────
   Page: Homepage
   Problem: Stats section displays awkwardly at 768-900px — counters
            either overflow or collapse into a single column.
   Fix: 2x2 grid at 768-900px, smooth transition to 4-column at 901px+.
   Note: fix-critical-bugs.css handles mobile (<768px) with 50% flex.
         fix-mobile-ux.css sets 25% at 768-1024px (too tight at 768-900).
   ──────────────────────────────────────────────────────────────────────── */

/* 768-900px: 2x2 grid for stats counters */

/* 901px+: 4-column stats layout (smooth horizontal row) */

/* fix-nav-override.css — Phase 2B nav + AI Quote fixes */

/* Hide desktop nav on mobile — collapse to hamburger */

/* AI Quote duplicate header fix */
.page-id-40 .elementor-location-header ~ .elementor-location-header { display: none !important; }

/* AI Quote whitespace fix */
/* AI Quote whitespace: scoped to top-level section, not generic :first-child */
.page-id-40 > .elementor > .elementor-element:first-child { margin-top: 0 !important; padding-top: 0 !important; }

/* ========================================================================
 * QA ROUND 3 FIXES — Applied during consolidation (March 2026)
 * Source: qa-consolidated-2026-03-06.md
 * ======================================================================== */

/* P1 #4: Stat labels were 10-11px — bumped to 15px for WCAG.
   .elementor-size-default overrides inline font-size, so target it explicitly. */
.elementor-17 .elementor-element-abec2f2 .elementor-heading-title.elementor-size-default,
.elementor-17 .elementor-element-6421931 .elementor-heading-title.elementor-size-default {
    font-size: 15px !important;
    color: #4A5568 !important; /* was #6b7280 (4.26:1), now ~5.9:1 — passes WCAG AA */
}

/* P1 #5: Form labels white-on-white — change to dark text */
.elementor-17 .elementor-field-label {
    color: #1B2B3A !important;
}

/* P1 #7: Storm CTA button — red text on orange bg, fix to proper button */
.elementor-17 .elementor-element-1d6a575 a,
.elementor-17 .elementor-element-981046e ~ .elementor-widget .elementor-button {
    background-color: #BF3A2B !important;
    color: #FFFFFF !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    display: inline-block !important;
}

/* P1 #8: "Our Process" heading — black(#000) should be navy.
   Element is .elementor-element-59d5fc3. Use !important to override Elementor inline. */
.elementor-17 .elementor-element-59d5fc3 h2.elementor-heading-title.elementor-size-default {
    color: #1B2B3A !important;
}
/* Also fix all H2 headings on homepage to default to navy */
.elementor-17 h2.elementor-heading-title {
    color: #1B2B3A !important;
}

/* P2 #10: City pills — bg is white/light, so text must be dark navy for contrast */
.elementor-17 .elementor-element-663e4ab .elementor-icon-list-text,
.elementor-17 .elementor-element-bec6438 .elementor-icon-list-text,
.elementor-17 .elementor-element-26cb92b .elementor-icon-list-text {
    color: #1B2B3A !important;
}

/* P2 #12: Footer heading font inconsistency — standardize to DM Serif Display */
.elementor-element-6f1df7f .elementor-heading-title,
.elementor-element-8edf0cf .elementor-heading-title,
.elementor-element-5471b8d .elementor-heading-title {
    font-family: 'DM Serif Display', serif !important;
}

/* P0 #1: Process section hidden by child theme CSS.
   astra-child-refined-industrial.css sets display:none on this element.
   Override to restore visibility. */
.elementor-17 .elementor-element.elementor-element-6d73415 {
    display: flex !important;
}

/* ==========================================================================
   AUDIT REPORT — All-Viewport Fixes (March 2026)
   ========================================================================== */

/* Audit Fix: Service description paragraphs line-height
   Audit found ~1.2 in some contexts. Ensure 1.6+ for icon-box descriptions */
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-icon-box .elementor-icon-box-content p {
    line-height: 1.6 !important;
}

/* Audit Fix: Hero text contrast — text-shadow for legibility over background 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 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Audit Fix: Unified border-radius + min touch target for all buttons */
.elementor-button,
.elementor-widget-button .elementor-button,
.wp-block-button__link {
    border-radius: var(--radius-md) !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================================================
 * QA Round 3 Fixes (2026-03-07) — P0 Contrast Issues
 * ======================================================================== */

/* P0-2: Storm CTA heading — red text on red/orange bg. Change to white.
   Double-class beats Elementor post-17.css specificity (0,4,0). */
.elementor-17 .elementor-element.elementor-element-981046e .elementor-heading-title {
    color: #FFFFFF !important;
}

/* P0-3: Certifications heading — navy text on navy bg. Change to cream. */
.elementor-17 .elementor-element.elementor-element-6364a56 .elementor-heading-title {
    color: #F5F0E8 !important;
}

/* Services page hero — H1 "Services" rendered dark (#111C27) on dark navy bg (invisible).
   --lasso-text-heading is near-black — correct for light pages, wrong for dark hero.
   Scoped to page-id-32 + widget a109c51 to avoid leaking to other pages. */
body.page-id-32 .elementor-element.elementor-element-a109c51 .elementor-heading-title {
    color: var(--lasso-text-inverse, #F2EDE3) !important;
}

/* Services page — Our Process step cards: replace near-black (#100F10) overlay with site navy.
   Source: post-32.css sets ::before { background-color:#100F10; --overlay-opacity:0.93 }
   on all 6 step card containers (76c7de5, 42b96b8, bb9b3cc, a785598, a7db658, 5b11a0f).
   #100F10 is off-brand — site dark color is --lasso-navy (#1B2B3A). Applies all viewports. */
body.page-id-32 .elementor-element-76c7de5::before,
body.page-id-32 .elementor-element-42b96b8::before,
body.page-id-32 .elementor-element-bb9b3cc::before,
body.page-id-32 .elementor-element-a785598::before,
body.page-id-32 .elementor-element-a7db658::before,
body.page-id-32 .elementor-element-5b11a0f::before {
    background-color: var(--lasso-navy, #1B2B3A) !important;
}

/* P1-2: Stats labels contrast — #6b7280 is 4.26:1, needs 4.5:1. Darken to navy. */
.elementor-17 .elementor-element-abec2f2 .elementor-heading-title,
.elementor-17 .elementor-element-abec2f2 p,
.elementor-17 .elementor-element-6421931 .elementor-heading-title,
.elementor-17 .elementor-element-6421931 p {
    color: #4A5568 !important; /* ~5.9:1 on white — passes AA */
}

/* REMOVED: Hero eyebrow element-class rule — superseded by data-id rule in mobile CSS (Issue 2) */

/* P1-4: "Get Started" eyebrow label — 12px too small, poor contrast */
.elementor-17 .elementor-element.elementor-element-fe301b5 .elementor-heading-title {
    font-size: 14px !important;
    color: var(--lasso-amber, #C78D2E) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

/* P2-4: "Houston's Top Roofing Company" — gray to navy */
.elementor-17 .elementor-element-3fdb79e .elementor-heading-title {
    color: #1B2B3A !important;
}

/* Process step body text — was 11px, fix to 14px.
   These are also heading widgets with .elementor-size-default.
   Use double-class for specificity. */
.elementor-17 .elementor-element.elementor-element-b5d6b0f .elementor-heading-title.elementor-size-default,
.elementor-17 .elementor-element.elementor-element-1c8e199 .elementor-heading-title.elementor-size-default,
.elementor-17 .elementor-element.elementor-element-88b1d51 .elementor-heading-title.elementor-size-default,
.elementor-17 .elementor-element.elementor-element-0a620e1 .elementor-heading-title.elementor-size-default,
.elementor-17 .elementor-element.elementor-element-81ccccf .elementor-heading-title.elementor-size-default,
.elementor-17 .elementor-element.elementor-element-59a079f .elementor-heading-title.elementor-size-default {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Footer nav links — gold on dark navy bg for consistency */
.elementor-location-footer .elementor-element-b73db75 .elementor-icon-list-item a {
    background-color: transparent !important;
    border: none !important;
    color: #D4A843 !important;
}

/* Footer headings — consistent styling */
.elementor-location-footer .elementor-element-6f1df7f .elementor-heading-title,
.elementor-location-footer .elementor-element-8edf0cf .elementor-heading-title,
.elementor-location-footer .elementor-element-5471b8d .elementor-heading-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* ========================================================================
 * QA ROUND 4 FIXES — March 7, 2026
 * Source: architect-review-2026-03-07.md (Gemini QA + Claude review)
 * ======================================================================== */

/* P1: H2 headings using Inter Tight — force DM Serif Display.
   Targets: "Certified, Qualified...", "Proudly Serving Houston",
   "Frequently asked questions", "Houston's Storm Season..." */
.elementor-17 h2.elementor-heading-title {
    font-family: 'DM Serif Display', Georgia, serif !important;
}

/* P0/P1: Service card descriptions — they are heading widgets, not icon-box.
   Elementor renders them as <p class="elementor-heading-title elementor-size-default">
   The post-17.css sets font-size and color with !important via .elementor-size-default.
   Must beat Elementor specificity: use double-class + element type.
   Specificity: .elementor-17 .elementor-element.elementor-element-X .elementor-heading-title.elementor-size-default = (0,5,0) */
.elementor-17 .elementor-element.elementor-element-eed2daf .elementor-heading-title.elementor-size-default,
.elementor-17 .elementor-element.elementor-element-fcaab0f .elementor-heading-title.elementor-size-default,
.elementor-17 .elementor-element.elementor-element-71c2615 .elementor-heading-title.elementor-size-default,
.elementor-17 .elementor-element.elementor-element-f427c02 .elementor-heading-title.elementor-size-default,
.elementor-17 .elementor-element.elementor-element-bc8570b .elementor-heading-title.elementor-size-default,
.elementor-17 .elementor-element.elementor-element-be03c2f .elementor-heading-title.elementor-size-default {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--lasso-navy, #1B2B3A) !important;
}

/* P2: Stat labels — bump from 14px to 15px all viewports */
.elementor-17 .elementor-element-abec2f2 .elementor-heading-title.elementor-size-default,
.elementor-17 .elementor-element-6421931 .elementor-heading-title.elementor-size-default,
.elementor-17 .elementor-element-new_stat_h2 .elementor-heading-title.elementor-size-default {
    font-size: 15px !important;
}

/* Footer contact info — Issue 9 FIX: unified 15px to match mobile rule */
.elementor-location-footer .elementor-element-contact_info_0db845b p,
.elementor-location-footer .elementor-widget-text-editor p {
    font-size: 15px !important;
}

/* P3: Service card H3 titles — should use DM Serif Display */
.elementor-widget-icon-box .elementor-icon-box-title {
    font-family: 'DM Serif Display', Georgia, serif !important;
}

/* P3: Storm section H3 — should use DM Serif Display */
.elementor-17 .elementor-element-981046e ~ .elementor-widget h3.elementor-heading-title,
.elementor-17 h3.elementor-heading-title[class*="elementor-size"] {
    font-family: 'DM Serif Display', Georgia, serif !important;
}

/* QA Iteration 1: Hero body paragraph (cd12967) — astra-child overrides to DM Serif.
   This is body copy, not a heading. Beat astra-child specificity (0,2,0) with (0,3,0). */
.elementor-17 .elementor-element.elementor-element-cd12967 p.elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
    line-height: 1.6 !important;
}

/* Emoji icon badges — consistent circular style */
.elementor-17 .elementor-element-de88307 .elementor-heading-title,
.elementor-17 .elementor-element-191d6e2 .elementor-heading-title,
.elementor-17 .elementor-element-4ec226a .elementor-heading-title,
.elementor-17 .elementor-element-ad4f96d .elementor-heading-title,
.elementor-17 .elementor-element-cb1817f .elementor-heading-title,
.elementor-17 .elementor-element-9f698d9 .elementor-heading-title {
    font-size: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background-color: rgba(245, 240, 232, 0.1) !important;
}


/* ==========================================================================
   PHP INLINE STYLE MIGRATION (Phase 3)
   Moved from: stats-strip.php, service-cards.php, process-timeline.php,
               content-fixes.php inline <style> blocks.
   ========================================================================== */

/* ── Stats Strip (from stats-strip.php) ─────────────────────────────────── */

.lasso-stats-strip {
    background-color: #F5F0E8 !important;
    width: 100%;
    box-sizing: border-box;
}

.lasso-stats-strip > .e-con {
    width: 50% !important;
    box-sizing: border-box;
    border-right: 1px solid rgba(13, 27, 42, 0.08);
    border-bottom: 1px solid rgba(13, 27, 42, 0.08);
}

.lasso-stats-strip > .e-con:nth-child(2n) {
    border-right: none;
}

.lasso-stats-strip > .e-con:nth-child(3),
.lasso-stats-strip > .e-con:nth-child(4) {
    border-bottom: none;
}

.lasso-stat-item {
    text-align: center;
    padding: 28px 16px !important;
}

.lasso-stat-item .elementor-heading-title {
    margin: 0 !important;
}

.lasso-stat-item h3.elementor-heading-title {
    font-size: 44px !important;
    font-weight: 800 !important;
    color: #1B2B3A !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
    font-family: 'DM Serif Display', Georgia, serif !important;
    margin-bottom: 6px !important;
}

.lasso-stat-item p.elementor-heading-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #4A5568 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    line-height: 1.4 !important;
    font-family: 'Outfit', -apple-system, sans-serif !important;
}

/* ── Brand Strip (from stats-strip.php) ─────────────────────────────────── */

.lasso-brand-strip {
    background-color: #ffffff !important;
    border-top: 1px solid #D4C9B5 !important;
    border-bottom: 1px solid #D4C9B5 !important;
    width: 100%;
}

.lasso-brand-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.lasso-brand-label {
    font-size: 12px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Outfit', -apple-system, sans-serif;
    white-space: nowrap;
}

.lasso-brand-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.lasso-brand-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    background-color: var(--lasso-surface, #F5F0E8);
    border: 1px solid var(--lasso-border, #D4C9B5);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    font-family: 'DM Serif Display', Georgia, serif;
    white-space: nowrap;
    letter-spacing: 0.3px;
    transition: all 0.15s;
}

@media (hover: hover) {
    .lasso-brand-pill:hover {
        border-color: var(--lasso-navy, #1B2B3A);
        color: var(--lasso-navy, #1B2B3A);
        background-color: var(--lasso-brown-light, rgba(139, 115, 85, 0.12));
    }
}

/* ── Services Section (from service-cards.php) ──────────────────────────── */

.lasso-services-section {
    background-color: var(--lasso-surface, #F5F0E8) !important;
}

.lasso-services-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    width: 100% !important;
    align-items: stretch !important;
}

.lasso-service-card {
    background-color: var(--lasso-surface, #F5F0E8) !important;
    border: 1px solid var(--lasso-border, #D4C9B5) !important;
    border-radius: 16px !important;
    padding: 28px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.lasso-service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background-color: var(--lasso-red, #BF3A2B);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

@media (hover: hover) {
    .lasso-service-card:hover {
        border-color: transparent !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10) !important;
        transform: translateY(-3px);
    }
    .lasso-service-card:hover::before {
        transform: scaleX(1);
    }
}

.lasso-service-card h3.elementor-heading-title,
.lasso-service-card h2.elementor-heading-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--lasso-navy, #1B2B3A) !important;
    font-family: 'DM Serif Display', Georgia, serif !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

.lasso-service-card p.elementor-heading-title,
.lasso-service-card h4.elementor-heading-title,
.lasso-service-card h5.elementor-heading-title,
.lasso-service-card h6.elementor-heading-title {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--lasso-navy, #1B2B3A) !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
}

.lasso-service-card .elementor-widget:first-child .elementor-heading-title {
    font-size: 40px !important;
    line-height: 1 !important;
    margin-bottom: 12px !important;
}

.lasso-service-card .elementor-widget:first-child p.elementor-heading-title {
    font-size: 40px !important;
    line-height: 1 !important;
    margin-bottom: 12px !important;
}

.lasso-service-card .elementor-button {
    background-color: transparent !important;
    color: var(--lasso-red, #BF3A2B) !important;
    border: none !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 44px !important;
    margin-top: auto !important;
}

.lasso-service-card .elementor-button:hover {
    color: var(--lasso-navy, #1B2B3A) !important;
}

.lasso-service-card .elementor-button-wrapper {
    margin-top: auto !important;
}

/* ── Process Timeline (from process-timeline.php) ───────────────────────── */


.lasso-process-section {
    background-color: var(--lasso-surface, #F5F0E8) !important;
}

.lasso-process-section > .e-con > .elementor-widget-heading h2.elementor-heading-title,
.lasso-process-section > .elementor-widget-heading h2.elementor-heading-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--lasso-navy, #1B2B3A) !important;
    font-family: 'DM Serif Display', Georgia, serif !important;
    text-align: center !important;
    margin-bottom: 40px !important;
}

.lasso-process-steps {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    position: relative;
}

.lasso-step {
    background-color: #ffffff !important;
    border: 1px solid var(--gray-200, #D4C9B5) !important;
    border-radius: 16px !important;
    padding: 24px 20px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.2s ease;
}

@media (hover: hover) {
    .lasso-step:hover {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    }
}

.lasso-step .elementor-widget:first-child .elementor-heading-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--lasso-amber, #C78D2E) !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}

.lasso-step .elementor-widget-image {
    margin-bottom: 12px !important;
}

.lasso-step .elementor-widget-image img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
}

.lasso-step h3.elementor-heading-title,
.lasso-step h4.elementor-heading-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--lasso-navy, #1B2B3A) !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

.lasso-step h5.elementor-heading-title,
.lasso-step h6.elementor-heading-title,
.lasso-step p.elementor-heading-title {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--gray-500, #6B7280) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* P2: Process step cards — white titles, cream descriptions on dark cards */
.lasso-process-section .e-con.e-child h3.elementor-heading-title,
.lasso-process-section .e-con.e-child h4.elementor-heading-title,
.lasso-process-section .e-con.e-child h5.elementor-heading-title {
    color: var(--lasso-white, #FFFFFF) !important;
}
.lasso-process-section .e-con.e-child p {
    color: var(--lasso-cream, #F5F0E8) !important;
}

/* ── Breadcrumb (from content-fixes.php) ────────────────────────────────── */

.lasso-breadcrumb {
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 0.8125rem;
    padding: 12px 20px;
    color: var(--lasso-text-light, #5A6577);
    max-width: 1200px;
    margin: 0 auto;
}

.lasso-breadcrumb a {
    color: var(--lasso-red, #BF3A2B);
    text-decoration: none;
    transition: color 0.15s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.lasso-breadcrumb a:hover {
    color: var(--lasso-red-hover, #A50D26);
    text-decoration: underline;
}

.lasso-breadcrumb-sep {
    margin: 0 6px;
    color: var(--lasso-border, #E2DDD5);
}

.lasso-breadcrumb [aria-current="page"] {
    color: var(--lasso-text-heading, #1B2B3A);
    font-weight: 500;
}

/* REMOVED: 5th competing eyebrow rule at (0,9,0) — superseded by data-id rule in mobile CSS (Issue 2) */

/* Active nav indicator (Issue #13: target both custom + Elementor native class) */
.lasso-active-nav,
.elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-nav-menu--main .current-menu-item > a {
    color: var(--lasso-white, #FFFFFF) !important;
    font-weight: 700 !important;
    position: relative;
}

.lasso-active-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background-color: var(--lasso-amber, #C78D2E);
    border-radius: 1px;
}

/* ── 404 Page (from content-fixes.php) ──────────────────────────────────── */

.lasso-404 {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.lasso-404 h1 {
    font-family: var(--font-display, Georgia, serif) !important;
    font-size: 4rem !important;
    color: #F5F0E8 !important;
    margin-bottom: 0.5rem !important;
}

.lasso-404 h2 {
    font-family: var(--font-display, Georgia, serif) !important;
    font-size: 1.5rem !important;
    color: var(--lasso-text-heading, #1B2B3A) !important;
    margin-bottom: 1rem !important;
}

.lasso-404 p {
    color: var(--lasso-text-light, #5A6577) !important;
    margin-bottom: 2rem !important;
}

.lasso-404-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.lasso-404-links a {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 6px;
    font-family: var(--font-body, sans-serif);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.25s ease;
    min-height: 44px;
}

.lasso-404-links a.primary {
    background-color: var(--lasso-red, #BF3A2B);
    color: #fff;
}

.lasso-404-links a.primary:hover {
    background-color: var(--lasso-red-hover, #A50D26);
    transform: translateY(-2px);
}

.lasso-404-links a.secondary {
    border: 2px solid var(--lasso-border, #E2DDD5);
    color: var(--lasso-text-heading, #1B2B3A);
}

.lasso-404-links a.secondary:hover {
    border-color: var(--lasso-red, #BF3A2B);
    color: var(--lasso-red, #BF3A2B);
}

/* ==========================================================================
   BUG 8 FIX: Follow Us — center align + remove Twitter/LinkedIn
   Applies to all viewports (footer is consistent across breakpoints)
   ========================================================================== */

/* Center "Follow Us" heading */
.elementor-location-footer [data-id="5471b8d"] .elementor-heading-title {
    text-align: center !important;
}

/* Center social icons wrapper */
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icons-wrapper {
    display: flex !important;
    justify-content: center !important;
}

/* Hide Twitter and LinkedIn icons — TODO: remove from Elementor widget for clean removal */
.elementor-location-footer .elementor-social-icon-twitter,
.elementor-location-footer .elementor-social-icon-x-twitter {
    display: none !important;
}
.elementor-location-footer .elementor-social-icon-linkedin,
.elementor-location-footer .elementor-social-icon-linkedin-in {
    display: none !important;
}

/* ── Lone Star Ironclad Color Fixes (2026-03-11) ─────────────────────────── */

/* Blog post title links — was orange #BF3A2B (Elementor widget default) */
.elementor-post__title a,
.elementor-post__title a:link,
.elementor-post__title a:visited {
    color: var(--lasso-text-heading, #111C27) !important;
}
.elementor-post__title a:hover {
    color: var(--lasso-red, #BF3A2B) !important;
}

/* Blog post excerpt text — was near-black #0F0E0F (Elementor default) */
/* Excerpt truncation: cards were dumping full article body (QA 2026-03-17) */
/* Container: let excerpt + read-more show, p-level clamp handles truncation */
.elementor-post__excerpt p,
.elementor-post__text p {
    color: var(--lasso-text, #2A3340) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Blog article cards — warm cream instead of pure white */
.elementor-post.elementor-grid-item {
    background-color: var(--lasso-surface, #F5F0E8) !important;
}

/* Testimonials section — warm cream instead of cold #EFEFEF */
.elementor-17 [data-id="28882ce"],
.elementor-17 .elementor-element-28882ce {
    background-color: var(--lasso-surface, #F5F0E8) !important;
}

/* FAQ section (homepage) — warm cream instead of cold #EFEFEF */
.lasso-faq-section {
    background-color: var(--lasso-surface, #F5F0E8) !important;
}

/* AI Quote question card panels — was blue-tinted #F7F7FF */
body[class*="ai-instant-quote"] .e-con,
body[class*="ai-instant-quote"] .elementor-section {
    background-color: var(--lasso-surface, #F5F0E8) !important;
}
/* Preserve dark hero on AI Quote page */
body[class*="ai-instant-quote"] [data-id="278ed59"] {
    background-color: var(--lasso-dark, #161E28) !important;
}

/* AI Quote step containers — was cold gray #EFEFEF */
body[class*="ai-instant-quote"] .elementor-widget-container {
    background-color: transparent !important;
}

/* AI Quote back/secondary buttons — was orange #E0691E */
body[class*="ai-instant-quote"] .elementor-button:not([type="submit"]),
body[class*="ai-instant-quote"] a.elementor-button[href="#"]:not(.primary) {
    background-color: var(--lasso-navy, #1B2B3A) !important;
    color: var(--lasso-text-inverse, #F2EDE3) !important;
    border-color: var(--lasso-navy, #1B2B3A) !important;
}

/* Nav dropdown — dark navy instead of pure white */
.elementor-nav-menu--dropdown,
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    background-color: var(--lasso-navy, #1B2B3A) !important;
}
.elementor-nav-menu--dropdown .elementor-item,
.elementor-nav-menu--dropdown a {
    color: var(--lasso-text-inverse, #F2EDE3) !important;
}
.elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-nav-menu--dropdown a:hover {
    color: var(--lasso-red, #BF3A2B) !important;
    background-color: var(--lasso-navy-light, #243446) !important;
}

/* Scroll-to-top button — old navy #1B2B3A → lasso-red accent */
.ast-scroll-top-icon {
    background-color: var(--lasso-red, #BF3A2B) !important;
    border-color: var(--lasso-red, #BF3A2B) !important;
}

/* Section dividers — warm border instead of generic #CCCCCC */
hr, .wp-block-separator, .lasso-divider {
    border-color: var(--lasso-border, #D4C9B5) !important;
    color: var(--lasso-border, #D4C9B5) !important;
}

/* Service areas section — warm cream */
.lasso-service-areas {
    background-color: var(--lasso-surface, #F5F0E8) !important;
}

/* Footer — standardize all dark rows to --lasso-dark */
.elementor-location-footer,
.elementor-location-footer .e-con,
.elementor-location-footer .elementor-section {
    background-color: var(--lasso-dark, #161E28) !important;
}
/* Preserve footer widgets as transparent over the dark base */
.elementor-location-footer .elementor-widget {
    background-color: transparent !important;
}

/* ── Why Choose Us (page-id-34) — content fixes ─────────────────────────── */

/* H1 text changed to title-case in DB; CSS preserves visual ALL CAPS */
body.page-id-34 h1 {
    text-transform: uppercase;
}

/* STEP number labels: changed from <h4> to <span class="lasso-step-label"> */
/* Must restore block display + heading-style appearance */
.lasso-step-label {
    display: block;
    font-family: var(--font-heading, 'Barlow Condensed', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--lasso-amber, #C78D2E);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* ═══ PHASE 3: Typography Drama — 3 Voices (M-20, T-14) ═══ */

/* The Whisper — eyebrows, labels, metadata */
.lasso-eyebrow,
.lasso-step-label,
[class*="eyebrow"] {
    font-family: var(--font-body) !important;
    font-size: var(--text-xs) !important;
    letter-spacing: var(--tracking-wider, 0.08em) !important;
    text-transform: uppercase !important;
    color: var(--lasso-brown, #8B7355) !important;
    font-weight: var(--weight-semibold, 600) !important;
}

/* Stats: Barlow Condensed for commanding numbers */
.elementor-counter-number-wrapper {
    font-family: var(--font-accent, 'Barlow Condensed', sans-serif) !important;
    font-weight: var(--weight-bold, 700) !important;
    color: var(--lasso-navy, #1B2B3A) !important;
}

/* Stats labels: uppercase brown for quiet authority */
.elementor-counter-title {
    font-family: var(--font-body) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tracking-wide, 0.04em) !important;
    color: var(--lasso-brown, #8B7355) !important;
    font-weight: var(--weight-semibold, 600) !important;
    font-size: var(--text-sm) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLOR DISCIPLINE FIXES — Override Elementor inline red (#BF3A2B)
   ═══════════════════════════════════════════════════════════════════════════
   NOTE: [style*=] selectors are used here as a TEMPORARY fix to override
   Elementor inline styles that cannot be changed without Elementor admin
   access. These should be removed once the colors are corrected directly in
   Elementor admin. See CSS-STANDARDS.md Rule 12 — justified by inability to
   access admin for these specific elements.
   ═══════════════════════════════════════════════════════════════════════════ */

/* "Only The Best Products" heading — change to amber (non-CTA, not a button) */
.elementor-heading-title[style*="BF3A2B"],
.elementor-heading-title[style*="bf3a2b"],
h3.elementor-heading-title[style*="191, 58, 43"] {
    color: var(--lasso-amber, #C78D2E) !important;
}

/* CTA banner background — change to dark navy (CTA button inside stays red) */
.lasso-cta-banner[style*="BF3A2B"],
.lasso-cta-banner[style*="bf3a2b"],
[class*="cta-banner"][style*="191, 58, 43"],
.elementor-element-d599bf4 {
    background-color: var(--lasso-dark, #161E28) !important;
}

/* FAQ accordion title text — amber not red
   Must match Elementor post-17.css specificity: .elementor-17 .elementor-element.elementor-element-HASH */
.elementor-17 .elementor-element .e-n-accordion-item-title,
.elementor-17 .elementor-element .e-n-accordion-item-title-text,
.elementor-17 .elementor-element .e-n-accordion-item-title-header,
.elementor-17 .elementor-widget-nested-accordion .e-n-accordion-item summary,
.elementor-17 .elementor-widget-nested-accordion .e-n-accordion-item summary *,
.elementor .elementor-element .e-n-accordion-item-title {
    color: var(--lasso-amber, #C78D2E) !important;
}

/* P4: FAQ accordion active title — white text for contrast on red bg */
.e-n-accordion-item-title-text {
    color: var(--lasso-white, #FFFFFF) !important;
}

/* Hero eyebrow "Reliable Roofing In Houston, TX" — amber
   Elementor sets via .elementor-17 .elementor-element.elementor-element-a34487d */
.elementor-17 .elementor-element.elementor-element-a34487d .elementor-heading-title,
.elementor-17 .lasso-hero h3.elementor-heading-title {
    color: var(--lasso-amber, #C78D2E) !important;
}

/* Override Elementor's global heading color for non-CTA headings
   Elementor uses: .elementor-widget-heading .elementor-heading-title { color: var(--e-global-color-primary) }
   where --e-global-color-primary = #BF3A2B (red). Override the variable for heading widgets: */
.elementor-widget-heading {
    --e-global-color-primary: var(--lasso-text-heading, #111C27) !important;
}
/* Restore red for heading widgets that ARE CTAs (inside buttons/links) */
a.elementor-button .elementor-heading-title,
.elementor-widget-heading a .elementor-heading-title {
    --e-global-color-primary: var(--lasso-red, #BF3A2B) !important;
}

/* Override Elementor global primary color on accordion widgets */
.elementor-widget-nested-accordion {
    --e-global-color-primary: var(--lasso-amber, #C78D2E) !important;
}

/* 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;
}