/* 1. BRAND & THEME VARIABLES */
:root {
    /* AITCOH Brand Colors - Clean Palette */
    --trust-blue: #255ea0;       /* canonical BRAND.md Trust Blue */
    --trust-blue-dark: #1b477e;
    --trust-blue-light: #d9ecff; /* canonical BRAND.md Trust Blue Light */
    --radiant-gold: #fdd841;     /* canonical BRAND.md Radiant Gold (fills/highlights) */
    --deep-navy: #0e2a47; 
    --text-grey: #4a5568; /* Softer than charcoal */
    --cream-white: #fffdf5; /* More subtle cream */
    --pure-white: #ffffff;
    --accent-gold: #d69e2e;

    /* RGB channels + section washes (overridden per product theme so
       shadows, glows, focus rings, and washes follow the service color) */
    --trust-rgb: 38, 95, 161;
    --trust-dark-rgb: 27, 71, 126;
    --wash-1: #f4f9ff;
    --wash-2: #f8fbff;
    --wash-rgb: 234, 244, 255;
    --trust-light-rgb: 218, 235, 249;

    /* Modern Crystal Theme Specifics */
    --glass-bg-light: rgba(255, 255, 255, 0.92); /* Higher opacity for cleaner look */
    --glass-bg-dark: rgba(var(--trust-dark-rgb), 0.97);
    --glass-border: 1px solid rgba(255, 255, 255, 0.8);
    --glass-shadow: 0 20px 40px -5px rgba(var(--trust-rgb), 0.08); /* Colored, diffuse shadow */
    --blur-amount: 30px;
    --border-radius: 24px;
}

/* 2. RESET & BASE */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Source Sans Pro', sans-serif;
    color: var(--text-grey);
    line-height: 1.8; /* Increased line height for airy feel */
    min-height: 100vh;
    /* Ultra-Clean Background: Very subtle gradient */
    background: linear-gradient(180deg, var(--wash-2) 0%, #ffffff 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif;
    color: var(--deep-navy);
    letter-spacing: -0.03em; /* Slightly tighter for a modern feel */
    /* A subtle, multi-layered text shadow for that elevated flair */
    text-shadow: 2px 4px 8px rgba(var(--trust-rgb), 0.1), 0 1px 2px rgba(14, 42, 71, 0.05);
}

h1 { font-weight: 800; font-size: 3.5rem; }
h2 { font-weight: 800; font-size: 2.8rem; margin-bottom: 1.5rem; line-height: 1.2; }
h3 { font-weight: 800; font-size: 2rem; }
h4 { font-weight: 800; font-size: 1.35rem; }

p { margin-bottom: 1.5rem; font-weight: 300; }

/* Anchor scroll offset so in-page links land below the ~106px sticky nav (offer bar + header) */
section[id] { scroll-margin-top: 120px; }

/* Sticky Navigation Container */
.sticky-nav-wrapper {
    position: sticky;
    top: 0;
    z-index: 1100;
    width: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Scrolling Offer Bar Styles */
/* Scrolling highlight deal bar */
.offer-bar {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: linear-gradient(180deg, #ffe98a 0%, var(--radiant-gold) 48%, #f2c623 100%);
    border-bottom: 2px solid var(--accent-gold);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 0 rgba(214, 158, 46, 0.5),
        0 4px 14px -4px rgba(214, 158, 46, 0.6);
}
/* Sweeping glass highlight (sits under the text) */
.offer-bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    z-index: 0;
    pointer-events: none;
    transform: skewX(-20deg);
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    animation: offer-shine 7s ease-in-out infinite;
}
@keyframes offer-shine {
    0%   { left: -60%; }
    55%  { left: 120%; }
    100% { left: 120%; }
}

/* Brand tagline gold seal (top-right of hero) */
.hero-seal {
    position: absolute;
    top: 1.25rem;
    left: calc(50% - 536px);
    right: auto;
    z-index: 6;
    width: 176px;
    height: 176px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem;
    transform: rotate(-8deg);
    background: radial-gradient(circle at 50% 30%, #ffe98a 0%, var(--radiant-gold) 52%, #ecba1f 100%);
    border: 2px solid var(--accent-gold);
    box-shadow:
        0 12px 26px -8px rgba(214, 158, 46, 0.75),
        inset 0 2px 5px rgba(255, 255, 255, 0.65);
}
.hero-seal::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    border: 1.5px solid rgba(120, 86, 16, 0.4);
    pointer-events: none;
}
.hero-seal__ring {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--trust-blue-dark);
}
.hero-seal__main {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.12;
    color: var(--deep-navy);
    margin: 0.28rem 0;
    position: relative;
    top: -4px;
}
@media (max-width: 1080px) {
    /* switch off the desktop calc-anchor before it clips; sit high in the corner */
    .hero-seal { width: 112px; height: 112px; top: 0.7rem; left: 1rem; right: auto; }
    .hero-seal__main { font-size: 0.8rem; margin: 0.14rem 0; }
    .hero-seal__ring { font-size: 0.5rem; letter-spacing: 1px; }
    .hero-seal::before { inset: 6px; }
}
@media (max-width: 768px) {
    .hero-seal { width: 96px; height: 96px; top: 0.6rem; left: 0.75rem; }
    .hero-seal__main { font-size: 0.68rem; margin: 0.1rem 0; }
    .hero-seal__ring { font-size: 0.44rem; letter-spacing: 0.8px; }
    .hero-seal::before { inset: 5px; }
}
@media (max-width: 600px) {
    .hero-seal { width: 80px; height: 80px; top: 0.5rem; left: 0.5rem; transform: rotate(-6deg); border-width: 1.5px; }
    .hero-seal__main { font-size: 0.58rem; margin: 0.05rem 0; }
    .hero-seal__ring { font-size: 0.37rem; letter-spacing: 0.4px; }
    .hero-seal::before { inset: 4px; }
}
@media (max-width: 400px) {
    .hero-seal { width: 70px; height: 70px; }
    .hero-seal__main { font-size: 0.51rem; }
    .hero-seal__ring { font-size: 0.32rem; letter-spacing: 0.3px; }
}
.offer-track {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    will-change: transform;
    position: relative;
    z-index: 1;
    animation: offer-scroll 55s linear infinite;
}
.offer-bar:hover .offer-track,
.offer-bar:focus-within .offer-track { animation-play-state: paused; }
.offer-group {
    display: inline-flex;
    align-items: center;
    padding: 11px 0;
}
.offer-item {
    color: var(--deep-navy);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.offer-item--title {
    color: var(--deep-navy);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
.offer-item--call {
    color: var(--deep-navy);
    font-weight: 800;
    text-decoration: underline;
}
.offer-item--call:hover { text-decoration: underline; }
.offer-sep {
    color: var(--deep-navy);
    font-size: 0.65rem;
    margin: 0 1.15rem;
    opacity: 0.55;
}
@keyframes offer-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (max-width: 768px) {
    .offer-item { font-size: 0.8rem; }
    .offer-sep { margin: 0 0.85rem; }
    .offer-track { animation-duration: 38s; }
}
@media (prefers-reduced-motion: reduce) {
    .offer-track { animation: none; }
    .offer-bar::after { display: none; }
    .offer-bar { overflow-x: auto; }
    .offer-bar .offer-group[aria-hidden="true"] { display: none; }
}

/* Subtle Navbar Animation */
@keyframes subtlePan {
    0% { background-position: 0 0, 0 0, 0% 50%; }
    50% { background-position: 0 0, 0 0, 100% 50%; }
    100% { background-position: 0 0, 0 0, 0% 50%; }
}

/* Header */
header {
    width: 100%;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, var(--trust-blue-dark), var(--trust-blue), var(--trust-blue-dark));
    background-size: 40px 40px, 40px 40px, 200% 200%;
    animation: subtlePan 12s ease-in-out infinite;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Comparison Table Styles */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    margin-top: 2rem;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.comparison-table th, .comparison-table td {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid #edf2f7;
}
.comparison-table th {
    background: var(--wash-2);
    color: var(--deep-navy);
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.comparison-table td {
    font-size: 1rem;
    color: var(--text-grey);
}
.comparison-table .feature-col {
    font-weight: 600;
    color: var(--deep-navy);
    width: 30%;
}
.comparison-table i.fa-circle-check { color: var(--trust-blue); margin-right: 8px; }
.comparison-table i.fa-circle-xmark { color: #cbd5e0; margin-right: 8px; }

/* Elevated Highlight Column */
.comparison-table .highlight-col {
    background: #eaf4fe; /* Pronounced soft blue */
    font-weight: 700;
    color: var(--trust-blue-dark);
    border-left: 3px solid var(--trust-blue);
    border-right: 3px solid var(--trust-blue);
}
.comparison-table th.highlight-col {
    background: var(--trust-blue);
    color: var(--pure-white);
    font-size: 1.05rem;
    border-top: 3px solid var(--trust-blue);
}
.comparison-table tbody tr:last-child td.highlight-col {
    border-bottom: 3px solid var(--trust-blue);
}

@media (max-width: 768px) {
    /* Re-flow the comparison table into stacked comparison cards on mobile.
       Each <tr> becomes a card with the feature name as the title, and the
       two options shown as labeled rows below using the data-label attribute
       added to non-feature td cells. The AITCOH highlighted column gets the
       blue background treatment so the eye lands on it. */

    .comparison-table {
        display: block;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        font-size: 1rem;
        overflow: visible;
    }
    .comparison-table thead { display: none; }
    .comparison-table tbody { display: block; }
    .comparison-table tr {
        display: block;
        background: #ffffff;
        border: 1px solid rgba(var(--trust-rgb), 0.12);
        border-radius: 16px;
        margin-bottom: 1rem;
        overflow: hidden;
        box-shadow: 0 6px 18px -10px rgba(var(--trust-rgb), 0.18);
    }
    .comparison-table tr:last-child { margin-bottom: 0; }

    .comparison-table td {
        display: block;
        width: 100%;
        border: none;
        padding: 0.85rem 1rem;
        text-align: left;
    }

    /* Feature name = card title */
    .comparison-table td.feature-col {
        background: var(--wash-1);
        font-size: 1rem;
        font-weight: 700;
        color: var(--deep-navy);
        letter-spacing: -0.01em;
        border-bottom: 1px solid rgba(var(--trust-rgb), 0.08);
        padding: 0.85rem 1rem;
    }

    /* Standard Contractors row */
    .comparison-table td:not(.feature-col):not(.highlight-col) {
        font-size: 0.92rem;
        color: var(--text-grey);
        padding: 0.85rem 1rem;
    }

    /* Caption above each option using the data-label attribute */
    .comparison-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-family: 'Montserrat', sans-serif;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.1px;
        color: rgba(var(--trust-rgb), 0.55);
        margin-bottom: 0.3rem;
    }

    /* AITCOH highlight cell gets the blue treatment + bold copy */
    .comparison-table td.highlight-col {
        background: #eaf4fe;
        color: var(--trust-blue-dark);
        font-weight: 700;
        font-size: 0.95rem;
        border: none;
        border-top: 1px solid rgba(var(--trust-rgb), 0.10);
    }
    .comparison-table td.highlight-col[data-label]::before {
        color: var(--trust-blue);
    }
    /* Reset desktop-only border decorations on the highlight cells */
    .comparison-table tr td.highlight-col {
        border-left: none;
        border-right: none;
    }
    .comparison-table tbody tr:last-child td.highlight-col {
        border-bottom: none;
    }

    /* Disable the diagonal sheen sweep on mobile for clarity */
    .comparison-table th.highlight-col::after,
    .comparison-table td.highlight-col::after {
        display: none;
    }
}

/* 3. GLASSMORPHISM UTILITIES - SLEEK VERSION */
.glass-panel {
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: var(--glass-border);
    border-radius: var(--border-radius);
    box-shadow: var(--glass-shadow);
    padding: 3.5rem; /* More padding for whitespace */
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}

.glass-panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -10px rgba(var(--trust-rgb), 0.12);
}

.glass-panel-dark {
    background: var(--glass-bg-dark);
    color: var(--pure-white);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    box-shadow: 0 20px 50px -10px rgba(14, 42, 71, 0.25);
    padding: 3.5rem;
}

.glass-panel-dark h2, .glass-panel-dark h3, .glass-panel-dark h4 {
    color: var(--pure-white);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* Dark panel specific shadow */
}
.glass-panel-dark p { color: rgba(255,255,255,0.9); }

/* 4. LAYOUT COMPONENTS */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

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

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0; /* Reduced padding to make navbar less tall */
}

.logo img {
    height: 66px;
    width: auto;
}

.nav-links a {
    color: var(--cream-white);
    text-decoration: none;
    font-weight: 600;
    margin-left: 2.5rem; /* Increased spacing */
    transition: color 0.3s;
    font-size: 0.95rem;
}
.nav-links a:hover { color: var(--pure-white); }

/* Highlight Style for Financing Nav Link */
.nav-links .btn-financing {
    background-color: #fffce8;
    color: #975a16 !important;
    border: 1px solid rgba(214, 158, 46, 0.4);
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    margin-left: 1.5rem;
    transition: all 0.2s ease;
}
.nav-links .btn-financing:hover {
    background-color: #fefcbf;
    color: #744210;
    box-shadow: 0 4px 12px rgba(214, 158, 46, 0.15);
    transform: translateY(-1px);
}

/* Ensure nav button keeps white text despite nav-link styles */
.nav-links .btn {
    color: #ffffff;
}
.nav-links .btn:hover {
    color: #ffffff;
}

/* Hero */
.hero {
    text-align: center;
    padding: 6rem 0 3rem; /* Increased top padding */
    position: relative;
    overflow: hidden; 
}

/* Subtle Blobs */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px); /* Softer blur */
    z-index: -1;
    opacity: 0.4; /* Reduced opacity */
    animation: float 15s infinite ease-in-out; /* Slower animation */
}
.blob-1 { top: -20%; left: -10%; width: 600px; height: 600px; background: var(--trust-blue-light); }
.blob-2 { bottom: 0%; right: -15%; width: 500px; height: 500px; background: #fffce5; animation-delay: -5s; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }

/* Subtle Wave Graphic */
.wave-graphic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.08; /* Very subtle background presence */
    z-index: -1;
    pointer-events: none;
}

.hero h1 { font-size: 4.2rem; margin-bottom: 1.5rem; line-height: 1.1; color: var(--deep-navy); letter-spacing: -2px; }
.hero p { font-size: 1.25rem; max-width: 700px; margin: 0 auto 2rem; color: var(--text-grey); }
.hero-support-line { font-weight: 600; color: var(--trust-blue); margin-bottom: 0.5rem; display: block; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.9rem; }
.hero-concrete-line { font-weight: 600; color: var(--deep-navy); margin-bottom: 3rem; display: block; font-size: 1.1rem; }

/* Flow Cue */
.flow-cue {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 0 auto 4rem;
    max-width: 800px;
    flex-wrap: wrap;
}
.flow-step {
    font-weight: 600;
    color: var(--deep-navy);
    opacity: 1;
    font-size: 1rem;
    white-space: nowrap;
    background: white;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
}
.flow-connector {
    flex-grow: 1;
    height: 2px;
    background: #f0f0f0;
    min-width: 30px;
    max-width: 60px;
}

@media (max-width: 600px) {
    .flow-connector { display: none; }
    .flow-cue { flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
}

/* Sections */
.section-spacer { padding: 6rem 0; } /* More vertical space */

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Lists styled for "Right Fit" */
.check-list, .cross-list { list-style: none; margin-top: 1.5rem; padding-left: 0;}
.check-list li, .cross-list li { margin-bottom: 1rem; padding-left: 2.5rem; position: relative; font-size: 1.05rem; }

.check-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute; left: 0; top: 4px;
    color: var(--trust-blue);
    font-size: 1.1rem;
}

.cross-list li::before {
    content: '\f00d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute; left: 0; top: 4px;
    color: #a0aec0; /* Soft grey/blue for negative */
    font-size: 1.1rem;
}

/* 5. INTERACTIVE ELEMENTS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700; /* Increased from 600 for better legibility */
    font-size: 1rem;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--trust-blue-dark); /* Darker blue for high contrast against light backgrounds */
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(var(--trust-dark-rgb), 0.15); /* Cleaner, more subtle shadow */
}
.btn-primary:hover {
    background: var(--trust-blue); /* Brighter brand blue on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--trust-rgb), 0.25);
}

/* Form */
.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--deep-navy); font-size: 0.9rem; }
.form-input {
    width: 100%;
    padding: 1rem 1.2rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s;
    font-family: inherit;
}
.form-input:focus {
    outline: none;
    border-color: var(--trust-blue);
    box-shadow: 0 0 0 4px rgba(var(--trust-rgb), 0.1);
}

.qualifier-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #f0f0f0;
}
.qualifier-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--deep-navy);
    margin-bottom: 1rem;
    display: block;
    letter-spacing: 0;
}
.radio-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
.radio-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-pill span {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.85rem 1rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600; /* Slightly bolder */
    color: var(--text-grey);
    cursor: pointer;
    transition: all 0.2s ease;
}
.radio-pill input:checked + span {
    background: var(--trust-blue-dark); /* Matches primary button */
    color: white;
    border-color: var(--trust-blue-dark);
    box-shadow: 0 4px 12px rgba(var(--trust-dark-rgb), 0.2);
}
.radio-pill span:hover { border-color: var(--trust-blue); color: var(--trust-blue-dark); }

/* Modal */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(14, 42, 71, 0.5); /* Navy tint overlay */
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: all 0.3s;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-card {
    background: white;
    padding: 3rem;
    border-radius: 24px;
    max-width: 450px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.95); transition: transform 0.3s;
}
.modal-overlay.active .modal-card { transform: scale(1); }

/* Footer */
footer {
    background-color: var(--trust-blue-dark);
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    color: var(--cream-white);
    padding: 4rem 0;
    text-align: center;
    margin-top: 6rem;
}
footer a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.3s; }
footer a:hover { color: white; }

/* Footer structure: contact + explore links + social */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    max-width: 820px;
    margin: 0 auto 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: left;
}
.footer-heading {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--trust-blue-light);
    margin-bottom: 0.9rem;
}
.footer-col p { margin-bottom: 0.4rem; font-size: 0.92rem; opacity: 0.85; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.5rem; font-size: 0.92rem; }
.footer-social { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; }
/* Animated social icons */
.footer-social a,
.social-link {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.82);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease, border-color 0.3s ease,
                box-shadow 0.35s ease, color 0.3s ease;
}
.social-link svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
    animation: social-float 3.6s ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
}
.social-link:nth-child(2) { --float-delay: 0.45s; }
.social-link:nth-child(3) { --float-delay: 0.9s; }
.social-link:nth-child(4) { --float-delay: 1.35s; }
.social-link--facebook { --brand: #1877f2; --ink: #ffffff; }
.social-link--medium   { --brand: #ffffff; --ink: #0f0f0f; }
.social-link--x        { --brand: #ffffff; --ink: #0f0f0f; }
.social-link--youtube  { --brand: #ff0000; --ink: #ffffff; }
.social-link:hover,
.social-link:focus-visible {
    transform: translateY(-6px) scale(1.12) rotate(-6deg);
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink);
    box-shadow: 0 12px 24px -8px var(--brand), 0 0 0 4px rgba(255, 255, 255, 0.06);
}
.social-link:hover svg { animation: social-pop 0.45s ease; }
@keyframes social-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes social-pop {
    0% { transform: scale(1) rotate(0); }
    45% { transform: scale(1.22) rotate(8deg); }
    100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    .social-link svg { animation: none; }
    .social-link:hover,
    .social-link:focus-visible { transform: none; }
    .social-link:hover svg { animation: none; }
}
.footer-social-note { font-size: 0.78rem; opacity: 0.6; }
@media (max-width: 700px) {
    .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 1.75rem; }
    .footer-social { justify-content: center; }
}

.process-time {
    display: block;
    font-size: 0.8rem;
    color: var(--trust-blue);
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Mobile */
@media (max-width: 900px) {
    .hero h1 { font-size: 3.2rem; letter-spacing: -1px; }
    h2 { font-size: 2.2rem; }
    .nav-links { display: none; } 
    .nav-container { justify-content: center; }
    .glass-panel { padding: 2rem; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 2rem; }
}

/* ==========================================================================
   PREMIUM ANIMATION SYSTEM (added by animation pass)
   --------------------------------------------------------------------------
   Subtle, water-inspired motion overlay for AITCOH landing page.
   Sections:
     A. Hero ambient particle canvas styling
     B. Scroll reveal targets (class is added by JS, not present in HTML)
     C. Liquid glass shine on .glass-panel / .glass-panel-dark
     D. Premium CTA effects (hover lift, soft glow, gentle pulse)
     E. Process section sequential reveal + active-state number glow
     F. Highlighted comparison column soft top-to-bottom sheen
     G. Form micro-interactions (radio pills, focus, submit loading)
     H. prefers-reduced-motion + tab-visibility safeguards
   Tune by adjusting the keyframe durations / transition values below.
   ========================================================================== */

/* --- A. Hero ambient particle canvas --- */
.hero-particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
}
/* Keep hero content stacked above the canvas */
.hero .container {
    position: relative;
    z-index: 1;
}

/* --- B. Scroll reveal targets --- */
.reveal-target {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}
.reveal-target.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- C. Liquid glass shine on glass panels --- */
.glass-panel,
.glass-panel-dark {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.glass-panel::before,
.glass-panel-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 55%;
    height: 100%;
    background: linear-gradient(115deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 35%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0) 65%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 2;
    animation: glassShine 13s ease-in-out infinite;
    animation-delay: 3s;
}
.glass-panel-dark::before {
    background: linear-gradient(115deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(var(--trust-light-rgb), 0) 35%,
        rgba(var(--trust-light-rgb), 0.10) 50%,
        rgba(255, 255, 255, 0) 65%,
        rgba(255, 255, 255, 0) 100%);
}
@keyframes glassShine {
    0%   { left: -75%; opacity: 0; }
    8%   { opacity: 1; }
    55%  { left: 130%; opacity: 1; }
    60%  { opacity: 0; }
    100% { left: 130%; opacity: 0; }
}
/* Disable shine on small screens for performance */
@media (max-width: 768px) {
    .glass-panel::before,
    .glass-panel-dark::before {
        display: none;
    }
}

/* --- D. Premium CTA effects ---
   Pulse is opt-in via .btn-pulse (applied only to the final form submit
   button). All other .btn-primary CTAs keep hover lift + halo without
   pulsing, so multiple primary CTAs no longer compete for attention. */
.btn-primary {
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(var(--trust-rgb), 0);
    transition: box-shadow 0.5s ease;
    pointer-events: none;
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(var(--trust-rgb), 0.30),
                0 0 0 1px rgba(var(--trust-rgb), 0.05);
}
.btn-primary:hover::after {
    box-shadow: 0 0 0 6px rgba(var(--trust-rgb), 0.10);
}

/* Pulse opt-in: applied only to the form submit button via the .btn-pulse class */
.btn-pulse {
    animation: ctaPulse 4.5s ease-in-out infinite;
}
.btn-pulse:hover {
    /* Hover takes over from the pulse for a clean glow */
    animation: none;
}
.btn-pulse.is-loading {
    animation: none;
}
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(var(--trust-dark-rgb), 0.15); }
    50%      { box-shadow: 0 6px 20px rgba(var(--trust-rgb), 0.28); }
}

/* --- E. Process section: sequential reveal + active number glow --- */
/* Process cards are reveal-targets via JS; stagger comes from inline transition-delay.
   When a card becomes visible, the big numeral (first child span) gets a soft glow. */
#process .grid-4 > .glass-panel > span:first-child {
    transition: text-shadow 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}
#process .grid-4 > .glass-panel.is-visible > span:first-child {
    text-shadow: 0 6px 24px rgba(var(--trust-rgb), 0.28);
}
#process .grid-4 > .glass-panel:hover > span:first-child {
    transform: translateY(-2px);
}

/* Process-card headings in the 4-column range: single long words
   ("Measurement", "Recommendation") are wider than the ~178px card text
   area at the 1200px container, so the base 2rem h3 clips at the card
   edge. Step the size down so the longest word fits on one line, with
   hyphenation as a backstop for the narrower 901–1180px window. */
@media (min-width: 901px) {
    #process .grid-4 > .glass-panel h3 {
        font-size: 1.2rem;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* --- F. Highlighted comparison column soft sheen --- */
.comparison-table th.highlight-col,
.comparison-table td.highlight-col {
    position: relative;
    overflow: hidden;
}
.comparison-table th.highlight-col::after,
.comparison-table td.highlight-col::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(110deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    animation: tableSheen 9s ease-in-out infinite;
}
/* Header cell sweep is more subtle since text is white-on-blue */
.comparison-table th.highlight-col::after {
    background: linear-gradient(110deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0) 100%);
}
/* Stagger delays create a top-to-bottom flow down the column */
.comparison-table thead .highlight-col::after                  { animation-delay: 0s; }
.comparison-table tbody tr:nth-child(1) .highlight-col::after  { animation-delay: 0.4s; }
.comparison-table tbody tr:nth-child(2) .highlight-col::after  { animation-delay: 0.8s; }
.comparison-table tbody tr:nth-child(3) .highlight-col::after  { animation-delay: 1.2s; }
.comparison-table tbody tr:nth-child(4) .highlight-col::after  { animation-delay: 1.6s; }
.comparison-table tbody tr:nth-child(5) .highlight-col::after  { animation-delay: 2.0s; }
@keyframes tableSheen {
    0%   { left: -120%; }
    55%  { left: 160%; }
    100% { left: 160%; }
}
@media (max-width: 768px) {
    .comparison-table th.highlight-col::after,
    .comparison-table td.highlight-col::after {
        display: none;
    }
}

/* --- G. Form micro-interactions --- */
.radio-pill span {
    transition: background-color 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.radio-pill input:checked + span {
    transform: translateY(-1px);
    animation: radioSelect 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes radioSelect {
    0%   { transform: scale(0.96) translateY(0); }
    55%  { transform: scale(1.06) translateY(-2px); }
    100% { transform: scale(1) translateY(-1px); }
}
.form-input {
    transition: border-color 0.3s ease,
                box-shadow 0.3s ease,
                transform 0.25s ease;
}
.form-input:focus {
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px rgba(var(--trust-rgb), 0.10),
                0 8px 24px -8px rgba(var(--trust-rgb), 0.18);
}
.form-input:hover:not(:focus) {
    border-color: rgba(var(--trust-rgb), 0.4);
}
/* Submit button loading state, applied by JS on form submit */
.btn-primary.is-loading {
    pointer-events: none;
    opacity: 0.85;
    animation: none;
}
.btn-primary.is-loading::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 0.65rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    vertical-align: -2px;
    animation: btnSpin 0.8s linear infinite;
}
@keyframes btnSpin {
    to { transform: rotate(360deg); }
}

/* --- H. prefers-reduced-motion safeguards --- */
@media (prefers-reduced-motion: reduce) {
    .hero-particle-canvas { display: none; }
    .glass-panel::before,
    .glass-panel-dark::before,
    .comparison-table th.highlight-col::after,
    .comparison-table td.highlight-col::after { display: none; }
    .btn-pulse { animation: none; }
    .reveal-target {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .radio-pill input:checked + span { animation: none; }
    .btn-primary.is-loading::before { animation: none; }
    header { animation: none; }
}

/* ==========================================================================
   SERVICE AREA CALLOUT
   Used by the #service-area section. Sits inside .glass-panel-dark so it
   inherits the existing dark glass styling, shine, and reveal animation.
   ========================================================================== */
.service-area-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--trust-blue-light);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 1.25rem;
}
.service-area-eyebrow i { font-size: 1rem; }

.service-area-cities {
    max-width: 820px;
    margin: 2.25rem auto 2.75rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.4px;
    line-height: 2.2;
    color: rgba(255, 253, 245, 0.92);
}
.service-area-cities span { white-space: nowrap; }
.service-area-cities .sep {
    color: var(--trust-blue-light);
    opacity: 0.45;
    margin: 0 0.55rem;
    font-weight: 400;
}

/* Light CTA: high-contrast cream button for use on the dark navy panel */
.btn-cta-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.05rem 2.75rem;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    background: var(--cream-white);
    color: var(--deep-navy);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28),
                0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.35s ease;
    border: none;
    cursor: pointer;
}
.btn-cta-light:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36),
                0 0 0 1px rgba(255, 255, 255, 0.18);
    color: var(--deep-navy);
}

@media (max-width: 600px) {
    .service-area-cities { font-size: 0.92rem; line-height: 2.1; }
    .service-area-cities .sep { margin: 0 0.35rem; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-cta-light { transition: none; }
}

/* ==========================================================================
   HERO ZIP QUICK-CHECK
   --------------------------------------------------------------------------
   Compact secondary conversion card inside the hero glass panel.
   On submit, scrolls the user to #availability and prefills #quoteZip.
   Uses .btn .btn-primary for the button so it inherits the brand pulse,
   hover lift, and color tokens defined elsewhere.
   ========================================================================== */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Honeypot field — invisible to humans, present in DOM for naive bots.
   Avoids display:none / visibility:hidden so simple bot detectors are
   less likely to skip it. */
.hp-field {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.zip-check {
    max-width: 560px;
    margin: 2.25rem auto 0;
    padding: 1.75rem 1.5rem;
    background: linear-gradient(180deg, rgba(var(--trust-light-rgb), 0.75) 0%, rgba(255, 253, 245, 0.55) 100%);
    border: 1px solid rgba(var(--trust-rgb), 0.18);
    border-radius: 20px;
    box-shadow: 0 10px 28px -14px rgba(var(--trust-rgb), 0.25);
    text-align: left;
}
.zip-check .zip-check-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--deep-navy);
    margin: 0 0 0.5rem;
    letter-spacing: 0;
    text-shadow: none; /* override the global h3 shadow */
    line-height: 1.3;
}
.zip-check > p {
    font-size: 0.92rem;
    color: var(--text-grey);
    line-height: 1.55;
    margin: 0 0 1.25rem;
    font-weight: 400;
}
.zip-check-form {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: stretch;
}
.zip-check-input {
    flex: 1 1 180px;
    min-width: 0;
    padding: 0.9rem 1.2rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid rgba(var(--trust-rgb), 0.25);
    background: var(--pure-white);
    border-radius: 50px;
    color: var(--deep-navy);
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.zip-check-input::placeholder { color: #94a3b8; }
.zip-check-input:focus {
    outline: none;
    border-color: var(--trust-blue);
    box-shadow: 0 0 0 4px rgba(var(--trust-rgb), 0.14),
                0 6px 18px -8px rgba(var(--trust-rgb), 0.2);
    transform: translateY(-1px);
}
.zip-check-form .btn-primary {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.9rem 1.6rem;
}
/* Brief flash so users see their ZIP land in the main form after handoff */
.zip-check-prefilled {
    animation: zipPrefillFlash 1.2s ease-out;
}
@keyframes zipPrefillFlash {
    0%   { box-shadow: 0 0 0 0   rgba(var(--trust-rgb), 0.0); }
    30%  { box-shadow: 0 0 0 6px rgba(var(--trust-rgb), 0.18); }
    100% { box-shadow: 0 0 0 0   rgba(var(--trust-rgb), 0.0); }
}

/* Result region — populated after the user submits a ZIP */
.zip-check-result {
    margin-top: 1.1rem;
    padding: 0.95rem 1.1rem;
    border-radius: 14px;
    font-size: 0.95rem;
    line-height: 1.55;
    animation: zipResultIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.zip-check-result[hidden] { display: none; }
.zip-check-result strong { font-weight: 800; }
.zip-check-result a {
    color: var(--trust-blue-dark);
    font-weight: 700;
    text-decoration: underline;
}
.zip-check-result a:hover { color: var(--trust-blue); }
.zip-check-result .result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    margin-right: 0.55rem;
    font-size: 0.8rem;
    vertical-align: -7px;
    color: #fff;
    flex-shrink: 0;
}
/* Positive: brand blue */
.zip-check-result.is-positive {
    background: rgba(var(--trust-rgb), 0.07);
    border: 1px solid rgba(var(--trust-rgb), 0.25);
    color: var(--deep-navy);
}
.zip-check-result.is-positive .result-icon {
    background: var(--trust-blue);
}
/* Negative: warm gold (informative, not alarming) */
.zip-check-result.is-negative {
    background: rgba(214, 158, 46, 0.10);
    border: 1px solid rgba(214, 158, 46, 0.35);
    color: #744210;
}
.zip-check-result.is-negative .result-icon {
    background: var(--accent-gold);
}
@keyframes zipResultIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .zip-check {
        padding: 1.5rem 1.25rem;
        margin-top: 2rem;
        border-radius: 16px;
    }
    .zip-check-form { flex-direction: column; }
    .zip-check-form .btn-primary { width: 100%; }
    /* Without this override, flex: 1 1 180px gets interpreted as height
       once the form switches to column flow, ballooning the input. */
    .zip-check-input { flex: 0 0 auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .zip-check-input { transition: none; }
    .zip-check-prefilled { animation: none; }
    .zip-check-result { animation: none; }
}

/* ==========================================================================
   PHONE CTAs — desktop nav + mobile sticky bottom bar
   --------------------------------------------------------------------------
   Desktop:  .nav-phone is a quiet pill in the nav, secondary to .btn-financing.
   Mobile:   .mobile-cta-bar is a fixed full-width Call Now bar at the bottom
             of the viewport. Always visible below 768px and respects iPhone
             safe-area insets.
   ========================================================================== */

/* --- Desktop: quiet phone pill in the navbar --- */
.nav-links .nav-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.15rem;
    /* Inherits .nav-links a margin-left: 2.5rem */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50px;
    color: var(--cream-white);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.nav-links .nav-phone i { font-size: 0.8rem; opacity: 0.9; }
.nav-links .nav-phone:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--pure-white);
    transform: translateY(-1px);
}
/* Trim a touch of horizontal margin on mid-desktop widths so the row fits */
@media (max-width: 1080px) {
    .nav-links .nav-phone { margin-left: 1.25rem; padding: 0.45rem 0.95rem; }
}

/* --- Mobile sticky bottom CTA bar --- */
.mobile-cta-bar { display: none; }

@media (max-width: 768px) {
    .mobile-cta-bar {
        /* Always visible, anchored to the bottom of the viewport */
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200; /* above sticky nav (1100), below modals (2000) */
        padding: 0.7rem 0.85rem;
        /* Account for iPhone home indicator / Android gesture bar */
        padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(var(--trust-rgb), 0.12);
        box-shadow: 0 -8px 24px -8px rgba(var(--trust-rgb), 0.18);
    }
    /* Single-button layout: span the full bar width, centered */
    .mobile-cta-bar__btn {
        flex: 1 1 100%;
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        padding: 1rem 1rem;
        border-radius: 50px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0.3px;
        text-decoration: none;
        white-space: nowrap;
        transition: transform 0.15s ease, box-shadow 0.2s ease;
    }
    .mobile-cta-bar__btn i { font-size: 1rem; }
    /* Now the dominant single action: filled trust-blue */
    .mobile-cta-bar__btn--call {
        background: var(--trust-blue-dark);
        color: var(--pure-white);
        box-shadow: 0 6px 16px rgba(var(--trust-dark-rgb), 0.30);
    }
    .mobile-cta-bar__btn--call:hover,
    .mobile-cta-bar__btn--call:focus {
        background: var(--trust-blue);
        color: var(--pure-white);
    }
    .mobile-cta-bar__btn:active { transform: translateY(1px); }

    /* Reserve room at the bottom of the page so the bar never covers the form,
       footer copy, or other content. ~84px bar + iPhone safe-area inset. */
    body {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
    /* When the mobile keyboard pushes a focused field upward, the browser
       scrolls it into view. scroll-padding-bottom keeps the field sitting
       comfortably above the fixed Call Now bar instead of behind it. */
    html {
        scroll-padding-bottom: 110px;
    }
}

/* --- Even narrower phones: tighten padding a hair --- */
@media (max-width: 360px) {
    .mobile-cta-bar { padding: 0.6rem 0.65rem; }
    .mobile-cta-bar__btn {
        padding: 0.9rem 0.6rem;
        font-size: 0.95rem;
        letter-spacing: 0.2px;
    }
}

/* ==========================================================================
   MOBILE FORMAT POLISH PASS
   --------------------------------------------------------------------------
   Layered on top of existing 900/768/600/360 breakpoints. Tightens spacing,
   sizes type for thumbs and small viewports, and overrides inline styles
   that previously locked desktop dimensions onto phones.
     - 768px: tablet/phone boundary — section rhythm + container padding tighten
     - 600px: small phones — typography scales, grids stack, touch targets grow
     - 380px: ultra-narrow phones — final headline + padding compaction
   !important is used only to defeat inline style attributes that can't be
   reached otherwise (process cards, name-grid, #availability bottom padding).
   ========================================================================== */

@media (max-width: 768px) {
    /* Section rhythm: cut the giant 6rem vertical padding nearly in half */
    .section-spacer { padding: 3.5rem 0; }

    /* Container hugs the viewport more on phones */
    .container { padding: 0 1.25rem; }

    /* Hero: less air above the headline so it lives above the fold */
    .hero { padding: 3rem 0 2rem; }

    /* Hero typography pacing for phone reading */
    .hero h1 { font-size: 2.6rem; letter-spacing: 0; line-height: 1.12; }
    .hero p { font-size: 1.05rem; }
    .hero-concrete-line { font-size: 0.95rem; margin-bottom: 2rem; }

    /* Override the inline padding-bottom: 8rem on the qualification section
       so the new mobile bar's 80px reserved padding isn't doubled up */
    #availability.section-spacer { padding-bottom: 3rem !important; }

    /* Process cards (inline padding: 2.5rem) lose a touch on mobile */
    #process .grid-4 > .glass-panel { padding: 1.75rem !important; }
    #process .grid-4 > .glass-panel > span:first-child {
        font-size: 2.6rem !important; /* override inline 3.5rem numerals */
    }

    /* FAQ + Senior Savings + similar h2 hairline reduction */
    h2 { font-size: 2rem; line-height: 1.2; }
    h3 { font-size: 1.55rem; }

    /* Footer breathing room reduced */
    footer { padding: 3rem 0; margin-top: 3rem; }
    footer img { height: 100px !important; }
}

@media (max-width: 600px) {
    /* Even tighter container for sub-iPhone-Pro widths */
    .container { padding: 0 1rem; }

    /* Glass panel inner padding compresses (existing 900px rule sets 2rem;
       at 600 we drop to 1.5rem so cards have more usable text width) */
    .glass-panel { padding: 1.75rem 1.5rem; }
    .glass-panel-dark { padding: 1.75rem 1.5rem; }

    /* Hero: final size step for narrow phones */
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1rem; line-height: 1.6; }
    .hero-support-line { font-size: 0.78rem; letter-spacing: 0.4px; }

    /* Stack the inline 1fr 1fr name grid into a single column.
       Targets the inline style attribute since the wrapper has no class. */
    #quoteForm div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Radio pills: meet 44px touch target minimum + a hair more breathing */
    .radio-pill span {
        padding: 0.95rem 1.35rem;
        font-size: 0.95rem;
    }
    .radio-group { gap: 0.65rem; }

    /* Form inputs: bump tap height; keep typography readable */
    .form-input {
        padding: 1rem 1.1rem;
        font-size: 1rem;
    }

    /* Comparison table: a bit more density for narrow viewports */
    .comparison-table th, .comparison-table td {
        padding: 0.85rem 0.6rem;
        font-size: 0.82rem;
    }

    /* Trim the 2.5rem section margins on inline lists/cards a little */
    .qualifier-section { margin-bottom: 2rem; padding-bottom: 2rem; }

    /* Section spacing compresses one more notch */
    .section-spacer { padding: 2.75rem 0; }

    /* Process numerals one more step down */
    #process .grid-4 > .glass-panel > span:first-child {
        font-size: 2.25rem !important;
    }

    /* Service-area city row: shrink and tighten so it doesn't dominate */
    .service-area-cities { font-size: 0.88rem; line-height: 1.95; }

    /* Hero ZIP card padding aligns with the new card padding */
    .zip-check { padding: 1.35rem 1.1rem; }
    .zip-check .zip-check-title { font-size: 1.05rem; }
    .zip-check > p { font-size: 0.88rem; }
}

@media (max-width: 380px) {
    /* Ultra-narrow phones (iPhone SE 1st gen, older Androids) */
    .container { padding: 0 0.85rem; }
    .hero h1 { font-size: 2rem; letter-spacing: 0; }
    h2 { font-size: 1.7rem; }
    .glass-panel,
    .glass-panel-dark { padding: 1.5rem 1.15rem; }
    .btn { padding: 0.95rem 1.5rem; font-size: 0.95rem; }
    /* Form qualifier titles smaller so they don't wrap mid-word */
    .qualifier-title { font-size: 1rem; }
}

/* ==========================================================================
   TRUST STRIP — visual proof points below the partner trust bar
   --------------------------------------------------------------------------
   Six icon cards: Licensed GC, Aging-in-Place, Walk-In Showers, Safety
   Packages, Financing, Local Consultation. Single horizontal row on
   desktop, 3 cols on tablet, stacked on mobile (icon-left layout).
   ========================================================================== */

.trust-strip {
    padding: 2.5rem 0 3.5rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--wash-2) 100%);
    border-bottom: 1px solid rgba(var(--trust-rgb), 0.06);
}
.trust-strip-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.trust-strip-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--cream-white);
    border: 1px solid rgba(var(--trust-rgb), 0.12);
    border-radius: 16px;
    padding: 1.5rem 0.85rem;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}
.trust-strip-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--trust-rgb), 0.28);
    box-shadow: 0 10px 24px -10px rgba(var(--trust-rgb), 0.20);
}
.trust-strip-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--trust-blue-light);
    color: var(--trust-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 0.85rem;
    flex-shrink: 0;
}
.trust-strip-icon img {
    width: 65%;
    height: 65%;
    object-fit: contain;
    display: block;
}

/* ===== Standard icon placeholder (stands in for every icon) ===== */
.icon-ph {
    display: inline-block;
    line-height: 1;
    vertical-align: -0.05em;
}
.icon-ph::before {
    content: "\2605"; /* solid star placeholder — marks each spot that still needs a real icon */
    color: #d69e2e;
}
.trust-strip-icon .icon-ph { font-size: 1.6rem; }

/* ===== Branded photo placeholders (real stairlift photography drops in later) ===== */
.photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    text-align: center;
    padding: 1.5rem;
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.65), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, var(--trust-blue-light) 0%, #ffffff 100%);
    border: 1px solid rgba(var(--trust-rgb), 0.12);
    border-radius: 16px;
    color: var(--trust-blue-dark);
}
.photo-placeholder--feature { min-height: 180px; }
.photo-placeholder--tall { min-height: 200px; }
/* Fill the fixed-ratio service-card media well */
.service-card-media .photo-placeholder { width: 100%; height: 100%; border: none; border-radius: 12px; }

/* ===== Shared product-media utilities (sync one place across product pages) ===== */
.hero-product-media {
    display: block;
    width: 80%;
    max-width: 640px;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 18px 40px -12px rgba(var(--trust-rgb), 0.28);
}
.section-product-media {
    display: block;
    width: 100%;
    max-width: 600px;
    min-height: 320px;
    margin: 0 auto 4rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px -5px rgba(var(--trust-rgb), 0.1);
}
/* Real image variant fills the well at native 16:9 (no crop, no layout shift) */
img.section-product-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
}
.section-product-media--sm {
    max-width: 300px;
    min-height: 180px;
    margin-bottom: 1.5rem;
    box-shadow: none;
}
.card-product-media {
    width: 100%;
    min-height: 200px;
    margin-bottom: 1.5rem;
    border-radius: 16px;
}

/* ===== Visible keyboard focus state (WCAG 2.4.7) ===== */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-cta-light:focus-visible,
.btn-financing:focus-visible,
.service-card-cta:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--radiant-gold);
    outline-offset: 3px;
    border-radius: 4px;
}
.radio-pill input:focus-visible + span {
    outline: 3px solid var(--radiant-gold);
    outline-offset: 3px;
}
/* Dark-panel variant for the differentiation section */
.glass-panel-dark .photo-placeholder {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--cream-white);
}
.trust-strip-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--deep-navy);
    line-height: 1.35;
    letter-spacing: 0;
    margin: 0;
}

/* Tablet: 3 columns × 2 rows */
@media (max-width: 1080px) {
    .trust-strip-grid { grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
}
/* Mobile: stacked single column with horizontal icon-left card layout */
@media (max-width: 600px) {
    .trust-strip { padding: 2rem 0 2.5rem; }
    .trust-strip-grid { grid-template-columns: 1fr; gap: 0.65rem; }
    .trust-strip-card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 1rem 1.15rem;
        gap: 1rem;
    }
    .trust-strip-icon {
        width: 44px;
        height: 44px;
        font-size: 1.05rem;
        margin-bottom: 0;
    }
    .trust-strip-label { font-size: 0.95rem; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
    .trust-strip-card { transition: none; }
}

/* ==========================================================================
   SERVICE SELECTOR — four-card row that funnels into the qualification form
   --------------------------------------------------------------------------
   Cards reuse .glass-panel for the brand glass look (shine, top gloss,
   reveal animation), then override padding for card-appropriate sizing.
   Each CTA carries data-service so the form's hidden #quoteService input
   can be prefilled before the smooth-scroll anchors to #availability.
   ========================================================================== */

.brand-name { font-style: italic; }

.services-header { margin-bottom: 2.75rem; }
.services-header h2 { margin-bottom: 0.85rem; }
.services-header p {
    max-width: 740px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--text-grey);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
}

/* Card itself — applied alongside .glass-panel; overrides its 3.5rem padding
   and reshapes the layout so media + copy + CTA align cleanly. */
.service-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.service-card:hover {
    /* Glass-panel already lifts on hover; we only adjust subtleties */
    border-color: rgba(var(--trust-rgb), 0.18);
}

/* Placeholder media area — replace inner contents with <img> when ready. */
.service-card-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--trust-blue-light); /* fallback while image loads */
    border-radius: 12px;
    margin-bottom: 1.25rem;
    overflow: hidden;
    position: relative;
}
.service-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.service-card:hover .service-card-media img {
    transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
    .service-card-media img,
    .service-card:hover .service-card-media img { transition: none; transform: none; }
}

.service-card-title {
    font-size: 1.25rem;
    margin: 0 0 0.6rem;
    color: var(--deep-navy);
    line-height: 1.25;
    text-shadow: none;
}
.service-card-desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-grey);
    margin: 0 0 1.4rem;
    flex-grow: 1; /* push the CTA to the bottom for even card heights */
    font-weight: 400;
}
.service-card-cta {
    align-self: stretch;
    text-align: center;
    padding: 0.9rem 1.1rem;
    font-size: 0.92rem;
    letter-spacing: 0.3px;
    animation: none; /* no pulse on these — keep the hero CTA the loudest */
}

/* Tablet: 2 columns × 2 rows */
@media (max-width: 1080px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
/* Mobile: stacked single column */
@media (max-width: 600px) {
    .services-grid { grid-template-columns: 1fr; gap: 1.15rem; }
    .service-card { padding: 1.25rem; }
    .service-card-title { font-size: 1.15rem; }
    .service-card-desc { font-size: 0.9rem; margin-bottom: 1.15rem; }
    .services-header { margin-bottom: 2rem; }
    .services-header p { font-size: 1rem; }
}

/* ==========================================================================
   CURRENT OFFERS — voucher-strip layout (intentionally NOT another card grid)
   --------------------------------------------------------------------------
   Three offers stack vertically inside one bordered "ticket book" with
   dashed-line dividers between them. Each row pairs a left value badge
   (gold for the discount, soft blue for the others) with a title +
   description on the right. Distinct visual rhythm from the .glass-panel
   grids elsewhere on the page.
   ========================================================================== */

.offers-section {
    /* Soft warm-cream background distinguishes this section from the
       blue/white sections above and below. */
    background: linear-gradient(180deg, #fffaf0 0%, #fffdf5 100%);
}

.offers-header { margin-bottom: 3rem; }
.offers-header h2 { margin-bottom: 0.85rem; }
.offers-header p {
    max-width: 740px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--text-grey);
}

/* The "ticket book" wrapper — single bordered card holding all three offers */
.offers-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 920px;
    background: var(--cream-white);
    border: 1px solid rgba(var(--trust-rgb), 0.14);
    border-radius: 20px;
    box-shadow: 0 14px 36px -18px rgba(var(--trust-rgb), 0.20);
    overflow: hidden;
}

.offer-row {
    display: flex;
    align-items: stretch;
    gap: 1.75rem;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px dashed rgba(var(--trust-rgb), 0.20);
    background: transparent;
    transition: background 0.3s ease;
}
.offer-row:last-child { border-bottom: none; }
.offer-row:hover { background: rgba(var(--trust-light-rgb), 0.28); }

/* Left value badge — like a coupon stub */
.offer-row-badge {
    flex: 0 0 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 0.85rem 0.5rem;
    text-align: center;
    background: var(--trust-blue-light);
    color: var(--trust-blue);
    border: 1.5px solid rgba(var(--trust-rgb), 0.20);
}
.offer-row-badge-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}
.offer-row-badge-icon {
    font-size: 1.55rem;
    margin-bottom: 0.35rem;
}
.offer-row-badge-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: 0.2rem;
    opacity: 0.85;
}

/* Gold variant — only for the headline discount offer */
.offer-row--gold .offer-row-badge {
    background: #fff8e1;
    color: #975a16;
    border-color: rgba(214, 158, 46, 0.45);
}

/* Right body — title + description */
.offer-row-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.offer-row-title {
    font-size: 1.25rem;
    margin: 0 0 0.45rem;
    color: var(--deep-navy);
    line-height: 1.25;
    text-shadow: none;
}
.offer-row-text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-grey);
    margin: 0;
    font-weight: 400;
}

/* CTA + disclaimer below the ticket book */
.offers-cta-wrapper { margin-top: 2.5rem; }
.offers-cta { padding: 1.05rem 2.75rem; font-size: 1rem; }
.offers-disclaimer {
    margin: 1rem auto 0;
    font-size: 0.78rem;
    color: var(--text-grey);
    opacity: 0.7;
    max-width: 620px;
    line-height: 1.55;
}

/* Mobile: badge sits on top of the body, dividers shrink, padding tightens */
@media (max-width: 600px) {
    .offers-list { border-radius: 16px; }
    .offer-row {
        flex-direction: column;
        gap: 0.85rem;
        padding: 1.25rem;
        align-items: flex-start;
    }
    .offer-row-badge {
        flex: 0 0 auto;
        flex-direction: row;
        gap: 0.55rem;
        padding: 0.45rem 0.85rem;
        align-self: flex-start;
    }
    .offer-row-badge-value { font-size: 1.35rem; }
    .offer-row-badge-icon { font-size: 1.15rem; margin-bottom: 0; }
    .offer-row-badge-label { margin-top: 0; font-size: 0.68rem; }
    .offer-row-title { font-size: 1.1rem; }
    .offer-row-text { font-size: 0.9rem; }
    .offers-header { margin-bottom: 2.25rem; }
    .offers-header p { font-size: 1rem; }
    .offers-cta-wrapper { margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .offer-row { transition: none; }
}

/* ==========================================================================
   WORKMANSHIP CLARIFICATION — sits below the comparison table, supports
   the "1-Year Workmanship Warranty" row with documented context. Two-column
   editorial layout (text + small certified card) so it reads differently
   from the surrounding card grids.
   ========================================================================== */

.workmanship-section {
    /* Soft blue tint, slightly different from the #advantage section above
       so the eye registers a section change without a hard visual break. */
    background: linear-gradient(180deg, #ffffff 0%, var(--wash-1) 100%);
}

.workmanship-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
}

.workmanship-text h2 {
    margin: 0 0 1rem;
    font-size: 2.2rem;
    line-height: 1.2;
}
.workmanship-text p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-grey);
    margin: 0;
}

/* Supporting "documented" card — feels like a small certificate/seal */
.workmanship-card {
    position: relative;
    background: var(--cream-white);
    border: 1px solid rgba(var(--trust-rgb), 0.18);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    box-shadow: 0 14px 36px -18px rgba(var(--trust-rgb), 0.22);
    text-align: left;
}
/* Quiet trust-blue accent stripe along the top, like a document header */
.workmanship-card::before {
    content: '';
    position: absolute;
    top: 0; left: 1.75rem; right: 1.75rem;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(var(--trust-rgb), 0) 0%,
        rgba(var(--trust-rgb), 0.55) 50%,
        rgba(var(--trust-rgb), 0) 100%);
    border-radius: 0 0 3px 3px;
}
.workmanship-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--trust-blue-light);
    color: var(--trust-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.workmanship-card-title {
    font-size: 1.15rem;
    margin: 0 0 0.6rem;
    color: var(--deep-navy);
    line-height: 1.25;
    text-shadow: none;
    letter-spacing: 0;
}
.workmanship-card-text {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-grey);
    margin: 0;
    font-weight: 400;
}

/* Tablet: stacked, but text + card still feel paired */
@media (max-width: 900px) {
    .workmanship-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 640px;
    }
    .workmanship-text h2 { font-size: 1.85rem; }
}
@media (max-width: 600px) {
    .workmanship-text h2 { font-size: 1.6rem; }
    .workmanship-text p { font-size: 0.98rem; line-height: 1.6; }
    .workmanship-card { padding: 1.5rem 1.25rem; }
    .workmanship-card::before { left: 1.25rem; right: 1.25rem; }
}


/* =========================================================
   PRODUCT-SPECIFIC BRAND FLARE
   Purpose: add light service-specific color personality while
   preserving the AITCOH blue-based master template.
   Do not change layout, spacing, grids, nav, footer, forms,
   modals, or responsive behavior here.
   ========================================================= */

.product-stairlifts {
    --product-accent: #b39dcb; /* matches stairlifts logo lavender */
    --product-accent-soft: #f1ecf9;
    --product-accent-muted: rgba(179, 157, 203, 0.16);
    --product-accent-border: rgba(179, 157, 203, 0.36);
    /* Re-theme the blue trust palette to the ad's purple family
       (contrast-safe: white text passes AA on both shades) */
    --trust-blue: #6350a0;
    --trust-blue-dark: #4f3b78;
    --trust-blue-light: #ece7f6;
    --trust-rgb: 99, 80, 160;
    --trust-dark-rgb: 79, 59, 120;
    --wash-1: #f6f3fb;
    --wash-2: #faf8fd;
    --wash-rgb: 238, 233, 247;
    --trust-light-rgb: 236, 231, 246;
}

/* Hero atmosphere + motif (behind the frosted card) */
.product-stairlifts .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 22%, rgba(179, 157, 219, 0.15), transparent 30%),
        radial-gradient(circle at 82% 30%, rgba(14, 42, 71, 0.10), transparent 34%);
}
.product-stairlifts .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(135deg, rgba(179, 157, 219, 0.08) 0, rgba(179, 157, 219, 0.08) 1px, transparent 1px, transparent 14px);
}

/* Reusable accent utilities (available where markup opts in) */
.product-page .product-accent-line {
    background: linear-gradient(90deg, var(--trust-blue), var(--product-accent), var(--radiant-gold));
}
.product-page .product-accent-soft {
    background: linear-gradient(180deg, var(--pure-white) 0%, var(--product-accent-soft) 100%);
}
.product-page .product-accent-border { border-color: var(--product-accent-border); }
.product-page .product-accent-icon { background: var(--product-accent-muted); color: var(--product-accent); }

/* Service cards: thin top accent line (no size change) + accent hover ring */
.product-page .service-card {
    box-shadow: var(--glass-shadow), inset 0 3px 0 var(--product-accent-border);
}
.product-page .service-card:hover {
    box-shadow:
        0 20px 50px -25px rgba(14, 42, 71, 0.24),
        0 0 0 1px var(--product-accent-border),
        inset 0 3px 0 var(--product-accent-border);
}

/* Trust-strip icon circles: soft service tint (star stays gold) */
.product-page .trust-strip-icon {
    background: var(--product-accent-muted);
    border: 1px solid var(--product-accent-border);
}

/* Preferred comparison column: accent cap on the header (keeps the blue rails) */
.product-page .comparison-table th.highlight-col {
    border-top-color: var(--product-accent);
}

/* CTA hover: subtle accent glow (keeps the existing lift transform) */
.product-page .btn-primary:hover,
.product-page .offers-cta:hover,
.product-page .service-card-cta:hover {
    box-shadow:
        0 14px 30px -18px var(--product-accent),
        0 8px 24px -18px rgba(14, 42, 71, 0.35);
}


/* =========================================================
   OUTLINED ICON SYSTEM (Lucide-style, inline SVG, currentColor)
   ========================================================= */
.icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    background: var(--product-accent-muted);
    border: 1px solid var(--product-accent-border);
    color: var(--product-accent);
}
.icon-badge svg {
    width: 26px;
    height: 26px;
    stroke-width: 2;
}


/* =========================================================
   PRODUCT ACCENT PASS 2 (2026-07): visible service color.
   Blue stays dominant; the accent marks section starts,
   media frames, and process timing. All colors via the
   --product-accent variables, so this block is identical
   across the three product pages.
   ========================================================= */

/* Section heading marker: slim tri-color bar under core section H2s */
.product-page #services h2:first-of-type::after,
.product-page #why-streamlined h2:first-of-type::after,
.product-page #advantage h2:first-of-type::after,
.product-page #workmanship h2:first-of-type::after,
.product-page #aging-in-place h2:first-of-type::after,
.product-page #savings h2:first-of-type::after,
.product-page #service-area h2:first-of-type::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    margin: 0.9rem auto 0;
    background: linear-gradient(90deg, var(--trust-blue), var(--product-accent), var(--radiant-gold));
}

/* Workmanship heading is left-aligned; anchor its bar left */
.product-page #workmanship h2:first-of-type::after {
    margin-left: 0;
}

/* Centered headings (process, FAQ) get a centered bar */
.product-page h2.text-center::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    margin: 0.9rem auto 0;
    background: linear-gradient(90deg, var(--trust-blue), var(--product-accent), var(--radiant-gold));
}

/* Media frames: product-tinted placeholder wash + accent border */
.product-page .photo-placeholder {
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.65), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, var(--trust-blue-light) 0%, var(--product-accent-soft) 55%, #ffffff 100%);
    border-color: var(--product-accent-border);
}

/* Process timing labels: soft accent chip (text stays Trust Blue) */
.product-page .process-time {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--product-accent-muted);
    border: 1px solid var(--product-accent-border);
}


/* =========================================================
   AD-MATCH PASS (2026-07): emotional hero line, C-Easy™
   evaluation section, and the navy + gold financing badge.
   Colors come from the shared tokens so this block is
   identical across the three product pages.
   ========================================================= */

/* Emotional hero eyebrow (Playfair italic, service-tinted) */
.hero-emotional {
    display: block;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--trust-blue);
    margin-bottom: 1rem;
}
/* Accent highlight inside the H1 (mirrors the ad's colored headline) */
.hero h1 .hl { color: var(--trust-blue); }

/* ---- C-Easy™ evaluation section ---- */
.ceasy-section {
    background: linear-gradient(180deg, var(--wash-2) 0%, #ffffff 100%);
    border-top: 1px solid #eef2f6;
    border-bottom: 1px solid #eef2f6;
}
.ceasy-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--deep-navy);
    background: linear-gradient(135deg, #ffe98a, var(--radiant-gold));
    box-shadow: 0 6px 16px -8px rgba(210, 158, 46, 0.6);
    margin-bottom: 1.25rem;
}
.ceasy-deliverable {
    background: #fff;
    border: 1px solid #edf2f7;
    border-radius: 16px;
    padding: 1.5rem;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
.ceasy-deliverable h3 { color: var(--trust-blue); margin-bottom: 0.5rem; font-size: 1.05rem; min-height: 2.6em; }
.ceasy-deliverable p { font-size: 0.92rem; margin-bottom: 0; }
.ceasy-score {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: #fff;
    background: radial-gradient(circle at 50% 30%, var(--trust-blue), var(--trust-blue-dark));
    box-shadow: 0 10px 24px -12px var(--trust-blue);
    border: 3px solid var(--radiant-gold);
}
.ceasy-score b { font-size: 1.8rem; line-height: 1; }
.ceasy-score span { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.85; }

/* ---- Financing badge (navy pill + gold price, mirrors the ad) ---- */
.finance-badge {
    max-width: 460px;
    margin: 0 auto 2.5rem;
    border-radius: 26px;
    padding: 6px;
    border: 3px solid transparent;
    background:
        linear-gradient(var(--deep-navy), var(--deep-navy)) padding-box,
        linear-gradient(135deg, #f6d979, #d4a72c 45%, #f6d979) border-box;
    box-shadow: 0 18px 40px -20px rgba(14, 42, 71, 0.5);
}
.finance-badge__head {
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: 0.3px;
    padding: 0.6rem 1rem 0.7rem;
}
.finance-badge__body {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--cream-white);
    border-radius: 20px;
    padding: 1rem 1.4rem;
}
.finance-badge__label {
    color: var(--deep-navy);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.15;
    text-align: left;
    flex: 1;
}
.finance-badge__price {
    display: flex;
    align-items: flex-start;
    font-weight: 800;
    font-size: 3.4rem;
    line-height: 1;
    background: linear-gradient(180deg, #f4d98a, #d4a72c 55%, #b6851d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.finance-badge__cur { font-size: 1.9rem; margin-top: 0.35rem; }
.finance-badge__cents { font-size: 1.5rem; margin-top: 0.35rem; }
.finance-badge__fine {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-grey);
    opacity: 0.8;
    margin: 0 auto;
    max-width: 520px;
}
@media (max-width: 480px) {
    .finance-badge__body { flex-direction: column; text-align: center; gap: 0.4rem; }
    .finance-badge__label { text-align: center; }
    .finance-badge__price { font-size: 3rem; }
}


/* =========================================================
   SUBTLE MOTION PASS (2026-07): gentle, premium animation.
   Every effect is decorative, slow, and fully disabled
   under prefers-reduced-motion. Identical across the three
   product pages; colors flow from the theme tokens.
   ========================================================= */

/* Hero emotional line: soft entrance on load */
@keyframes emotionalIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-emotional { animation: emotionalIn 0.9s ease-out 0.2s both; }

/* Gold hero seal: slow float (preserves its base tilt) */
@keyframes sealFloat {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50%      { transform: rotate(-5deg) translateY(-7px); }
}
.hero-seal { animation: sealFloat 9s ease-in-out infinite; }
/* Under 600px the seal uses a different base transform — keep it still */
@media (max-width: 600px) {
    .hero-seal { animation: none; }
}

/* Financing badge: periodic glint sweeping the navy header */
.finance-badge__head { position: relative; overflow: hidden; }
.finance-badge__head::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.30) 50%, transparent 100%);
    transform: translateX(-140%) skewX(-14deg);
    animation: badgeGlint 7s ease-in-out infinite;
    pointer-events: none;
}
@keyframes badgeGlint {
    0%, 76%   { transform: translateX(-140%) skewX(-14deg); }
    90%, 100% { transform: translateX(340%) skewX(-14deg); }
}

/* C-Easy readiness dial: gentle breathing glow */
@keyframes scoreBreathe {
    0%, 100% { box-shadow: 0 10px 24px -12px var(--trust-blue); transform: scale(1); }
    50%      { box-shadow: 0 12px 34px -8px var(--trust-blue); transform: scale(1.03); }
}
.ceasy-score { animation: scoreBreathe 4.5s ease-in-out infinite; }

/* Trust-strip icons: soft lift when the card is hovered */
.trust-strip-icon { transition: transform 0.3s ease; }
.trust-strip-card:hover .trust-strip-icon { transform: translateY(-3px); }

/* Flow cue steps: gentle lift on hover */
.flow-step { transition: transform 0.3s ease; }
.flow-step:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .hero-emotional,
    .hero-seal,
    .ceasy-score { animation: none; }
    .finance-badge__head::after { display: none; }
    .trust-strip-icon,
    .flow-step { transition: none; }
}

/* C-Easy™ CTA (brand rule): Radiant Gold gradient, charcoal text — never
   the service color. Portable class shared across AITCOH pages. */
.btn.btn--ceasy {
    background: linear-gradient(180deg, #ffe98a 0%, var(--radiant-gold) 48%, #f2c623 100%);
    color: #2d3748;
    box-shadow: 0 4px 14px rgba(210, 158, 46, 0.35);
}
.btn.btn--ceasy:hover {
    background: linear-gradient(180deg, #fff0a3 0%, #ffe066 48%, #f6cd2e 100%);
    color: #2d3748;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(210, 158, 46, 0.45);
}

/* ---- Budget slider (qualifier Q4) — themed range input ---- */
.budget-field { margin-top: 0.25rem; }
.budget-value {
    display: inline-block;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--trust-blue);
    letter-spacing: -0.5px;
    margin-bottom: 0.85rem;
}
.budget-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background:
        linear-gradient(to right,
            var(--trust-blue) 0%,
            var(--trust-blue) var(--budget-pct, 30%),
            #e2e8f0 var(--budget-pct, 30%),
            #e2e8f0 100%);
    outline: none;
    cursor: pointer;
}
.budget-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--trust-blue-dark);
    border: 3px solid #ffffff;
    box-shadow: 0 2px 10px rgba(var(--trust-dark-rgb), 0.45);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.budget-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.budget-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--trust-rgb), 0.3); }
.budget-range::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--trust-blue-dark);
    border: 3px solid #ffffff;
    box-shadow: 0 2px 10px rgba(var(--trust-dark-rgb), 0.45);
    cursor: pointer;
}
.budget-range::-moz-range-track { height: 8px; border-radius: 999px; background: #e2e8f0; }
.budget-range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--trust-blue); }
.budget-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-grey);
    font-weight: 700;
    margin-top: 0.7rem;
}
.budget-note {
    font-size: 0.85rem;
    color: var(--text-grey);
    opacity: 0.85;
    margin: 0.85rem 0 0;
}