/* ==============================================================================
   BrijjPro HVAC Platform - Main Stylesheet
   ==============================================================================
   Project: HVAC MVP Version 2.0
   Framework: .NET 10 (Razor Pages)
   Purpose: Main stylesheet for customer and contractor interfaces
   Author: BrijjPro Development Team
   Last Updated: 2025
   ============================================================================== */

/* ==============================================================================
   CSS CUSTOM PROPERTIES (CSS Variables)
   ==============================================================================
   These variables define the color scheme and design tokens used throughout
   the entire application. Using CSS variables allows for easy theme changes
   and consistent styling across all pages.

   Usage: var(--variable-name)
   Example: background: var(--primary);
   ============================================================================== */
:root {
    /* BrijjPro Brand Colors - Core brand identity colors */
    --brijjpro-black: #111111; /* BrijjPro brand black - used for high-contrast text */
    --brijjpro-white: #ffffff; /* BrijjPro brand white - pure white for backgrounds */
    --brijjpro-blue: #2563eb; /* BrijjPro brand blue - primary brand color */
    --brijjpro-gray: #f3f4f6; /* BrijjPro brand gray - subtle backgrounds */
    --brijjpro-border: #e5e7eb; /* BrijjPro border color - dividers and outlines */
    /* Application Color System - Functional colors for UI elements */
    --bg: #f5efe5; /* Main page background - very light warm wood tone */
    --wood-page-bg: #f5efe5; /* Shared warm base used by the final page background override */
    --card: #ffffff; /* Card backgrounds - clean white */
    --ink: #1f2937; /* Primary text color - dark charcoal gray */
    --muted: #667085; /* Secondary text color - muted gray for labels */
    --line: #dbe4f0; /* Border color - light blue-gray for dividers */
    --primary: #2563eb; /* Primary action color - blue for buttons/links */
    --primary-dark: #1d4ed8; /* Primary hover state - darker blue */
    --top: #0f172a; /* Top navigation color - very dark navy */
    --success: #15803d; /* Success state color - green for confirmations */
}

/* ==============================================================================
   CUSTOMER DASHBOARD MARKETPLACE RAIL REDESIGN
   ==============================================================================
   The homeowner dashboard uses one database-backed product rail. This final layer
   turns that rail into a cleaner marketplace-style product feed: fewer borders,
   compact readable rows, smaller product media, and a softer shell that supports
   scrolling without making the page feel like a table of boxes.
   ============================================================================== */
@media (min-width: 1181px) {
    .customer-account-shell {
        gap: clamp(22px, 1.6vw, 34px) !important;
        grid-template-columns: minmax(286px, 328px) minmax(0, 1fr) !important;
        max-width: 1680px !important;
        padding-top: clamp(28px, 2.4vw, 42px) !important;
        width: min(1720px, 95vw) !important;
    }

    .customer-account-shell > .dashboard-offer-rail.dashboard-offer-rail-single {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 251, 255, .88)),
            radial-gradient(circle at 25% 0%, rgba(96, 165, 250, .16), transparent 36%) !important;
        border: 0 !important;
        border-radius: 22px !important;
        box-shadow: 0 28px 72px rgba(15, 23, 42, .16), inset 0 0 0 1px rgba(191, 219, 254, .55) !important;
        height: 940px !important;
        max-height: 940px !important;
        min-height: 940px !important;
        padding: 20px !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-rail-heading {
        border-bottom: 1px solid rgba(203, 213, 225, .74) !important;
        margin-bottom: 16px !important;
        padding-bottom: 16px !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-rail-heading span,
    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-search span {
        color: #1456d8 !important;
        font-size: 11px !important;
        letter-spacing: .08em !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-rail-heading h2 {
        color: #071427 !important;
        font-size: 22px !important;
        line-height: 1.05 !important;
        margin: 6px 0 8px !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-rail-heading p {
        color: #334155 !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-search {
        background: #fff !important;
        border: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .08), inset 0 0 0 1px rgba(147, 197, 253, .72) !important;
        margin-bottom: 14px !important;
        padding: 12px 14px !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-search input {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: #0f172a !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        padding: 4px 0 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list {
        gap: 10px !important;
        height: calc(100% - 178px) !important;
        padding: 2px 6px 10px 0 !important;
        scrollbar-color: rgba(37, 99, 235, .55) rgba(219, 234, 254, .9) !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .offer-rail-card {
        align-items: center !important;
        background: rgba(255, 255, 255, .82) !important;
        border: 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 12px 24px rgba(15, 23, 42, .07) !important;
        column-gap: 12px !important;
        display: grid !important;
        grid-template-areas:
            "media badge"
            "media title"
            "media detail"
            "media price" !important;
        grid-template-columns: 92px minmax(0, 1fr) !important;
        min-height: 122px !important;
        padding: 12px !important;
        transition: box-shadow .18s ease, transform .18s ease, background .18s ease !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .offer-rail-card:hover,
    .customer-account-shell .dashboard-offer-rail-single .offer-rail-card:focus-visible {
        background: #fff !important;
        box-shadow: 0 18px 34px rgba(15, 23, 42, .12) !important;
        transform: translateY(-1px) !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .offer-rail-badge {
        background: rgba(219, 234, 254, .95) !important;
        border: 0 !important;
        border-radius: 999px !important;
        color: #0b55d9 !important;
        font-size: 10px !important;
        grid-area: badge !important;
        line-height: 1 !important;
        margin-bottom: 2px !important;
        padding: 5px 8px !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .offer-rail-image {
        background: linear-gradient(145deg, #f8fbff, #eef6ff) !important;
        border: 0 !important;
        border-radius: 8px !important;
        box-shadow: inset 0 0 0 1px rgba(191, 219, 254, .75) !important;
        grid-area: media !important;
        height: 92px !important;
        min-height: 92px !important;
        object-fit: contain !important;
        padding: 8px !important;
        width: 92px !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .offer-rail-title {
        color: #071427 !important;
        display: -webkit-box !important;
        font-size: 13.5px !important;
        font-weight: 950 !important;
        grid-area: title !important;
        line-height: 1.18 !important;
        margin: 0 !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .offer-rail-detail {
        color: #475569 !important;
        display: -webkit-box !important;
        font-size: 11.5px !important;
        grid-area: detail !important;
        line-height: 1.28 !important;
        margin: 0 !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .offer-rail-price {
        color: #04786d !important;
        font-size: 16px !important;
        font-weight: 950 !important;
        grid-area: price !important;
        margin-top: 2px !important;
    }

    .customer-account-shell .customer-dashboard-main {
        gap: 10px !important;
    }

    .customer-account-shell .customer-account-hero {
        min-height: 242px !important;
        padding: clamp(20px, 1.6vw, 30px) !important;
    }

    .customer-account-shell .customer-account-hero h1 {
        font-size: clamp(32px, 2.35vw, 46px) !important;
    }

    .customer-account-shell .account-guidance-card,
    .customer-account-shell .account-metric-item,
    .customer-account-shell .account-result-section {
        border: 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 16px 36px rgba(15, 23, 42, .10), inset 0 0 0 1px rgba(226, 232, 240, .78) !important;
    }

    .customer-account-shell .account-result-section {
        padding: 9px 11px !important;
    }

    .customer-account-shell .dashboard-offer-rail-single [data-offer-filter-card][hidden],
    .customer-account-shell .dashboard-offer-rail-single .offer-rail-card[hidden] {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
}

/* ==============================================================================
   HVAC NEEDS TEXT CONTRAST ONLY
   ==============================================================================
   Keeps the current wood background exactly as-is, but makes the text in the
   Common HVAC Needs section readable when it sits directly on the patterned wood.
   ============================================================================== */
.hvac-service-layout .hvac-support-copy span {
    color: #004ed8 !important;
    font-weight: 950 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .45) !important;
}

.hvac-service-layout .hvac-support-copy h2,
.hvac-service-layout .hvac-support-list h3 {
    color: #061327 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .36) !important;
}

.hvac-service-layout .hvac-support-copy p,
.hvac-service-layout .hvac-support-list p {
    color: #17314f !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .34) !important;
}

.hvac-service-layout .hvac-support-list,
.hvac-service-layout .hvac-support-list article:nth-child(even),
.hvac-service-layout .hvac-support-list article:nth-child(n+3) {
    border-color: rgba(9, 35, 73, .24) !important;
}

.hvac-service-layout .hvac-service-icon {
    color: #004ed8 !important;
}

/* ==============================================================================
   GLOBAL RESET & BASE STYLES
   ==============================================================================
   These styles reset browser defaults and set up the foundation for all
   elements across the site. The box-sizing rule makes width/height calculations
   more predictable by including padding and borders.
   ============================================================================== */
* {
    /* Border-box makes element sizing include padding and border */
    /* Example: If width is 100px with 10px padding, total width stays 100px */
    box-sizing: border-box;
}

html {
    /* The root element fills the browser so short pages can still place the footer at the bottom. */
    min-height: 100%;
    /* Mobile and tablet browsers must be allowed to scroll when rotated into a short viewport. */
    overflow-y: auto;
}

body {
    /* Remove default browser margin to enable full-width designs */
    margin: 0;
    /* Font stack: Segoe UI (Windows), Arial (fallback), sans-serif (generic) */
    /* Provides clean, modern typography across all platforms */
    font-family: Segoe UI, Arial, sans-serif;
    /* Apply the light blue-gray background color to the entire page */
    background: var(--bg);
    /* Default text color - dark gray for good readability */
    color: var(--ink);
    /* Flex layout lets the shared footer sit at the bottom on short beginning/search pages. */
    display: flex;
    flex-direction: column;
    /* Minimum viewport height prevents the footer from floating in the middle of sparse pages. */
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ==============================================================================
   BRAND & LOGO COMPONENTS
   ==============================================================================
   These styles control the BrijjPro logo and brand elements that appear in the
   navigation header. The flexbox layout ensures proper alignment and the
   logo maintains its aspect ratio at a consistent height.
   ============================================================================== */
.brand-link {
    /* Flexbox enables horizontal layout of logo and text */
    display: inline-flex;
    /* Vertically centers the logo and any adjacent text */
    align-items: center;
    /* Transparent logo artwork now blends directly into the modern header surface. */
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    min-height: 50px;
    padding: 0;
    /* Remove the default underline from the link */
    text-decoration: none;
}

/* ==============================================================================
   FINAL CUSTOMER DASHBOARD SINGLE-OFFER-PANEL REDESIGN
   ==============================================================================
   The customer dashboard now has one homeowner product/offers panel and one large
   dashboard workspace. This removes the duplicated right "Service offers" rail,
   keeps all products searchable in one place, and gives the account content the
   visual priority expected from a professional homeowner service center.
   ============================================================================== */
.customer-account-shell {
    align-items: start !important;
    display: grid !important;
    grid-template-columns: minmax(270px, 340px) minmax(0, 1fr) !important;
    gap: clamp(28px, 2.4vw, 46px) !important;
    max-width: 1760px !important;
    padding: clamp(54px, 5vw, 86px) clamp(22px, 3vw, 54px) clamp(44px, 4vw, 68px) !important;
    width: min(1820px, 96vw) !important;
}

.customer-account-shell > .dashboard-offer-rail-right {
    display: none !important;
}

.customer-account-shell .customer-dashboard-main {
    display: grid !important;
    gap: clamp(20px, 1.7vw, 30px) !important;
    min-width: 0 !important;
    width: 100% !important;
}

.customer-account-shell > :not(.dashboard-offer-rail) {
    grid-column: auto !important;
    max-width: none !important;
    width: 100% !important;
}

.customer-account-shell .dashboard-offer-rail-single {
    align-self: start !important;
    background: linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .92)) !important;
    border: 1px solid rgba(147, 197, 253, .72) !important;
    border-radius: 26px !important;
    box-shadow: 0 30px 70px rgba(15, 23, 42, .18) !important;
    height: clamp(760px, calc(100vh - 132px), 980px) !important;
    max-height: 980px !important;
    min-height: 760px !important;
    overflow: hidden !important;
    padding: 22px !important;
    position: sticky !important;
    top: 92px !important;
    width: 100% !important;
}

.customer-account-shell .dashboard-offer-rail-single .dashboard-offer-rail-heading {
    border-bottom: 1px solid rgba(191, 219, 254, .78) !important;
    margin-bottom: 14px !important;
    padding-bottom: 14px !important;
}

.customer-account-shell .dashboard-offer-rail-single .dashboard-offer-rail-heading span,
.customer-account-shell .dashboard-offer-rail-single .dashboard-offer-search span {
    color: #0b55d9 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

.customer-account-shell .dashboard-offer-rail-single .dashboard-offer-rail-heading h2 {
    color: #071427 !important;
    font-size: clamp(21px, 1.35vw, 28px) !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
    margin: 8px 0 8px !important;
}

.customer-account-shell .dashboard-offer-rail-single .dashboard-offer-rail-heading p {
    color: #425675 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

.customer-account-shell .dashboard-offer-rail-single .dashboard-offer-search {
    display: grid !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

.customer-account-shell .dashboard-offer-rail-single .dashboard-offer-search input {
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid rgba(96, 165, 250, .72) !important;
    border-radius: 999px !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 750 !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    width: 100% !important;
}

.customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list {
    display: grid !important;
    gap: 14px !important;
    height: calc(100% - 176px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 8px 8px 0 !important;
    scrollbar-color: #60a5fa #dbeafe !important;
    scrollbar-width: thin !important;
}

.customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list::-webkit-scrollbar {
    width: 8px !important;
}

.customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list::-webkit-scrollbar-track {
    background: #dbeafe !important;
    border-radius: 999px !important;
}

.customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list::-webkit-scrollbar-thumb {
    background: #60a5fa !important;
    border-radius: 999px !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .94)) !important;
    border: 1px solid rgba(147, 197, 253, .72) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .08) !important;
    color: #071427 !important;
    display: grid !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 16px !important;
    text-decoration: none !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-card:hover,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-card:focus-visible {
    border-color: rgba(37, 99, 235, .72) !important;
    box-shadow: 0 22px 44px rgba(37, 99, 235, .16) !important;
    outline: none !important;
    transform: translateY(-2px) !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-image {
    background: #f8fbff !important;
    border: 1px solid rgba(147, 197, 253, .72) !important;
    border-radius: 14px !important;
    height: 122px !important;
    object-fit: contain !important;
    padding: 10px !important;
    width: 100% !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-title {
    color: #071427 !important;
    font-size: 16px !important;
    line-height: 1.22 !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-detail {
    color: #475569 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-price {
    color: #04786d !important;
    font-size: 18px !important;
    font-weight: 950 !important;
}

.customer-account-shell .customer-account-hero {
    align-items: center !important;
    background: radial-gradient(circle at 12% 18%, rgba(37, 99, 235, .13), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 247, 255, .90)) !important;
    border: 1px solid rgba(191, 219, 254, .7) !important;
    border-radius: 30px !important;
    box-shadow: 0 34px 86px rgba(15, 23, 42, .17) !important;
    display: grid !important;
    gap: clamp(28px, 3vw, 54px) !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr) !important;
    min-height: 420px !important;
    padding: clamp(44px, 4.2vw, 72px) !important;
}

.customer-account-shell .customer-account-hero h1 {
    color: #111827 !important;
    font-size: clamp(52px, 4.2vw, 82px) !important;
    letter-spacing: 0 !important;
    line-height: .96 !important;
    margin-bottom: 18px !important;
    max-width: 760px !important;
}

.customer-account-shell .customer-account-hero p {
    color: #32445f !important;
    font-size: clamp(17px, 1.05vw, 21px) !important;
    line-height: 1.6 !important;
    max-width: 760px !important;
}

.customer-account-shell .account-hero-badges {
    gap: 10px !important;
    margin-top: 22px !important;
}

.customer-account-shell .account-hero-badges span {
    background: rgba(255, 255, 255, .82) !important;
    border: 1px solid rgba(147, 197, 253, .76) !important;
    border-radius: 999px !important;
    color: #0f2f5f !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    padding: 9px 13px !important;
}

.customer-account-shell .customer-account-actions {
    border-radius: 24px !important;
    box-shadow: 0 28px 58px rgba(15, 23, 42, .26) !important;
    padding: 28px !important;
}

.customer-account-shell .account-guidance-grid {
    display: grid !important;
    gap: 18px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.customer-account-shell .account-guidance-card,
.customer-account-shell .account-metric-item,
.customer-account-shell .account-result-section {
    background: rgba(255, 255, 255, .95) !important;
    border: 1px solid rgba(226, 232, 240, .9) !important;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .10) !important;
}

.customer-account-shell .account-guidance-card {
    border-radius: 22px !important;
    min-height: 152px !important;
    padding: 26px !important;
}

.customer-account-shell .account-metric-strip {
    display: grid !important;
    gap: 18px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.customer-account-shell .account-metric-item {
    border-radius: 20px !important;
    min-height: 116px !important;
    padding: 24px !important;
}

.customer-account-shell .account-result-section {
    border-radius: 28px !important;
    margin: 0 !important;
    overflow: hidden !important;
    padding: 24px !important;
}

.customer-account-shell .account-result-section + .account-result-section {
    margin-top: 0 !important;
}

.customer-account-shell .account-summary-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 247, 255, .92)) !important;
    border: 1px solid rgba(147, 197, 253, .72) !important;
    border-radius: 20px !important;
    min-height: 120px !important;
}

@media (max-width: 1180px) {
    .customer-account-shell {
        grid-template-columns: 1fr !important;
        padding-inline: clamp(16px, 4vw, 30px) !important;
    }

    .customer-account-shell .customer-dashboard-main {
        order: 1 !important;
    }

    .customer-account-shell .dashboard-offer-rail-single {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        order: 2 !important;
        position: static !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        height: auto !important;
        max-height: 620px !important;
    }

    .customer-account-shell .customer-account-hero {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .customer-account-shell {
        width: 100% !important;
    }

    .customer-account-shell .customer-account-hero {
        border-radius: 24px !important;
        min-height: 0 !important;
        padding: 28px 18px !important;
    }

    .customer-account-shell .customer-account-hero h1 {
        font-size: clamp(38px, 12vw, 56px) !important;
    }

    .customer-account-shell .account-guidance-grid,
    .customer-account-shell .account-metric-strip,
    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list {
        grid-template-columns: 1fr !important;
    }
}

/* ==============================================================================
   CUSTOMER DASHBOARD TRUE FINAL OFFER-PANEL LOCK
   ==============================================================================
   Keep this at the physical end of the stylesheet. CustomerDashboard now uses a
   single left product panel, so each product must render as a readable card
   inside a vertical scroll area instead of inheriting compact/preview styles.
   ============================================================================== */
.customer-account-shell .dashboard-offer-rail-single {
    height: clamp(1350px, calc(100vh + 440px), 1700px) !important;
    max-height: 1700px !important;
    min-height: 1350px !important;
}

.customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list {
    align-content: start !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    height: calc(100% - 158px) !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 8px 10px 0 !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-card {
    align-content: start !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(248, 251, 255, .96)) !important;
    border: 1px solid rgba(147, 197, 253, .72) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .08) !important;
    color: #071427 !important;
    display: grid !important;
    flex: 0 0 auto !important;
    gap: 10px !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
    min-height: 250px !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding: 14px !important;
    position: relative !important;
    text-decoration: none !important;
    transform: none !important;
    visibility: visible !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-card::before,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-card::after {
    display: none !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-card > *,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-badge,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-image,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-title,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-detail,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-price {
    float: none !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
    visibility: visible !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-badge {
    align-items: center !important;
    background: #e8f2ff !important;
    border: 1px solid rgba(96, 165, 250, .55) !important;
    border-radius: 999px !important;
    color: #0b55d9 !important;
    display: inline-flex !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 6px 10px !important;
    width: fit-content !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-image {
    background: #f8fbff !important;
    border: 1px solid rgba(147, 197, 253, .72) !important;
    border-radius: 14px !important;
    display: block !important;
    height: 132px !important;
    min-height: 132px !important;
    object-fit: contain !important;
    padding: 10px !important;
    width: 100% !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-title {
    color: #071427 !important;
    display: block !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-detail {
    color: #475569 !important;
    display: block !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-price {
    color: #04786d !important;
    display: block !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    margin-top: 2px !important;
}

@media (max-width: 1180px) {
    .customer-account-shell .dashboard-offer-rail-single {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list {
        height: auto !important;
        max-height: 680px !important;
    }
}

/* ==============================================================================
   CUSTOMER DASHBOARD FINAL VISIBILITY REPAIR
   ==============================================================================
   These rules are intentionally scoped to CustomerDashboard. Older shared offer
   card styles used absolute overlays and compact card heights, which made the
   single dashboard offer panel look like a stack of thin strips.
   ============================================================================== */
.customer-account-shell {
    gap: clamp(18px, 1.55vw, 30px) !important;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
    padding-bottom: 0 !important;
}

.customer-account-shell .customer-dashboard-main {
    gap: clamp(12px, .95vw, 18px) !important;
}

.customer-account-shell .dashboard-offer-rail-single {
    height: clamp(920px, calc(100vh - 76px), 1180px) !important;
    max-height: 1180px !important;
    min-height: 920px !important;
    padding: 22px !important;
}

.customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list {
    align-content: start !important;
    gap: 12px !important;
    height: calc(100% - 158px) !important;
    padding: 0 8px 10px 0 !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-card {
    align-content: start !important;
    display: grid !important;
    gap: 9px !important;
    grid-auto-rows: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 232px !important;
    overflow: visible !important;
    padding: 14px !important;
    position: relative !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-card::before,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-card::after {
    display: none !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-card > *,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-title,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-detail,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-price {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
    visibility: visible !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-image {
    display: block !important;
    height: 126px !important;
    inset: auto !important;
    max-height: none !important;
    min-height: 126px !important;
    position: static !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-title {
    color: #071427 !important;
    font-size: 15px !important;
    line-height: 1.22 !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-detail {
    color: #475569 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-price {
    color: #04786d !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

.customer-account-shell .customer-account-hero {
    gap: clamp(18px, 1.55vw, 30px) !important;
    min-height: 288px !important;
    padding: clamp(24px, 2.25vw, 38px) !important;
}

.customer-account-shell .customer-account-hero h1 {
    font-size: clamp(36px, 2.85vw, 56px) !important;
    margin-bottom: 12px !important;
}

.customer-account-shell .customer-account-hero p {
    font-size: clamp(14px, .82vw, 16px) !important;
    line-height: 1.46 !important;
}

.customer-account-shell .account-guidance-card {
    min-height: 104px !important;
    padding: 16px !important;
}

.customer-account-shell .account-metric-item {
    min-height: 76px !important;
    padding: 14px 16px !important;
}

.customer-account-shell .account-result-section {
    border-radius: 22px !important;
    padding: 12px 14px !important;
}

.customer-account-shell .account-summary-card {
    min-height: 82px !important;
    padding: 14px 18px !important;
}

.customer-account-shell .account-result-section:not([open]) {
    padding: 10px 14px !important;
}

.customer-account-shell .account-result-section:not([open]) .account-summary-card {
    min-height: 72px !important;
}

@media (max-width: 1180px) {
    .customer-account-shell .dashboard-offer-rail-single {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list {
        height: auto !important;
        max-height: 620px !important;
    }
}

.brand-wordmark {
    align-items: baseline;
    display: inline-flex;
    font-size: clamp(26px, 1.65vw, 34px);
    font-weight: 950;
    letter-spacing: -.02em;
    line-height: .9;
}

.brand-wordmark-primary {
    color: #082b57;
}

.brand-wordmark-accent {
    color: #f97316;
}

.brand-logo {
    /* Block display removes inline spacing issues */
    display: block;
    /* The transparent header icon removes background plates and tagline text so it blends into the navigation surface. */
    height: 54px;
    max-width: 132px;
    object-fit: contain;
    width: auto;
}

/* ==============================================================================
   LAYOUT CONTAINER
   ==============================================================================
   The container class is used to center and constrain content width across
   the site. It uses the modern min() function to be responsive - on large
   screens it's 1200px wide, on smaller screens it's 92% of viewport width.
   This prevents content from touching screen edges on mobile devices.
   ============================================================================== */
.container {
    /* Responsive width: 1200px max, or 92% of viewport (whichever is smaller) */
    /* This creates automatic responsiveness without media queries */
    width: min(1800px, 94%);
    /* Center the container horizontally on the page */
    /* 0 top/bottom margin, auto left/right creates centering */
    margin: 0 auto;
}

/* ==============================================================================
   TOP NAVIGATION BAR
   ==============================================================================
   The topbar contains the site logo, brand name, and navigation links.
   Features a gradient background from dark blue to bright blue for visual
   interest. All text is white for contrast against the dark background.
   ============================================================================== */
.topbar {
    /* A soft business-grade header keeps the navy/orange logo readable without a separate white logo plate. */
    background:
        radial-gradient(circle at 8% 0%, rgba(249, 115, 22, .12), transparent 28%),
        linear-gradient(90deg, #f8fbff 0%, #eef5ff 45%, #e8f0ff 100%);
    border-bottom: 1px solid rgba(37, 99, 235, .14);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
    color: #10233e;
    /* Vertical padding: 16px top and bottom, 0 left and right */
    /* Creates breathing room above and below navigation content */
    padding: 10px 0;
}

.nav-wrap {
    /* Flexbox creates a horizontal layout for navigation items */
    display: flex;
    /* Centers navigation items vertically within the container */
    align-items: center;
    /* Pushes logo to the left and navigation links to the right */
    /* Creates space between the two groups automatically */
    justify-content: space-between;
    /* 16px spacing between flex items if they wrap */
    gap: 16px;
}

.brand {
    /* Large font size makes the brand name prominent */
    font-size: 24px;
    /* Bold weight (700) gives the brand name emphasis and importance */
    font-weight: 700;
}

.nav-links {
    align-items: center;
    display: flex;
    gap: 8px;
}

    .nav-links a {
        /* Navy text matches the lighter modern header and preserves strong readability. */
        color: #123a6b;
        /* Remove the default underline from navigation links */
        text-decoration: none;
        /* 18px left margin creates spacing between navigation links */
        margin-left: 0;
        /* 95% opacity creates a subtle translucent effect */
        /* Makes links slightly softer than pure white */
        font-weight: 750;
        opacity: .95;
        /* Smooth transitions make the desktop header feel more like a polished business application. */
        transition: background-color .18s ease, opacity .18s ease, transform .18s ease;
        padding: 8px 10px;
    }

        /* Desktop header links get a quiet professional hover treatment without changing layout size. */
        .nav-links a:hover,
        .nav-links a:focus {
            background: rgba(37, 99, 235, .10);
            border-radius: 999px;
            color: #0f4bb8;
            opacity: 1;
            outline: none;
            transform: translateY(-1px);
        }

/* ==============================================================================
   PAGE BODY & LAYOUT WRAPPERS
   ==============================================================================
   These classes provide consistent spacing and layout structure for page
   content. The page-body adds vertical padding, while narrow constrains
   width for focused layouts like forms.
   ============================================================================== */
.page-body {
    /* Vertical padding: 32px top, 56px bottom */
    /* Creates white space above and below page content */
    /* Larger bottom padding provides visual separation from footer */
    padding: 32px 0 56px;
    /* Position relative needed for absolute-positioned pseudo-element (background) */
    position: relative;
    /* Prevent horizontal page drift while still allowing vertical scroll on tablet/mobile rotation. */
    overflow-x: hidden;
    overflow-y: visible;
    /* Main content grows to fill available height so the footer remains pinned to the browser bottom. */
    flex: 1 0 auto;
}

    /* Background pseudo-element intentionally stays disabled so pages use a clean, normal backdrop. */
    /* Keep this selector in place so the old image pattern cannot appear from older duplicate rules. */
    .page-body::before {
        content: none;
        display: none;
    }

    /* Ensures all container content appears above the background pattern */
    .page-body .container {
        /* Position relative creates stacking context */
        position: relative;
        /* Z-index 1 places content above the background (which has z-index 0) */
        z-index: 1;
    }

.narrow {
    /* Constrains width to 520px for narrow layouts */
    /* Used for forms and focused content where wide layouts aren't needed */
    max-width: 520px;
    /* 40px top and bottom margin, auto left/right for centering */
    /* Creates vertical spacing and horizontally centers the narrow container */
    margin: 40px auto;
}

/* ==============================================================================
   GRID LAYOUT SYSTEMS
   ==============================================================================
   Reusable grid layouts for different column configurations. These grids
   automatically stack into single columns on mobile devices (see media queries).
   Used throughout the site for consistent spacing and alignment.
   ============================================================================== */
.hero-grid,
.grid-2,
.grid-3,
.stats-grid {
    /* CSS Grid layout enables complex 2D layouts */
    display: grid;
    /* 20px gap between all grid items (both rows and columns) */
    /* Creates consistent spacing without manual margins */
    gap: 20px;
}

/* Two-column layouts - used for hero sections and feature comparisons */
.hero-grid,
.grid-2 {
    /* Creates 2 equal-width columns (1fr = 1 fraction of available space) */
    /* Both columns will be exactly the same width */
    grid-template-columns: 1fr 1fr;
}

/* Three-column layout - used for feature cards and benefit sections */
.grid-3 {
    /* Creates 3 equal-width columns */
    /* Each column gets 1/3 of available space */
    grid-template-columns: 1fr 1fr 1fr;
}

/* Four-column layout - used for statistics and metrics display */
.stats-grid {
    /* Creates 4 equal-width columns using repeat() function */
    /* Cleaner syntax than writing '1fr 1fr 1fr 1fr' */
    grid-template-columns: repeat(4, 1fr);
    /* Extra bottom margin separates stats from content below */
    margin-bottom: 24px;
}


/* ==============================================================================
   CARD COMPONENTS
   ==============================================================================
   Cards are the primary content containers throughout the application.
   They provide a consistent white background with subtle shadows and borders.
   The rounded corners create a modern, friendly appearance.
   ============================================================================== */
.card {
    /* White background using CSS variable for theme consistency */
    background: var(--card);
    /* 1px solid border with light blue-gray color */
    /* Creates subtle definition without harsh lines */
    border: 1px solid var(--line);
    /* 18px border-radius creates moderately rounded corners */
    /* Large enough to feel modern, not so large it looks cartoonish */
    border-radius: 18px;
    /* 24px padding on all sides */
    /* Provides comfortable breathing room for card content */
    padding: 24px;
    /* Box shadow parameters: horizontal offset, vertical offset, blur, spread, color with alpha */
    /* 0 12px 30px creates a soft shadow below and around the card */
    /* rgba(15, 23, 42, .06) is dark navy at 6% opacity - very subtle */
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    /* 24px bottom margin creates spacing between stacked cards */
    margin-bottom: 24px;
}

/* Hero card variation - larger padding for prominent sections */
.hero-card {
    /* 36px padding (50% more than regular cards) */
    /* Makes hero content feel more spacious and important */
    padding: 36px;
}

/* Eyebrow label - small badge-style labels above headings */
.eyebrow {
    /* Inline-block allows padding/margin while staying inline */
    display: inline-block;
    /* Light blue background creates subtle badge appearance */
    background: #eff6ff;
    /* Dark blue text contrasts with light background */
    color: #1d4ed8;
    /* 999px border-radius creates pill shape (fully rounded ends) */
    /* Works regardless of content width */
    border-radius: 999px;
    /* Horizontal padding (12px) larger than vertical (6px) */
    /* Creates pill shape rather than circle */
    padding: 6px 12px;
    /* Small text size makes it clearly a label, not main content */
    font-size: 12px;
    /* Bold weight (700) ensures readability at small size */
    font-weight: 700;
    /* Bottom margin separates eyebrow from heading below */
    margin-bottom: 12px;
}

/* Stat card - specialized card for displaying statistics and metrics */
.stat-card {
    /* White background (explicit rather than variable) */
    background: #fff;
    /* Light border for subtle definition */
    border: 1px solid var(--line);
    /* Slightly smaller border-radius than regular cards */
    border-radius: 16px;
    /* Less padding than regular cards for compact stat display */
    padding: 20px;
    /* Very subtle shadow (4% opacity) */
    /* Lighter than regular cards since stats are usually in groups */
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

/* Stat card label - describes what the statistic represents */
.stat-label {
    /* Small font size for secondary information */
    font-size: 14px;
    /* Muted gray color de-emphasizes label */
    /* The number (stat-value) is more important */
    color: var(--muted);
}

/* Stat card value - the actual number/metric being displayed */
.stat-value {
    /* Large font size makes the number prominent */
    /* The number is the focus of the stat card */
    font-size: 34px;
    /* Bold weight adds emphasis and importance */
    font-weight: 700;
    /* Top margin creates space between label and value */
    margin-top: 8px;
}

/* ==============================================================================
   BUTTONS & CALL-TO-ACTION ELEMENTS
   ==============================================================================
   Button styles for primary actions, secondary actions, and various sizes.
   Features smooth hover transitions and consistent styling across the site.
   Used for: Form submissions, navigation, and all clickable actions.
   ============================================================================== */
.button-row {
    /* Flexbox creates horizontal layout for button groups */
    display: flex;
    /* 12px spacing between buttons */
    gap: 12px;
    /* Vertically centers buttons of different sizes */
    align-items: center;
    /* Allows buttons to wrap to next line on narrow screens */
    /* Prevents horizontal scrolling on mobile devices */
    flex-wrap: wrap;
}

/* Primary button - main call-to-action button */
.btn {
    /* Blue background using primary color variable */
    /* Matches brand color for consistency */
    background: var(--primary);
    /* White text for high contrast against blue background */
    color: #fff;
    /* Remove underline if button is styled as a link */
    /* Allows buttons to be implemented as <a> tags for navigation */
    text-decoration: none;
    /* Remove default button border */
    /* We'll use background color for visual definition */
    border: none;
    /* 10px border-radius creates rounded corners */
    /* Less rounded than cards (18px) for more button-like appearance */
    border-radius: 10px;
    /* Padding: 11px top/bottom, 16px left/right */
    /* Creates comfortable click target and text spacing */
    padding: 11px 16px;
    /* Pointer cursor indicates the element is clickable */
    /* Improves user experience by providing visual feedback */
    cursor: pointer;
    /* Inline-block allows padding and dimensions */
    /* While allowing buttons to sit next to each other */
    display: inline-block;
}

    /* Button hover and focus states */
    .btn:hover,
    .btn:focus {
        /* Light yellow background on hover - creates attention-grabbing effect */
        /* Unusual hover color makes interaction feel special */
        background: #fff3b0;
        /* Dark text for contrast against light yellow background */
        color: #111827;
        /* Yellow border reinforces the hover state */
        border-color: #facc15;
        /* 0.25 second smooth transition */
        /* 'ease' timing function starts slow, speeds up, then slows down */
        /* Creates natural-feeling animation */
        transition: 0.25s ease;
    }

/* Secondary button - less prominent alternative action */
.btn-secondary {
    /* White background - inverse of primary button */
    background: #fff;
    /* Blue text matches the primary button's background */
    /* Creates visual relationship between button types */
    color: var(--primary);
    /* Blue border creates definition against white background */
    /* 1px keeps it subtle */
    border: 1px solid var(--primary);
}

/* Small button variant - for compact spaces or less important actions */
.btn-small {
    /* Reduced padding makes button more compact */
    /* 6px top/bottom (vs 11px), 10px left/right (vs 16px) */
    padding: 6px 10px;
    /* Smaller font size proportional to reduced padding */
    font-size: 12px;
}

/* ==============================================================================
   FORM CONTROLS & INPUT FIELDS
   ==============================================================================
   Styling for all form elements including text inputs, textareas, labels,
   and validation error states. Ensures consistent appearance and proper
   accessibility across all forms in the application.
   ============================================================================== */
.input {
    /* Full width allows inputs to fill their container */
    /* Makes forms look clean and aligned */
    width: 100%;
    /* Padding: 11px top/bottom, 12px left/right */
    /* Creates comfortable space for text entry */
    /* Matches button padding for visual consistency */
    padding: 11px 12px;
    /* Light gray border creates subtle field definition */
    /* 1px keeps it minimal and modern */
    border: 1px solid #cfd8e3;
    /* Rounded corners match button style (10px) */
    /* Creates cohesive form appearance */
    border-radius: 10px;
    /* White background for clear contrast with text */
    background: #fff;
}

/* Form labels - text above input fields */
label {
    /* Block display puts each label on its own line */
    /* Stacks labels above their inputs */
    display: block;
    /* Slightly smaller than body text */
    /* Labels are secondary to the input values */
    font-size: 14px;
    /* Muted gray color reduces visual weight */
    /* Input values should be more prominent */
    color: var(--muted);
    /* Small bottom margin creates space between label and input */
    /* Keeps them visually connected but not touching */
    margin-bottom: 6px;
}

/* Textarea variant - allows vertical resizing only */
textarea.input {
    /* Vertical resize only - prevents breaking layouts */
    /* Horizontal resize is disabled to maintain form width */
    /* Users can still make textareas taller if needed */
    resize: vertical;
}

/* Diagnostic request intake page.
   The layout avoids a legacy table/form look and presents the workflow as a modern business intake surface. */
.intake-page-shell {
    margin: 0 auto;
    max-width: 1320px;
    width: min(100%, 1320px);
}

.intake-hero {
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f3f8ff 100%);
    border: 1px solid #d7e4f4;
    border-radius: 8px;
    box-shadow: 0 22px 48px rgba(15, 23, 42, .07);
    display: grid;
    gap: clamp(24px, 4vw, 56px);
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    margin-bottom: 24px;
    padding: clamp(30px, 4vw, 54px);
}

.intake-kicker {
    background: #dbeafe;
    border-radius: 999px;
    color: #1d4ed8;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    margin-bottom: 12px;
    padding: 8px 13px;
    text-transform: uppercase;
}

.intake-hero h1 {
    color: #0f172a;
    font-size: clamp(36px, 4vw, 58px);
    letter-spacing: 0;
    line-height: 1.05;
    margin: 0;
}

.intake-hero p {
    color: #475569;
    font-size: clamp(16px, 1.2vw, 20px);
    line-height: 1.58;
    margin: 18px 0 0;
    max-width: 820px;
}

.intake-hero-panel {
    background: #0f172a;
    border-radius: 8px;
    box-shadow: 0 20px 42px rgba(15, 23, 42, .2);
    color: #fff;
    display: grid;
    gap: 12px 14px;
    grid-template-columns: auto 1fr;
    padding: 24px;
}

    .intake-hero-panel span {
        align-items: center;
        background: #2563eb;
        border-radius: 999px;
        display: inline-flex;
        font-size: 13px;
        font-weight: 900;
        height: 34px;
        justify-content: center;
        width: 34px;
    }

    .intake-hero-panel strong {
        align-self: center;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        color: #f8fafc;
        font-size: 15px;
        padding-bottom: 12px;
    }

        .intake-hero-panel strong:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

.intake-form-panel {
    background: #ffffff;
    border: 1px solid #d7e4f4;
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
    padding: clamp(24px, 4vw, 44px);
}

.intake-validation-summary {
    margin-bottom: 18px;
}

.intake-section-header {
    align-items: end;
    border-top: 1px solid #e4edf8;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 28px;
}

    .intake-section-header:first-of-type {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
    }

    .intake-section-header span {
        color: #1d4ed8;
        display: block;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .07em;
        margin-bottom: 6px;
        text-transform: uppercase;
    }

    .intake-section-header h2 {
        color: #0f172a;
        font-size: clamp(22px, 2vw, 30px);
        margin: 0;
    }

    .intake-section-header p {
        color: #64748b;
        line-height: 1.45;
        margin: 0;
        max-width: 480px;
    }

.intake-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
}

.intake-wide-field {
    grid-column: span 2;
}

.intake-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

    .intake-choice-row label {
        align-items: center;
        background: #f8fbff;
        border: 1px solid #d7e4f4;
        border-radius: 8px;
        color: #0f172a;
        cursor: pointer;
        display: inline-flex;
        font-weight: 800;
        gap: 10px;
        min-height: 50px;
        padding: 12px 16px;
    }

    .intake-choice-row input {
        accent-color: #2563eb;
    }

.intake-check-row label {
    flex: 1 1 260px;
}

.intake-upload-panel {
    align-items: center;
    background: #f8fbff;
    border: 1px dashed #9bbcf2;
    border-radius: 8px;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr);
    margin-top: 30px;
    padding: 22px;
}

    .intake-upload-panel label {
        color: #0f172a;
        font-size: 16px;
        font-weight: 900;
        margin: 0;
    }

        .intake-upload-panel label span {
            color: #64748b;
            font-weight: 700;
        }

    .intake-upload-panel p {
        color: #64748b;
        line-height: 1.5;
        margin: 7px 0 0;
    }

.intake-submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 26px;
}

/* Reusable selected upload list for PreCheck and Intake.
   Users can add files through repeated browse actions and remove mistakes before submitting the form. */
.upload-selected-list {
    display: grid;
    gap: 10px;
    grid-column: 1 / -1;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.upload-selected-item {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d8e6f6;
    border-radius: 8px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 10px 12px;
}

.upload-selected-details {
    display: grid;
    gap: 2px;
    min-width: 0;
}

    .upload-selected-details strong {
        color: #0f172a;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .upload-selected-details small {
        color: #64748b;
        font-size: 12px;
    }

.upload-remove-btn {
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 999px;
    color: #9a3412;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 900;
    padding: 7px 11px;
}

    .upload-remove-btn:hover,
    .upload-remove-btn:focus {
        background: #ffedd5;
        outline: 2px solid rgba(249, 115, 22, .18);
        outline-offset: 2px;
    }

/* Client-side required-answer feedback for forms with uploads.
   Preventing avoidable postbacks keeps selected image/video files attached while still leaving server validation authoritative. */
.client-validation-error {
    color: #b42318;
    display: block;
    font-size: 13px;
    font-weight: 900;
    margin-top: 8px;
}

.client-validation-highlight {
    border-color: #fda4af !important;
    box-shadow: 0 0 0 4px rgba(225, 29, 72, .09) !important;
}

.precheck-question.client-validation-highlight,
.precheck-subsection.client-validation-highlight,
.precheck-section.client-validation-highlight,
.intake-grid > div.client-validation-highlight,
.intake-choice-row.client-validation-highlight {
    background: #fffafa;
    border-radius: 10px;
    padding: 12px;
}

/* Diagnostic PreCheck container.
   This page behaves like a professional intake workflow, so the outer wrapper is mostly structural while each section carries its own visual weight. */
.precheck-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-width: min(1680px, calc(100vw - 56px));
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    padding: 0;
    width: 100%;
}

/* Professional PreCheck hero that matches the modern HVAC service home without using heavy table-style panels. */
.precheck-hero-pro {
    align-items: center;
    background: radial-gradient(circle at 10% 5%, rgba(37, 99, 235, .12), transparent 34%), radial-gradient(circle at 92% 0%, rgba(14, 165, 233, .10), transparent 30%), linear-gradient(135deg, rgba(255, 255, 255, .98) 0%, rgba(243, 248, 255, .92) 100%);
    border: 0;
    border-radius: 26px;
    box-shadow: 0 26px 64px rgba(15, 23, 42, .075);
    display: grid;
    gap: clamp(28px, 5vw, 70px);
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .62fr);
    min-height: 305px;
    padding: clamp(28px, 3.4vw, 48px) clamp(30px, 5vw, 70px);
}

.precheck-hero-copy {
    max-width: 800px;
}

/* Small classification label for the form header. */
.precheck-kicker {
    background: #eaf2ff;
    border: 0;
    border-radius: 999px;
    color: #174ea6;
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: 12px;
    padding: 7px 12px;
    text-transform: uppercase;
}

.precheck-hero-copy h1 {
    color: #0f172a;
    font-size: clamp(36px, 3.15vw, 52px);
    letter-spacing: 0;
    line-height: 1.08;
    margin: 0;
    max-width: 900px;
}

.precheck-hero-copy p {
    color: #465b73;
    font-size: clamp(15px, 1vw, 18px);
    line-height: 1.58;
    margin: 16px 0 0;
    max-width: 760px;
}

.precheck-hero-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 22px;
}

    .precheck-hero-highlights span {
        color: #0f2137;
        font-size: 14px;
        font-weight: 800;
    }

        .precheck-hero-highlights span::before {
            color: #0f766e;
            content: "✓";
            font-weight: 900;
            margin-right: 6px;
        }

.precheck-hero-panel {
    background: linear-gradient(145deg, #0f172a 0%, #17243a 100%);
    border-radius: 22px;
    box-shadow: 0 22px 44px rgba(15, 23, 42, .20);
    color: #fff;
    padding: 22px;
}

.precheck-panel-title {
    align-items: center;
    display: flex;
    gap: 10px;
    font-size: 17px;
    margin-bottom: 18px;
}

    .precheck-panel-title span {
        background: #22c55e;
        border-radius: 50%;
        display: inline-block;
        height: 11px;
        width: 11px;
    }

.precheck-panel-step {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 0;
    border-radius: 18px;
    display: grid;
    gap: 14px;
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 16px;
}

    .precheck-panel-step + .precheck-panel-step {
        margin-top: 12px;
    }

    .precheck-panel-step b {
        align-items: center;
        background: #2563eb;
        border-radius: 50%;
        display: inline-flex;
        height: 42px;
        justify-content: center;
        width: 42px;
    }

    .precheck-panel-step strong {
        display: block;
        font-size: 15px;
        margin-bottom: 4px;
    }

    .precheck-panel-step span {
        color: #dbeafe;
        display: block;
        font-size: 13px;
        line-height: 1.45;
    }

/* Compact progress labels summarize the long PreCheck flow without adding another navigation component. */
.precheck-progress {
    background: transparent;
    border-radius: 0;
    color: #ffffff;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 18px;
    overflow: visible;
}

    .precheck-progress span {
        align-items: center;
        background: linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(30, 41, 59, .96));
        border: none;
        border-radius: 999px;
        color: #eaf2ff;
        display: inline-flex;
        font-size: 14px;
        font-weight: 800;
        gap: 9px;
        justify-content: center;
        line-height: 1;
        min-height: 48px;
        padding: 12px;
    }

        .precheck-progress span:last-child {
            border-right: none;
        }

    .precheck-progress b {
        align-items: center;
        background: rgba(37, 99, 235, .95);
        border-radius: 50%;
        color: #fff;
        display: inline-flex;
        font-size: 12px;
        height: 28px;
        justify-content: center;
        width: 28px;
    }

/* Adds inner spacing after the header while keeping the form aligned with the polished header width. */
.precheck-form {
    padding: 0;
}

/* Groups one logical PreCheck area, such as Issue Type or System Information.
   Each section is its own card so the long diagnostic form reads like a guided business workflow. */
.precheck-section {
    background: linear-gradient(90deg, rgba(37, 99, 235, .08), transparent 82px), rgba(255, 255, 255, .86);
    border: 0;
    border-radius: 18px;
    box-shadow: 0 22px 48px rgba(15, 23, 42, .055);
    margin-top: 16px;
    padding: clamp(22px, 2.6vw, 32px);
    position: relative;
}

    .precheck-section::before {
        background: linear-gradient(180deg, #2563eb, rgba(37, 99, 235, .18));
        border-radius: 999px;
        content: "";
        height: calc(100% - 42px);
        left: 0;
        position: absolute;
        top: 21px;
        width: 4px;
    }

    /* Section headings are intentionally compact because this is an operational service form, not a marketing page. */
    .precheck-section h2 {
        align-items: center;
        border-bottom: 0;
        color: #102033;
        display: flex;
        font-size: clamp(20px, 1.6vw, 25px);
        font-weight: 800;
        gap: 10px;
        line-height: 1.2;
        margin: 0 0 18px;
        padding-bottom: 0;
    }

/* Subsection headings label symptom groups from the diagnostic PDF while keeping the form easy to scan. */
.precheck-subsection h3 {
    align-items: center;
    background: linear-gradient(135deg, rgba(239, 246, 255, .95), rgba(255, 255, 255, .74));
    border: none;
    border-left: 0;
    border-radius: 999px;
    color: #1b3555;
    display: flex;
    font-size: 16px;
    font-weight: 800;
    margin: 20px 0 12px;
    min-height: 28px;
    padding: 8px 14px;
    width: fit-content;
}

/* Keeps individual diagnostic prompts separated so validation messages and choices do not visually collide. */
.precheck-question {
    margin-bottom: 16px;
}

/* Safety context is shown as a calm advisory strip instead of an alert box.
   This keeps the form professional while still drawing attention to urgent HVAC conditions. */
.precheck-safety-note {
    background: linear-gradient(135deg, rgba(255, 247, 237, .92), rgba(255, 255, 255, .74));
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(253, 186, 116, .34);
    color: #5f3b13;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.55;
    margin: 0 0 18px;
    padding: 13px 15px;
}

    .precheck-question > label,
    .precheck-section > label,
    .precheck-section .mt-16 > label {
        color: #24384f;
        font-size: 14px;
        font-weight: 800;
        margin-bottom: 9px;
    }

/* Responsive grid used for radio and checkbox choices.
   minmax prevents long labels like "System Turns On and Off Frequently" from overflowing their choice. */
.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 10px;
}

    /* Compact option grids are used for shorter choices so dense business forms stay efficient. */
    .option-grid.compact {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

/* Choice option styling creates a clear clickable target around radios and checkboxes without using extra cards. */
.choice-option {
    align-items: center;
    background: rgba(255, 255, 255, .86);
    border: 0;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(214, 224, 236, .72);
    color: #1d2f45;
    cursor: pointer;
    display: flex;
    gap: 8px;
    margin: 0;
    min-height: 50px;
    padding: 12px 14px;
    transition: box-shadow .16s ease, background-color .16s ease, transform .16s ease;
}

    .choice-option:hover,
    .yes-no-row label:hover {
        box-shadow: inset 0 0 0 1px #9bb6d5, 0 9px 20px rgba(15, 23, 42, .07);
        transform: translateY(-1px);
    }

    .choice-option:has(input:checked),
    .yes-no-row label:has(input:checked) {
        background: linear-gradient(135deg, #edf5ff, #f8fbff);
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .72), 0 12px 24px rgba(37, 99, 235, .12);
        color: #12325f;
    }

    .choice-option input,
    .yes-no-row input {
        accent-color: var(--primary);
        flex: 0 0 auto;
    }

    /* Keeps option text from squeezing into unreadable columns on small screens. */
    .choice-option span {
        overflow-wrap: anywhere;
    }

/* Preferred date is optional, so the input stays compact instead of stretching across the whole form. */
.precheck-date-input {
    max-width: 280px;
}

/* Two-column symptom layout on wider screens, collapsing naturally on mobile. */
.diagnostic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 16px;
}

/* Yes/no rows keep short radio choices close to the prompt for fast form completion. */
.yes-no-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .yes-no-row label {
        align-items: center;
        background: rgba(255, 255, 255, .86);
        border: 0;
        border-radius: 999px;
        box-shadow: inset 0 0 0 1px rgba(214, 224, 236, .72);
        color: #1d2f45;
        cursor: pointer;
        display: flex;
        gap: 6px;
        margin: 0;
        min-height: 44px;
        min-width: 88px;
        padding: 10px 13px;
        transition: box-shadow .16s ease, background-color .16s ease, transform .16s ease;
    }

/* Contextual filter guidance appears only when a homeowner says the filter was not changed recently.
   The video stays optional so the diagnostic form remains fast while still giving practical help. */
.precheck-filter-guide {
    align-items: center;
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, .10), transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(14, 165, 233, .08), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .90));
    border: 0;
    border-radius: 20px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .07);
    display: none;
    gap: 14px;
    grid-column: 1 / -1;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    margin: 2px 0 18px;
    overflow: hidden;
    padding: 14px 16px;
    position: relative;
}

    .precheck-filter-guide.is-visible {
        display: grid;
    }

    /* A thin brand rail gives the guidance card structure without making it look like a table frame. */
    .precheck-filter-guide::before {
        background: linear-gradient(180deg, #2563eb, #0f766e);
        border-radius: 999px;
        content: "";
        height: calc(100% - 32px);
        left: 0;
        position: absolute;
        top: 16px;
        width: 4px;
    }

.precheck-filter-guide-icon {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, .98), rgba(15, 118, 110, .94));
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .18);
    color: #fff;
    display: flex;
    font-size: 17px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

    .precheck-filter-guide-icon.airflow {
        background: linear-gradient(135deg, #0f766e, #2563eb);
    }

.precheck-filter-guide-copy span,
.diagnostic-video-advice span {
    color: #0f766e;
    display: inline-block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.precheck-filter-guide-copy strong {
    color: #0f172a;
    display: block;
    font-size: 16px;
    line-height: 1.25;
}

.precheck-filter-guide-copy p {
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
    margin: 4px 0 0;
    max-width: 780px;
}

.precheck-video-toggle {
    align-items: center;
    appearance: none;
    background: #0f172a;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .14);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-weight: 900;
    gap: 8px;
    font-size: 12px;
    min-height: 36px;
    padding: 0 14px;
    transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
    white-space: nowrap;
}

    .precheck-video-toggle:hover,
    .precheck-video-toggle:focus {
        background: #1d4ed8;
        box-shadow: 0 14px 28px rgba(37, 99, 235, .20);
        outline: none;
        transform: translateY(-1px);
    }

.precheck-filter-video {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(239, 246, 255, .78));
    border-radius: 18px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .10);
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: 2px;
    max-width: 360px;
    overflow: hidden;
    padding: 8px;
}

.precheck-filter-video video {
    background: #0f172a;
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .10);
    display: block;
    max-height: 205px;
    object-fit: cover;
    width: 100%;
}

.precheck-filter-video img {
    background: #f8fbff;
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .10);
    display: block;
    max-height: 205px;
    object-fit: cover;
    width: 100%;
}

.visual-guide-section-top {
    order: initial;
}

.diagnostic-video-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.diagnostic-video-advice {
    align-items: center;
    background: linear-gradient(135deg, #f8fbff, #fff7ed);
    border-radius: 22px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, .82fr) minmax(260px, 1fr);
    margin-top: 0;
    padding: 20px;
}

    .diagnostic-video-advice h2 {
        color: #0f172a;
        font-size: clamp(22px, 2vw, 30px);
        line-height: 1.16;
        margin: 0;
    }

    .diagnostic-video-advice p {
        color: #475569;
        line-height: 1.6;
        margin: 10px 0 0;
    }

    .diagnostic-video-advice video,
    .diagnostic-video-advice img {
        background: #0f172a;
        border-radius: 18px;
        box-shadow: 0 18px 34px rgba(15, 23, 42, .14);
        display: block;
        object-fit: cover;
        max-height: 300px;
        width: 100%;
    }

.precheck-result-shell {
    display: grid;
    gap: 24px;
    margin: 0 auto;
    max-width: 1500px;
    padding: clamp(18px, 3vw, 42px);
}

.precheck-result-hero {
    align-items: center;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .12), transparent 36%),
        linear-gradient(135deg, #ffffff 0%, #f7fbff 54%, #eef6ff 100%);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .08);
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .34fr);
    padding: clamp(28px, 5vw, 58px);
}

.precheck-result-copy h1 {
    color: #0f172a;
    font-size: clamp(38px, 5vw, 68px);
    line-height: .98;
    margin: 14px 0 18px;
    max-width: 860px;
}

.precheck-result-copy p {
    color: #334155;
    font-size: clamp(16px, 1.35vw, 21px);
    line-height: 1.65;
    margin: 0;
    max-width: 980px;
}

.precheck-result-status {
    background: #0f172a;
    border-radius: 24px;
    box-shadow: 0 24px 42px rgba(15, 23, 42, .18);
    color: #fff;
    display: grid;
    gap: 14px;
    padding: 22px;
}

    .precheck-result-status div {
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 18px;
        padding: 16px;
    }

    .precheck-result-status span,
    .panel-label,
    .section-heading .eyebrow {
        color: #2563eb;
        display: inline-flex;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .precheck-result-status span {
        color: #93c5fd;
        margin-bottom: 6px;
    }

    .precheck-result-status strong {
        display: block;
        font-size: 18px;
        line-height: 1.35;
    }

.precheck-result-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

.result-summary-panel,
.homeowner-safety-panel,
.homeowner-check-map,
.advice-card,
.result-delivery-panel {
    background: rgba(255, 255, 255, .9);
    border-radius: 24px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .07);
}

.result-summary-panel,
.homeowner-safety-panel {
    padding: clamp(22px, 3vw, 34px);
}

.homeowner-safety-panel {
    align-items: center;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr);
}

.result-summary-panel p,
.homeowner-check-map p,
.section-heading p {
    color: #334155;
    font-size: 17px;
    line-height: 1.7;
    margin: 10px 0 0;
}

.homeowner-safety-panel ul,
.advice-card ul {
    color: #334155;
    line-height: 1.65;
    margin: 12px 0 0;
    padding-left: 20px;
}

.homeowner-safety-panel li + li,
.advice-card li + li {
    margin-top: 8px;
}

.safety-illustration {
    margin: 0;
}

.safety-illustration img {
    display: block;
    height: auto;
    max-width: 100%;
}

.safety-illustration figcaption {
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    margin-top: 10px;
    text-align: center;
}

.homeowner-check-map {
    align-items: center;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    padding: clamp(24px, 4vw, 42px);
}

.condition-guide-panel {
    align-items: center;
    background:
        radial-gradient(circle at 12% 10%, rgba(59, 130, 246, .11), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 251, 255, .92));
    border-radius: 28px;
    box-shadow: 0 24px 56px rgba(15, 23, 42, .08);
    display: grid;
    gap: clamp(22px, 4vw, 46px);
    grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
    padding: clamp(26px, 4vw, 48px);
}

.condition-guide-copy h2 {
    color: #0f172a;
    font-size: clamp(26px, 3vw, 44px);
    line-height: 1.08;
    margin: 10px 0 0;
}

.condition-guide-copy p {
    color: #334155;
    font-size: 17px;
    line-height: 1.7;
    margin: 14px 0 0;
}

.condition-guide-copy ul {
    color: #334155;
    line-height: 1.62;
    margin: 18px 0 0;
    padding-left: 20px;
}

.condition-guide-copy li + li {
    margin-top: 8px;
}

.condition-guide-illustration {
    margin: 0;
}

.condition-guide-illustration img {
    display: block;
    height: auto;
    max-width: 100%;
}

.condition-guide-illustration figcaption {
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    margin-top: 10px;
    text-align: center;
}

.homeowner-check-map h2,
.section-heading h2 {
    color: #0f172a;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.08;
    margin: 10px 0 0;
}

.check-map-steps {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
}

.check-map-step {
    background: #f8fbff;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    min-height: 144px;
    padding: 18px;
    text-align: center;
}

    .check-map-step span,
    .advice-card-number {
        align-items: center;
        background: #2563eb;
        border-radius: 999px;
        color: #fff;
        display: inline-flex;
        font-weight: 900;
        height: 36px;
        justify-content: center;
        width: 36px;
    }

    .check-map-step strong {
        color: #0f172a;
        display: block;
        font-size: 18px;
        margin-top: 12px;
    }

    .check-map-step small {
        color: #64748b;
        display: block;
        line-height: 1.45;
        margin-top: 6px;
    }

    .check-map-step.urgent span {
        background: #f97316;
    }

.check-map-connector {
    background: linear-gradient(90deg, #bfdbfe, #93c5fd);
    border-radius: 999px;
    height: 4px;
    width: 32px;
}

.advice-report-section,
.visual-guide-section {
    display: grid;
    gap: 18px;
}

.section-heading {
    text-align: center;
}

/* The diagnostic advice can contain short notes beside long detailed guidance.
   Long guidance cards span the available width and split their own lists, which
   prevents one tall card from leaving a large empty block beside shorter cards. */
.advice-card-grid {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.advice-card {
    margin: 0;
    padding: clamp(22px, 3vw, 30px);
}

    .advice-card-dense {
        background:
            radial-gradient(circle at top right, rgba(37, 99, 235, .08), transparent 34%),
            rgba(255, 255, 255, .94);
        grid-column: 1 / -1;
    }

        .advice-card-dense ul {
            column-count: 2;
            column-gap: 34px;
        }

        .advice-card-dense li {
            break-inside: avoid;
            margin-bottom: 10px;
        }

        .advice-card-dense li + li {
            margin-top: 0;
        }

        .advice-card-dense .advice-card-support {
            max-width: 940px;
    }

    .advice-card-topline {
        align-items: center;
        display: flex;
        gap: 14px;
        justify-content: space-between;
    }

    .advice-card-visual {
        align-items: center;
        background: linear-gradient(135deg, #f8fbff, #ffffff);
        border: 1px solid #dbeafe;
        border-radius: 18px;
        display: inline-flex;
        gap: 8px;
        justify-content: flex-end;
        min-height: 44px;
        padding: 7px 9px;
    }

        .advice-card-visual span {
            align-items: center;
            border: 2px solid #111827;
            border-radius: 10px;
            color: #111827;
            display: inline-flex;
            font-size: 10px;
            font-weight: 900;
            height: 28px;
            justify-content: center;
            letter-spacing: .02em;
            min-width: 42px;
            padding: 0 8px;
            position: relative;
            text-transform: uppercase;
        }

    .advice-card-visual-safety span:last-child {
        border-color: #f97316;
        color: #c2410c;
    }

    .advice-card-visual-heating span:first-child,
    .advice-card-visual-cooling span:first-child {
        border-radius: 999px;
    }

    .advice-card-visual-airflow span::after {
        background: #111827;
        border-radius: 999px;
        bottom: 5px;
        content: "";
        height: 2px;
        left: 8px;
        position: absolute;
        right: 8px;
    }

    .advice-card-visual-drain span:first-child::after {
        border-bottom: 2px solid #111827;
        border-left: 2px solid #111827;
        bottom: 6px;
        content: "";
        height: 8px;
        left: 12px;
        position: absolute;
        width: 16px;
    }

    .advice-card-visual-symptom span:first-child::before {
        border: 2px solid #111827;
        border-left: 0;
        border-radius: 0 999px 999px 0;
        content: "";
        height: 12px;
        left: 7px;
        position: absolute;
        width: 10px;
    }

    .advice-card h3 {
        color: #0f172a;
        font-size: 22px;
        line-height: 1.18;
        margin: 14px 0 0;
    }

    .advice-card p {
        color: #334155;
        font-size: 16px;
        line-height: 1.7;
        margin: 12px 0 0;
    }

    .advice-card-support {
        background:
            linear-gradient(135deg, rgba(239, 246, 255, .9), rgba(255, 255, 255, .92));
        border-left: 4px solid #2563eb;
        border-radius: 14px;
        color: #334155;
        display: grid;
        gap: 4px;
        line-height: 1.55;
        margin-top: 18px;
        padding: 14px 16px;
    }

        .advice-card-support strong {
            color: #0f172a;
            font-size: 13px;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .advice-card-support span {
            font-size: 15px;
        }

.advice-card-important {
    background:
        linear-gradient(135deg, rgba(239, 246, 255, .96), rgba(255, 247, 237, .94)),
        #fff;
}

.result-delivery-panel {
    padding: clamp(20px, 3vw, 32px);
}

.diagnostic-advice-detail {
    color: #334155;
    line-height: 1.65;
    margin-top: 12px;
    white-space: pre-line;
}

/* Result page access code notice keeps the code visible without using an alarming error color. */
.access-code-alert {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #173b63;
    font-weight: 800;
    line-height: 1.5;
    margin: 22px 0 0;
    padding: 13px 15px;
}

    .access-code-alert p {
        margin: 0;
    }

    .access-code-alert strong {
        color: #0f2d4d;
        font-size: 1.08em;
        letter-spacing: .04em;
    }

/* Keeps the PreCheck result email capture readable and professional on desktop and phone screens. */
.precheck-result-form {
    margin-top: 22px;
}

.result-email-field {
    max-width: 560px;
}

/* Professional note-style link that lets users jump back to the generated diagnostic result. */
.diagnostic-result-note {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #d7e3f3;
    border-radius: 8px;
    color: var(--primary-dark);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 800;
    margin-top: 10px;
    padding: 10px 13px;
    text-decoration: none;
}

    .diagnostic-result-note:hover {
        background: #eef5ff;
        border-color: #9bb6d5;
        text-decoration: none;
    }

.result-delivery-message {
    border-radius: 8px;
    font-weight: 800;
    line-height: 1.45;
    margin-top: 22px;
    padding: 13px 15px;
}

    .result-delivery-message.success {
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
        color: #166534;
    }

    .result-delivery-message.warning {
        background: #fff7ed;
        border: 1px solid #fed7aa;
        color: #9a3412;
    }

.field-tooltip {
    display: none;
}

.has-help-tooltip {
    cursor: help;
    position: relative;
}

.precheck-hover-tooltip {
    background: #fff;
    border: 1px solid #cfe0f5;
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .14);
    color: #17324d;
    display: none;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
    max-width: min(340px, calc(100vw - 32px));
    padding: 10px 12px;
    pointer-events: none;
    position: fixed;
    text-align: left;
    white-space: normal;
    z-index: 2000;
}

    .precheck-hover-tooltip.is-visible {
        display: block;
    }

/* Help-enabled text labels need an explicit visual box model so the custom tooltip
   opens on simple mouse hover, not only after the nested input receives focus. */
.precheck-question > label.has-help-tooltip,
.precheck-section > label.has-help-tooltip,
.precheck-section .mt-16 > label.has-help-tooltip {
    align-items: center;
    display: inline-flex;
    max-width: 100%;
}

.choice-option.has-help-tooltip,
.yes-no-row label.has-help-tooltip {
    overflow: visible;
}

/* Tooltip text is rendered by the controlled JavaScript tooltip above.
   Keeping CSS pseudo-tooltips disabled avoids duplicate browser-like help boxes. */

.result-action-row .btn {
    min-width: 150px;
    text-align: center;
}

/* Makes the final form action feel intentional and aligned with business app workflows. */
.precheck-submit-row {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding: 4px 0 0;
}

    .precheck-submit-row .btn {
        font-weight: 800;
        min-width: 240px;
        padding: 15px 34px;
        text-align: center;
    }

.precheck-primary-action {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 16px 30px rgba(37, 99, 235, .24);
    color: #fff;
}

    .precheck-primary-action:hover {
        background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
        box-shadow: 0 16px 30px rgba(37, 99, 235, .30);
        transform: translateY(-1px);
    }

@media (max-width: 1020px) {
    .precheck-hero-pro {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .precheck-hero-panel {
        max-width: 620px;
        width: 100%;
    }

    .diagnostic-video-advice {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .precheck-hero-pro {
        padding: 26px 20px;
    }

    .precheck-hero-copy h1 {
        font-size: 34px;
    }

    .precheck-hero-copy p {
        font-size: 16px;
    }

    .precheck-hero-highlights {
        flex-direction: column;
        gap: 8px;
    }

    .precheck-hero-panel {
        padding: 18px;
    }

    .precheck-panel-step {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 14px;
    }

        .precheck-panel-step b {
            height: 34px;
            width: 34px;
        }

    .precheck-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .precheck-progress span {
            font-size: 12px;
            justify-content: flex-start;
            min-height: 52px;
            padding: 10px 14px;
        }

            .precheck-progress span:nth-child(2) {
                border-right: none;
            }

            .precheck-progress span:nth-child(-n + 2) {
                border-bottom: 0;
            }

    .option-grid,
    .option-grid.compact,
    .diagnostic-grid {
        grid-template-columns: 1fr;
    }

    .precheck-filter-guide {
        align-items: stretch;
        grid-template-columns: 50px minmax(0, 1fr);
        padding: 16px;
    }

    .precheck-video-toggle {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
    }

    .precheck-filter-video {
        grid-column: 1 / -1;
        max-width: none;
    }

    .diagnostic-video-advice {
        padding: 18px;
    }

    .precheck-submit-row {
        justify-content: stretch;
        padding: 18px;
    }

        .precheck-submit-row .btn {
            margin-left: auto;
            margin-right: auto;
            max-width: 260px;
            width: 100%;
        }

    .precheck-date-input {
        max-width: none;
    }

    .diagnostic-result-note {
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .result-email-field {
        max-width: none;
    }

    .result-action-row {
        align-items: stretch;
        flex-direction: column;
    }

        .result-action-row .btn {
            width: 100%;
        }
}

/* Validation error states - applied by ASP.NET validation */
input.input-validation-error,
select.input-validation-error {
    /* Red border signals error state */
    /* 1px keeps it consistent with normal border thickness */
    border: 1px solid #dc2626;
    /* Light pink background draws attention to error */
    /* Subtle enough not to be alarming */
    background: #fef2f2;
}

/* ==============================================================================
   DATA TABLES
   ==============================================================================
   Styling for tabular data display. Features full-width layout with collapsed
   borders and subtle row separation. Used for customer lists, job tables,
   invoice displays, and admin data panels.
   ============================================================================== */
.table {
    /* Full width ensures table uses all available container space */
    width: 100%;
    /* Collapse removes spacing between table cells */
    /* Creates clean, continuous borders between cells */
    border-collapse: collapse;
    /* Top margin separates table from content above */
    margin-top: 12px;
}

    /* Table header cells and data cells */
    .table th,
    .table td {
        /* 12px padding on all sides of each cell */
        /* Creates readable spacing around cell content */
        padding: 12px;
        /* Bottom border creates horizontal lines between rows */
        /* Light blue-gray color keeps lines subtle */
        border-bottom: 1px solid #e7edf5;
        /* Left-align all text in cells */
        /* More readable than center-aligned for data tables */
        text-align: left;
        /* Top vertical alignment for consistency */
        /* Particularly important for cells with different content heights */
        vertical-align: top;
    }

    /* Table header specific styling */
    .table th {
        /* Muted gray color differentiates headers from data */
        /* Headers are labels, not primary content */
        color: var(--muted);
        /* Slightly smaller font than data cells */
        /* Reduces visual weight of headers */
        font-size: 13px;
    }

/* ==============================================================================
   UTILITY CLASSES
   ==============================================================================
   Reusable helper classes for common styling needs. These provide quick
   solutions for spacing and list styling without creating new classes.
   ============================================================================== */
.clean-list {
    /* 18px left padding creates indentation for list items */
    /* Smaller than browser default for cleaner appearance */
    padding-left: 18px;
}

.mt-24 {
    /* Add 24px top margin */
    /* Utility class for creating vertical spacing */
    margin-top: 24px;
}

/* ==============================================================================
   ALERT & NOTIFICATION MESSAGES
   ==============================================================================
   User feedback messages for errors, successes, warnings, and information.
   Color-coded for quick visual recognition:
   - Red tones for errors and warnings
   - Green tones for success and confirmations
   Used throughout forms and after user actions.
   ============================================================================== */
.alert {
    /* Light pink background - soft but clearly indicates error/warning */
    background: #fef2f2;
    /* Dark red text for high contrast and readability */
    color: #b91c1c;
    /* Pink border reinforces the alert state */
    border: 1px solid #fecaca;
    /* 10px padding creates breathing room for message text */
    padding: 10px;
    /* Rounded corners match other UI elements (10px) */
    border-radius: 10px;
    /* Bottom margin creates space between stacked alerts */
    margin-bottom: 12px;
}

/* Success message - positive confirmation of completed actions */
.success-message {
    /* Light green background indicates positive outcome */
    background: #dcfce7;
    /* Dark green text for contrast against light background */
    color: #166534;
    /* Green border reinforces success state */
    border: 1px solid #86efac;
    /* Slightly larger padding than alert (14px vs 10px) */
    /* Success messages often contain more text */
    padding: 14px 16px;
    /* Rounded corners for consistency */
    border-radius: 10px;
    /* Vertical margin: 16px top and bottom */
    /* Creates separation from surrounding content */
    margin: 16px 0;
    /* Semi-bold (600) adds emphasis to success messages */
    /* Makes positive feedback more prominent */
    font-weight: 600;
}

/* Inline error messages - appears below invalid form fields */
.error {
    /* Red text color matches error state styling */
    color: #dc2626;
    /* Smaller font size than body text */
    /* Error messages are supplementary information */
    font-size: 14px;
    /* Small top margin separates from input above */
    margin-top: 4px;
    /* Block display puts error on its own line */
    /* Ensures error appears directly below the field */
    display: block;
}

/* PreCheck required-answer banner.
   This appears only after a failed diagnostic submit and gives homeowners one
   clear red attention message before the individual field errors. */
.precheck-attention-banner {
    background: linear-gradient(180deg, #fff7f7, #fff1f2);
    border: 1px solid rgba(220, 38, 38, .32);
    border-left: 5px solid #dc2626;
    border-radius: 18px;
    box-shadow: 0 18px 38px rgba(127, 29, 29, .08);
    color: #7f1d1d;
    display: grid;
    gap: 6px;
    margin: 0 0 22px;
    padding: 16px 18px;
}

.precheck-attention-banner strong {
    color: #991b1b;
    font-size: clamp(16px, 1.1vw, 18px);
    font-weight: 950;
    line-height: 1.2;
}

.precheck-attention-banner p {
    color: #9f1239;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0;
}

.precheck-attention-banner span {
    color: #7f1d1d;
    font-weight: 950;
}

/* Muted inline text - used for small "(Optional)" notes beside form labels. */
.muted {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

/* Tooltip marker - small help indicator beside labels that exposes browser tooltip text on hover. */
.tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 50%;
    background: #e8f0ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    cursor: help;
}

/* ==============================================================================
   SITE FOOTER
   ==============================================================================
   Multi-column footer section with dark background containing company info,
   quick links, contact information, and social media buttons.
   Features: 3-column grid layout, hover effects on links and social icons.
   Automatically stacks into single column on mobile devices.
   ============================================================================== */
.site-footer {
    /* Modern footer uses the same navy/blue/orange brand language as the updated header. */
    background:
        radial-gradient(circle at 12% 0%, rgba(249, 115, 22, .16), transparent 30%),
        linear-gradient(120deg, #071427 0%, #0b1f3d 58%, #102a56 100%);
    /* White text for high contrast against dark background */
    color: white;
    border-top: 1px solid rgba(249, 115, 22, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    /* Large top margin (60px) creates separation from page content */
    /* Clearly delineates footer as separate section */
    margin-top: 60px;
    /* Vertical padding: 50px top and bottom */
    /* Creates spacious, comfortable footer area */
    padding: 50px 0;
}

/* The beginning service-search page uses a lighter footer so the first screen stays focused on choosing a service. */
.site-footer-compact {
    margin-top: 20px;
    padding: 28px 0 10px;
}

    /* Compact footer columns use tighter spacing while preserving the full footer structure for service pages. */
    .site-footer-compact .footer-grid {
        align-items: end;
        column-gap: 22px;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        grid-template-rows: auto;
        justify-content: stretch;
        max-width: none;
        min-height: 62px;
        width: calc(100% - 70px);
    }

    /* Smaller footer headings make the beginning page feel more like a clean search portal than a full service page. */
    .site-footer-compact .footer-section h3 {
        color: #f8fafc;
        font-size: 13px;
        letter-spacing: .02em;
        margin-bottom: 6px;
        text-align: center;
    }

    /* Compact footer text and links stay readable but visually secondary to the service finder. */
    .site-footer-compact .footer-section p,
    .site-footer-compact .footer-links a,
    .site-footer-compact .footer-copy {
        color: #cbd5e1;
        font-size: 11px;
        line-height: 1.3;
    }

    /* Compact footer link rows avoid the large vertical rhythm used on full service pages. */
    .site-footer-compact .footer-links li {
        margin-bottom: 4px;
        text-align: center;
    }

    /* Beginning footer links sit in one professional line with subtle underlines. */
    .site-footer-compact .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin: 0;
    }

        .site-footer-compact .footer-links a {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

    /* Beginning footer sections are positioned intentionally: social left, copyright middle, links right. */
    .site-footer-compact .footer-section:first-child {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        align-self: end;
    }

    .site-footer-compact .footer-section:nth-child(2) {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: end;
    }

    .site-footer-compact .footer-copy-section {
        align-self: end;
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        text-align: center;
    }

    .site-footer-compact .footer-copy {
        margin: 0;
        white-space: nowrap;
    }

    /* Social icons are smaller on the beginning page to reduce visual weight below the service finder. */
    .site-footer-compact .social-icons {
        gap: 6px;
        justify-content: center;
        margin-top: 5px;
    }

    .site-footer-compact .social-btn {
        font-size: 12px;
        height: 28px;
        width: 28px;
    }

.footer-grid {
    /* CSS Grid creates column layout for footer sections */
    display: grid;
    /* Three equal-width columns for footer content */
    /* Each column gets 1/3 of available width */
    grid-template-columns: 1fr 1fr 1fr;
    /* 40px gap between columns */
    /* Creates clear separation between footer sections */
    gap: 40px;
}

/* Full service pages use three clean footer columns, with copyright centered below the row. */
.site-footer:not(.site-footer-compact) .footer-grid {
    align-items: end;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.site-footer:not(.site-footer-compact) .footer-section:first-child {
    grid-column: 1;
    grid-row: 1;
}

.site-footer:not(.site-footer-compact) .footer-section:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.site-footer:not(.site-footer-compact) .footer-section:last-child {
    grid-column: 3;
    grid-row: 1;
}

.site-footer:not(.site-footer-compact) .footer-copy {
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.35;
    margin: 12px 0 0;
}

/* Full page footer content sits lower in the footer block for a more anchored layout. */
.site-footer:not(.site-footer-compact) {
    margin-top: 24px;
    padding: 18px 0 12px;
}

.footer-section h3 {
    /* Bottom margin creates space between heading and links */
    margin-bottom: 18px;
    /* Larger font size makes section headings prominent */
    font-size: 22px;
}

/* Full service footer typography is intentionally smaller and closer to the beginning-page footer. */
.site-footer:not(.site-footer-compact) .footer-section h3 {
    font-size: 15px;
    margin-bottom: 8px;
}

.footer-section p {
    color: #dbeafe;
    line-height: 1.55;
    margin-top: 0;
}

.site-footer:not(.site-footer-compact) .footer-section p,
.site-footer:not(.site-footer-compact) .footer-links a {
    font-size: 12px;
    line-height: 1.35;
}

.site-footer:not(.site-footer-compact) .footer-links li {
    margin-bottom: 0;
}

/* Full page quick links use a compact two-column grid instead of a long vertical list. */
.site-footer:not(.site-footer-compact) .footer-links {
    display: grid;
    gap: 6px 20px;
    grid-template-columns: max-content max-content;
    justify-content: start;
    margin: 0;
}

    .site-footer:not(.site-footer-compact) .footer-links a {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

.site-footer:not(.site-footer-compact) .social-icons {
    gap: 8px;
}

.site-footer:not(.site-footer-compact) .social-btn {
    font-size: 13px;
    height: 30px;
    width: 30px;
}

.footer-links {
    /* Remove default list bullets */
    /* Creates clean, modern link list */
    list-style: none;
    /* Remove default list padding */
    padding: 0;
}

    .footer-links li {
        /* Bottom margin creates spacing between list items */
        /* Makes links easier to read and click */
        margin-bottom: 10px;
    }

    .footer-links a {
        /* Light blue color makes links stand out against dark background */
        /* But not as bright as pure white */
        color: #dbeafe;
        /* Remove underline for cleaner appearance */
        text-decoration: none;
    }

        .footer-links a:hover {
            /* Pure white on hover creates clear interaction feedback */
            /* Brighter than default state signals interactivity */
            color: white;
        }

/* Social media icons container */
.social-icons {
    /* Flexbox creates horizontal row of icons */
    display: flex;
    /* 14px spacing between social icons */
    gap: 14px;
    /* Top margin separates social icons from content above */
    margin-top: 12px;
}

/* Individual social media button */
.social-btn {
    /* Fixed width creates perfect circle when combined with height */
    width: 42px;
    /* Fixed height equal to width creates circle */
    height: 42px;
    /* Dark gray background differentiates buttons from footer background */
    background: #1e293b;
    /* White icon color for visibility */
    color: white;
    /* 50% border-radius on square creates perfect circle */
    border-radius: 50%;
    /* Flexbox enables perfect centering of icon */
    display: flex;
    /* Centers icon vertically within circle */
    align-items: center;
    /* Centers icon horizontally within circle */
    justify-content: center;
    /* Remove underline if implemented as link */
    text-decoration: none;
    /* Icon size within the circle */
    font-size: 18px;
    /* Smooth transition for all properties on hover */
    /* 0.3s duration, ease timing function */
    transition: all 0.3s ease;
}

    .social-btn:hover {
        /* Move button up 4px on hover */
        /* Creates lift effect, makes button feel interactive */
        transform: translateY(-4px);
        /* Change to brand blue on hover */
        /* Consistent with primary color scheme */
        background: #2563eb;
        /* Add shadow on hover */
        /* Shadow offset: 0 horizontal, 8px down, 18px blur */
        /* Blue shadow color with 35% opacity reinforces brand */
        box-shadow: 0 8px 18px rgba(37, 99, 235, .35);
    }

/* ==============================================================================
   ACCOUNT TYPE SELECTION PAGE
   ==============================================================================
   Customer vs Contractor account type selection interface.
   Features large, interactive cards that lift and highlight on hover.
   Used on: /Account/ChooseType registration page.
   Layout: Two equal columns that stack on mobile.
   ============================================================================== */
.account-type-card {
    /* Constrain maximum width to prevent overly wide layout */
    max-width: 1000px;
    /* Center horizontally with auto left/right margins */
    /* 40px top/bottom margin creates vertical spacing */
    margin: 40px auto;
    /* Center-align heading and descriptive text */
    text-align: center;
}

.account-type-grid {
    /* CSS Grid creates two-column layout */
    display: grid;
    /* Two equal-width columns for Customer and Contractor options */
    grid-template-columns: 1fr 1fr;
    /* 24px gap creates space between the two choice cards */
    gap: 24px;
    /* Top margin separates grid from heading above */
    margin-top: 30px;
}

.account-choice {
    /* White background stands out against page background */
    background: white;
    /* 2px border (thicker than usual 1px) makes cards more prominent */
    /* Gray color creates subtle definition */
    border: 2px solid #e5e7eb;
    /* Large border-radius for friendly, modern appearance */
    border-radius: 18px;
    /* Large padding creates substantial clickable area */
    /* Makes cards feel inviting to click */
    padding: 35px;
    /* Pointer cursor indicates the entire card is clickable */
    cursor: pointer;
    /* Left-align text for better readability */
    /* Even though container is center-aligned */
    text-align: left;
    /* Smooth transition for all properties (border, transform, shadow) */
    /* 0.25s duration feels responsive without being jarring */
    transition: all 0.25s ease;
}

    .account-choice:hover {
        /* Blue border on hover signals interactivity */
        /* Matches primary brand color */
        border-color: #2563eb;
        /* Move card up 4px on hover */
        /* Creates floating/lifting effect */
        transform: translateY(-4px);
        /* Blue shadow on hover enhances lift effect */
        /* Shadow color matches border for cohesive look */
        /* 18% opacity creates subtle but noticeable effect */
        box-shadow: 0 18px 40px rgba(37, 99, 235, 0.18);
    }

    .account-choice h2 {
        /* Bottom margin separates heading from description */
        margin-bottom: 10px;
        /* Dark navy color for strong contrast and readability */
        color: #0f172a;
    }

    .account-choice p {
        /* Muted gray color for description text */
        /* Less prominent than heading */
        color: #64748b;
    }

/* ==============================================================================
   ADDRESS AUTOCOMPLETE SUGGESTIONS
   ==============================================================================
   Dropdown suggestion list for address autocomplete functionality.
   Appears below address input field when user types.
   Features: Scrollable list with hover highlighting.
   Requires: JavaScript for autocomplete logic and API integration.
   ============================================================================== */
.suggestions-box {
    /* Border on sides and bottom creates dropdown appearance */
    border: 1px solid #ddd;
    /* No top border - connects visually with input field above */
    /* Creates seamless dropdown effect */
    border-top: none;
    /* White background matches input field */
    background: white;
    /* Limit height to prevent overly long lists */
    /* 220px shows about 5-6 suggestions comfortably */
    max-height: 220px;
    /* Vertical scroll appears if more than 5-6 suggestions */
    /* Horizontal scroll disabled (auto only for vertical) */
    overflow-y: auto;
    /* Position relative for potential absolute-positioned children */
    position: relative;
    /* High z-index ensures dropdown appears above other content */
    /* 999 is high enough for most scenarios */
    z-index: 999;
}

.suggestion-item {
    /* Padding creates comfortable click target */
    padding: 10px;
    /* Pointer cursor indicates item is clickable */
    cursor: pointer;
    /* Bottom border separates items */
    /* Light gray keeps separation subtle */
    border-bottom: 1px solid #eee;
}

    .suggestion-item:hover {
        /* Light gray background on hover provides visual feedback */
        /* Indicates which item will be selected on click */
        background: #f3f4f6;
    }

/* ==============================================================================
   PASSWORD VISIBILITY TOGGLE
   ==============================================================================
   Show/hide password toggle feature for password input fields.
   Features: Eye icon positioned inside password field that toggles visibility.
   Functionality: Clicking toggles between password and text input types.
   Requires: JavaScript to handle click events and type toggling.
   ============================================================================== */
.password-field {
    /* Position relative creates positioning context for eye icon */
    /* Allows absolute positioning of child elements */
    position: relative;
    /* Full width ensures field fills container */
    width: 100%;
}

    .password-field .input {
        /* Full width inherited from parent */
        width: 100%;
        /* Extra right padding makes room for eye icon */
        /* !important overrides any other padding rules */
        /* 48px provides enough space for icon plus margin */
        padding-right: 48px !important;
    }

.password-eye {
    /* Position absolutely within .password-field container */
    /* Allows precise positioning of toggle icon */
    position: absolute;
    /* Position from top - 50% moves to vertical center */
    top: 50%;
    /* Position from right edge */
    right: 14px;
    /* Transform moves element up by half its height */
    /* Combined with top: 50%, creates perfect vertical centering */
    transform: translateY(-50%);
    /* Pointer cursor indicates icon is clickable */
    cursor: pointer;
    /* Icon size - large enough to click easily */
    font-size: 18px;
    /* Medium gray color - visible but not distracting */
    color: #6b7280;
    /* Z-index 20 ensures icon appears above input field */
    z-index: 20;
    /* line-height: 1 removes extra height from icon */
    /* Prevents vertical alignment issues */
    line-height: 1;
    /* Prevent text selection of icon */
    /* Icons shouldn't behave like selectable text */
    user-select: none;
    /* Inline-flex allows centering while staying inline */
    display: inline-flex;
    /* Vertically center icon within its space */
    align-items: center;
    /* Horizontally center icon within its space */
    justify-content: center;
}

    .password-eye:hover {
        /* Darker color on hover provides interaction feedback */
        color: #111827;
    }

/* ==============================================================================
   REQUIRED FIELDS VISUAL INDICATOR
   ==============================================================================
   Soft yellow background highlighting for required form fields.
   Purpose: Helps users quickly identify which fields must be completed.
   Application: Applied via JavaScript or server-side rendering to required inputs.
   Color: #fff9c4 - soft, buttery yellow that's noticeable but not jarring.
   Note: Four classes provide same style for different element types.
   ============================================================================== */
.required-input,
.required-select,
.required-date,
.required-field {
    /* Soft yellow background color (#fff9c4) */
    /* Warm, inviting color that draws attention without alarm */
    /* Light enough that black text remains readable */
    /* !important used only on .required-field to override inline styles */
    background-color: #fff9c4;
}

/* Override for required-field specifically */
.required-field {
    /* !important ensures this style takes precedence */
    /* Sometimes needed when dealing with dynamically generated forms */
    background-color: #fff9c4 !important;
}

/* ==========================================================
   Premium Home Page Design
   These styles improve the BrijjPro homepage layout.
   They create a modern hero section, professional cards,
   trust badges, stats strip, and final call-to-action section.
   ========================================================== */

/* Full home layout for service pages.
   The grid keeps primary BrijjPro content centered and leaves room for responsive service-support panels when needed. */
.page-body:has(.home-marketplace-layout) {
    max-width: none;
    padding-top: 26px;
    padding-bottom: 34px;
    width: min(98vw, 2460px);
}

.home-marketplace-layout {
    align-items: start;
    display: grid;
    gap: clamp(22px, 1.45vw, 40px);
    grid-template-columns: clamp(310px, 13.5vw, 390px) minmax(0, 1fr) clamp(310px, 13.5vw, 390px);
    position: relative;
}

/* Main content column remains the primary page experience.
   min-width: 0 prevents grid overflow when hero text or cards resize. */
.home-main-content {
    min-width: 0;
    max-width: none;
    width: 100%;
}

    .home-main-content .home-section,
    .home-main-content .home-stats-strip,
    .home-main-content .home-final-cta {
        max-width: 100%;
    }

    .home-main-content .section-title {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

/* Clean Home layout used after removing the test product advertising rails.
   The page is intentionally centered and wide enough for desktop while staying readable. */
.page-body:has(.home-clean-layout) {
    width: min(100% - 40px, 1680px);
}

/* The beginning service-search page is intentionally smaller and centered so it feels like a focused search portal. */
.page-body:has(.home-service-finder):not(:has(.home-clean-hero)) {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: visible;
    padding-bottom: 22px;
    padding-top: clamp(8px, 1.4vw, 22px);
    width: min(100% - 40px, 1560px);
}

    /* The start page should not stretch the service card across ultra-wide monitors. */
    .page-body:has(.home-service-finder):not(:has(.home-clean-hero)) .home-clean-layout {
        max-width: 1440px;
    }

/* home-clean-layout owns the Home page content now that affiliate-style side rails are disabled. */
.home-clean-layout {
    display: grid;
    gap: clamp(22px, 1.7vw, 34px);
    margin: 0 auto;
    width: 100%;
}

/* Business-style BrijjPro service finder.
   The finder is backed by CurrentServiceOnline so future services can appear without hardcoding every option. */
.home-service-finder {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    gap: clamp(14px, 1.6vw, 24px);
    justify-items: center;
    padding: clamp(6px, 1.5vw, 20px) clamp(14px, 3vw, 32px) clamp(18px, 2.4vw, 32px);
    text-align: center;
}

.service-finder-hero-grid {
    align-items: start;
    display: block;
    max-width: 1720px;
    min-width: 0;
    position: relative;
    width: 100%;
}

.service-finder-primary {
    display: grid;
    gap: 12px;
    justify-items: center;
    justify-self: center;
    margin: 0 auto;
    max-width: 1280px;
    min-width: 0;
    width: 100%;
}

.service-finder-media-panel {
    align-self: start;
    display: grid;
    justify-items: end;
    justify-self: end;
    margin-top: 0;
    min-width: 0;
    position: absolute;
    right: clamp(0px, 1vw, 18px);
    top: clamp(0px, .8vw, 12px);
    width: min(23vw, 340px);
}

    .service-finder-media-panel::before {
        background:
            radial-gradient(circle at 20% 15%, rgba(37, 99, 235, .14), transparent 40%),
            radial-gradient(circle at 90% 80%, rgba(249, 115, 22, .11), transparent 36%);
        border-radius: 34px;
        content: "";
        inset: -18px;
        opacity: .72;
        pointer-events: none;
        position: absolute;
        z-index: -1;
    }

.service-finder-copy {
    display: grid;
    gap: 7px;
    justify-items: center;
    max-width: 860px;
    position: relative;
}

    .service-finder-copy::before {
        background: radial-gradient(circle, rgba(37, 99, 235, .12), transparent 68%);
        content: "";
        height: 230px;
        left: 50%;
        pointer-events: none;
        position: absolute;
        top: -76px;
        transform: translateX(-50%);
        width: min(78vw, 760px);
        z-index: -1;
    }

.service-finder-brand {
    color: #1f55d7;
    font-size: clamp(48px, 5vw, 76px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: .95;
    text-shadow: 0 14px 34px rgba(37, 99, 235, .14);
}

.service-finder-brand-image {
    align-items: center;
    display: flex;
    font-size: 0;
    justify-content: center;
    line-height: 1;
    text-shadow: none;
    width: 100%;
}

.service-finder-wordmark {
    align-items: baseline;
    display: inline-flex;
    filter: drop-shadow(0 18px 34px rgba(15, 23, 42, .10));
    font-size: clamp(46px, 4.2vw, 66px);
    font-weight: 950;
    letter-spacing: -.025em;
    line-height: .92;
}

.service-finder-wordmark-primary {
    color: #082b57;
}

.service-finder-wordmark-accent {
    color: #f97316;
}

.service-finder-logo {
    display: block;
    filter: drop-shadow(0 14px 28px rgba(15, 23, 42, .09));
    height: auto;
    max-width: min(228px, 66vw);
    object-fit: contain;
    width: 100%;
}

.service-finder-kicker {
    background: rgba(232, 242, 255, .92);
    border: 1px solid #c8ddfb;
    border-radius: 999px;
    color: #1557c8;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .055em;
    padding: 6px 12px;
    text-transform: uppercase;
}

.home-service-finder h1 {
    color: #071427;
    font-size: clamp(27px, 2vw, 36px);
    font-weight: 900;
    line-height: 1.05;
    margin: 0;
    max-width: 960px;
}

.home-service-finder p {
    color: #475569;
    font-size: clamp(13.5px, .82vw, 15px);
    line-height: 1.5;
    margin: 0;
    max-width: 720px;
}

.service-status-message {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #173b63;
    font-weight: 800;
    max-width: 820px;
    padding: 12px 16px;
    width: 100%;
}

.service-search-panel {
    align-items: stretch;
    background:
        radial-gradient(circle at 10% 0%, rgba(37, 99, 235, .065), transparent 34%),
        radial-gradient(circle at 92% 10%, rgba(249, 115, 22, .045), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(247, 251, 255, .46));
    border: 0;
    border-radius: 34px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .075);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(760px, 1fr) minmax(240px, 340px);
    margin-top: 6px;
    max-width: 100%;
    padding: 10px;
    width: 100%;
}

.service-search-field,
.service-select-field {
    background: rgba(255, 255, 255, .9);
    border: 0;
    border-radius: 24px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .05), inset 0 1px 0 rgba(255, 255, 255, .72);
    min-width: 0;
    padding: 9px 14px 10px;
    position: relative;
}

.service-search-field {
    z-index: 4;
}

.service-field-label {
    color: #64748b;
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    margin: 0 0 2px 38px;
    text-align: left;
    text-transform: uppercase;
}

.service-select-field .service-field-label {
    margin-left: 10px;
}

.service-property-types {
    align-items: center;
    background: rgba(255, 255, 255, .42);
    border: 0;
    border-radius: 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    grid-column: 1 / -1;
    justify-content: center;
    margin: 0;
    padding: 10px 14px;
}

    .service-property-types legend {
        color: #516173;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .065em;
        margin-right: 2px;
        text-transform: uppercase;
    }

.service-property-option {
    align-items: center;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(203, 219, 240, .72);
    border-radius: 999px;
    color: #17324d;
    cursor: pointer;
    display: inline-flex;
    font-size: 12.5px;
    font-weight: 850;
    gap: 8px;
    min-height: 34px;
    padding: 7px 13px;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

    .service-property-option input {
        accent-color: var(--primary);
        height: 15px;
        width: 15px;
    }

    .service-property-option:has(input:checked) {
        background: linear-gradient(135deg, #e7f0ff, #ffffff);
        border-color: rgba(37, 99, 235, .52);
        box-shadow: 0 14px 26px rgba(37, 99, 235, .15);
        color: #0f4bb8;
    }

    .service-property-option:hover {
        border-color: #94bdf4;
        transform: translateY(-1px);
    }

.service-search-icon {
    align-items: center;
    color: #64748b;
    display: flex;
    font-size: 16px;
    height: 40px;
    justify-content: center;
    left: 22px;
    pointer-events: none;
    position: absolute;
    top: 26px;
    width: 24px;
    z-index: 2;
}

.service-search-input,
.service-dropdown {
    background: rgba(255, 255, 255, .98);
    border: 1px solid transparent;
    border-radius: 16px;
    box-shadow: none;
    color: #0f172a;
    font-size: 14.25px;
    font-weight: 750;
    min-height: 38px;
    outline: none;
    padding: 0 12px;
    width: 100%;
}

.service-search-input {
    padding-left: 36px;
}

.service-dropdown {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .99), rgba(248, 251, 255, .99));
    padding-right: 34px;
}

.service-native-dropdown {
    display: none;
}

.service-dropdown option {
    background: #fff;
    color: #0f172a;
    font-weight: 750;
}

.service-dropdown option.service-dropdown-store-option {
    background: #f4f6a4;
    color: #111827;
    font-weight: 950;
}

.service-dropdown.is-store-selected {
    background:
        linear-gradient(135deg, rgba(254, 249, 195, .98), rgba(220, 252, 231, .98));
    border-color: rgba(34, 197, 94, .55);
    box-shadow: 0 12px 26px rgba(22, 163, 74, .16), inset 0 0 0 1px rgba(250, 204, 21, .34);
    color: #047857;
    font-weight: 950;
}

.service-custom-dropdown-button {
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, .99), rgba(248, 251, 255, .99));
    border: 1px solid transparent;
    border-radius: 16px;
    color: #0f172a;
    cursor: pointer;
    display: flex;
    font-size: 14.25px;
    font-weight: 850;
    gap: 12px;
    justify-content: space-between;
    min-height: 38px;
    padding: 0 14px;
    text-align: left;
    width: 100%;
}

    .service-custom-dropdown-button:focus-visible {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
        outline: none;
    }

    .service-custom-dropdown-button.is-store-selected {
        background: linear-gradient(135deg, #f8e66d, #c7f56f 52%, #78d45d);
        border-color: rgba(22, 163, 74, .42);
        box-shadow: 0 12px 26px rgba(22, 163, 74, .16), inset 0 0 0 1px rgba(250, 204, 21, .42);
        color: #111827;
    }

.service-custom-dropdown-list {
    background: rgba(255, 255, 255, .98);
    border: 1px solid #d7e3f3;
    border-radius: 18px;
    box-shadow: 0 24px 54px rgba(15, 23, 42, .18);
    display: none;
    gap: 6px;
    left: 0;
    margin-top: 10px;
    max-height: min(340px, 46vh);
    overflow-y: auto;
    padding: 8px;
    position: absolute;
    text-align: left;
    top: 100%;
    width: 100%;
    z-index: 45;
}

    .service-custom-dropdown-list.is-open {
        display: grid;
    }

.service-custom-dropdown-item {
    align-items: center;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #111827;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 850;
    justify-content: space-between;
    min-height: 42px;
    padding: 10px 12px;
    text-align: left;
}

    .service-custom-dropdown-item:hover,
    .service-custom-dropdown-item:focus-visible,
    .service-custom-dropdown-item.is-selected {
        background: #edf4ff;
        border-color: #bad6ff;
        outline: none;
    }

    .service-custom-dropdown-item.is-store-service {
        background: linear-gradient(135deg, #ffe86b, #d5f86f 48%, #7ed957);
        border-color: rgba(22, 163, 74, .42);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .48);
        color: #111827;
        font-weight: 950;
    }

    .service-custom-dropdown-item.is-store-service:hover,
    .service-custom-dropdown-item.is-store-service:focus-visible,
    .service-custom-dropdown-item.is-store-service.is-selected {
        background: linear-gradient(135deg, #ffdf39, #c8f252 50%, #5fc24b);
        border-color: rgba(21, 128, 61, .58);
        color: #0f172a;
    }

    .service-custom-dropdown-item small {
        background: rgba(255, 255, 255, .7);
        border: 1px solid rgba(17, 24, 39, .12);
        border-radius: 999px;
        color: #111827;
        font-size: 11px;
        font-weight: 950;
        padding: 3px 8px;
    }

    .service-search-input:focus,
    .service-dropdown:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    }

.service-suggestions {
    background: #fff;
    border: 1px solid #d7e3f3;
    border-radius: 22px;
    box-shadow: 0 24px 54px rgba(15, 23, 42, .18);
    display: none;
    left: 0;
    margin-top: 10px;
    max-height: min(340px, 46vh);
    overflow-y: auto;
    position: absolute;
    text-align: left;
    top: 100%;
    width: 100%;
    z-index: 40;
}

    .service-suggestions.is-open {
        display: grid;
    }

.service-suggestion-header {
    background: linear-gradient(135deg, #f8fbff, #eef5ff);
    border-bottom: 1px solid #edf2f7;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .03em;
    padding: 12px 18px 10px;
    text-transform: uppercase;
}

.service-suggestion-item {
    align-items: center;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #edf2f7;
    color: #17324d;
    cursor: pointer;
    display: flex;
    font: inherit;
    font-weight: 900;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    text-align: left;
    transition: background-color .16s ease, color .16s ease;
}

    .service-suggestion-item.is-store-suggestion {
        background: linear-gradient(90deg, rgba(254, 249, 195, .96), rgba(220, 252, 231, .96));
        color: #065f46;
    }

    .service-suggestion-item.is-store-suggestion:hover,
    .service-suggestion-item.is-store-suggestion:focus-visible {
        background: linear-gradient(90deg, #fef08a, #bbf7d0);
        color: #064e3b;
    }

    .service-suggestion-item small {
        border-radius: 999px;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 800;
        padding: 5px 10px;
    }

        .service-suggestion-item small.is-open-service {
            background: #dcfce7;
            color: #166534;
        }

        .service-suggestion-item small.is-coming-soon {
            background: #ffedd5;
            color: #9a3412;
        }

    .service-suggestion-item:hover,
    .service-suggestion-item:focus {
        background: #f0f6ff;
        color: #0f4bb8;
        outline: none;
    }

    .service-suggestion-item:first-of-type {
        border-top: 0;
    }

    .service-suggestion-item:last-child {
        border-bottom: 0;
    }

.service-suggestion-empty {
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    padding: 16px 18px;
}

/* Legacy video showcase styles are retained for older markup, while the beginning page now places only the media carousel inside the top-right finder area. */
.service-video-showcase {
    align-items: center;
    background:
        radial-gradient(circle at 80% 0%, rgba(37, 99, 235, .12), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(245, 249, 255, .72));
    border: 0;
    border-radius: 32px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .08);
    display: grid;
    gap: clamp(20px, 3vw, 44px);
    grid-template-columns: minmax(260px, .82fr) minmax(420px, 1.18fr);
    margin-top: 12px;
    max-width: 1320px;
    padding: clamp(18px, 2.2vw, 32px);
    text-align: left;
    width: 100%;
}

.service-video-copy {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.service-video-kicker {
    background: rgba(232, 242, 255, .9);
    border-radius: 999px;
    color: #1557c8;
    font-size: 11px;
    font-weight: 900;
    justify-self: start;
    letter-spacing: .05em;
    padding: 7px 12px;
    text-transform: uppercase;
}

.service-video-copy h2 {
    color: #071427;
    font-size: clamp(24px, 2vw, 34px);
    font-weight: 900;
    line-height: 1.12;
    margin: 0;
}

.service-video-copy p {
    color: #475569;
    font-size: clamp(14px, .95vw, 16px);
    line-height: 1.55;
    margin: 0;
    max-width: 620px;
}

.service-video-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

    .service-video-points span {
        background: rgba(255, 255, 255, .88);
        border-radius: 999px;
        color: #17324d;
        font-size: 12px;
        font-weight: 850;
        padding: 8px 11px;
        box-shadow: inset 0 0 0 1px rgba(203, 219, 240, .68);
    }

.service-video-frame {
    aspect-ratio: 16 / 9;
    background: linear-gradient(145deg, #0f172a, #17324d);
    border-radius: 24px;
    box-shadow: 0 24px 46px rgba(15, 23, 42, .2);
    min-width: 0;
    overflow: hidden;
    padding: 8px;
}

.service-media-carousel {
    display: grid;
    gap: 12px;
    max-width: 340px;
    min-width: 0;
    width: 100%;
}

.service-finder-media-panel .service-media-carousel {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .74), rgba(239, 246, 255, .56));
    border-radius: 24px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, .12);
    padding: 8px;
}

    .service-finder-media-panel .service-media-note {
        display: none;
    }

.service-finder-media-panel .service-video-frame {
    border-radius: 20px;
    padding: 5px;
}

.service-finder-media-panel .service-video-slide {
    border-radius: 20px;
    min-height: 190px;
    padding: 6px;
}

.service-finder-media-panel .service-video-slide video,
.service-finder-media-panel .service-video-slide img {
    border-radius: 18px;
}

.service-finder-media-panel .service-video-slide-label {
    font-size: 10px;
    margin-bottom: 6px;
}

.service-finder-media-panel .service-media-controls {
    margin-top: -2px;
}

.service-media-stage {
    display: grid;
    min-width: 0;
    position: relative;
}

.service-video-slide {
    background: rgba(255, 255, 255, .62);
    border-radius: 26px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 18px 36px rgba(15, 23, 42, .06);
    display: none;
    gap: 10px;
    min-width: 0;
    padding: 10px;
}

.service-video-slide.is-active {
    display: grid;
    animation: serviceMediaFade .32s ease both;
}

@keyframes serviceMediaFade {
    from {
        opacity: .2;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-video-slide-label {
    color: #17324d;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    padding-left: 6px;
    text-transform: uppercase;
}

.service-video-player {
    background: #0f172a;
    border-radius: 18px;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.service-image-frame {
    background: linear-gradient(145deg, #f8fbff, #eaf2ff);
}

.service-media-image {
    border-radius: 18px;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.service-media-controls {
    align-items: center;
    display: flex;
    gap: 9px;
    justify-content: center;
}

.service-media-dot {
    background: #cbd5e1;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    height: 9px;
    overflow: hidden;
    padding: 0;
    position: relative;
    transition: background .2s ease, transform .2s ease, width .2s ease;
    width: 24px;
}

    .service-media-dot::after {
        background: var(--slide-tab-color, #2563eb);
        border-radius: inherit;
        content: "";
        inset: 0;
        position: absolute;
        transform: scaleX(0);
        transform-origin: left center;
    }

.service-media-dot:hover,
.service-media-dot:focus-visible {
    background: #f97316;
    outline: 3px solid rgba(249, 115, 22, .18);
}

.service-media-dot.is-active {
    background: rgba(203, 213, 225, .75);
    transform: translateY(-1px);
    width: 54px;
}

    .service-media-dot.is-active::after {
        transform: scaleX(1);
    }

    .service-media-dot.is-progressing::after {
        animation: serviceSlideProgress var(--slide-progress-duration, 6500ms) linear both;
    }

@keyframes serviceSlideProgress {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.service-media-note {
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
    margin: -2px 0 0;
    text-align: center;
}

/* Tablets do not have enough width for the desktop search and service dropdown row.
   Stacking them keeps the beginning page full-width and prevents clipped, non-scrollable content. */
@media (max-width: 1280px) {
    .page-body:has(.home-service-finder):not(:has(.home-clean-hero)) {
        width: min(100% - 32px, 1060px);
    }

        .page-body:has(.home-service-finder):not(:has(.home-clean-hero)) .home-clean-layout {
            max-width: 100%;
        }

    .service-finder-hero-grid {
        display: grid;
        gap: 20px;
        grid-template-columns: minmax(0, 1fr);
        max-width: 920px;
    }

    .service-finder-media-panel {
        justify-items: center;
        justify-self: center;
        margin-top: 6px;
        position: relative;
        right: auto;
        top: auto;
        width: 100%;
    }

        .service-finder-media-panel .service-media-carousel {
            max-width: 620px;
        }

    .service-search-panel {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        grid-template-columns: minmax(0, 1fr);
        max-width: min(100%, 920px);
        padding: 0;
    }

    .service-search-field,
    .service-select-field,
    .service-dropdown {
        min-width: 0;
        width: 100%;
    }

    .service-property-types {
        border-radius: 18px;
        justify-content: flex-start;
        padding: 10px;
    }

    .service-video-showcase {
        grid-template-columns: minmax(0, 1fr);
        max-width: 920px;
        text-align: center;
    }

    .service-video-copy {
        justify-items: center;
    }

    .service-video-kicker {
        justify-self: center;
    }

    .service-video-copy p {
        max-width: 720px;
    }

    .service-video-points {
        justify-content: center;
    }

    .service-media-carousel {
        max-width: 920px;
        width: 100%;
    }
}

/* Direct Home sections can shrink inside the clean grid instead of forcing horizontal clipping. */
.home-clean-layout > * {
    min-width: 0;
}

/* The clean hero keeps the professional two-column presentation without depending on side ads. */
.home-clean-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 520px);
    margin-bottom: 0;
    max-width: 100%;
    width: 100%;
}

/* Service offer rows are shown on every platform once a service context is known. */
.home-mobile-product-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(239, 246, 255, .82));
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .08);
    display: grid;
    gap: 22px;
    margin-top: clamp(22px, 2.2vw, 38px);
    padding: clamp(24px, 2.2vw, 38px);
}

/* Product strips use a responsive desktop grid and later become horizontal swipe rows on smaller screens. */
.home-mobile-product-strip {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* Each mobile product row is separate so selling offers and advertising/recommended offers read as two lines. */
.home-mobile-product-row {
    display: grid;
    gap: 10px;
}

/* Row headers help phone users understand that each product line can be swiped independently. */
.home-mobile-product-row-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    .home-mobile-product-row-header span {
        color: #0f172a;
        font-weight: 900;
    }

    .home-mobile-product-row-header small {
        color: #64748b;
        font-weight: 700;
    }

/* Side rail containers are intentionally quiet so the product offers feel commercial but not distracting. */
.home-product-rail {
    background: rgba(248, 250, 252, .96);
    border: 1px solid #d8e4f2;
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .07);
    max-width: none;
    overflow: visible;
    padding: clamp(14px, .95vw, 20px);
    position: sticky !important;
    top: 96px;
    width: auto;
    z-index: 1;
}

.home-product-rail-left {
    left: auto;
}

.home-product-rail-right {
    right: auto;
}

/* Sticky rail keeps offers visible as the visitor scrolls from top to bottom on desktop. */
.home-rail-sticky {
    display: grid;
    gap: clamp(12px, .75vw, 18px);
}

.home-rail-title {
    border-bottom: 1px solid #dbe4f0;
    color: #1f3148;
    font-size: clamp(12px, .62vw, 14px);
    font-weight: 900;
    letter-spacing: .06em;
    padding-bottom: 8px;
    text-transform: uppercase;
}

/* Demo product offer card for future affiliate marketplace placements.
   The layout mimics compact marketplace ads without relying on live external product data yet. */
.home-product-offer {
    background: #fff;
    border: 1px solid #dce6f2;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
    color: #172033;
    display: grid;
    gap: 8px;
    min-height: 0;
    padding: clamp(12px, .8vw, 16px);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

    .home-product-offer:hover,
    .home-product-offer:focus {
        border-color: #93b4dc;
        box-shadow: 0 16px 36px rgba(15, 23, 42, .11);
        transform: translateY(-2px);
    }

.home-product-badge {
    align-self: start;
    background: #eef5ff;
    border-radius: 999px;
    color: #1d4ed8;
    font-size: clamp(10px, .52vw, 12px);
    font-weight: 800;
    padding: 4px 7px;
    width: fit-content;
}

/* Placeholder product image block.
   Later this can become a real product image URL while preserving stable card dimensions. */
.home-product-image {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #f8fafc, #dbeafe);
    border: 1px solid #e3ebf6;
    border-radius: 6px;
    display: block;
    object-fit: cover;
    width: 100%;
}

.home-product-offer strong {
    color: #102033;
    font-size: clamp(14px, .72vw, 17px);
    line-height: 1.3;
}

.home-product-offer small {
    color: #64748b;
    font-size: clamp(12px, .6vw, 14px);
    line-height: 1.35;
}

.home-product-price {
    color: #0f766e;
    font-size: clamp(16px, .78vw, 19px);
    font-weight: 900;
    margin-top: 2px;
}

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    gap: clamp(28px, 2.4vw, 50px);
    align-items: center;
    padding: clamp(44px, 3.2vw, 66px);
    background: linear-gradient(135deg, #ffffff, #eef5ff);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
    margin-bottom: 28px;
}

.home-hero-content h1 {
    font-size: clamp(56px, 2.95vw, 78px);
    line-height: 1.05;
    margin: 14px 0 16px;
    color: #0f172a;
    letter-spacing: 0;
}

.home-eyebrow {
    display: inline-block;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 800;
    font-size: clamp(14px, .7vw, 17px);
    padding: 10px 16px;
    border-radius: 999px;
}

.home-hero-text {
    font-size: clamp(17px, .82vw, 21px);
    line-height: 1.6;
    color: #475569;
    max-width: 860px;
}

.home-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.home-primary-btn {
    font-size: clamp(15px, .72vw, 18px);
    font-weight: 800;
    padding: 14px 22px;
}

.home-secondary-btn {
    font-size: clamp(15px, .72vw, 18px);
    font-weight: 700;
    padding: 15px 22px;
}

.home-trust-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    color: #334155;
    font-weight: 700;
    font-size: clamp(14px, .66vw, 16px);
}

.home-hero-visual {
    display: flex;
    justify-content: flex-end;
}

.estimate-card {
    width: 100%;
    max-width: 520px;
    background: #0f172a;
    color: white;
    border-radius: 24px;
    padding: clamp(24px, 1.35vw, 32px);
    box-shadow: 0 22px 45px rgba(15, 23, 42, .28);
}

.estimate-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #e0f2fe;
}

.estimate-dot {
    width: 12px;
    height: 12px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
}

.estimate-step {
    display: flex;
    gap: 14px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: clamp(16px, .9vw, 20px);
    margin-bottom: 13px;
}

    .estimate-step span {
        width: 36px;
        height: 36px;
        min-width: 36px;
        background: #2563eb;
        color: white;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: 800;
    }

    .estimate-step strong {
        display: block;
        font-size: clamp(15px, .72vw, 18px);
        margin-bottom: 4px;
    }

    .estimate-step p {
        margin: 0;
        color: #cbd5e1;
        font-size: clamp(14px, .68vw, 16px);
        line-height: 1.5;
    }

/* ==========================================================
   Home Sections & Steps
   ========================================================== */
.home-section {
    margin-top: 10px;
}

.section-title {
    text-align: center;
    margin-bottom: 14px;
}

    .section-title h2 {
        color: #0f172a;
        font-size: clamp(30px, 1.35vw, 38px);
        margin-bottom: 8px;
    }

    .section-title p {
        color: #64748b;
        font-size: clamp(15px, .68vw, 18px);
        margin: 0;
    }

.home-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 1vw, 24px);
}

.home-step-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: clamp(20px, 1vw, 28px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
    transition: all .25s ease;
}

    .home-step-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(15, 23, 42, .1);
    }

.step-icon {
    width: 44px;
    height: 44px;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: clamp(14px, .68vw, 18px);
    margin-bottom: 14px;
}

.home-step-card h3 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: clamp(18px, .85vw, 22px);
}

.home-step-card p {
    margin: 0;
    color: #64748b;
    font-size: clamp(14px, .68vw, 17px);
    line-height: 1.55;
}

/* ==========================================================
   Home Stats & Final CTA
   ========================================================== */
.home-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    background: #0f172a;
    color: white;
    border-radius: 18px;
    padding: clamp(20px, 1.1vw, 30px);
    margin-top: 20px;
}

    .home-stats-strip div {
        text-align: center;
        padding: 10px;
    }

    .home-stats-strip strong {
        display: block;
        font-size: clamp(28px, 1.25vw, 36px);
        margin-bottom: 6px;
    }

    .home-stats-strip span {
        color: #cbd5e1;
        font-size: clamp(13px, .62vw, 16px);
    }

.home-final-cta {
    text-align: center;
    background: linear-gradient(135deg, #1d4ed8, #0f172a);
    color: white;
    border-radius: 20px;
    padding: clamp(34px, 2.2vw, 48px) 24px;
    margin-top: 20px;
}

    .home-final-cta h2 {
        margin-top: 0;
        font-size: clamp(30px, 1.45vw, 40px);
    }

    .home-final-cta p {
        color: #dbeafe;
        font-size: clamp(14px, .68vw, 17px);
        margin-bottom: 22px;
    }

/* ==========================================================
   Professional HVAC Service Home
   ========================================================== */
.hvac-hero-pro {
    align-items: stretch;
    background: radial-gradient(circle at 8% 18%, rgba(37, 99, 235, .11), transparent 26%), linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 246, 255, .9));
    border: 1px solid rgba(191, 219, 254, .9);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .08);
    display: grid;
    gap: clamp(16px, 1.35vw, 26px);
    grid-template-columns: minmax(280px, .8fr) minmax(320px, .92fr) minmax(310px, .76fr);
    margin-bottom: 0;
    overflow: hidden;
    padding: clamp(22px, 1.7vw, 34px);
}

.hvac-hero-media-card {
    align-self: center;
    display: grid;
    gap: 12px;
    min-width: 0;
}

.hvac-hero-media-frame {
    aspect-ratio: 16 / 9;
    background: linear-gradient(145deg, #ffffff, #edf6ff);
    border-radius: 22px;
    box-shadow: 0 18px 42px rgba(37, 99, 235, .13);
    overflow: hidden;
    position: relative;
}

.hvac-hero-media-slide {
    inset: 0;
    opacity: 0;
    position: absolute;
    transform: scale(1.015);
    transition: opacity .38s ease, transform .38s ease;
}

    .hvac-hero-media-slide.is-active {
        opacity: 1;
        transform: scale(1);
        z-index: 1;
    }

    .hvac-hero-media-slide img {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

.hvac-hero-media-footer {
    align-items: center;
    color: #64748b;
    display: flex;
    font-size: 13px;
    font-weight: 800;
    justify-content: space-between;
    text-transform: uppercase;
}

.hvac-hero-media-dots {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

    .hvac-hero-media-dots button {
        background: #cfe1f7;
        border: 0;
        border-radius: 999px;
        cursor: pointer;
        height: 8px;
        padding: 0;
        transition: background .2s ease, width .2s ease;
        width: 22px;
    }

        .hvac-hero-media-dots button.is-active {
            background: #2563eb;
            width: 34px;
        }
}

.hvac-hero-copy {
    align-content: center;
    background: rgba(255, 255, 255, .72);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
    display: grid;
    min-width: 0;
    padding: clamp(18px, 1.45vw, 28px);
}

    .hvac-hero-copy h1 {
        color: #0f172a;
        font-size: clamp(30px, 1.72vw, 42px);
        line-height: 1.08;
        margin: 10px 0 12px;
        max-width: 560px;
    }

    .hvac-hero-copy .home-hero-text {
        font-size: clamp(15px, .72vw, 18px);
        line-height: 1.58;
        max-width: 560px;
    }

    .hvac-hero-copy .home-hero-actions {
        margin-top: 4px;
    }

    .hvac-hero-copy .home-trust-row {
        gap: 10px 16px;
        margin-top: 14px;
    }

        .hvac-hero-copy .home-trust-row span {
            font-size: clamp(12px, .58vw, 14px);
        }

.hvac-hero-panel {
    align-self: center;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    box-shadow: 0 20px 42px rgba(15, 23, 42, .24);
    color: #fff;
    display: grid;
    gap: 9px;
    padding: clamp(16px, .92vw, 22px);
}

.hvac-panel-top {
    align-items: center;
    color: #e0f2fe;
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}

.hvac-panel-metric {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    display: flex;
    gap: 12px;
    padding: clamp(11px, .6vw, 14px);
}

    .hvac-panel-metric > span {
        align-items: center;
        background: #2563eb;
        border-radius: 999px;
        color: #fff;
        display: inline-flex;
        font-size: 13px;
        font-weight: 900;
        height: 34px;
        justify-content: center;
        min-width: 34px;
    }

    .hvac-panel-metric strong {
        display: block;
        font-size: clamp(14px, .68vw, 16px);
        margin-bottom: 5px;
    }

    .hvac-panel-metric p {
        color: #cbd5e1;
        font-size: clamp(12px, .58vw, 14px);
        line-height: 1.45;
        margin: 0;
    }

.hvac-process-band {
    margin-top: clamp(28px, 2vw, 42px);
}

.hvac-process-heading {
    margin: 0 auto 20px;
    max-width: 760px;
    text-align: center;
}

    .hvac-process-heading span,
    .hvac-support-copy span {
        color: #1d4ed8;
        display: block;
        font-size: clamp(12px, .56vw, 14px);
        font-weight: 900;
        letter-spacing: .02em;
        margin-bottom: 8px;
        text-transform: uppercase;
    }

    .hvac-process-heading h2,
    .hvac-support-copy h2 {
        color: #0f172a;
        font-size: clamp(24px, 1.2vw, 32px);
        line-height: 1.16;
        margin: 0 0 8px;
    }

    .hvac-process-heading p,
    .hvac-support-copy p {
        color: #52657d;
        font-size: clamp(14px, .66vw, 16px);
        line-height: 1.55;
        margin: 0;
    }

.hvac-process-line {
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    border: 1px solid #dbe6f3;
    border-radius: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
}

    .hvac-process-line article {
        align-items: flex-start;
        display: flex;
        gap: 14px;
        padding: clamp(18px, 1.1vw, 26px);
    }

        .hvac-process-line article + article {
            border-left: 1px solid #e4edf8;
        }

        .hvac-process-line article > span {
            align-items: center;
            background: #eaf3ff;
            border-radius: 12px;
            color: #1d4ed8;
            display: inline-flex;
            flex: 0 0 42px;
            font-size: 13px;
            font-weight: 900;
            height: 42px;
            justify-content: center;
        }

    .hvac-process-line h3 {
        color: #0f172a;
        font-size: clamp(16px, .76vw, 19px);
        margin: 3px 0 7px;
    }

    .hvac-process-line p {
        color: #5f7188;
        font-size: clamp(13px, .62vw, 15px);
        line-height: 1.5;
        margin: 0;
    }

.hvac-support-panel {
    align-items: start;
    display: grid;
    gap: clamp(24px, 2vw, 46px);
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    margin-top: clamp(24px, 1.7vw, 34px);
}

.hvac-support-copy {
    padding-top: 8px;
}

.hvac-support-list {
    border-top: 1px solid #dbe6f3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

    .hvac-support-list article {
        align-items: flex-start;
        display: flex;
        gap: 14px;
        padding: 18px 0;
    }

        .hvac-support-list article:nth-child(odd) {
            padding-right: clamp(18px, 1.6vw, 32px);
        }

        .hvac-support-list article:nth-child(even) {
            border-left: 1px solid #e4edf8;
            padding-left: clamp(18px, 1.6vw, 32px);
        }

        .hvac-support-list article:nth-child(n+3) {
            border-top: 1px solid #e4edf8;
        }

.hvac-service-icon {
    align-items: center;
    background: #eef5ff;
    border-radius: 12px;
    color: #1d4ed8;
    flex: 0 0 40px;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 48px;
}

.hvac-support-list h3 {
    color: #0f172a;
    font-size: clamp(16px, .74vw, 19px);
    margin: 0 0 6px;
}

.hvac-support-list p {
    color: #64748b;
    font-size: clamp(13px, .6vw, 15px);
    line-height: 1.5;
    margin: 0;
}

.hvac-proof-strip {
    background: #0f172a;
    border-radius: 16px;
    color: white;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: clamp(26px, 1.8vw, 36px);
    overflow: hidden;
}

    .hvac-proof-strip div {
        padding: clamp(18px, 1vw, 24px);
        text-align: center;
    }

        .hvac-proof-strip div + div {
            border-left: 1px solid rgba(255, 255, 255, .1);
        }

    .hvac-proof-strip strong {
        display: block;
        font-size: clamp(22px, 1vw, 30px);
        margin-bottom: 5px;
    }

    .hvac-proof-strip span {
        color: #cbd5e1;
        font-size: clamp(12px, .58vw, 14px);
    }

/* ==========================================================
   Responsive Design
   ========================================================== */
@media (max-width: 1900px) {
    .page-body:has(.home-marketplace-layout) {
        width: min(98vw, 1840px);
    }

    .home-marketplace-layout {
        gap: clamp(18px, 1.2vw, 28px);
        grid-template-columns: clamp(250px, 15vw, 310px) minmax(0, 1fr) clamp(250px, 15vw, 310px);
    }

    .home-hero {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
        gap: clamp(22px, 1.8vw, 34px);
        padding: clamp(34px, 2.4vw, 46px);
    }

    .home-hero-content h1 {
        font-size: clamp(44px, 3.1vw, 60px);
    }

    .home-hero-text {
        font-size: clamp(18px, 1.1vw, 22px);
    }

    .home-product-rail {
        padding: clamp(12px, .8vw, 16px);
    }
}

@media (max-width: 1650px) {
    .hvac-hero-pro {
        grid-template-columns: minmax(250px, .82fr) minmax(300px, 1fr) minmax(290px, .82fr);
    }

    .home-clean-hero {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    }

    .home-marketplace-layout {
        grid-template-columns: clamp(220px, 15vw, 260px) minmax(0, 1fr) clamp(220px, 15vw, 260px);
    }

    .home-hero {
        grid-template-columns: 1fr;
    }

    .home-hero-visual {
        justify-content: stretch;
    }

    .estimate-card {
        max-width: none;
    }
}

@media (max-width: 1500px) {
    .page-body:has(.home-marketplace-layout) {
        width: min(1200px, 92%);
    }

    .home-marketplace-layout {
        gap: 20px;
        grid-template-columns: 1fr;
    }

    .home-main-content {
        order: 1;
    }

    .home-product-rail {
        background: transparent;
        border: 0;
        box-shadow: none;
        max-width: none;
        overflow: visible;
        padding: 0;
        position: static !important;
        top: auto;
        width: auto;
    }

    .home-product-rail-left {
        order: 2;
    }

    .home-product-rail-right {
        order: 3;
    }

    .home-rail-sticky {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    .home-rail-title {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1199px) {
    /* Tablet and cellphone users still see optional product offers after the main BrijjPro content. */
    .home-mobile-product-section {
        gap: 18px;
    }

    /* The bottom offer row uses horizontal scrolling so product cards do not make mobile pages excessively long. */
    .home-mobile-product-strip {
        display: grid;
        gap: 14px;
        grid-auto-columns: minmax(240px, 46%);
        grid-auto-flow: column;
        grid-template-columns: none;
        margin-left: -6px;
        margin-right: -6px;
        overflow-x: auto;
        padding: 4px 6px 14px;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

        /* Each mobile product offer snaps cleanly into place during horizontal swiping. */
        .home-mobile-product-strip .home-product-offer {
            scroll-snap-align: start;
        }
}

@media (max-width: 900px) {
    .hero-grid,
    .grid-2,
    .grid-3,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .home-hero {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .hvac-hero-pro {
        grid-template-columns: 1fr;
        padding: 28px;
    }

    .hvac-process-line,
    .hvac-support-panel,
    .hvac-support-list {
        grid-template-columns: 1fr;
    }

        .hvac-process-line article + article,
        .hvac-support-list article:nth-child(even) {
            border-left: 0;
        }

        .hvac-process-line article + article,
        .hvac-support-list article:nth-child(n+2) {
            border-top: 1px solid #e4edf8;
        }

        .hvac-support-list article:nth-child(odd),
        .hvac-support-list article:nth-child(even) {
            padding-left: 0;
            padding-right: 0;
        }

    .hvac-proof-strip {
        grid-template-columns: 1fr 1fr;
    }

        .hvac-proof-strip div:nth-child(odd) {
            border-left: 0;
        }

        .hvac-proof-strip div:nth-child(n+3) {
            border-top: 1px solid rgba(255, 255, 255, .1);
        }

    .home-clean-hero {
        grid-template-columns: 1fr;
    }

    .home-product-offer {
        min-height: 0;
    }

    .home-steps-grid {
        grid-template-columns: 1fr;
    }

    .home-stats-strip {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 800px) {
    .account-type-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .page-body:has(.home-marketplace-layout) {
        width: min(100% - 24px, 520px);
    }

    .page-body:has(.home-clean-layout) {
        width: min(100% - 24px, 365px);
    }

    .home-primary-btn,
    .home-secondary-btn {
        text-align: center;
        width: 100%;
    }

    .home-rail-sticky {
        grid-template-columns: 1fr;
    }

    .home-stats-strip {
        grid-template-columns: 1fr;
    }

    .home-hero-content h1 {
        font-size: 36px;
    }
}

/* ==========================================================
   Top form message box
   Used on Homeowner and Contractor create account pages.
   Red = error message
   Green = success / information message
   ========================================================== */

.form-top-message {
    display: none;
    padding: 14px 16px;
    border-radius: 10px;
    margin: 16px 0;
    font-weight: 700;
    line-height: 1.5;
}

    .form-top-message.show {
        display: block;
    }

    .form-top-message.error-message {
        background: #fef2f2;
        color: #b91c1c;
        border: 1px solid #fecaca;
    }

    .form-top-message.success-message {
        background: #dcfce7;
        color: #166534;
        border: 1px solid #86efac;
    }

/* ==========================================================
   Premium Top Form Message Box
   Used on Homeowner and Contractor create account pages.
   Red = error / action needed
   Green = verification sent / success information
   ========================================================== */

.form-top-message {
    display: none;
    position: relative;
    padding: 18px 20px 18px 22px;
    border-radius: 16px;
    margin: 18px 0 24px;
    font-weight: 600;
    line-height: 1.6;
    border: 1px solid transparent;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

    .form-top-message.show {
        display: block;
        animation: fadeSlideDown 0.28s ease;
    }

    .form-top-message::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 6px;
        height: 100%;
    }

    .form-top-message.error-message {
        background: linear-gradient(135deg, #fff5f5, #fef2f2);
        color: #991b1b;
        border-color: #fecaca;
    }

        .form-top-message.error-message::before {
            background: #dc2626;
        }

    .form-top-message.success-message {
        background: linear-gradient(135deg, #f0fdf4, #dcfce7);
        color: #166534;
        border-color: #86efac;
    }

        .form-top-message.success-message::before {
            background: #16a34a;
        }

    .form-top-message strong {
        display: block;
        font-size: 15px;
        font-weight: 800;
        margin-bottom: 4px;
    }

@keyframes fadeSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================
   Verification Code Highlight
   Used when code entry step is shown
   ========================================================== */

.verification-label {
    color: #dc2626 !important;
    font-weight: 800;
}

.verification-input {
    border: 2px solid #dc2626 !important;
    background: #fff5f5 !important;
    font-weight: 700;
}

    .verification-input:focus {
        outline: none;
        border-color: #b91c1c !important;
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
    }

/* ==========================================================
   Clean Page Background
   The older HVAC image pattern is disabled so the website uses
   a normal business-style background on every page.
   ========================================================== */

.page-body {
    position: relative;
    overflow: hidden;
}

    /* This override protects all pages from showing the old decorative fan/HVAC image pattern. */
    .page-body::before {
        content: none;
        display: none;
    }


    /*
   This makes sure all real page content stays above the background image.
*/
    .page-body .container {
        position: relative;
        z-index: 1;
    }


/* ==============================================================================
   CUSTOMER LOGIN STATE
   ==============================================================================
   These classes are used by _Layout.cshtml when the homeowner is logged in,
   and by Account/CustomerDashboard.cshtml. They are intentionally small so
   they do not pull the design in any new direction; they reuse existing
   spacing and color conventions.
   ============================================================================== */

/* "Welcome, {firstname}" pill that appears in the top nav after login. */
.nav-welcome {
    /* Same white color as the rest of the nav links so it reads as part of the bar. */
    color: #fff;
    /* Match the spacing rhythm of .nav-links a so the items align evenly. */
    margin-left: 18px;
    /* Slightly lighter weight than a real link so users do not try to click it. */
    font-weight: 500;
    /* Small horizontal padding + subtle background tint makes it feel like a chip
       and visually separates the greeting from the surrounding nav links. */
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    /* Slight downsizing keeps the chip from making the bar feel taller. */
    font-size: 14px;
}

/* Small grey hint text used at the bottom of the dashboard's leads table.
   We keep it muted so it reads as a secondary explanation, not a warning. */
.muted-note {
    color: #6b7280;
    font-size: 13px;
    margin-top: 12px;
}

/* Status pills for the homeowner's past requests table.
   Each lead status gets its own background+text colour so the user can
   scan the table quickly. Padding/radius match the chip style above. */
.status-new,
.status-assigned,
.status-invites,
.status-bids,
.status-closed,
.status-default {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.status-new {
    background: #dbeafe; /* light blue */
    color: #1e40af;
}

.status-assigned {
    background: #fef3c7; /* amber */
    color: #92400e;
}

.status-invites {
    background: #ede9fe; /* lavender */
    color: #5b21b6;
}

.status-bids {
    background: #d1fae5; /* mint */
    color: #065f46;
}

.status-closed {
    background: #dcfce7; /* soft green */
    color: #14532d;
}

.status-default {
    background: #e5e7eb; /* neutral grey */
    color: #374151;
}

/* Professional homeowner account layout for the My Account result hub. */
.customer-account-shell {
    display: grid;
    gap: 18px;
    margin-inline: auto;
    max-width: 1380px;
}

.customer-account-hero,
.account-result-section {
    background: #fff;
    border: 1px solid #dbe7f5;
    border-radius: 16px;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .065);
}

.customer-account-hero {
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, .96) 0%, rgba(248, 251, 255, .96) 58%, rgba(239, 246, 255, .98) 100%), radial-gradient(circle at 86% 22%, rgba(37, 99, 235, .14), transparent 34%);
    display: grid;
    gap: clamp(24px, 2.2vw, 42px);
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, 520px);
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(28px, 2.8vw, 44px);
    position: relative;
}

    .customer-account-hero::after {
        background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(15, 23, 42, .02));
        content: "";
        height: 170px;
        position: absolute;
        right: -56px;
        top: -58px;
        transform: rotate(10deg);
        width: 340px;
    }

.customer-account-hero-copy,
.customer-account-actions {
    position: relative;
    z-index: 1;
}

.customer-account-hero h1 {
    font-size: clamp(32px, 2.6vw, 48px);
    line-height: 1.08;
    margin: 8px 0 12px;
    max-width: 760px;
}

.customer-account-hero p {
    color: #44546a;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    max-width: 680px;
}

.account-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

    .account-hero-badges span {
        background: #f8fafc;
        border: 1px solid #dbe7f5;
        border-radius: 999px;
        color: #17324d;
        font-size: 12px;
        font-weight: 900;
        padding: 8px 11px;
    }

.customer-account-actions {
    align-items: start;
    background: linear-gradient(145deg, rgba(15, 23, 42, .96) 0%, rgba(23, 49, 77, .96) 100%), radial-gradient(circle at top right, rgba(37, 99, 235, .24), transparent 42%);
    border: 1px solid rgba(191, 219, 254, .18);
    border-radius: 16px;
    box-shadow: 0 22px 44px rgba(15, 23, 42, .22);
    color: #fff;
    display: grid;
    gap: 16px;
    padding: clamp(20px, 1.3vw, 26px);
}

.account-secure-note {
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(134, 239, 172, .42);
    border-radius: 999px;
    color: #bbf7d0;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
    padding: 8px 12px;
    text-transform: uppercase;
}

.account-action-panel-header {
    display: grid;
    gap: 12px;
}

    .account-action-panel-header strong {
        color: #fff;
        font-size: 20px;
        line-height: 1.2;
    }

    .account-action-panel-header p {
        color: #dbeafe;
        font-size: 14px;
        line-height: 1.5;
        margin: 6px 0 0;
    }

.customer-account-actions .btn {
    justify-self: start;
    margin-top: 4px;
}

/* Dashboard action cards present the logged-in homeowner's next service paths
   as clear business workflow choices instead of plain navigation links. */
.account-action-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4px;
    width: 100%;
}

.account-action-card {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    color: #fff;
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

    .account-action-card.primary {
        grid-column: 1 / -1;
    }

    .account-action-card:hover,
    .account-action-card:focus {
        background: rgba(255, 255, 255, .12);
        border-color: rgba(147, 197, 253, .72);
        box-shadow: 0 12px 24px rgba(15, 23, 42, .22);
        outline: none;
        text-decoration: none;
        transform: translateY(-1px);
    }

    .account-action-card.primary {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        border-color: rgba(191, 219, 254, .38);
    }

    .account-action-card span {
        color: #bfdbfe;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .account-action-card strong {
        color: #fff;
        font-size: 14px;
        line-height: 1.25;
    }

.account-summary-strip {
    background: transparent;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Compact account snapshot metrics give the homeowner useful totals without making
   the counts look like oversized clickable buttons. */
.account-metric-strip {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid #dbe7f5;
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .045);
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
}

.account-metric-item {
    align-content: center;
    display: grid;
    gap: 4px;
    min-height: 78px;
    padding: 15px 18px;
    position: relative;
}

    .account-metric-item + .account-metric-item {
        border-left: 1px solid #e6edf7;
    }

    .account-metric-item span {
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .account-metric-item strong {
        color: #0f172a;
        font-size: 26px;
        line-height: 1;
    }

    .account-metric-item small {
        color: #475569;
        font-size: 12px;
        line-height: 1.35;
    }

/* Dashboard service offers use the same database-backed products as Home, with a cleaner account layout. */
.account-service-offers {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .12), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 246, 255, .78));
    border-radius: 28px;
    box-shadow: 0 24px 58px rgba(15, 23, 42, .075);
    display: grid;
    gap: 22px;
    margin: clamp(28px, 3vw, 46px) 0 0;
    overflow: hidden;
    padding: clamp(22px, 2vw, 34px);
}

.account-service-offer-heading {
    display: grid;
    gap: 6px;
    max-width: 860px;
}

    .account-service-offer-heading h2 {
        color: #071224;
        font-size: clamp(24px, 1.8vw, 34px);
        line-height: 1.12;
        margin: 0;
    }

    .account-service-offer-heading p {
        color: #475569;
        font-size: clamp(14px, .9vw, 16px);
        line-height: 1.65;
        margin: 0;
    }

    .account-service-offer-heading small {
        color: #2563eb;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

.account-service-offer-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 4px 4px 16px;
    scroll-snap-type: x proximity;
    scrollbar-color: #93c5fd rgba(219, 234, 254, .8);
    scrollbar-width: thin;
}

    .account-service-offer-grid::-webkit-scrollbar {
        height: 10px;
    }

    .account-service-offer-grid::-webkit-scrollbar-track {
        background: rgba(219, 234, 254, .72);
        border-radius: 999px;
    }

    .account-service-offer-grid::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, #2563eb, #0ea5e9);
        border-radius: 999px;
    }

    .account-service-offer-grid::after {
        content: "";
        flex: 0 0 2px;
}

.account-service-offer-card {
    background: rgba(255, 255, 255, .96);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
    color: #102033;
    display: grid;
    flex: 0 0 clamp(220px, 21vw, 300px);
    gap: 9px;
    min-width: 0;
    padding: 16px;
    scroll-snap-align: start;
    text-decoration: none;
    transition: box-shadow .18s ease, transform .18s ease;
}

    .account-service-offer-card:hover,
    .account-service-offer-card:focus {
        box-shadow: 0 20px 48px rgba(15, 23, 42, .12);
        transform: translateY(-2px);
    }

    .account-service-offer-card strong {
        color: #0f172a;
        font-size: clamp(15px, .95vw, 18px);
        line-height: 1.25;
    }

    .account-service-offer-card small {
        color: #64748b;
        font-size: clamp(12px, .72vw, 14px);
        line-height: 1.4;
    }

.account-summary-overview {
    grid-template-columns: minmax(240px, 320px);
    justify-content: end;
}

.account-summary-strip div {
    background: #fff;
    border: 1px solid #d8e2ef;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .045);
    display: grid;
    gap: 5px;
    min-height: 106px;
    padding: 18px 20px;
    position: relative;
}

    .account-summary-strip div::before {
        background: linear-gradient(180deg, #2563eb 0%, #93c5fd 100%);
        border-radius: 999px;
        content: "";
        height: calc(100% - 30px);
        left: 0;
        position: absolute;
        top: 15px;
        width: 4px;
    }

.account-summary-card {
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #dbe7f5;
    border-radius: 14px;
    box-shadow: none;
    cursor: pointer;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    list-style: none;
    min-height: 86px;
    padding: 16px 18px;
    position: relative;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

    .account-summary-card::-webkit-details-marker {
        display: none;
    }

    .account-summary-card::before {
        background: linear-gradient(180deg, #2563eb 0%, #93c5fd 100%);
        border-radius: 999px;
        content: "";
        height: calc(100% - 26px);
        left: 0;
        position: absolute;
        top: 13px;
        width: 4px;
    }

    .account-summary-card:hover,
    .account-summary-card:focus-visible {
        border-color: #93c5fd;
        box-shadow: 0 16px 30px rgba(37, 99, 235, .12);
        outline: none;
        transform: translateY(-1px);
    }

.account-result-accordion[open] > .account-summary-card {
    background: linear-gradient(135deg, #f8fbff 0%, #eff6ff 100%);
    border-color: #93c5fd;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .11);
}

.account-summary-card strong {
    color: #0f172a;
    display: block;
    font-size: 26px;
    line-height: 1;
    margin-bottom: 6px;
}

.account-summary-card span:not(.account-accordion-indicator) {
    color: #17324d;
    display: block;
    font-size: 14px;
    font-weight: 900;
}

.account-summary-card small {
    color: #64748b;
    display: block;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 5px;
}

.account-accordion-indicator {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1d4ed8;
    display: inline-flex;
    font-size: 18px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    width: 34px;
}

    .account-accordion-indicator::before {
        content: "+";
    }

.account-result-accordion[open] .account-accordion-indicator {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
    transform: rotate(180deg);
}

    .account-result-accordion[open] .account-accordion-indicator::before {
        content: "−";
    }

.account-section-intro {
    border-bottom: 1px solid #e5edf7;
    margin: 18px 0 12px;
    padding: 0 4px 12px;
}

    .account-section-intro p {
        color: #64748b;
        margin: 0;
    }

.account-result-accordion[open] > :not(summary) {
    animation: accountAccordionOpen .18s ease-out;
}

@keyframes accountAccordionOpen {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.account-summary-strip strong {
    color: #0f172a;
    font-size: 30px;
    line-height: 1;
}

.account-summary-strip span {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.account-summary-strip small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.account-summary-help {
    cursor: help;
}

    .account-summary-help:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .16), 0 10px 22px rgba(15, 23, 42, .045);
        outline: none;
    }

    .account-summary-help em {
        background: #0f172a;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 8px;
        bottom: calc(100% + 10px);
        box-shadow: 0 18px 36px rgba(15, 23, 42, .24);
        color: #fff;
        font-size: 12px;
        font-style: normal;
        font-weight: 800;
        left: 16px;
        line-height: 1.45;
        max-width: min(300px, calc(100vw - 42px));
        opacity: 0;
        padding: 10px 12px;
        pointer-events: none;
        position: absolute;
        transform: translateY(4px);
        transition: opacity .16s ease, transform .16s ease;
        z-index: 40;
    }

    .account-summary-help:hover em,
    .account-summary-help:focus em {
        opacity: 1;
        transform: translateY(0);
    }

.account-option-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-option-card {
    background: #fff;
    border: 1px solid #d8e2ef;
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .05);
    color: #0f172a;
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 104px;
    padding: 18px;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

    .account-option-card:hover {
        border-color: var(--primary);
        box-shadow: 0 16px 30px rgba(37, 99, 235, .12);
        transform: translateY(-1px);
    }

.account-option-number {
    align-items: center;
    background: #eff6ff;
    border-radius: 8px;
    color: var(--primary-dark);
    display: inline-flex;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.account-option-card strong {
    display: block;
    font-size: 17px;
    line-height: 1.25;
    margin-bottom: 6px;
}

.account-option-card small {
    color: #64748b;
    font-weight: 700;
}

.account-option-arrow {
    align-self: start;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    padding: 6px 9px;
    text-transform: uppercase;
}

.account-result-section {
    padding: clamp(12px, 1.6vw, 18px);
}

.account-result-accordion {
    overflow: hidden;
}

.account-result-section .section-title {
    align-items: end;
    border-bottom: 1px solid #e5edf7;
    cursor: pointer;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    position: relative;
}

.account-result-accordion:not([open]) .section-title {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.account-result-section .section-title::-webkit-details-marker {
    display: none;
}

.account-result-section .section-title::after {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1d4ed8;
    content: "Open";
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 900;
    justify-content: center;
    letter-spacing: .05em;
    min-width: 68px;
    padding: 7px 10px;
    text-transform: uppercase;
}

.account-result-accordion[open] .section-title::after {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
    content: "Close";
}

.account-result-section .section-title:hover::after,
.account-result-section .section-title:focus::after {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.account-result-section .section-title h2 {
    font-size: clamp(21px, 1.8vw, 26px);
    margin-bottom: 6px;
}

.account-result-section .section-title p {
    color: #64748b;
    margin: 0;
    max-width: 620px;
    text-align: right;
}

.section-kicker {
    color: var(--primary-dark);
    display: inline-block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.account-table-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.account-result-table {
    background: transparent;
    border-collapse: collapse;
    display: grid;
    min-width: 0;
    width: 100%;
}

    .account-result-table th {
        display: none;
    }

    .account-result-table td {
        background: transparent;
        border: 0;
        color: #17324d;
        font-size: 14px;
        line-height: 1.45;
        padding: 0;
        vertical-align: top;
    }

        .account-result-table td:first-child {
            border-left: 0;
            border-radius: 0;
        }

        .account-result-table td:last-child {
            border-right: 0;
            border-radius: 0;
        }

    .account-result-table thead,
    .account-result-table tbody {
        display: grid;
        gap: 10px;
    }

        .account-result-table tbody tr {
            align-items: start;
            background:
                radial-gradient(circle at left center, rgba(37, 99, 235, .055), transparent 30%),
                #fff;
            border: 0;
            border-radius: 18px;
            box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
            display: grid;
            gap: 12px;
            padding: 16px 18px;
        }

.account-free-result-table tbody tr {
    grid-template-columns: 96px 118px 118px minmax(260px, 1fr) 118px minmax(180px, 220px);
}

.account-service-request-table tbody tr {
    grid-template-columns: 86px 118px minmax(120px, 1fr) minmax(88px, .7fr) minmax(140px, 1.1fr) 70px minmax(120px, .8fr);
}

.account-repair-result-table tbody tr {
    grid-template-columns: 86px 118px minmax(96px, .7fr) minmax(140px, 1fr) minmax(120px, .8fr) minmax(160px, 1.2fr);
}

.account-result-table td::before {
    color: #64748b;
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.account-code-pill {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1d4ed8;
    display: inline-block;
    font-size: 12px;
    font-weight: 900;
    padding: 4px 10px;
}

.account-code-display {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    color: #047857;
    cursor: help;
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
    padding: 7px 12px;
    position: relative;
}

    .account-code-display:hover,
    .account-code-display:focus {
        background: #d1fae5;
        border-color: #6ee7b7;
        color: #065f46;
        outline: none;
    }

.account-code-tooltip {
    background: #fff;
    border: 1px solid #cfe0f5;
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
    color: #17324d;
    font-size: 12px;
    font-weight: 800;
    left: 0;
    line-height: 1.45;
    min-width: 220px;
    opacity: 0;
    padding: 10px 12px;
    pointer-events: none;
    position: absolute;
    top: calc(100% + 10px);
    transform: translateY(4px);
    transition: opacity .16s ease, transform .16s ease;
    z-index: 20;
}

    .account-code-tooltip::before {
        background: #fff;
        border-left: 1px solid #cfe0f5;
        border-top: 1px solid #cfe0f5;
        content: "";
        height: 10px;
        left: 18px;
        position: absolute;
        top: -6px;
        transform: rotate(45deg);
        width: 10px;
    }

.account-code-display:hover .account-code-tooltip,
.account-code-display:focus .account-code-tooltip {
    opacity: 1;
    transform: translateY(0);
}

.account-issue-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    max-width: none;
}

    .account-issue-list span {
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        color: #17324d;
        display: inline-flex;
        font-size: 12px;
        font-weight: 800;
        justify-content: center;
        line-height: 1.25;
        min-width: 112px;
        padding: 6px 9px;
    }

.account-issue-context {
    background: rgba(248, 250, 252, .86);
    border-left: 3px solid #2563eb;
    border-radius: 12px;
    color: #475569;
    display: grid;
    gap: 3px;
    margin-top: 10px;
    max-width: 520px;
    padding: 10px 12px;
}

    .account-issue-context strong {
        color: #0f172a;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .account-issue-context span {
        font-size: 13px;
        line-height: 1.45;
    }

.account-request-type {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1d4ed8;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    padding: 7px 11px;
}

.account-muted-value {
    color: #64748b;
    font-weight: 700;
}

.diagnostic-read-link {
    align-items: center;
    background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
    border: 1px solid #bdd7ff;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .08);
    color: #17324d;
    cursor: pointer;
    display: inline-grid;
    gap: 2px;
    min-width: 0;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

    .diagnostic-read-link:hover {
        border-color: #2563eb;
        box-shadow: 0 12px 24px rgba(37, 99, 235, .16);
        transform: translateY(-1px);
    }

    .diagnostic-read-link:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
        outline: none;
    }

    .diagnostic-read-link span {
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

.diagnostic-read-link strong {
        color: #1d4ed8;
        font-size: 14px;
        line-height: 1.25;
    }

.diagnostic-video-link {
    align-items: center;
    background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    border: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .75), 0 10px 22px rgba(15, 118, 110, .08);
    color: #0f766e;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    transition: box-shadow .16s ease, transform .16s ease, background-color .16s ease;
    white-space: nowrap;
}

    .diagnostic-video-link:hover,
    .diagnostic-video-link:focus {
        background: #ccfbf1;
        box-shadow: inset 0 0 0 1px #0f766e, 0 14px 28px rgba(15, 118, 110, .16);
        outline: none;
        transform: translateY(-1px);
    }

.diagnostic-video-empty {
    background: #f8fafc;
    border-radius: 999px;
    color: #64748b;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    padding: 8px 12px;
}

.diagnostic-result-dialog {
    border: 1px solid #d8e2ef;
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
    color: #0f172a;
    max-width: min(760px, calc(100vw - 32px));
    padding: 0;
    width: 760px;
}

    .diagnostic-result-dialog::backdrop {
        background: rgba(15, 23, 42, .52);
    }

.diagnostic-dialog-header {
    align-items: start;
    background: linear-gradient(135deg, #ffffff 0%, #f3f7fc 100%);
    border-bottom: 1px solid #e5edf7;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 22px 24px 18px;
}

    .diagnostic-dialog-header h3 {
        font-size: clamp(22px, 2.2vw, 30px);
        margin: 0;
    }

.diagnostic-dialog-close {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.diagnostic-dialog-meta {
    background: #eff6ff;
    border-bottom: 1px solid #dbeafe;
    color: #17324d;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 24px;
}

    .diagnostic-dialog-meta span {
        font-size: 13px;
        font-weight: 800;
    }

.diagnostic-dialog-body {
    display: grid;
    gap: 14px;
    max-height: min(52vh, 520px);
    overflow-y: auto;
    padding: 24px;
}

    .diagnostic-dialog-body p {
        color: #24364b;
        font-size: 15px;
        line-height: 1.7;
        margin: 0;
    }

.diagnostic-dialog-actions {
    border-top: 1px solid #e5edf7;
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px 20px;
}

.account-empty-state {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #475569;
    padding: 20px;
}

    .account-empty-state strong {
        color: #0f172a;
        display: block;
        font-size: 17px;
        margin-bottom: 6px;
    }

    .account-empty-state p {
        margin: 0;
    }

.account-email-confirmation {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #17324d;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
}

/* Modern CustomerDashboard refresh.
   These overrides keep the accessible table markup but present the homeowner data as
   clean service-record cards, avoiding the old bordered-table look on desktop, tablet, and mobile. */
.customer-account-shell {
    gap: 22px;
    max-width: 1500px;
}

.customer-account-hero,
.account-result-section {
    border: 0;
    border-radius: 24px;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .075);
}

.customer-account-hero {
    background:
        radial-gradient(circle at 5% 12%, rgba(37, 99, 235, .13), transparent 31%),
        radial-gradient(circle at 96% 14%, rgba(14, 165, 233, .10), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, .98) 0%, rgba(244, 249, 255, .94) 100%);
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, 560px);
}

.customer-account-hero::after {
    opacity: .45;
}

.customer-account-hero h1 {
    font-size: clamp(34px, 3vw, 52px);
}

.account-hero-badges span,
.account-secure-note {
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(191, 219, 254, .72);
}

.customer-account-actions {
    border: 0;
    border-radius: 22px;
}

.account-action-card {
    border: 0;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.account-action-card:hover,
.account-action-card:focus {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .72), 0 12px 24px rgba(15, 23, 42, .22);
}

/* Homeowner guidance cards explain the dashboard without adding table-heavy UI.
   They are intentionally compact so the saved records remain the main working area. */
.account-guidance-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-guidance-card {
    align-items: flex-start;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .96) 0%, rgba(248, 251, 255, .88) 100%),
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .10), transparent 42%);
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .055);
    display: flex;
    gap: 14px;
    min-height: 132px;
    padding: 18px;
}

.account-guidance-icon {
    align-items: center;
    background: #eff6ff;
    border-radius: 14px;
    color: #1d4ed8;
    display: inline-flex;
    flex: 0 0 46px;
    font-size: 13px;
    font-weight: 900;
    height: 46px;
    justify-content: center;
}

.account-guidance-card h2 {
    font-size: 17px;
    line-height: 1.25;
    margin: 1px 0 8px;
}

.account-guidance-card p {
    color: #475569;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.account-metric-strip {
    background: transparent;
    border: 0;
    box-shadow: none;
    gap: 12px;
    overflow: visible;
}

.account-metric-item {
    background: rgba(255, 255, 255, .9);
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .055);
    min-height: 92px;
    padding: 18px 20px;
}

.account-metric-item::after {
    background: linear-gradient(180deg, #2563eb, rgba(37, 99, 235, .16));
    border-radius: 999px;
    content: "";
    height: calc(100% - 28px);
    left: 0;
    position: absolute;
    top: 14px;
    width: 4px;
}

.account-metric-item + .account-metric-item {
    border-left: 0;
}

.account-result-section {
    background: rgba(255, 255, 255, .84);
    padding: clamp(14px, 1.6vw, 22px);
}

.account-summary-card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .96) 0%, rgba(248, 251, 255, .9) 100%),
        radial-gradient(circle at 96% 18%, rgba(37, 99, 235, .12), transparent 36%);
    border: 0;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(191, 219, 254, .62);
    padding: 18px 20px;
}

.account-summary-card:hover,
.account-summary-card:focus-visible,
.account-result-accordion[open] > .account-summary-card {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .58), 0 18px 36px rgba(37, 99, 235, .12);
}

.account-summary-meta {
    color: #475569 !important;
    display: inline-flex !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    margin-top: 8px;
    text-transform: none !important;
}

.account-section-intro {
    border-bottom: 0;
    margin: 20px 4px 14px;
    padding: 0;
}

/* CustomerDashboard category details use a contained scroll area for large histories.
   This keeps each accordion section professional and readable without making the full
   account page extremely long when a homeowner has many saved diagnostics or requests. */
.account-result-section .account-table-wrap {
    max-height: min(620px, 68vh);
    overflow-y: auto;
    padding: 2px 8px 2px 2px;
    scrollbar-color: #94a3b8 transparent;
    scrollbar-width: thin;
}

.account-result-section .account-table-wrap::-webkit-scrollbar {
    width: 8px;
}

.account-result-section .account-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.account-result-section .account-table-wrap::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
    border-radius: 999px;
}

.account-result-section .account-table-wrap::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #94a3b8, #64748b);
}

.account-result-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.account-result-table thead tr {
    backdrop-filter: blur(10px);
    background: rgba(248, 251, 255, .94);
    border-radius: 14px;
}

.account-result-table tbody tr {
    background:
        linear-gradient(90deg, rgba(37, 99, 235, .08), transparent 90px),
        rgba(255, 255, 255, .92);
    border: 0;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
    gap: 16px;
    padding: 16px 18px;
}

.account-result-table tbody tr:hover {
    box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.account-result-table td::before {
    color: #5f728a;
    margin-bottom: 6px;
}

.account-free-result-table tbody tr {
    grid-template-columns: 112px 132px 140px minmax(260px, 1fr) 132px minmax(210px, 240px);
}

.account-issue-list {
    align-content: start;
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(auto-fit, minmax(130px, max-content));
    max-width: 100%;
}

.account-issue-list span {
    background: rgba(239, 246, 255, .9);
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(191, 219, 254, .75);
    justify-content: center;
}

.account-request-type,
.account-code-display {
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(191, 219, 254, .75);
}

.diagnostic-read-link {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
    border: 0;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .75), 0 10px 22px rgba(37, 99, 235, .08);
    padding: 12px 15px;
}

.diagnostic-read-link:hover,
.diagnostic-read-link:focus {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px #2563eb, 0 14px 28px rgba(37, 99, 235, .16);
}

.diagnostic-result-dialog {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
}

.account-video-help-grid {
    display: grid;
    gap: 16px;
    padding: 20px 24px 24px;
}

.account-video-help-card {
    align-items: center;
    background: linear-gradient(135deg, #ffffff, #f8fbff);
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(203, 213, 225, .68), 0 16px 36px rgba(15, 23, 42, .08);
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
    padding: 18px;
}

    .account-video-help-card span,
    .account-dialog-video-summary > span {
        color: #0f766e;
        display: inline-block;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .07em;
        margin-bottom: 6px;
        text-transform: uppercase;
    }

    .account-video-help-card h4 {
        color: #0f172a;
        font-size: 20px;
        line-height: 1.2;
        margin: 0;
    }

    .account-video-help-card p,
    .account-dialog-video-summary p {
        color: #475569;
        line-height: 1.55;
        margin: 8px 0 0;
    }

    .account-video-help-card video,
    .account-video-help-card img,
    .account-dialog-video-summary video,
    .account-dialog-video-summary img {
        background: #0f172a;
        border-radius: 14px;
        box-shadow: 0 14px 28px rgba(15, 23, 42, .14);
        display: block;
        object-fit: cover;
        width: 100%;
    }

.account-dialog-video-summary {
    background: linear-gradient(135deg, #f8fbff, #f0fdfa);
    border-radius: 18px;
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding: 16px;
}

    .account-dialog-video-summary article {
        align-items: center;
        display: grid;
        gap: 14px;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    }

    .account-dialog-video-summary strong {
        color: #0f172a;
        display: block;
        font-size: 16px;
    }

.account-empty-state {
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    border: 0;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(203, 213, 225, .7);
}

/* Logged-in welcome badge shown in the top header */
.welcome-badge {
    background: transparent;
    border: 0;
    color: #0f2d4d;
    padding: 0;
    border-radius: 0;
    font-weight: 800;
    font-size: 14px;
}

/* ==============================================================================
   PROJECT-WIDE MOBILE PROFESSIONAL RESPONSIVE LAYER
   ==============================================================================
   This final section intentionally sits at the end of the stylesheet so it can
   override older desktop-first rules. The goal is to make BrijjPro look polished on
   cellphone browsers while preserving the wider desktop design.
   ============================================================================== */
@media (max-width: 768px) {
    /* The root custom property centralizes mobile page padding so cards, forms,
       tables, and homepage sections all use the same readable screen margin. */
    :root {
        --mobile-page-gutter: 14px;
    }

    /* Prevents any large card, image, or table from forcing sideways scrolling on phones. */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Tightens the global page container from desktop width to true phone width. */
    .container {
        width: calc(100% - (var(--mobile-page-gutter) * 2));
    }

    /* Reduces the vertical white space that made phone pages feel stretched and unfinished. */
    .page-body {
        padding: 18px 0 34px;
    }

    /* Keeps the branded header compact enough for mobile without hiding important links. */
    .topbar {
        padding: 10px 0 12px;
    }

    /* Mobile header becomes a compact business-style block with centered brand and controlled nav rows. */
    .nav-wrap {
        align-items: center;
        flex-direction: column;
        gap: 10px;
    }

    /* Shrinks the logo from desktop size while keeping brand recognition clear. */
    .brand-link {
        border-radius: 14px;
        min-height: 46px;
        padding: 5px 10px;
    }

    .brand-logo {
        height: 46px;
    }

    .brand-wordmark {
        font-size: 30px;
    }

    /* Turns the top navigation into compact centered chips that wrap cleanly across phone widths. */
    .nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        justify-content: center;
        width: 100%;
    }

        /* Removes desktop spacing and gives each nav item a restrained tap target. */
        .nav-links a,
        .welcome-badge {
            background: rgba(37, 99, 235, 0.08);
            border: 1px solid rgba(37, 99, 235, .12);
            border-radius: 999px;
            color: #111827;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.2;
            margin-left: 0;
            padding: 8px 11px;
            white-space: nowrap;
        }

        .welcome-badge {
            background: transparent;
            border-color: transparent;
            color: #0f2d4d;
        }

    /* Uses full-width cards with smaller radius/padding so mobile screens feel more business-like. */
    .card,
    .hero-card,
    .precheck-card {
        border-radius: 12px;
        padding: 18px;
    }

    /* Keeps common headings readable without creating huge vertical blocks on phones. */
    h1 {
        font-size: clamp(28px, 8vw, 38px);
        line-height: 1.12;
    }

    h2 {
        font-size: clamp(24px, 6vw, 32px);
        line-height: 1.16;
    }

    h3 {
        font-size: clamp(19px, 5vw, 24px);
        line-height: 1.2;
    }

    /* All normal two-, three-, and four-column layouts collapse to a single readable column.
       Home-specific sections are handled separately below because those read better as swipe rows. */
    .hero-grid,
    .grid-2,
    .grid-3,
    .stats-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    /* Button groups can stretch on mobile forms, but standalone CTAs should stay button-sized. */
    .button-row .btn {
        text-align: center;
        width: 100%;
    }

    /* Button groups become vertical stacks so labels never squeeze or wrap awkwardly. */
    .button-row {
        align-items: stretch;
        flex-direction: column;
    }

    /* Forms use a minimum touch target that is comfortable on mobile browsers. */
    .input,
    select.input,
    textarea.input {
        font-size: 16px;
        min-height: 46px;
    }

    /* Data tables often contain many columns, so they get horizontal scrolling instead of breaking the page. */
    .table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* The footer becomes a compact stacked layout with centered content on mobile. */
    .site-footer {
        margin-top: 34px;
        padding: 30px 0 34px;
        text-align: center;
    }

    /* Footer columns keep stronger rhythm on phone screens instead of feeling like large unrelated blocks. */
    .footer-grid {
        gap: 28px;
    }

    .intake-page-shell {
        width: 100%;
    }

    .intake-hero,
    .intake-form-panel {
        border-radius: 10px;
        padding: 22px;
    }

    .intake-hero,
    .intake-grid,
    .intake-upload-panel {
        grid-template-columns: 1fr;
    }

    .intake-wide-field {
        grid-column: auto;
    }

    .intake-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .intake-choice-row label,
    .intake-submit-row .btn {
        width: 100%;
    }

    .intake-submit-row {
        justify-content: stretch;
    }

    .upload-selected-item {
        align-items: stretch;
        flex-direction: column;
    }

    .upload-remove-btn {
        width: 100%;
    }

    .footer-section h3 {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .footer-section p,
    .footer-links a,
    .footer-copy {
        font-size: 15px;
        line-height: 1.45;
    }

    .footer-links li {
        margin-bottom: 8px;
    }

    /* Social buttons stay centered after the footer stacks. */
    .social-icons {
        gap: 10px;
        justify-content: center;
    }

    .social-btn {
        font-size: 16px;
        height: 38px;
        width: 38px;
    }

    /* Newsletter controls stack so the email input and signup button remain usable on narrow screens. */
    .newsletter-box {
        display: grid;
        gap: 9px;
        justify-items: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 360px;
    }

        /* The newsletter email input remains wide because typing needs comfortable space on phones. */
        .newsletter-box input {
            min-height: 42px;
            width: 100%;
        }

        /* The footer Sign Up button stays compact so it looks like a normal action, not a full-width form bar. */
        .newsletter-box button {
            border-radius: 10px;
            cursor: pointer;
            min-height: 42px;
            min-width: 118px;
            padding: 10px 18px;
            width: auto;
        }

    /* Full service pages need their own mobile footer override because the desktop
       three-column footer selector is more specific than the shared mobile grid rule. */
    .site-footer:not(.site-footer-compact) {
        margin-top: 24px;
        padding: 22px 0 24px;
        overflow: hidden;
    }

        /* Stack full-service footer sections into one clean column on cellphone browsers
       so Follow Us, Quick Links, and Stay Connected never collide. */
        .site-footer:not(.site-footer-compact) .footer-grid {
            align-items: center;
            display: grid;
            gap: 18px;
            grid-template-columns: 1fr;
            justify-items: center;
            max-width: 390px;
            width: calc(100% - 36px);
        }

        /* Reset desktop grid placement for each full-service footer column on phones. */
        .site-footer:not(.site-footer-compact) .footer-section:first-child,
        .site-footer:not(.site-footer-compact) .footer-section:nth-child(2),
        .site-footer:not(.site-footer-compact) .footer-section:last-child {
            grid-column: auto;
            grid-row: auto;
            justify-self: center;
            max-width: 100%;
            text-align: center;
            width: 100%;
        }

        /* Mobile footer headings and links stay compact enough for business polish while
       remaining easy to tap on cellphone browsers. */
        .site-footer:not(.site-footer-compact) .footer-section h3 {
            font-size: 16px;
            margin-bottom: 8px;
        }

        .site-footer:not(.site-footer-compact) .footer-links {
            gap: 7px 18px;
            grid-template-columns: repeat(2, max-content);
            justify-content: center;
        }

            .site-footer:not(.site-footer-compact) .footer-links a,
            .site-footer:not(.site-footer-compact) .footer-section p,
            .site-footer:not(.site-footer-compact) .footer-copy {
                font-size: 12px;
                line-height: 1.3;
            }

        .site-footer:not(.site-footer-compact) .footer-copy {
            margin-top: 8px;
        }

        .site-footer:not(.site-footer-compact) .newsletter-box {
            max-width: 300px;
            width: 100%;
        }

    /* On the beginning page, keep the footer even tighter on phones because service search is the main action. */
    .site-footer-compact {
        margin-top: 18px;
        padding: 18px 0 16px;
    }

        .site-footer-compact .footer-grid {
            gap: 12px;
            grid-template-columns: 1fr;
            max-width: 360px;
            width: calc(100% - 28px);
        }

        .site-footer-compact .footer-section:first-child,
        .site-footer-compact .footer-section:nth-child(2),
        .site-footer-compact .footer-copy-section {
            grid-column: auto;
            grid-row: auto;
            justify-self: center;
        }

        .site-footer-compact .footer-section h3 {
            font-size: 14px;
            margin-bottom: 6px;
        }

        .site-footer-compact .footer-section p,
        .site-footer-compact .footer-links a,
        .site-footer-compact .footer-copy {
            font-size: 12px;
            line-height: 1.3;
        }

        .site-footer-compact .social-btn {
            font-size: 13px;
            height: 32px;
            width: 32px;
        }

    .customer-account-hero {
        align-items: stretch;
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .customer-account-shell {
        gap: 14px;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
        width: 100%;
    }

    .customer-account-hero h1 {
        font-size: clamp(28px, 8vw, 36px);
        max-width: 100%;
    }

    .account-hero-badges {
        gap: 7px;
    }

        .account-hero-badges span {
            font-size: 11px;
            padding: 7px 9px;
        }

    .customer-account-actions {
        align-items: stretch;
        padding: 18px;
    }

    .account-action-grid {
        grid-template-columns: 1fr;
    }

    .account-action-card.primary {
        grid-column: auto;
    }

    .account-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-metric-item {
        min-height: 74px;
        padding: 14px;
    }

        .account-metric-item + .account-metric-item {
            border-left: 0;
        }

        .account-metric-item:nth-child(even) {
            border-left: 1px solid #e6edf7;
        }

        .account-metric-item:nth-child(n + 3) {
            border-top: 1px solid #e6edf7;
        }

        .account-metric-item strong {
            font-size: 23px;
        }

    .account-summary-overview {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .account-summary-strip div {
        min-height: 72px;
        padding: 14px;
    }

    .account-summary-card {
        min-height: 76px;
        padding: 15px 16px;
    }

        .account-summary-card strong {
            font-size: 24px;
        }

    .account-accordion-indicator {
        height: 32px;
        width: 32px;
    }

    .account-summary-strip strong {
        font-size: 24px;
    }

    .account-summary-strip span {
        font-size: 11px;
    }

    .account-summary-strip small {
        font-size: 11px;
    }

    .account-option-grid {
        grid-template-columns: 1fr;
    }

    .account-option-card {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 18px;
    }

    .account-option-arrow {
        grid-column: 2;
        justify-self: start;
    }

    .account-result-section .section-title {
        align-items: start;
        flex-direction: column;
        gap: 6px;
    }

        .account-result-section .section-title::after {
            margin-top: 8px;
        }

        .account-result-section .section-title p {
            text-align: left;
        }

    .account-table-wrap {
        border: 0;
        box-shadow: none;
        overflow: visible;
    }

    /* CustomerDashboard tables become stacked result cards on phones.
       This avoids hidden columns and keeps the account page usable without sideways page dragging. */
    .account-result-table {
        display: grid;
        min-width: 0;
        overflow: visible;
        white-space: normal;
        width: 100%;
    }

        .account-result-table thead {
            display: none;
        }

        .account-result-table tbody {
            display: grid;
            gap: 12px;
            width: 100%;
        }

        .account-result-table tr {
            background: #fff;
            border: 1px solid #d8e2ef;
            border-radius: 8px;
            box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
            display: grid;
            gap: 0;
            grid-template-columns: 1fr !important;
            overflow: visible;
            padding: 12px;
            width: 100%;
        }

        .account-result-table td {
            align-items: start;
            border: 0;
            border-bottom: 1px solid #edf2f7;
            display: grid;
            gap: 8px;
            grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
            padding: 10px 0;
            white-space: normal;
            width: 100%;
        }

            .account-result-table td:last-child {
                border-bottom: 0;
            }

            .account-result-table td::before {
                color: #64748b;
                content: attr(data-label);
                font-size: 11px;
                font-weight: 900;
                letter-spacing: .05em;
                text-transform: uppercase;
            }

            .account-result-table td[data-label="Video Help"],
            .account-result-table td[data-label="Recommendation"] {
                grid-template-columns: 1fr;
            }

                .account-result-table td[data-label="Video Help"]::before,
                .account-result-table td[data-label="Recommendation"]::before {
                    margin-bottom: 2px;
                }

    .account-issue-list {
        max-width: 100%;
    }

    .account-issue-context {
        max-width: none;
    }

    .diagnostic-read-link {
        min-width: 0;
        width: 100%;
    }

    .diagnostic-video-link {
        justify-content: center;
        width: 100%;
    }

    .account-video-help-card,
    .account-dialog-video-summary article {
        grid-template-columns: 1fr;
    }

    .account-code-tooltip {
        left: 50%;
        max-width: min(260px, calc(100vw - 56px));
        min-width: 210px;
        transform: translate(-50%, 4px);
    }

    .account-code-display:hover .account-code-tooltip,
    .account-code-display:focus .account-code-tooltip {
        transform: translate(-50%, 0);
    }

    .diagnostic-dialog-header,
    .diagnostic-dialog-meta,
    .diagnostic-dialog-body,
    .diagnostic-dialog-actions {
        padding-left: 18px;
        padding-right: 18px;
    }

    .diagnostic-dialog-actions {
        justify-content: stretch;
    }

        .diagnostic-dialog-actions .btn {
            width: 100%;
        }

    /* The marketplace wrapper becomes a simple phone-width page instead of a desktop advertising grid. */
    .page-body:has(.home-marketplace-layout) {
        width: calc(100% - (var(--mobile-page-gutter) * 2));
    }

    /* Clean Home pages use the same phone gutters as the rest of the responsive site. */
    .page-body:has(.home-clean-layout) {
        width: calc(100% - (var(--mobile-page-gutter) * 2));
    }

    /* On phones, the beginning finder should start near the top instead of forcing a tall centered panel. */
    .page-body:has(.home-service-finder):not(:has(.home-clean-hero)) {
        align-items: start;
        padding-bottom: 24px;
        padding-top: 18px;
        width: calc(100% - (var(--mobile-page-gutter) * 2));
    }

    /* The clean Home layout stays vertical on phones because primary service content should not require sideways scrolling. */
    .home-clean-layout {
        gap: 22px;
    }

    .home-service-finder {
        padding: 30px 16px;
    }

    .service-search-panel {
        grid-template-columns: 1fr;
    }

    .service-search-input,
    .service-dropdown {
        border-radius: 16px;
        min-height: 50px;
    }

    .service-search-field,
    .service-select-field {
        border-radius: 18px;
        padding: 8px 12px;
    }

    .service-search-icon {
        top: 28px;
    }

    .service-property-types {
        border-radius: 16px;
        display: grid;
        grid-template-columns: 1fr;
    }

        .service-property-types legend {
            margin-bottom: 2px;
        }

    .service-property-option {
        justify-content: flex-start;
        width: 100%;
    }

    .service-finder-logo {
        max-width: min(240px, 72vw);
    }

    .service-suggestion-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .service-video-showcase {
        border-radius: 22px;
        padding: 14px;
    }

    .service-video-frame {
        border-radius: 18px;
        padding: 6px;
    }

    .service-media-carousel {
        gap: 10px;
    }

    .service-video-slide {
        border-radius: 20px;
        padding: 8px;
    }

    .service-video-player {
        border-radius: 14px;
    }

    /* All homepage areas stack in the natural reading order on phone browsers. */
    .home-marketplace-layout {
        gap: 18px;
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
    }

    /* The HVAC service hero uses a compact, app-like stack on phone browsers. */
    .hvac-hero-pro {
        border-radius: 16px;
        gap: 18px;
        margin-bottom: 12px;
        padding: 24px 18px;
    }

    .hvac-hero-copy h1 {
        font-size: clamp(30px, 8.2vw, 40px);
        line-height: 1.08;
        overflow-wrap: anywhere;
    }

    .hvac-hero-panel {
        border-radius: 18px;
        padding: 16px;
    }

    .hvac-panel-metric {
        padding: 12px;
    }

    .hvac-process-band {
        margin-top: 22px;
    }

    .hvac-process-heading {
        margin-bottom: 14px;
        text-align: left;
    }

    .hvac-process-line {
        display: grid;
        gap: 12px;
        grid-auto-columns: minmax(260px, 84%);
        grid-auto-flow: column;
        grid-template-columns: none;
        margin-left: calc(var(--mobile-page-gutter) * -1);
        margin-right: calc(var(--mobile-page-gutter) * -1);
        overflow-x: auto;
        padding: 0 var(--mobile-page-gutter) 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

        .hvac-process-line article {
            background: #fff;
            border: 1px solid #dbe6f3;
            border-radius: 14px;
            padding: 18px;
            scroll-snap-align: start;
        }

            .hvac-process-line article + article {
                border-left: 1px solid #dbe6f3;
                border-top: 1px solid #dbe6f3;
            }

    .hvac-support-panel {
        gap: 16px;
        grid-template-columns: 1fr;
        margin-top: 20px;
    }

    .hvac-support-copy {
        padding-top: 0;
    }

    .hvac-support-list {
        grid-template-columns: 1fr;
    }

        .hvac-support-list article:nth-child(odd),
        .hvac-support-list article:nth-child(even) {
            border-left: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .hvac-support-list article:nth-child(n+2) {
            border-top: 1px solid #e4edf8;
        }

    .hvac-proof-strip {
        border-radius: 14px;
        grid-template-columns: 1fr 1fr;
        margin-top: 20px;
    }

        .hvac-proof-strip div {
            padding: 18px 12px;
        }

            .hvac-proof-strip div:nth-child(odd) {
                border-left: 0;
            }

            .hvac-proof-strip div:nth-child(n+3) {
                border-top: 1px solid rgba(255, 255, 255, .1);
            }

    /* The mobile hero uses compact spacing and less-rounded corners for a cleaner app-like feel. */
    .home-hero {
        border-radius: 16px;
        gap: 22px;
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 22px;
        overflow: hidden;
        padding: 24px 18px;
    }

    /* The clean hero follows the one-column phone layout after the ad rails are removed. */
    .home-clean-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Every direct hero child must be allowed to shrink inside a narrow phone viewport. */
    .home-hero > * {
        min-width: 0;
    }

    /* The home eyebrow becomes a smaller badge instead of a large pill. */
    .home-eyebrow {
        font-size: 13px;
        padding: 8px 12px;
    }

    /* The main home headline is intentionally smaller than desktop to avoid dominating the whole phone screen. */
    .home-hero-content h1 {
        font-size: clamp(32px, 9vw, 42px);
        line-height: 1.08;
        margin: 14px 0;
        overflow-wrap: anywhere;
    }

    /* Body copy stays readable but no longer behaves like oversized desktop hero copy. */
    .home-hero-text {
        font-size: 17px;
        line-height: 1.55;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Trust notes become a compact vertical list on phones. */
    .home-trust-row {
        display: grid;
        font-size: 15px;
        gap: 10px;
    }

    /* The Home hero call-to-action stays button-sized; global mobile form rules make normal buttons full width. */
    .home-hero-actions .home-primary-btn,
    .home-hero-actions .home-secondary-btn {
        display: inline-flex;
        justify-content: center;
        min-height: 48px;
        width: auto;
    }

    /* The estimate flow card gets smaller radius and padding so it fits in one mobile viewport better. */
    .estimate-card {
        border-radius: 18px;
        max-width: 100%;
        min-width: 0;
        padding: 18px;
    }

    /* Estimate steps stack their number and text more tightly on narrow screens. */
    .estimate-step {
        gap: 12px;
        padding: 14px;
    }

        .estimate-step span {
            height: 34px;
            min-width: 34px;
            width: 34px;
        }

        .estimate-step strong {
            font-size: 16px;
            overflow-wrap: anywhere;
        }

        .estimate-step p {
            font-size: 14px;
            line-height: 1.45;
            overflow-wrap: anywhere;
        }

    /* Section headers are reduced so "How BrijjPro Works" does not consume an entire screen. */
    .section-title h2,
    .home-final-cta h2 {
        font-size: clamp(28px, 8vw, 36px);
    }

    .section-title p,
    .home-final-cta p {
        font-size: 16px;
        line-height: 1.5;
    }

    /* How-it-works becomes a horizontal swipe row on mobile.
       This shortens the Home page while still letting users review each step at a comfortable card width. */
    .home-steps-grid {
        display: grid;
        gap: 12px;
        grid-auto-columns: minmax(260px, 82%);
        grid-auto-flow: column;
        grid-template-columns: none;
        margin-left: calc(var(--mobile-page-gutter) * -1);
        margin-right: calc(var(--mobile-page-gutter) * -1);
        overflow-x: auto;
        padding: 0 var(--mobile-page-gutter) 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    /* Step cards become denser and easier to scan on mobile. */
    .home-step-card {
        border-radius: 14px;
        padding: 20px;
        scroll-snap-align: start;
    }

    .step-icon {
        height: 42px;
        margin-bottom: 12px;
        width: 42px;
    }

    .home-step-card h3 {
        font-size: 19px;
    }

    .home-step-card p {
        font-size: 15px;
    }

    /* Stats use two columns on phones so the section is compact but still readable. */
    .home-stats-strip {
        border-radius: 16px;
        grid-template-columns: 1fr 1fr;
        padding: 18px;
    }

        .home-stats-strip strong {
            font-size: 28px;
        }

    /* The final CTA stays prominent but no longer becomes a huge block. */
    .home-final-cta {
        border-radius: 16px;
        padding: 28px 18px;
    }

        /* The lower Home CTA stays compact and centered instead of becoming a full-width bar. */
        .home-final-cta .home-primary-btn {
            display: inline-flex;
            justify-content: center;
            min-height: 48px;
            min-width: 128px;
            width: auto;
        }

    /* Product rails are shown after the main content as compact marketplace lists on phones. */
    .home-product-rail {
        background: rgba(248, 250, 252, .96);
        border: 1px solid #d8e4f2;
        border-radius: 12px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
        padding: 12px;
    }

    /* The service product section receives a light card shell after the main BrijjPro workflow. */
    .home-mobile-product-section {
        background: rgba(248, 250, 252, .96);
        border: 1px solid #d8e4f2;
        border-radius: 16px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
        gap: 16px;
        padding: 18px 14px 14px;
    }

        .home-mobile-product-section .section-title {
            margin-bottom: 4px;
        }

            .home-mobile-product-section .section-title h2 {
                font-size: clamp(24px, 7vw, 32px);
            }

    .home-mobile-product-row {
        gap: 10px;
    }

    .home-mobile-product-row-header {
        border-top: 1px solid #dbe4f0;
        padding-top: 12px;
    }

    .home-mobile-product-row:first-of-type .home-mobile-product-row-header {
        border-top: 0;
        padding-top: 0;
    }

    /* Product lists become horizontal swipe carousels on phones.
       Affiliate-style content is secondary, so swipe rows keep it available without making the page too long. */
    .home-rail-sticky,
    .home-mobile-product-strip {
        display: grid;
        gap: 12px;
        grid-auto-columns: minmax(220px, 78%);
        grid-auto-flow: column;
        grid-template-columns: none;
        overscroll-behavior-x: contain;
        overflow-x: auto;
        padding-bottom: 10px;
        scroll-padding-inline: 8px;
        scroll-snap-stop: always;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    /* Rail titles stay pinned to the first row, while product cards scroll below them. */
    .home-rail-title {
        grid-column: 1 / -1;
        position: sticky;
        left: 0;
    }

    .home-product-offer {
        align-content: start;
        align-items: start;
        column-gap: 12px;
        grid-template-columns: 1fr;
        padding: 10px;
        scroll-snap-align: start;
    }

    .home-product-badge {
        grid-column: 1 / -1;
    }

    .home-product-image {
        aspect-ratio: 16 / 10;
        grid-row: auto;
        height: auto;
        object-fit: cover;
    }

    .home-product-offer strong {
        font-size: 15px;
    }

    .home-product-offer small {
        font-size: 13px;
    }

    .home-product-price {
        font-size: 16px;
    }

    /* PreCheck and diagnostic option grids use one column to prevent tiny squeezed answer choices. */
    .option-grid,
    .option-grid.compact,
    .diagnostic-grid {
        grid-template-columns: 1fr;
    }

    /* The PreCheck card uses page-edge-friendly spacing on phones. */
    .precheck-card {
        padding: 0;
    }

    .precheck-hero-pro {
        border-radius: 12px;
        padding: 24px 18px;
    }

    .precheck-form {
        padding: 0;
    }

    .precheck-hero-copy h1 {
        font-size: 32px;
    }

    .precheck-hero-panel {
        border-radius: 12px;
    }

    .precheck-section {
        margin-top: 16px;
        padding: 18px;
    }

        .precheck-section h2 {
            align-items: flex-start;
            flex-direction: column;
            font-size: 22px;
            gap: 4px;
        }

    .precheck-subsection h3 {
        font-size: 15px;
        line-height: 1.25;
    }

    .choice-option,
    .yes-no-row label {
        min-height: 48px;
    }
}

/* Tablet landscape and other short browser heights need a scroll-friendly start page.
   This prevents the centered beginning layout from being clipped when a user rotates the device. */
@media (max-height: 760px) and (max-width: 1280px) {
    .topbar {
        padding: 10px 0;
    }

    .brand-logo {
        height: 46px;
    }

    .brand-wordmark {
        font-size: 30px;
    }

    .page-body:has(.home-service-finder):not(:has(.home-clean-hero)) {
        align-items: center;
        justify-content: flex-start;
        padding-bottom: 18px;
        padding-top: 18px;
    }

    .home-service-finder {
        gap: 8px;
        padding-bottom: 20px;
        padding-top: 18px;
    }

    .service-finder-brand {
        font-size: clamp(42px, 8vh, 62px);
    }

    .service-finder-logo {
        max-width: min(220px, 70vw);
    }

    .service-finder-wordmark {
        font-size: clamp(38px, 7vh, 56px);
    }

    .home-service-finder h1 {
        font-size: clamp(26px, 5vh, 36px);
    }

    .home-service-finder p {
        font-size: 15px;
    }

    .service-search-panel {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 8px;
        max-width: min(100%, 900px);
    }

    .site-footer-compact {
        margin-top: 14px;
        padding-bottom: 12px;
        padding-top: 20px;
    }
}

@media (max-width: 420px) {
    /* Very small phones need slightly tighter gutters so content does not feel squeezed. */
    :root {
        --mobile-page-gutter: 10px;
    }

    /* Keeps the logo and nav chips from making the header feel like half the page. */
    .brand-link {
        min-height: 42px;
        padding: 4px 9px;
    }

    .brand-logo {
        height: 40px;
    }

    .brand-wordmark {
        font-size: 27px;
    }

    .nav-links a,
    .welcome-badge {
        font-size: 12px;
        padding: 7px 9px;
    }

    /* Reduces homepage hero typography one more step for narrow Android and iPhone widths. */
    .home-hero-content h1 {
        font-size: clamp(30px, 8.4vw, 36px);
    }

    .home-hero-text {
        font-size: 15px;
    }

    /* Final narrow-phone guard for the clean Home layout so text never clips at the right edge. */
    .home-clean-layout,
    .home-clean-layout .home-clean-hero,
    .home-clean-layout .home-hero-content,
    .home-clean-layout .home-hero-visual,
    .home-clean-layout .estimate-card,
    .home-clean-layout .home-hero-text {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    /* Narrow phones still get swipeable cards, but with a smaller card width. */
    .home-steps-grid,
    .home-rail-sticky,
    .home-mobile-product-strip {
        grid-auto-columns: minmax(208px, 76%);
    }

    /* Two-column stats still fit on small screens when spacing is tightened. */
    .home-stats-strip {
        gap: 10px;
    }
}

/* ==============================================================================
   Modern Account Pages
   ==============================================================================
   These styles give login, account-type selection, registration, and success pages
   a consistent business-facing BrijjPro design. The layouts keep customer and
   contractor flows visually related while remaining responsive for phones/tablets.
   ============================================================================== */
.account-auth-shell,
.account-choice-shell,
.account-registration-shell,
.account-success-shell {
    margin: 0 auto;
    max-width: 1180px;
    width: min(1180px, 100%);
}

.account-auth-shell {
    align-items: stretch;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .75fr);
}

.account-auth-hero,
.account-auth-card,
.account-choice-shell,
.account-registration-card,
.account-success-card {
    background: linear-gradient(135deg, #ffffff, #f7fbff);
    border: 1px solid #d8e4f2;
    border-radius: 18px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, .08);
}

.account-auth-hero {
    min-height: 460px;
    padding: clamp(32px, 5vw, 68px);
}

    .account-auth-hero h1,
    .account-choice-header h1,
    .account-registration-header h1,
    .account-success-card h1 {
        color: #071427;
        font-size: clamp(32px, 4.4vw, 58px);
        line-height: 1.03;
        margin: 12px 0 16px;
    }

    .account-auth-hero p,
    .account-choice-header p,
    .account-registration-header p,
    .account-success-card p {
        color: #314761;
        font-size: 17px;
        line-height: 1.65;
        max-width: 720px;
    }

.account-auth-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

    .account-auth-badges span,
    .account-kicker,
    .account-choice-icon,
    .account-id-card span {
        background: #eaf3ff;
        border-radius: 999px;
        color: #0b54d9;
        display: inline-flex;
        font-size: 12px;
        font-weight: 800;
        padding: 8px 12px;
    }

.account-auth-card {
    align-self: center;
    padding: clamp(24px, 3.5vw, 38px);
}

.account-auth-card-header h2 {
    color: #071427;
    font-size: 28px;
    line-height: 1.1;
    margin: 12px 0 6px;
}

.account-auth-card-header p {
    color: #667085;
    line-height: 1.5;
    margin: 0 0 22px;
}

.account-alert {
    border-radius: 12px;
    font-weight: 700;
    line-height: 1.45;
    margin: 16px 0;
    padding: 14px 16px;
}

.account-alert-danger {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #9f1239;
}

.account-alert-success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

.account-form {
    display: grid;
    gap: 18px;
}

.account-field label,
.account-registration-form label {
    color: #10243e;
    display: block;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 8px;
}

.account-submit {
    justify-content: center;
    min-height: 48px;
    width: 100%;
}

.account-link-note {
    color: #5c6f86;
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

    .account-link-note a {
        color: #0b54d9;
        font-weight: 800;
    }

.account-choice-shell {
    padding: clamp(28px, 5vw, 56px);
    text-align: center;
}

.account-choice-header {
    margin: 0 auto;
    max-width: 780px;
}

    .account-choice-header h1 {
        font-size: clamp(32px, 4vw, 48px);
    }

    .account-choice-header p {
        margin-left: auto;
        margin-right: auto;
    }

.account-type-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 30px;
}

.account-choice {
    background: #ffffff;
    border: 1px solid #d8e4f2;
    border-radius: 16px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .06);
    color: inherit;
    cursor: pointer;
    min-height: 230px;
    padding: 28px;
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

    .account-choice:hover,
    .account-choice:focus-visible {
        border-color: #7db2ff;
        box-shadow: 0 22px 44px rgba(37, 99, 235, .16);
        outline: none;
        transform: translateY(-3px);
    }

    .account-choice h2 {
        color: #071427;
        font-size: 24px;
        margin: 18px 0 10px;
    }

    .account-choice p {
        color: #52667f;
        line-height: 1.55;
        margin: 0 0 18px;
    }

    .account-choice strong {
        color: #0b54d9;
        display: inline-flex;
        font-size: 14px;
    }

.account-registration-card,
.account-success-card {
    margin: 0 auto;
    max-width: 1180px;
    padding: clamp(24px, 4vw, 46px);
}

.account-registration-header {
    border-bottom: 1px solid #e3edf8;
    margin-bottom: 24px;
    padding-bottom: 22px;
}

    .account-registration-header h1,
    .account-success-card h1 {
        font-size: clamp(30px, 3.5vw, 44px);
    }

.account-registration-form .grid-2 {
    gap: 18px;
}

.account-registration-form .input,
.account-form .input {
    background: #fbfdff;
    border-color: #cddbed;
    min-height: 46px;
}

    .account-registration-form .input:focus,
    .account-form .input:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
        outline: none;
    }

.account-registration-form .password-field {
    position: relative;
}

.account-registration-form .password-eye {
    align-items: center;
    background: #eef5ff;
    border-radius: 999px;
    color: #0b54d9;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    height: 32px;
    justify-content: center;
    position: absolute;
    right: 8px;
    top: 7px;
    width: 40px;
}

/* Admin mobile/tablet product management.
   These styles intentionally avoid heavy table borders so the catalog feels like a modern business console. */
.admin-products-page,
.admin-product-form-page {
    display: grid;
    gap: 22px;
    margin: 0 auto;
    max-width: 1320px;
    padding: clamp(28px, 4vw, 58px) clamp(18px, 3vw, 40px);
}

.admin-products-hero {
    align-items: center;
    background:
        radial-gradient(circle at 0% 0%, rgba(249, 115, 22, .10), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 246, 255, .92));
    border: 1px solid rgba(191, 219, 254, .72);
    border-radius: 28px;
    box-shadow: 0 24px 58px rgba(15, 23, 42, .08);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: clamp(24px, 3vw, 42px);
}

.admin-products-hero.compact {
    padding: clamp(20px, 2.5vw, 32px);
}

.admin-products-hero h1 {
    color: #071427;
    font-size: clamp(30px, 3.3vw, 54px);
    line-height: 1.02;
    margin: 8px 0 12px;
}

.admin-products-hero p {
    color: #475569;
    font-size: clamp(15px, 1vw, 18px);
    line-height: 1.65;
    margin: 0;
    max-width: 760px;
}

.admin-kicker,
.admin-product-badge {
    background: rgba(37, 99, 235, .10);
    border-radius: 999px;
    color: #0f4bb8;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    padding: 7px 12px;
    text-transform: uppercase;
}

.admin-products-primary {
    box-shadow: 0 16px 30px rgba(37, 99, 235, .22);
    white-space: nowrap;
}

.admin-products-message {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 18px;
    color: #047857;
    font-weight: 800;
    padding: 14px 18px;
}

.admin-products-summary {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-products-summary article {
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(219, 234, 254, .88);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
    padding: 18px;
}

.admin-products-summary strong {
    color: #071427;
    display: block;
    font-size: 34px;
    line-height: 1;
}

.admin-products-summary span {
    color: #64748b;
    display: block;
    font-weight: 800;
    margin-top: 8px;
}

.admin-products-list {
    display: grid;
    gap: 14px;
}

.admin-product-card {
    align-items: center;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(219, 234, 254, .86);
    border-left: 5px solid #94a3b8;
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .065);
    display: grid;
    gap: 18px;
    grid-template-columns: 140px minmax(0, 1fr) auto;
    padding: 15px;
}

.admin-product-card.is-live {
    border-left-color: #10b981;
}

.admin-product-card.is-paused {
    opacity: .78;
}

.admin-product-media {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    min-height: 112px;
    overflow: hidden;
}

.admin-product-media img {
    max-height: 104px;
    max-width: 100%;
    object-fit: contain;
}

.admin-product-main {
    min-width: 0;
}

.admin-product-title-row {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.admin-product-title-row h2 {
    color: #071427;
    font-size: 21px;
    margin: 8px 0 6px;
}

.admin-product-main p {
    color: #475569;
    line-height: 1.55;
    margin: 0 0 12px;
}

.admin-product-status {
    background: #f1f5f9;
    border-radius: 999px;
    color: #334155;
    font-size: 12px;
    font-weight: 900;
    padding: 7px 11px;
    white-space: nowrap;
}

.admin-product-card.is-live .admin-product-status {
    background: #dcfce7;
    color: #047857;
}

.admin-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-product-meta span {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    padding: 7px 10px;
}

.admin-product-actions {
    align-items: stretch;
    display: grid;
    gap: 8px;
    min-width: 120px;
}

.btn-danger {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

.admin-empty-state,
.admin-form-panel {
    background: rgba(255, 255, 255, .96);
    border: 0;
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .06), inset 0 0 0 1px rgba(219, 234, 254, .72);
    padding: clamp(18px, 2.2vw, 30px);
}

.admin-product-form {
    display: grid;
    gap: 18px;
}

.admin-form-validation {
    background: #fff7ed;
    border-radius: 16px;
    color: #9a3412;
    font-weight: 800;
    padding: 0;
}

.admin-form-validation.validation-summary-errors {
    box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .45);
    padding: 14px 16px;
}

.admin-form-panel-heading {
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.admin-form-panel-heading > div {
    align-items: center;
    display: flex;
    gap: 12px;
}

.admin-form-panel-heading p {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    max-width: 520px;
    text-align: right;
}

.admin-form-step {
    align-items: center;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 14px;
    color: #1558d6;
    display: inline-flex;
    font-size: 12px;
    font-weight: 950;
    height: 36px;
    justify-content: center;
    width: 42px;
}

.admin-form-panel h2 {
    color: #071427;
    font-size: 22px;
    margin: 0;
}

.admin-form-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-product-form label {
    color: #10233e;
    display: grid;
    font-size: 13px;
    font-weight: 900;
    gap: 8px;
    letter-spacing: .01em;
}

.admin-field-label {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-required-star {
    color: #f97316;
    font-size: 14px;
    font-weight: 950;
}

.admin-field-tip {
    align-items: center;
    background: #eef5ff;
    border-radius: 999px;
    color: #1d4ed8;
    cursor: help;
    display: inline-flex;
    font-size: 11px;
    font-weight: 950;
    height: 20px;
    justify-content: center;
    position: relative;
    width: 20px;
}

.admin-field-tip::after {
    background: #0f172a;
    border-radius: 12px;
    bottom: calc(100% + 10px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .25);
    color: #fff;
    content: attr(data-tooltip);
    font-size: 12px;
    font-weight: 700;
    left: 50%;
    line-height: 1.45;
    max-width: min(320px, 78vw);
    opacity: 0;
    padding: 10px 12px;
    pointer-events: none;
    position: absolute;
    text-transform: none;
    transform: translate(-50%, 4px);
    transition: opacity .16s ease, transform .16s ease;
    visibility: hidden;
    width: max-content;
    z-index: 20;
}

.admin-field-tip:hover::after,
.admin-field-tip:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
}

.admin-product-form input,
.admin-product-form select,
.admin-product-form textarea {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    color: #0f172a;
    font: inherit;
    font-weight: 600;
    padding: 12px 14px;
}

.admin-product-form input:focus,
.admin-product-form select:focus,
.admin-product-form textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
    outline: 0;
}

.admin-product-form textarea {
    min-height: 92px;
    resize: vertical;
}

.admin-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.admin-toggle-row label {
    align-items: center;
    background: #f8fbff;
    box-shadow: inset 0 0 0 1px #dbeafe;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    padding: 9px 12px;
}

.admin-form-hint {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    margin: 10px 0 0;
}

.admin-image-preview {
    align-items: center;
    background: #f8fafc;
    box-shadow: inset 0 0 0 1px #e2e8f0;
    border: 0;
    border-radius: 18px;
    display: flex;
    gap: 14px;
    margin-top: 18px;
    padding: 12px;
}

.admin-image-preview img {
    background: #fff;
    border-radius: 12px;
    max-height: 82px;
    max-width: 120px;
    object-fit: contain;
}

.admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .admin-products-hero,
    .admin-product-card {
        grid-template-columns: 1fr;
    }

    .admin-products-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-products-summary,
    .admin-form-grid,
    .admin-form-grid.two {
        grid-template-columns: 1fr;
    }

    .admin-product-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .admin-products-page,
    .admin-product-form-page {
        padding-inline: 14px;
    }

    .admin-product-actions,
    .admin-form-actions {
        grid-template-columns: 1fr;
    justify-content: stretch;
}

@media (max-width: 700px) {
    .admin-form-panel-heading {
        display: grid;
    }

    .admin-form-panel-heading p {
        text-align: left;
    }
}

    .admin-product-actions .btn,
    .admin-form-actions .btn {
        width: 100%;
    }
}

/* Homeowner registration should feel like a professional intake workspace, not a bordered table.
   These overrides keep the existing secure form fields and validation flow while softening the container,
   reducing hard outlines, and turning the fields into a cleaner cardless business form. */
.account-registration-shell:not(.contractor-registration-shell) {
    max-width: 1120px;
}

.account-registration-shell:not(.contractor-registration-shell) .account-registration-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(247, 251, 255, .88));
    border: 0;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .09);
    overflow: visible;
    padding: clamp(26px, 4vw, 48px);
}

.account-registration-shell:not(.contractor-registration-shell) .account-registration-header {
    background: linear-gradient(135deg, #f8fbff, #eef6ff);
    border: 1px solid #dbeafe;
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    margin-bottom: 26px;
    padding: clamp(22px, 3vw, 34px);
}

.account-registration-shell:not(.contractor-registration-shell) .account-registration-header h1 {
    font-size: clamp(30px, 3vw, 42px);
    max-width: 780px;
}

.account-registration-shell:not(.contractor-registration-shell) .account-registration-header p {
    margin-bottom: 0;
}

.account-registration-shell:not(.contractor-registration-shell) .account-registration-form {
    background: transparent;
    gap: 20px;
}

.account-registration-shell:not(.contractor-registration-shell) .account-registration-form .grid-2 {
    background: #ffffff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
    gap: 18px 20px;
    padding: clamp(20px, 3vw, 30px);
}

.account-registration-shell:not(.contractor-registration-shell) .account-registration-form .grid-2 > div {
    min-width: 0;
}

.account-registration-shell:not(.contractor-registration-shell) .account-registration-form label {
    letter-spacing: .01em;
}

.account-registration-shell:not(.contractor-registration-shell) .account-registration-form .input {
    background: #f9fbff;
    border: 1px solid #d6e2f1;
    border-radius: 12px;
    box-shadow: none;
    min-height: 50px;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.account-registration-shell:not(.contractor-registration-shell) .account-registration-form .input:hover {
    background: #ffffff;
    border-color: #adc8ec;
}

.account-registration-shell:not(.contractor-registration-shell) .account-registration-form .input:focus {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.account-registration-shell:not(.contractor-registration-shell) .account-registration-form .mt-20 {
    margin-top: 4px;
}

.account-registration-shell:not(.contractor-registration-shell) .account-registration-form .btn {
    min-height: 48px;
    padding-inline: 24px;
}

.account-registration-shell:not(.contractor-registration-shell) .form-top-message {
    border-radius: 14px;
    margin: 0 0 20px;
}

/* LoginType and ChooseType are account decision pages, so they should feel like
   a polished role selector instead of two bordered table-style boxes. */
.account-choice-shell {
    background:
        radial-gradient(circle at 20% 12%, rgba(37, 99, 235, .10), transparent 32%),
        radial-gradient(circle at 88% 28%, rgba(14, 165, 233, .08), transparent 30%);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: 1120px;
    overflow: visible;
    padding: clamp(26px, 5vw, 58px) clamp(18px, 4vw, 38px);
}

.account-choice-shell .account-choice-header {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    position: relative;
}

.account-choice-shell .account-choice-header h1 {
    font-size: clamp(34px, 3.6vw, 50px);
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.account-choice-shell .account-choice-header p {
    max-width: 760px;
}

.account-choice-shell .account-choice-header::after {
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .28), transparent);
    content: "";
    display: block;
    height: 1px;
    margin: 28px auto 0;
    max-width: 720px;
    width: 70%;
}

.account-choice-shell .account-type-grid {
    align-items: stretch;
    gap: 22px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    max-width: 1040px;
}

.account-choice-shell .account-choice {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .92));
    border: 0;
    border-left: 4px solid #2563eb;
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
    display: grid;
    min-height: 178px;
    padding: clamp(22px, 3vw, 30px);
    position: relative;
    overflow: hidden;
}

.account-choice-shell .account-choice::before {
    background: radial-gradient(circle, rgba(37, 99, 235, .12), transparent 64%);
    content: "";
    height: 130px;
    position: absolute;
    right: -40px;
    top: -54px;
    width: 180px;
}

.account-choice-shell .account-choice::after {
    align-items: center;
    background: #eff6ff;
    border-radius: 999px;
    color: #0b54d9;
    content: "Continue";
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
    padding: 8px 12px;
    position: absolute;
    right: 22px;
    top: 22px;
    z-index: 1;
}

.account-choice-shell .account-choice:hover,
.account-choice-shell .account-choice:focus-visible {
    border-left-color: #0f766e;
    box-shadow: 0 24px 54px rgba(37, 99, 235, .16);
    transform: translateY(-2px);
}

.account-choice-shell .account-choice h2 {
    font-size: 24px;
    margin: 0 0 12px;
    padding-right: 110px;
    position: relative;
    z-index: 1;
}

.account-choice-shell .account-choice p {
    font-size: 15px;
    margin-bottom: 18px;
    max-width: 520px;
    position: relative;
    z-index: 1;
}

.account-choice-shell .account-choice strong {
    align-self: end;
    border-bottom: 2px solid rgba(37, 99, 235, .25);
    position: relative;
    width: max-content;
    z-index: 1;
}

.account-success-shell {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 460px;
}

.account-success-card {
    max-width: 760px;
    text-align: center;
}

.account-success-icon {
    align-items: center;
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 999px;
    color: #047857;
    display: inline-flex;
    font-size: 28px;
    font-weight: 900;
    height: 64px;
    justify-content: center;
    margin-bottom: 18px;
    width: 64px;
}

.account-id-card {
    background: #f4f8ff;
    border: 1px solid #d8e4f2;
    border-radius: 14px;
    display: inline-grid;
    gap: 6px;
    margin: 20px 0 8px;
    min-width: 190px;
    padding: 16px 20px;
}

    .account-id-card strong {
        color: #071427;
        font-size: 24px;
    }

.account-success-actions {
    justify-content: center;
    margin-top: 22px;
}

@media (max-width: 900px) {
    .account-auth-shell {
        grid-template-columns: 1fr;
    }

    .account-auth-hero {
        min-height: auto;
    }

    .account-type-grid,
    .account-registration-form .grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .account-auth-shell,
    .account-choice-shell,
    .account-registration-shell,
    .account-success-shell {
        width: 100%;
    }

    .account-auth-hero,
    .account-auth-card,
    .account-choice-shell,
    .account-registration-card,
    .account-success-card {
        border-radius: 14px;
        padding: 22px;
    }

        .account-auth-hero h1,
        .account-choice-header h1,
        .account-registration-header h1,
        .account-success-card h1 {
            font-size: 30px;
        }

    .account-choice {
        min-height: auto;
        padding: 22px;
    }

    .account-success-actions,
    .account-registration-form .button-row {
        align-items: stretch;
        flex-direction: column;
    }

        .account-success-actions .btn,
        .account-registration-form .button-row .btn {
            justify-content: center;
            width: 100%;
        }

    .account-registration-shell:not(.contractor-registration-shell) .account-registration-card {
        padding: 16px;
    }

    .account-registration-shell:not(.contractor-registration-shell) .account-registration-header,
    .account-registration-shell:not(.contractor-registration-shell) .account-registration-form .grid-2 {
        border-radius: 14px;
        padding: 18px;
    }

    .account-choice-shell .account-choice::after {
        position: static;
        width: max-content;
    }

    .account-choice-shell .account-choice h2 {
        padding-right: 0;
    }
}

/* Final responsive dashboard polish.
   This block intentionally sits at the end of the stylesheet so Account/CustomerDashboard
   keeps the same modern service-record design on tablets and cellphones. */
@media (max-width: 1100px) {
    .customer-account-hero {
        grid-template-columns: 1fr;
    }

    .account-guidance-grid {
        grid-template-columns: 1fr;
    }

    .customer-account-actions {
        max-width: none;
    }

    .account-free-result-table tbody tr,
    .account-service-request-table tbody tr,
    .account-repair-result-table tbody tr {
        grid-template-columns: 1fr 1fr;
    }

    .account-result-table td[data-label="Issues"],
    .account-result-table td[data-label="Video Help"],
    .account-result-table td[data-label="Recommendation"] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .customer-account-shell {
        gap: 16px;
    }

    .customer-account-hero,
    .account-result-section {
        border: 0;
        border-radius: 18px;
        box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
    }

    .account-metric-strip {
        gap: 10px;
        grid-template-columns: 1fr;
    }

    .account-metric-item {
        border: 0 !important;
        min-height: 78px;
    }

    .account-guidance-card {
        border-radius: 16px;
        min-height: auto;
        padding: 16px;
    }

    .account-summary-card {
        border: 0;
        border-radius: 16px;
        box-shadow: inset 0 0 0 1px rgba(191, 219, 254, .62);
    }

    .account-result-table tr,
    .account-result-table tbody tr {
        background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
        border: 0;
        border-radius: 16px;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
        gap: 0;
        grid-template-columns: 1fr !important;
        padding: 14px;
    }

    .account-result-table td {
        border-bottom: 1px solid rgba(226, 232, 240, .72);
        grid-template-columns: minmax(96px, 32%) minmax(0, 1fr);
    }

    .account-result-table td[data-label="Issues"] {
        grid-template-columns: 1fr;
    }

    .account-result-table td[data-label="Issues"]::before {
        margin-bottom: 0;
    }

    .account-issue-list {
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    }

    .account-issue-list span {
        min-width: 0;
    }
}

@media (max-width: 980px) {
    .precheck-result-hero,
    .precheck-result-grid,
    .homeowner-safety-panel,
    .homeowner-check-map,
    .condition-guide-panel,
    .diagnostic-video-advice {
        grid-template-columns: 1fr;
    }

    .check-map-steps {
        grid-template-columns: 1fr;
    }

    .check-map-connector {
        height: 22px;
        justify-self: center;
        width: 4px;
    }

    .advice-card-grid {
        grid-template-columns: 1fr;
    }

    .advice-card-dense ul {
        column-count: 1;
    }
}

@media (max-width: 640px) {
    .account-service-offers {
        border-radius: 22px;
        padding: 18px;
    }

    .precheck-result-shell {
        gap: 18px;
        padding: 14px;
    }

    .precheck-result-hero,
    .result-summary-panel,
    .homeowner-safety-panel,
    .homeowner-check-map,
    .condition-guide-panel,
    .advice-card,
    .result-delivery-panel {
        border-radius: 18px;
    }

    .precheck-result-hero {
        padding: 24px;
    }

    .precheck-result-copy h1 {
        font-size: 36px;
    }

    .precheck-result-copy p,
    .result-summary-panel p,
    .homeowner-check-map p,
    .section-heading p {
        font-size: 15px;
    }

    .precheck-result-status {
        border-radius: 18px;
        padding: 14px;
    }

    .homeowner-check-map {
        padding: 22px;
    }

    .check-map-step {
        min-height: auto;
    }

    .advice-card h3 {
        font-size: 20px;
    }

    .advice-card-topline {
        align-items: flex-start;
        flex-direction: column;
    }

    .advice-card-visual {
        justify-content: flex-start;
        width: 100%;
    }

    .result-action-row,
    .result-email-field {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        max-width: none;
    }

    .result-action-row .btn,
    .diagnostic-result-note {
        justify-content: center;
        width: 100%;
    }
}

/* ==========================================================
   BrijjPro HVAC polish updates
   ========================================================== */

/* The inline homeowner helper stays compact so it supports the question instead of dominating the form. */
.precheck-filter-video {
    border-radius: 14px;
    justify-self: end;
    max-width: 250px;
    padding: 6px;
}

.precheck-filter-video video,
.precheck-filter-video img {
    border-radius: 11px;
    max-height: 142px;
}

.precheck-filter-guide {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    padding: 12px 14px;
}

.precheck-filter-guide-icon {
    border-radius: 14px;
    height: 40px;
    width: 40px;
}

.precheck-filter-guide-copy strong {
    font-size: 15px;
}

.precheck-filter-guide-copy p {
    font-size: 12.5px;
    max-width: 680px;
}

/* Modern HVAC action area: lighter metric cards plus one clear next-step panel instead of heavy stacked bars. */
.hvac-action-zone {
    display: grid;
    gap: clamp(16px, 1.4vw, 24px);
    margin-top: clamp(26px, 2.4vw, 44px);
}

.hvac-action-zone .hvac-proof-strip {
    background: transparent;
    border-radius: 0;
    color: #0f172a;
    display: grid;
    gap: clamp(12px, 1vw, 18px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0;
    overflow: visible;
}

.hvac-action-zone .hvac-proof-strip div {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 246, 255, .76));
    border: 1px solid rgba(191, 219, 254, .72);
    border-radius: 18px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .06);
    padding: clamp(16px, 1vw, 22px);
    text-align: left;
}

.hvac-action-zone .hvac-proof-strip div + div {
    border-left: 1px solid rgba(191, 219, 254, .72);
}

.hvac-action-zone .hvac-proof-strip strong {
    color: #0f172a;
    display: block;
    font-size: clamp(20px, 1.35vw, 30px);
    letter-spacing: 0;
    margin-bottom: 4px;
}

.hvac-action-zone .hvac-proof-strip span {
    color: #475569;
    font-size: clamp(12px, .7vw, 14px);
    font-weight: 700;
}

.hvac-action-zone .home-final-cta {
    align-items: center;
    background:
        radial-gradient(circle at 0 0, rgba(37, 99, 235, .26), transparent 34%),
        linear-gradient(135deg, #123fc5 0%, #10245e 54%, #0f172a 100%);
    border-radius: 24px;
    box-shadow: 0 22px 48px rgba(15, 23, 42, .16);
    color: #fff;
    display: grid;
    gap: clamp(18px, 1.8vw, 30px);
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 0;
    padding: clamp(24px, 2vw, 38px);
    text-align: left;
}

.hvac-action-zone .home-final-cta h2 {
    font-size: clamp(24px, 1.7vw, 34px);
    letter-spacing: 0;
    line-height: 1.12;
    margin: 6px 0 8px;
}

.hvac-action-zone .home-final-cta p {
    color: rgba(255, 255, 255, .86);
    font-size: clamp(14px, .8vw, 17px);
    line-height: 1.55;
    margin: 0;
    max-width: 660px;
}

.hvac-action-zone .home-final-cta .home-eyebrow {
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    color: #dbeafe;
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    padding: 7px 10px;
    text-transform: uppercase;
}

.hvac-action-zone .home-final-cta .home-primary-btn {
    box-shadow: 0 18px 34px rgba(37, 99, 235, .25);
    min-width: 170px;
}

@media (max-width: 960px) {
    .hvac-action-zone .hvac-proof-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hvac-action-zone .home-final-cta {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hvac-action-zone .home-final-cta p {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 640px) {
    .precheck-filter-guide {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .precheck-filter-video {
        justify-self: stretch;
        max-width: 100%;
    }

    .precheck-filter-video video,
    .precheck-filter-video img {
        max-height: 180px;
    }

    .hvac-action-zone {
        gap: 14px;
        margin-top: 22px;
    }

    .hvac-action-zone .hvac-proof-strip {
        grid-template-columns: 1fr 1fr;
    }

    .hvac-action-zone .hvac-proof-strip div {
        border-radius: 14px;
        padding: 14px;
        text-align: center;
    }

    .hvac-action-zone .home-final-cta {
        border-radius: 18px;
        padding: 24px 18px;
    }

    .hvac-action-zone .home-final-cta .home-primary-btn {
        justify-content: center;
        width: 100%;
    }
}

/* ==========================================================
   BrijjPro compact diagnostic video and result card polish
   ========================================================== */

/* Inline videos now read like compact guidance instead of a full-width banner.
   The video stays large enough to understand, while the total package is shorter
   and easier to scan inside the diagnostic form. */
.precheck-filter-guide {
    align-items: start;
    gap: 10px 14px;
    grid-template-columns: 38px minmax(0, 1fr) minmax(190px, 250px);
    margin: 4px 0 14px;
    padding: 12px 14px;
}

.precheck-filter-guide-icon {
    border-radius: 13px;
    font-size: 15px;
    grid-row: 1 / span 2;
    height: 38px;
    width: 38px;
}

.precheck-filter-guide-copy {
    min-width: 0;
}

.precheck-filter-guide-copy span {
    font-size: 10px;
    margin-bottom: 4px;
}

.precheck-filter-guide-copy strong {
    font-size: 14px;
    line-height: 1.2;
}

.precheck-filter-guide-copy p {
    font-size: 12px;
    line-height: 1.42;
    max-width: 720px;
}

.precheck-video-toggle {
    align-self: start;
    font-size: 11px;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-height: 30px;
    padding: 0 11px;
}

.precheck-filter-video {
    grid-column: 3;
    grid-row: 2;
    justify-self: stretch;
    margin-top: 0;
    max-width: none;
    padding: 5px;
    width: 100%;
}

.precheck-filter-video video,
.precheck-filter-video img {
    aspect-ratio: 16 / 9;
    max-height: 142px;
    object-fit: cover;
}

/* Result-page video cards should feel like practical support modules, not a
   second hero. Smaller text and clearer media spacing make the section easier
   to follow before the written guidance starts. */
.visual-guide-section {
    gap: 14px;
}

.visual-guide-section .section-heading h2 {
    font-size: clamp(24px, 2.4vw, 38px);
    letter-spacing: 0;
    line-height: 1.08;
}

.visual-guide-section .section-heading p {
    color: #475569;
    font-size: 15px;
    line-height: 1.5;
    margin-inline: auto;
    max-width: 820px;
}

.diagnostic-video-grid {
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.diagnostic-video-advice {
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .08), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 247, 237, .82));
    border-radius: 20px;
    gap: 16px;
    grid-template-columns: minmax(0, .72fr) minmax(260px, 1fr);
    padding: 18px;
}

.diagnostic-video-advice span {
    font-size: 10px;
    margin-bottom: 6px;
}

.diagnostic-video-advice h2 {
    font-size: clamp(20px, 1.7vw, 26px);
    line-height: 1.12;
}

.diagnostic-video-advice p {
    font-size: 14px;
    line-height: 1.52;
    margin-top: 8px;
}

.diagnostic-video-advice video,
.diagnostic-video-advice img {
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    max-height: 230px;
}

/* Advice cards no longer show non-clickable label pills. The number is enough
   orientation, and removing the pseudo-controls makes the page calmer. */
.advice-card {
    padding: clamp(20px, 2.4vw, 28px);
}

.advice-card-topline {
    justify-content: flex-start;
}

.advice-card-visual {
    display: none;
}

.advice-card h3 {
    font-size: clamp(19px, 1.55vw, 24px);
    margin-top: 12px;
}

.advice-card p,
.advice-card li {
    font-size: 15px;
    line-height: 1.62;
}

.advice-card-support span {
    font-size: 14px;
}

@media (max-width: 980px) {
    .precheck-filter-guide {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .precheck-video-toggle {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    .precheck-filter-video {
        grid-column: 1 / -1;
        grid-row: 3;
        max-width: 360px;
    }

    .diagnostic-video-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .diagnostic-video-advice {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .diagnostic-video-advice video,
    .diagnostic-video-advice img {
        max-height: 210px;
    }
}

/* ==========================================================
   Service offer rail and marketplace polish
   These rules keep BrijjPro service products database-driven, searchable,
   and visually secondary to the main service workflow.
   ========================================================== */
.hvac-service-layout {
    align-items: start;
    display: grid;
    gap: clamp(18px, 1.5vw, 30px);
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
    width: 100%;
}

.hvac-service-layout.no-service-offers {
    grid-template-columns: minmax(0, 1fr);
}

.hvac-service-content {
    display: grid;
    gap: clamp(22px, 1.7vw, 34px);
    min-width: 0;
}

.hvac-desktop-product-rail {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .13), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(240, 247, 255, .9));
    border-radius: 26px;
    box-shadow: 0 24px 58px rgba(15, 23, 42, .09);
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: calc(100vh - 118px);
    max-height: none;
    min-width: 0;
    overflow: hidden;
    padding: clamp(16px, 1vw, 20px);
    position: sticky;
    top: 96px;
}

.hvac-product-rail-heading {
    display: grid;
    gap: 5px;
}

.hvac-product-rail-heading span,
.hvac-product-search span,
.account-offer-search span {
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hvac-product-rail-heading h2 {
    color: #0f172a;
    font-size: clamp(20px, 1.25vw, 26px);
    line-height: 1.08;
    margin: 0;
}

.hvac-product-rail-heading p {
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
}

.hvac-product-search,
.account-offer-search {
    display: grid;
    gap: 7px;
}

.hvac-product-search input,
.account-offer-search input {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(191, 219, 254, .95);
    border-radius: 999px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .055);
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    min-height: 44px;
    outline: none;
    padding: 0 16px;
    transition: border-color .18s ease, box-shadow .18s ease;
    width: 100%;
}

.hvac-product-search input:focus,
.account-offer-search input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12), 0 14px 30px rgba(15, 23, 42, .08);
}

.hvac-product-rail-list {
    display: grid;
    flex: 1 1 auto;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 4px 10px 0;
    scrollbar-color: #93c5fd rgba(219, 234, 254, .72);
    scrollbar-width: thin;
}

.hvac-product-rail-list::-webkit-scrollbar {
    width: 9px;
}

.hvac-product-rail-list::-webkit-scrollbar-track {
    background: rgba(219, 234, 254, .72);
    border-radius: 999px;
}

.hvac-product-rail-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2563eb, #0ea5e9);
    border-radius: 999px;
}

.hvac-rail-product {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .075);
    padding: 14px;
}

.offer-filter-empty {
    background: rgba(255, 255, 255, .8);
    border: 1px dashed rgba(147, 197, 253, .9);
    border-radius: 16px;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    margin: 0;
    padding: 12px 14px;
    text-align: center;
}

.account-service-offer-heading {
    align-items: end;
    display: grid;
    gap: clamp(14px, 1.4vw, 24px);
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    max-width: none;
}

.account-service-offer-grid {
    scroll-snap-type: x mandatory;
}

.account-service-offer-card {
    border: 0;
}

.account-service-offer-card[hidden],
.hvac-rail-product[hidden] {
    display: none;
}

@media (min-width: 1200px) {
    .hvac-mobile-product-section {
        display: none;
    }
}

@media (max-width: 1199px) {
    .hvac-service-layout,
    .hvac-service-layout.has-service-offers,
    .hvac-service-layout.no-service-offers {
        grid-template-columns: minmax(0, 1fr);
    }

    .hvac-desktop-product-rail {
        display: none;
    }

    .hvac-mobile-product-section {
        display: grid;
    }
}

@media (max-width: 768px) {
    .account-service-offer-heading {
        grid-template-columns: 1fr;
    }

    .account-offer-search input {
        min-height: 48px;
    }
}

/* ==========================================================
   Customer dashboard service offer rails
   Dashboard offers sit beside the account work area on desktop
   and become horizontal, touch-friendly carousels on smaller screens.
   ========================================================== */
.customer-account-shell {
    display: grid;
    gap: clamp(18px, 1.45vw, 28px);
    grid-template-columns: minmax(220px, 282px) minmax(0, 1fr) minmax(220px, 282px);
    max-width: min(100%, 1880px);
}

.customer-account-shell > :not(.dashboard-offer-rail) {
    grid-column: 2;
    min-width: 0;
}

.dashboard-offer-rail {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .14), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(241, 248, 255, .91));
    border-radius: 26px;
    box-shadow: 0 24px 58px rgba(15, 23, 42, .09);
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: calc(100vh - 118px);
    min-width: 0;
    overflow: hidden;
    padding: clamp(14px, 1vw, 18px);
    position: sticky;
    top: 96px;
}

.dashboard-offer-rail-left {
    grid-column: 1;
    grid-row: 1 / span 20;
}

.dashboard-offer-rail-right {
    grid-column: 3;
    grid-row: 1 / span 20;
}

.dashboard-offer-heading {
    display: grid;
    gap: 5px;
}

.dashboard-offer-heading span,
.dashboard-offer-search span {
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-offer-heading h2 {
    color: #0f172a;
    font-size: clamp(19px, 1.14vw, 24px);
    line-height: 1.08;
    margin: 0;
}

.dashboard-offer-heading p {
    color: #64748b;
    font-size: 13px;
    line-height: 1.42;
    margin: 0;
}

.dashboard-offer-search {
    display: grid;
    gap: 7px;
}

.dashboard-offer-search input {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(191, 219, 254, .95);
    border-radius: 999px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .055);
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    min-height: 42px;
    outline: none;
    padding: 0 15px;
    transition: border-color .18s ease, box-shadow .18s ease;
    width: 100%;
}

.dashboard-offer-search input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12), 0 14px 30px rgba(15, 23, 42, .08);
}

.dashboard-offer-list {
    display: grid;
    flex: 1 1 auto;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 4px 10px 0;
    scrollbar-color: #93c5fd rgba(219, 234, 254, .72);
    scrollbar-width: thin;
}

.dashboard-offer-list::-webkit-scrollbar {
    width: 9px;
}

.dashboard-offer-list::-webkit-scrollbar-track {
    background: rgba(219, 234, 254, .72);
    border-radius: 999px;
}

.dashboard-offer-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2563eb, #0ea5e9);
    border-radius: 999px;
}

.dashboard-offer-card {
    background: rgba(255, 255, 255, .97);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .075);
    color: #0f172a;
    display: grid;
    gap: 9px;
    padding: 13px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.dashboard-offer-card:hover,
.dashboard-offer-card:focus-visible {
    box-shadow: 0 20px 42px rgba(37, 99, 235, .15);
    outline: none;
    transform: translateY(-2px);
}

.dashboard-offer-card[hidden] {
    display: none;
}

.dashboard-offer-image {
    align-items: center;
    aspect-ratio: 1.28 / 1;
    background: #f8fbff;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.dashboard-offer-image img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.dashboard-offer-badge {
    align-self: start;
    background: #eef6ff;
    border-radius: 999px;
    color: #0b58d0;
    font-size: 11px;
    font-weight: 900;
    padding: 5px 9px;
}

.dashboard-offer-card h3 {
    font-size: 15px;
    line-height: 1.2;
    margin: 0;
}

.dashboard-offer-card p {
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
    margin: 0;
}

.dashboard-offer-price {
    color: #047857;
    font-size: 17px;
    font-weight: 900;
}

.dashboard-offer-card .sale-price {
    color: #ea580c;
    margin-left: 6px;
}

@media (max-width: 1399px) {
    .customer-account-shell {
        grid-template-columns: minmax(205px, 240px) minmax(0, 1fr) minmax(205px, 240px);
    }
}

@media (max-width: 1199px) {
    .customer-account-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-account-shell > :not(.dashboard-offer-rail),
    .dashboard-offer-rail {
        grid-column: 1;
        grid-row: auto;
    }

    .dashboard-offer-rail {
        height: auto;
        position: static;
    }

    .dashboard-offer-list {
        display: flex;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 12px;
        scroll-snap-type: x mandatory;
    }

    .dashboard-offer-card {
        flex: 0 0 min(260px, 78vw);
        scroll-snap-align: start;
    }
}

/* ==========================================================
   Final service marketplace rail polish
   Keeps service-matched advertising useful on service home and
   dashboard pages without turning the main content into a table.
   ========================================================== */
[data-offer-filter-card][hidden] {
    display: none !important;
}

@media (min-width: 1200px) {
    .hvac-service-layout.has-service-offers {
        align-items: start;
        gap: clamp(26px, 2vw, 42px);
        grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
        max-width: min(100%, 1840px);
    }

    .hvac-desktop-product-rail,
    .dashboard-offer-rail {
        border: 1px solid rgba(191, 219, 254, .86);
        border-radius: 28px;
        box-shadow: 0 26px 66px rgba(15, 23, 42, .1);
        height: clamp(660px, calc(100vh - 104px), 980px);
        min-height: 0;
        overflow: hidden;
        padding: 18px;
        top: 92px;
    }

    .hvac-product-rail-heading,
    .dashboard-offer-rail-heading {
        display: grid;
        gap: 6px;
    }

    .hvac-product-rail-heading span,
    .dashboard-offer-rail-heading span,
    .hvac-product-search span,
    .dashboard-offer-search span {
        color: #1d4ed8;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .085em;
        text-transform: uppercase;
    }

    .hvac-product-rail-heading h2,
    .dashboard-offer-rail-heading h2 {
        color: #07152e;
        font-size: clamp(21px, 1.2vw, 26px);
        line-height: 1.05;
        margin: 0;
    }

    .hvac-product-rail-heading p,
    .dashboard-offer-rail-heading p {
        color: #52627a;
        font-size: 13px;
        line-height: 1.45;
        margin: 0;
    }

    .hvac-product-search,
    .dashboard-offer-search {
        display: grid;
        gap: 8px;
    }

    .hvac-product-search input,
    .dashboard-offer-search input {
        background: rgba(255, 255, 255, .98);
        border: 1px solid rgba(147, 197, 253, .94);
        border-radius: 999px;
        box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
        color: #0f172a;
        font-size: 14px;
        font-weight: 750;
        min-height: 46px;
        outline: none;
        padding: 0 17px;
        transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
        width: 100%;
    }

    .hvac-product-search input:focus,
    .dashboard-offer-search input:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, .12), 0 18px 36px rgba(15, 23, 42, .09);
        transform: translateY(-1px);
    }

    .hvac-product-rail-list,
    .dashboard-offer-list {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 14px;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 3px 7px 12px 0;
        scroll-behavior: smooth;
        scrollbar-color: #93c5fd rgba(219, 234, 254, .78);
        scrollbar-width: thin;
    }

    .hvac-product-rail-list::-webkit-scrollbar,
    .dashboard-offer-list::-webkit-scrollbar {
        width: 9px;
    }

    .hvac-product-rail-list::-webkit-scrollbar-track,
    .dashboard-offer-list::-webkit-scrollbar-track {
        background: rgba(219, 234, 254, .78);
        border-radius: 999px;
    }

    .hvac-product-rail-list::-webkit-scrollbar-thumb,
    .dashboard-offer-list::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #2563eb, #0ea5e9);
        border-radius: 999px;
    }

    .hvac-rail-product.home-product-offer,
    .dashboard-offer-card {
        align-content: start;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(248, 251, 255, .96));
        border: 1px solid rgba(203, 213, 225, .72);
        border-radius: 20px;
        box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
        color: #07152e;
        display: grid;
        gap: 10px;
        min-height: 0;
        overflow: visible;
        padding: 14px;
        text-decoration: none;
        transform: translateZ(0);
    }

    .hvac-rail-product.home-product-offer:hover,
    .hvac-rail-product.home-product-offer:focus-visible,
    .dashboard-offer-card:hover,
    .dashboard-offer-card:focus-visible {
        border-color: rgba(37, 99, 235, .36);
        box-shadow: 0 24px 48px rgba(37, 99, 235, .15);
        outline: none;
        transform: translateY(-2px);
    }

    .hvac-rail-product .home-product-badge,
    .dashboard-offer-card .home-product-badge {
        align-self: start;
        background: #eef6ff;
        border-radius: 999px;
        color: #0b58d0;
        font-size: 11px;
        font-weight: 900;
        justify-self: start;
        line-height: 1;
        padding: 7px 10px;
        position: static;
        width: max-content;
    }

    .hvac-rail-product .home-product-image,
    .dashboard-offer-card .home-product-image {
        aspect-ratio: 4 / 3;
        background: #f8fbff;
        border: 1px solid rgba(203, 213, 225, .7);
        border-radius: 16px;
        box-shadow: none;
        height: auto;
        max-height: 176px;
        object-fit: contain;
        padding: 8px;
        width: 100%;
    }

    .hvac-rail-product strong,
    .dashboard-offer-card strong {
        color: #07152e;
        font-size: 15px;
        line-height: 1.18;
        margin: 0;
    }

    .hvac-rail-product small,
    .dashboard-offer-card small {
        color: #64748b;
        font-size: 12px;
        line-height: 1.35;
        margin: 0;
    }

    .hvac-rail-product .home-product-price,
    .dashboard-offer-card .home-product-price {
        color: #047857;
        font-size: 17px;
        font-weight: 950;
    }

    .customer-account-shell {
        align-items: start;
        gap: clamp(24px, 1.8vw, 38px);
        grid-template-columns: minmax(250px, 310px) minmax(0, 1fr) minmax(250px, 310px);
        max-width: min(100%, 1880px);
    }

    .dashboard-offer-rail-left {
        grid-column: 1;
        grid-row: 1 / span 30;
    }

    .dashboard-offer-rail-right {
        grid-column: 3;
        grid-row: 1 / span 30;
    }
}

.hvac-action-zone {
    gap: clamp(16px, 1.25vw, 24px);
    margin-top: clamp(22px, 1.7vw, 34px);
}

.hvac-action-zone .hvac-proof-strip {
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(17, 34, 68, .96));
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 22px;
    box-shadow: 0 24px 54px rgba(15, 23, 42, .14);
    min-height: 108px;
    overflow: hidden;
    width: 100%;
}

.hvac-action-zone .hvac-proof-strip div {
    padding: clamp(18px, 1.6vw, 26px);
}

.hvac-action-zone .hvac-proof-strip strong {
    font-size: clamp(24px, 1.8vw, 34px);
}

.hvac-action-zone .home-final-cta {
    align-items: center;
    background:
        radial-gradient(circle at left center, rgba(37, 99, 235, .98), rgba(37, 99, 235, .78) 28%, transparent 54%),
        linear-gradient(135deg, #172f86, #0f172a);
    border-radius: 26px;
    box-shadow: 0 26px 60px rgba(15, 23, 42, .16);
    display: grid;
    gap: clamp(18px, 2vw, 32px);
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 160px;
    padding: clamp(28px, 3vw, 48px);
    width: 100%;
}

.hvac-action-zone .home-final-cta h2 {
    font-size: clamp(25px, 1.75vw, 34px);
    letter-spacing: 0;
}

.hvac-action-zone .home-final-cta p {
    font-size: clamp(14px, .9vw, 16px);
    max-width: 760px;
}

.hvac-action-zone .home-final-cta .home-primary-btn {
    min-width: 170px;
    text-align: center;
}

@media (max-width: 1199px) {
    .dashboard-offer-rail-heading {
        display: grid;
        gap: 5px;
    }

    .dashboard-offer-card .home-product-badge {
        position: static;
        width: max-content;
    }

    .dashboard-offer-card .home-product-image {
        aspect-ratio: 4 / 3;
        height: auto;
        object-fit: contain;
        width: 100%;
    }
}

@media (max-width: 760px) {
    .hvac-action-zone .home-final-cta {
        grid-template-columns: 1fr;
        justify-items: start;
        min-height: 0;
    }

    .hvac-action-zone .home-final-cta .home-primary-btn {
        width: 100%;
    }
}

/* ==========================================================
   BrijjPro service offer rails - isolated product card layout
   The desktop service rails use dedicated classes so older
   mobile product card styles cannot collapse or clip them.
   ========================================================== */
[data-offer-filter-card][hidden],
.offer-rail-card[hidden] {
    display: none !important;
}

.offer-rail-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 252, 255, .94));
    border: 1px solid rgba(191, 219, 254, .72);
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
    color: #0f172a;
    display: grid;
    gap: 10px;
    min-height: 0;
    overflow: visible;
    padding: 14px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.offer-rail-card:hover,
.offer-rail-card:focus-visible {
    border-color: rgba(37, 99, 235, .42);
    box-shadow: 0 24px 48px rgba(37, 99, 235, .16);
    outline: none;
    transform: translateY(-2px);
}

.offer-rail-badge {
    align-self: start;
    background: #eff6ff;
    border: 1px solid rgba(191, 219, 254, .8);
    border-radius: 999px;
    color: #1d4ed8;
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .01em;
    line-height: 1;
    padding: 7px 10px;
    width: max-content;
}

.offer-rail-image {
    aspect-ratio: 1.36 / 1;
    background: #f8fbff;
    border: 1px solid rgba(203, 213, 225, .82);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
    display: block;
    height: auto;
    max-height: none;
    min-height: 112px;
    object-fit: contain;
    padding: 8px;
    width: 100%;
}

.offer-rail-title {
    color: #07152e;
    display: block;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.18;
    margin: 0;
}

.offer-rail-detail {
    color: #64748b;
    display: block;
    font-size: 12.5px;
    line-height: 1.4;
    margin: 0;
}

.offer-rail-price {
    color: #047857;
    display: block;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: .01em;
    line-height: 1;
    margin-top: 1px;
}

@media (min-width: 1200px) {
    .hvac-service-layout.has-service-offers {
        gap: clamp(30px, 2.5vw, 54px);
        grid-template-columns: minmax(292px, 360px) minmax(0, 1fr);
        margin-inline: auto;
        max-width: min(100%, 1900px);
    }

    .hvac-service-content {
        gap: clamp(32px, 2.3vw, 54px);
    }

    .hvac-desktop-product-rail,
    .dashboard-offer-rail {
        background:
            radial-gradient(circle at 0 0, rgba(37, 99, 235, .14), transparent 34%),
            linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(240, 247, 255, .93));
        border: 1px solid rgba(191, 219, 254, .82);
        border-radius: 30px;
        box-shadow: 0 28px 70px rgba(15, 23, 42, .11);
        height: calc(100vh - 118px);
        min-height: 720px;
        overflow: hidden;
        padding: 20px;
        top: 94px;
    }

    .hvac-product-rail-list,
    .dashboard-offer-list {
        align-content: start;
        display: grid;
        flex: 1 1 auto;
        gap: 16px;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 4px 8px 16px 0;
        scroll-behavior: smooth;
        scrollbar-color: #60a5fa rgba(219, 234, 254, .76);
        scrollbar-width: thin;
    }

    .hvac-product-rail-list::-webkit-scrollbar,
    .dashboard-offer-list::-webkit-scrollbar {
        width: 8px;
    }

    .hvac-product-rail-list::-webkit-scrollbar-track,
    .dashboard-offer-list::-webkit-scrollbar-track {
        background: rgba(219, 234, 254, .76);
        border-radius: 999px;
    }

    .hvac-product-rail-list::-webkit-scrollbar-thumb,
    .dashboard-offer-list::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #2563eb, #0ea5e9);
        border-radius: 999px;
    }

    .customer-account-shell {
        gap: clamp(24px, 2vw, 42px);
        grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(260px, 320px);
        margin-inline: auto;
        max-width: min(100%, 1900px);
    }

    .dashboard-offer-rail-left,
    .dashboard-offer-rail-right {
        grid-row: 1 / span 30;
    }
}

/* The HVAC closing action is a full-width decision area, not a small boxed table. */
.hvac-action-zone {
    display: grid;
    gap: clamp(18px, 1.6vw, 28px);
    margin-top: clamp(22px, 2vw, 36px);
}

.hvac-action-zone .hvac-proof-strip {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .18), transparent 34%),
        linear-gradient(135deg, #111c35, #0f172a);
    border: 0;
    border-radius: 24px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, .14);
    color: #fff;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
}

.hvac-action-zone .hvac-proof-strip div {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: clamp(20px, 1.5vw, 30px);
    text-align: center;
}

.hvac-action-zone .hvac-proof-strip div + div {
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.hvac-action-zone .hvac-proof-strip strong {
    color: #fff;
    font-size: clamp(22px, 1.55vw, 34px);
}

.hvac-action-zone .hvac-proof-strip span {
    color: rgba(255, 255, 255, .78);
    font-size: clamp(12px, .78vw, 15px);
}

.hvac-action-zone .home-final-cta {
    align-items: center;
    background:
        radial-gradient(circle at 0 0, rgba(59, 130, 246, .25), transparent 36%),
        linear-gradient(135deg, #1d4ed8 0%, #142f7c 48%, #0f172a 100%);
    border-radius: 26px;
    box-shadow: 0 28px 60px rgba(15, 23, 42, .16);
    color: #fff;
    display: grid;
    gap: clamp(18px, 2vw, 34px);
    grid-template-columns: minmax(0, 1fr) auto;
    padding: clamp(26px, 2.2vw, 42px);
    text-align: left;
}

.hvac-action-zone .home-final-cta h2 {
    color: #fff;
    font-size: clamp(26px, 2vw, 40px);
    line-height: 1.08;
    margin: 8px 0 10px;
}

.hvac-action-zone .home-final-cta p {
    color: rgba(255, 255, 255, .86);
    font-size: clamp(14px, .9vw, 17px);
    line-height: 1.5;
    margin: 0;
    max-width: 760px;
}

@media (max-width: 1199px) {
    .offer-rail-card {
        flex: 0 0 min(280px, 78vw);
        scroll-snap-align: start;
    }

    .offer-rail-image {
        min-height: 128px;
    }
}

@media (max-width: 760px) {
    .hvac-action-zone .hvac-proof-strip,
    .hvac-action-zone .home-final-cta {
        grid-template-columns: 1fr;
    }

    .hvac-action-zone .hvac-proof-strip div + div {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .hvac-action-zone .home-final-cta {
        text-align: center;
    }
}

/* ==========================================================
   BrijjPro offer rail stability pass
   Keeps service-specific product/advertising cards readable,
   searchable, and scrollable on desktop while allowing phones
   to use natural page scrolling and horizontal offer carousels.
   ========================================================== */
html,
body {
    max-width: 100%;
}

body {
    overflow-x: hidden;
}

.hvac-service-layout,
.hvac-service-content,
.customer-account-shell,
.customer-account-shell > :not(.dashboard-offer-rail) {
    min-width: 0;
}

.hvac-desktop-product-rail,
.dashboard-offer-rail {
    box-sizing: border-box;
}

.offer-rail-card.hvac-rail-product,
.offer-rail-card.dashboard-offer-card {
    align-content: start !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(248, 252, 255, .96)) !important;
    border: 1px solid rgba(191, 219, 254, .78) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .08) !important;
    color: #0f172a !important;
    display: grid !important;
    flex: initial !important;
    gap: 10px !important;
    height: auto !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding: 14px !important;
    position: relative !important;
    text-decoration: none !important;
    transform: none;
    width: 100% !important;
}

.offer-rail-card.hvac-rail-product:hover,
.offer-rail-card.dashboard-offer-card:hover,
.offer-rail-card.hvac-rail-product:focus-visible,
.offer-rail-card.dashboard-offer-card:focus-visible {
    border-color: rgba(37, 99, 235, .48) !important;
    box-shadow: 0 24px 48px rgba(37, 99, 235, .16) !important;
    outline: none !important;
    transform: translateY(-2px);
}

.offer-rail-card .offer-rail-badge {
    align-self: start !important;
    background: #eff6ff !important;
    border: 1px solid rgba(191, 219, 254, .86) !important;
    border-radius: 999px !important;
    color: #1d4ed8 !important;
    display: inline-flex !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
    line-height: 1 !important;
    padding: 7px 10px !important;
    position: static !important;
    text-transform: none !important;
    width: max-content !important;
}

.offer-rail-card .offer-rail-image {
    aspect-ratio: 4 / 3 !important;
    background: #f8fbff !important;
    border: 1px solid rgba(203, 213, 225, .82) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7) !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
    max-width: 100% !important;
    min-height: 128px !important;
    object-fit: contain !important;
    padding: 8px !important;
    position: static !important;
    width: 100% !important;
}

.offer-rail-card .offer-rail-title {
    color: #07152e !important;
    display: block !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
}

.offer-rail-card .offer-rail-detail {
    color: #64748b !important;
    display: block !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
}

.offer-rail-card .offer-rail-price {
    color: #047857 !important;
    display: block !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    letter-spacing: .01em !important;
    line-height: 1 !important;
    margin-top: 1px !important;
}

.offer-filter-empty[hidden],
[data-offer-filter-card][hidden] {
    display: none !important;
}

@media (min-width: 1200px) {
    .hvac-service-layout.has-service-offers {
        align-items: start !important;
        display: grid !important;
        gap: clamp(28px, 2.4vw, 52px) !important;
        grid-template-columns: minmax(300px, 370px) minmax(0, 1fr) !important;
        margin-inline: auto !important;
        max-width: min(1940px, calc(100vw - 48px)) !important;
        width: 100% !important;
    }

    .customer-account-shell {
        align-items: start !important;
        display: grid !important;
        gap: clamp(26px, 2vw, 44px) !important;
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(280px, 340px) !important;
        margin-inline: auto !important;
        max-width: min(1940px, calc(100vw - 48px)) !important;
        width: 100% !important;
    }

    .hvac-desktop-product-rail,
    .dashboard-offer-rail {
        align-self: start !important;
        background:
            radial-gradient(circle at 0 0, rgba(37, 99, 235, .13), transparent 34%),
            linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(240, 247, 255, .94)) !important;
        border: 1px solid rgba(191, 219, 254, .82) !important;
        border-radius: 30px !important;
        box-shadow: 0 28px 70px rgba(15, 23, 42, .11) !important;
        display: flex !important;
        flex-direction: column !important;
        height: min(980px, calc(100vh - 112px)) !important;
        min-height: 680px !important;
        overflow: hidden !important;
        padding: 20px !important;
        position: sticky !important;
        top: 92px !important;
        width: 100% !important;
    }

    .dashboard-offer-rail-left,
    .dashboard-offer-rail-right {
        grid-row: 1 / span 40 !important;
    }

    .hvac-product-rail-list,
    .dashboard-offer-list {
        align-content: start !important;
        display: grid !important;
        flex: 1 1 auto !important;
        gap: 16px !important;
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 4px 10px 18px 0 !important;
        scroll-behavior: smooth;
        scrollbar-color: #60a5fa rgba(219, 234, 254, .76);
        scrollbar-width: thin;
    }

    .hvac-product-rail-list::-webkit-scrollbar,
    .dashboard-offer-list::-webkit-scrollbar {
        width: 8px;
    }

    .hvac-product-rail-list::-webkit-scrollbar-track,
    .dashboard-offer-list::-webkit-scrollbar-track {
        background: rgba(219, 234, 254, .76);
        border-radius: 999px;
    }

    .hvac-product-rail-list::-webkit-scrollbar-thumb,
    .dashboard-offer-list::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #2563eb, #0ea5e9);
        border-radius: 999px;
    }
}

@media (max-width: 1199px) {
    .hvac-service-layout.has-service-offers,
    .customer-account-shell {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .hvac-desktop-product-rail {
        display: none !important;
    }

    .customer-account-shell > :not(.dashboard-offer-rail),
    .dashboard-offer-rail {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .dashboard-offer-rail {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        position: static !important;
        width: 100% !important;
    }

    .dashboard-offer-list {
        display: flex !important;
        gap: 14px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 4px 4px 14px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .offer-rail-card.dashboard-offer-card {
        flex: 0 0 min(290px, 82vw) !important;
        scroll-snap-align: start;
    }
}

@media (max-width: 640px) {
    .dashboard-offer-rail {
        border-radius: 24px !important;
        margin-inline: 0 !important;
        padding: 16px !important;
    }

    .dashboard-offer-rail-heading h2,
    .hvac-product-rail-heading h2 {
        font-size: 22px !important;
        line-height: 1.08 !important;
    }

    .offer-rail-card .offer-rail-image {
        min-height: 118px !important;
    }

    .offer-rail-card .offer-rail-title {
        font-size: 15px !important;
    }
}

/* ========================================================================
   BrijjPro mobile containment pass
   ------------------------------------------------------------------------
   Some mobile Chrome views report a wider layout viewport than the visible
   device width, which can allow desktop service-offer rails to remain active.
   These rules force service pages and dashboards into a true single-column
   phone/tablet layout, keep offers swipeable, and prevent the clipped “solid”
   page behavior reported during cellphone testing.
   ======================================================================== */
@media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-width: 1100px) {
    html,
    body {
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        width: 100%;
    }

    .home-clean-layout,
    .hvac-service-layout,
    .hvac-service-layout.has-service-offers,
    .hvac-service-layout.no-service-offers,
    .hvac-service-content,
    .customer-account-shell {
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column !important;
        gap: 22px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        margin-inline: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        padding-inline: clamp(14px, 4vw, 22px) !important;
        width: 100% !important;
    }

    .hvac-service-layout.has-service-offers {
        padding-top: 18px !important;
    }

    .hvac-desktop-product-rail {
        display: none !important;
    }

    .hvac-hero-pro,
    .hvac-process-line,
    .hvac-support-panel,
    .hvac-support-list,
    .hvac-proof-strip,
    .home-final-cta,
    .customer-account-hero,
    .account-guidance-grid,
    .account-metrics-grid {
        box-sizing: border-box;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        width: 100% !important;
    }

    .hvac-hero-pro,
    .customer-account-hero {
        gap: 18px !important;
        padding: clamp(20px, 6vw, 30px) !important;
    }

    .hvac-hero-copy,
    .hvac-hero-flow,
    .hvac-hero-media,
    .hvac-hero-media-card,
    .customer-account-hero-copy,
    .customer-account-next-step {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .hvac-hero-copy h1,
    .customer-account-hero-copy h1 {
        font-size: clamp(30px, 9vw, 44px) !important;
        letter-spacing: 0 !important;
        line-height: 1.06 !important;
        overflow-wrap: anywhere;
    }

    .hvac-hero-copy p,
    .customer-account-hero-copy p {
        font-size: clamp(15px, 4vw, 18px) !important;
        line-height: 1.55 !important;
    }

    .hvac-hero-actions,
    .customer-account-actions,
    .account-action-grid {
        align-items: stretch !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }

    .hvac-primary-btn,
    .customer-account-action,
    .account-action-card {
        justify-content: center !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .hvac-hero-media-frame,
    .hvac-hero-media-slide,
    .hvac-hero-media-slide img,
    .hvac-hero-media-slide video {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .hvac-flow-card,
    .customer-account-next-step {
        border-radius: 24px !important;
        padding: 18px !important;
    }

    .hvac-flow-item,
    .account-action-card {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .hvac-process-band,
    .hvac-support-panel,
    .hvac-proof-strip,
    .hvac-action-zone,
    .account-result-section {
        margin-inline: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .hvac-process-line,
    .hvac-support-list,
    .account-guidance-grid,
    .account-metrics-grid {
        gap: 14px !important;
    }

    .hvac-process-step,
    .hvac-support-item,
    .account-guidance-card,
    .account-metric-card {
        border-radius: 22px !important;
        min-width: 0 !important;
        padding: 18px !important;
        width: 100% !important;
    }

    .home-mobile-product-section.hvac-mobile-product-section {
        display: grid !important;
        gap: 20px !important;
        margin-top: 8px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 18px !important;
        width: 100% !important;
    }

    .home-mobile-product-row {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .home-mobile-product-strip {
        display: flex !important;
        gap: 14px !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 4px 4px 16px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .home-product-offer,
    .home-mobile-product-strip .home-product-offer {
        flex: 0 0 min(82vw, 330px) !important;
        max-width: min(82vw, 330px) !important;
        min-width: min(82vw, 330px) !important;
        scroll-snap-align: start;
        width: min(82vw, 330px) !important;
    }

    .dashboard-offer-rail {
        background:
            radial-gradient(circle at 0 0, rgba(37, 99, 235, .12), transparent 34%),
            linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(245, 249, 255, .96)) !important;
        border: 1px solid rgba(191, 219, 254, .72) !important;
        border-radius: 26px !important;
        box-shadow: 0 22px 52px rgba(15, 23, 42, .10) !important;
        display: grid !important;
        gap: 16px !important;
        height: auto !important;
        margin: 8px 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        order: 90;
        overflow: hidden !important;
        padding: 18px !important;
        position: static !important;
        width: 100% !important;
    }

    .dashboard-offer-rail-right {
        order: 91;
    }

    .dashboard-offer-list {
        display: flex !important;
        gap: 14px !important;
        max-height: none !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 4px 4px 16px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .offer-rail-card.dashboard-offer-card,
    .offer-rail-card.hvac-rail-product {
        flex: 0 0 min(82vw, 330px) !important;
        max-width: min(82vw, 330px) !important;
        min-width: min(82vw, 330px) !important;
        scroll-snap-align: start;
        width: min(82vw, 330px) !important;
    }

    .offer-rail-card .offer-rail-image {
        aspect-ratio: 16 / 10 !important;
        min-height: 118px !important;
        object-fit: contain !important;
        width: 100% !important;
    }

    .dashboard-offer-search input,
    .hvac-product-search input {
        min-width: 0 !important;
        pointer-events: auto !important;
        width: 100% !important;
    }
}

@media (max-width: 520px) {
    .hvac-service-layout,
    .hvac-service-layout.has-service-offers,
    .customer-account-shell {
        padding-inline: 12px !important;
    }

    .hvac-hero-pro,
    .customer-account-hero {
        border-radius: 26px !important;
        padding: 18px !important;
    }

    .hvac-hero-copy h1,
    .customer-account-hero-copy h1 {
        font-size: clamp(28px, 10vw, 38px) !important;
    }

    .hvac-eyebrow,
    .customer-account-kicker {
        max-width: 100%;
        white-space: normal !important;
    }

    .home-product-offer,
    .home-mobile-product-strip .home-product-offer,
    .offer-rail-card.dashboard-offer-card,
    .offer-rail-card.hvac-rail-product {
        flex-basis: min(86vw, 310px) !important;
        max-width: min(86vw, 310px) !important;
        min-width: min(86vw, 310px) !important;
        width: min(86vw, 310px) !important;
    }
}

/* ========================================================================
   BrijjPro desktop service-offer rail repair
   These rules intentionally live at the end of the stylesheet because the
   mobile swipe styles above also touch the same product-card classes. The
   desktop layout must keep product and advertising cards readable, searchable,
   and vertically scrollable on service home pages and account dashboards.
   ======================================================================== */
@media (min-width: 901px) {
    .hvac-service-layout.has-service-offers {
        align-items: start !important;
        display: grid !important;
        grid-template-columns: minmax(260px, 330px) minmax(0, 1fr) !important;
        gap: clamp(24px, 2.5vw, 46px) !important;
        margin-inline: auto !important;
        max-width: min(1780px, calc(100vw - 48px)) !important;
        padding-inline: clamp(18px, 2vw, 30px) !important;
    }

    .hvac-service-content,
    .customer-account-shell > :not(.dashboard-offer-rail) {
        min-width: 0 !important;
    }

    .hvac-desktop-product-rail,
    .dashboard-offer-rail {
        align-self: start !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        height: min(780px, calc(100vh - 118px)) !important;
        min-height: 620px !important;
        overflow: hidden !important;
        padding: 22px !important;
        position: sticky !important;
        top: 88px !important;
        width: 100% !important;
    }

    .hvac-product-rail-heading,
    .dashboard-offer-rail-heading,
    .hvac-product-search,
    .dashboard-offer-search {
        flex: 0 0 auto !important;
    }

    .hvac-product-rail-list,
    .dashboard-offer-list {
        align-content: start !important;
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        gap: 16px !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 2px 8px 18px 2px !important;
        scroll-snap-type: none !important;
        -webkit-overflow-scrolling: touch;
    }

    .offer-rail-card.hvac-rail-product,
    .offer-rail-card.dashboard-offer-card {
        align-content: start !important;
        align-items: stretch !important;
        display: grid !important;
        flex: 0 0 auto !important;
        gap: 10px !important;
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        min-height: 0 !important;
        min-width: 0 !important;
        overflow: visible !important;
        padding: 14px !important;
        scroll-snap-align: none !important;
        width: 100% !important;
    }

    .offer-rail-card .offer-rail-badge {
        align-self: start !important;
        display: inline-flex !important;
        justify-self: start !important;
        max-width: 100% !important;
        position: static !important;
        transform: none !important;
        white-space: nowrap !important;
        z-index: auto !important;
    }

    .offer-rail-card .offer-rail-image {
        aspect-ratio: 16 / 10 !important;
        display: block !important;
        height: auto !important;
        max-height: 150px !important;
        min-height: 122px !important;
        object-fit: contain !important;
        object-position: center !important;
        position: static !important;
        transform: none !important;
        width: 100% !important;
    }

    .offer-rail-card .offer-rail-title,
    .offer-rail-card .offer-rail-detail,
    .offer-rail-card .offer-rail-price {
        display: block !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        position: static !important;
        transform: none !important;
    }

    .offer-rail-card .offer-rail-title {
        font-size: 15px !important;
        line-height: 1.18 !important;
    }

    .offer-rail-card .offer-rail-detail {
        font-size: 12.5px !important;
        line-height: 1.35 !important;
    }

    .offer-rail-card .offer-rail-price {
        font-size: 18px !important;
        line-height: 1.1 !important;
    }

    .customer-account-shell {
        align-items: start !important;
        display: grid !important;
        gap: clamp(20px, 1.8vw, 34px) !important;
        grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(240px, 300px) !important;
        margin-inline: auto !important;
        max-width: min(1760px, calc(100vw - 44px)) !important;
    }

    .dashboard-offer-rail-left {
        grid-column: 1 !important;
        grid-row: 1 / span 80 !important;
    }

    .dashboard-offer-rail-right {
        grid-column: 3 !important;
        grid-row: 1 / span 80 !important;
    }
}

@media (min-width: 901px) and (max-width: 1450px) {
    .hvac-service-layout.has-service-offers {
        gap: 22px !important;
        grid-template-columns: minmax(235px, 285px) minmax(0, 1fr) !important;
        max-width: min(1500px, calc(100vw - 28px)) !important;
    }

    .customer-account-shell {
        gap: 18px !important;
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(220px, 260px) !important;
        max-width: min(1540px, calc(100vw - 28px)) !important;
    }

    .hvac-desktop-product-rail,
    .dashboard-offer-rail {
        padding: 18px !important;
    }

    .offer-rail-card.hvac-rail-product,
    .offer-rail-card.dashboard-offer-card {
        padding: 12px !important;
    }

    .offer-rail-card .offer-rail-image {
        max-height: 130px !important;
        min-height: 104px !important;
    }
}

/* Final BrijjPro service-offer layout repair.
   These rules intentionally sit at the end of the file because older desktop,
   tablet, and phone offer-card styles are broad and can otherwise compress the
   product cards into overlapping strips. Keep this block scoped to service
   offer surfaces so normal dashboard cards and form cards keep their own layout. */
[hidden] {
    display: none !important;
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .hvac-service-layout.has-service-offers {
        display: grid !important;
        grid-template-columns: minmax(286px, 340px) minmax(0, 1fr) !important;
        align-items: start !important;
        gap: clamp(28px, 3vw, 54px) !important;
        width: min(1880px, calc(100vw - 64px)) !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: clamp(28px, 3vw, 54px) 0 !important;
        overflow: visible !important;
    }

    .customer-account-shell {
        display: grid !important;
        grid-template-columns: minmax(276px, 330px) minmax(0, 1fr) minmax(276px, 330px) !important;
        align-items: start !important;
        gap: clamp(26px, 2.5vw, 48px) !important;
        width: min(1880px, calc(100vw - 64px)) !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding-inline: 0 !important;
        overflow: visible !important;
    }

    .hvac-service-layout .hvac-page,
    .customer-account-shell .customer-dashboard-main {
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .customer-account-shell .customer-dashboard-main {
        grid-column: 2 !important;
        grid-row: auto !important;
    }

    .hvac-desktop-product-rail,
    .dashboard-offer-rail {
        position: sticky !important;
        top: 96px !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 340px !important;
        height: calc(100vh - 122px) !important;
        min-height: 650px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 28px 22px !important;
        overflow: hidden !important;
        border: 1px solid rgba(88, 150, 255, 0.28) !important;
        border-radius: 30px !important;
        background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.86)) !important;
        box-shadow: 0 28px 70px rgba(11, 31, 63, 0.12) !important;
    }

    .hvac-desktop-product-rail {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .dashboard-offer-rail-left {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .dashboard-offer-rail-right {
        grid-column: 3 !important;
        grid-row: auto !important;
    }

    .hvac-product-rail-list,
    .dashboard-offer-list {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        gap: 16px !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 4px 8px 16px 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scroll-behavior: smooth !important;
        overscroll-behavior: contain !important;
    }

    .hvac-product-rail-list::-webkit-scrollbar,
    .dashboard-offer-list::-webkit-scrollbar {
        width: 8px;
    }

    .hvac-product-rail-list::-webkit-scrollbar-thumb,
    .dashboard-offer-list::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.42);
    }

    .hvac-desktop-product-rail .offer-rail-card,
    .dashboard-offer-rail .offer-rail-card {
        position: relative !important;
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 286px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 18px !important;
        overflow: visible !important;
        border: 1px solid rgba(145, 185, 245, 0.42) !important;
        border-radius: 22px !important;
        background: rgba(255, 255, 255, 0.94) !important;
        box-shadow: 0 18px 42px rgba(10, 39, 85, 0.1) !important;
        text-decoration: none !important;
        transform: none !important;
    }

    .hvac-desktop-product-rail .offer-rail-card > *,
    .dashboard-offer-rail .offer-rail-card > * {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .hvac-desktop-product-rail .offer-rail-card .offer-rail-badge,
    .dashboard-offer-rail .offer-rail-card .offer-rail-badge {
        align-self: flex-start !important;
        display: inline-flex !important;
        width: auto !important;
        margin: 0 0 12px !important;
        padding: 6px 12px !important;
        border-radius: 999px !important;
        background: rgba(226, 239, 255, 0.94) !important;
        color: #0b55d9 !important;
        font-size: 0.72rem !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
        line-height: 1.1 !important;
    }

    .hvac-desktop-product-rail .offer-rail-card .offer-rail-image,
    .dashboard-offer-rail .offer-rail-card .offer-rail-image {
        display: block !important;
        width: 100% !important;
        height: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
        margin: 0 0 14px !important;
        padding: 10px !important;
        border: 1px solid rgba(167, 197, 238, 0.55) !important;
        border-radius: 16px !important;
        background: #f8fbff !important;
        object-fit: contain !important;
    }

    .hvac-desktop-product-rail .offer-rail-card .offer-rail-title,
    .dashboard-offer-rail .offer-rail-card .offer-rail-title {
        margin: 0 0 6px !important;
        color: #061832 !important;
        font-size: 1rem !important;
        font-weight: 900 !important;
        line-height: 1.18 !important;
    }

    .hvac-desktop-product-rail .offer-rail-card .offer-rail-detail,
    .dashboard-offer-rail .offer-rail-card .offer-rail-detail {
        margin: 0 0 12px !important;
        color: #52637a !important;
        font-size: 0.86rem !important;
        line-height: 1.4 !important;
    }

    .hvac-desktop-product-rail .offer-rail-card .offer-rail-price,
    .dashboard-offer-rail .offer-rail-card .offer-rail-price {
        margin-top: auto !important;
        color: #007967 !important;
        font-size: 1.12rem !important;
        font-weight: 950 !important;
        line-height: 1.1 !important;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) and (hover: hover) and (pointer: fine) {
    .hvac-service-layout.has-service-offers,
    .customer-account-shell {
        width: min(1480px, calc(100vw - 44px)) !important;
        gap: 24px !important;
    }

    .customer-account-shell {
        grid-template-columns: 254px minmax(0, 1fr) 254px !important;
    }

    .hvac-service-layout.has-service-offers {
        grid-template-columns: 254px minmax(0, 1fr) !important;
    }

    .hvac-desktop-product-rail,
    .dashboard-offer-rail {
        max-width: 254px !important;
        padding: 22px 16px !important;
    }

    .hvac-desktop-product-rail .offer-rail-card,
    .dashboard-offer-rail .offer-rail-card {
        min-height: 246px !important;
        padding: 14px !important;
    }

    .hvac-desktop-product-rail .offer-rail-card .offer-rail-image,
    .dashboard-offer-rail .offer-rail-card .offer-rail-image {
        height: 124px !important;
        min-height: 124px !important;
        max-height: 124px !important;
    }
}

@media (max-width: 1199px), (hover: none), (pointer: coarse) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .hvac-service-layout.has-service-offers,
    .customer-account-shell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 18px clamp(14px, 4vw, 28px) !important;
        overflow: visible !important;
    }

    .hvac-desktop-product-rail {
        display: none !important;
    }

    .dashboard-offer-rail {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 22px 0 !important;
        padding: 22px !important;
        overflow: visible !important;
        border-radius: 26px !important;
    }

    .dashboard-offer-list,
    .home-mobile-product-strip,
    .home-product-row {
        display: flex !important;
        flex-flow: row nowrap !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px 4px 18px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .dashboard-offer-rail .offer-rail-card,
    .home-mobile-product-strip .home-product-offer,
    .home-product-row .home-product-offer {
        display: flex !important;
        flex: 0 0 min(82vw, 360px) !important;
        flex-direction: column !important;
        min-width: min(82vw, 360px) !important;
        min-height: 250px !important;
        max-width: 360px !important;
        overflow: visible !important;
        scroll-snap-align: start !important;
    }

    .dashboard-offer-rail .offer-rail-card .offer-rail-image,
    .home-mobile-product-strip .home-product-offer img,
    .home-product-row .home-product-offer img {
        width: 100% !important;
        height: 150px !important;
        max-height: 150px !important;
        object-fit: contain !important;
    }

    .home-mobile-product-section,
    .hvac-mobile-product-section {
        display: block !important;
        width: 100% !important;
        margin: 28px 0 !important;
        overflow: visible !important;
    }
}

/* Final mobile/tablet app-width repair for selected service and account pages.
   The beginning service finder already has the correct phone layout, so this
   block deliberately targets the selected-service HVAC experience and the
   homeowner dashboard. It prevents those pages from looking like a small
   desktop screenshot centered inside the phone or tablet browser. */
@media (max-width: 1199px), (hover: none), (pointer: coarse) {
    .page-body:has(.hvac-service-layout),
    .page-body:has(.customer-account-shell) {
        box-sizing: border-box !important;
        display: block !important;
        width: min(calc(100vw - 16px), 1040px) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding: 14px 0 34px !important;
        overflow-x: hidden !important;
    }

    .page-body:has(.home-service-finder):not(:has(.hvac-service-layout)) {
        width: calc(100% - (var(--mobile-page-gutter) * 2)) !important;
    }

    .home-clean-layout:has(.hvac-service-layout),
    .hvac-service-layout,
    .hvac-service-layout.has-service-offers,
    .hvac-service-layout.no-service-offers,
    .hvac-service-content,
    .customer-account-shell,
    .customer-account-shell > :not(.dashboard-offer-rail) {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        overflow-x: hidden !important;
    }

    .hvac-desktop-product-rail {
        display: none !important;
    }

    .hvac-hero-pro,
    .hvac-process-band,
    .hvac-support-panel,
    .home-mobile-product-section.hvac-mobile-product-section,
    .hvac-action-zone,
    .customer-account-hero,
    .account-guidance-grid,
    .account-metric-strip,
    .account-result-section,
    .dashboard-offer-rail {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        overflow: hidden !important;
    }

    .hvac-hero-pro,
    .customer-account-hero {
        border-radius: clamp(20px, 5vw, 30px) !important;
        padding: clamp(18px, 4.8vw, 32px) !important;
    }

    .hvac-hero-media-card,
    .hvac-hero-copy,
    .hvac-hero-panel,
    .customer-account-hero-copy,
    .customer-account-actions {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .hvac-hero-copy h1,
    .customer-account-hero h1 {
        font-size: clamp(32px, 8.6vw, 54px) !important;
        line-height: 1.08 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .hvac-hero-copy p,
    .customer-account-hero p,
    .hvac-process-heading p,
    .hvac-support-copy p,
    .home-mobile-product-section .section-title p,
    .hvac-action-zone .home-final-cta p {
        font-size: clamp(16px, 4.2vw, 21px) !important;
        line-height: 1.55 !important;
        max-width: 100% !important;
    }

    .home-hero-actions .home-primary-btn,
    .hvac-action-zone .home-final-cta .home-primary-btn,
    .account-action-card {
        box-sizing: border-box !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 54px !important;
        white-space: normal !important;
    }

    .home-trust-row {
        display: grid !important;
        gap: 12px !important;
        justify-items: start !important;
    }

    .hvac-panel-metric {
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .hvac-process-heading,
    .hvac-support-copy,
    .home-mobile-product-section .section-title {
        max-width: 100% !important;
        text-align: left !important;
    }

    .hvac-process-line {
        display: grid !important;
        grid-auto-flow: row !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }

    .hvac-process-line article {
        box-sizing: border-box !important;
        display: flex !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: clamp(18px, 4.8vw, 26px) !important;
        overflow: hidden !important;
    }

    .hvac-support-panel,
    .hvac-support-list,
    .account-guidance-grid,
    .account-metric-strip {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    .hvac-support-list article,
    .account-guidance-card,
    .account-metric-item {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .home-mobile-product-section.hvac-mobile-product-section {
        border-radius: clamp(20px, 5vw, 30px) !important;
        margin-top: 22px !important;
        padding: clamp(18px, 4.8vw, 30px) !important;
    }

    .home-mobile-product-strip,
    .dashboard-offer-list {
        box-sizing: border-box !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 4px 2px 18px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .home-mobile-product-strip .home-product-offer,
    .dashboard-offer-rail .offer-rail-card {
        box-sizing: border-box !important;
        flex: 0 0 min(90vw, 430px) !important;
        width: min(90vw, 430px) !important;
        max-width: min(90vw, 430px) !important;
        min-width: min(90vw, 430px) !important;
        overflow: hidden !important;
        scroll-snap-align: start !important;
    }

    .hvac-action-zone .hvac-proof-strip {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        border-radius: clamp(20px, 5vw, 30px) !important;
        overflow: hidden !important;
    }

    .hvac-action-zone .home-final-cta {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: stretch !important;
        border-radius: clamp(20px, 5vw, 30px) !important;
        padding: clamp(24px, 6vw, 38px) !important;
        text-align: center !important;
    }
}

@media (max-width: 520px) {
    .page-body:has(.hvac-service-layout),
    .page-body:has(.customer-account-shell) {
        width: calc(100vw - 12px) !important;
    }

    .hvac-hero-pro,
    .customer-account-hero,
    .home-mobile-product-section.hvac-mobile-product-section,
    .hvac-action-zone .home-final-cta,
    .hvac-action-zone .hvac-proof-strip {
        border-radius: 22px !important;
    }

    .hvac-hero-copy h1,
    .customer-account-hero h1 {
        font-size: clamp(31px, 9.4vw, 42px) !important;
    }
}

/* Final desktop composition repair for service and dashboard pages.
   The Windows browser layouts need a tighter centered canvas than the old
   full-viewport rail rules allowed. This block keeps offer rails connected to
   the main content while preventing hero, proof, and CTA sections from running
   outside the designed page width. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .page-body:has(.home-clean-layout),
    .page-body:has(.customer-account-shell) {
        box-sizing: border-box !important;
        width: min(calc(100vw - 72px), 1720px) !important;
        max-width: 1720px !important;
        overflow: visible !important;
        padding-top: clamp(42px, 4vw, 86px) !important;
        padding-bottom: clamp(48px, 4vw, 86px) !important;
    }

    .home-clean-layout,
    .hvac-service-layout.has-service-offers,
    .hvac-service-layout.no-service-offers,
    .hvac-service-content,
    .customer-account-shell,
    .customer-account-shell > :not(.dashboard-offer-rail) {
        box-sizing: border-box !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .hvac-service-layout.has-service-offers {
        align-items: start !important;
        display: grid !important;
        gap: clamp(24px, 2vw, 36px) !important;
        grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) !important;
        margin: 0 auto !important;
        overflow: visible !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .hvac-service-layout.no-service-offers {
        margin: 0 auto !important;
        width: min(100%, 1320px) !important;
    }

    .hvac-desktop-product-rail,
    .dashboard-offer-rail {
        height: calc(100vh - 132px) !important;
        max-height: 760px !important;
        min-height: 560px !important;
        padding: 22px 18px !important;
        top: 92px !important;
    }

    .hvac-service-content {
        display: grid !important;
        gap: clamp(28px, 2.2vw, 42px) !important;
        overflow: visible !important;
        width: 100% !important;
    }

    .hvac-hero-pro,
    .hvac-process-band,
    .hvac-support-panel,
    .hvac-action-zone,
    .hvac-action-zone .hvac-proof-strip,
    .hvac-action-zone .home-final-cta {
        box-sizing: border-box !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .hvac-hero-pro {
        grid-template-columns: minmax(280px, .88fr) minmax(300px, .9fr) minmax(250px, .62fr) !important;
        gap: clamp(18px, 1.6vw, 28px) !important;
        padding: clamp(26px, 2.4vw, 42px) !important;
    }

    .hvac-hero-copy {
        padding: clamp(18px, 1.4vw, 26px) !important;
    }

    .hvac-hero-panel {
        min-width: 0 !important;
    }

    .hvac-process-line {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        overflow: hidden !important;
    }

    .hvac-process-line article {
        min-width: 0 !important;
    }

    .hvac-support-panel {
        grid-template-columns: minmax(250px, .74fr) minmax(0, 1.26fr) !important;
    }

    .hvac-action-zone .hvac-proof-strip {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .hvac-action-zone .home-final-cta {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .hvac-action-zone .home-final-cta .home-primary-btn {
        max-width: 220px !important;
        min-width: 170px !important;
        white-space: normal !important;
    }

    .customer-account-shell {
        align-items: start !important;
        display: grid !important;
        gap: clamp(22px, 1.8vw, 34px) !important;
        grid-template-columns: minmax(260px, 310px) minmax(0, 1fr) minmax(260px, 310px) !important;
        margin: 0 auto !important;
        overflow: visible !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .customer-account-shell > :not(.dashboard-offer-rail) {
        grid-column: 2 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .dashboard-offer-rail-left {
        grid-column: 1 !important;
        grid-row: 1 / span 100 !important;
    }

    .dashboard-offer-rail-right {
        grid-column: 3 !important;
        grid-row: 1 / span 100 !important;
    }

    .customer-account-hero,
    .account-guidance-grid,
    .account-metric-strip,
    .account-result-section {
        box-sizing: border-box !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .customer-account-hero {
        grid-template-columns: minmax(0, .92fr) minmax(340px, .88fr) !important;
        margin-top: 0 !important;
        padding: clamp(32px, 3vw, 58px) !important;
    }

    .customer-account-hero h1 {
        font-size: clamp(40px, 3.2vw, 58px) !important;
        line-height: 1.05 !important;
    }

    .account-guidance-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .account-metric-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) and (hover: hover) and (pointer: fine) {
    .page-body:has(.home-clean-layout),
    .page-body:has(.customer-account-shell) {
        width: min(calc(100vw - 44px), 1440px) !important;
    }

    .hvac-service-layout.has-service-offers {
        gap: 22px !important;
        grid-template-columns: minmax(230px, 270px) minmax(0, 1fr) !important;
    }

    .customer-account-shell {
        gap: 20px !important;
        grid-template-columns: minmax(220px, 250px) minmax(0, 1fr) minmax(220px, 250px) !important;
    }

    .hvac-hero-pro {
        grid-template-columns: minmax(240px, .9fr) minmax(280px, .96fr) !important;
    }

    .hvac-hero-panel {
        grid-column: 1 / -1 !important;
    }

    .customer-account-hero {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Final responsive containment for HVAC service and homeowner dashboard pages.
   These rules sit at the end because the page has several earlier responsive
   repair layers; keeping the mobile contract here prevents later rail/card
   styles from reintroducing horizontal clipping on phone and tablet browsers. */
@media (max-width: 1199px), (hover: none), (pointer: coarse) {
    html,
    body,
    .page-body:has(.home-clean-layout),
    .page-body:has(.customer-account-shell) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .page-body:has(.home-clean-layout),
    .page-body:has(.customer-account-shell) {
        box-sizing: border-box !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .home-clean-layout,
    .hvac-service-layout,
    .hvac-service-layout.has-service-offers,
    .hvac-service-layout.no-service-offers,
    .hvac-service-content,
    .customer-account-shell,
    .customer-account-shell > :not(.dashboard-offer-rail),
    .customer-dashboard-main {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: auto !important;
        margin-left: auto !important;
        overflow-x: hidden !important;
    }

    .hvac-service-layout.has-service-offers,
    .hvac-service-layout.no-service-offers,
    .customer-account-shell {
        padding: 14px clamp(10px, 3.5vw, 18px) !important;
    }

    .hvac-hero-pro,
    .hvac-hero-media-card,
    .hvac-hero-copy,
    .hvac-hero-panel,
    .hvac-process-band,
    .hvac-process-heading,
    .hvac-support-panel,
    .hvac-support-copy,
    .hvac-action-zone,
    .hvac-action-zone .hvac-proof-strip,
    .hvac-action-zone .home-final-cta,
    .home-mobile-product-section,
    .hvac-mobile-product-section,
    .dashboard-offer-rail,
    .customer-account-hero,
    .account-guidance-grid,
    .account-metric-strip,
    .account-result-section,
    .account-summary-card {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        overflow-x: hidden !important;
    }

    .hvac-hero-copy h1,
    .hvac-hero-copy p,
    .hvac-hero-panel *,
    .hvac-process-heading h2,
    .hvac-process-heading p,
    .hvac-support-copy h2,
    .hvac-support-copy p,
    .hvac-action-zone .home-final-cta h2,
    .hvac-action-zone .home-final-cta p,
    .customer-account-hero h1,
    .customer-account-hero p,
    .dashboard-offer-rail-heading h2,
    .dashboard-offer-rail-heading p,
    .account-summary-card * {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .hvac-process-line,
    .home-mobile-product-strip,
    .home-product-row,
    .dashboard-offer-list {
        box-sizing: border-box !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 4px 2px 16px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .hvac-process-line article,
    .home-mobile-product-strip .home-product-offer,
    .home-product-row .home-product-offer,
    .dashboard-offer-rail .offer-rail-card {
        box-sizing: border-box !important;
        flex: 0 0 min(82vw, 360px) !important;
        width: min(82vw, 360px) !important;
        max-width: min(82vw, 360px) !important;
        min-width: 0 !important;
        overflow: hidden !important;
        scroll-snap-align: start !important;
    }

    .hvac-support-list,
    .hvac-action-zone .hvac-proof-strip,
    .account-guidance-grid,
    .account-metric-strip {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .hvac-action-zone .home-final-cta .home-primary-btn,
    .customer-account-hero a,
    .account-summary-card .account-summary-action {
        box-sizing: border-box !important;
        max-width: 100% !important;
        white-space: normal !important;
    }
}

/* Last-word mobile/tablet service page contract.
   This block intentionally follows every older responsive repair so selected
   service and account pages fill the phone/tablet browser like an app screen,
   while the already-good beginning service finder keeps its own layout. */
@media (max-width: 1199px), (hover: none), (pointer: coarse) {
    .page-body:has(.hvac-service-layout),
    .page-body:has(.customer-account-shell) {
        box-sizing: border-box !important;
        width: min(calc(100vw - 12px), 1040px) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        padding: 12px 0 34px !important;
        overflow-x: hidden !important;
    }

    .page-body:has(.home-service-finder):not(:has(.hvac-service-layout)) {
        width: calc(100% - (var(--mobile-page-gutter) * 2)) !important;
    }

    .home-clean-layout:has(.hvac-service-layout),
    .hvac-service-layout,
    .hvac-service-layout.has-service-offers,
    .hvac-service-layout.no-service-offers,
    .hvac-service-content,
    .customer-account-shell,
    .customer-account-shell > :not(.dashboard-offer-rail) {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
        overflow-x: hidden !important;
    }

    .hvac-hero-pro,
    .hvac-process-band,
    .hvac-support-panel,
    .home-mobile-product-section.hvac-mobile-product-section,
    .hvac-action-zone,
    .customer-account-hero,
    .account-guidance-grid,
    .account-metric-strip,
    .account-result-section,
    .dashboard-offer-rail {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-inline: 0 !important;
        overflow: hidden !important;
    }

    .hvac-hero-pro,
    .customer-account-hero,
    .home-mobile-product-section.hvac-mobile-product-section,
    .hvac-action-zone .home-final-cta,
    .hvac-action-zone .hvac-proof-strip {
        border-radius: clamp(20px, 5vw, 30px) !important;
    }

    .hvac-hero-pro,
    .customer-account-hero {
        padding: clamp(18px, 4.8vw, 32px) !important;
    }

    .hvac-process-line {
        display: grid !important;
        grid-auto-flow: row !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }

    .hvac-process-line article {
        box-sizing: border-box !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: clamp(18px, 4.8vw, 26px) !important;
        overflow: hidden !important;
    }

    .hvac-support-panel,
    .hvac-support-list,
    .account-guidance-grid,
    .account-metric-strip,
    .hvac-action-zone .hvac-proof-strip,
    .hvac-action-zone .home-final-cta {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    .hvac-hero-copy h1,
    .customer-account-hero h1 {
        font-size: clamp(31px, 9.2vw, 54px) !important;
        line-height: 1.08 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .hvac-hero-copy p,
    .customer-account-hero p,
    .hvac-process-heading p,
    .hvac-support-copy p,
    .home-mobile-product-section .section-title p,
    .hvac-action-zone .home-final-cta p {
        font-size: clamp(16px, 4.1vw, 21px) !important;
        line-height: 1.55 !important;
    }

    .home-hero-actions .home-primary-btn,
    .hvac-action-zone .home-final-cta .home-primary-btn,
    .account-action-card {
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 54px !important;
        white-space: normal !important;
    }

    .home-mobile-product-strip,
    .dashboard-offer-list {
        display: flex !important;
        flex-flow: row nowrap !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px 2px 18px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .home-mobile-product-strip .home-product-offer,
    .dashboard-offer-rail .offer-rail-card {
        flex: 0 0 min(90vw, 430px) !important;
        width: min(90vw, 430px) !important;
        max-width: min(90vw, 430px) !important;
        min-width: min(90vw, 430px) !important;
        overflow: hidden !important;
        scroll-snap-align: start !important;
    }
}

/* Final mobile/tablet dashboard order.
   The account view renders offer rails before the dashboard content so desktop
   can place rails on the left and right. Mobile needs the business content
   first, with product and advertising rails after the homeowner dashboard. */
@media (max-width: 1199px), (hover: none), (pointer: coarse) {
    .customer-account-shell {
        display: flex !important;
        flex-direction: column !important;
    }

    .customer-account-shell > :not(.dashboard-offer-rail) {
        order: 1 !important;
    }

    .dashboard-offer-rail-left {
        order: 90 !important;
    }

    .dashboard-offer-rail-right {
        order: 91 !important;
    }
}

/* Final desktop Home/HVAC lower-section composition.
   The offer rail should have a stronger vertical presence, and the final
   proof/CTA area should use the full service-page canvas instead of staying
   locked inside the right content column. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .hvac-service-layout.has-service-offers {
        --hvac-desktop-rail-width: clamp(250px, 17vw, 320px);
        --hvac-desktop-rail-gap: clamp(24px, 2vw, 36px);
        grid-template-columns: var(--hvac-desktop-rail-width) minmax(0, 1fr) !important;
    }

    .hvac-service-layout.has-service-offers .hvac-desktop-product-rail {
        height: calc(100vh - 96px) !important;
        max-height: 920px !important;
        min-height: 700px !important;
        margin-top: clamp(14px, 1.8vw, 34px) !important;
    }

    .hvac-service-layout.has-service-offers .hvac-action-zone {
        margin-left: calc((var(--hvac-desktop-rail-width) + var(--hvac-desktop-rail-gap)) * -1) !important;
        width: calc(100% + var(--hvac-desktop-rail-width) + var(--hvac-desktop-rail-gap)) !important;
        max-width: none !important;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) and (hover: hover) and (pointer: fine) {
    .hvac-service-layout.has-service-offers {
        --hvac-desktop-rail-width: 250px;
        --hvac-desktop-rail-gap: 22px;
    }

    .hvac-service-layout.has-service-offers .hvac-action-zone {
        margin-left: calc((var(--hvac-desktop-rail-width) + var(--hvac-desktop-rail-gap)) * -1) !important;
        width: calc(100% + var(--hvac-desktop-rail-width) + var(--hvac-desktop-rail-gap)) !important;
    }
}

/* Final desktop sales/ad rail vertical tuning.
   Home/HVAC should align the sales rail with the main hero box and give it a
   little more lower reach. The customer dashboard keeps its main content at the
   current top position while the side sales/ad rails start lower. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .hvac-service-layout.has-service-offers .hvac-desktop-product-rail {
        height: calc(100vh - 72px) !important;
        max-height: 980px !important;
        min-height: 740px !important;
        margin-top: 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        margin-top: clamp(42px, 4vw, 82px) !important;
    }
}

/* Final desktop customer-dashboard side rail enlargement.
   The homeowner dashboard center stays stable, while the left and right
   sales/ad panels get a stronger desktop presence. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .page-body:has(.customer-account-shell) {
        width: min(calc(100vw - 44px), 1840px) !important;
        max-width: 1840px !important;
    }

    .customer-account-shell {
        gap: clamp(22px, 1.8vw, 34px) !important;
        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(300px, 360px) !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        height: calc(100vh - 52px) !important;
        max-height: 1080px !important;
        min-height: 860px !important;
        margin-top: clamp(18px, 2vw, 38px) !important;
        max-width: 360px !important;
        padding: 24px 20px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) and (hover: hover) and (pointer: fine) {
    .customer-account-shell {
        grid-template-columns: minmax(250px, 290px) minmax(0, 1fr) minmax(250px, 290px) !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        max-height: 980px !important;
        min-height: 780px !important;
        max-width: 290px !important;
    }
}

/* Beginning home search mini-logo.
   This keeps the trusted BrijjPro mark inside the search field so the service
   intake looks branded without creating an extra desktop grid column. */
.service-search-mini-logo {
    align-items: center;
    display: flex;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    right: clamp(14px, 1.8vw, 22px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.service-search-mini-logo img {
    display: block;
    height: clamp(18px, 1.45vw, 26px);
    opacity: .78;
    width: auto;
}

.home-service-finder .service-search-field {
    position: relative;
}

.home-service-finder .service-search-input {
    padding-right: clamp(58px, 6vw, 82px) !important;
}

@media (min-width: 901px) {
    .home-service-finder .service-search-panel {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 420px) !important;
    }
}

@media (max-width: 900px) {
    .service-search-mini-logo {
        right: clamp(12px, 3.4vw, 18px);
    }

    .service-search-mini-logo img {
        height: clamp(18px, 5.4vw, 24px);
        opacity: .72;
    }

    .home-service-finder .service-search-input {
        padding-right: clamp(50px, 14vw, 68px) !important;
    }
}

/* Final customer dashboard desktop height balance.
   The offer rails should flow beside the lower account cards without forcing a
   tall empty middle column after the Repair Results section. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .page-body:has(.customer-account-shell) {
        padding-bottom: clamp(8px, 1vw, 18px) !important;
    }

    .customer-account-shell {
        align-items: start !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        align-self: start !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .customer-account-shell .dashboard-offer-list {
        display: grid !important;
        flex: initial !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) and (hover: hover) and (pointer: fine) {
    .customer-account-shell .dashboard-offer-rail {
        min-height: 0 !important;
    }
}

/* Final customer dashboard compact offer rails.
   Desktop dashboard side offers must not determine the full page height. These
   rules make the ad/product cards smaller and put extra offers inside the rail
   scroll area so the footer follows the homeowner dashboard instead of a long
   advertising column. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .customer-account-shell {
        grid-template-columns: minmax(260px, 310px) minmax(0, 1fr) minmax(260px, 310px) !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        height: clamp(560px, calc(100vh - 138px), 720px) !important;
        max-height: 720px !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 16px 14px !important;
    }

    .customer-account-shell .dashboard-offer-rail-heading {
        gap: 4px !important;
    }

    .customer-account-shell .dashboard-offer-rail-heading h2 {
        font-size: clamp(17px, 1vw, 20px) !important;
        line-height: 1.08 !important;
    }

    .customer-account-shell .dashboard-offer-rail-heading p {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .customer-account-shell .dashboard-offer-search input {
        min-height: 38px !important;
        padding: 0 13px !important;
    }

    .customer-account-shell .dashboard-offer-list {
        display: grid !important;
        flex: 1 1 auto !important;
        gap: 9px !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 2px 5px 10px 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card {
        border-radius: 16px !important;
        display: grid !important;
        gap: 7px !important;
        min-height: 0 !important;
        padding: 10px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-badge {
        font-size: 10px !important;
        margin: 0 !important;
        padding: 5px 9px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-image {
        border-radius: 12px !important;
        height: 88px !important;
        margin: 0 !important;
        min-height: 88px !important;
        max-height: 88px !important;
        padding: 6px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-title {
        font-size: 13px !important;
        line-height: 1.16 !important;
        margin: 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-detail {
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-price {
        font-size: 15px !important;
        margin-top: 1px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) and (hover: hover) and (pointer: fine) {
    .customer-account-shell {
        grid-template-columns: minmax(230px, 260px) minmax(0, 1fr) minmax(230px, 260px) !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        height: clamp(520px, calc(100vh - 132px), 660px) !important;
        max-height: 660px !important;
        padding: 14px 12px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-image {
        height: 78px !important;
        min-height: 78px !important;
        max-height: 78px !important;
    }
}

/* Final customer dashboard grid-row and rail reset.
   Older dashboard rail repairs made the side rails span 100 grid rows, which
   creates the long blank page area before the footer. This reset keeps the
   rails beside the visible dashboard sections only and restores readable offer
   cards. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .page-body:has(.customer-account-shell) {
        padding-bottom: 16px !important;
    }

    .customer-account-shell {
        align-items: start !important;
        grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) minmax(280px, 330px) !important;
        grid-auto-rows: auto !important;
    }

    .customer-account-shell .dashboard-offer-rail-left,
    .customer-account-shell .dashboard-offer-rail-right {
        grid-row: 1 / span 6 !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        height: clamp(660px, calc(100vh - 118px), 840px) !important;
        max-height: 840px !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 18px 16px !important;
    }

    .customer-account-shell .dashboard-offer-list {
        display: grid !important;
        flex: 1 1 auto !important;
        gap: 12px !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 2px 6px 12px 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card {
        border-radius: 20px !important;
        display: grid !important;
        gap: 9px !important;
        min-height: 0 !important;
        padding: 13px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-badge {
        font-size: 11px !important;
        margin: 0 !important;
        padding: 6px 10px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-image {
        border-radius: 15px !important;
        height: 118px !important;
        margin: 0 !important;
        min-height: 118px !important;
        max-height: 118px !important;
        padding: 8px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-title {
        font-size: 15px !important;
        line-height: 1.18 !important;
        margin: 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-detail {
        font-size: 12.5px !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-price {
        font-size: 17px !important;
        margin-top: 2px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) and (hover: hover) and (pointer: fine) {
    .customer-account-shell {
        grid-template-columns: minmax(240px, 275px) minmax(0, 1fr) minmax(240px, 275px) !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        height: clamp(610px, calc(100vh - 118px), 760px) !important;
        max-height: 760px !important;
        padding: 16px 14px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-image {
        height: 98px !important;
        min-height: 98px !important;
        max-height: 98px !important;
    }
}

/* Final customer dashboard rail-to-results alignment.
   The side offer boxes should visually reach the lower Repair Results card.
   Stretching the rail within the six visible dashboard rows avoids the old
   blank-page problem while giving the left/right panels the requested length. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .customer-account-shell .dashboard-offer-rail-left,
    .customer-account-shell .dashboard-offer-rail-right {
        align-self: stretch !important;
        grid-row: 1 / span 6 !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .customer-account-shell .dashboard-offer-list {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}

/* ==============================================================================
   FINAL SHARED LIGHT WOOD PAGE BACKGROUND
   ==============================================================================
   This late stylesheet block controls the visible page surface after all page-
   specific layout rules have loaded. The background stays intentionally subtle:
   a very light warm brown base, soft vertical grain lines, and a faint highlight.
   Cards, forms, rails, and dashboard panels remain on their existing white/blue
   surfaces so text contrast, security messages, and business workflows stay
   clean and professional on desktop, phone, and tablet browsers.
   ============================================================================== */
html,
body {
    background-color: var(--wood-page-bg) !important;
}

body {
    background:
        radial-gradient(circle at 9% 2%, rgba(190, 137, 78, .14), transparent 31%),
        radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .58), transparent 34%),
        repeating-linear-gradient(90deg, rgba(143, 97, 52, .045) 0 1px, transparent 1px 68px),
        linear-gradient(180deg, #fbf7ef 0%, #f4ebdd 52%, #f1e7d8 100%) !important;
}

.page-body,
.page-body:has(.home-marketplace-layout),
.page-body:has(.home-clean-layout),
.page-body:has(.home-service-finder),
.page-body:has(.hvac-service-layout),
.page-body:has(.customer-account-shell) {
    background:
        radial-gradient(circle at 16% 4%, rgba(180, 126, 68, .10), transparent 32%),
        repeating-linear-gradient(90deg, rgba(125, 82, 42, .032) 0 1px, transparent 1px 58px),
        linear-gradient(180deg, rgba(255, 250, 242, .80), rgba(245, 237, 224, .88)) !important;
}

/* ==============================================================================
   FINAL CUSTOMER DASHBOARD COMPACT SCROLLING OFFER RAILS
   ==============================================================================
   The homeowner dashboard must stay the main page content on desktop. These
   rules keep the left/right sales and advertising panels visually smaller and
   give each panel its own vertical scroll area, so adding more products does
   not make the whole browser page longer.
   ============================================================================== */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .page-body:has(.customer-account-shell) {
        width: min(calc(100vw - 44px), 1780px) !important;
        padding-bottom: 18px !important;
    }

    .customer-account-shell {
        align-items: start !important;
        gap: clamp(18px, 1.5vw, 28px) !important;
        grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) minmax(220px, 270px) !important;
        grid-auto-rows: auto !important;
    }

    .customer-account-shell .dashboard-offer-rail-left,
    .customer-account-shell .dashboard-offer-rail-right {
        align-self: start !important;
        grid-row: 1 / span 6 !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        border-radius: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        height: clamp(500px, calc(100vh - 150px), 660px) !important;
        max-height: 660px !important;
        min-height: 500px !important;
        max-width: 270px !important;
        margin-top: clamp(14px, 1.6vw, 28px) !important;
        overflow: hidden !important;
        padding: 14px 12px !important;
    }

    .customer-account-shell .dashboard-offer-rail-heading {
        flex: 0 0 auto !important;
        gap: 4px !important;
    }

    .customer-account-shell .dashboard-offer-rail-heading h2 {
        font-size: 17px !important;
        line-height: 1.1 !important;
    }

    .customer-account-shell .dashboard-offer-rail-heading p {
        font-size: 11.5px !important;
        line-height: 1.32 !important;
    }

    .customer-account-shell .dashboard-offer-search {
        flex: 0 0 auto !important;
    }

    .customer-account-shell .dashboard-offer-search input {
        min-height: 36px !important;
        padding: 0 12px !important;
    }

    .customer-account-shell .dashboard-offer-list {
        display: grid !important;
        flex: 1 1 auto !important;
        gap: 8px !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 2px 5px 10px 0 !important;
        scrollbar-gutter: stable !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card {
        border-radius: 15px !important;
        display: grid !important;
        gap: 6px !important;
        min-height: 0 !important;
        padding: 9px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-badge {
        font-size: 10px !important;
        padding: 5px 8px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-image {
        border-radius: 12px !important;
        height: 74px !important;
        min-height: 74px !important;
        max-height: 74px !important;
        padding: 6px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-title {
        font-size: 12.5px !important;
        line-height: 1.16 !important;
        margin: 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-detail {
        font-size: 11px !important;
        line-height: 1.28 !important;
        margin: 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-price {
        font-size: 14px !important;
        margin-top: 1px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) and (hover: hover) and (pointer: fine) {
    .customer-account-shell {
        grid-template-columns: minmax(200px, 235px) minmax(0, 1fr) minmax(200px, 235px) !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        height: clamp(470px, calc(100vh - 146px), 610px) !important;
        max-height: 610px !important;
        min-height: 470px !important;
        max-width: 235px !important;
        padding: 12px 10px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-image {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
    }
}

/* Final dashboard offer rail readability repair.
   The compact pass made the cards too short, so product images and labels were
   visually stacking over one another. This keeps the panel scroll behavior, but
   gives the rail and each offer card enough height to read like real products. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .customer-account-shell {
        grid-template-columns: minmax(270px, 335px) minmax(0, 1fr) minmax(270px, 335px) !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        height: clamp(690px, calc(100vh - 96px), 880px) !important;
        max-height: 880px !important;
        min-height: 690px !important;
        max-width: 335px !important;
        overflow: hidden !important;
        padding: 16px 14px !important;
    }

    .customer-account-shell .dashboard-offer-list {
        align-content: start !important;
        display: grid !important;
        gap: 12px !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 4px 8px 14px 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card {
        align-content: start !important;
        border-radius: 18px !important;
        display: grid !important;
        gap: 9px !important;
        min-height: 210px !important;
        padding: 12px !important;
        overflow: visible !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-image {
        height: 104px !important;
        min-height: 104px !important;
        max-height: 104px !important;
        opacity: 1 !important;
        padding: 8px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-title {
        font-size: 14px !important;
        line-height: 1.18 !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-detail {
        font-size: 12px !important;
        line-height: 1.32 !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-price {
        font-size: 16px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) and (hover: hover) and (pointer: fine) {
    .customer-account-shell {
        grid-template-columns: minmax(245px, 285px) minmax(0, 1fr) minmax(245px, 285px) !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        height: clamp(620px, calc(100vh - 96px), 760px) !important;
        max-height: 760px !important;
        min-height: 620px !important;
        max-width: 285px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card {
        min-height: 188px !important;
        padding: 10px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-image {
        height: 88px !important;
        min-height: 88px !important;
        max-height: 88px !important;
    }
}

/* Final customer dashboard rail length correction.
   The requested change is the height of the left/right search-and-offer boxes,
   not the size of each product card. These rules make the outside rails longer
   and scrollable while restoring compact offer-card sizing inside the rail. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .customer-account-shell {
        grid-template-columns: minmax(245px, 300px) minmax(0, 1fr) minmax(245px, 300px) !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        height: clamp(760px, calc(100vh - 66px), 980px) !important;
        max-height: 980px !important;
        min-height: 760px !important;
        max-width: 300px !important;
        overflow: hidden !important;
    }

    .customer-account-shell .dashboard-offer-list {
        flex: 1 1 auto !important;
        gap: 9px !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card {
        gap: 7px !important;
        min-height: 0 !important;
        padding: 10px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-image {
        height: 82px !important;
        min-height: 82px !important;
        max-height: 82px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-title {
        font-size: 13px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-detail {
        font-size: 11.5px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-price {
        font-size: 15px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) and (hover: hover) and (pointer: fine) {
    .customer-account-shell {
        grid-template-columns: minmax(225px, 265px) minmax(0, 1fr) minmax(225px, 265px) !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        height: clamp(700px, calc(100vh - 66px), 880px) !important;
        max-height: 880px !important;
        min-height: 700px !important;
        max-width: 265px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-image {
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;
    }
}

/* Final customer dashboard rail overlap repair.
   Keep the left/right offer boxes long and scrollable, but render the products
   as normal vertical cards. This prevents the collapsed stacked-card look while
   preserving the requested rail-height behavior. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .customer-account-shell {
        grid-template-columns: minmax(245px, 300px) minmax(0, 1fr) minmax(245px, 300px) !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        display: flex !important;
        flex-direction: column !important;
        height: clamp(760px, calc(100vh - 66px), 980px) !important;
        max-height: 980px !important;
        min-height: 760px !important;
        max-width: 300px !important;
        overflow: hidden !important;
    }

    .customer-account-shell .dashboard-offer-list {
        align-content: initial !important;
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        gap: 12px !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 4px 8px 14px 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card {
        display: grid !important;
        flex: 0 0 auto !important;
        gap: 9px !important;
        height: auto !important;
        min-height: 190px !important;
        overflow: visible !important;
        padding: 12px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-image {
        height: 92px !important;
        min-height: 92px !important;
        max-height: 92px !important;
        opacity: 1 !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-title {
        font-size: 13.5px !important;
        line-height: 1.18 !important;
        opacity: 1 !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-detail {
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        opacity: 1 !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-price {
        font-size: 15px !important;
        opacity: 1 !important;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) and (hover: hover) and (pointer: fine) {
    .customer-account-shell {
        grid-template-columns: minmax(225px, 265px) minmax(0, 1fr) minmax(225px, 265px) !important;
    }

    .customer-account-shell .dashboard-offer-rail {
        height: clamp(700px, calc(100vh - 66px), 880px) !important;
        max-height: 880px !important;
        min-height: 700px !important;
        max-width: 265px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card {
        min-height: 172px !important;
        padding: 10px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card .offer-rail-image {
        height: 78px !important;
        min-height: 78px !important;
        max-height: 78px !important;
    }
}

/* Final customer dashboard requested spacing and rail length.
   Number 1: extend only the outside left/right offer boxes and keep their own
   vertical scroll. Number 2: tighten the vertical gaps between the result
   summary cards without changing the card content. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .customer-account-shell .dashboard-offer-rail {
        height: clamp(860px, calc(100vh - 38px), 1120px) !important;
        max-height: 1120px !important;
        min-height: 860px !important;
        overflow: hidden !important;
    }

    .customer-account-shell .dashboard-offer-list {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        gap: 10px !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card {
        flex: 0 0 auto !important;
        min-height: 172px !important;
    }

    .customer-account-shell .account-result-section {
        margin-top: -10px !important;
    }

    .customer-account-shell .account-result-section + .account-result-section {
        margin-top: -18px !important;
    }

    .customer-account-shell .account-summary-card {
        min-height: 112px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) and (hover: hover) and (pointer: fine) {
    .customer-account-shell .dashboard-offer-rail {
        height: clamp(780px, calc(100vh - 38px), 980px) !important;
        max-height: 980px !important;
        min-height: 780px !important;
    }

    .customer-account-shell .dashboard-offer-rail .offer-rail-card {
        min-height: 158px !important;
    }
}

/* ==============================================================================
   FINAL FULL-BROWSER LIGHT WOOD BACKGROUND
   ==============================================================================
   The wood surface must cover the full browser, not just the centered page
   container. These late rules remove the visible left/right background seam and
   replace it with one subtle professional wood pattern across all pages.
   ============================================================================== */
html,
body {
    background-color: #f3eadb !important;
    background-image:
        radial-gradient(circle at 18% 10%, rgba(255, 255, 255, .58), transparent 30%),
        radial-gradient(circle at 84% 4%, rgba(179, 124, 62, .10), transparent 34%),
        repeating-linear-gradient(90deg, rgba(116, 78, 39, .075) 0 1px, transparent 1px 92px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 46px, transparent 46px 92px),
        linear-gradient(180deg, #fbf6ec 0%, #f4ead9 48%, #eadbc5 100%) !important;
    background-attachment: fixed !important;
    background-size: auto, auto, 92px 100%, 92px 100%, auto !important;
}

.page-body,
.page-body:has(.home-marketplace-layout),
.page-body:has(.home-clean-layout),
.page-body:has(.home-service-finder),
.page-body:has(.hvac-service-layout),
.page-body:has(.customer-account-shell) {
    background: transparent !important;
}

/* Final seamless natural wood surface.
   This full-browser background uses layered CSS grain instead of a large image file.
   The warm tan/brown planks are inspired by light oak/wood flooring while staying
   subtle enough that white cards, dark panels, and blue BrijjPro controls remain readable. */
html,
body {
    background-color: #d7b37f !important;
    background-image:
        radial-gradient(ellipse 64px 148px at 24% 31%, rgba(101, 62, 27, .20) 0 8%, rgba(139, 91, 44, .13) 9% 20%, transparent 36%),
        radial-gradient(ellipse 48px 120px at 78% 68%, rgba(93, 56, 24, .18) 0 7%, rgba(151, 101, 52, .12) 8% 18%, transparent 35%),
        repeating-radial-gradient(ellipse at 52% 46%, rgba(91, 54, 23, .085) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(90deg, rgba(80, 45, 18, .18) 0 1px, rgba(255, 255, 255, .10) 1px 2px, transparent 2px 188px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 24px, transparent 24px 54px, rgba(95, 55, 22, .11) 54px 86px, transparent 86px 188px),
        repeating-linear-gradient(0deg, rgba(74, 43, 17, .055) 0 1px, transparent 1px 7px),
        linear-gradient(90deg, #c08d56 0%, #e4c492 8%, #bd8650 17%, #d2a46d 27%, #f0d7a5 39%, #c9945b 52%, #e0bc84 64%, #b97d49 76%, #dfb77b 88%, #c18a55 100%) !important;
    background-attachment: fixed !important;
    background-position: center top !important;
    background-size: 560px 780px, 620px 860px, 360px 520px, 188px 100%, 376px 100%, 100% 18px, 100% 100% !important;
}

.page-body,
.page-body:has(.home-marketplace-layout),
.page-body:has(.home-clean-layout),
.page-body:has(.home-service-finder),
.page-body:has(.hvac-service-layout),
.page-body:has(.customer-account-shell),
.home-clean-layout {
    background: transparent !important;
}

/* Final professional offer-search interaction.
   Home/Hvac and account rails share the same data-driven search behavior. These
   styles make the active filter state clear while preserving the existing card
   design and keeping hidden results out of the layout. */
[data-offer-filter-card][hidden],
.offer-rail-card[hidden] {
    display: none !important;
}

.hvac-desktop-product-rail.offer-filter-active,
.dashboard-offer-rail.offer-filter-active {
    box-shadow:
        0 0 0 1px rgba(37, 99, 235, .18),
        0 26px 58px rgba(37, 99, 235, .12) !important;
}

.hvac-desktop-product-rail.offer-filter-active .hvac-product-search input,
.dashboard-offer-rail.offer-filter-active .dashboard-offer-search input {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12), 0 14px 30px rgba(15, 23, 42, .08) !important;
}

.offer-filter-empty:not([hidden]) {
    display: block !important;
}

/* ==============================================================================
   FINAL CUSTOMER DASHBOARD SAVED RESULTS REDESIGN
   ==============================================================================
   The Free Diagnostic history on My Account should read as modern service-record
   cards instead of a stretched table. This late, narrow override only changes the
   saved diagnostic result list and keeps the underlying data/actions unchanged.
   ============================================================================== */
.customer-account-shell #free-diagnostic-results[open] {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .94)),
        radial-gradient(circle at 18% 0%, rgba(96, 165, 250, .12), transparent 32%) !important;
    border: 1px solid rgba(191, 219, 254, .86) !important;
    box-shadow: 0 24px 58px rgba(15, 23, 42, .08) !important;
}

.customer-account-shell #free-diagnostic-results[open] > .account-summary-card {
    background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%) !important;
    border: 1px solid rgba(147, 197, 253, .9) !important;
    border-radius: 18px !important;
    box-shadow: inset 4px 0 0 #2563eb, 0 16px 34px rgba(37, 99, 235, .08) !important;
}

.customer-account-shell #free-diagnostic-results .account-section-intro {
    background: linear-gradient(135deg, rgba(239, 246, 255, .78), rgba(255, 255, 255, .72)) !important;
    border: 1px solid rgba(219, 234, 254, .82) !important;
    border-radius: 18px !important;
    margin: 18px 0 !important;
    padding: 18px 20px !important;
}

.customer-account-shell #free-diagnostic-results .account-section-intro p {
    color: #405775 !important;
    line-height: 1.65 !important;
    max-width: 980px !important;
}

.customer-account-shell #free-diagnostic-results .account-table-wrap {
    max-height: min(680px, 72vh) !important;
    overflow-y: auto !important;
    padding: 0 8px 4px 0 !important;
}

.customer-account-shell #free-diagnostic-results .account-free-result-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
}

.customer-account-shell #free-diagnostic-results .account-free-result-table thead {
    display: none !important;
}

.customer-account-shell #free-diagnostic-results .account-free-result-table tbody {
    display: grid !important;
    gap: 14px !important;
    width: 100% !important;
}

.customer-account-shell #free-diagnostic-results .account-free-result-table tbody tr {
    align-items: stretch !important;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, .12), transparent 150px),
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .94)) !important;
    border: 1px solid rgba(191, 219, 254, .9) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .07) !important;
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: minmax(92px, .7fr) minmax(120px, .8fr) minmax(118px, .72fr) minmax(260px, 1.55fr) minmax(132px, .8fr) minmax(190px, 1fr) !important;
    padding: 18px !important;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important;
}

.customer-account-shell #free-diagnostic-results .account-free-result-table tbody tr:hover {
    border-color: rgba(96, 165, 250, .95) !important;
    box-shadow: 0 22px 46px rgba(15, 23, 42, .1) !important;
    transform: translateY(-1px) !important;
}

.customer-account-shell #free-diagnostic-results .account-free-result-table td {
    align-content: start !important;
    border: 0 !important;
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
}

.customer-account-shell #free-diagnostic-results .account-free-result-table td::before {
    color: #5f728a !important;
    content: attr(data-label) !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.customer-account-shell #free-diagnostic-results .account-code-display,
.customer-account-shell #free-diagnostic-results .account-request-type,
.customer-account-shell #free-diagnostic-results .account-issue-list span {
    border: 1px solid rgba(147, 197, 253, .82) !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .08) !important;
}

.customer-account-shell #free-diagnostic-results .account-issue-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.customer-account-shell #free-diagnostic-results .account-issue-context {
    background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(239, 246, 255, .88)) !important;
    border: 1px solid rgba(219, 234, 254, .86) !important;
    border-left: 4px solid #2563eb !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .045) !important;
    margin-top: 4px !important;
    max-width: 100% !important;
    padding: 12px 14px !important;
}

.customer-account-shell #free-diagnostic-results .account-issue-context strong {
    color: #0f172a !important;
    display: block !important;
    font-size: 13px !important;
    letter-spacing: .03em !important;
    margin-bottom: 4px !important;
    text-transform: uppercase !important;
}

.customer-account-shell #free-diagnostic-results .account-issue-context span {
    color: #405775 !important;
    display: block !important;
    line-height: 1.45 !important;
}

.customer-account-shell #free-diagnostic-results .diagnostic-video-link,
.customer-account-shell #free-diagnostic-results .diagnostic-read-link {
    align-items: center !important;
    align-self: start !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    min-height: 58px !important;
    width: 100% !important;
}

.customer-account-shell #free-diagnostic-results .diagnostic-video-link {
    background: linear-gradient(135deg, #f0fdfa, #ffffff) !important;
    border: 1px solid rgba(45, 212, 191, .65) !important;
    box-shadow: 0 12px 26px rgba(13, 148, 136, .1) !important;
    justify-content: center !important;
}

.customer-account-shell #free-diagnostic-results .diagnostic-read-link {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%) !important;
    border: 1px solid rgba(147, 197, 253, .9) !important;
    box-shadow: 0 14px 28px rgba(37, 99, 235, .1) !important;
    color: #0f172a !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 12px 14px !important;
    text-align: left !important;
}

.customer-account-shell #free-diagnostic-results .diagnostic-read-link span {
    color: #5f728a !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}

.customer-account-shell #free-diagnostic-results .diagnostic-read-link strong {
    color: #1d4ed8 !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
}

.customer-account-shell #free-diagnostic-results .diagnostic-read-link:hover,
.customer-account-shell #free-diagnostic-results .diagnostic-read-link:focus-visible {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    outline: none !important;
    transform: translateY(-1px) !important;
}

.customer-account-shell #free-diagnostic-results .diagnostic-read-link:hover span,
.customer-account-shell #free-diagnostic-results .diagnostic-read-link:hover strong,
.customer-account-shell #free-diagnostic-results .diagnostic-read-link:focus-visible span,
.customer-account-shell #free-diagnostic-results .diagnostic-read-link:focus-visible strong {
    color: #ffffff !important;
}

@media (max-width: 1180px) {
    .customer-account-shell #free-diagnostic-results .account-free-result-table tbody tr {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .customer-account-shell #free-diagnostic-results .account-free-result-table td[data-label="Issues"],
    .customer-account-shell #free-diagnostic-results .account-free-result-table td[data-label="Recommendation"] {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 720px) {
    .customer-account-shell #free-diagnostic-results .account-section-intro {
        border-radius: 14px !important;
        padding: 15px !important;
    }

    .customer-account-shell #free-diagnostic-results .account-table-wrap {
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }

    .customer-account-shell #free-diagnostic-results .account-free-result-table tbody tr {
        border-radius: 16px !important;
        gap: 14px !important;
        grid-template-columns: 1fr !important;
        padding: 15px !important;
    }

    .customer-account-shell #free-diagnostic-results .account-free-result-table td {
        border-bottom: 1px solid rgba(226, 232, 240, .85) !important;
        padding-bottom: 12px !important;
    }

    .customer-account-shell #free-diagnostic-results .account-free-result-table td:last-child {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ==============================================================================
   CUSTOMER DASHBOARD FINAL ONE-PANEL LOCK
   ==============================================================================
   This intentionally appears at the end of the stylesheet so it wins over the
   older dashboard experiments above. CustomerDashboard has one searchable offer
   panel and one primary homeowner account workspace.
   ============================================================================== */
.customer-account-shell {
    align-items: start !important;
    display: grid !important;
    gap: clamp(24px, 2vw, 38px) !important;
    grid-template-columns: minmax(310px, 380px) minmax(0, 1fr) !important;
    min-height: 0 !important;
    max-width: 1760px !important;
    padding: clamp(36px, 3.8vw, 60px) clamp(22px, 3vw, 54px) 18px !important;
    width: min(1820px, 96vw) !important;
}

.page-body:has(.customer-account-shell) {
    padding-bottom: 0 !important;
}

.customer-account-shell > .dashboard-offer-rail-right {
    display: none !important;
}

.customer-account-shell .customer-dashboard-main {
    display: grid !important;
    gap: clamp(16px, 1.2vw, 22px) !important;
    min-width: 0 !important;
    width: 100% !important;
}

.customer-account-shell > :not(.dashboard-offer-rail) {
    grid-column: auto !important;
    max-width: none !important;
    width: 100% !important;
}

.customer-account-shell .dashboard-offer-rail-single {
    align-self: start !important;
    background: linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .92)) !important;
    border: 1px solid rgba(147, 197, 253, .72) !important;
    border-radius: 26px !important;
    box-shadow: 0 30px 70px rgba(15, 23, 42, .18) !important;
    height: clamp(820px, calc(100vh - 92px), 1120px) !important;
    max-height: 1120px !important;
    min-height: 820px !important;
    overflow: hidden !important;
    padding: 22px !important;
    position: sticky !important;
    top: 84px !important;
    width: 100% !important;
}

.customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list {
    display: grid !important;
    gap: 14px !important;
    height: calc(100% - 164px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 8px 8px 0 !important;
    scrollbar-color: #60a5fa #dbeafe !important;
    scrollbar-width: thin !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .94)) !important;
    border: 1px solid rgba(147, 197, 253, .72) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .08) !important;
    color: #071427 !important;
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 16px !important;
    text-decoration: none !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-card > * {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-badge {
    align-self: start !important;
    background: #e8f2ff !important;
    border: 1px solid rgba(96, 165, 250, .55) !important;
    border-radius: 999px !important;
    color: #0b55d9 !important;
    display: inline-flex !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    justify-content: center !important;
    padding: 5px 10px !important;
    width: fit-content !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-image {
    background: #f8fbff !important;
    border: 1px solid rgba(147, 197, 253, .72) !important;
    border-radius: 14px !important;
    display: block !important;
    height: 136px !important;
    object-fit: contain !important;
    padding: 10px !important;
    width: 100% !important;
}

.customer-account-shell .customer-account-hero {
    align-items: center !important;
    background: radial-gradient(circle at 12% 18%, rgba(37, 99, 235, .13), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 247, 255, .90)) !important;
    border: 1px solid rgba(191, 219, 254, .7) !important;
    border-radius: 30px !important;
    box-shadow: 0 34px 86px rgba(15, 23, 42, .17) !important;
    display: grid !important;
    gap: clamp(22px, 2vw, 38px) !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr) !important;
    min-height: 330px !important;
    padding: clamp(30px, 3vw, 48px) !important;
}

.customer-account-shell .customer-account-hero h1 {
    color: #111827 !important;
    font-size: clamp(42px, 3.25vw, 64px) !important;
    letter-spacing: 0 !important;
    line-height: .96 !important;
    margin-bottom: 18px !important;
    max-width: 760px !important;
}

.customer-account-shell .customer-account-hero p {
    color: #32445f !important;
    font-size: clamp(15px, .92vw, 18px) !important;
    line-height: 1.52 !important;
    max-width: 760px !important;
}

.customer-account-shell .account-guidance-grid {
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.customer-account-shell .account-metric-strip {
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.customer-account-shell .account-guidance-card,
.customer-account-shell .account-metric-item,
.customer-account-shell .account-result-section {
    background: rgba(255, 255, 255, .95) !important;
    border: 1px solid rgba(226, 232, 240, .9) !important;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .10) !important;
}

.customer-account-shell .account-guidance-card {
    min-height: 126px !important;
    padding: 20px !important;
}

.customer-account-shell .account-metric-item {
    min-height: 96px !important;
    padding: 18px !important;
}

.customer-account-shell .account-result-section {
    border-radius: 28px !important;
    margin: 0 !important;
    overflow: hidden !important;
    padding: 18px !important;
}

.customer-account-shell .account-summary-card {
    min-height: 104px !important;
    padding: 18px 22px !important;
}

.customer-account-shell .account-summary-card strong {
    font-size: clamp(26px, 1.8vw, 36px) !important;
    line-height: 1 !important;
}

.customer-account-shell .account-summary-card span:not(.account-accordion-indicator),
.customer-account-shell .account-summary-card small,
.customer-account-shell .account-summary-meta {
    font-size: 13px !important;
    line-height: 1.25 !important;
}

.customer-account-shell .account-result-section:not([open]) {
    padding: 14px 18px !important;
}

.customer-account-shell .account-result-section:not([open]) .account-summary-card {
    min-height: 88px !important;
}

.customer-account-shell .customer-account-actions,
.customer-account-shell .customer-account-actions p,
.customer-account-shell .customer-account-actions strong,
.customer-account-shell .account-action-card,
.customer-account-shell .account-action-card span,
.customer-account-shell .account-action-card strong {
    color: #fff !important;
    opacity: 1 !important;
}

@media (max-width: 1180px) {
    .customer-account-shell {
        grid-template-columns: 1fr !important;
        padding-inline: clamp(16px, 4vw, 30px) !important;
    }

    .customer-account-shell .customer-dashboard-main {
        order: 1 !important;
    }

    .customer-account-shell .dashboard-offer-rail-single {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        order: 2 !important;
        position: static !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        height: auto !important;
        max-height: 620px !important;
    }

    .customer-account-shell .customer-account-hero {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .customer-account-shell {
        width: 100% !important;
    }

    .customer-account-shell .customer-account-hero {
        border-radius: 24px !important;
        min-height: 0 !important;
        padding: 28px 18px !important;
    }

    .customer-account-shell .customer-account-hero h1 {
        font-size: clamp(38px, 12vw, 56px) !important;
    }

    .customer-account-shell .account-guidance-grid,
    .customer-account-shell .account-metric-strip,
    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list {
        grid-template-columns: 1fr !important;
    }
}
/* ==============================================================================
   CUSTOMER DASHBOARD TRUE FINAL OFFER-PANEL LOCK
   ==============================================================================
   Keep this at the physical end of the stylesheet. CustomerDashboard now uses a
   single left product panel, so each product must render as a readable card
   inside a vertical scroll area instead of inheriting compact/preview styles.
   ============================================================================== */
.customer-account-shell .dashboard-offer-rail-single {
    height: clamp(920px, calc(100vh - 76px), 1180px) !important;
    max-height: 1180px !important;
    min-height: 920px !important;
}

.customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list {
    align-content: start !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    height: calc(100% - 158px) !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 8px 10px 0 !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-card {
    align-content: start !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(248, 251, 255, .96)) !important;
    border: 1px solid rgba(147, 197, 253, .72) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .08) !important;
    color: #071427 !important;
    display: grid !important;
    flex: 0 0 auto !important;
    gap: 10px !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
    min-height: 250px !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding: 14px !important;
    position: relative !important;
    text-decoration: none !important;
    transform: none !important;
    visibility: visible !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-card::before,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-card::after {
    display: none !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-card > *,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-badge,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-image,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-title,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-detail,
.customer-account-shell .dashboard-offer-rail-single .offer-rail-price {
    float: none !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
    visibility: visible !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-badge {
    align-items: center !important;
    background: #e8f2ff !important;
    border: 1px solid rgba(96, 165, 250, .55) !important;
    border-radius: 999px !important;
    color: #0b55d9 !important;
    display: inline-flex !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 6px 10px !important;
    width: fit-content !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-image {
    background: #f8fbff !important;
    border: 1px solid rgba(147, 197, 253, .72) !important;
    border-radius: 14px !important;
    display: block !important;
    height: 132px !important;
    min-height: 132px !important;
    object-fit: contain !important;
    padding: 10px !important;
    width: 100% !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-title {
    color: #071427 !important;
    display: block !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-detail {
    color: #475569 !important;
    display: block !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

.customer-account-shell .dashboard-offer-rail-single .offer-rail-price {
    color: #04786d !important;
    display: block !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    margin-top: 2px !important;
}

@media (max-width: 1180px) {
    .customer-account-shell .dashboard-offer-rail-single {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list {
        height: auto !important;
        max-height: 680px !important;
    }
}
/* ==============================================================================
   CUSTOMER DASHBOARD ULTIMATE PROPORTION LOCK
   ==============================================================================
   Final override for the refined CustomerDashboard desktop view. The left sales
   panel keeps normal-size product cards, but its outer shell stretches down near
   the lower dashboard cards. The central workspace is also reduced slightly so
   the page feels more professional and less oversized.
   ============================================================================== */
@media (min-width: 1181px) {
    .page-body:has(.customer-account-shell) {
        padding-top: clamp(24px, 2vw, 36px) !important;
    }

    .customer-account-shell {
        gap: clamp(18px, 1.4vw, 28px) !important;
        grid-template-columns: minmax(292px, 340px) minmax(0, 1fr) !important;
        max-width: 1700px !important;
        padding-bottom: 0 !important;
        padding-inline: clamp(22px, 2.4vw, 42px) !important;
        width: min(1740px, 95vw) !important;
    }

    .customer-account-shell > .dashboard-offer-rail.dashboard-offer-rail-single {
        align-self: start !important;
        height: 920px !important;
        max-height: 920px !important;
        min-height: 920px !important;
        position: sticky !important;
        top: 82px !important;
    }

    .customer-account-shell > .dashboard-offer-rail.dashboard-offer-rail-single .dashboard-offer-list {
        height: calc(100% - 154px) !important;
        max-height: none !important;
        overflow-y: auto !important;
    }

    .customer-account-shell .customer-dashboard-main {
        gap: 12px !important;
    }

    .customer-account-shell .customer-account-hero {
        border-radius: 24px !important;
        gap: clamp(16px, 1.25vw, 24px) !important;
        grid-template-columns: minmax(0, 1.08fr) minmax(320px, .68fr) !important;
        min-height: 258px !important;
        padding: clamp(22px, 1.8vw, 34px) !important;
    }

    .customer-account-shell .customer-account-hero h1 {
        font-size: clamp(34px, 2.55vw, 50px) !important;
        line-height: .98 !important;
        margin-bottom: 10px !important;
    }

    .customer-account-shell .customer-account-hero p {
        font-size: 14px !important;
        line-height: 1.45 !important;
        max-width: 650px !important;
    }

    .customer-account-shell .customer-account-actions {
        border-radius: 20px !important;
        padding: 20px !important;
    }

    .customer-account-shell .customer-account-actions p,
    .customer-account-shell .account-action-card strong,
    .customer-account-shell .account-action-card span {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .customer-account-shell .account-guidance-grid,
    .customer-account-shell .account-metric-strip {
        gap: 12px !important;
    }

    .customer-account-shell .account-guidance-card {
        border-radius: 18px !important;
        min-height: 92px !important;
        padding: 14px !important;
    }

    .customer-account-shell .account-guidance-card strong {
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    .customer-account-shell .account-guidance-card p {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .customer-account-shell .account-metric-item {
        border-radius: 16px !important;
        min-height: 66px !important;
        padding: 12px 14px !important;
    }

    .customer-account-shell .account-metric-item strong {
        font-size: 24px !important;
        line-height: 1 !important;
    }

    .customer-account-shell .account-metric-item span,
    .customer-account-shell .account-metric-item small {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    .customer-account-shell .account-result-section {
        border-radius: 20px !important;
        padding: 10px 12px !important;
    }

    .customer-account-shell .account-summary-card {
        min-height: 74px !important;
        padding: 12px 16px !important;
    }

    .customer-account-shell .account-summary-card strong {
        font-size: 25px !important;
    }

    .customer-account-shell .account-summary-card span:not(.account-accordion-indicator),
    .customer-account-shell .account-summary-card small,
    .customer-account-shell .account-summary-meta {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .customer-account-shell .account-result-section:not([open]) {
        padding: 8px 12px !important;
    }

    .customer-account-shell .account-result-section:not([open]) .account-summary-card {
        min-height: 64px !important;
    }
}

/* ==============================================================================
   CUSTOMER DASHBOARD MARKETPLACE RAIL TRUE FINAL
   ==============================================================================
   This end-of-file override is scoped to CustomerDashboard only. It keeps the
   homeowner workspace compact while making the single left sales panel look like
   a modern product feed: readable, searchable, scrollable, and much less boxy.
   ============================================================================== */
@media (min-width: 1181px) {
    .customer-account-shell {
        gap: clamp(22px, 1.6vw, 34px) !important;
        grid-template-columns: minmax(286px, 328px) minmax(0, 1fr) !important;
        max-width: 1680px !important;
        padding-top: clamp(28px, 2.4vw, 42px) !important;
        width: min(1720px, 95vw) !important;
    }

    .customer-account-shell > .dashboard-offer-rail.dashboard-offer-rail-single {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 251, 255, .88)),
            radial-gradient(circle at 25% 0%, rgba(96, 165, 250, .16), transparent 36%) !important;
        border: 0 !important;
        border-radius: 22px !important;
        box-shadow: 0 28px 72px rgba(15, 23, 42, .16), inset 0 0 0 1px rgba(191, 219, 254, .55) !important;
        height: 940px !important;
        max-height: 940px !important;
        min-height: 940px !important;
        padding: 20px !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-rail-heading {
        border-bottom: 1px solid rgba(203, 213, 225, .74) !important;
        margin-bottom: 16px !important;
        padding-bottom: 16px !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-rail-heading span,
    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-search span {
        color: #1456d8 !important;
        font-size: 11px !important;
        letter-spacing: .08em !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-rail-heading h2 {
        color: #071427 !important;
        font-size: 22px !important;
        line-height: 1.05 !important;
        margin: 6px 0 8px !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-rail-heading p {
        color: #334155 !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-search {
        background: #fff !important;
        border: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .08), inset 0 0 0 1px rgba(147, 197, 253, .72) !important;
        margin-bottom: 14px !important;
        padding: 12px 14px !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-search input {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: #0f172a !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        padding: 4px 0 0 !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .dashboard-offer-list {
        gap: 10px !important;
        height: calc(100% - 178px) !important;
        padding: 2px 6px 10px 0 !important;
        scrollbar-color: rgba(37, 99, 235, .55) rgba(219, 234, 254, .9) !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .offer-rail-card {
        align-items: center !important;
        background: rgba(255, 255, 255, .82) !important;
        border: 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 12px 24px rgba(15, 23, 42, .07) !important;
        column-gap: 12px !important;
        display: grid !important;
        grid-template-areas:
            "media badge"
            "media title"
            "media detail"
            "media price" !important;
        grid-template-columns: 92px minmax(0, 1fr) !important;
        min-height: 122px !important;
        padding: 12px !important;
        transition: box-shadow .18s ease, transform .18s ease, background .18s ease !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .offer-rail-card:hover,
    .customer-account-shell .dashboard-offer-rail-single .offer-rail-card:focus-visible {
        background: #fff !important;
        box-shadow: 0 18px 34px rgba(15, 23, 42, .12) !important;
        transform: translateY(-1px) !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .offer-rail-badge {
        background: rgba(219, 234, 254, .95) !important;
        border: 0 !important;
        border-radius: 999px !important;
        color: #0b55d9 !important;
        font-size: 10px !important;
        grid-area: badge !important;
        line-height: 1 !important;
        margin-bottom: 2px !important;
        padding: 5px 8px !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .offer-rail-image {
        background: linear-gradient(145deg, #f8fbff, #eef6ff) !important;
        border: 0 !important;
        border-radius: 8px !important;
        box-shadow: inset 0 0 0 1px rgba(191, 219, 254, .75) !important;
        grid-area: media !important;
        height: 92px !important;
        min-height: 92px !important;
        object-fit: contain !important;
        padding: 8px !important;
        width: 92px !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .offer-rail-title {
        color: #071427 !important;
        display: -webkit-box !important;
        font-size: 13.5px !important;
        font-weight: 950 !important;
        grid-area: title !important;
        line-height: 1.18 !important;
        margin: 0 !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .offer-rail-detail {
        color: #475569 !important;
        display: -webkit-box !important;
        font-size: 11.5px !important;
        grid-area: detail !important;
        line-height: 1.28 !important;
        margin: 0 !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .customer-account-shell .dashboard-offer-rail-single .offer-rail-price {
        color: #04786d !important;
        font-size: 16px !important;
        font-weight: 950 !important;
        grid-area: price !important;
        margin-top: 2px !important;
    }

    .customer-account-shell .customer-dashboard-main {
        gap: 10px !important;
    }

    .customer-account-shell .customer-account-hero {
        min-height: 242px !important;
        padding: clamp(20px, 1.6vw, 30px) !important;
    }

    .customer-account-shell .customer-account-hero h1 {
        font-size: clamp(32px, 2.35vw, 46px) !important;
    }

    .customer-account-shell .account-guidance-card,
    .customer-account-shell .account-metric-item,
    .customer-account-shell .account-result-section {
        border: 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 16px 36px rgba(15, 23, 42, .10), inset 0 0 0 1px rgba(226, 232, 240, .78) !important;
    }

    .customer-account-shell .account-result-section {
        padding: 9px 11px !important;
    }
}

/* ==============================================================================
   SALES SURFACE REMOVAL UNTIL BRIJJPROSTORE
   ==============================================================================
   Home/Hvac and CustomerDashboard no longer display product sales/tool rails on
   any platform. Product sales will return later as the dedicated BrijjProStore
   module, so these pages focus on service routing and homeowner records.
   ============================================================================== */
.home-clean-layout .hvac-desktop-product-rail,
.home-clean-layout .home-mobile-product-section,
.home-clean-layout .home-mobile-product-row,
.home-clean-layout .home-mobile-product-strip,
.customer-account-shell .dashboard-offer-rail,
.customer-account-shell .account-service-offers {
    display: none !important;
}

.hvac-service-layout.no-service-offers,
.hvac-service-layout.has-service-offers {
    display: block !important;
    max-width: min(1460px, 94vw) !important;
    padding-inline: 0 !important;
    width: 100% !important;
}

.hvac-service-layout.no-service-offers .hvac-service-content,
.hvac-service-layout.has-service-offers .hvac-service-content {
    display: grid !important;
    gap: clamp(24px, 2vw, 34px) !important;
    margin-inline: auto !important;
    max-width: min(1380px, 100%) !important;
    width: 100% !important;
}

.hvac-service-layout.no-service-offers .hvac-hero-pro,
.hvac-service-layout.has-service-offers .hvac-hero-pro {
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .16), inset 0 0 0 1px rgba(191, 219, 254, .64) !important;
}

.hvac-service-layout.no-service-offers .hvac-process-line,
.hvac-service-layout.has-service-offers .hvac-process-line {
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .10), inset 0 0 0 1px rgba(191, 219, 254, .72) !important;
}

.customer-account-shell.customer-account-shell-no-store {
    display: block !important;
    margin-inline: auto !important;
    max-width: min(1420px, 94vw) !important;
    padding: clamp(28px, 3vw, 48px) 0 18px !important;
    width: 100% !important;
}

.customer-account-shell.customer-account-shell-no-store .customer-dashboard-main {
    display: grid !important;
    gap: clamp(16px, 1.4vw, 24px) !important;
    margin-inline: auto !important;
    max-width: min(1320px, 100%) !important;
    width: 100% !important;
}

.customer-account-shell.customer-account-shell-no-store .customer-account-hero {
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 30px 86px rgba(15, 23, 42, .16), inset 0 0 0 1px rgba(191, 219, 254, .62) !important;
}

.customer-account-shell.customer-account-shell-no-store .account-guidance-card,
.customer-account-shell.customer-account-shell-no-store .account-metric-item,
.customer-account-shell.customer-account-shell-no-store .account-result-section {
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .10), inset 0 0 0 1px rgba(226, 232, 240, .76) !important;
}

@media (max-width: 1180px) {
    .hvac-service-layout.no-service-offers,
    .hvac-service-layout.has-service-offers,
    .customer-account-shell.customer-account-shell-no-store {
        max-width: 100% !important;
        padding-inline: clamp(14px, 4vw, 28px) !important;
    }

    .customer-account-shell.customer-account-shell-no-store .customer-dashboard-main {
        max-width: 100% !important;
    }
}

/* ==============================================================================
   BRIJJPRO STORE PREVIEW
   ==============================================================================
   Temporary service page for the future BrijjProStore module. The route is live
   from CurrentServiceOnline now, while product catalog, affiliate, and checkout
   features can be added later in a dedicated store module.
   ============================================================================== */
.brijjpro-store-preview {
    color: #0f172a;
    margin: 0 auto;
    max-width: min(1180px, 92vw);
    padding: clamp(34px, 5vw, 72px) 0 clamp(42px, 6vw, 88px);
}

.brijjpro-store-hero {
    align-items: center;
    background:
        linear-gradient(112deg, rgba(255, 255, 255, .96) 0%, rgba(248, 251, 255, .9) 55%, rgba(229, 241, 255, .82) 100%);
    border-radius: 8px;
    box-shadow: 0 30px 86px rgba(15, 23, 42, .16), inset 0 0 0 1px rgba(191, 219, 254, .68);
    display: grid;
    gap: clamp(24px, 4vw, 58px);
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .82fr);
    padding: clamp(28px, 5vw, 64px);
}

.brijjpro-store-label {
    background: rgba(219, 234, 254, .95);
    border-radius: 999px;
    color: #1456d8;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1;
    margin: 0 0 18px;
    padding: 10px 14px;
    text-transform: uppercase;
}

.brijjpro-store-hero h1 {
    color: #071427;
    font-size: clamp(42px, 5.4vw, 76px);
    font-weight: 950;
    line-height: .96;
    margin: 0;
}

.brijjpro-store-hero-copy > p:not(.brijjpro-store-label) {
    color: #334155;
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.65;
    margin: 18px 0 0;
    max-width: 660px;
}

.brijjpro-store-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.brijjpro-store-primary,
.brijjpro-store-secondary {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    text-decoration: none;
}

.brijjpro-store-primary {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 16px 30px rgba(37, 99, 235, .25);
}

.brijjpro-store-secondary {
    background: rgba(255, 255, 255, .86);
    color: #123a70;
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .8);
}

.brijjpro-store-panel {
    background: #14263d;
    border-radius: 8px;
    box-shadow: 0 26px 58px rgba(15, 23, 42, .24);
    color: #fff;
    display: grid;
    gap: 12px;
    padding: 22px;
}

.brijjpro-store-panel div {
    background: rgba(255, 255, 255, .08);
    border-radius: 8px;
    display: grid;
    gap: 7px;
    padding: 16px;
}

.brijjpro-store-panel span {
    color: #93c5fd;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .06em;
}

.brijjpro-store-panel strong {
    font-size: 17px;
    line-height: 1.2;
}

.brijjpro-store-panel p {
    color: #dbeafe;
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
}

.brijjpro-store-shelf {
    background: rgba(255, 255, 255, .9);
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .11), inset 0 0 0 1px rgba(226, 232, 240, .82);
    margin-top: 18px;
    padding: clamp(18px, 2.6vw, 30px);
}

.brijjpro-store-shelf-heading {
    align-items: end;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 18px;
}

.brijjpro-store-shelf-heading h2 {
    color: #071427;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.05;
    margin: 0;
}

.brijjpro-store-shelf-heading p {
    color: #475569;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    text-align: right;
}

.brijjpro-store-category-row {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.brijjpro-store-category-row article {
    background: linear-gradient(145deg, #ffffff, #f4f8ff);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08), inset 0 0 0 1px rgba(191, 219, 254, .75);
    min-height: 150px;
    padding: 16px;
}

.brijjpro-store-category-row span {
    background: rgba(219, 234, 254, .95);
    border-radius: 999px;
    color: #1456d8;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 18px;
    padding: 8px 10px;
    text-transform: uppercase;
}

.brijjpro-store-category-row strong {
    color: #071427;
    display: block;
    font-size: 17px;
    line-height: 1.15;
}

.brijjpro-store-category-row p {
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
    margin: 10px 0 0;
}

@media (max-width: 860px) {
    .brijjpro-store-preview {
        max-width: 100%;
        padding: 22px 14px 44px;
    }

    .brijjpro-store-hero,
    .brijjpro-store-shelf-heading,
    .brijjpro-store-category-row {
        grid-template-columns: 1fr;
    }

    .brijjpro-store-hero {
        padding: 24px;
    }

    .brijjpro-store-shelf-heading p {
        text-align: left;
    }

    .brijjpro-store-primary,
    .brijjpro-store-secondary {
        width: 100%;
    }
}

/* ==============================================================================
   BRIJJPRO STORE MARKETPLACE PREVIEW
   ==============================================================================
   Store-only visual direction for the future BrijjProStore module. This page is
   intentionally shaped like a shopping marketplace for construction, HVAC parts,
   tools, machines, safety products, and contractor supplies.
   ============================================================================== */
.brijjpro-store-preview {
    max-width: min(1500px, 94vw);
}

.brijjpro-storefront {
    background: rgba(255, 255, 255, .94);
    border-radius: 8px;
    box-shadow: 0 28px 84px rgba(15, 23, 42, .16), inset 0 0 0 1px rgba(226, 232, 240, .86);
    overflow: hidden;
}

.brijjpro-store-topbar {
    align-items: center;
    background: #10233c;
    display: grid;
    gap: 14px;
    grid-template-columns: auto minmax(280px, 1fr) auto;
    padding: 14px clamp(16px, 2.4vw, 28px);
}

.brijjpro-store-brand {
    color: #fff;
    display: grid;
    line-height: 1;
}

.brijjpro-store-brand span {
    color: #93c5fd;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.brijjpro-store-brand strong {
    font-size: 28px;
    font-weight: 950;
}

.brijjpro-store-search {
    align-items: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 48px;
    overflow: hidden;
}

.brijjpro-store-search span {
    background: #f1f5f9;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
    height: 100%;
    padding: 16px 14px 0;
}

.brijjpro-store-search input {
    border: 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
    min-width: 0;
    outline: 0;
    padding: 0 16px;
    width: 100%;
}

.brijjpro-store-top-actions {
    display: flex;
    gap: 8px;
}

.brijjpro-store-top-actions a {
    background: rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #eff6ff;
    font-size: 13px;
    font-weight: 900;
    padding: 12px 14px;
    text-decoration: none;
}

.brijjpro-store-category-nav {
    background: #18304e;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 10px clamp(16px, 2.4vw, 28px);
    scrollbar-width: thin;
}

.brijjpro-store-category-nav a {
    border-radius: 8px;
    color: #dbeafe;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 850;
    padding: 8px 11px;
    text-decoration: none;
}

.brijjpro-store-category-nav a:hover,
.brijjpro-store-category-nav a:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.brijjpro-storefront .brijjpro-store-hero {
    border-radius: 0;
    box-shadow: none;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
    padding: clamp(26px, 4.2vw, 56px);
}

.brijjpro-storefront .brijjpro-store-hero h1 {
    font-size: clamp(38px, 4.2vw, 64px);
    max-width: 760px;
}

.brijjpro-store-deal {
    background:
        radial-gradient(circle at 72% 16%, rgba(59, 130, 246, .34), transparent 34%),
        linear-gradient(145deg, #101f36, #1f3a5d);
    border-radius: 8px;
    box-shadow: 0 26px 52px rgba(15, 23, 42, .26);
    color: #fff;
    min-height: 300px;
    padding: 24px;
    position: relative;
}

.brijjpro-store-deal::after {
    background:
        linear-gradient(90deg, #d1d5db 0 18%, transparent 18% 30%, #60a5fa 30% 48%, transparent 48% 56%, #111827 56% 70%, transparent 70%),
        linear-gradient(#f8fafc, #e2e8f0);
    border-radius: 8px;
    bottom: 24px;
    content: "";
    height: 86px;
    left: 24px;
    position: absolute;
    right: 24px;
}

.brijjpro-store-deal span {
    color: #bfdbfe;
    display: block;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.brijjpro-store-deal strong {
    display: block;
    font-size: 28px;
    line-height: 1.05;
    max-width: 260px;
}

.brijjpro-store-deal p {
    color: #dbeafe;
    line-height: 1.45;
    margin: 12px 0 18px;
    max-width: 270px;
}

.brijjpro-store-price-row {
    align-items: center;
    display: flex;
    gap: 12px;
}

.brijjpro-store-price-row b {
    color: #fbbf24;
    font-size: 28px;
}

.brijjpro-store-price-row em {
    background: rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: #eff6ff;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    padding: 7px 10px;
}

.brijjpro-store-product-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 18px;
}

.brijjpro-store-product-card {
    background: rgba(255, 255, 255, .94);
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .11), inset 0 0 0 1px rgba(226, 232, 240, .82);
    padding: 14px;
}

.brijjpro-store-product-art {
    align-items: center;
    background: linear-gradient(145deg, #f8fbff, #edf5ff);
    border-radius: 8px;
    display: flex;
    height: 142px;
    justify-content: center;
    margin-bottom: 14px;
    overflow: hidden;
    position: relative;
}

.brijjpro-store-product-art::before,
.brijjpro-store-product-art::after {
    content: "";
    position: absolute;
}

.brijjpro-store-product-art-tools::before {
    background: #334155;
    border-radius: 8px;
    height: 22px;
    transform: rotate(-28deg);
    width: 112px;
}

.brijjpro-store-product-art-tools::after {
    background: #d6a849;
    border-radius: 999px;
    height: 54px;
    transform: translate(34px, -17px) rotate(-28deg);
    width: 16px;
}

.brijjpro-store-product-art-filter::before {
    background:
        repeating-linear-gradient(90deg, #93c5fd 0 3px, transparent 3px 16px),
        repeating-linear-gradient(0deg, #93c5fd 0 3px, transparent 3px 16px);
    border: 4px solid #cbd5e1;
    border-radius: 8px;
    height: 82px;
    width: 112px;
}

.brijjpro-store-product-art-machine::before {
    background: #2563eb;
    border-radius: 20px 20px 8px 8px;
    height: 58px;
    width: 118px;
}

.brijjpro-store-product-art-machine::after {
    background: #0f172a;
    border-radius: 999px;
    box-shadow: 84px 0 0 #0f172a;
    height: 24px;
    transform: translateX(-42px) translateY(34px);
    width: 24px;
}

.brijjpro-store-product-art-safety::before {
    background: #2563eb;
    border-radius: 70% 70% 70% 10%;
    height: 76px;
    transform: rotate(-45deg);
    width: 76px;
}

.brijjpro-store-product-card span {
    color: #2563eb;
    display: block;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .05em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.brijjpro-store-product-card h2 {
    color: #071427;
    font-size: 18px;
    line-height: 1.15;
    margin: 0;
}

.brijjpro-store-product-card p {
    color: #475569;
    font-size: 13px;
    line-height: 1.4;
    margin: 9px 0 12px;
}

.brijjpro-store-product-card strong {
    color: #04786d;
    font-size: 22px;
    font-weight: 950;
}

.brijjpro-store-benefits {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
}

.brijjpro-store-benefits div {
    background: rgba(16, 35, 60, .94);
    border-radius: 8px;
    color: #fff;
    padding: 18px;
}

.brijjpro-store-benefits strong {
    display: block;
    font-size: 16px;
    margin-bottom: 7px;
}

.brijjpro-store-benefits span {
    color: #cbd5e1;
    font-size: 13px;
}

@media (max-width: 1040px) {
    .brijjpro-store-topbar,
    .brijjpro-storefront .brijjpro-store-hero,
    .brijjpro-store-product-grid,
    .brijjpro-store-benefits {
        grid-template-columns: 1fr;
    }

    .brijjpro-store-top-actions {
        justify-content: stretch;
    }

    .brijjpro-store-top-actions a {
        flex: 1;
        text-align: center;
    }
}

@media (max-width: 680px) {
    .brijjpro-store-topbar {
        padding: 12px;
    }

    .brijjpro-store-search {
        grid-template-columns: 1fr;
    }

    .brijjpro-store-search span {
        display: none;
    }

    .brijjpro-store-search input {
        min-height: 48px;
    }

    .brijjpro-storefront .brijjpro-store-hero {
        padding: 22px;
    }

    .brijjpro-store-deal {
        min-height: 260px;
    }
}